@charset "utf-8";
@import url(//spoqa.github.io/spoqa-han-sans/css/SpoqaHanSans-kr.css);  
@import url(https://fonts.googleapis.com/css?family=Roboto:300,400,500,700);
@import url(//fonts.googleapis.com/earlyaccess/nanummyeongjo.css);

html,body {width:100%; font-family:'Spoqa Han Sans', "Apple SD Gothic Neo", "Malgun Gothic";font-weight:400;  }

#doc {position:relative;min-width:1024px; overflow:hidden;-webkit-transition: all 0.3s ease-out;-moz-transition: all 0.3s ease-out;-o-transition: all 0.3s ease-out;transition: all 0.3s ease-out;}
#doc.pop{background:rgba(0, 0, 0, 0.75); overflow:visible;padding:50px 50px}
body {overflow-y:visible;overflow-x:hidden;}
body#main{background:#edf4f7}

/*=======================================================
  css dafault
=========================================================*/
.div-cont {position:relative;text-align:left;margin:0 auto 0 auto; min-width:1024px ; max-width:1440px }
.div-cont:after {clear:both;content:"";display:block;}


.body-slide-wr {position:relative;width:100%;transition:margin 0.3s ease;}
.layer-slider-ovclick{position:fixed;z-index:2600;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,0.65);cursor:pointer }
.header-slider-ovclick{position:fixed;z-index:2600;width:100%;height:100%;left:0;top:0;background:rgba(0,0,0,0.65);cursor:pointer }


/*=======================================================
    z-index dafault
=========================================================*/
#header-wrap{position:fixed;z-index:2005;}
#container-wrap{position:relative;z-index:1004; }
#footer-wrap{position:relative;z-index:1001; }



/*=======================================================
    #header-wrap 
=========================================================*/

#header-wrap {left:0; width:100%; min-width:320px; top:0;}
#header-wrap:after{background:#fff; position:absolute; left:0;width:100%; height:100%;display:block; content:""; z-index:-1; top:0}
#header{min-height:80px;position:relative;}

#logo{ position:Absolute; z-index:9999; left:30px;top:28px;display:inline-block;vertical-align:top;height:24px;box-sizing:border-box;  width:111px;  font-size:18px; letter-spacing:-0.02em;  }
#logo a{display:block; background:url(../_Img/logo.png) no-repeat center center; height:24px;}

#top-tit{position:Absolute;font-weight:700; font-size:20px;color:#000; line-height:30px;left:50%; top:50%;-webkit-transform: translate(-50%, -50%);  -moz-transform: translate(-50%, -50%);  -ms-transform: translate(-50%, -50%);  -o-transform: translate(-50%, -50%);  transform: translate(-50%, -50%);}

.gnb-wrap{position:absolute;}
.gnb-wrap.logout{right:30px; top:28px;}
.gnb-wrap.logout li{ position:relative;float:left; margin-left:40px}
.gnb-wrap.logout li a{line-height:24px; display:block; font-weight:600; color:#4a4a4a; font-size:11px;}
.gnb-wrap.logout li:last-child a{color:#12ac00}
.gnb-wrap.logout li:first-child:before{display:none}
.gnb-wrap.logout li:before{width:1px;height:20px; background:#f0f0f0; position:absolute; left:-21px; top:50%;margin-top:-10px ;display:block; content:""}


.top-search{display:none;position:Absolute; right:0; top:0; }
.top-search input{border:none;position:relative; display:block;content:""; width:240px;height:40px;border-radius:40px; background:#f8f8f8; box-sizing:border-box; padding:0 15px 0 40px; font-size:13px; color:#7a7a7a }
.top-search .btn{width:40px;height:40px; border:none;position:Absolute; left:0; top:0;background:url(../_Img/Layout/ico-search.png) no-repeat center center}


.gnb-wrap.login{display:none; right:30px; top:20px;}
.gnb-wrap.login li{ position:relative;float:left; margin-left:20px}
.gnb-wrap.login li a{width:40px;height:40px; display:block;}
.gnb-wrap.login li a.c-01{background:url(../_Img/Layout/ico-search.png) no-repeat center center}
.gnb-wrap.login li a.c-02{background:url(../_Img/Layout/ico-bell.png) no-repeat center center}
.gnb-wrap.login li:last-child a{display:block; position:relative;width:auto; height:auto}
/* .gnb-wrap.login li:last-child a:after{width:8px;height:8px; border:3px solid #fff;border-radius:100%; display:block; content:""; position:Absolute; right:-1px; bottom:-1px;background:#12ac00} */
.gnb-wrap.login li:last-child a span{line-height:40px; width:40px; height:40px; border-radius:40px; overflow:hidden; display:block;}
.gnb-wrap.login li:last-child a span img{width:100%;}


#header.login .gnb-wrap.login{display:block}
#header.login .gnb-wrap.logout{display:none}
#header.login .top-search{display:block}
#header.login .top-search.hide{display:none;}



#my-menu{display:none;width:240px;height:500px;box-sizing:border-box; padding:40px 30px; position:Absolute; right:20px; top:70px; background:#fff;box-shadow: 0 5px 11px rgba(0, 0, 0, 0.1)  ; -webkit-box-shadow: 0 5px 11px rgba(0, 0, 0, 0.1)  ; -moz-box-shadow: 0 5px 11px rgba(0, 0, 0, 0.1)  ; }
#my-menu:before{position:Absolute; width:20px;height:11px; right:20px;top:-11px; background:url(../_Img/Layout/ico-tip.png) no-repeat center center ;display:block; content:""}

#my-menu .info{}
#my-menu .info .name{ font-weight:700; font-size:16px; color:#000;  position:Relative;line-height:120%;}
#my-menu .info .name a{display:block; padding-left:17px; background:url(../_Img/Layout/ico-heart.png) no-repeat left 1px;color:#ff7700; font-size:11px; position:absolute; right:0; top:50%;-webkit-transform: translate(0, -50%);  -moz-transform: translate(0, -50%);  -ms-transform: translate(0, -50%);  -o-transform: translate(0, -50%);  transform: translate(0, -50%);}
#my-menu .info ul{margin-top:25px;}
#my-menu .info li{}
#my-menu .info li a{padding:8px 0; display:block; position:relative;}
#my-menu .info li a:after{ width:22px;height:24px;opacity:0.8; position:Absolute; right:0; top:50%;margin-top:-12px; display:block; content:"";background:url(../_Img/Layout/ico-arrow.png) no-repeat center center}
#my-menu .info li .btxt{ font-weight:700; color:#4a4a4a; font-size:13px;line-height:24px;}
#my-menu .info li .stxt{ font-weight:700;font-size:9px;display:block; color:#647188; line-height:20px;}
#my-menu .info li .stxt.corange{color:#ff7700; }


#my-menu .smenu{margin-top:17px;}
#my-menu .smenu li{position:Relative;}
#my-menu .smenu li:before{ width:100%;height:1px; background:#f0f0f0; position:Absolute; left:0; top:0; display:block; content:""}
#my-menu .smenu li:first-child:before{display:none;}
#my-menu .smenu li a{ display:block; line-height:40px;font-weight:400; font-size:13px; color:rgba(0,0,0,0.5)}
#my-menu .smenu li.active a{color:rgba(0,0,0,1); font-weight:600}








/* ======================================================
   #container 
=========================================================*/
#container-wrap.mcontainer{}
#container-wrap.mcontainer #contents{ padding:0 0 80px 0; min-height:900px;}

#container-wrap.scontainer{}
#container-wrap.scontainer #contents{ padding:0px 0 40px 0; min-height:600px; margin:0 auto; width:984px;}
#container-wrap.scontainer:after{clear:both; content:""; display:block;}




#snb-wrap{ position:relative; height:60px;}
#snb-wrap.fix ul{position:fixed; left:50%;margin-left:-450px;width:900px; top:80px; z-index:9999}
#snb-wrap ul:after{background:#fbfbfb; border-top:1px solid #f0f0f0; border-bottom:1px solid #f0f0f0; position:Absolute; left:50%;margin-left:-1000px; width:2000px; top:0; height:100%; box-sizing:border-box; z-index:-1; display:block;content:""}

#snb-wrap ul{font-size:0;text-align:center; position:relative;}
#snb-wrap.other ul li a{min-width:140px}
#snb-wrap li{display:inline-block;vertical-align:top;}
#snb-wrap li a{display:block;line-height:60px; color:#000000; font-size:13px; font-weight:400; min-width:120px; text-align:center; position:relative;}
#snb-wrap li.active a{color:#12ac00; font-weight:700}
#snb-wrap li.active a:after{width:100%;height:2px; background:#12ac00; position:Absolute; left:0; bottom:0; display:block; content:""}




/* ======================================================
    #footer-wrap 
=========================================================*/
#footer-wrap {display:block; position:relative; margin-top:100px; }
#footer-wrap:after{background:#fff; position:absolute; left:0;width:100%; height:100%;display:block; content:""; z-index:-1; top:0}
#footer{text-align:center;}


.f-down{padding:80px 0 50px 0}
.f-down ul{font-size:0;}
.f-down li{display:inline-block;vertical-align:top; margin:0 10px}
.f-down li a{width:130px;height:40px; display:block;background:url(../_Img/Layout/f-goole.png) no-repeat center center;}
.f-down li:first-child a{background:url(../_Img/Layout/f-apple.png) no-repeat center center;}



.f-link ul{ font-size:0;}
.f-link li{ margin-left:24px; display:inline-block; vertical-align:top;}
.f-link li a{display:block; line-height:20px; color:#000; font-size:11px; font-weight:400; position:Relative;}
.f-link li a:before{width:1px;height:10px; top:50%;left:-13px; display:block;content:"";background:#aaaaaa; position:Absolute; margin-top:-4px; opacity:0.6;}
.f-link li:first-child{margin-left:0}
.f-link li:first-child a:before{ display:none;}

.f-info{margin-top:20px;}
.f-info p{}
.f-info p span{ display:inline-block; vertical-align:top; margin-left:14px; font-size:11px; color:#7a7a7a;position:relative;}
.f-info p span:before{width:1px;height:10px; top:50%;left:-8px; display:block;content:"";background:#aaaaaa; position:Absolute; margin-top:-5px; opacity:0.6;}
.f-info p span:first-child:before{display:none;}

#footer .copy{margin-top:50px;line-height:20px; font-size:11px; color:#7a7a7a; text-align:center; padding:40px 0; position:relative;}
#footer .copy:before{width:2000px;height:1px; background:#f1f1f1; left:50%;margin-left:-1000px; top:0; position:absolute; display:block; content:"";}