@charset 'utf-8';
   

#wrap {width:100%; height:100%; position: relative; display:flex; justify-content:space-between; align-items:top;}
 

/* header */
.header {position:fixed; width:215px; min-width:200px; background:#222; height:100%;  height:100%; padding:0; }
.grid {width:100%; display:flex; justify-content: center; align-items:top; padding:0 60px 0 215px; }
section {width:100%; max-width:1400px; padding:20px 2% 0 2%; }
article {padding:0 0 35px;}

@media all and (max-width:1600px){ 
section { padding:20px 30px 0 30px;}

}

@media all and (max-width:1200px){ 
.grid { padding:0 0 0 215px ; } 
}

@media all and (max-width:900px){
#wrap { display:block;}
.grid {width:100%; display:block; padding:0;} 
 section { padding:0 20px 0 20px;  }
 
}

 

@media all and (max-width:600px){
  section { padding:0 15px;  }
 
}
 
.g-recaptcha > div {margin:0 auto;} 



/* header : PC */
.header h1 {width:100%;margin:0 0 70px; }
.header h1 a {width:100%; height:49px; display:inline-block; background:url(../img/com/logo.png) no-repeat center 50%; } 
.header h1 a:hover {text-decoration:none;}
.header h1 a em {display:none;} 

@media all and (max-width:900px){
#wrap {width:100%; height:auto; position: relative; display:block; }
.header { position:relative; width:100%; max-width:100%; height:58px;background:#fff;}
.header h1 { position:absolute; top:60px; left:25%;width:50%; margin:0; height:58px; x-index:11; }
.header h1 a {width:80px; font-size:24px; line-height:57px; font-weight:600; color:#fff;  height:100%;display:inline-block; background:url(../img/com/logo_mo.png) no-repeat center 50%; background-size:80px; } 
}




#nav {width:100%;  height:100%; background:#3d3d3d url(../img/com/bg_leftmenu.jpg) no-repeat 0 0 ; padding:20px 0 0 0;}
#nav .inside{width:100%; display:block; }


#nav nav {width:100%; margin:0;}
#nav nav ul {width:100%;}
#nav nav ul li {position:relative;width:100%;}
#nav nav ul li a {width:100%;ddisplay:inline-block; padding:0 0 0 63px; line-height:53px; height:54px; font-size:15px; font-weight:500; color:#fff;  text-decoration:none; text-transform:uppercase; }
#nav nav ul li a span {display:inline-block; line-height:1.6;line-height:53px; height:54px;}
#nav nav ul li.ficon_block a {background:url(../img/com/micon_01.png) no-repeat 22px 50%;   }
#nav nav ul li.ficon_tran a {background:url(../img/com/micon_02.png) no-repeat 22px 50%;   }
#nav nav ul li.ficon_holder a {background:url(../img/com/micon_03.png) no-repeat 22px 50%;   }
#nav nav ul li:hover > a,
#nav nav ul li.on > a {color:#f9ae41; opacity:1; filter:alpha(opacity=100);}
#nav nav ul li.on > a span{color:#f9ae41;  }

#nav nav ul li.ficon_block a:hover, 
#nav nav ul li.ficon_block.on a {background:url(../img/com/micon_01_on.png) no-repeat 22px 50%;   }
#nav nav ul li.ficon_tran a:hover,
#nav nav ul li.ficon_tran.on a {background:url(../img/com/micon_02_on.png) no-repeat 22px 50%;   }
#nav nav ul li.ficon_holder a:hover,
#nav nav ul li.ficon_holder.on  a {background:url(../img/com/micon_03_on.png) no-repeat 22px 50%;   }

 

/* mobile nav btn */
#nav a span,#nav .inside,#nav li,#navbutton a,#navbutton2 a,#navbutton span,#navbutton2 span{
	transition:all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	-webkit-transition:all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
	-moz-transition:all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
	-o-transition:all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
	-ms-transition:all 0.3s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
}
 
#navbutton a {cursor:pointer;height:48px;position:fixed;left:20px;text-indent:-999em;top:4px;width:24px;z-index:15;}
#navbutton .on {cursor:pointer;height:48px;position:fixed;right:20px;text-indent:-999em;top:7px;width:30px;z-index:16;}
#navbutton .on span{background:#fff !important; height:2px;position:absolute;top:17px;width:30px;-webkit-border-radius:1px-moz-border-radius:1px-o-border-radius:1px-ms-border-radius:1px-khtml-border-radius:1px;border-radius:1px}
#navbutton span{background:#3c3c3c;height:2px;left:0; position:absolute;top:14px;width:24px;-webkit-border-radius:1px-moz-border-radius:1px-o-border-radius:1px-ms-border-radius:1px-khtml-border-radius:1px;border-radius:1px}

#navbutton span + span{top:20px; width:18px; right:auto; right:0;}
#navbutton span + span + span{top:26px; width:24px}
#navbutton span + span + span + span {top:32px; width:18px}

#navbutton a.on span:first-child{
	transform:translate3d(0, 6px, 0) rotate(225deg);
	-webkit-transform:translate3d(0, 6px, 0) rotate(225deg);
	-moz-transform:translate3d(0, 6px, 0) rotate(225deg);
	-o-transform:translate3d(0, 6px, 0) rotate(225deg);
	-ms-transform:translate(0, 6px) rotate(45deg);
}
#navbutton a.on span+span{opacity:0;
	transform:translate3d(0, 150px, 0) rotate(-720deg);
	-webkit-transform:translate3d(0, 150px, 0) rotate(-720deg);
	-moz-transform:translate3d(0, 150px, 0) rotate(-720deg);
	-o-transform:translate3d(0, 150px, 0) rotate(-720deg);
}
#navbutton a.on span+span+span{top:29px;opacity:1;
	transform:translate3d(0, -6px, 0) rotate(-225deg);
	-webkit-transform:translate3d(0, -6px, 0) rotate(-225deg);
	-moz-transform:translate3d(0, -6px, 0) rotate(-225deg);
	-o-transform:translate3d(0, -6px, 0) rotate(-225deg);
	-ms-transform:translate(0, -6px) rotate(-45deg);
}

#navbutton a.on span+span+span+span{opacity:0;
	transform:translate3d(0, 150px, 0) rotate(-720deg);
	-webkit-transform:translate3d(0, 150px, 0) rotate(-720deg);
	-moz-transform:translate3d(0, 150px, 0) rotate(-720deg);
	-o-transform:translate3d(0, 150px, 0) rotate(-720deg);
}

@media all and (max-width:900px){
/* nav */
#nav {position:fixed;left:-100%;top:0; width:100%;height:100%;z-index:12;visibility:hidden; color:#fff;text-align:center; opacity:0; filter:alpha(opacity=0);background:#3d3d3d ; } 
#nav .back{position:absolute; left:100%;top:0;width:100%;height:100%;background:#000;opacity:0; filter:alpha(opacity=0); z-index:10;} 
#nav .inside {display:block; position:absolute;left:100%;top:0; width:100%; max-width:360px; height:100%;margin-left:0; z-index:13;overflow:hidden;
                    background:#3d3d3d url(../img/com/bg_leftmenu_mo.jpg) no-repeat 0 0 ; background-size:100%; padding:180px 0 0 0; opacity:0; filter:alpha(opacity=0);
				 -webkit-overflow-scrolling:touch;
					transform:translate3d(-100%, 0px, 0px);
					-webkit-transform:translate3d(-100%, 0px, 0px);
					-moz-transform:translate3d(-100%, 0px, 0px);
					-o-transform:translate3d(-100%, 0px, 0px);
					-ms-transform:translate3d(-100%, 0px, 0px);}
				#nav nav{width:100%; margin:0; padding:0 0 50px;}
				#nav nav ul {display:block;}
				#nav nav ul li{
					transform:translate3d(-250px, 0px, 0px);
					-webkit-transform:translate3d(-250px, 0px, 0px);
					-moz-transform:translate3d(-250px, 0px, 0px);
					-o-transform:translate3d(-250px, 0px, 0px);
					-ms-transform:translate3d(-250px, 0px, 0px);
				}
#nav nav ul li  {  padding:0 12%;}
#nav nav ul li a{width:100%; text-align:left; display:block; font-size:18px; font-weight:500; letter-spacing:1px; line-height:1.2; height:auto; padding:10px 0 10px 50px;}
#nav #selArray{transition-delay:0.34s;-webkit-transition-delay:0.34s;-moz-transition-delay:0.34s;-o-transition-delay:0.34s;-ms-transition-delay:0.34s;}
#nav .contact li{transition-delay:0.375s;-webkit-transition-delay:0.375s;-moz-transition-delay:0.375s;-o-transition-delay:0.375s;-ms-transition-delay:0.375s;}

#nav.show{visibility:visible; opacity:1; filter:alpha(opacity=100);}
#nav.show .back{opacity:0.2; filter:alpha(opacity=20);}
#nav.show .inside{margin-left:0;opacity:1; filter:alpha(opacity=100);}
#nav.show .inside,
#nav.show li{transform:translate3d(0, 0, 0);-webkit-transform:translate3d(0, 0, 0);-moz-transform:translate3d(0, 0, 0);-o-transform:translate3d(0, 0, 0);-ms-transform:translate3d(0, 0, 0);}
#nav.show .header h1 a {width:100%; height:49px; display:inline-block; background:url(../img/com/logo_mo.png) no-repeat center 50%; } 
#nav .contact {padding:20px 0;}
#nav .contact a{line-height:1.6; font-size:12px; cursor:pointer;}

 
/* swiper : animation */
.swiper-pagination-bullet-active em{opacity:1 !important; visibility:visible !important;}
.swiper-wrap-container{margin-left:auto;margin-right:auto;}
.swiper-wrap-container,.gangnam-swiper-container{width:100%;height:100%;}

/* Center slide text vertically */
.swiper-slide{text-align:center;font-size:18px;background:#fff;	display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;
	-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center;overflow:hidden;}
 
#navbutton a,
#navbutton span {
	transition:all 0.3s cubic-bezier(0.215, 0.61, 0.355, 1) 0s;
	-webkit-transition:all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
	-moz-transition:all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
	-o-transition:all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;
	-ms-transition:all 0.5s cubic-bezier(0.215, 0.610, 0.355, 1.000) 0s;} 

#nav nav ul li.ficon_block a {background:url(../img/com/micon_01_mo.png) no-repeat 0 50%; background-size:32px; }
#nav nav ul li.ficon_tran a {background:url(../img/com/micon_02_mo.png) no-repeat 0 50%; background-size:32px;  }
#nav nav ul li.ficon_holder a {background:url(../img/com/micon_03_mo.png) no-repeat 0 50%; background-size:32px;   }
 
#nav nav ul li.ficon_block a:hover, 
#nav nav ul li.ficon_block.on a {background:url(../img/com/micon_01_mo_on.png) no-repeat 0 50%; background-size:32px;   }
#nav nav ul li.ficon_tran a:hover,
#nav nav ul li.ficon_tran.on a {background:url(../img/com/micon_02_mo_on.png) no-repeat 0 50%; background-size:32px;  }
#nav nav ul li.ficon_holder a:hover,
#nav nav ul li.ficon_holder.on  a {background:url(../img/com/micon_03_mo_on.png) no-repeat 0 50%; background-size:32px;  }
}

@media all and (max-width:600px){
#navbutton a {left:15px;}
}

@media all and (max-width:400px){
#navbutton a ,
#navbutton .on { right:15px;}
}

@media all and (min-width:900px){
#navbutton,#nav .back,#nav .back:before{display:none; height:0;} 
#nav a span, #nav .inside, #nav li { transition:all 0s cubic-bezier(0.215, 0.61, 0.355, 1) 0s; }
 }
  
 
 .copy { position:absolute; bottom:20px; width:100%; color:#5a5a5d; display:block; font-size:12px; line-height:1.4; font-weight:400; text-transform:uppercase; padding:0 20px; text-align:left;word-break:keep-all;}
 
@media all and (max-width:360px){
 .copy { padding:0 10%;}
}



  
 /*hSearch */
.hSearch {  width:100%; max-width:294px; line-height:34px; height:36px; padding: 0 15px 0 20px;  border:1px solid #e0e0e0; display:flex; justify-content:space-between; align-items:center ;border-radius:17px  }
.hSearch .hstxt {width:85%; line-height:33px; height:34px;   text-align:left; font-weight:100; color:#333; border:none;  background:none; }

.hSearch .hsbtn {width:15%; line-height:33px; height:34px;border:none; background:url(../img/com/icon_search.png) no-repeat right 50%;   }
.hsmbtn { display:none; height:0; }

.hSearch input::-webkit-input-placeholder { font-size:12px;   color:#c2c2c2; }
.hSearch input::-moz-placeholder {font-size:12px;  color:#c2c2c2; }
.hSearch input:-ms-input-placeholder { font-size:12px;  color:#c2c2c2; }
.hSearch input::-moz-placeholder {font-size:12px;  color:#c2c2c2; }
 
 @media all and (max-width:900px){ 
 .hSearch {  width:100%; max-width:100%; border-radius:22px; margin-bottom:25px; line-height:38px; height:40px; } 
 .hSearch .hsbtn { background:url(../img/com/icon_search_mo.png) no-repeat right 50%; background-size:18px;  }
 }

 @media all and (max-width:500px){ 
.hSearch {   line-height:34px; height:36px; }
}

 
/* banner */
.banner {  position: fixed; bottom:40px; right:20px;}
.banner ul li {position:relative;  height:36px; margin:0 0 10px; }
.banner ul li:last-child {  margin:0 ; }
.banner ul li input {position:absolute; top:0; right:0; z-index:2; float:right; width:36px; height:36px; display:inline-block; border:none; border-radius:50%; background:#000;}
.banner ul li.banner_01 input {background:#fff url(../img/com/banner_01.png) no-repeat center 50%; }
.banner ul li.banner_02 input {background:#fff url(../img/com/banner_02.png) no-repeat center 50%; }
.banner ul li.banner_03 input {background:#fff url(../img/com/banner_03.png) no-repeat center 50%; }
.banner ul li.banner_04 input {background:#fff url(../img/com/banner_04.png) no-repeat center 50%; }
.banner ul li.banner_05 input {background:#fff url(../img/com/banner_05.png) no-repeat center 50%; }
.banner ul li.banner_06 input {background:#fff url(../img/com/banner_06.png) no-repeat center 50%; }
.banner ul li.banner_top input {background:#fff url(../img/com/banner_top.png) no-repeat center 50%; }
.banner ul li.banner_01:hover input {background:transparent url(../img/com/banner_01_on.png) no-repeat center 50%; }
.banner ul li.banner_02:hover input {background:transparent url(../img/com/banner_02_on.png) no-repeat center 50%;   }
.banner ul li.banner_03:hover input {background:transparent url(../img/com/banner_03_on.png) no-repeat center 50%; }
.banner ul li.banner_04:hover input {background:transparent url(../img/com/banner_04_on.png) no-repeat center 50%; }
.banner ul li.banner_05:hover input {background:transparent url(../img/com/banner_05_on.png) no-repeat center 50%; }
.banner ul li.banner_06:hover input {background:transparent url(../img/com/banner_06_on.png) no-repeat center 50%; }
.banner ul li.banner_top:hover input {background:transparent url(../img/com/banner_top_on.png) no-repeat center 50%; }

.banner ul li span { position:absolute; top:0; right:30px; opacity:.0; filter:alpha(opacity=0); width:0; border-radius:18px; color:#fff;}
.banner ul li:hover span { text-align:center; transition: 0.4s; position:absolute; top:0; right:2px; z-index:1; width:122px; line-height:35px; height:36px; padding:0 30px 0 0 ; color:#fff;  font-size:14px; display:inline-block; background:#000;opacity:.7; filter:alpha(opacity=70); border-radius:18px;}
.banner ul li.banner_top:hover span {display:none;}


@media all and (max-width:1200px){ 
.banner {display:none;}
}




/*팝업 popwrap */
.popwrap {display:none; position:fixed; _position:absolute; top:0; left:0; width:100%; height:100%; z-index:20;}
.popwrap .bg {position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.6; filter:alpha(opacity=60);  }
.popwrap .popwrap_layer {position: absolute; top:0; bottom:0; left:0; right:0; margin:auto; background:none; width:100%; max-width:100%; height:100%; max-height:100%; border-radius:18px;display:flex; justify-content:center; align-items:center;}
.popwrap .popwrap_layer .popup_inner  {position:relative;  z-index:21;width:90%; max-width:360px; margin:auto 0; padding:0; text-align:center; border-radius:18px; text-align:left; height:auto; max-height:80%; overflow-x:hidden; overflow-y:auto;background:#fff;  padding:20px;}
.popwrap h3.ptit { width:100%; line-height:1.2; font-size:21px; font-weight:500; color:#3d3d3d; text-align:left; border-bottom:1px solid #ddd; padding:0 0 20px 0; margin:0 auto;}
.popwrap h3.ptit .btn_close {float:right; width:30px; height:30px; line-height:30px; display:inline-block;   text-align:center; font-weight:300;color:#000;  font-size:21px;display:none; 
    transform:scale(1.4,1); /* W3C */
    -webkit-transform:scale(1.4,1); /* Safari and Chrome */
    -moz-transform:scale(1.4,1); /* Firefox */
    -ms-transform:scale(1.4,1); /* IE 9 */
    -o-transform:scale(1.4,1); /* Opera */ }
.popwrap h3.ptit .btn_close:hover { text-decoration:none;}


.popwrap .pop_txt {width:100%; padding:20px 0 22px 0; text-align:left; color:#333; font-weight:300; color:#3d3d3d; font-weight:400; line-height:1.6; }
.popwrap .pop_txt:after {content:''; display:block; clear:both;}

.popwrap .pop_txt1 {width:100%; padding:20px 0; text-align:left; line-height:1.6; color:#3d3d3d; font-weight:400; }
.popwrap .pop_txt1:after {content:''; display:block; clear:both;}

.popwrap .pop_btn {width:100%;  padding:0; font-size:0; text-align:center; display:flex; justify-content:space-between; align-items:center; }
.popwrap .pop_btn:after  {content:''; display:block; clear:both;}
.popwrap .pop_btn a { width:48%; max-width:180px; display:inline-block; text-align:center; line-height:41px; height:42px; border:1px solid #f9ae41; background:#f9ae41; color:#fff; font-weight:500;  font-size:14px;
 border-radius:5px;} 

.popwrap .pop_btn a.pop_ok { color: #fff; background:#f9ae41;border:1px solid #f9ae41;  }
.popwrap .pop_btn a.pop_cancel { color: #000;   background: #ddd; border:1px solid #ddd; }
.popwrap .pop_btn.w100p a { width:100%;max-width:100%; margin:0; }
.popwrap .pop_btn a:hover,
.popwrap .pop_btn a.pop_ok:hover, 
.popwrap .pop_btn a.pop_cancel:hover { border:1px solid #3d3d3d; background:#3d3d3d; color:#f9ae41; text-decoration:none;}


.back_poptxt {padding: 0 20px;}

.login_pop .popwrap_layer .popup_inner { max-width: 450px;  } 
.login_tit {padding:0 0 20px 0; width :100%; display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid #ddd;  }
.login_tit > img {cursor:pointer;}
.login_tit > em { font-size: 21px; font-weight:500; color:#3d3d3d;}
.log_pass {padding: 20px 0; width :100%; }
.login_ex {width: 100%; border:1px solid #ddd; padding:10px; margin-top: 7px; margin-bottom: 7px; height: 45px; }

.pass_ex {width: 100%; border:1px solid #ddd; padding:10px; margin-top: 7px; margin-bottom: 7px;  height: 45px;}
.forgot_id {  margin-bottom: 21px; width: 100%; text-align:center;}

.login_pop .popok_bt_ok {border:none; cursor:pointer; padding: 15px; width: 50%; margin-bottom: 18px; background: #f9ae41; border-radius: 100px; color: #fff;}
.future_join { background: #f8f8f8; display:flex; justify-content: space-between; align-items:center; padding: 20px;}
.future_join > a {width:70px; background:#fff; border-radius: 4px; border:1px solid #ddd; padding:5px 0; text-align:center; margin-left:10px;}
.future_join > span {text-align:left; word-break:keep-all;}

.caution {color: #ff0000; text-align:left;}

 
 /* noSearch */
.noSearch {  text-align:center; padding:12% 0 ; }
.noSearch .nowrap {width:100%; text-align:center; font-size:18px; font-weight:300;  padding:0 0 30px ; }
.noSearch .nowrap:after {content:''; display:block; clear:both; }
.noSearch .nowrap .stxt  {width:100%; text-align:center; padding:0 0 10px ; color:#f9ae41 ;font-weight:500; display: block;  font-size:23px;}
.noSearch .hSearch {width:90%; max-width:500px; height:auto; float:none; margin:0 auto; background:#fff; border:1px solid #e7eaf3; border-radius:4px; padding:5px 10px 5px 20px; display:inline-block;}

@media all and (max-width:768px){
.noSearch {  padding:8% 0 12% 0 ; }
}

@media all and (max-width:600px){
.noSearch .nowrap {  font-size:17px; }
.noSearch .nowrap .stxt  { font-size:21px;}
}

@media all and (max-width:480px){
.noSearch .nowrap {  font-size:15px; }
.noSearch .nowrap .stxt  { font-size:19px;}
}

@media all and (max-width:400px){
.noSearch .nowrap {  font-size:14px; padding:0 0 25px ;  }
.noSearch .nowrap .stxt  { font-size:18px;}
}