/* 메인슬라이더 */
#visual{width:100%; min-width:1100px; height:100vh; margin:0 auto; position:relative; overflow:hidden; visibility:hidden;}
a{cursor:pointer}

#visual .sliderbx{ z-index:10;width:100% !important; height:100vh; position:relative;}
#visual #slogan{text-align:center; color:#fff; width:1100px; position:absolute; top:50%; left:50%;  z-index:998; transform:translate(-50%, -50%);}
#visual #slogan h2{display:block; margin:0 0 20px; font-size:55px; font-weight:700; color:#fff; line-height:1.3em; word-break:keep-all;}
#visual #slogan span{display:block; font-size:24px; font-weight:400; color:#fff; line-height:1.4em; word-break:keep-all;}
#visual #slogan span b{display:block; font-size:54px; margin: 20px 0 0; font-family: 'Gmarket Sans'; line-height: 1.2em;}
#visual .sliderbx > li{ width:100% !important; height:100vh; background-repeat:no-repeat; background-position: center top; background-size:cover; animation: imagescale 4s ease-in-out infinite alternate; -webkit-animation:imagescale 4s ease-in-out infinite alternate; -moz-animation: imagescale 4s ease-in-out infinite alternate; -o-webkit-animation: imagescale 4s ease-in-out infinite alternate; }
#visual .sliderbx > li.mv01{background:url(../img/main/main_visual01.jpg)no-repeat center; background-size:coer;}
#visual div.bx-pager{display:none; position:absolute; bottom:30px; left:50%; z-index:101; transform:translateX(-50%);}
#visual div.bx-pager div{float:left; margin:0 4px;}
#visual div.bx-pager div a{ display:block; width:12px; height:12px; text-indent:-9999px; border-radius:10px; background:#fff; box-sizing:border-box;}
#visual div.bx-pager div a.active{background:transparent; border:3px solid #fff;}
#visual div.bx-controls-auto{position:absolute; width:40px; top:30px; z-index:2; left:50%; margin-left:470px; }
#visual div.bx-controls-auto a{	float:left; margin-right:3px; width:12px; height:12px; border-radius:9px; color:#FFF; text-align:center; line-height:12px; font-size:12px; text-indent:-9999px;	} /*플레이스탑버튼동시선택*/
#visual div.bx-controls-auto a.bx-start{background:url(../img/common/btn_play.png) no-repeat 50% 50% #4C5365;}
#visual div.bx-controls-auto a.bx-stop{background:url(../img/common/btn_stop.png) no-repeat 50% 50% #4C5365;}
.scrolldown{position:absolute; bottom:0; left:50%; width:100px; height:100px; z-index:52; font-weight:500; color:#fff; text-align:center; transform:translateX(-50%);}
.scrolldown a{position:relative; display:block; height:100%; position:relative; box-sizing:border-box;}
.scrolldown .icon{position:absolute; top:2%; left:50%; display:inline-block; width:30px; height:42px; border:3px #fff solid; border-radius:30px; transform:translateX(-50%);}
.scrolldown .icon::after{content:''; position:absolute; top:7px; left:50%; margin-left:-2.5px; width:5px; height:5px; border-radius:100%; background-color:#fff; -webkit-transform:translate(0, 0); -ms-transform:translate(0, 0); transform:translate(0, 0); -webkit-animation:scrollDownPointer 1.5s infinite; animation:scrollDownPointer 1.5s infinite;}
.scrolldown a > i.txt{position:relative; display:inline-block; padding-top:50px; font-style:normal; font-weight:500; font-size:12px; color:#fff;}
.scrolldown a > i.txt:before{content:''; position:absolute; left:50%; bottom:-10px; background:url('../img/common/icon_scroll_arrow.svg')no-repeat center; width:9px; height:9px; background-size:cover; transform:translateX(-50%);}

@-webkit-keyframes scrollDownPointer {
  60% {-webkit-transform: translate(0, 10%); transform: translate(0, 200%);}
  70% {opacity: 0;}
  100% {-webkit-transform: translate(0, 0); transform: translate(0, 0);}
}
@keyframes scrollDownPointer {
  60% {-webkit-transform: translate(0, 200%); transform: translate(0, 200%);}
  70% {opacity: 0;}
  100% {-webkit-transform: translate(0, 0); transform: translate(0, 0);}
}

@keyframes imagescale {
  0% {
    transform: scale(1)  rotate(.001deg);;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
  }

  100% {
    transform: scale(1.1)  rotate(.001deg);;
    -webkit-transform: scale(1.1);
    -moz-transform: scale(1.1);
    -o-transform: scale(1.1);
  }
}

@media (max-width:1100px) {
	#visual #slogan h2{font-size:48px;}
}
@media (max-width:1024px) {
	#visual{min-width:100%;}
	#visual #slogan{width:96%;}
	#visual #slogan h2{font-size:42px;}
}
@media (max-width:850px) {
	#visual #slogan h2{font-size:40px;}
}
@media all and (max-width:767px){
	#visual #slogan h2{font-size:30px;}
	#visual #slogan span{font-size:18px;}
	.scrolldown .icon{top:9%; width:25px; height:36px;}
}
@media all and (max-width:550px){
	#visual #slogan h2{font-size:22px; margin:0 0 10px;}
	#visual #slogan span{font-size:15px;}
}
@media all and (max-width:450px){
	#visual #slogan h2{font-size:20px; margin:0 0 8px; line-height:1.2em;}
	#visual #slogan span{font-size:14px;}
}
@media all and (max-width:450px){
	#visual #slogan{width:90%;}
	#visual #slogan span br{display:none;}
}

.title{text-align:center;}
.title h2{font-size:44px; font-weight:bold; color:#333; font-family: 'Gmarket Sans';}
.title span{display:block; margin:15px 0 0; font-size:20px; font-weight:normal; color:#444; word-break:keep-all; line-height:1.5em;}

.area_box{}
.area_box img{max-width:100%;}
.area_box img.w{display:block;}
.area_box img.m{display:none;}

.area_news,
.area_platform{padding:120px 0;}
.area_platform ul.list{text-align:center; margin:50px 0 0; width:100%;}
.area_platform ul.list:after{display:block; clear:both;content:"";}
.area_platform ul.list > li{display:inline-block; font-size:0; margin:0 40px 0 0; width:calc((100%/4) - 40px); width:-webkit-calc((100%/4) - 40px); background:#fff; border-radius:6px; box-sizing:border-box; border:1px solid #eee; box-shadow: 0px 4px 9px 1px rgb(0 0 0 / 5%);}
.area_platform ul.list > li:last-child{margin:0;}
.area_platform ul.list > li > a{display:block; width:100%; height:100%; padding:15px; box-sizing:border-box;}
.area_platform ul.list > li .area_img{width:100%; height:auto; border-radius:3px; overflow:hidden;}
.area_platform ul.list > li .area_img img{width:100%; height:100%; transform:scale(1,1); transition:all 0.5s ease;  border-radius:3px; overflow:hidden;}
.area_platform ul.list > li:hover .area_img img{transform:scale(1.05,1.05);}
.area_platform ul.list > li .area_icon{margin:0 auto; width:120px; height:120px; box-sizing:border-box; border-radius:50%;}
.area_platform ul.list > li .area_txt{margin:30px 0;text-align:center;}
.area_platform ul.list > li .area_txt h3{display:block; margin:0 0 5px; font-size:21px; font-weight:600; color:#333;}
.area_platform ul.list > li .area_txt span{display:block; margin:10px 0 0; font-size:16px; font-weight:400; color:#555; line-height:1.5em; word-break:keep-all;}

@media all and (max-width:1200px){
	.area_platform ul.list > li{margin:0 30px 0 0; width:calc((100%/4) - 22px); width:-webkit-calc((100%/4) - 22px);}
	
}
@media all and (max-width:1023px){
	.area_news, .area_platform{padding:80px 0;}
}
@media all and (max-width:900px){
	.title h2{font-size:40px;}
	.area_platform ul{text-align:center;}
	.area_platform ul.list > li{width:calc((100%/2) - 16px); width:-webkit-calc((100%/2) - 16px);}
	.area_platform ul.list > li:nth-child(1){margin:0 30px 30px;}
	.area_platform ul.list > li:nth-child(2){margin:0 30px 0 0;}
}
@media all and (max-width:767px){
	.title h2{font-size:35px;}
	.title span{font-size:17px;}
	.area_box img.w{display:none;}
	.area_box img.m{display:block;}
	.area_news, .area_platform{padding:50px 0;}
	.area_platform ul.list{margin:30px 0 0;}
	.area_platform ul.list > li{width:calc((100%/2) - 11px); width:-webkit-calc((100%/2) - 11px); vertical-align:top;}
	.area_platform ul.list > li:nth-child(1){margin:0 20px 20px;}
	.area_platform ul.list > li:nth-child(2){margin:0 20px 0 0;}
	.area_platform ul.list > li .area_txt{margin:20px 0;}
	.area_platform ul.list > li .area_txt h3{font-size:19px;}

}
@media all and (max-width:550px){
	.area_news, 
	.area_platform{padding:30px 0;}
	.title h2{font-size:30px;}
	.title span{font-size:16px;}
	.area_platform ul.list{margin:15px 0 0;}
	.area_platform ul.list > li{width:calc((100%/2) - 6px); width:-webkit-calc((100%/2) - 6px);}
	.area_platform ul.list > li:nth-child(1){margin:0 10px 10px;}
	.area_platform ul.list > li:nth-child(2){margin:0 10px 0 0;}
	.area_platform ul.list > li > a{padding:12px;}
	.area_platform ul.list > li .area_txt{margin:12px 0 0;}
	.area_platform ul.list > li .area_txt h3{font-size:17px;}
	.area_platform ul.list > li .area_txt span{margin:5px 0 0; font-size:15px;}
	
}
@media all and (max-width:500px){
	.title h2{font-size:27px;}
}

@media all and (max-width:450px){
	.area_platform ul.list > li{margin:0 0 12px !important; width:100%;}
	.area_platform ul.list > li .area_txt{min-height:auto;}
	.area_platform ul.list > li .area_txt span{margin:7px 0 0;}
}
/*절차안내*/
.area_procedure{padding: 100px 0; background: #645D4A;}
.area_procedure .inr{padding: 0 6rem;}
.area_procedure .title h2{color: #fff;}
.area_procedure .swiper-button-next,
.area_procedure .swiper-button-prev{color: #dddddd56}
.area_procedure .area_swiper{overflow: hidden; margin-top: 40px;}
.area_procedure .swiper-wrapper{align-items: stretch;}
.area_procedure .swiper-slide{height: auto;}
.area_procedure .swiper-slide img{margin: 0 auto; height: 100px; display: block; text-align: center;}
.area_procedure .swiper-slide dl{background: #fff; /*min-height: 350px;*/ height: 100%; padding: 4rem 3.5rem; border-radius: 20px; font-size: 1.4em;}
.area_procedure .swiper-slide dt{text-align: center; font-size: 1.4em; font-weight: 600; margin: 15px auto 5px auto; }
.area_procedure .swiper-slide dd{/*word-break: keep-all;*/}
.area_procedure .swiper-slide dd:before{content: ""; display: inline-block; width: 4px; height: 4px; border-radius: 50%; background: #ddd; vertical-align: middle; margin-right: 4px;}
.area_procedure .swiper-slide dd:not(:last-child){margin-bottom: 6px;}

@media all and (max-width:550px){
	.area_procedure .swiper-button-wrap{display: none;}
	.area_procedure .inr{padding: 0;}
	.area_procedure .swiper-slide dl{font-size: 1em; padding:2rem;}
	.area_procedure .swiper-slide img{height: 80px;}
}

.area_history{padding:100px 0; background:#f7fafb;}
.area_history.v2{padding:120px 0;}
.area_history .list{}
.area_history .list li{display:block;}
.area_history .list li:last-child{margin:0;}
.area_history .list li:after{display:block; clear:both;content:"";}
.area_history .list li > div{float:left;}
.area_history .list li .area_img{width:43%; height:400px; background:url(../img/main/img_tech.jpg)no-repeat center; background-size:cover; border-radius:10px; box-shadow: 0px 4px 9px 1px rgb(0 0 0 / 5%);}
.area_history .list li .area_txt{display:table; width:52%; margin:0 0 0 5%; height:400px; }
.area_history .list li .area_txt .txt_wrap{display:table-cell; vertical-align:middle; height:100%; width:100%;}
.area_history .list li .area_txt h3{display:block;margin: 0 0 24px;font-size: 42px;font-weight:600;color:#222;line-height:1.2em;word-break:keep-all; font-family: 'Gmarket Sans';}
.list_cont{display:block;margin: 0 0 15px;}
.list_cont em{display:inline-block;margin:0 5px 0 0;font-style:normal;font-size: 14px;font-weight: 700;color: #3459a5;border: 2px solid #3459a5;border-radius: 50px;padding: 1.5px 10px;}
.list_cont span{display:block;margin: 7px 0 0;font-size: 18px;font-weight: 400;color: #333;line-height:1.6em;word-break:keep-all;}
.list_cont span b{font-size: 20px;font-weight: 700;}
#history .area_history .list li .area_img{float:right; background:url(../img/main/img_history.jpg)no-repeat center; background-size:cover;}
#history .area_history .list li .area_txt{margin:0 5% 0 0;}
.nodata {width: 100%; text-align: center; margin: 150px 0; font-size: 15px; font-weight: 400; color: #555; }

@media all and (max-width:1300px){
	.area_history .list li .area_img{width:48%;}
	.area_history .list li .area_txt{width:47%; margin:0 0 0 5%;}
}
@media all and (max-width:1100px){
	.area_history .list li .area_img{width:50%; height:360px;}
	.area_history .list li .area_txt{width:45%; margin:0 0 0 5%; height:360px;}
}
@media all and (max-width:1024px){
	.area_history{padding:80px 0 0;}
	.area_history.v2{padding:80px 0;}
	.area_history .list li .area_img{width:50%; height:320px;}
	.area_history .list li .area_txt{width:45%; margin:0 0 0 5%; height:320px;}
}
@media all and (max-width:850px){
	.area_history .list li .area_img{width:55%; height:300px;}
	.area_history .list li .area_txt{width:40%; margin:0 0 0 5%; height:300px;}
	.area_history .list li .area_txt h3{margin:0 0 20px; font-size:27px;}
	.list_cont span{font-size:17px;}
}
@media all and (max-width:767px){
	.area_history{padding:50px 0 0;}
	.area_history.v2{padding:50px 0;}
	ul.list{width:80%; margin:0 auto; text-align:center;}
	.area_history .list li .area_img{width:100%; height:0; padding-bottom:72%; margin:0 auto;}
	.area_history .list li .area_txt,
	#history .area_history .list li .area_txt{width:100%; margin:30px 0 0; height:auto;}
	#oneshot_2_7 .img_set{height:250px;}
	#oneshot_2_7 .subject_set{padding:15px 10px;}
}

@media all and (max-width:550px){
	.area_history{padding:30px 0 0;}
	.area_history.v2{padding:30px 0;}
	.area_history .list li .area_txt h3{margin:0 0 15px; font-size:22px;}
	.list_cont em{font-size:13px; padding:1px 7px;}
	.list_cont span{font-size:16px;}
	.area_history .list li .area_txt, 
	#history .area_history .list li .area_txt{margin:20px 0 0;}
	#oneshot_2_7 .subject_set .sub_title .title{font-size:16px;}
	#oneshot_2_7 .lt_more a{padding:10px 20px; font-size:14px;}
}
@media all and (max-width:450px){
	ul.list{width:100%;}
}


.kakao_contact{
	position: absolute;
	top: 50%;
	left: 60%;
	transform: translateY(-50%);

}
.kakao_contact dt{
	font-size: 1.8em;
	font-weight: 500;
	margin-bottom: 10px;
}
.kakao_contact a{
	color: #391b1b;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 20px;
	font-weight: 400;
	border-radius: 30px;
	background: #fff;
	box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
.kakao_contact a > strong{
	font-weight: 600;
	margin-right: 5px;
	padding: 10px;
}
.kakao_contact a img{
	width: 50px;
}


.quick{position: fixed; right: 10px; top: 50%; transform: translateY(-50%); z-index: 9999;}
.quick dl{display: grid; justify-content: right;}
.quick dt{font-size: 1.3em; border-bottom: 1px solid #eee; padding-bottom: 10px; margin-bottom: 10px; display: none;}
.quick dd{background: #fff; box-shadow: 0 0 10px rgba(0,0,0,0.2); border-radius: 50px; margin-bottom: 10px; width: auto; height: 50px; overflow: hidden;  transition: all 0.5s ease; position: relative; right: 0; max-width: 50px;}
.quick dd > a {display: grid; grid-template-columns: 50px 1fr;}
.quick dd strong{padding: 0 15px 0 10px; line-height: 50px; font-size: 1.2em;}
.quick dd i{font-size: 1.8em; width: 50px; height: 50px; line-height: 48px; text-align: center; background: #eee; color: #0b4fa2; border-radius: 50%; margin-right: 4px;}
.quick .kakao_contact{position: relative; top:auto; left: auto; transform:none;}
.quick .kakao_contact a{font-size: 1.2em; justify-content: left;
	align-items: start;}
.quick .kakao_contact a i{background: #FAE300;}
.quick .kakao_contact > strong{text-align: center; margin-right: 10px;}

.quick dd:hover{transition: all 0.5s ease; max-width: 200px;}


@media screen and (max-width: 1200px) {
	.quick{right: auto; top: auto; left: 10px; bottom: 10px; transform: none;}
	.quick dl{display: none;}
	.quick dl:first-of-type,
	.quick dl.kakao_contact{display: block;}
	.quick .kakao_contact a{padding: 0; margin: 0; background: #fff;}
	.quick dd > a{grid-template-columns: 40px 1fr;}
	.quick dd{max-width: max-content; height: 40px;}
	.quick dd i{width: 40px; height: 40px; line-height: 38px; font-size: 1.4em; margin: 0;}
	.quick dd strong{line-height: 38px; font-size: 1em;}

	.kakao_contact a img{width: 40px; height: 40px;}
}