@charset "utf-8";
@import url("fullpage.css");

#loading {position:fixed; width:100%; height: 100%; z-index:999999; background:radial-gradient(rgba(255,255,255,0) 0%, #fff 0%); top:50%; left:50%; transform: translate(-50%,-50%);}

#loading.hide img {transform: scale(2); opacity:0; transition:ease-out 0.6s; transition-delay:0.6s;}
#loading.hide .logo {transform: scale(2); opacity:0; transition:ease-out 0.6s; transition-delay:0.6s;}
#loading.hide {animation: gradient 0.5s ease forwards; animation-delay:1.2s;}
@keyframes gradient {
	0% {background:radial-gradient(rgba(255,255,255,0) 0%, #fff 0%);}
	2.5% {background:radial-gradient(rgba(255,255,255,0) 2.5%, #fff 2.5%);}
	5% {background:radial-gradient(rgba(255,255,255,0) 5%, #fff 5%);}
	7.5% {background:radial-gradient(rgba(255,255,255,0) 7.5%, #fff 7.5%);}
	10% {background:radial-gradient(rgba(255,255,255,0) 10%, #fff 10%);}
	12.5% {background:radial-gradient(rgba(255,255,255,0) 12.5%, #fff 12.5%);}
	15% {background:radial-gradient(rgba(255,255,255,0) 15%, #fff 15%);}
	17.5% {background:radial-gradient(rgba(255,255,255,0) 17.5%, #fff 17.5%);}
	20% {background:radial-gradient(rgba(255,255,255,0) 20%, #fff 20%);}
	22.5% {background:radial-gradient(rgba(255,255,255,0) 22.5%, #fff 22.5%);}
	25% {background:radial-gradient(rgba(255,255,255,0) 25%, #fff 25%);}
	27.5% {background:radial-gradient(rgba(255,255,255,0) 27.5%, #fff 27.5%);}
	30% {background:radial-gradient(rgba(255,255,255,0) 30%, #fff 30%);}
	32.5% {background:radial-gradient(rgba(255,255,255,0) 32.5%, #fff 32.5%);}
	35% {background:radial-gradient(rgba(255,255,255,0) 35%, #fff 35%);}
	37.5% {background:radial-gradient(rgba(255,255,255,0) 37.5%, #fff 37.5%);}
	40% {background:radial-gradient(rgba(255,255,255,0) 40%, #fff 40%);}
	42.5% {background:radial-gradient(rgba(255,255,255,0) 42.5%, #fff 42.5%);}
	45% {background:radial-gradient(rgba(255,255,255,0) 45%, #fff 45%);}
	47.5% {background:radial-gradient(rgba(255,255,255,0) 47.5%, #fff 47.5%);}
	50% {background:radial-gradient(rgba(255,255,255,0) 50%, #fff 50%);}
	52.5% {background:radial-gradient(rgba(255,255,255,0) 52.5%, #fff 52.5%);}
	55% {background:radial-gradient(rgba(255,255,255,0) 55%, #fff 55%);}
	57.5% {background:radial-gradient(rgba(255,255,255,0) 57.5%, #fff 57.5%);}
	60% {background:radial-gradient(rgba(255,255,255,0) 60%, #fff 60%);}
	62.5% {background:radial-gradient(rgba(255,255,255,0) 62.5%, #fff 62.5%);}
	65% {background:radial-gradient(rgba(255,255,255,0) 65%, #fff 65%);}
	67.5% {background:radial-gradient(rgba(255,255,255,0) 67.5%, #fff 67.5%);}
	70% {background:radial-gradient(rgba(255,255,255,0) 70%, #fff 70%);}
	72.5% {background:radial-gradient(rgba(255,255,255,0) 72.5%, #fff 72.5%);}
	75% {background:radial-gradient(rgba(255,255,255,0) 75%, #fff 75%);}
	77.5% {background:radial-gradient(rgba(255,255,255,0) 77.5%, #fff 77.5%);}
	80% {background:radial-gradient(rgba(255,255,255,0) 80%, #fff 80%);}
	82.5% {background:radial-gradient(rgba(255,255,255,0) 82.5%, #fff 82.5%);}
	85% {background:radial-gradient(rgba(255,255,255,0) 85%, #fff 85%);}
	87.5% {background:radial-gradient(rgba(255,255,255,0) 87.5%, #fff 87.5%);}
	90% {background:radial-gradient(rgba(255,255,255,0) 90%, #fff 90%);}
	92.5% {background:radial-gradient(rgba(255,255,255,0) 92.5%, #fff 92.5%);}
	95% {background:radial-gradient(rgba(255,255,255,0) 95%, #fff 95%);}
	97.5% {background:radial-gradient(rgba(255,255,255,0) 97.5%, #fff 97.5%);}
	100% {background:radial-gradient(rgba(255,255,255,0) 100%, #fff 100%);}
}
@media screen and (max-width: 1024px){
	#loading img {min-width: auto; width: auto; max-height:auto; height:100%;}
}

#fp-nav.fp-right { right:160px !important; top:auto; bottom:58px !important; margin-top:0 !important; }
#fp-nav ul li, .fp-slidesNav ul li { margin:0 7px !important; display:inline-block!important;}
#fp-nav ul li:last-child { display:none !important; }
#fp-nav ul li a span, .fp-slidesNav ul li a span { background:#333 !important; width:2px !important; height:2px !important; margin:0 -2px 0 -2px !important; }
.fp-viewing-0 #fp-nav ul li a span,
.fp-viewing-0 .fp-slidesNav ul li a span,
.fp-viewing-2 #fp-nav ul li a span,
.fp-viewing-2 .fp-slidesNav ul li a span { background:#fff !important; }
.fp-viewing-0 #fp-nav ul li a.active span,
.fp-viewing-0 .fp-slidesNav ul li a.active span,
.fp-viewing-0 #fp-nav ul li:hover a.active span,
.fp-viewing-0 .fp-slidesNav ul li:hover a.active span,
.fp-viewing-2 #fp-nav ul li a.active span,
.fp-viewing-2 .fp-slidesNav ul li a.active span,
.fp-viewing-2 #fp-nav ul li:hover a.active span,
.fp-viewing-2 .fp-slidesNav ul li:hover a.active span { width:14px !important; height:14px !important; border:1px solid #fff; background:none!important; margin:-7px !important; border-radius:50% !important;}
#fp-nav ul li a.active span,
.fp-slidesNav ul li a.active span,
#fp-nav ul li:hover a.active span,
.fp-slidesNav ul li:hover a.active span { width:14px !important; height:14px !important; border:1px solid #333; background:none!important; margin:-7px !important; border-radius:50% !important;}
#fp-nav ul li:first-child a.active span,
.fp-slidesNav ul li:first-child a.active span,
#fp-nav ul li:first-child:hover a.active span,
.fp-slidesNav ul li:first-child:hover a.active span { width:14px !important; height:14px !important; border:1px solid #fff; background:none!important; margin:-3px 0; border-radius:50% !important; }


.section { overflow:hidden; }
@media screen and (max-width: 1024px){
	#fullpage, .section, .fp-slide, .fp-tableCell {
		height: auto !important;
	}
}

.mTitle {width:100%; text-align: center; position:relative; top:50px; opacity:0; transition:all 0.3s;}
.mTitle p {font-family: 'GmarketSansMedium',sans-serif; font-size:50px; color:#333; letter-spacing:-0.025em;}
.mTitle span {display: block; font-size:18px; color:#888; font-weight:400; letter-spacing:-0.05em; line-height:26px; margin-top:10px;}
.mTitle span font {font-size:18px; color:#00428e;}

.on .mTitle {top:0; opacity:1; transition:0.5s; transition-delay:0.3s;}
.on2 .mTitle {top:0; opacity:1;}
@media screen and (max-width:1250px){
	.mTitle p {font-size:40px;}
	.mTitle span {font-size:17px; line-height:24px; margin-top:0;}
	.mTitle span font {font-size:17px;}
}
@media screen and (max-width:1023px){
	.mTitle p {font-size:36px;}
}
@media screen and (max-width:640px){
	.mTitle p {font-size:28px;}
	.mTitle span {font-size:13px; line-height:19px;}
	.mTitle span font {font-size:13px;}
}
@media screen and (max-width:420px){
	.mTitle p {font-size:28px;}
	.mTitle span {font-size:13px; line-height:19px;}
	.mTitle span font {font-size:13px;}
}


.visual {width:100%; height:100%; position:relative;}
.visual .visual_sw {width:100%; height:100%; z-index:1;}
.visual .visual_sw .swiper-wrapper {width:100%; height:100%!important;}
.visual .visual_sw .swiper-slide {width:100%; height:100%; position:relative; overflow: hidden;}
.visual .visual_sw .swiper-slide img {width:100%; min-width:1920px; min-height:100%; display: block; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%);}
.visual .visual_txt {position:absolute; bottom:85px; left:100px; z-index: 2; transition:all 0.5s;}
.visual .visual_txt p {font-family: 'GmarketSansBold',sans-serif; font-size:50px; color:#fff; letter-spacing:-0.025em; line-height:60px; transition:all 0.5s;}
.visual .visual_txt span {font-size:16px; color:#fff; letter-spacing:-0.05em; line-height:22px; display: block; font-weight:500; margin-top:15px; transition:all 0.5s;}
.visual .visual_txt .visPage {width:100%; overflow: hidden; padding-bottom:30px; transition:all 0.5s;}
.visual .visual_txt .visPage li {width:35px; height:3px; float:left; background-color:rgba(255,255,255,0.5); margin-right:12px; transition: all 0.5s; transition:all 0.5s;}
.visual .visual_txt .visPage li.on {background-color:rgba(255,255,255,1);}
.visual .visual_txt .visPage li:last-child {margin-right:0;}

.visual .visual_txt .visual_Submit {width:100%; overflow: hidden; padding:30px 0px;}
.visual .visual_txt .visual_Submit div {width:200px; height:60px; background-color:#00458E; float:left; -ms-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; padding:0px 40px; position:relative; font-size:18px; color:#fff; font-weight:400; letter-spacing:-0.05em; line-height:60px; transition:all 0.2s;margin-right: 25px;text-align: center;} 
.visual .visual_txt .visual_Submit div:hover {background-color:#0066F9;}
.visual .visual_txt .visual_Submit div:hover::after {right:20px;}

@media screen and (max-width:1250px){
	.visual .visual_txt {left:50px; bottom:50px;}
	.visual .visual_txt p {font-size:40px; line-height:50px;}
	.visual .visual_txt span {font-size:15px; margin-top:10px;}
	.visual .visual_txt .visPage { padding-bottom:25px;}
}
@media screen and (max-width:1024px){
	.visual .visual_sw .swiper-slide {display: flex; justify-content: center; align-items: center;}
	.visual .visual_sw .swiper-slide img {position:static; transform:none; min-width:auto!important; width:auto!important; display: block; min-height:auto; height:100vw;}
}
@media screen and (max-width:640px){
	.visual .visual_txt {left:20px; bottom:30px;}
	.visual .visual_txt p {font-size:32px; line-height:40px;}
	.visual .visual_txt span {font-size:14px; font-weight:400; line-height:22px;}
	.visual .visual_txt .visPage {padding-bottom:20px;}
	.visual .visual_txt .visPage li {width:30px; height:2px; margin-right:8px;}
	
	.visual .visual_txt .visual_Submit div {width:150px; height:40px; padding:0px 10px; font-size:14px;line-height:40px;margin-right: 15px;text-align: center;} 
}
@media screen and (max-width:420px){
	.visual .visual_txt {left:20px; bottom:30px;}
	.visual .visual_txt p {font-size:28px; line-height:36px;}
	.visual .visual_txt span {font-size:13px; line-height:19px;}
	.visual .visual_txt .visPage {padding-bottom:20px;}

	.visual .visual_txt .visual_Submit div {width:130px; height:40px; padding:0px 10px; font-size:12px;line-height:40px;margin-right: 15px;text-align: center;} 

}


.process {width:100%; padding-top:0px;}
.process .processCont {width:1010px; margin: auto; padding-top:80px; text-align: center; overflow: hidden; }
.process .processCont .procBox {width:140px; margin-right:150px; padding-top:140px; position:relative;  float:left;}
.process .processCont .procBox:nth-child(4) {margin-right:0;}
.process .processCont .procBox:nth-child(5) { clear: both; margin-left:145px;}
.process .processCont .procBox:nth-child(n + 5) {margin-top:20px;}
.process .processCont .procBox:last-child {margin-right:0;}

.process .processCont .procBox div {width:0; height:0; -ms-border-radius:100%; -moz-border-radius:100%; -o-border-radius:100%; -webkit-border-radius:100%; border-radius:100%; position:relative; position:absolute; top:70px; left:50%;}
.process .processCont .procBox div::after {content:""; width:60px; height:40px; background:url("/img/main/process_arrow.png"); position:absolute; top:50px; right:-100px; opacity: 0; display:none;}
.process .processCont .procBox div::before {content:""; width:60px; height:40px; background:url("/img/main/process_arrow.png"); position:absolute; top:50px; left:-100px; opacity: 0;}
.process .processCont .procBox:nth-child(1) div::before {display:none;}

.process .processCont .procBox:nth-child(1) div {background:url("/img/main/process_icon01.png")no-repeat center #00458E;}
.process .processCont .procBox:nth-child(2) div {background:url("/img/main/process_icon04.png")no-repeat center #00458E;}
.process .processCont .procBox:nth-child(3) div {background:url("/img/main/process_icon05.png")no-repeat center #00458E;}
.process .processCont .procBox:nth-child(4) div {background:url("/img/main/process_icon07.png")no-repeat center #00458E;}
/* .process .processCont .procBox:nth-child(5) div {background:url("/img/main/process_icon05.png")no-repeat center #00458E; }
.process .processCont .procBox:nth-child(6) div {background:url("/img/main/process_icon06.png")no-repeat center #00458E;}
.process .processCont .procBox:nth-child(7) div {background:url("/img/main/process_icon07.png")no-repeat center #00458E;} */

.process .processCont .procBox p {font-size:16px; color:#00458E; font-weight:600; letter-spacing:-0.05em; line-height:22px; margin-top:15px; position:relative; top:30px; opacity:0; transition:all 0.3s;}
.process .processCont .procBox span {font-size:16px; color:#333; font-weight:400; letter-spacing:-0.05em; line-height:22px; display: block; position:relative; top:30px; opacity:0; transition:all 0.3s;}


.main2.on .process .processCont .procBox div {width:140px; height:140px; top:0; margin-left:-70px; transition:0.5s;}
.main2.on .process .processCont .procBox div::after { opacity:1; transition:0.5s; }
.main2.on .process .processCont .procBox div::before { opacity:1; transition:0.5s; }
.main2.on .process .processCont .procBox p {top:0; opacity:1; transition:0.5s;}
.main2.on .process .processCont .procBox span {top:0; opacity:1; transition:0.5s;}

.main2.on2 .process .processCont .procBox div {width:140px; height:140px; top:0; margin-left:-70px;}
.main2.on2 .process .processCont .procBox div::after { opacity:1;}
.main2.on2 .process .processCont .procBox div::before { opacity:1;}
.main2.on2 .process .processCont .procBox p {top:0; opacity:1;}
.main2.on2 .process .processCont .procBox span {top:0; opacity:1;}

@media screen and (max-width:1250px){
	.process {padding-top:80px;}
	.process .processCont {width:780px; padding-top:70px;}
	.process .processCont .procBox {width:120px; padding-top:120px; margin-right:100px;}
	.process .processCont .procBox:nth-child(4) {margin-right:0;}
	.process .processCont .procBox:nth-child(5) {clear: both; margin-left:145px;}
	.process .processCont .procBox:nth-child(n + 5) {margin-top:20px;}
	.process .processCont .procBox div::before {left:-75px; top:43px; background-size:50px; width:50px; height:34px;}
	.process .processCont .procBox div::after {right:-75px; top:43px; background-size:50px; width:50px; height:34px;}
	.main2.on .process .processCont .procBox div {width:120px; height:120px; margin-left:-60px;}
	.main2.on2 .process .processCont .procBox div {width:120px; height:120px; margin-left:-60px;}
}
@media screen and (max-width:1023px){
	.process .processCont {width:560px; padding-bottom:100px; padding-top:60px;}
	.process .processCont .procBox {width:120px; padding-top:120px; margin-right:100px;}
	.process .processCont .procBox:nth-child(1),
	.process .processCont .procBox:nth-child(6) {margin-left:110px;}
	.process .processCont .procBox:nth-child(2) {margin-right:0;}
	.process .processCont .procBox:nth-child(2) div::after {display: block;}
	.process .processCont .procBox:nth-child(3) {clear: both;margin-left:110px;}
	.process .processCont .procBox:nth-child(4) {margin-right:100px;}
	.process .processCont .procBox:nth-child(5) { clear:inherit; margin-left:0; margin-right:0;}
	.process .processCont .procBox:nth-child(n + 3) {margin-top:20px;}
	.main2.on .process .processCont .procBox div {width:120px; height:120px; margin-left:-60px;}
	.main2.on2 .process .processCont .procBox div {width:120px; height:120px; margin-left:-60px;}
}
@media screen and (max-width:640px){
	.process .processCont {width:400px; padding-bottom:100px;}
	.process .processCont .procBox {width:100px; padding-top:100px; margin-right:50px;}
	.process .processCont .procBox:nth-child(1),
	.process .processCont .procBox:nth-child(6) {margin-left:75px;}
	.process .processCont .procBox:nth-child(2) {margin-right:0;}
	.process .processCont .procBox:nth-child(2) div::after {display: block;}
	.process .processCont .procBox:nth-child(3) {clear: both;margin-left:75px;}
	.process .processCont .procBox:nth-child(4) {margin-right:50px;}
	.process .processCont .procBox:nth-child(5) { clear:inherit; margin-left:0; margin-right:0;}
	
	.process .processCont .procBox div::before {left:-40px; top:40px; background-size:30px; width:30px; height:20px;}
	.process .processCont .procBox div::after {right:-40px; top:40px; background-size:30px; width:30px; height:20px;}
	.process .processCont .procBox p {font-size:15px; margin-top:10px;}
	.process .processCont .procBox span {font-size:15px;}
	
	.main2.on .process .processCont .procBox div {width:100px; height:100px; margin-left:-50px; background-size:62px;}
	.main2.on2 .process .processCont .procBox div {width:100px; height:100px; margin-left:-50px; background-size:62px;}
}


.sign_up {width:100%; height:100%; overflow: hidden; position:relative;}
.sign_up .leftFakeBox {width:50%; height:100%; background-color:#fff; position:absolute; left:0; top:0; z-index: 99; transition:all ease-in 0.3s;}
.sign_up .rightFakeBox {width:50%; height:100%; background-color:#fff; position:absolute; right:0; top:0; z-index: 99; transition:all ease-in 0.3s;}

.main3.on .leftFakeBox {width:0;}
.main3.on .rightFakeBox {width:0;}

.sign_up .suBox {width:50%; height:100%; float:left; position:relative; overflow: hidden; }


.sign_up .suBox img.suBg {width:100%; min-width:960px; min-height:100%; display: block; position:absolute; top:50%; left:50%; transform: translate(-50%,-50%); z-index:1; transition:all 0.5s;}
.sign_up .suBox .suCont {position:absolute; top:50%; left:0; z-index:3; text-align: center; width:100%; margin-top:-38px;}
.sign_up .suBox .suCont img {display: block; margin: auto;}
.sign_up .suBox .suCont p {font-family: 'GmarketSansMedium',sans-serif; font-size:20px; color:#fff; letter-spacing:-0.025em; line-height:24px; margin-top:20px;}
.sign_up .suBox .suCont span {font-family: 'GmarketSansMedium',sans-serif; font-size:36px; color:#fff; letter-spacing:-0.025em; display: block; line-height:40px; margin-top:6px; transition:all 0.5s; }
.sign_up .suBox .suCont .suArrow {width:32px; height:8px; position:relative; background:url("/img/main/su_arrow.png")no-repeat right bottom; margin: auto; margin-top:15px;}
.sign_up .suBox .suHover {width:0; height:0; position:absolute; top:50%; left:50%; background-color:rgba(0,69,142,0.7); z-index:2; -ms-border-radius:100%; -moz-border-radius:100%; -o-border-radius:100%; -webkit-border-radius:100%; border-radius:100%; transition:all 0.3s; transform: translate(-50%, -50%);}

.sign_up .suBox:hover .suHover {width:100%; height:100%; -ms-border-radius:0; -moz-border-radius:0; -o-border-radius:0; -webkit-border-radius:0; border-radius:0;}
.sign_up .suBox:hover img.suBg {transform: scale(1.05) translate(-50%,-50%);}

@media screen and (max-width:1024px){
	.sign_up {height:auto;}
	.sign_up .suBox {width:100%; height:auto; padding:120px 0px;}
	.sign_up .suBox .suCont {position:relative; top:0; margin-top:0;}
	
}
@media screen and (max-width:640px){
	.sign_up .suBox {padding:70px 0px;}
	.sign_up .suBox .suCont img {width:60px;}
	.sign_up .suBox .suCont p {font-size:16px; line-height:20px; margin-top:15px;}
	.sign_up .suBox .suCont span {font-size:26px; line-height:28px;}
}


.main4 {background:url("/img/main/videoBg.png")no-repeat left center; background-size:auto 100%;}
.video {width:100%;}
.video .video_slide_box {width:100%; text-align: center; padding-top:80px; transition:all 0.5s; position:relative; top:50px; left:0; opacity:0;}
.main4.on .video .video_slide_box {top:0; opacity:1; }
.video .video_slide_box .video_sw {width:1182px; margin: auto; overflow: hidden;}
.video .video_slide_box .video_sw .swiper-slide {width:354px;}
.video .video_slide_box .video_sw .swiper-slide div {width:354px; position:relative; overflow: hidden; background-color:#000; cursor: pointer;}
.video .video_slide_box .video_sw .swiper-slide div img {width:100%; transition:all 0.3s;}
.video .video_slide_box .video_sw .swiper-slide div:hover img {transform: scale(1.08); opacity:0.5;}
.video .video_slide_box .video_sw .swiper-slide p {font-size:18px; color:#333; font-weight:400; letter-spacing:-0.05em; margin-top:10px;}

.video .video_controller {width:100%; text-align: center; padding-top:20px;}

.video .video_controller .videoArrow {width:100%; display:none;}
.video .video_controller .videoArrow img {display:inline-block; zoom:1; *display:inline; vertical-align: middle; cursor: pointer;}
.video .video_controller .videoArrow div {display:inline-block; zoom:1; *display:inline; vertical-align: middle; width:17px; height:17px; border:1px solid #00428e; border-radius:100%; margin:0px 10px;}


.video .video_controller ul.videoPage {width:100%; display:none;}
.video .video_controller ul.videoPage li {display:inline-block; zoom:1; *display:inline; vertical-align: middle; width:5px; height:5px; background-color:#00428e; border-radius:100%; margin:0px 8px;}
.video .video_controller ul.videoPage li.on {width:17px; height:17px; background:none; border:1px solid #00428e;}
@media screen and (min-width:1385px){
	.video .video_slide_box .video_sw .swiper-slide {width:auto!important; margin-right:60px;}
	.video .video_slide_box .video_sw .swiper-slide:last-child {margin-right:0!important;}
}
@media screen and (max-width:1385px){
	.video .video_slide_box {width:calc(100% - 200px); padding-top:60px; margin: auto;}
	.video .video_slide_box .video_sw {width:100%; display: block;}
	.video .video_slide_box .video_sw .swiper-slide {width: auto;}
	.video .video_slide_box .video_sw .swiper-slide div {width:100%;}
	.main4.on .video .video_controller .videoArrow {display:block;}
	.main4.on .video .video_controller ul.videoPage {display:none;}
}
@media screen and (max-width:1024px){
	.video {padding:80px 0px; padding-bottom:100px;}
	.video .video_slide_box {width:calc(100% - 50px); padding-top:50px;}
	.video .video_slide_box .video_sw .swiper-slide div {width:100%;}
	.video .video_slide_box .video_sw .swiper-slide p {font-size:16px;}
}
@media screen and (max-width:650px){
	.video {padding:60px 0px;}
	.video .video_slide_box {width:100%; padding:0px 30px; padding-top:30px; }
	.video .video_slide_box .video_sw .swiper-slide p {font-size:15px;}
	.main4.on .video .video_controller .videoArrow {display:none;}
	.main4.on .video .video_controller ul.videoPage {display:block;}
}


.main5 {width:100%; padding-right:100px; position:relative;}
.main5:before {content: ''; display: block; width: 1px; height:0; position: absolute; top:100px; left: calc(50% - 50px); background-color: #e0e0e0; transition:all 0.5s;}
.main5.on:before {height: calc(100% - 100px);}
.customer {width:100%; overflow: hidden; padding-top:100px; height:100%;}
.customer .cBox {width:50%; float:left; height: 100%;}
.customer .c_l_box { padding:0px 100px; transform: translateX(-100%); opacity:0; transition:all 0.5s;}
.customer .c_r_box { transform: translateX(100%); opacity:0; transition:all 0.5s; padding-bottom:100px;}
.main5.on .customer .cBox {transform: translateX(0); opacity:1;}

.customer .cBox .cForm {width:100%; height:100%; display:table; table-layout: fixed;}
.customer .cBox .cForm .c_f_inner {display: table-cell; width: 100%; height: 100%; vertical-align: middle;}

.customer .cBox .cstitle {width:100%; position:relative; overflow: hidden;}
.customer .cBox .cstitle p {font-family: 'GmarketSansMedium',sans-serif; font-size:30px; color:#333; letter-spacing:-0.025em; line-height:40px; float:left;}
.customer .cBox .cstitle span {display: block; font-size:16px; color:#888; font-weight:400; letter-spacing:-0.025em; margin-top:10px;}
.customer .cBox .cstitle img {position:absolute; top:50%; right:0; margin-top:-4px; cursor: pointer; transition:all 0.2s;}
.customer .cBox .cstitle img:hover {opacity:0.6;}
.customer .cBox .cstitle font {font-size:16px; float:right; color:#999; font-weight:400; letter-spacing:-0.025em; background:url('/img/common/ess_on.png')no-repeat left center; padding-left:18px; line-height:40px;}

.customer .cBox .csForm {width:100%; padding-top:5px;}
.customer .cBox .csForm .cfInput {width:100%; position:relative; border-bottom:1px solid #e0e0e0; padding:20px 0px; padding-left:145px;}
.customer .cBox .csForm .cfInput p {font-size:16px; color:#333; font-weight:500; letter-spacing:-0.05em; line-height:20px; position:absolute; top:20px; left:0; background:url('/img/common/ess_off.png')no-repeat left center; padding-left:20px;}
.customer .cBox .csForm .cfInput p.ess {background:url('/img/common/ess_on.png')no-repeat left center;}

.customer .cBox .csForm .cfInput span {font-size:13px; color:#666; font-weight:300; letter-spacing:-0.025em; word-break: keep-all; position:relative; display: block; margin-top:10px; background-color:#f5f5f5; padding:7px 10px; padding-left:30px; border-radius:6px;}
.customer .cBox .csForm .cfInput span::before {content:"!"; width:11px; height:11px; border:1px solid #999; border-radius:100%; position:absolute; top:10px; left:10px; display:flex; justify-content: center; align-items: center; font-size:10px; color:#999; font-weight:500;}

.customer .cBox .csForm .cfInput input[type=text] {width:100%; height:20px; font-size:16px; color:#333; font-weight:400; letter-spacing:-0.05em; display: block;}
.customer .cBox .csForm .cfInput input[type=text]::placeholder{font-size:15px; color:#999; font-weight:300; letter-spacing:-0.06em;}
.customer .cBox .csForm .cfInput input[type=text]::-moz-placeholder {font-size:15px; color:#999; font-weight:400; letter-spacing:-0.06em;}
.customer .cBox .csForm .cfInput input[type=text]:-ms-input-placeholder {font-size:15px; color:#999; font-weight:400; letter-spacing:-0.06em;}
.customer .cBox .csForm .cfInput input[type=text]::-webkit-input-placeholder {font-size:15px; color:#999; font-weight:400; letter-spacing:-0.06em;}

.customer .cBox .csForm .cfInput select {width:100%; height:20px; font-size:16px; color:#333; font-weight:400; letter-spacing:-0.025em; background:url("/img/common/selectBtn.png")no-repeat left top 9px; padding-left:20px; cursor: pointer; display: block;}
.customer .cBox .csForm .cfInput select option {font-size:16px; color:#555; font-weight:400;}

.customer .cBox .csForm .cfInput .cf_chk_box {width:100%; overflow: hidden;}
.customer .cBox .csForm .cfInput .cf_chk_box label {float:left; font-size:16px; color:#333; font-weight:400; letter-spacing:-0.025em; line-height:20px; margin-right:25px; position:relative; padding-left:22px; cursor: pointer; transition:all 0.2s;}
.customer .cBox .csForm .cfInput .cf_chk_box label:hover {color:#999;}
.customer .cBox .csForm .cfInput .cf_chk_box label input {width:17px; height:17px; background:url("/img/common/radio_off.png"); position:absolute; top:50%; left:0; margin-top:-8.5px;}
.customer .cBox .csForm .cfInput .cf_chk_box label input:checked {background:url("/img/common/radio_on.png");}

.customer .cBox .csForm .cfInput textarea {width:100%; height:100px; font-size:16px; color:#333; font-weight:400; letter-spacing:-0.025em; resize:none; display: block;}
.customer .cBox .csForm .cfInput textarea::placeholder{font-size:15px; color:#999; font-weight:300; letter-spacing:-0.05em;}
.customer .cBox .csForm .cfInput textarea::-moz-placeholder {font-size:15px; color:#999; font-weight:400; letter-spacing:-0.05em;}
.customer .cBox .csForm .cfInput textarea:-ms-input-placeholder {font-size:15px; color:#999; font-weight:400; letter-spacing:-0.05em;}
.customer .cBox .csForm .cfInput textarea::-webkit-input-placeholder {font-size:15px; color:#999; font-weight:400; letter-spacing:-0.05em;}

.customer .cBox .csSubmit {width:100%; overflow: hidden; padding:30px 0px;}
.customer .cBox .csSubmit label {font-size:14px; color:#555; font-weight:400; letter-spacing:-0.025em; position:relative; float:left; padding-left:22px; transition:all 0.2s; line-height:20px; margin-top:20px; cursor: pointer;}
.customer .cBox .csSubmit label:hover {color:#222;}
.customer .cBox .csSubmit label input {width:17px; height:17px; background:url("/img/common/chk_off.png"); position:absolute; top:50%; left:0; margin-top:-8.5px;}
.customer .cBox .csSubmit label input:checked {background:url("/img/common/chk_on.png");}

.customer .cBox .csSubmit span {float:left; font-size:14px; color:#555; font-weight:400; letter-spacing:-0.025em; margin-left:3px; line-height:20px; margin-top:20px; transition:all 0.2s;}
.customer .cBox .csSubmit span:hover {color:#0066F9;}

.customer .cBox .csSubmit div {width:300px; height:60px; background-color:#00458E; float:right; -ms-border-radius:10px; -moz-border-radius:10px; -o-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; padding:0px 40px; position:relative; font-size:18px; color:#fff; font-weight:400; letter-spacing:-0.05em; line-height:60px; transition:all 0.2s;} 
.customer .cBox .csSubmit div::after {content:""; width:32px; height:8px; background:url("/img/main/su_arrow.png")no-repeat; position:absolute; top:50%; right:30px; margin-top:-4px; transition:all 0.2s;}
.customer .cBox .csSubmit div:hover {background-color:#0066F9;}
.customer .cBox .csSubmit div:hover::after {right:20px;}

.customer .cBox .c_board {width:100%; height: 50%; padding: 0 100px; display: table; table-layout: fixed;}
.customer .cBox .c_board:first-child {border-bottom:1px solid #e0e0e0;}

.customer .cBox .c_board .c_b_inner {display: table-cell; width: 100%; height: 100%; vertical-align: middle;}

.customer .cBox .c_board .c_notice_list {width:100%; padding-top:20px;}
.customer .cBox .c_board .c_notice_list div {width:100%; position:relative; padding-right:80px; overflow: hidden;}
.customer .cBox .c_board .c_notice_list div p {font-size:18px; color:#333; font-weight:400; letter-spacing:-0.025em; line-height:40px; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; max-width:calc(100% - 80px); background:url("/img/main/noticeIcon.png")no-repeat left center; padding-left:25px; float:left;}
.customer .cBox .c_board .c_notice_list div p:hover {text-decoration: underline;}
.customer .cBox .c_board .c_notice_list div font {float:left; font-size:14px; color:#ff9700; font-weight:600; line-height:40px; margin-left:10px; position:relative;}

.customer .cBox .c_board .c_notice_list div span {font-size:18px; color:#888; font-weight:400; letter-spacing:-0.025em; line-height:40px; position:absolute; top:0; right:0;}

.customer .cBox .c_board .c_faq_list {width:100%; padding-top:20px;}
.customer .cBox .c_board .c_faq_list div {width:100%; position:relative;}
.customer .cBox .c_board .c_faq_list div p {font-size:18px; color:#333; font-weight:400; letter-spacing:-0.025em; line-height:40px; overflow: hidden; text-overflow: ellipsis; white-space:nowrap; max-width:100%; padding-left:28px; position:relative;}
.customer .cBox .c_board .c_faq_list div p:hover {text-decoration: underline;}
.customer .cBox .c_board .c_faq_list div p::before {content:"Q."; font-family: 'GmarketSansMedium',sans-serif; font-size:18px; color:#d51e41; line-height:40px; position:absolute; top:2px; left:0;}


.main5 .btn_top { opacity:0; display:block; position:absolute; bottom:48px; right:0; z-index:99; width:100px; color:#333!important; font-weight:300; font-size:14px; letter-spacing:-0.02em; text-align:center; transition:all .3s ease-in-out; }
.main5.on .btn_top { animation:ani_3 0.5s 0.6s; animation-fill-mode:both; }

@media screen and (max-width:1850px){
	.main5:before {left: calc(55% - 55px);}
	.customer .c_l_box {width:55%; padding:0px 50px;}
	.customer .c_r_box {width:45%;}
	.customer .cBox .c_board {padding:0px 50px;}
	
	.customer .cBox .c_board .c_notice_list div p {font-size:17px; line-height:38px;}
	.customer .cBox .c_board .c_notice_list div font {line-height:38px;}
	.customer .cBox .c_board .c_notice_list div span {font-size:17px; line-height:38px;}
	.customer .cBox .c_board .c_faq_list div p {font-size:17px; line-height:38px;}
	.customer .cBox .c_board .c_faq_list div p::before {font-size:17px; line-height:38px;}
}
@media screen and (max-width:1550px){
	.customer .cBox .cstitle p {font-size:26px;}
	
	.customer .cBox .c_board .c_notice_list {padding-top:10px;}
	.customer .cBox .c_board .c_faq_list {padding-top:10px;}
	.customer .cBox .c_board .c_notice_list div p {font-size:16px; line-height:38px; background-size:15px; padding-left:22px;}
	.customer .cBox .c_board .c_notice_list div font {line-height:38px;}
	.customer .cBox .c_board .c_notice_list div span {font-size:16px; line-height:38px;}
	.customer .cBox .c_board .c_faq_list div p {font-size:16px; line-height:38px;}
	.customer .cBox .c_board .c_faq_list div p::before {font-size:16px; line-height:38px;}
}
@media screen and (max-width:1250px){
	.customer .c_l_box {padding:0px 30px;}
	.customer .cBox .c_board {padding:0px 30px;}
	.customer .cBox .cstitle p {font-size:22px;}
	.customer .cBox .cstitle font {font-size:14px;}
	
	.customer .cBox .csForm .cfInput {padding:15px 0px; padding-left:140px;}
	.customer .cBox .csForm .cfInput p {top:15px; font-size:15px;}
	.customer .cBox .csForm .cfInput input[type=text] {font-size:15px;}
	.customer .cBox .csForm .cfInput select {font-size:15px;}
	.customer .cBox .csForm .cfInput textarea {font-size:15px; height:80px;}
	.customer .cBox .csForm .cfInput .cf_chk_box label {font-size:15px;}
	.customer .cBox .csForm .cfInput .cf_chk_box label input {width:16px; height:16px; background-size:16px!important;}
	.customer .cBox .csSubmit {padding-top:25px;}
	.customer .cBox .csSubmit label {margin-top:15px;}
	.customer .cBox .csSubmit span {margin-top:15px;}
	.customer .cBox .csSubmit div {width:200px; height:50px; line-height:50px; padding:0px 20px; font-size:17px;}
	.customer .cBox .csSubmit div::after {right:20px; width:22px; background-size:22px; height:6px; margin-top:-3px;}
	.customer .cBox .csSubmit div:hover::after {right:15px;}
	
	.customer .cBox .c_board .c_notice_list div p {font-size:15px; line-height:34px; background-size:14px; padding-left:22px; max-width:calc(100% - 50px);}
	.customer .cBox .c_board .c_notice_list div font {line-height:34px; font-size:13px;}
	.customer .cBox .c_board .c_notice_list div span {font-size:15px; line-height:34px;}
	.customer .cBox .c_board .c_faq_list div p {font-size:15px; line-height:34px;}
	.customer .cBox .c_board .c_faq_list div p::before {font-size:15px; line-height:34px;}
	
}
@media screen and (max-width:1024px){
	.main5 {padding-right:0;}
	.main5::before {display:none;}
	
	.customer {padding-top:50px;}
	.customer .cBox {float:none; width:100%; padding:0; padding-bottom:50px;}
	.customer .cBox .cForm {width:800px; margin: auto;}
	.customer .c_l_box {border-bottom:1px solid #e0e0e0;}
	.customer .cBox .c_board {padding:50px 0; width:800px; margin: auto;}
	
	.main5 .btn_top {width:40px; height:40px; background:url("/img/common/topbtn.png")no-repeat center #7F7F7F; background-size:15px; border-radius:6px; right:10px; bottom:10px; cursor: pointer;}
	.main5 .btn_top a {display:table-cell; font-size:12px; color:#fff; font-weight:400; overflow:hidden; text-indent:-9999em; width:100%; height:100%;}
}
@media screen and (max-width:850px){
	.customer .c_l_box {padding-bottom:0;}
	.customer .cBox .cForm {width:100%; padding:0px 20px;}
	.customer .cBox .c_board {width:100%; padding:30px 20px;}
}
@media screen and (max-width:640px){
	.customer .cBox .csForm {padding-top:10px;}
	.customer .cBox .csForm .cfInput {padding-left:0; border-bottom:0; padding:0; margin-bottom:20px;}
	.customer .cBox .csForm .cfInput p {position:static; margin-bottom:8px;}
	.customer .cBox .csForm .cfInput input[type=text] {border:1px solid #e0e0e0; height:40px; padding:0px 12px;}
	.customer .cBox .csForm .cfInput select {border:1px solid #e0e0e0; height:40px; padding:0px 12px; padding-left:34px; background-position:left 12px top 16px}
	.customer .cBox .csForm .cfInput textarea {border:1px solid #e0e0e0; height:150px; padding:10px 12px;}
	.customer .cBox .csForm .cfInput span {background:none; padding:0; padding-left:20px; margin-top:5px; color:#999;}
	.customer .cBox .csForm .cfInput span::before {top:3px; left:0; border:1px solid #999; color:#999;}
	.customer .cBox .csForm .cfInput .cf_chk_box {border:1px solid #e0e0e0; padding:12px 15px;}
	.customer .cBox .csSubmit {padding-top:5px;}
	
	
	.main5 .btn_top {width:40px; height:40px; background:url("/img/common/topbtn.png")no-repeat center #7F7F7F; background-size:15px; border-radius:6px; right:10px; bottom:10px;}
	.main5 .btn_top a {font-size:12px; color:#fff; font-weight:400; overflow:hidden; text-indent:-9999em;}
}
@media screen and (max-width:520px){
	.customer .cBox .csSubmit {padding-top:20px;}
	.customer .cBox .csSubmit label {margin-top:0;}
	.customer .cBox .csSubmit span {margin-top:0;}
	.customer .cBox .csSubmit div {width:100%; margin-top:20px; text-align: center;}
	.customer .cBox .csSubmit div::after {display: none;}
}
/* height */
@media screen and (max-height:740px){
	.main5 .btn_top { border-width:0; }
}
@media screen and (max-width:1024px) and (max-height:740px){
	.main5 .btn_top { border-width:1px 0 0 1px; }
}


.b_txt { display:none; animation:ani_5 0.3s; animation-fill-mode:both; }
.active .b_txt { display:block; position:absolute; right:312px; bottom:61px; color:#fff; z-index:999; font-size:12px; font-weight:300; color: #333; letter-spacing:0.11em;}
.fp-viewing-0 .b_txt,
.fp-viewing-2 .b_txt { color:#fff; }
@media screen and (max-width:1024px){
	.active .b_txt { display:none; }
}

@keyframes ani_1 {
	0% { -webkit-transform:translateX(-100px); -ms-transform:translateX(-100px); transform:translateX(-100px); opacity: 0;}
	100% { -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); opacity: 1;}
}

@keyframes ani_2 {
	0% { -webkit-transform:translateX(100px); -ms-transform:translateX(100px); transform:translateX(100px); opacity: 0;}
	100% { -webkit-transform:translateX(0); -ms-transform:translateX(0); transform:translateX(0); opacity: 1;}
}

@keyframes ani_3 {
	0% { -webkit-transform:translateY(50px); -ms-transform:translateY(50px); transform:translateY(50px); opacity: 0;}
	100% { -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); opacity: 1;}
}

@keyframes ani_4 {
	0% { -webkit-transform:translateY(-50px); -ms-transform:translateY(-50px); transform:translateY(-50px); opacity: 0;}
	100% { -webkit-transform:translateY(0); -ms-transform:translateY(0); transform:translateY(0); opacity: 1;}
}
@keyframes ani_5 {
	0% {opacity: 0;}
	100% {opacity: 1;}
}

.privacyPopup {width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999; background-color:rgba(0,0,0,0.5); display:none;}
.privacyPopup .ppLayout {max-width: 1000px; width: 100%; position:absolute; top:50%; left:50%; background-color:#fff; transform: translate(-50%,-50%); padding:50px; padding-bottom:70px;}
.privacyPopup .ppLayout .pp_title {width:100%; position:relative;}
.privacyPopup .ppLayout .pp_title p {font-family: 'GmarketSansMedium',sans-serif; font-size:22px; color:#333; letter-spacing:-0.025em;}
.privacyPopup .ppLayout .pp_title img {position:absolute; top:4px; right:0; width:24px; transition:all 0.2s;}
.privacyPopup .ppLayout .pp_title img:hover {opacity:0.6;}
.privacyPopup .ppLayout .pp_cont {width:100%; border:1px solid #e0e0e0; margin-top:20px; padding:30px 35px; max-height:450px; overflow-y: auto;}

.privacyPopup .ppLayout .pp_cont p {font-size:17px; color:#333; font-weight:400; letter-spacing:-0.025em; line-height:24px; margin-bottom:20px;}

.privacyPopup .ppLayout .pp_cont font {display: block; font-size:17px; color:#00458E; font-weight:500; letter-spacing:-0.025em; word-break: keep-all; position:relative;}
.privacyPopup .ppLayout .pp_cont span {font-size:15px; color:#555; line-height:20px; padding-left:12px; font-weight:400; display: block; word-break: keep-all; position:relative; margin-top:5px;} 
.privacyPopup .ppLayout .pp_cont span div {font-size:15px; color:#555; position:absolute; top:0; left:0; line-height:20px; font-weight:400;}

.privacyPopup .ppLayout .pp_cont table {width:100%; table-layout: fixed; border-top:2px solid #00458E; margin-top:8px; margin-bottom:15px;}
.privacyPopup .ppLayout .pp_cont table tr th {border:1px solid #e0e0e0; background-color:#f8f8f8; font-size:14px; color:#222; font-weight:400; padding:12px 0px;}
.privacyPopup .ppLayout .pp_cont table tr td {border:1px solid #e0e0e0; font-size:14px; color:#555; font-weight:400; padding:12px; word-break: keep-all; line-height:24px; text-align: center;}
@media screen and (max-width:1024px){
	.privacyPopup .ppLayout {width:90%; padding:40px 30px; padding-bottom:50px;}
	.privacyPopup .ppLayout .pp_title p {font-size:20px;}
	.privacyPopup .ppLayout .pp_title img {width:20px;}
	.privacyPopup .ppLayout .pp_cont p {font-size:16px; line-height:22px;}
	.privacyPopup .ppLayout .pp_cont font {font-size:16px;}
	.privacyPopup .ppLayout .pp_cont span {font-size:14px;}
	.privacyPopup .ppLayout .pp_cont span div {font-size:14px;}
	.privacyPopup .ppLayout .pp_cont table tr th {font-size:13px;}
	.privacyPopup .ppLayout .pp_cont table tr td {font-size:13px; line-height:20px;}
}
@media screen and (max-width:640px){
	.privacyPopup .ppLayout {width:90%; padding:30px 20px; padding-bottom:40px;}
	.privacyPopup .ppLayout .pp_title p {font-size:18px;}
	.privacyPopup .ppLayout .pp_title img {width:18px; top:3px;}
	.privacyPopup .ppLayout .pp_cont {padding:20px;}
	.privacyPopup .ppLayout .pp_cont p {font-size:15px; line-height:20px;}
	.privacyPopup .ppLayout .pp_cont font {font-size:15px;}
	.privacyPopup .ppLayout .pp_cont span {font-size:13px;}
	.privacyPopup .ppLayout .pp_cont span div {font-size:13px;}
	.privacyPopup .ppLayout .pp_cont table tr th {font-size:13px;}
	.privacyPopup .ppLayout .pp_cont table tr td {font-size:13px; line-height:20px;}
}


.articlePopup {width:100%; height:100%; position:fixed; top:0; left:0; z-index:99999; background-color:rgba(0,0,0,0.5); display:none;}
.articlePopup .apLayout {width:500px; background-color:#fff; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%);}
.articlePopup .apLayout .apClose {position:absolute; top:20px; right:20px; cursor: pointer; transition:all 0.2s;}
.articlePopup .apLayout .apClose:hover {opacity:0.7;}
.articlePopup .apLayout .apCont {width:100%; padding:50px 20px;}
.articlePopup .apLayout .apCont img {display: block; margin: auto; margin-bottom:15px;}
.articlePopup .apLayout .apCont p {font-size:17px; color:#555; font-weight:400; letter-spacing:-0.025em; line-height:20px; text-align: center;}
.articlePopup .apLayout .apCont .apSelect {width:100%; padding-top:20px; margin-top:20px; border-top:1px solid #dfdfdf;}
.articlePopup .apLayout .apCont .apSelect span {display: block; font-size:17px; color:#00458E; font-weight:500; letter-spacing:-0.025em; margin-bottom:10px;}
.articlePopup .apLayout .apCont .apSelect select {width:100%; height:46px; font-size:16px; color:#333; font-weight:400; letter-spacing:-0.025em; background:url("/img/common/selectBtn.png")no-repeat left 20px center; cursor: pointer; display: block; border:1px solid #d9dfe6; padding:0px 20px; padding-left:40px;}
.articlePopup .apLayout .apCont .apSelect select option {font-size:16px; color:#555; font-weight:400;}

.articlePopup .apLayout .apBtn {width:100%; overflow: hidden;}
.articlePopup .apLayout .apBtn div {width:50%; float:left; padding:16px 0px; text-align: center; color:#fff; font-size:18px; font-weight:300; line-height:22px; letter-spacing:-0.025em; background-color:#666; transition:all 0.2s;}
.articlePopup .apLayout .apBtn div:hover {background-color:#888;}
.articlePopup .apLayout .apBtn a:last-child div {background-color:#00428e;}
.articlePopup .apLayout .apBtn a:last-child div:hover {background-color:#0066F9;}


@media screen and (max-width:1024px){
	.articlePopup .apLayout .apCont img {width:70px; margin-bottom:12px;}
	.articlePopup .apLayout .apCont p {font-size:16px;}
	.articlePopup .apLayout .apCont .apSelect span {font-size:16px;}
}
@media screen and (max-width:640px){
	.articlePopup .apLayout {width:80%;}
	.articlePopup .apLayout .apCont {padding:40px 20px;}
	.articlePopup .apLayout .apCont img {width:62px; margin-bottom:10px;}
	.articlePopup .apLayout .apCont p {font-size:15px;}
	.articlePopup .apLayout .apCont .apSelect {margin-top:15px; padding-top:15px;}
	.articlePopup .apLayout .apCont .apSelect span {font-size:16px;}
	.articlePopup .apLayout .apCont .apSelect select {font-size:15px; height:42px;}
	.articlePopup .apLayout .apBtn div {padding:15px 0px; font-size:17px;}
}