/*공통*/
.orenge{color:#e5ae58 ;}
.flex{display: flex; align-items: center;}
.flex.js{justify-content: space-between}

i.fa-triangle{color:#F20707;}
i.fa-triangle.fa-rotate-180{color:#0FA7F6;}
i.fa-hyphen{color:#e5ae58; font-weight: 600; font-size: 1.2em!important;}
.ref{font-size: 0.8em; vertical-align: middle;}
.ref i{font-size: 1em!important; vertical-align: middle; line-height: 1.2em;}

/* 메인슬라이더 */
#visual{position:relative; width:100%; margin:0 auto; position:relative; overflow:hidden; visibility:hidden; height: calc( 100vh - 91px );    display: flex;
	background: url("../img/main/visual_bg.jpg") center/cover;}
a{cursor:pointer}

#visual .inr{position: relative; padding: 80px 0;}
#visual .slogan{color: #fff;position: absolute;z-index:9;left: 0;top: 50%;transform: translateY(-50%);font-size: 1.4em;}
#visual:after{	mix-blend-mode: difference;position: absolute;z-index:2;right: 0%;top: 50%;transform: translateY(-50%);
	content: ""; display: inline-block; width: 50%; height: 100%; background: url(../img/common/icon.png) no-repeat center top / cover; margin-left: 10px;    filter: blur(10px);}

#visual .slogan h3{font-size: 1.7em; font-weight:600; line-height: 1.4em}
#visual .slogan h3 strong{color:#27c9e2;font-weight: 800;  display: block; font-size: 2em;line-height: 1.4em}
#visual .slogan h3 span{color: #ccf5ff;font-weight: 400;  display: block; font-size: 0.8em;line-height: 1.4em; margin-top: 20px}
#visual .slogan h4{margin-top: 20px; line-height: 1.6em; opacity: 0.8;}

#visual .swiper {width: 100%;height: auto;}
#visual .swiper-slide {text-align: center;font-size: 18px;/* background: #fff; display: flex;justify-content: center;align-items: center;*/}
#visual .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}
#visual .swiper {width: 100%;height: 300px;margin-left: auto;margin-right: auto;}
#visual .swiper-slide {background-size: cover;background-position: center;}

#visual{position: relative;}/*
#visual:after{content: ""; display: block; position: absolute; width: 100%; height: 1px; background: #ffffff33; left: 0; bottom: calc(20% + 60px);}*/
#visual .mySwiper2 {height: 80%;width: 60%; float: right;}
#visual .mySwiper2 .swiper-slide img{opacity: 0.1;}
#visual .mySwiper2 .swiper-slide-active img{opacity: 1;}

#visual .mySwiper {box-sizing: border-box;padding: 10px 0;width: calc(100% - 110px);height: 20%;display: flex;align-items: center;justify-content: right;float: right;}

#visual .mySwiper a.link{display: block; color: #fff; padding-right: 40px; margin-left: -100px;}
#visual .mySwiper a.link p{font-size: 1.5em; font-weight: 600; line-height: 1.2em;}
#visual .mySwiper a.link span{opacity: 0.8; font-size: 0.9em; display:block; width: max-content; padding-left: 2px;}
#visual .mySwiper a.link:hover span{opacity: 1;}

#visual .mySwiper .swiper-slide {width: 25%;height: 100%;opacity: 0.4; background:#ffffff; text-align:center; padding: 12px 10px 10px 10px; cursor: pointer;}
#visual .mySwiper .swiper-slide p{font-weight: 800;}
#visual .mySwiper .swiper-slide span{display: block; font-size: 0.75em; opacity: 0.9;}
#visual .mySwiper .swiper-slide-thumb-active {opacity: 1; background:#27c9e2; color:#252E3B;}
#visual .swiper-slide img {display: block;width: 100%;height: 100%;object-fit: cover;}


.scrolldown{position:absolute; background: #161719; bottom:0; left:50%; transform: translate(-50%); z-index:5; width:calc(50% - 600px); min-width:220px; width:-webkit-calc(50% - 600px); font-weight:500; color:#fff; text-align:center; border-radius: 5px 5px 0 0;}
.scrolldown a{position:relative; display:block; position:relative; padding:10px 5px; box-sizing:border-box;}
.scrolldown a > i{position:relative; font-style:normal; font-weight:600; font-size:1em; color: #fff;}
.scrolldown a > i:before{content:""; position:absolute; top:50%; left:-22px; width:14px; height:9px; margin-top:-4.5px; background:url(../img/main/icon_b_arrow.svg) no-repeat 50% 50%; background-size:cover;}
.scrolldown a:before{display:none; content:""; position:absolute; top:50%; left:35px; width:14px; height:9px; margin-top:-4.5px; background:url(../img/main/icon_b_arrow.svg) no-repeat 50% 50%; background-size:cover;}


#container_index #content .inr{padding: 100px 0;}

#content .idx_title{margin-bottom: 60px; max-width: 60%}
#content .idx_title h3{font-size: 2.4em;font-weight: 800;margin-right: 20px;}
#content .idx_title h4{font-size: 2.4em;}
#content .idx_title h3:after{content: ""; display: inline-block; width: 120px; height: 150px; background: url(../img/common/icon.png) no-repeat center top / cover; margin-left: 10px;    filter: blur(5px);}
#content .idx_title a.more{display: inline-block; color: #fff;}

.idx_overview{background: url("../img/main/overview_bg.jpg") no-repeat center/cover; padding: 0px 0;}
.idx_overview .txt{;font-size: 1.2em;}
.idx_overview .txt p{color:#27c9e2;font-size: 2.4em; font-weight: 800; margin-bottom: 40px; line-height: 1.2em;}
.idx_overview .txt span{ line-height: 1.6em; }
.idx_overview .txt span span{ color:#252E3B; font-weight: 600; margin-right: 10px }
#content .idx_motto .idx_title h3:after {display: none}
#content .idx_motto .idx_title h3 span {opacity: 0.4; font-size: 0.6em;text-transform: uppercase;}
.idx_motto{background: transparent linear-gradient(50deg, #27c9e2 0%, #27c9e2 100%) 0% 0% no-repeat padding-box; color: #fff; }
.idx_motto .dl_wrap{display: flex; align-items: ; justify-content: center; }
.idx_motto .dl_wrap > dl{width: 100%; padding: 0 40px;}
.idx_motto .dl_wrap > dl:not(:last-child){border-right: 1px solid #ffffff56;}
.idx_motto .icon{
	width: 120px;
	height: 120px;
	margin: 0 auto 14px;
	box-sizing: border-box;
	text-align: center;
	font-size: 2.5em;
	padding: 20px 0;}
.idx_motto .icon img{width: 100%; height: 100%;}

.idx_motto dt{text-align: center; font-size: 1.7em; margin: 10px 0 10px;}
.idx_motto dd{text-align: center; font-size: 1.2em; opacity: 0.8;}


.idx_company{ color: #475467; position: relative;}
.idx_company:after{content: ""; width: 40%; height: 100%; position: absolute; right: 0; top: 0; bottom: 0; border-radius: 0 0 0 5px ;
	background:  url(../img/main/company_bg.png) no-repeat center top / cover; filter: contrast(0.2) grayscale(1) brightness(1.7);}
.idx_company .txt{margin-bottom: 60px; width: 55%;}
.idx_company .txt h4{ font-size: 1.8em; line-height: 1.4em; font-weight: 800; margin-bottom: 24px;}
.idx_company .txt p{font-size: 1.2em; line-height: 1.6em;}

.idx_cs{background: url("../img/main/cs_bg.jpg") no-repeat center/cover;}
.idx_cs .inr{padding-top: 0!important;/* display: flex; */align-items: flex-end;justify-content: space-between;/* gap: 0; */}
.idx_cs .banner{display: grid;grid-template-columns: 220px 220px;gap: 0;margin-top: -50px;/* margin-right: 140px; */float: left;}
.idx_cs .banner div{display: table; width: 220px; height: 220px;	border-radius: 5px;	overflow: hidden;}
.idx_cs .banner dl{width: 100%; display: table-cell; vertical-align: bottom; aspect-ratio:1/1; padding: 0px 35px 35px 35px; color: #fff; cursor: pointer}
.idx_cs .banner div:nth-of-type(1) dl{background: #27c9e2 ;}
.idx_cs .banner div:nth-of-type(3) dl{background: #000000e3;}
.idx_cs .banner div:nth-of-type(4) dl{background: #27c9e2; color: #475467;}
.idx_cs .banner dl dt{font-size: 1.6em; margin-bottom: 15px; font-weight: 800;}
.idx_cs .banner dl dd{}

.idx_cs .banner div dl:hover{transition: all 0.3s; background: #1a1a1a95; color: #fff;}

.idx_cs .latest{color: #333333;max-width: 600px;width: 600px;float: right;/* display: block; *//* text-align: right; */margin-top: 100px;}

@media (max-width: 1280px) {
	.inr{width: 100%;}

	#idx_company .text-center{padding-left:40px; padding-right:40px; font-size: 0.9em }

	.idx_cs .banner{;grid-template-columns:1fr 1fr 1fr; margin-top: 40px; float: none;}
	.idx_cs .banner > div{width: 100%}
	.idx_cs .banner > div:nth-child(2){display: none;}
	.idx_cs .banner dl{aspect-ratio: auto;}

	.idx_cs .latest{width: 100%; max-width: 100%; float: none; margin-top: 40px;}




}
@media screen and (max-width: 992px) {


	#visual .slogan{font-size: 1.2em;}
	#visual .swiper-slide{font-size: 13px;}
	#visual .swiper-slide img{width: 120%; height: 120%;}
	#visual .mySwiper .swiper-slide{padding: 8px 10px; line-height: 1.2em;}

	#visual .mySwiper2{margin-right: 0%;}

	#hd_wrapper .logo{margin: 19px 0;display: flex;align-items: center;justify-content: space-between;width: calc(100% - 70px);}
	#hd_wrapper .logo > a:first-of-type{margin-right: 10px;}
	#hd_wrapper .logo img{height: 30px;}

	#container_index #content .inr{padding: 100px 0;}
	.idx_overview .txt{font-size: 1.2em;}

	.idx_motto .dl_wrap{display: block;}
	.idx_motto .dl_wrap dl{position: relative; text-align: left; padding: 20px 0 20px 130px; min-height: 140px;}
	.idx_motto .dl_wrap > dl:not(:last-child){border-right:0; border-bottom: 1px solid #ffffff56;}
	.idx_motto .dl_wrap dl .icon{position: absolute; left: 0; top: 0;}

	.idx_motto dt{text-align: left;}
	.idx_motto dd{text-align: left;}
	.idx_company:after {
		width: 45%;
		background: linear-gradient(to left, #fff0, #fff), url(../img/main/company_bg.png) no-repeat center top / cover;
	}
}
@media (max-width:767px){
	#visual,
	#visual .sliderbx,
	#visual .sliderbx li{height:500px;}
	.idx_cs .banner div:nth-of-type(4) dl {color: #fff}
	.idx_cs {background: #f9f9f9; padding-top: 0px!important;}
	.idx_cs .banner {	grid-template-columns: 1fr;	padding: 50px 0 20px;  margin-top: 0px;;}
	.idx_cs .banner > div{		display: block;height: auto;}
	#container_index .inr{padding: 40px 0;}
	#container_index #content .inr{padding: 50px 0;}
	.idx_motto .dl_wrap dl .icon {		height: auto;		margin-bottom: 0;		width: 80px;		padding: 25px 0 0; font-size: 2em	}
	.idx_motto .dl_wrap dl { min-height: unset;padding: 15px 0 15px 80px; font-size: 0.8em}
	.idx_motto .idx_title {margin-bottom: 20px!important;}
	.idx_motto dd br:nth-child(odd) {display: none}
	.idx_motto dt {margin: 0px 0 10px;	}
	#visual .swiper-slide img{width: 120%; height: 120%;}
	#visual .mySwiper .swiper-slide{padding: 8px 10px; line-height: 1.2em;}

	#visual .mySwiper2{margin-right: 0%;}

	#visual:after{display: none;}
	.scrolldown{display: none;}

	.idx_overview .txt{font-size: 1em;}

	.idx_cs .banner dl{padding: 20px; display: inline-block;height: 100%;}
	.idx_cs .banner dl dt{font-size: 1.4em;}

	.idx_company .txt {
		width: 80%;
		z-index: 1;
		position: relative;
	}
	.idx_company .txt p br {
		display: none;
	}
	#content .idx_title {
		 max-width: 100%;
	 }
	#content .idx_title h3:after {
		  position: absolute;
		  z-index: 1;
	  }
}

@media (max-width:600px){
	#visual .sliderbx li{ background-size: auto 100%;}
	#visual .txt{ padding: 0 30px;}

	#visual .slogan{font-size: 1em;}
	#visual .slogan h3 {letter-spacing: -.5px; font-size: 1.4em;}
	#visual .swiper-slide img{width: 160%; height: 160%;}
	#visual .mySwiper2{margin-right: -10%; margin-bottom: -5%;}
	#visual .mySwiper{width: 100%;}
	#visual .mySwiper .swiper-wrapper{display: grid; grid-template-columns: 1fr 1fr; gap: 4px;}
	#visual .mySwiper .swiper-wrapper .swiper-slide{width: 100%!important;}
	#visual .mySwiper a.link{display: none;}

	.idx_company .txt p{font-size: 1.1em;}
	.idx_cs .banner dl dd br{display: none;}


}

@media (max-width:450px){
	#visual .txt.center h3{font-size: 15px;}
	#visual .txt.center h3 strong{font-size: 15px;}
	#visual .txt.center span{font-size: 13px;}
	#visual .txt.center > p{font-size: 25px;}

	#visual .mv02 .txt p{font-size: 20px;}
	#visual .mv03 .txt p{font-size: 20px;}




}