@charset "UTF-8";
/* common */
.swiper-pagination{display:inline-block; position:relative; text-align:center;}
.swiper-pagination-bullet{display:inline-block; position:relative; width:28px; height:5px; margin:0 3px; background:transparent; border:1px solid #fff; border-radius:0;opacity:0.8; vertical-align:top; transition:.2s;}
.swiper-pagination-bullet:focus, .swiper-pagination-bullet:hover{background:#fff;}
.swiper-pagination-bullet-active{background:#fff; }
.swiper-pagination-bullet-active:focus, .swiper-pagination-bullet-active:hover{}
.moreBtn{display:inline-block; position:relative; width:13px; height:13px; text-indent:-999999px; transition:transform .2s;}
.moreBtn:before, .moreBtn:after{content:''; position:absolute; background:#88b2df;}
.moreBtn:before{top:0; left:50%; width:1px; height:100%; margin-left:-0.5px;}
.moreBtn:after{top:50%; left:0; width:100%; height:1px; margin-top:-0.5px;}
.moreBtn:focus, .moreBtn:hover, a:focus .moreBtn, a:hover .moreBtn{transform:rotate(90deg);}

/* visual */
#mainVisual{position:relative; width:100%; margin:0 auto; background:#fff; overflow:hidden;padding:100px 0 140px;}
#mainVisual:after{content:''; clear:both; display:block;}
#mainVisual .inner{height:100%; padding:0;}
#mainVisual .main_txt{position:absolute;float:left;width:calc(100% - 550px);/* margin-top:85px; */top:45%;transform:translateY(-50%);padding-right:40px;z-index:99;}
#mainVisual .main_txt .ti{font-family:'PuradakGentleGothicR','Pretendard Variable','Pretendard','Apple SD Gothic Neo','AppleGothic','FontAwesome',sans-serif;letter-spacing: -0.010em;font-size:5rem;color:#222;font-weight:700;line-height:1.2;margin-bottom:40px;word-break:keep-all;}
#mainVisual .main_txt span{color:#717171;line-height:1.6;font-size:1.375rem;word-break:keep-all;}
#mainVisual .swiper-container{float:right;width:550px;height:678px;}
#mainVisual .bgBox{position:absolute; width:100%; height:100%; top:0;}
#mainVisual .bgBox .inner{height:100%;}
#mainVisual .bgBox .pager{position:absolute; bottom:28px;right:28px;text-align:right;z-index:9;}
#mainVisual .flow{position:absolute;display: flex;white-space: nowrap;overflow: hidden;font-size:8.125rem;letter-spacing:-0.010em;font-weight:700;color:#f8f8f8;height:140px;margin-top:-70px;}
#mainVisual .flow .flow-text {animation: textLoop 20s linear infinite; } 
@keyframes textLoop {
	0% {
	  -webkit-transform: translate3d(0, 0, 0);
	  transform: translate3d(0, 0, 0);
	}
	100% {
	  -webkit-transform: translate3d(-100%, 0, 0);
	  transform: translate3d(-100%, 0, 0);
	}
}


/* contents */
#mainContents{clear:both; position:relative; width:100%; min-width:1200px; margin:0 auto; padding:0; background:url('../images/main/main_con_bg.jpg') no-repeat; background-size:cover;z-index:1;padding:100px 0;}
#mainContents .links{display:flex;}
#mainContents .links li{width:550px;}
#mainContents .links li:first-child{margin-right:80px;}
#mainContents .links li a{display:block;background:#fff;padding:50px 10px;box-shadow:10px 10px 10px rgba(0,0,0,5%);text-align:center;}
#mainContents .links li a:focus,#mainContents .links li a:hover{background:#4e677d;transform:translateY(-15px);}
#mainContents .links li a .ico{display:block;width:45px;height:45px;margin:0 auto 28px;}
#mainContents .links li:first-child a .ico{background:url('../images/main/link_ico_01.png') no-repeat; background-size:100%;}
#mainContents .links li:last-child a .ico{background:url('../images/main/link_ico_02.png') no-repeat; background-size:100%;}
#mainContents .links li:first-child a:focus .ico,#mainContents .links li:first-child a:hover .ico{background:url('../images/main/link_ico_01_white.png') no-repeat; background-size:100%;}
#mainContents .links li:last-child a .ico{background:url('../images/main/link_ico_02.png') no-repeat; background-size:100%;}
#mainContents .links li:last-child a:focus .ico,#mainContents .links li:last-child a:hover .ico{background:url('../images/main/link_ico_02_white.png') no-repeat; background-size:100%;}
#mainContents .links li a strong{font-size:1.375rem;line-height:1.2;color:#444;font-weight:600;display:block;margin-bottom:20px;}
#mainContents .links li a:focus strong,#mainContents .links li a:hover strong{color:#fff;}
#mainContents .links li a span{font-size:1.125rem;line-height:1.6;color:#888;}
#mainContents .links li a:focus span,#mainContents .links li a:hover span{color:#d9e4ee;}
#mainContents .links li a .more{width:45px;height:45px;background:#7093af url('../images/main/link_ico_more.png') no-repeat center center;margin:30px auto 0;border-radius:50%;}
#mainContents .links li a:focus .more,#mainContents .links li a:hover .more{background:#fff url('../images/main/link_ico_more_blue.png') no-repeat center center;}

@media only screen and (max-width:1279px){
	#mainContents{min-width:960px;}

	
	#mainContents .area02 .banner .title{font-size:2.75rem;}
	#mainContents .area02 .banner .txt{margin-left:60px;}

	#mainContents .area04 .layoutLeft{width:65%;}
	#mainContents .area04 .layoutLeft p{margin-top:0;}
	#mainContents .area04 .layoutRight{width:35%;}
}

@media only screen and (max-width:1023px){
	#mainVisual{padding:80px 0 120px;}
	#mainVisual .main_txt{width:50%;margin-top:35px;padding:0 12px;}
	#mainVisual .main_txt .ti{font-size:4.063rem;margin-bottom:28px;}
	#mainVisual .main_txt span{font-size:1.25rem;}
	#mainVisual .swiper-container{width:50%;height:auto;}
	#mainVisual .swiper-container img{width:100%;}
	#mainVisual .bgBox .pager{bottom:20px;right:20px;}
	#mainVisual .flow{font-size:6.755rem;height:120px;margin-top:-60px;}
	
	#mainContents{padding:80px 0;min-width:100%;}
	#mainContents .links{justify-content: space-between;}
	#mainContents .links li{width:48%;}
	#mainContents .links li:first-child{margin-right:0;}
	#mainContents .links li a{padding:40px 10px;}
	#mainContents .links li a .ico{width:42px;height:42px;margin:0 auto 18px;}
	#mainContents .links li a strong{font-size:1.25rem;margin-bottom:14px;}
	#mainContents .links li a .more{width:42px;height:42px;margin:24px auto 0;}
	
}

@media only screen and (max-width:768px){
	#mainVisual{padding:60px 0 0;}
	#mainVisual .main_txt{position:relative;top: inherit;transform: inherit;width:100%;margin-top:0;margin-bottom:28px;}
	#mainVisual .main_txt .ti{font-size:3.625rem;margin-bottom:18px;}
	#mainVisual .main_txt .ti br{display:none !important;}
	#mainVisual .main_txt span br{display:none !important;}
	#mainVisual .swiper-container{width:100%;height:448px;}
	#mainVisual .swiper-container .bg01{background:url('../images/main/main_visual_01.jpg') no-repeat right 50% top 70%; background-size:cover;}
	#mainVisual .swiper-container .bg02{background:url('../images/main/main_visual_02.jpg') no-repeat right 50% top 70%; background-size:cover;}
	#mainVisual .swiper-container img{display:none;}
	#mainVisual .flow{display:none;}
	#mainVisual .bgBox .pager{right:12px;bottom:12px;}
	#mainContents{padding:60px 0;}
	#mainContents .links{flex-wrap: wrap;}
	#mainContents .links li{width:100%;}
	#mainContents .links li:first-child{margin-bottom:28px;}
	#mainContents .links li a:focus, #mainContents .links li a:hover{transform: inherit;}
	
	
}

@media only screen and (max-width:668px){
	#mainVisual .main_txt .ti{font-size:3.125rem;}
	#mainVisual .main_txt span{font-size:1.125rem}
	#mainVisual .swiper-container{height:400px;}
	#mainContents .links li a strong{font-size:1.125rem;}
	#mainContents .links li a span{font-size:1.063rem;}
}

@media only screen and (max-width:540px){
	#mainVisual .main_txt .ti{font-size:2.125rem;}
	#mainVisual .main_txt span{font-size:1.063rem;}
	#mainVisual .swiper-container{height:320px;}
	#mainContents .links li a{padding:34px 10px;}
	#mainContents .links li a .ico{width:38px;height:38px;margin:0 auto 14px;}
	#mainContents .links li a strong{font-size:1.063rem;}
	#mainContents .links li a span{font-size:0.938rem;}
	#mainContents .links li a .more{width:38px;height:38px;margin:20px auto 0px;}

	#footer{padding:30px 0 40px;}
} 

@media only screen and (max-width:480px){
	#mainVisual .swiper-container{height:280px;}
	
}

/* ie hack */
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) and (max-width:768px){
}