@import url('base.css');

/* Font-Face */
@import url('jquery.datepick.css');
@import url('jquery-ui.min.css');
@import url('jquery-ui.theme.min.css');

/** TOAST **/
.toast { bottom : 100px ; left : 50% ; position : fixed ; width : auto ; display : inline-block ; text-align : center ; font-size : 14px ; background-color : #000 ; color : #fff ; padding : 8px 20px ; border-radius : 18px ; z-index : 100000000000 ; box-shadow : 0 0 8px #888 ; opacity : 0 ; -webkit-transition: all .2s ease-out; -moz-transition: all .2s ease-out; -ms-transition: all .2s ease-out; -o-transition: all .2s ease-out; transition: all .2s ease-out; }
.toast.on { opacity : 1 }


/** 공통 **/
:root { --swiper-theme-color: transparent !important ; }
/*
input::placeholder{ color: transparent; }
input:-ms-input-placeholder{ color: transparent; }
input::-ms-input-placeholder { color: transparent; }
*/
.wrap { width : 100% ; margin : auto ; position : relative ; padding: 15px }

.button { display : inline-block ; width : 100% ; height : 30px ; line-height: 28px ; color : #000 ; border : solid 1px #000 ; position : relative ; font-size : 10px ; text-align : center }
.button > .over { position : absolute ; left : 0 ; top : 0 ; height : 28px ; width : 0 ; background : #000 ; color : #fff ; overflow : hidden ; transition : ease-out .2s }
.button > .over .text { width : 306px ; height : 28px ; display : inline-block ; position : absolute ; left : 0 ; top : 0 }
.button:hover > .over { width : 100% }
.button.submit { background : #000 ; color : #fff }



body { font-size: 12px; font-family: 'futura', 'Noto Sans CJK KR',sans-serif ; overflow-x : hidden }
body > header,body > nav,body > section,body > footer { width : 100% ; position : relative }
a { color : #000 }
button { font-family : "Futura", "Noto Sans CJK KR", sans-serif }

/** HEADER **/
body > header { text-align : center ; height : 50px ; border-bottom : solid 1px #000 ; position : fixed ; top : 0 ; left : 0 ; z-index : 100 ; background-color : #fff ; transition : ease-out .2s }
body > header .wrap { height : 100% }
body > header h1 {position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%); font-size : 0 ;  }
body > header h1 img { height : 25px ; width : auto }
body > header img.white { display : none }
body > header button#btn-gnb { display : inline-block ; width : 20px ; height : 23px ; position : absolute ; top : 13px ; left : 10px ; background : none ; cursor : pointer }
body > header button#btn-gnb span { display : inline-block ; position : absolute ; left : 0 ; width : 100% ; height : 1px ; background-color : #000 ; transition : ease-out .2s ; transform-origin : center center }
body > header button#btn-gnb span:nth-child(1) { top : 5px }
body > header button#btn-gnb span:nth-child(2) { top : 11px }
body > header button#btn-gnb span:nth-child(3) { top : 17px }
body > header button#btn-gnb.on span:nth-child(1) { transform : rotate(45deg) ; top : 11px }
body > header button#btn-gnb.on span:nth-child(2) { left : 50% ; width : 0 }
body > header button#btn-gnb.on span:nth-child(3) { transform : rotate(-45deg) ; top : 11px }
body > header ul#tnb { position : absolute ; right : 10px ; top : 13px }
body > header ul#tnb > li { float : left ; margin-right : 12px }
body > header ul#tnb a { font-size : 0 }
body > header ul#tnb img { height : 14px ; width : auto }
body > header.white { background-color : #fff !important ; border-bottom-color : #000 !important }
body > header.white button#btn-gnb span { background-color : #000 !important }
body > header.white img:not(.white) { display : inline-block !important }
body > header.white img.white { display : none !important }

body > nav { background : #fff ; position : fixed ; border-bottom : solid 1px #000 ; z-index : 99 ; top : -350px ; transition : ease-out .2s ; padding-top : 50px }
body > nav.on { top : 0px }
body > nav.on + header { border-bottom-color : #000 ; background-color : #fff }
body > nav.on + header button#btn-gnb span { background-color : #000 }
body > nav.on + header img:not(.white) { display : inline-block }
body > nav.on + header img.white { display : none }
body > nav ul#gnb { position : relative ; padding : 15px 0 35px 15px }
body > nav ul#gnb ul { position : absolute ; width : 50% ; top : 0 ; left : 50% ; height : 100% ; border-left : solid 1px #000 ; padding-top : 15px ; padding-left : 15px ; z-index : 2 ; display : none }
body > nav ul#gnb ul > li { width : 100% }
body > nav ul#gnb a { color : #aaaaaa ; text-decoration : none }
body > nav ul#gnb a.on,body > nav ul#gnb a.now { color : #000 }
body > nav ul#gnb a.on + ul,body > nav ul#gnb a.now:not(.off) + ul,body > nav ul#gnb a:hover + ul { display : block }
body > nav ul#gnb a:hover { color : #000 }
body > nav ul#gnb > li { width : 100% ; height : 26px ; line-height : 26px }
body > nav ul#gnb > li > ul > li > ul { display : none !important }
body > nav ul.member { width : 100% }
body > nav ul.member a { color : #666666 ; font-weight : 100 }
body > nav ul.member > li { height : 31px ; line-height : 30px ; text-align : center ; border-top : solid 1px #000 }


/** FOOTER **/
body > footer { border-top : solid 1px #000 ; font-size : 10px }
body > footer h1 { color : #000 ; line-height : 1 }
body > footer p { line-height : 1.85 ; line-height : -0.1em ; font-weight : 200 }
body > footer p + p { margin-top : 15px }
body > footer a { color : #aaaaaa ; text-decoration : none ; line-height : 1.85 ; transition : ease-out .2s }
body > footer a:hover { color : #000 }
body > footer dl { width : 100% ; border-bottom : solid 1px #000 }
body > footer dl > dt { padding : 15px ; position : relative }
body > footer dl > dd { padding : 0 15px 15px 15px ; display : none }
body > footer dl > dt:before,body > footer dl > dt:after { content : "" ; width : 10px; height : 1px ; background-color : #aaa ; display : inline-block ; position : absolute ; top : calc( 50% - 1px ) ; right : 13px ; transition : ease .2s }
body > footer dl > dt:after { transform : rotate(90deg) }
body > footer dl > dt.on:after { transform : rotate(0deg) }
body > footer dl.bluemark > dt { color : #0000c5 }
body > footer dl.bluemark a.button { width : 100% ; border : solid 1px #0000c5 ; color : #0000c5 ; margin-top : 20px ; }

body > footer ul.social-link { display : inline-block ; margin-top : 15px ; margin-left : 15px }
body > footer ul.social-link > li { float : left ; margin-right : 10px ; display : inline-block }
body > footer ul.social-link > li a { border : solid 1px #000 ; width : 22px ; height: 22px ; text-align : center ; line-height : 20px ; border-radius : 50% ; display : inline-block ; background-position : center ; background-repeat : no-repeat ; font-size : 0 ; background-size : 72% ; opacity : .2 }
body > footer ul.social-link > li a img { display : inline-block }
body > footer ul.social-link > li a.facebook { background-image : url('../image/ico-social-facebook.png') ; background-size : 42% }
body > footer ul.social-link > li a.instagram { background-image : url('../image/ico-social-instagram.png') }
body > footer ul.social-link > li a.youtube { background-image : url('../image/ico-social-youtube.png') }
body > footer ul.social-link > li a.kakao { background-image : url('../image/ico-social-kakao.png') }
body > footer ul.social-link > li a.pinterest { background-image : url('../image/ico-social-pinterest.png') }
body > footer ul.social-link > li a.vimeo { background-image : url('../image/ico-social-vimeo.png') }
body > footer ul.social-link > li a.tumblr { background-image : url('../image/ico-social-tumblr.png') }
body > footer dl.language { } 
body > footer dl.language > * { width : 100% ; padding : 0 15px }
body > footer dl.language > dt { width : 100% ; padding : 15px }
body > footer dl.language > dd { }
body > footer dl.language > dd li { height : 30px ; line-height : 29px ; border-top : solid 1px #eaeaea }
body > footer dl.language > dd li:first-child { border-top : solid 1px #bcbcbc }
body > footer dl.language > dd li.now a { color : #000 }
body > footer dl.language > dt:before { display : none }
body > footer dl.language > dt:after { content : "" ; width : 1px; height: 0; border-bottom : solid 5px #aaa ; border-right : solid 5px transparent ; border-left : solid 5px transparent ; display : inline-block ; position : absolute ; top : calc( 50% - 3px ) ; right : 13px ; transition : ease-out .2s ; background : none ; transform : rotate(180deg) }
body > footer dl.language > dt.on:after { transform : rotate(0) }
body > footer address { color : #aaaaaa ; font-style : normal ; line-height : 1.75 ; padding : 15px }
body > footer p.copyright { padding : 15px }

/** SECTION **/
body > section { margin-top : 50px }

/** SWIPER **/
section .swiper-container-horizontal>.swiper-pagination-bullets,section  .swiper-pagination-custom, .swiper-pagination-fraction { bottom : 12px }
section .swiper-pagination-bullet { border-radius : 0  ; width : 20px ; height : 1px ; transform : scale(1) !important }
section .swiper-pagination-bullet-active { background : #000 }
section .swiper-container-horizontal>.swiper-pagination-bullets.swiper-pagination-bullets-dynamic { }
section .swiper-container-horizontal>.swiper-pagination-bullets,section .swiper-pagination-custom, .swiper-pagination-fraction { bottom : 22px }
section .swiper-pagination-bullet-active-prev-prev,section .swiper-pagination-bullet-active-next-next { opacity : .07 }

/** PAGING **/
.paging { width: 100% ; display : inline-block ; text-align : center ; padding : 30px 0 }
.paging ol,.paging ol > li { display : inline-block ; padding-inline-start : 0 }
.paging a { display : inline-block ; text-align : center ; min-width : 20px ; padding : 0 10px ; font-family : "Futura", sans-serif ; font-size : 12px ; opacity : .6 }
.paging a.first,.paging a.last { letter-spacing : -0.15em }
.paging a:hover { opacity : 1 }

/** FOLDING UI **/
dl.fold { width : 100% }
dl.fold > dt { width : 100% ; height : 30px ; position : relative ; cursor : pointer ; line-height : 30px }
dl.fold > dt:before,dl.fold > dt:after { display : inline-block ; content : "" ; background-color : #000 ; position : absolute ; width : 9px ; height : 1px ; transition : ease-out .2s ; right : 15px  ; top : 14px }
dl.fold > dt:before { transform : rotate(90deg) }
dl.fold > dt.on:after { transform : rotate(45deg) }
dl.fold > dt.on:before { transform : rotate(135deg) }
dl.fold > dd { padding : 15px ; display : none }

/** FORM **/
.form-inline { width : 100% ; position : relative ; padding : 25px 0 5px 0 ; }
.form-inline .control-label { position : absolute ; top : 5px ; left : 0 ; font-size : 11px }
.form-inline input,.form-inline select { width : 100% ; height : 34px ; padding : 0 5px ; font-size : 14px ; border : solid 1px #e0e0e0 }
.form-inline.phone { font-size : 0 }
.form-inline.phone input,.form-inline.phone select { width : calc( 33.33333333333333% ) ; text-align : center !important ; font-size : 12px ; border-left : none }
.form-inline.phone > *:first-child { border-left : solid 1px #e0e0e0 }
.form-inline.ymd > input:nth-child(1)::placeholder { content : "년" }
.form-inline.ymd > input:nth-child(2)::placeholder { content : "월" }
.form-inline.ymd > input:nth-child(3)::placeholder { content : "일" }
.form-inline .tooltip { display : none ; position : absolute ; bottom : 100% ; padding : 10px ; font-size : 14px ; width : 100% ; right : 0 ; background : #fff ; box-shadow : 0 0 5px 5px rgba(0,0,0,.05) ; text-align : left ; border : solid 1px #00fe66 }
.form-inline .tooltip > strong { display : block }
.form-inline input:focus ~ .tooltip { display : inline-block }
.form-inline .describe { display : block ; font-size : 10px ; text-align : right ; color : #888 }
.form-inline.check { text-align : left }
.form-inline.check input { width : 14px !important ; height : 14px !important ; vertical-align : middle ; margin-right : 6px ; opacity : 1 !important ; position : static !important }
.form-inline.check label:not(.control-label) { margin-right : 15px ; height : 34px ; line-height : 34px }
.form-inline .check { display : table ; width : 100% ; height : 32px ; text-align : center ; position : relative ; font-size : 11px }
.form-inline .check input { position : absolute ; opacity : 0 ; width : 0 ; height : 0 }
.form-inline .check > label { display : table-cell ; width : 50% ; height: 32px ; border : solid 1px #000 ; line-height : 30px ; background-color : #fff ; color : #000 }
.form-inline .check > input:checked + label { background-color : #000 ; color : #fff }

.form-inline.has-button { padding-right : 90px }
.form-inline.has-button button { position : absolute ; right : 0 ; width : 85px ; height : 34px }
.form-inline ul.ec-address > li { padding-bottom : 4px ; position : relative }
.form-inline ul.ec-address > li:last-child { padding-bottom : 0 }
.form-inline ul.ec-address > li.ec-address-zipcode { padding-right : 75px }
.form-inline ul.ec-address > li.ec-address-zipcode button { position : absolute ; right : 0 ; top : 0 ; width : 70px ; height : 34px }

/** TABLE **/
table { width : 100% }
table td { position : relative ; vertical-align : middle }
table td.right { text-align : right }
table.list > * > tr > td { border-top : solid 1px #000 }
table.list > thead > tr > th { font-weight : 400 }
table.list > thead.title > tr > * { padding-bottom : 7px } 
table.list button.delete { border : none ; position : absolute ; top : 15px ; right : 3px ; display : inline-block ; width : 15px; height : 15px ; transform : rotate(45deg) ; opacity : .3 ; font-size : 0 }
table.list button.delete:before,table.list button.delete:after { content : "" ; display : inline-block ; width : 15px ; height : 1px ; background : #000 ; position : absolute ; top : 7px ; left : 0 }
table.list button.delete:after { transform : rotate(90deg) }
table.list button.delete:hover { background : none ; opacity : 1 ; transform : rotate(225deg) }
table.list > tfoot { text-align : right }
table.list > tfoot dl { display : inline-block ; width : 60% ; margin : 11px 0 }
table.list > tfoot dl > * { display : inline-block ; float : left }
table.list > tfoot dl > dt { width : 45% }
table.list > tfoot dl > dd { width : 55% }
table.list > tfoot > tr > td { padding : 18px 0 }

table.write { text-align : left ; border-bottom : solid 1px #000 }
table.write ~ table.write { margin-top : 50px }
table.write > thead > tr > * { border-bottom : solid 1px #000 ; padding-bottom : 7px }
table.write > thead > tr > th { font-weight : 600 }
table.write > tbody.continue > tr > * { border-bottom : solid 1px #000 }
table.write th { font-size : 12px ; font-weight : 400 }
table.write input,table.write select { width : 100% ; height : 32px ; padding : 0 5px ; font-size : 12px ; border : solid 1px #000 }
table.write button { font-size : 12px !important }
table.write > tbody > tr > * { padding-bottom : 10px }
table.write > tbody > tr:first-child > * { padding-top : 15px }
table.write > tbody > tr:first-child > th,table.write > tbody > tr:first-child > td.val,table.view > tbody > tr:first-child > td { padding-top : 22px }
table.write > tbody > tr:last-child > * { padding-bottom : 15px }
table.write > tbody > tr > th { padding-top : 7px }
table.write tr.phone,table.write tr.email { font-size : 0 }
table.write tr.phone > td input,table.write tr.phone > td select,table.write tr.email > td input,table.write tr.email > td select { width : calc( 33.33333333333333% ) ; text-align : center ; font-size : 12px ; border-left : none }
table.write tr.phone > td > *:first-child,table.write tr.email > td > *:first-child { border-left : solid 1px #000 }
table.write tr.phone.phone-2 > td > * { width : 67% }
table.write tr.phone.phone-2 > td > *:first-child { width : 33% }
table.write tr.email > td input { width : 35% }
table.write tr.email > td select { width : 30% }
table.write tr.email.email-2 > td > * { width : 50% }
table.write tr.email.email-2 .mailAddress { display : inline-block }
table.write tr.email.email-2 > td > * input { width : 100% }
table.write tr.address input,table.write tr.address select { margin-top : 5px }
table.write tr.address .ec-address-zipcode input { width : 30% ; vertical-align : middle ; margin : 0 }
table.write tr.address .ec-address-zipcode button { height : 32px ; vertical-align : middle }
table.write .describe { display : block ; font-size : 10px ; text-align : right ; color : #888 }
table.write .check { display : table ; width : 100% ; height : 32px ; text-align : center ; position : relative ; font-size : 11px ; text-align : left }
table.write .check input { position : absolute ; opacity : 0 ; width : 0 ; height : 0 }
table.write .check label { display : table-cell ; width : 50% ; height: 32px ; border : solid 1px #000 ; line-height : 30px ; background-color : #fff ; color : #000 }
table.write .check input:checked + label { background-color : #000 ; color : #fff  }
table.write .check span > label { width : auto ; display : inline-block ; padding : 0 10px }
table.write td.val,table.view > tbody > tr > td { padding-top : 7px }
table.write textarea { border : solid 1px #000 ; padding : 5px ; width : 100% }
table.write + span.check { padding : 20px 0 !important }

/** TAB **/
ul.tab { display : table ; width : 100% ; border-bottom : solid 1px #000 }
ul.tab > li { width: 50% ; text-align : center ; padding : 0 ; height : 37px ; line-height : 37px ; display : table-cell ; border-top : solid 1px #000 ; border-right : solid 1px #000 }
ul.tab > li:first-child { border-left : solid 1px #000 }
ul.tab > li.selected { background-color : #000 }
ul.tab > li.selected * { color : #fff }

/** BUTTON TABLE **/
.buttons > a + a { margin-top : 5px }
.buttons span { vertical-align : middle }

.buttons-table { width : 100% ; display : table ; border-left : solid 1px #000 }
.buttons-table > * { display : table-cell ; padding : 0 ; height : 38px ; border-top : solid 1px #000 ; border-bottom : solid 1px #000 ; border-right : solid 1px #000 ; line-height : 36px ; text-align : center }
.buttons-table.col-5 > * { width : 20% }
/*.buttons-table > *:first-child { border-right : none }*/

/** CAFE24 **/
table.write .segment { padding-top : 5px }
table.write .segment button.btnNormal { width : 100% ; height : 32px ; font-size : 12px }
ul.ec-address > li { margin-top : 5px }
ul.ec-address > li:first-child { margin-top : 0 }
ul.ec-address > li input,ul.ec-address > li select { margin : 0 !important }
.ec-base-label > label { white-space: nowrap; display : inline-block ; width : 100% }