@charset "utf-8";

/** ======== COMMON CSS SETTING ======== **/

.cf::after {content:''; display:block; clear:both;}
.inner {width:95%; max-width:1340px; margin:0 auto;}

.design-pg {word-break:keep-all;}

/* slide */ 
.navi-btn {cursor:pointer; display:inline-block;}
.swiper-pagination-bullet:focus {outline:0;}


/* radio + checkbox */
.ck-box {display:inline-block; position:relative; font-size:1.6rem; color:#333; font-weight:400;}
.ck-box.full {display:block;}
.ck-box.full + .ck-box.full {margin-top:1.5rem; margin-left:0;}
.ck-box + .ck-box {margin-left:2rem;}

.ck-box .radio {background:none; opacity:0; position:absolute; left:0; top:0; z-index:10; /*width:2.2rem;*/ width:100%; height:2.2rem; cursor:pointer;}
.ck-box .radio + label {position:relative; display:inline-block; z-index:5; padding-left:3.2rem; color:#080808;}
.ck-box .radio + label::before {content:''; display:inline-block; z-index:5; position:absolute; top:50%; left:0; transform: translateY(-50%); width:2.2rem; height:2.2rem; border-radius:50%; border:1px solid #ddd; background: #fff;}
.ck-box .radio + label::after {content:''; display:inline-block; z-index:5; position:absolute; top:50%; left:0.7rem; transform: translateY(-50%); width:0.8rem; height:0.8rem; border-radius:50%; background: #fff;}
.ck-box .radio:checked + label::before {border:1px solid #080808;}
.ck-box .radio:checked + label::after {background:#080808;}
.ck-box .radio:checked + label {color:#080808;}

.ck-box .checkbox {background:none; opacity:0; position:absolute; left:0; top:0; z-index:10; width:1.8rem; height:1.8rem; cursor:pointer;}
.ck-box .checkbox + label {position:relative; display:inline-block; z-index:5; padding-left:3rem; color:#080808; font-weight:400; font-family:'Pretendard', sans-serif; line-height:1;}
.ck-box .checkbox + label::before {content:''; display:inline-block; z-index:5; position:absolute; top:50%; left:0; transform:translateY(-50%); width:1.8rem; height:1.8rem; background:#fff; border:1px solid #ddd;}
.ck-box .checkbox + label .req {color:#080808; margin-right:0.5rem;}
.ck-box .checkbox:checked + label::before {background:#fff url('/images/common/checkbox-chk.png') no-repeat center; border-color:#080808;}


/* popup */
.popup {display:none; background-color:rgba(0,0,0,0.5); width:100%; height:100%; position:fixed; top:0; left:0; z-index:99;}
.popup .popupbox {position:absolute; top:50%; left:50%; transform:translate(-50%, -50%); width:95%; max-width:111.1rem; background-color: #fff; padding:8rem;}
.popup .close {display:inline-block; cursor:pointer; position:absolute; right:3rem; top:3rem; line-height:1;}
.popup .pop-title {font-size:2rem; margin-bottom:2rem;}
.popup-btn {cursor:pointer;}

.popup .notebox {background:#f3f3f3; padding:2rem;}
.popup .notebox dt {font-size:1.5rem; margin-bottom:1rem; position:relative; padding-left:3.5rem; font-family:'Pretendard', sans-serif;}
.popup .notebox dt::before {display:inline-block; content:''; background:url(/images/member/ico-notice.png) no-repeat center/contain; width:2rem; height:2rem; position:absolute; top:50%; left:0; transform:translateY(-50%);}
.popup .notebox dd {font-size:1.5rem; color:#929292; position:relative; padding-left:1.2rem; margin-left:3.5rem; margin-bottom:1rem;}
.popup .notebox dd::before {display:inline-block; content:''; width:3px; height:3px; background:#929292; position:absolute; top:1rem; left:0;}
.popup .notebox dd:last-child {margin-bottom:0;}


/* 안내팝업 공통 */
.info-pop .pop-main {border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding-bottom:4.5rem;}
.info-pop .txtbox {padding:8rem 0; text-align:center;}
.info-pop .txtbox p {font-size:1.8rem; font-weight:600;}
.info-pop .btn-box {margin-top:4rem;}
.info-pop .btn-box > * {width:100%; max-width:26rem; text-align:center; border-radius:0; line-height:5.2rem; height:5.2rem; display:inline-block; vertical-align:middle; font-weight:600; font-size:1.6rem; background:#080808; color:#fff; border:none;}


/* FORM TYPE 팝업 */
.form-pop .pop-main {border-top:1px solid #ddd; border-bottom:1px solid #ddd; padding:3rem 0;}
.form-pop .scrollbox {max-height:45rem; padding-right:2rem;}
.form-pop .mem-btnbox {display:flex; align-items:center; justify-content:center; margin-top:6rem;}
.form-pop .mem-btnbox > * {height:5.2rem; line-height:5.2rem; width:25.9rem; margin:0 1rem; font-weight:500; text-align:center; border:1px solid #080808;}
.form-pop .mem-btnbox .btn-type01 {background:#080808; color:#fff;}
.form-pop .mem-btnbox .btn-type02 {background:#fff; color:#080808;}


/* 상품문의 쓰기 팝업 */


/* 반품환불,교환 팝업 */
.return-pop .txtbox {padding:5rem 0 3rem 0; text-align:center;}
.return-pop .txtbox .ico {margin-bottom:1.5rem;}
.return-pop .txtbox p {font-size:1.8rem; font-family:'Pretendard', sans-serif; line-height:1.55;}
.return-pop .notebox {margin-bottom:1.5rem;}


/* scrollbox */
.scrollbox {height:100%; overflow:auto; scrollbar-track-color: #ebebeb; scrollbar-base-color: #ebebeb;}
.scrollbox::-webkit-scrollbar-track {border-radius:0; background-color: #ebebeb;}
.scrollbox::-webkit-scrollbar {width:1rem; background-color: #ebebeb;}
.scrollbox::-webkit-scrollbar-thumb { border-radius:0; background-color: #cecece;}


/* table */
.scroll-note {display:none;}



/* tab */
.tab-st01 {position:relative; border-bottom:1px solid #ddd; margin-bottom:8rem; display:flex; justify-content:center;}
.tab-st01 h2 {width:0;height:0;font-size:0;line-height:0;overflow:hidden}
.tab-st01 ul {zoom:1; display:flex; justify-content:center;}
.tab-st01 li {text-align:center;}
.tab-st01 a {width:27.5rem; display:inline-flex; align-items:center; justify-content:center; font-size:1.8rem; color:#929292; height:4.8rem; }
.tab-st01 .cate-active {position:relative; color:#080808; border-bottom:1px solid #080808; font-weight:600;}


/* input,select...*/
div.dv-select {display:inline-block; zoom:1; position:relative; width:100%; height:5rem; border:none; background:none; vertical-align:middle; padding:0; box-sizing:border-box; overflow:hidden;}
div.dv-select > label {display:inline-block; opacity:0;zoom:1;position:absolute;top:0;right:0;width:100%;height:100%;line-height:5rem;margin:0;padding:0 5rem 0 1rem;font-size:1.5rem;color:#666; background:transparent;box-sizing:border-box;cursor:pointer;}
div.dv-select > span.spn-sel-arrow {/* z-index:2; */display:block;position:absolute;top:-1px;right:-1px;width:5rem;height:5rem;margin:0;padding:0;background:url('/images/common/ico-select-arr.png') no-repeat center right 1.5rem; box-sizing:border-box;cursor:pointer;}
div.dv-select > select {position:relative;width:100%;height:5rem;padding:0rem 2.5rem 0rem 1.5rem;border:none;background:none;outline:none; -webkit-appearance:none;filter:alpha(opacity=0);z-index:1; font-size:1.5rem; border:1px solid #ddd; color:rgba(0,0,0,0.5);border-radius:0;}
div.dv-select > select::-ms-expand {display: none;}
div.dv-select > select option {padding:1rem;}

.file-inputbox {height:5.2rem; line-height:5.2rem; border:none; font-size:1.5rem; position:relative; display:flex; align-items:center;}
.file-inputbox label {display:inline-block; background:#929292; color:#fff; padding:0 6rem; cursor:pointer; margin-left:1.2rem;}
.file-inputbox label:after {content:"FILE"; font-weight:500;}
.file-inputbox .frm-input {max-width:40rem;}
.file-inputbox .file-input {display:none;}
.file-inputbox .filename {display:inline-block;	padding-left:1rem;}

/* button */
.mbtn-st01 {display:inline-block; position:relative; font-weight:600; line-height:1.2; text-transform:uppercase;}
.mbtn-st01:after {display: block; content: ''; width: 100%; height: 1px; position: absolute; bottom: 0; background-color: #080808;}
.mbtn-st01:hover:after {animation: qode-underline .7s cubic-bezier(.5,.54,0,.75) forwards;}

@keyframes qode-underline{
    0%{
        transform:scaleX(1);
        transform-origin:100% 0
    }
    45%{
        transform:scaleX(0);
        transform-origin:100% 0
    }
    55%{
        transform:scaleX(0);
        transform-origin:0 0
    }
    100%{
        transform:scaleX(1);
        transform-origin:0 0
    }
}

.mbtn-st02 .txt {position:relative; line-height:1.25; display:inline-block;}
.mbtn-st02 .txt::after {display:block; content:''; width:0; height:1px; position:absolute; bottom:0; left:0; background:#929292; transition:all .2s ease;}
.mbtn-st02.btn-wht .txt::after {background:#080808;}
.mbtn-st02.btn-gry .txt::after {background:#929292;}
.mbtn-st02:hover .txt::after {width:100%;}


/* search popup */
.sch-pop .tit {font-size:2rem; margin-bottom:2.5rem;}
.sch-pop .sch-box {position:relative;}
.sch-pop .sch_str {width:100%;height:5.8rem;border:1px solid #ddd;background:#fff; font-size:1.6rem; color:#080808; padding:0 2rem;}
.sch-pop .sch_str::placeholder {opacity:0.5;}
.sch-pop .sch_submit {position:absolute;top:0;right:2.5rem;width:auto;height:100%;border:0;cursor:pointer;background:none;}


/* header */
#hd {position:relative; /*border-bottom:1px solid #ddd;*/ padding:0 6rem;}
#hd.no-bb {border-bottom:none;}
#hd::after {display:block; content:''; width:100%; height:0; position:absolute; top:10rem; left:0; z-index:2; background:#fff; transition:all .2s ease;}
#hd.hd-on::after {height:6rem; border-top:1px solid #ddd;}
#hd h1 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#hd .hd-inner {display:flex; justify-content:space-between; align-items: center; height:10rem;}
#hd .left {display:flex; align-items: center;}
#hd .gnb {flex-shrink:0; margin-left:7.5rem;}
#hd .gnb > li {display:inline-block; padding:0 2rem; position:relative;}
#hd .gnb > li:first-child {padding-left:0;}
#hd .gnb > li a {color:#080808; font-size:1.5rem; font-weight:700; transition:all 0.1s;}
#hd .gnb > li > a {line-height:10rem;}
#hd .gnb > li.on a {color:#bdbcaf;} 
#hd .gnb .dep2 {z-index:3; display:none; width:60rem; line-height:6rem; position:absolute; top:10rem; left:0;}
#hd .gnb > li.has-dep2:hover .dep2 {display:block;}
#hd .gnb .dep2 li  {display:inline-block;}
#hd .gnb .dep2 li a {color:#929292; font-weight:500; font-size:1.5rem; margin:0 1.5rem; transition:all 0.1s;}
#hd .gnb .dep2 li a:hover {color:#080808;}
#hd .right {display:flex; align-items: center;}
#hd .utill {display:flex; align-items: center;}
#hd .utill::after {display:inline-block; content:''; width:1px; height:1.4rem; background:#ddd; vertical-align:middle; margin:0 3rem;}
#hd .utill a {display:inline-block; font-size:1.5rem; font-weight:700; margin:0 1.5rem;}
#hd .utill a:last-child {margin-right:0;}
#hd .utill a .count {color:#929292; font-weight:500;}
#hd .lang {position:relative; display:inline-block; cursor:pointer; margin-left:3rem;}
#hd .lang > p {display:flex; align-items:center; font-size:1.5rem; font-weight:700; letter-spacing:0;}
#hd .lang .ico {margin-left:1rem; display:inline-flex; align-items:center; justify-content:center;}
#hd .lang .lang-btnbox {display:none; position:absolute; top:4rem; left: 50%;transform: translateX(-50%); background:#fff; padding:1rem 2rem; border:1px solid #ddd; width:10rem; text-align:center; z-index:2;}
#hd .lang .lang-btnbox a {display:block; margin:0.5rem 0; font-size: 1.4rem; color:#666; transition:all .2s ease;}
#hd .lang .lang-btnbox a:hover {color:#080808; font-weight:500;}
#hd .lang.active .ico {transform:rotate(180deg);}

#hd .mb-lang {position:absolute; top:0; right:2.5%; height:10rem; line-height:10rem;}
#hd .mb-lang a {display:inline-block; font-size:1.4rem; color:#666; padding:0 0.5rem; text-decoration:underline;}
#hd .mb-lang a:first-child {padding-left:0;}

#hd .menu-btn {display:none; position:relative; width:2.8rem; height:2.2rem; cursor:pointer; z-index:11;}
#hd .menu-btn .bar {display:inline-block; transition:all .4s; position:absolute; left:0; width:2.5rem; height:2px; background-color:#333;}
#hd .menu-btn .bar:nth-child(1) {top:0;}
#hd .menu-btn .bar:nth-child(2) {top:calc(50% - 1px); width:50%;}
#hd .menu-btn .bar:nth-child(3) {bottom:0;}

#hd .menu-btn.on .bar:nth-child(1) {transform:translate(-50%) rotate(-45deg); left:50%; top:50%;}
#hd .menu-btn.on .bar:nth-child(2) {left:200%; opacity:0; transform:translateY(0); animation:active-menu-bar02 .8s forwards;}
#hd .menu-btn.on .bar:nth-child(3) {transform:translate(-50%) rotate(45deg); left:50%; bottom:auto; top:50%;}

@keyframes active-menu-bar02 {
	100 % {height:0;}
}

/* Full Menu */
#hd .full-menu .dim-bg {visibility:hidden; opacity:0; height:0;}
#hd .full-menu.on .dim-bg {visibility:visible; opacity:0.7; position:absolute; top:0; left:0; width:100%; height:100vh; background:rgba(0,0,0,0.6);}

#hd .full-menu {transform:translateY(100vh); position:fixed; top:0; left:0; width:100%; height:100vh; z-index:10;}
#hd .full-menu .cont {z-index:9; display:inline-block; position:absolute; left:0; top:0; width:0; max-width:40rem; height:100%; padding:8rem 3rem; background:#fff; transition:all .3s ease-in-out;}
#hd .full-menu.on .cont {width:70%;}

#hd .full-menu .menu-box ul > li > a {position:relative;display:block;font-size: 1.8rem;margin-bottom: 2rem;transition:all .2s;font-weight: 600;}
#hd .full-menu .cont > li:last-child {border-bottom:none;}
#hd .full-menu .cont .dep2 {width:100%;}
#hd .full-menu .cont .dep2 li a {position:relative;padding-left: 1.4rem;display:block;font-size: 1.6rem;color: #080808;transition:all .2s;line-height: 1;font-weight: 400;margin-bottom: 1.6rem;}
#hd .full-menu .cont .dep2 li a:before {display:block;content:'';position:absolute;top: 0.8rem;left:0;width: 0.6rem;height:1px;background:#080808;}

#hd .full-menu .utill {background:#f3f3f3; transform:translateX(-3rem); width:calc(100% + 5rem); padding:2rem; justify-content:center; margin-bottom:3rem; flex-wrap:wrap;}
#hd .full-menu .utill::after {display:none;}
#hd .full-menu .utill a {position:relative; margin:0 2.5rem}
#hd .full-menu .utill a::after {display:inline-block; content:''; width:1px; height:1.4rem; background:#ddd; vertical-align:middle; position:absolute; top:50%; right:-2.5rem; transform:translateY(-50%);}
#hd .full-menu .utill a:last-child::after {display:none;}
#hd .full-menu .utill a:last-child {margin-right:1.5rem;}
#hd .full-menu .utill a.adm-btn {width:100%; text-align:center;}
#hd .full-menu .utill a.adm-btn:after {display:none;}


/* footer */
#ft {position:relative; background:#080808; padding-top:5rem; padding-bottom:9rem;}
#ft h2 {position:absolute;font-size:0;text-indent:-9999em;line-height:0;overflow:hidden}
#ft .inner {display:flex; justify-content:space-between;}
#ft .left {color:#929292; font-size:1.4rem;}
#ft .left .logo {display:inline-block; margin-bottom:1.5rem;}
#ft .left .infobox {margin-top:5.5rem;}
#ft .left .linkbox {margin-top:1.5rem;}
#ft .left .linkbox a {color:#929292; font-size:1.4rem; font-weight:700;}
#ft .left .linkbox a::after {display:inline-block; content:''; width:1px; height:1rem; background:#929292; opacity:0.5; margin:0 1rem; vertical-align:middle;}
#ft .left .linkbox a:last-child::after {display:none;}
#ft .left .infobox li {float:left; position:relative; margin:0.5rem 0;}
#ft .left .infobox li::after {display:inline-block; content:''; width:1px; height:1rem; background:#929292; opacity:0.5; margin:0 1rem; vertical-align:middle;}
#ft .left .infobox li.fst {clear:left;}
#ft .left .infobox li.last::after {display:none;}
#ft .left .infobox li:last-child {margin-bottom:0;}
#ft .sitemap {display:flex;} 
#ft .sitemap dl {margin-left:4.5rem; flex-shrink:0;}
#ft .sitemap dl:first-child {margin-left:0;}
#ft .sitemap dt a {font-size:1.5rem; color:#fff; font-weight:700;}
#ft .sitemap dd {margin-top:1.2rem;}
#ft .sitemap dd a {display:block; font-size:1.4rem; color:#fafafa;}


@media screen and (max-width:1536px) {
    .popup .popupbox {padding:6rem;}

    .form-pop .scrollbox {max-height:35rem;}
    .form-pop .mem-btnbox {margin-top:5rem;}
}

@media screen and (max-width:1340px) {
    #hd {padding:0 2.5%;}
    #hd .menu-btn {display:inline-block;}
    #hd .right .utill,
    #hd .gnb,
    #hd .lang {display:none;}
    #hd .full-menu.on {transform:translateY(0);}
	#hd .full-menu .cont {padding:10rem 2rem 0 3rem;}
    #hd .full-menu .cont-in {overflow-y:scroll; height:calc(100% - 3rem);}
}


@media screen and (max-width:1024px) {
    .scroll-note img {height:20px; margin-right:1rem; vertical-align: middle;}
    .scroll-tb {overflow-x:auto;}
    .scroll-tb table {min-width:768px; table-layout:fixed; margin-bottom:2rem;}

    .tab-st01 a {font-size:1.7rem;}

    .popup .pop-title {font-size:1.8rem; margin-bottom:1.5rem;}
    .popup-temp .pop-main {padding-top:2rem;}

    .sch-pop .tit {font-size:1.8rem;}

    #hd .left .logo {width:14rem;}

    #ft {padding:5rem 0;}
    #ft .left {width:100%;}
    #ft .left .logo img {max-width:15rem;}
    #ft .right {display:none;}
}


@media screen and (max-width:960px) {
    .tab-st01 li {width:50%;}
    .tab-st01 a {width:100%;}

    .popup .popupbox {padding:6rem 4rem;}
}



@media screen and (max-width:768px) {
    .scroll-note {display:block;}

    .tab-st01 {margin-bottom:4rem;}

    .popup .popupbox {padding:3rem;}
    .popup .pop-title {font-size:1.75rem;}
    .popup .close {width:1.5rem;}

    .form-pop .pop-main {padding:2rem 0;}
    .form-pop .mem-btnbox {margin-top:3rem;}

    .sch-pop .tit {font-size:1.7rem; margin-bottom:1.5rem;}

    .mbtn-st02 .txt {line-height:1;}
    .mbtn-st02 .txt::after {display:none;}
    .mbtn-st02:hover .txt::after {width:0;}

    .ck-box .radio + label {padding-left:3rem;}
    .ck-box .radio + label::before {width:2rem; height:2rem;}

    .file-inputbox label {padding:0 4rem;}

    #ft {padding:4rem 0;}
    #ft .left .logo img {max-width:12rem;}
    #ft .left .infobox {margin-top:3rem;}    
}



@media screen and (max-width:500px) {
    .ck-box {display:block;}
    .ck-box + .ck-box {margin-left:0; margin-top:0.5rem;}

    div.dv-select > span.spn-sel-arrow {background-position:center right 1rem; background-size:1rem auto;}
}