@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;}
	
	
	header{  ; background:#fff;}
		header.on{box-shadow:0 3px 3px rgba(0,0,0,.2);}	
		header div{width:96%; max-width:1400px; margin:auto; position:relative;margin:auto; height:70px; display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between; }
		header h1{max-width:40%;}
		header h1 a{margin:0;}
		header h1 img {width:100%;}
		header a{font-family:'Noto Sans KR'; font-size:clamp(16px,1.3vw,20px); line-height:clamp(18px,1.8vw,24px); font-weight:600;}
		header .gnb > li > a {padding:0; margin:0 10px;}
		header span a {font-size:clamp(12px,1.3vw,15px); color:#666; margin-left:5px; font-weight:normal;}
		header   a:hover{color:#ff5e00;}
		header span a:first-child:after{content:""; displaY:inline-block; width:1px; background:#aaa; height:12px; margin-left:8px;}
		header span a:last-child{background:#ff5e00; color:#fff; padding:5px 10px; border-radius:5px; display: inline-block;}
		header span a:last-child:hover{color:#fff;}
		header span .user_info {justify-content: flex-end; height:24px; margin-right:0; font-family:'Noto Sans KR';}
		header span .user_info img{width:15px;}
		header span .user_info b{font-weight:normal;font-family:'Noto Sans KR';font-weight:500; display:inline-block; margin-left:5px;}
		header .gnb_wrap nav{display:none;}
		header  nav{display:none;}
		
		.main_bnr {width:96%; max-width:1400px;  margin: 70px auto 0 auto;}
			.main_bnr ul{ display:flex; flex-flow:row nowrap; align-items:center; justify-content:space-between;}
				.main_bnr li{flex:1 1 29%;}
				.main_bnr li:nth-of-type(2){flex:1 1 40%; overflow:hidden; height:806px; position:relative;}
				.main_bnr li:nth-of-type(2) img {position:absolute;animation:menu_hover 2s ease-out 0s 1 alternate;}
				
				@keyframes menu_hover{
					  0% {left:-60%; opacity:0;}
					  50% { opacity:1;}
					  100%   {left:0;  }
				}
				.main_bnr li:nth-of-type(1){align-self: flex-start; padding-top:10%;}
				.main_bnr li:nth-of-type(3){align-self: flex-end;     justify-items: self-end; padding-bottom:10%;}
				.main_bnr li h2{font-size:clamp(40px,4vw,55px); line-height:clamp(45px,4.5vw,65px);font-family:'GMarketSans';  }
				.main_bnr li span{display:block; font-size:clamp(28px,3vw,38px); line-height:clamp(35px,3.5vw,50px);  font-weight: 500; font-family:'Noto Sans KR';}
				.main_bnr li span a{display:block; width:80%;font-size:clamp(14px,1.3vw,18px); line-height:clamp(18px,1.8vw,24px); margin-top:20px; font-weight:bold;padding:5px 10px; border-bottom:2px solid #333; position:relative;}
				.main_bnr li span a:after{content:""; display:block; position:absolute; width:2px; height:20px; transform:rotate(-45deg); right:7px; bottom:-4px; background:#333;}
				
				
		.main_con1 {width:96%; max-width:1400px; margin:50px auto;}
			.main_con1 ul{ display:grid;  gap:10px; grid-template-columns: 60% 40%;}
			.main_con1 ul li{display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between;padding:30px 50px; border:1px solid #eee; border-radius:5px; position:relative;}
			.main_con1 ul li:nth-child(1) {grid-column: 1 / 2; grid-row: 1 / 2;}
			.main_con1 ul li:nth-child(2) {grid-column: 1 / 2; grid-row: 2 / 3;}
			.main_con1 ul li:nth-child(3) {grid-column: 2 / 3; grid-row: 1 / 3; align-content: flex-start;}
			.main_con1 ul li:after{ font-size:45px; font-weight:bold; position:absolute; width:50px; height:50px; line-height:50px; display:block;text-align:center; background:#333; border-radius:50%; color:#fff;z-index:100;}
			
			.main_con1 ul li:nth-child(1):after{content:"+"; left:50%; bottom:-30px; }
			.main_con1 ul li:nth-child(3):after{content:"="; left:-30px; top:50%; transform:translateY(-50%);}
			.main_con1 ul li h2{font-size:clamp(30px,3vw,40px); line-height:clamp(35px,3.5vw,50px); font-family:'GMarketSans'; }
			.main_con1 ul li h2 img {display:inline-block; margin:0 50px 0 20px;}
			.main_con1 ul li span{font-size:clamp(14px,1.3vw,18px); line-height:clamp(18px,1.8vw,24px); font-family:'Noto Sans KR';  font-weight: 500;    flex: 1;}
			.main_con1 ul li:nth-child(3) h2{flex:1 1 99% ;}
			.main_con1 ul li:nth-child(3) h2 img {display:inline-block; margin:0 50px 0 20px;}
			.main_con1 ul li:nth-child(3) span{align-self: flex-start;}
			.main_con1 ul li:nth-child(3) p{position: absolute; right: 30px; bottom: 30px;}
			.main_con1 ul li:nth-child(1):hover {background:#4cbdb5;}
			.main_con1 ul li:nth-child(2):hover {background:#74e2bd;}
			.main_con1 ul li:nth-child(3):hover {background:#ff6a38;}
			.main_con1 ul li:hover h2,
			.main_con1 ul li:hover span{color:#fff;}
			.main_con1 ul li:hover h2 img{filter: brightness(0) saturate(100%) invert(100%);}
			
			.main_con1 ul li p{max-width:18%;}
			.main_con1 ul li:last-child p{max-width:25%;}
			.main_con1 ul li p img{width:100%;}
			
			
			
			
		.main_con2 {width:100%; background:#f1f1f1; padding:60px 0;}
			.main_con2 ul{width:96%; max-width:1400px; margin:auto; display:grid;  gap:10px; }
			.main_con2 ul li:nth-child(1) {grid-column: 1 / 2; grid-row: 1 / 3;} 
			.main_con2 ul li:nth-child(2) {grid-column: 2 / 3; grid-row: 1 / 2;} 
			.main_con2 ul li:nth-child(3) {grid-column: 3 / 4; grid-row: 1 / 2;} 
			.main_con2 ul li:nth-child(4) {grid-column: 4 / 5; grid-row: 1 / 2;} 
			.main_con2 ul li:nth-child(5) {grid-column: 2 / 3; grid-row: 2 / 3;} 
			.main_con2 ul li:nth-child(6) {grid-column: 3 / 4; grid-row: 2 / 3;} 
			.main_con2 ul li:nth-child(7) {grid-column: 4 / 5; grid-row: 2 / 3;} 
			.main_con2 ul li{display:flex; flex-flow:row wrap; align-items:flex-start; align-content: flex-start; justify-content:space-between;padding: 30px 30px 20px 30px; border:1px solid #ccc; border-radius:5px; position:relative; background:#fff;}
			.main_con2 ul li h2 {font-size:clamp(30px,3vw,40px); line-height:clamp(35px,3.5vw,50px);  font-family:'GMarketSans'; font-weight: ; flex:1 1 99%;}
			.main_con2 ul li span{flex:1 1 99%; display:block; width: min-content;  font-size:clamp(14px,1.3vw,18px); line-height:clamp(18px,1.8vw,24px); font-weight: 500;  font-family:'Noto Sans KR';margin:10px 0 20px 0;}
			.main_con2 ul li span strong{color:#ff6a38;}
			.main_con2 ul li a{flex:1 1 80%; display:inline-block; width: min-content;font-weight: 500;  max-width:70%; font-size:clamp(14px,1.3vw,18px); line-height:clamp(18px,1.8vw,24px); font-family:'Noto Sans KR'; background:#ff6a38; padding:10px 15px; border-radius:5px;}
			.main_con2 ul li a strong{color:#fff;}
			.main_con2 ul li p {text-align:right; width:100%;}
			
			
		.main_con3 {width:96%; max-width:1400px; margin:50px auto; position:relative;}
			.main_con3 dl{ display:flex; flex-flow:row nowrap; align-items:center; justify-content: flex-start}
			.main_con3 dt{width:53%; background:#fff; box-shadow:2px 2px 5px rgba(0,0,0,.2); border:1px solid #eee; padding:80px 50px; border-radius:10px; background:#f9f9f9;border:5px solid #fff; box-sizing:border-box;  }
			.main_con3 dt h2{ font-size:clamp(40px,4vw,55px); line-height:clamp(45px,4.5vw,65px); font-family:'GMarketSans';  color:#17c6cd;}
			.main_con3 dt p{font-size:clamp(20px,2.5vw,35px); line-height:clamp(25px,3.5vw,45px); font-family:'GMarketSans';  margin:5px 0 10px 0;}
			.main_con3 dt span{font-size:clamp(14px,1.3vw,18px); line-height:clamp(18px,1.8vw,24px); font-family:'Noto Sans KR'; }
			.main_con3 dt a {display:inline-block; margin-top:20px; font-weight:bold; color:#fff; border-radius:5px; padding:3px 20px 0 20px;  height:60px; font-size:18px; font-family:'GMarketSans'; background:#17c6cd;display:flex;  align-items:center;    width: max-content; position:relative; }
			.main_con3 dt a:after{content:""; display:inline-block;  width:30px; border-bottom:3px solid #fff; height:5px; margin:0 5px 0 15px;}
			.main_con3 dt a:before{content:""; position:absolute; display:block; width:3px; height:10px; background:#fff; transform:rotate(-45deg) translateY(-8px); right:22px; top:50%;}
			.main_con3 dd{width:52%; position:absolute; right:0; z-index:-1; border:5px solid #fff; box-sizing:border-box; box-shadow:2px 2px 5px rgba(0,0,0,.2);  border-radius:10px;}
			.main_con3 dd img {width:100%;}
			.main_con3 dl:nth-child(2){justify-content: flex-end; margin-top:50px;}
			.main_con3 dl:nth-child(2) dt h2{color:#c5dd34;}
			.main_con3 dl:nth-child(2) dt a{background:#c5dd34;}
			.main_con3 dl:nth-child(2) dd{left:0; right:unset;}
			
		.main_con4 {width:100%; background:#f6f6f6; padding:80px 0 20px 0;}
			.main_con4 div{width:96%; max-width:1400px; margin:auto;text-align:center; }
			.main_con4 h2{ font-family:'GMarketSans';   font-size:clamp(40px,4vw,60px); line-height:clamp(45px,4.5vw,70px); }
			.main_con4 p{  font-family:'GMarketSans'; font-size:clamp(30px,3vw,40px); line-height:clamp(35px,3.5vw,50px); }
			.main_con4 p strong{color:#ff6a38;}
			.main_con4 span{font-size:clamp(14px,1.3vw,18px); line-height:clamp(18px,1.8vw,24px);  font-family:'Noto Sans KR';  display:block; margin:10px 0 20px 0; font-weight:500;}
			.main_con4 div:after{content:"ONE STOP"; DISPLAY:block; text-align:center; font-size:60px; font-family:'GMarketSans'; color:#eee;font-weight:bold;}
			.main_con4 {}
			
			
		.main_con5 {width:96%; max-width:1400px; margin:80px auto; position:relative;}
			.main_con5 dl{ display:flex; flex-flow:row nowrap; align-items:center; justify-content: flex-start; gap:10px;}
			.main_con5 dl h2{ font-family:'GMarketSans'; font-size:clamp(25px,3vw,45px); line-height:clamp(30px,3.5vw,50px); }
			.main_con5 dl h2 strong{color:#ff6a38;}
			.main_con5 dt{flex:1 1 25%; height:350px; background:#f1f1f1; border:1px solid #ccc; border-radius:5px;padding:40px 30px; position:relative;}
			
			.main_con5 dt div div{width:50px; height:50px; background:#ff6a38; text-align:center;  border-radius:10px;}
			.main_con5 dt div div img {width:70%;}			
			.main_con5 dt .swiper-button-prev{ top:auto; left:auto; right:100px; bottom:20px;}	
			.main_con5 dt .swiper-button-next{ top:auto; left:auto; right:20px; bottom:20px;}
			.main_con5 dd{flex:1 1 74%;font-weight:500; }
			.main_con5 dd li{border:1px solid ; height:350px; background:#f1f1f1; border:1px solid #ccc; border-radius:5px;padding:40px 30px;}
			.main_con5 dd h3 {font-size:clamp(25px,3vw,45px); line-height:clamp(30px,3.5vw,50px); font-family:'GMarketSans';}
			.main_con5 dd p {color:#ff6a38; font-size:18px; font-family:'Noto Sans KR';}
			.main_con5 dd span {font-size:clamp(14px,1.3vw,18px); line-height:clamp(18px,1.8vw,24px);  font-family:'Noto Sans KR'; }
			.main_con5 dd img {position:absolute; right:20px; bottom:20px;}
			
			.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
			.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{display:none;}
			
			
		.main_con6 {width:96%; max-width:1400px; margin:50px auto; position:relative; text-align:center;}			
			.main_con6 a{font-size:50px; font-family:'GMarketSans'; line-height:60px; display:inline-block; margin:auto; padding:26px 60px 16px 60px; background:#ff6a38; color:#fff; font-weight:bold; border-radius:100px;}
			
			
		footer {width:100%; padding:80px 0; background:#444; background-color:#444; color:#fff;}
			footer dl{width:96%; max-width:1400px; margin:auto; display:flex; flex-flow:row wrap; align-items:center; justify-content:space-between;}
			footer dl dt a{color:#fff; display:inline-block; font-size:18px; font-family:'Noto Sans KR'; cursor:pointer;}
			footer dl dt a:first-child:after{content:""; display:inline-block; width:1px ; height:13px; background:rgba(255,255,255,.5);margin:0 15px;}
			footer dl dt span{ font-size:18px; font-family:'Noto Sans KR'; line-height:24px; padding:10px 0; display:block;color:#fff;}
			footer dl dt strong{font-size:18px; font-family:'Noto Sans KR'; color:rgba(255,255,255,.5); font-weight:normal;}
			footer dl dd {text-align:right;}
			footer dl dd h2{color:#fff; font-size:45px; font-family:'GMarketSans';}
			footer dl dd span{color:#fff;font-size:18px; font-family:'Noto Sans KR';}
					
		/***** ·¹À̾îÆ˾÷ *****/
		.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){ 
			header{justify-content:flex-end;}  
			.main_bnr {width:96%; max-width:1400px; margin:auto;}
				.main_bnr ul{ display:flex; flex-flow:row nowrap; align-items:center; justify-content:space-between;}
					.main_bnr li{flex:1 1 29%;}
					.main_bnr li:nth-of-type(1){align-self: flex-start; padding-top:10%;}
					.main_bnr li:nth-of-type(2){flex:1 1 40%; overflow:hidden; height:600px;}
					.main_bnr li:nth-of-type(2) img{ height:100%;}
					.main_bnr li:nth-of-type(3){align-self: flex-end; justify-items: self-end; padding-bottom:10%; position:absolute; left:20px;}  
		}
		
		@media screen and (max-width: 1000px){ 
			.main_con1 ul li h2{flex:1 1 99% ;}
			.main_con1 ul li h2 img {display:inline-block; margin:0 50px 0 20px;}
			.main_con1 ul li span{align-self: flex-start;}
			.main_con1 ul li p{position: absolute; right: 30px; bottom: 30px;}  
			
			
			.main_con2 ul li:nth-child(1) {grid-column: 1 / 3; grid-row: 1 / 2;} 
			.main_con2 ul li:nth-child(2) {grid-column: 1 / 2; grid-row: 2 / 3;} 
			.main_con2 ul li:nth-child(3) {grid-column: 2 / 3; grid-row: 2 / 3;} 
			.main_con2 ul li:nth-child(4) {grid-column: 1 / 2; grid-row: 3 / 4;} 
			.main_con2 ul li:nth-child(5) {grid-column: 2 / 3; grid-row: 3 / 4;} 
			.main_con2 ul li:nth-child(6) {grid-column: 1 / 2; grid-row: 4 / 5;} 
			.main_con2 ul li:nth-child(7) {grid-column: 2 / 3; grid-row: 4 / 5;} 
			
			
			.main_con3 dt{width:53%;padding:40px 30px; }
			
			.main_con4   img { width:90%;}
			
			.main_con5 dl{flex-flow:row wrap;}
			.main_con5 dt{flex:1 1 99%; height:130px;      padding: 30px 20px;}			 
			.main_con5 dd{flex:1 1 99%; }
			.main_con5 dd li {padding: 30px 20px;}
			.main_con6 a {    font-size: 30px; line-height: 40px;   padding: 20px 40px 10px 40px;   }
			
		}
		
		@media screen and (max-width: 800px){  
			header a{margin:10px; }
				.main_bnr li:nth-of-type(2){height:500px;}
				
				.main_con1 ul li{padding: 20px 30px;}
				.main_con1 ul li p {text-align:right;} 
				.main_con3 dt{width:100%; padding:50px 30px; order:1;}
				.main_con3 dd{width:90%; position:relative; top:-20px;  order:2; left:5%;}
				.main_con3 dl { position:relative; flex-flow:row wrap;}
				.main_con3 dl:nth-child(2) dd {right:5%; left:auto;}
				
				.main_con4 span br{display:none;}
				
				.main_con5 dd img {max-width:40%;}
				.main_con5 dd span br{display:none;}
				
				footer dl dd {width:100%; margin-top:20px;}
				
		}
		
		@media screen and (max-width: 500px){  
		
			header a{margin:5px; }
			.main_con5 dd li {height:300px;         top: 370px;}
		}
		
		@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;}
		}