@charset "utf-8";

img {width:100%; height:auto; border:0; vertical-align:top;}

/* common */
#wrap {height:100%;}
#wrap .header {position:relative; }
#wrap .header .inner {width:100%; height:69px; border-bottom:1px solid #ececec; background:#fff; z-index:1000; top:0px; position:fixed;
    transition: All 0.2s ease;
    -webkit-transition: All 0.2s ease;
    -moz-transition: All 0.2s ease;
    -o-transition: All 0.2s ease;
}
#wrap .header .inner a {transition: All 0.2s ease; -webkit-transition: All 0.2s ease; -moz-transition: All 0.2s ease; -o-transition: All 0.2s ease; }
#wrap .header.main .inner { border-bottom:1px solid #fff; }
#wrap .header.fixed .inner { border-bottom:1px solid #ececec; } 

#wrap .header .inner h1 { font-weight:bold; font-size:18px; position:absolute; top:17px; width:100%; padding:0 57px; box-sizing:border-box; text-align:center; text-align:center; font-size:18px; color:#252525; line-height:34px; transition: All 0.2s ease; -webkit-transition: All 0.2s ease; -moz-transition: All 0.2s ease; -o-transition: All 0.2s ease;}
#wrap .header.fixed .inner  h1 { top:7px; } 
#wrap .header .inner h1 a {display:inline-block; height:100%; }
#wrap .header .inner h1 a img {width:auto; height:35px; }
#wrap .header .inner a.btnSearch {display:block; position:absolute; top:0; left:0; z-index:1002; width:57px; height:69px; background:url(../../img/common/ico_search.png) no-repeat center center; background-size:27px;}
#wrap .header .inner a.btnMenu {display:block; position:absolute; top:0; right:0; z-index:1002; width:57px; height:69px; background:url(../../img/common/ico_menu.png) no-repeat center center; background-size:27px;}
#wrap .header .inner a.btnBack {display:block; overflow:hidden; position:absolute; top:0; left:0; z-index:1002; width:57px; height:69px; text-indent:-9999px; font-size:0;background:url(../../img/common/ico_back.png) no-repeat center center; background-size:27px auto;}
#wrap .header .inner a.btnClose,
#wrap .header .inner a.btnCancel {display:block; position:absolute; top:0; right:0; z-index:1002; width:57px; height:69px; background:url(../../img/common/ico_close.png) no-repeat center center; background-size:20px;}

#gnb {overflow:hidden; overflow-y:auto; position:fixed; top:0; right:0; z-index:2001; width:100%; height:100%; -webkit-overflow-scrolling:touch; width:95%; max-width:500px; display:none;}
#gnb .inner {overflow:hidden; width:100%; height:100%; background:#fff; box-sizing:border-box; position:absolute; top:0; right:-100%; }
    .gnbDeemLayer {position:fixed; _position:absolute; top:0; left:0; z-index:2000; width:100%; height:100%; background:rgba(0,0,0,0.6);}

#gnb .inner .gnbTop { position:absolute; top:0; left:0; width:100%; height:69px; border-bottom:1px solid #e1e1e1; }
    #gnb .inner .gnbTop h1 { position:absolute; top:17px; width:100%; padding:0 57px; box-sizing:border-box; text-align:center; text-align:center; font-size:18px; color:#252525; line-height:34px; }
    #gnb .inner .gnbTop h1 img { width:auto; height:35px;  }
    #gnb .inner .gnbTop .btnSearch { display:block; position:absolute; top:0; left:0; width:57px; height:69px; background:url(../../img/common/ico_search.png) no-repeat center center; background-size:27px; }
    #gnb .inner .gnbTop .btnClose { display:block; position:absolute; top:0; right:0; width:57px; height:69px; background:url(../../img/common/ico_close.png) no-repeat center center; background-size:27px; }

#gnb .inner .gnbBtm { position:absolute; bottom:0; left:0; width:100%; height:50px; background:#f3f3f3; text-align:right; }
#gnb .inner .gnbBtm .userArea { position:absolute; top:0; left:10px; }
    #gnb .inner .gnbBtm .userArea a {  display:inline-block; width:37px; height:50px; background-size:27px; background-position:center center; background-repeat:no-repeat;  }
    #gnb .inner .gnbBtm .userArea .btnLogin { background-image:url(../../img/common/ico_login.png); }
    #gnb .inner .gnbBtm .userArea .btnLogout { background-image:url(../../img/common/ico_logout.png); }
    #gnb .inner .gnbBtm .userArea .btnUser { background-image:url(../../img/common/ico_user.png); }
    #gnb .inner .gnbBtm .userArea .btnUser2 { background-image:url(../../img/common/ico_user2.png); }
#gnb .inner .gnbBtm .langArea { line-height:50px; font-size:12px; letter-spacing:0px; padding-right:10px; }
#gnb .inner .gnbBtm .langArea a { display:inline-block; height:100%; }
#gnb .inner .gnbBtm .langArea i { font-size:13px; }
#gnb .inner .gnbBtm .langArea .icoLang { margin-right:5px; }
    .icoLang { display:inline-block; width:33px; height:33px; vertical-align:middle; border-radius:100%;  background-size:33px; background-position:center center; background-repeat:no-repeat; }
    .icoLang.KR { background-image:url(../../img/common/ico_kr.png); }
    .icoLang.EN { background-image:url(../../img/common/ico_en.png); }
    .icoLang.CH { background-image:url(../../img/common/ico_ch.png); }
    .icoLang.JP { background-image:url(../../img/common/ico_jp.png); }
    
#gnb .inner .menuWrap { height:calc(100% - 120px); margin-top:70px; overflow:auto; box-sizing:border-box; padding:15px 30px 15px 40px; }
    #gnb .inner .menu { margin-bottom:20px; }
    #gnb .inner .menu a { display:block; width:100%; height:100%; }
    #gnb .inner .menu h2 { height:40px; line-height:45px; font-size:19px; font-weight:300; clear:both; }
        #gnb .inner .menu h2 a i { float:right; line-height:45px;font-size:13px; color:#a1a1a1; }
        #gnb .inner .menu h2 a:after { content:""; clear:both; display:block; }
        #gnb .inner .menu li.active h2 a { font-weight:400; color:#f05a5b; }
        #gnb .inner .menu li.active h2 a i { color:#f05a5b; }
    #gnb .inner .menu li ul { display:none; margin:5px 0 7px 10px; }
    #gnb .inner .menu li ul li { font-size:17px; line-height:35px; }
#gnb .icoBlank { display:inline-block; width:20px; height:20px; background:url(../../img/common/ico_gnbBlank.png) center center no-repeat; background-size:14px; vertical-align:text-bottom; margin-left:3px; }


/* Footer */
.footer { background:#f7f7f7; padding:40px; box-sizing:border-box; font-size:13px; }
.ftLink { margin-bottom:20px; line-height:20px; }
    .ftLink ul::after { content:"";display:block;clear:both; }
    .ftLink ul li { float:left; }
    .ftLink ul li::after { content:"/";display:inline-block;margin:0 8px; color:#b7b7b7; }
    .ftLink ul li:last-child::after { content:"";margin:0;}
.ftContact { margin-bottom:20px; }
.ftContact p { margin-bottom:5px; }
.ftContact a.btnContact { display:block; border:1px solid #252525; border-radius:7px;  width:100%;  height:30px; line-height:28px; box-sizing:border-box; font-weight:300; text-align:center; }
.ftContact a.btnContact i { font-size:14px; margin:0 7px 0 0; }
.ftCopy { font-size:12px; color:#959595; line-height:18px; letter-spacing:0; }

.btnTopWrap { position:fixed; right:15px; bottom:0px; display:none; transition: All 0.2s ease; -webkit-transition: All 0.2s ease; -moz-transition: All 0.2s ease; -o-transition: All 0.2s ease; opacity:0.7; }
.btnTopWrap .btnTop { display:block; overflow:hidden; width:40px; height:40px; border-radius:20px; text-indent:-9999px; font-size:0; background:url(../../img/common/ico_pg_up.png) no-repeat center center #fff; background-size:24px; box-shadow: 0px 3px 3px #e1e1e1; }


/* container */
#wrap .container {padding:70px 0 70px 0; box-sizing:border-box;}


/* 레이어 팝업 */
.layerPopup {display:none; overflow:hidden; overflow-y:auto; position:fixed; top:0; left:0; z-index:9000; height:100%; /* height:100vh; */ width:100%; background:rgba(0,0,0,0.4); -webkit-overflow-scrolling:touch;}
.layerPopup .inner01 {display:table; table-layout:fixed; width:100%; height:100%;}
.layerPopup .inner02 {display:table-cell; vertical-align:middle; text-align:center;}
.layerPopup .inner02.btm {vertical-align:bottom; }
.layerPopup .btnClosePop {display:block; overflow:hidden; position:absolute; top:0; right:0; z-index:9001; width:37px; height:37px; font-size:0; text-indent:-9999px; background:url(../../img/common/btnClosePop.png) no-repeat center center; background-size:cover;}

.layerPopup .popCont.selLang {margin:0 auto; background:#fff; width:97%; max-width:500px; border-top-left-radius:10px; border-top-right-radius:10px; bottom:0; padding:10px 20px 30px 20px; box-sizing:border-box; }
    .layerPopup .popCont.selLang .closePop { display:block; width:100%; height:20px; line-height:20px; text-align:center; }
    .layerPopup .popCont.selLang .closePop i { font-size:15px; color:#5da62b; }
    .layerPopup .popCont.selLang .langList li { width:100%; margin-top:7px; position:relative; }
    .layerPopup .popCont.selLang .langList a { display:inline-block; width:100%; height:41px; line-height:37px; border:1px solid #e1e1e1; box-sizing:border-box; background:#f5f5f5; border-radius:21px; font-weight:400; font-size:16px; letter-spacing:0; }
    .layerPopup .popCont.selLang .langList .icoLang { position:absolute; left:7px; top:4px; }
    .layerPopup .popCont.selLang .langList i { position:absolute; right:15px; top:0; line-height:41px; font-size:15px; }

.layerPopup .popCont.fileDown {margin:0 auto; background:#fff; border-radius:7px; }
.layerPopup .popCont.fileDown  .titleBox {padding:20px 18px 10px 18px; font-size:15px; font-weight:400; color:#000;}
.layerPopup .popCont.fileDown  .popContBox { padding:10px 20px 25px 20px; max-height:400px; overflow-y:scroll; text-align:left; }
    .layerPopup .popCont.fileDown  .popContBox dl { }
    .layerPopup .popCont.fileDown  .popContBox dt { color:#959595; font-size:13px; margin-top:10px; }
    .layerPopup .popCont.fileDown  .popContBox dt:first-child { margin-top:0px; }
    .layerPopup .popCont.fileDown  .popContBox dd { font-size:13px; line-height:18px; }
    .layerPopup .popCont.fileDown  .popContBox dd i { font-size:13px; color:#f7941d; margin-right:3px; }

.layerPopup .popCont {margin:0 auto; background:#fff; border-radius:7px; }
.layerPopup .popCont .titleBox {padding:25px 18px 0; font-size:15px; font-weight:400; color:#000;}
.layerPopup .popCont .txtBox {padding:40px 18px 34px; font-size:15px; color:#252525;}
.layerPopup .popCont .txtBox > span {display:block;}
.layerPopup .popCont .txtBox > span em {font-weight:bold;}
.layerPopup .popCont .txtBox02 {padding:25px 18px; font-size:15px; color:#252525;}
.layerPopup .popCont .txtBox02 p > span {display:block;}
.layerPopup .popCont .txtBox02 .txt01 {font-weight:bold;}
.layerPopup .popCont .txtBox02 .txt01 .color01 {color:#7313d6;}
.layerPopup .popCont .txtBox02 .txt02 {font-size:12px; color:#ababab;}
.layerPopup .popCont .txtBox02 .img01 {overflow:hidden; width:95px; height:95px; margin:0 auto; border:1px solid #e1e1e1; border-radius:50%; box-sizing:border-box;}
.layerPopup .popCont ul.btnList {overflow:hidden; text-align:center;}
.layerPopup .popCont ul.btnList li {border-top:1px solid #f2f2f2;}
.layerPopup .popCont ul.btnList li:first-child {border-top:none;}
.layerPopup .popCont ul.btnList li a {display:block; font-size:13px; padding-top:3px; line-height:43px; color:#252525;}
.layerPopup .popCont .btnWrap {overflow:hidden; border-top:1px solid #e5e5e5;}
.layerPopup .popCont .btnWrap a {display:block; height:39px; padding:0; margin:0; border-radius:0; font-size:15px; font-weight:300; line-height:40px; color:#252525;}
.layerPopup .popCont .btnWrap a.thin {font-weight:200;}
.layerPopup .popCont .btnWrap.nth02 li {float:left; width:50%; border-left:1px solid #e5e5e5; box-sizing:border-box;}
.layerPopup .popCont .btnWrap.nth02 li:first-child {border-left:none;}

.layerPopup .popCont.simple {width:270px;}
.layerPopup .popCont.max {width:90%; max-width:500px;}
.layerPopup .popCont.circle {position:relative; width:310px; height:310px; border-radius:50%;}
.layerPopup .popCont.circle h2 {padding-top:42px; text-align:center;}
.layerPopup .popCont.circle h2 img {width:auto; height:21.5px;}
.layerPopup .popCont.circle .txtBox {padding:24px 18px 24px; font-size:14px; line-height:1.5em; color:#363636;}
.layerPopup .popCont.circle .txtBox strong {display:block; font-size:18px;}
.layerPopup .popCont.circle .txtBox span {display:block;}
.layerPopup .popCont.circle .btnWrap {display:block; border-top:none;}
.layerPopup .popCont.circle .btnWrap a {display:inline-block; height:40px; padding:0 20px; border-radius:20px; font-weight:bold; line-height:42px; color:#fff;}

.layerPopup .snsList {overflow:hidden; padding:15px; font-size:0; text-align:center;}
.layerPopup .snsList li {display:inline-block; width:33.33%; padding:10px 0; vertical-align:top;}
.layerPopup .snsList li a {display:inline-block; overflow:hidden; width:45px; height:45px; vertical-align:top; text-indent:-9999px; font-size:0;}
    .layerPopup .snsList li.snsKakaotalk a {background:url(../../img/common/snsIconKakaotalk.png) no-repeat center center; background-size:cover;}
    .layerPopup .snsList li.snsFacebook a {background:url(../../img/common/snsIconFacebook.png) no-repeat center center; background-size:cover;}
    .layerPopup .snsList li.snsKakaostory a {background:url(../../img/common/snsIconKakaostory.png) no-repeat center center; background-size:cover;}
    .layerPopup .snsList li.snsTwitter a {background:url(../../img/common/snsIconTwitter.png) no-repeat center center; background-size:cover;}
    .layerPopup .snsList li.snsSms a {background:url(../../img/common/snsIconSms.png) no-repeat center center; background-size:cover;}
    .layerPopup .snsList li.snsEmail a {background:url(../../img/common/snsIconEmail.png) no-repeat center center; background-size:cover;}
    .layerPopup .snsList li.snsUrl a {background:url(../../img/common/snsIconUrl.png) no-repeat center center; background-size:cover;}

/* 레이어 팝업 - 전체창 (글쓰기) */
.layerPopup.fullPopup {display:block; transform:translateY(100%); -webkit-transform:translateY(100%); transition:all 0.3s ease-out; -webkit-transition:all 0.3s ease-out; background:#fff;}
.layerPopup.fullPopup.active {transform:translateY(0); -webkit-transform:translateY(0); transition:all 0.5s ease-out; -webkit-transition:all 0.5s ease-out;}
#commonWrite .header .inner {border-bottom:1px solid #e5e5e5;}

/* 레이어 팝업 - 슬라이더 */
.layerPopup.slider {background:rgba(0,0,0,1);}
.layerPopup.slider .inner {height:100%;}
.layerPopup.slider .popHeader {height:47px; border-bottom:1px solid #1c1c1c; text-align:left;}
.layerPopup.slider .popHeader .closePop {display:inline-block; padding:0 15px; vertical-align:top; font-size:15px; line-height:47px; color:#a8a8a8;}
.layerPopup.slider .popCont {height:calc(100% - 48px); background:none;}
.layerPopup.slider .popCont ul.pics {overflow:hidden; height:100%;}
.layerPopup.slider .popCont ul.pics li {float:left; width:100%; height:100%;}
.layerPopup.slider .popCont ul.pics li span {display:block; width:100%; height:100%;}