@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Black+Han+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Gasoek+One&display=swap');
@font-face {
font-family: 'OneGothicTitle';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Title.woff') format('woff');
font-weight: normal;
font-display: swap;
}
@font-face {
font-family: 'OneGothicBody';
src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2105_2@1.0/ONE-Mobile-Regular.woff') format('woff');
font-weight: normal;
font-display: swap;
}
@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansLight.woff') format('woff');
    font-weight: 300;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansMedium.woff') format('woff');
    font-weight: 500;
    font-display: swap;
}

@font-face {
    font-family: 'GMarketSans';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2001@1.1/GmarketSansBold.woff') format('woff');
    font-weight: 700;
    font-display: swap;
}


/* ÃʱâÈ­ */
html {overflow-y:scroll}
body {margin:0;padding:0;font-size:0.75em;font-family:'Malgun Gothic', dotum, sans-serif;background:#fff}
html, h1, h2, h3, h4, h5, h6, form, fieldset, img {margin:0;padding:0;border:0}
h1, h2, h3, h4, h5, h6 {font-size:1em;font-family:'Malgun Gothic', dotum, sans-serif}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block}

ul, dl,dt,dd {margin:0;padding:0;list-style:none}
legend {position:absolute;margin:0;padding:0;font-size:0;line-height:0;text-indent:-9999em;overflow:hidden}
label, input, button, select, img {vertical-align:middle;font-size:1em}
input, button {margin:0;padding:0;font-family:'Malgun Gothic', dotum, sans-serif;font-size:1em}
input[type="submit"] {cursor:pointer}
button {cursor:pointer}

textarea, select {font-family:'Malgun Gothic', dotum, sans-serif;font-size:1em}
select {margin:0}
p {margin:0;padding:0;word-break:break-all}
hr {display:none}
pre {overflow-x:scroll;font-size:1.1em}
a {color:#000;text-decoration:none}

*, :after, :before {
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}

input[type=text],input[type=password], textarea {
-webkit-transition:all 0.30s ease-in-out;
-moz-transition:all 0.30s ease-in-out;
-ms-transition:all 0.30s ease-in-out;
-o-transition:all 0.30s ease-in-out;
outline:none;
}

input[type=text]:focus,input[type=password]:focus, textarea:focus,select:focus {
-webkit-box-shadow:0 0 5px #9ed4ff;
-moz-box-shadow:0 0 5px #9ed4ff;
box-shadow:0 0 5px #9ed4ff;
border:1px solid #558ab7 !important;
}

.placeholdersjs {color:#aaa !important}

/* ·¹À̾ƿô Å©±â ÁöÁ¤ */
#hd, #wrapper, #ft {min-width:1200px}

#hd_pop,
#hd_wrapper,
#tnb .inner,

#gnb .gnb_wrap,
#container_wr,
#ft_wr {width:1200px}


/* Áß°£ ·¹À̾ƿô */
#wrapper {}

/* cheditor À̽´ */
.cheditor-popup-window *, .cheditor-popup-window :after, .cheditor-popup-window :before {
-webkit-box-sizing:content-box;
-moz-box-sizing:content-box;
box-sizing:content-box;
}

/* MobileÈ­¸éÀ¸·Î */
#device_change {display:block;margin:0.3em;padding:0.5em 0;border:1px solid #eee;border-radius:2em;background:#fff;color:#000;font-size:2em;text-decoration:none;text-align:center}

body{ height:100%;}
	html{height:100%;}
	input::placeholder{color:#aaa; font-size:16px;}
	
	.wrap.login {background:#2c688c; height:100%; display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between;}
	
	.login_box.join_box .input_size100{width:100%;}
		html {
		  scroll-behavior: smooth;
		}
		.main_bnr .swiper { width: 100%;}
		.main_bnr .swiper-wrapper {margin-left: calc(50% - 682px - 7.5px);}
		.main_bnr .swiper-slide {width:100% ; MAX-width: 682px ;    transition: all 0.5s ease;  transform: scale(0.9);}
		.main_bnr .swiper-slide p img {  opacity:0.5;}
		.main_bnr .swiper-slide .mt_box{opacity:0;  transition:  opacity 1s ease;}

		/* 3. È°¼ºÈ­µÈ 2°³(°¡¿îµ¥ ¿µ¿ª)¸¸ ¼±¸íÇÏ°Ô */
		.main_bnr .swiper-slide-active p img,
		.main_bnr .swiper-slide-next p img{  opacity: 1 !important;  filter: blur(0) !important;  transform: scale(1) !important;}

		.main_bnr .swiper-slide-active .mt_box,
		.main_bnr .swiper-slide-next .mt_box{opacity:1; }


		.main_bnr .swiper-slide-active,
		.main_bnr .swiper-slide-next{background:none;}
		
		/* º¹Á¦µÈ ½½¶óÀÌµå ´ëÀÀ */
		.main_bnr .swiper-slide-duplicate-active,
		.main_bnr .swiper-slide-duplicate-next {  opacity: 1 !important;  filter: blur(0) !important;  transform: scale(1) !important;}


		.main_bnr .swiper-button-next, .main_bnr .swiper-button-prev {width:50px; height:50px; background:#fff; border-radius:100px;}
		.main_bnr .swiper-button-next:after, .main_bnr .swiper-button-prev:after {font-size:22px; color:#333;}

		.main_bnr li{position:relative; background:#000; border-radius:20px;border:1px solid #fff;}
			.main_bnr li img{ }
			.main_bnr p img {  width: 100%;  display: block;  border-radius: 20px;  }
			.main_bnr .mt_box{position:absolute; width:80%; height:60%; z-index:10;background:rgba(0,0,0,.5); top:20%; left:10%; border-radius:20px; display:flex; flex-flow:column wrap; align-items:center; justify-content:center; text-align:center; }
			.main_bnr .mt_box h2{font-weight:900; font-size:60px; line-height:60px; color:#237aaf; -webkit-text-stroke: .2px #fff;  text-stroke: .2px #fff;font-family:'Black Han Sans'; text-shadow:0px 6px  5px rgba(0,0,0,.2);}
			.main_bnr .mt_box a {display:inline-block; margin-top:10px; padding:0px 30px; border:2px solid #fff; background:#082738; color:#fff; font-size:18px; font-family:'GMarketSans'; border-radius:50px; line-height:40px; height:38px; box-sizing:border-box;}
			.main_bnr .mt_box a img {margin-bottom: 4px; opacity:1;}
			.main_bnr .mt_box.gp{background:rgba(0,0,0,.3);}
			.main_bnr .mt_box.gp h2{ color:#2358af;}

		header{width:90%; max-width:1350px; margin:auto; display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; padding:15px 0;}
			header span {font-size:20px; font-family:"Noto Sans KR"; font-weight: 600;}
			header span  a {color:#555; vertical-align: middle;}
			header span  a:hover {color:#237aaf;font-weight: 900;}
			header span button {font-size:18px;background:#237aaf; color:#fff; font-weight: 600; padding:10px 25px; border-radius:10px; border:none; margin-left:35px;}

		.main_com {width:90%; max-width:1350px; margin:auto;}
			.main_com nav{ display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; gap:5px; margin-top:45px;  position: sticky;  top: 0;  z-index: 100; padding:10px 0 ; background:rgba(255,255,255,.5);}	
			.main_com nav a{flex:1; border:1px solid #ccc; border-radius:15px; text-align:center; padding: 0; height:70px; display:flex;  justify-content:center; align-items:center;;font-size:20px; font-family:'GMarketSans'; font-weight:700;  background:#fff;}
			.main_com nav a.on,
			.main_com nav a.on:hover{background:#237aaf; color:#fff; border:none;}
			.main_com nav a:hover{background:#f1f1f1;}
			
			.main_com div h2{font-family:'GMarketSans'; font-weight:700;  font-size:50px; text-align:center; margin:80px 20px 20px 20px;}
			.main_com div h2 span{font-size:20px; font-weight:normal; display:block; color:#666;}
			.main_com > div{padding : 20px 0 140px 0;}
				.main_com .table_bg{width:100%; max-width: 907px; position:relative; margin:auto;}
				.main_com .table_bg p {width:100%; position:absolute; top:0; left:0; z-index:10;}
				.main_com .table_bg p img {width:100%;}
				.main_com .swiper {width: 740px; padding: 20px 0 0 0;}
				.main_com .swiper img {width:100%; }
				.main_com .swiper-slide {margin:0 !important;} 
				
				.main_com .swiper-button-next2, .main_com .swiper-button-prev2,
				.main_com .swiper-button-next3, .main_com .swiper-button-prev3,
				.main_com .swiper-button-next4, .main_com .swiper-button-prev4,
				.main_com .swiper-button-next5, .main_com .swiper-button-prev5,
				.main_com .swiper-button-next6, .main_com .swiper-button-prev6,
				.main_com .swiper-button-next7, .main_com .swiper-button-prev7 {position:absolute; top:50%;cursor:pointer;}
				
				.main_com .swiper-button-next2,
				.main_com .swiper-button-next3,
				.main_com .swiper-button-next4,
				.main_com .swiper-button-next5,
				.main_com .swiper-button-next6,
				.main_com .swiper-button-next7  {right:-50px;}
				
				.main_com .swiper-button-prev2,
				.main_com .swiper-button-prev3,
				.main_com .swiper-button-prev4,
				.main_com .swiper-button-prev5,
				.main_com .swiper-button-prev6,
				.main_com .swiper-button-prev7  {left:-60px;}
				
			.main_com  .swiper-wrapper {width:; margin:auto;}
			.main_com  .swiper-slide-active  img,
			.main_com  .swiper-slide-next  img{ }
					
				
	.login_box{width:100%; max-width:1340px; background:url('/static/web/images/login_bg.png')no-repeat center/contain; aspect-ratio:1340/888; margin:auto; position:relative;}		
		.login_box section{height:100%;}
		.login_box dl{height:100%; display:flex; flex-flow:row nowrap; align-items:center; justify-content:space-between;}
		.login_box dl dt,
		.login_box dl dd{flex:1; display:flex; flex-flow:column wrap; align-items:center; justify-content:center;}
		.login_box dl dt {padding-left:5%; }
		.login_box dl dt img {width:60%; max-width:325px;}
		.login_box dl dd {padding-right:6%; padding-bottom: 8%;}
		.login_box dl dd img{margin-bottom:20px; width:30%; max-width:115px;}
		.login_box dl dd p{width:60%; max-width:370px;  margin-bottom:5px;position:relative;}	
			.login_box dl dd > p:before{content:""; display:block; position:absolute; width:24px; height:24px; background:url('/static/web/images/ico_log01.png')no-repeat center/100%; left:15px; top:50%; transform:translateY(-50%);}
			.login_box dl dd > p input{height:60px; width:100%;border:1px solid #928c80; border-radius:8px; padding-left:50px; font-size:18px;}
			.login_box dl dd > p:nth-of-type(2):before{background:url('/static/web/images/ico_log02.png')no-repeat center/100%;}
		.login_box dl dd span{display:flex; flex-flow:row wrap; align-items:center; gap:5px; width:60%; max-width:370px; }
		.login_box dl dd span a{background:#ccc; text-align:center; line-height:64px; border-radius:8px; font-family:'OneGothicBody';  font-size:20px;}
		.login_box dl dd span a:nth-of-type(1){flex:1 1 95%; background:#b93f3e; font-size:30px; color:#fff; font-family:'OneGothicTitle';}
		.login_box dl dd span a:nth-of-type(2){flex:1 1 45%; background:#84bbd0; font-weight:bold;}
		.login_box dl dd span a:nth-of-type(3){flex:1 1 45%; background:#f1b93a; font-weight:bold;}
		
	
		.login_box h4{position:absolute; right: 3%; top:40%; transform:rotate(90deg);  transform-origin: right center; FONT-SIZE:14px;}
		
	.login_box.join_box{background:url('/static/web/images/login_bg2.png')no-repeat center/contain;  }	
		.login_box.join_box dl dd{padding-bottom:0; height:100%;}
		.login_box.join_box dl dd form{width:80%; height:63%; overflow:auto;}
		.login_box.join_box:after{content:""; display:block; clear:both;}
		.login_box.join_box ul li input,	
		.login_box.join_box ul li button,
		.login_box.join_box select{border:1px solid #ccc; border-radius:5px; line-height:30px; height:30px;padding:0 5px; font-size:14px; margin:2px 0;}		
		.login_box.join_box input::placeholder{font-size:14px;}
		.login_box.join_box h2{font-size:30px; color:#2c688c; font-family:'OneGothicTitle'; font-weight:normal; margin-bottom:10px; text-align:center; margin:0 auto 10px auto;}
		.login_box.join_box ul li{display:flex; flex-flow:row nowrap; align-items:center; justify-content:flex-start;}	
		.login_box.join_box ul li p{flex:1 1 15%;}		
		.login_box.join_box ul li p.on:after{content:"*"; display:inline-block; color:red; }
		.login_box.join_box ul li span{flex:1 1 75%;  display:block;}	
		.login_box.join_box ul li span p{color:#ef3a3a; padding:0 10px;}
		.login_box.join_box ul li button{color:#2c688c; border:1px solid #2c688c; font-weight:bold; font-size:12px; font-family:'OneGothicBody'; }
		.login_box.join_box .sandbtn{text-align:center; display:block; margin:5px auto; padding:10px 30px; font-size:20px; background:#2c688c; color:#fff; font-family:'OneGothicTitle'; border:none; border-radius:5px;}
		.login_box.join_box ul li .txtInfo{display:none; width:100%;}
		.login_box.join_box ul li .txtInfo.txton{display:block;}
		
		.login_box.join_box ol {display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; padding:0;  gap:5px;}
			.login_box.join_box ol li{list-style:none;flex:1; border:none; border-radius:5px; background:#f1f1f1; padding: 10px;display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; margin:10px 0;}
			.login_box.join_box ol li label{white-space: pre;}
			.login_box.join_box ol li label:after{content:"*"; display:inline-block; color:red; }
			.login_box.join_box ol li a {background:#333; color:#fff; font-size:11px; border-radius:3px;padding:3px 5px;cursor:pointer;}
			.login_box.join_box ol li span{ flex-flow:row nowrap;  }
			
		.login_box.join_box .input_size20{width:20%;}
		.login_box.join_box .input_size50{width:50%;}
		.login_box.join_box .input_size60{width:60%;}
		.login_box.join_box .input_size70{width:70%;}
		.login_box.join_box .input_size80{width:80%;}
		
				
				footer{width:100%; background:#333; padding:50px 0; margin-top:100px;}
					footer ul {width:90%; max-width:1350px; margin:auto; display:flex; flex-flow:row wrap; align-items:center; justify-content:flex-start; color:#fff; font-size:18px;}
					footer ul img {opacity:.5; width:100px; margin-right:50px;}
					footer ul div{display:flex; flex-flow:row wrap; align-items:center; justify-content:flex-start; margin-bottom:10px;}
					footer ul a {color:#fff; font-size:18px; display:block;vertical-align:middle;cursor:pointer;}
					footer ul a:nth-of-type(1):after{content:""; display:inline-block; width:1px; height:15px; background:rgba(255,255,255,.2); margin:0 20px;   }
					footer ul strong{font-weight:normal; opacity:.5; display:block;margin-top:10px;}
					
					
		/***** ·¹À̾îÆ˾÷ *****/
		.btnBox { text-align:center;}
		/* Æ˾÷ ¿µ¿ª */
		.popCmmn {display:none;position:fixed;top:0;left:0;width:100%;height:100%;z-index: 1000;  background:rgba(0,0,0,0.7);}
		.popInnerBox {width: 90% !important;display:flex;justify-content:space-between;flex-direction:column;position:absolute;top:50%;left:50%;max-width: 400px;height: auto;/* margin:-125px 0 0 -200px; */text-align:center;background:#fff;border-radius: 10px;box-shadow: 4px 4px 10px #383838;transform: translate(-50%, -50%);-webkit-transform: translate(-50%,-50%);-ms-transform: translate(-50%,-50%);}
		.popHead {color: #333;font-size: 20px;text-align: left;padding: 10px 20px;border-bottom: 1px solid #ddd; font-family:'OneGothicTitle';}
		.popBody { padding:10px; box-sizing:border-box; font-size:14px;}
		.popBody .popbody_w{padding:20px;padding-top:10px;}
		.popBody p{font-family:'OneGothicTitle';}
		.popCloseBtnCmmn {font-size: 25px;color: #686868;transition:all 0.3s;border: none;background: none;width: 45px;position: absolute;right: 0;top: 6px;}
		.popInnerBox.big_pop{max-width:780px;/* max-height: 550px; *//* overflow: auto; */}
		.popInnerBox.big_pop .popBody{padding:10px 10px 10px 20px;}  
		.popInnerBox.big_pop .popBody div{min-height:200px;max-height: 500px;overflow: auto;text-align: left; }
		
		
		
		@media screen and (max-width: 1200px){ 
			
			.main_bnr .swiper-wrapper {margin-left: 5%;}
			.main_bnr .swiper-slide {MAX-width: 44.5% ;  }
			
			.login_box h4{top:45%;}
			.login_box dl dd input{height:50px; }
			.login_box.join_box  dl dd  ol li input{height:auto;}
			
			.login_box dl dd span a:nth-of-type(1),
			.login_box dl dd span a{line-height:50px;font-size:18px;}
		}
		@media screen and (max-width: 1200px){ 
			.login_box dl dd input{height:50px; }
			.login_box.join_box  dl dd  ol li input{height:auto;}
			
		}
		@media screen and (max-width: 1000px){ 
			.login_box h4{FONT-SIZE:10px;}
			.login_box dl dd input,			
			.login_box dl dd span a:nth-of-type(1),
			.login_box dl dd span a{height:40px; line-height:40px;font-size:14px;}
			.login_box.join_box  dl dd  ol li input{height:auto;}
			
			
			.main_com div h2 {margin:20px;}
			.main_com .swiper {width: 90%; padding: 10px 0 0 0;}				
			.main_com {width:96%; margin:auto;}
			.main_com nav a {font-size:16px; flex:1 1 32%; height: 40px;}
			.main_com > div {width:90%; margin:auto;}
			.main_com .swiper-button-next2, 
			.main_com .swiper-button-next3, 
			.main_com .swiper-button-next4, 
			.main_com .swiper-button-next5, 
			.main_com .swiper-button-next6, 
			.main_com .swiper-button-next7{
				right:-30px;
			}
			.main_com .swiper-button-prev2, 
			.main_com .swiper-button-prev3, 
			.main_com .swiper-button-prev4, 
			.main_com .swiper-button-prev5, 
			.main_com .swiper-button-prev6, 
			.main_com .swiper-button-prev7{
				left:-30px;
			}
			.main_com .swiper-button-next2 img, 
			.main_com .swiper-button-next3 img, 
			.main_com .swiper-button-next4 img, 
			.main_com .swiper-button-next5 img, 
			.main_com .swiper-button-next6 img, 
			.main_com .swiper-button-next7 img,
			.main_com .swiper-button-prev2 img, 
			.main_com .swiper-button-prev3 img, 
			.main_com .swiper-button-prev4 img, 
			.main_com .swiper-button-prev5 img, 
			.main_com .swiper-button-prev6 img, 
			.main_com .swiper-button-prev7 img{
				width:30px;
			}
			.main_com div h2,
			.main_bnr .mt_box h2 {font-size:40px; line-height:40px;}
			.main_com div h2 span,
			.main_bnr .mt_box a {font-size:14px; line-height:18px; height:unset;}
		}
		@media screen and (max-width: 800px){  
			.login_box h4{right:6%;}
			.login_box dl dd {padding-right:10%; padding-bottom: 10%;}
			.login_box{width:95%; margin:0; aspect-ratio: 1340 / 1776; background: url(/static/web/images/login_bg.png) no-repeat right center / 200%;}	
			.login_box dl{width: 90%;}
			.login_box dl dt{display:none;}	
			
			.login_box.join_box{width:95%; margin:0; aspect-ratio: 1340 / 1776; background: url(/static/web/images/login_bg2.png) no-repeat right center / 200%;}
			.login_box.join_box ul li p,
			.login_box.join_box ul li input, 
			.login_box.join_box ul li button, 
			.login_box.join_box select,				
			.login_box.join_box input::placeholder{font-size:11px; padding:0 2px;}
			
			
			.login_box.join_box ol {margin-top:20px;}
			.login_box.join_box ol li{flex:1 1 95%; margin:0;}
			.login_box.join_box ul li span p {padding:0 5px;}
			.login_box.join_box ul li{flex-flow:column wrap;}
			.login_box.join_box ul li p,
			.login_box.join_box ul li span {max-width:unset; width:100%;}
			.login_box.join_box ul li > p {margin-top:10px;}
			
			    
			.main_bnr .swiper-slide {MAX-width: 90%;} 
			header span {font-size:16px;}
			header span button {font-size:14px;     margin-left: 15px;}
			footer ul,
			footer ul a {font-size:14px;}
			footer ul div {margin:10px 0;}

		}
		@media screen and (max-width: 500px){  
			.login_box dl dd { padding-bottom: 15%;}
			.login_box dl dd input,			
			.login_box dl dd span a:nth-of-type(1),
			.login_box dl dd span a{height:35px; line-height:35px;font-size:12px;}
			.login_box dl dd p:before{width:20px; height:20px; left:10px;}
			.login_box dl dd input{padding-left:40px;}
			.login_box.join_box  dl dd  ol li input{height:auto;}
			.login_box.join_box ol {flex-flow:;}
			input::placeholder{color:#aaa; font-size:10px;}
			
			.main_com nav a {font-size:12px; font-weight:normal;}
			.main_bnr .mt_box h2,
			.main_com div h2 {font-size: 30px;}
			.main_com .swiper {padding: 5px 0 0 0;}
			
			.main_com .swiper-button-next2, 
			.main_com .swiper-button-next3, 
			.main_com .swiper-button-next4, 
			.main_com .swiper-button-next5, 
			.main_com .swiper-button-next6, 
			.main_com .swiper-button-next7{
				right:-20px;
			}
			.main_com .swiper-button-prev2, 
			.main_com .swiper-button-prev3, 
			.main_com .swiper-button-prev4, 
			.main_com .swiper-button-prev5, 
			.main_com .swiper-button-prev6, 
			.main_com .swiper-button-prev7{
				left:-20px;
			}
			.main_com .swiper-button-next2 img, 
			.main_com .swiper-button-next3 img, 
			.main_com .swiper-button-next4 img, 
			.main_com .swiper-button-next5 img, 
			.main_com .swiper-button-next6 img, 
			.main_com .swiper-button-next7 img,
			.main_com .swiper-button-prev2 img, 
			.main_com .swiper-button-prev3 img, 
			.main_com .swiper-button-prev4 img, 
			.main_com .swiper-button-prev5 img, 
			.main_com .swiper-button-prev6 img, 
			.main_com .swiper-button-prev7 img{
				width:20px;
			}
			
		}
		@media screen and (max-width: 350px){  
			.login_box dl dd input,			
			.login_box dl dd span a:nth-of-type(1),
			.login_box dl dd span a{height:30px; line-height:30px;font-size:10px;}
		}