.empty:not(li) { width : 100% ; padding : 50px 0 ; text-align : center }


.swiper-button-next,.swiper-button-prev { background : none !impotant }
.swiper-button-next:before,.swiper-button-prev:before,.swiper-button-next:after,.swiper-button-prev:after { content : "" ; display : inline-block ; width : 12px ; height : 1px ; background : #fff ; position : absolute ; background-image : none !important }
.swiper-button-next:after,.swiper-button-prev:after { transform : rotate(50deg) ; top : calc( 50% - 4px ) }
.swiper-button-next:before,.swiper-button-prev:before { transform : rotate(-50deg) ; top : calc( 50% + 5px ) }
.swiper-button-prev { left : initial !important ; right : 22px !important }
.swiper-button-next { right : initial !important ; left : 22px !important ; transform : rotate(180deg) }
.swiper-button-next.swiper-button-disabled,.swiper-button-prev.swiper-button-disabled { opacity : .15 }


/** LOADING **/
section.loading { position : fixed ; top : 0 ; left : 0 ; background : rgba(255,255,255,.85) ; z-index : 200 ; width : 100% ; height : 100% ; margin : 0;}
section.loading > .cont { width : 210px ; height : 1px ; background : #fff ; position : absolute; top : 50% ; left : calc( 50% - 105px ) ; box-shadow : 0 0 3px 3px rgba(50,50,50,.02) }
section.loading > .cont > .bar { width : 0 ; height : 1px ; position : absolute ; top : 0 ; background : #0000c5 ; left : 50% ; display : inline-block ; animation : loading-bar infinite 2s ease }
@keyframes loading-bar {
	0% { width : 0 ; left : 50% }
	50% { width : 100% ; left : 0 }
	100% { width : 0 ; left : 50% }
}


/** INTRO **/
section.intro { text-align : center ; margin-top : 0 }
section.intro ~ header { background : none ; border-bottom-color : transparent }
section.intro ~ header button#btn-gnb span { background-color : #fff }
section.intro ~ header img:not(.white) { display : none }
section.intro ~ header img.white { display : inline-block }

section.intro > article { display : block }
section.intro > article.banner { overflow : hidden ; background : #000 ; position : relative ; padding-bottom : 125% }
section.intro > article.banner img { width : 100% ; height : auto ; position : absolute ; top : 0 ; left : 0 }
section.intro > article.banner video { width : 100% ; height : 100% ; position : absolute ; top : 0 ; left : 0 }
section.intro > article.new-collection { padding : 45px 0 }
section.intro > article.new-collection h1 { font-size : 14px ; padding-bottom : 10px }
section.intro > article.new-collection p { font-size : 10px ; color : #1a1a1a }
section.intro > article.new-collection .gallery { padding : 30px 0 }
section.intro > article.new-collection .gallery img { width : 100% ; height : auto }
section.intro > article.stockist { padding : 0 ; border-top : solid 1px #000 ; position : relative }
section.intro > article.stockist .cont { width : 100% ; padding : 0 15px 60px 15px }
section.intro > article.stockist .cont h2 { font-size : 14px ; padding : 50px 0 }
section.intro > article.stockist > h1 { width : 100% ; border-bottom : solid 1px #000 ; height : 32px ; line-height : 31px ; font-size : 12px }
section.intro > article.stockist .swiper-slide { } 
section.intro > article.stockist .swiper-slide img { width : 100% ; height : auto }
section.intro > article.stockist .swiper-button-next:before,section.intro > article.stockist .swiper-button-prev:before,section.intro > article.stockist .swiper-button-next:after,section.intro > article.stockist .swiper-button-prev:after { background : #000 }

section.intro > article.stockist .swiper-button-next,section.intro > article.stockist .swiper-button-prev { top : initial !important ; bottom : 128px }


/** SHOP **/
section.shop:not(.collaboration) > header { width : 100% ; border-bottom : solid 1px #000 ; text-align : center ; padding-left : 33.333333333% ; position : relative }
section.shop > header > h1 { border-right : solid 1px #000 ; position : absolute ; top : 0 ; height : 100% ; left : 0 ; width : 33.333333333% ; font-weight : 200 ; display : flex ; align-items : center }
section.shop > header > h1 .cont { width : 100% ; }
section.shop > header > ul { width : 100% ; height : 46px ; display : block ; overflow : hidden ; transition : ease .2s }
#mswiper .swiper-slide { width : 50%!important ; float : left ; border-right : solid 1px #000 ; border-bottom : solid 1px #000 ; height : 23px ; line-height : 22px ;}
#mswiper .swiper-slide:nth-child(2n) { border-right : none }
#mswiper .swiper-slide a { color : #aaaaaa ; font-weight : 100 }
#mswiper.swiper-container-vertical>.swiper-wrapper{flex-direction: row;}
section.shop > header > ul.page-1 > li:nth-child(1) { display : inline-block }
section.shop > header > ul.page-1 > li:nth-child(2) { display : inline-block }
section.shop > header > ul.page-1 > li:nth-child(3) { display : inline-block }
section.shop > header > ul.page-1 > li:nth-child(4) { display : inline-block }
section.shop > header > ul.page-2 > li:nth-child(5) { display : inline-block }
section.shop > header > ul.page-2 > li:nth-child(6) { display : inline-block }
section.shop > header > ul.page-2 > li:nth-child(7) { display : inline-block }
section.shop > header > ul.page-2 > li:nth-child(8) { display : inline-block }
section.shop > header > ul.page-3 > li:nth-child(9) { display : inline-block }
section.shop > header > ul.page-3 > li:nth-child(10) { display : inline-block }
section.shop > header > ul.page-3 > li:nth-child(11) { display : inline-block }
section.shop > header > ul.page-3 > li:nth-child(12) { display : inline-block }
section.shop > header > ul.page-4 > li:nth-child(13) { display : inline-block }
section.shop > header > ul.page-4 > li:nth-child(14) { display : inline-block }
section.shop > header > ul.page-4 > li:nth-child(15) { display : inline-block }
section.shop > header > ul.page-4 > li:nth-child(16) { display : inline-block }
section.shop > header > ul.page-5 > li:nth-child(17) { display : inline-block }
section.shop > header > ul.page-5 > li:nth-child(18) { display : inline-block }

section.shop > header > .more { width : 100% ; height : 23px }
section.shop > header > .more button { width : 50% ; height : 23px ; position : relative ; float : left }
section.shop > header > .more button:after { content : "" ; width : 1px; border-top : solid 5px #aaa ; border-right : solid 5px transparent ; border-left : solid 5px transparent ; display : inline-block ; position : absolute ; top : calc( 50% - 3px ) ; left : calc( 50% - 5px ) ; transition : ease-out .2s ; }
section.shop > header > .more button#btn-category-more-prev { transform : rotate(180deg) ; border-left : solid 1px #000 }
section.shop > header > .more button.disable:after { opacity : 0 }

.shop > .list ul { display : table ; width : 100% ; position : relative ; overflow : hidden }
.shop > .list ul:after { content : "" ; width : 100% ; height : 1px ; background : #000 ; bottom : -1px ; left : 0 ; position : absolute ; display : inline-block }
.shop > .list ul > li { display : inline-block ; width : 50% ; float : left ; position : relative ; border-top : solid 1px #000 ; border-right : solid 1px #000 }
.shop > .list ul > li:nth-child(1),.shop > .list > ul > li:nth-child(2) { border-top : none }
.shop > .list ul > li:nth-child(2n-1):after { position : absolute ; content : "" ; width : 200% ; height : 1px ; background : #000 ; bottom : -1px ; left : 0 }
.shop > .list ul > li:nth-child(2n) { border-right-color : transparent }
.shop > .list ul > li > a { display : inline-block ; width : 100% ; padding-bottom : 60px ; color : #000 ; position : relative }
.shop > .list ul > li > a .thumbnail { width : 100% ; padding-bottom : 152% ; display : inline-block ; background-position : center ; background-size : cover ; background-repeat : no-repeat }
.shop > .list ul > li:nth-child(2n) > a .thumbnail { width : calc( 100% + 1px ) }
.shop > .list ul > li > a .box { position  : absolute ; bottom : 0 ; left : 0 ; width : 100% ; height : 60px ; padding : 10px 0 0 4px }
.shop > .list ul > li > a .price { font-size : 10px ; color : #aaaaaa ; position : absolute ; bottom : 8px ; left : 4px }
.shop > .list ul > li > a .color { color : #aaa ; font-size : 10px }
.shop > .list ul > li .sold-out { display : inline-block }
.shop > .list ul > li .sold-out img { display : none }
.shop > .list ul > li .sold-out img + span { background-color : #c2c2c2 ; color : #fff ; display : inline-block ; padding : 0 3px ; font-size : 8px ; margin-left : 5px }
.shop > .list ul > li .sold-out img + span:before { content : "sold out" }
.shop > .list ul > li strong { font-weight : 400 }
.shop > .list > .more { width : 100% ; padding : 17px 0 20px 0 ; text-align : center ; border-top : solid 1px #000 }
.shop > .list > .more button { border-bottom : solid 1px #d1d1d1 ; color : #ccc ; height : 24px }

section.shop.detail > article { width : 100% }
section.shop.detail > article.gallery img { width : 100% ; height : auto }
section.shop.detail > article.gallery .swiper-container { padding-bottom : 60px }
section.shop.detail > article.order { width : 100% ; padding : 0 15px }
section.shop.detail > article.order h1 { font-size : 14px ; }
section.shop.detail > article.order .cont > dl { border-top : solid 1px #000 ; border-bottom : solid 1px #000 ; color : #878787 ; font-size : 11px }
section.shop.detail > article.order .cont > dl > dt { height : 22px ; line-height : 22px ; position : relative ; cursor : pointer }
section.shop.detail > article.order .cont > dl > dt:after { content : "" ; width : 1px; border-top : 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 ; }
section.shop.detail > article.order .cont > dl > dt:hover,section.shop.detail > article.order .cont > dl > dt.on { color : #000 }
section.shop.detail > article.order .cont > dl > dt.on:after { transform : rotate(180deg) }
section.shop.detail > article.order .cont > dl > dd { display : none ; padding : 10px 0 15px 0 ; border-top : solid 1px #ddd }
section.shop.detail > article.order .cont > dl > dd strong { display : block ; color : #000 ; margin-bottom : 5px }
section.shop.detail > article.order .cont > dl > dd strong ~ strong { margin-top : 15px }
section.shop.detail > article.order .cont > dl > dd span { line-height : 1.4 !important }
section.shop.detail > article.order .cont > dl > dd.size { height : auto }
section.shop.detail > article.order .cont > dl > dd.size dl { width : 100% ; display : inline-block }
section.shop.detail > article.order .cont > dl > dd.size dl > * { display : inline-block ; float : left ; padding-top : 15px }
section.shop.detail > article.order .cont > dl > dd.size dl > *:nth-child(1),section.shop.detail > article.order .cont > dl > dd.size dl > *:nth-child(2) { padding-top : 0 }
section.shop.detail > article.order .cont > dl > dd.size dl > dt { width : 30% ; color : #000 ; font-size : 11px }
section.shop.detail > article.order .cont > dl > dd.size dl > dd { width: 70% ; color : #999 }

section.shop.detail > article.order .price { font-size : 11px ; color : #666666 ; line-height : 1 ; margin-top : 5px ; display : block ; padding-bottom : 10px }
section.shop.detail > article.order .color { color : #666666 ; font-size : 10px ; display : block ; margin-top : 3px }
section.shop.detail > article.order .option { margin-top : 8px }
section.shop.detail > article.order .option select { width : 100% ; height : 25px ; border : solid 1px #000 ; padding-left : 10px }
section.shop.detail > article.order .buttons { padding-bottom : 20px }
section.shop.detail > article.order .buttons button { width : 100% ; height : 25px ; background : #ebebeb ; color: #000 ; margin-top : 8px ; cursor : pointer }
section.shop.detail > article.order .buttons button:hover { background : #000 ; color : #fff }
section.shop.detail > article.order .buttons .soldout { width : 100% ; height : 25px ; background : #ebebeb ; color : #fff ; text-align : center ; line-height : 25px }


/** COLLABORATION **/
section.collaboration * { margin-inline-start: 0 ; margin-block-start: 0 ; margin-block-end: 0 ; margin:0 ; padding:0; border:none ; outline : 0 ; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box }
section.collaboration { display : block }
section.collaboration.on { display : block }
section.collaboration > header { width : 100% ; background : #000 ; border-bottom : solid 1px #000 }
section.collaboration > header > img { width : 100% ; height : auto }
section.collaboration > header > .swiper-container { width : 100% ; height : 100% }
section.collaboration > header > .swiper-container > .swiper-button-prev,section.collaboration > header > .swiper-container > .swiper-button-next { width : 70px; height : 35px }
section.collaboration > header > .swiper-container > .swiper-button-prev:after,section.collaboration > header > .swiper-container > .swiper-button-next:after { display : none }
section.collaboration > header > .swiper-container > .swiper-button-prev { background-image : url('../image/btn-prev.png') }
section.collaboration > header > .swiper-container > .swiper-button-next { background-image : url('../image/btn-next.png') }
section.collaboration > header > .swiper-container.black-arrow > .swiper-button-prev { background-image : url('../image/btn-prev1.png') }
section.collaboration > header > .swiper-container.black-arrow > .swiper-button-next { background-image : url('../image/btn-next1.png') }
section.collaboration > header .swiper-wrapper > .swiper-slide { background-size : cover ; background-position : center }
section.collaboration > header .swiper-wrapper > .swiper-slide > .cont { position : absolute ; left : 0px ; bottom : 0px }
section.collaboration > header .swiper-wrapper > .swiper-slide > img { width : 100% ; height : auto }
section.collaboration > article { width : 100% ; position : relative ; display : block }
section.collaboration > article.shop { }
section.collaboration > article.shop .paging { padding : 40px 0 }

section.collaboration > article:not(.shop) { padding-bottom : 30px }
section.collaboration > article:not(.shop) > video { position : fixed ; width : 0 ; height : 0 ; z-index : 99999999 ; background : #000 ; top : 50% ; left : 50% ; transition : ease .3s ; opacity : 0 }
section.collaboration > article:not(.shop) > video.on { top : 0 ; left : 0 ; width : 100% ; height : 100% ; opacity : 1 }
section.collaboration > article:not(.shop) > img { width : 100% ; height : auto }
section.collaboration > article:not(.shop) > .cont { width : 100% ; padding : 10px 0 20px 0 ; text-align : center }
section.collaboration > article:not(.shop) > .cont p { padding-bottom : 5px ; line-height : 1.5 ; font-family : "futuraL", sans-serif ; font-size : 12px ; font-weight : 800 ; letter-spacing : 0.1em }
section.collaboration > article:not(.shop) > .cont .center { width : 100% ; text-align : center }
section.collaboration > article:not(.shop) > .cont button,
section.collaboration > article:not(.shop) > .cont .button { display : inline-block ; width : 65% ; height : 30px ; border : solid 1px #000 ; color : #000 ; text-align : center ; padding : 0 20px ; font-size : 10px ; background : none ; margin : 4px ; line-height : 28px }



/** COLLECTION **/
section.collection { height : calc( 100% - 50px )}
section.collection > article.list { height : 100% ; display : flex ; align-items : center ; overflow : hidden }
section.collection > article.list ul { width : 100% ; transition : ease-out 1s ; position : relative }
section.collection > article.list ul > li { width : 100% ; text-align : center ; transition : ease-out 1s ; position : relative }
section.collection > article.list ul > li a { font-size : 14px ; line-height : 26px }
section.collection > article.list ul > li iframe { width : 100% ; height : 0 ; position : absolute }
section.collection > article.list ul > li .buttons { position : relative ; width : 0 ; height : 0 ; padding : 0 0 ; overflow : hidden }
section.collection > article.list ul > li .buttons:before,section.collection > article.list ul > li .buttons:after { content : "" ; display : inline-block ; width : 0; height : 1px ; background : #000 ; left : 50% ; position : absolute ; transition : ease-out 1s ; animation-delay : 1s }
section.collection > article.list ul > li .buttons:before { top : 0 ; background : #000 }
section.collection > article.list ul > li .buttons:after { bottom : 0 }
section.collection > article.list ul > li .buttons button { width : 50% ; height : 26px ; display : inline-block ; float : left ; position : relative ; cursor : pointer ; color : #fff }
section.collection > article.list ul > li .buttons button:first-child:before { content : "" ; display : inline-block ; width : 1px ; height : 0 ; background : #000 ; right : 0 ; top : 50% ; position : absolute }

section.collection > article.list ul > li .foot { width : 0 ; height : 0 ; overflow : hidden ; position : relative }
section.collection > article.list ul > li .foot:before,section.collection > article.list ul > li .foot:after { content : "" ; display : inline-block ; width : 0 ; height : 1px ; background : #000 ; left : 50% ; position : absolute ; transition : ease-out 1s }
section.collection > article.list ul > li .foot:before { top : 0 } 
section.collection > article.list ul > li .foot:after { bottom : 0 }
section.collection > article.list ul > li .foot button { width : 100% ; height : 29px ; cursor : pointer ; color : #fff }
section.collection > article.list ul > li .gallery { position : relative ; top : 0 ; left : 0 ; width : 100% ; height : calc( 100% - 113px ) }
section.collection > article.list ul > li .gallery .swiper-container { width : 100% ; height : calc( 100% - 31px ) ; transform: translate3d(0,0,0); -webkit-transform: translate3d(0,0,0); bottom : 0 ; position : absolute ; left : 0 }
section.collection > article.list ul > li .gallery .swiper-container:before { content : "" ; width : 0 ; height : 1px ; position : absolute ; background : #000 ; top : 0 ; left : 50% ; display : inline-block ; z-index : 10 ; transition : ease-out 1s }
section.collection > article.list ul > li .gallery img { height : 100% ; width : auto ; display : block ; opacity : 0 }
section.collection > article.list .swiper-slide > .cont { display : inline-block ; position : relative ; height : 100% }
section.collection > article.list .swiper-slide > .cont:before,section.collection > article.list .swiper-slide > .cont:after { content : "" ; display : inline-block ; width : 1px ; height : 0 ; background : #000 ; top : 50% ; position : absolute ; transition : ease-out 1s }
section.collection > article.list .swiper-slide > .cont:before { left : -1px }
section.collection > article.list .swiper-slide > .cont:after { right : 0 }
section.collection > article.list .swiper-button-next:before,section.collection > article.list .swiper-button-prev:before,
section.collection > article.list .swiper-button-next:after,section.collection > article.list .swiper-button-prev:after { background : #000 }
section.collection > article.list .swiper-button-prev { left : 0px !important ; right : initial !important ; transform : rotate(180deg) }
section.collection > article.list .swiper-button-next { right : 0px !important ; left : initial !important ; transform : rotate(0deg) }
section.collection > article.list .swiper-slide ul { display : block ; width : auto; height : 25% }
section.collection > article.list .swiper-slide ul > li { display : inline-block ; float : left ; width : auto ; height : 100% ; /* border-top : solid 1px #000 ; border-right : solid 1px #000 */ }
/*
section.collection > article.list .swiper-slide ul > li:nth-child(1),section.collection > article.list .swiper-slide ul > li:nth-child(2),section.collection > article.list .swiper-slide ul > li:nth-child(3),section.collection > article.list .swiper-slide ul > li:nth-child(4) { border-top : none }
*/

section.collection > article.list ul.on { height : 100% }
section.collection > article.list ul.on > li:not(.on) { margin-top : 200% }
section.collection > article.list ul.on > li.on { height : 100% ; top : 0 ; position : absolute }
section.collection > article.list ul.on > li.on p > a { height : 26px ; display : block ; line-height : 26px ; color : #000 ; font-size : 10px }
section.collection > article.list ul.on > li.on .buttons { width : 100% ; height : 28px ; padding : 1px 0 }
section.collection > article.list ul.on > li.on .buttons:before,section.collection > article.list ul.on > li.on .buttons:after { width : 100% ; left : 0 }
section.collection > article.list ul.on > li.on .buttons button { animation : fade-color 1s 1 forwards ; animation-delay : 1s }
section.collection > article.list ul.on > li.on .buttons button:first-child:before { height : 100% ; top : 0 }
section.collection > article.list ul.on > li.on .foot { width : 100% ; height : 31px }
section.collection > article.list ul.on > li.on .foot:before,section.collection > article.list ul.on > li.on .foot:after { width : 100% ; left : 0 }
section.collection > article.list ul.on > li.on .foot button { animation : fade-color 1s 1 forwards ; animation-delay : 1s }
section.collection > article.list ul.on > li.on .gallery img { animation : fade-in 1s 1 forwards ; animation-delay : 1s }
section.collection > article.list ul.on > li.on .gallery .swiper-container.on:before { width : 100% ; left : 0 }
section.collection > article.list ul.on > li.on .gallery .swiper-container.on .swiper-slide > .cont:before,section.collection > article.list ul.on > li.on .gallery .swiper-container.on .swiper-slide > .cont:after { top : 0 ; height : 100% }

@keyframes fade-color {
	from { color : #fff }
	to { color : #000 }
}
@keyframes fade-in {
	from { opacity : 0 }
	to { opacity : 100% }
}



/** EDITORIAL **/
section.editorial { height : calc( 100% - 50px ) }


/** EDITORIAL > IMAGE **/
section.editorial .swiper-container { height : 100% }
section.editorial .swiper-slide { background-size : cover ; background-position : center }
section.editorial .swiper-button-prev { left : initial ; right : 22px }
section.editorial .swiper-button-next { right : initial ; left : 22px ; transform : rotate(180deg) }
section.editorial .swiper-button-next.swiper-button-disabled,section.editorial .swiper-button-prev.swiper-button-disabled { opacity : .15 }
section.editorial > article { height : 100% }

section.editorial > .images.detail { width : 100% ; height : 100% ; position : fixed ; overflow : hidden ; top : 0 ; left : 0 ; z-index : 10001 }
section.editorial > .images.detail > .gallery { width : 100% ; height : 100% ; display: inline-block ; position : absolute ; top : 0 ; left : 0 ;  }
section.editorial.video > .images > video { background-color : #000; width : 100% ; height : 100% ; display: inline-block ; opacity : 1 !important ; cursor: url('https://m.cn.adererror.com/styles/img/cursor-pause.png'), default;}
section.editorial.video > .images > video.play { cursor: url('https://m.cn.adererror.com/styles/img/cursor-play.png'), default; }
section.editorial > .images.detail figure { width : 100% ; height : 100% ; display: inline-block ; position : absolute ; text-align : center ; top : 0 ; left : 0 ; background-size : cover ; background-repeat : no-repeat ; background-position : center ; -webkit-transition: all 1s ease-in-out; -moz-transition: all 1s ease-in-out; -ms-transition: all 1s ease-in-out; -o-transition: all 1s ease-in-out; transition: all 1s ease-in-out; }
section.editorial > .images.detail figure.pos1 { top:-150%;left:150% }
section.editorial > .images.detail figure.pos2 { top:-150%;left:-150% }
section.editorial > .images.detail figure.pos3 { top:150%;left:100% }
section.editorial > .images.detail figure.pos4 { top:-150%;left:-110% }
section.editorial > .images.detail figure.pos5 { top:-150%;left:120% }
section.editorial > .images.detail figure.pos6 { top:-150%;left:130% }
section.editorial > .images.detail figure.pos7 { top:150%;left:-150% }
section.editorial > .images.detail figure.pos8 { top:-150%;left:110% }
section.editorial > .images.detail figure.pos9 { top:150%;left:150% }
section.editorial > .images.detail figure.pos10 { top:150%;left:-100% }
section.editorial > .images.detail figure.pos11 { top:150%;left:-130% }
section.editorial > .images.detail figure.pos12 { top:-150%;left:-120% }
section.editorial > .images.detail figure.pos13 { top:-150%;left:110% }
section.editorial > .images.detail figure.pos14 { top:150%;left:-250% }
section.editorial > .images.detail figure.pos15 { top:150%;left:-110% }
section.editorial > .images.detail figure.now { top : 0 !important ; left : 0 !important }
section.editorial > .images.detail .button-area { position : absolute; display : inline-block ; z-index : 3000 ; width : 15% ; height : 100% ; cursor : pointer }
section.editorial > .images.detail .button-area#btn-editorial-prev { left : 10px }
section.editorial > .images.detail .button-area#btn-editorial-next { right : 10px }
section.editorial > .images.detail .button-area button { cursor : pointer ; transform : rotate(-45deg) ; display : inline-block ; position : relative ; width : 30px ; height : 30px ; background : none }
section.editorial > .images.detail .button-area button * { cursor : pointer ; .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; }
section.editorial > .images.detail .button-area button > .arrow { display : inline-block ; position : absolute ; width : 20px ; height : 20px ; top : 9px ; left : 10px }
section.editorial > .images.detail .button-area button > .arrow:before,section.editorial > .images.detail .button-area button > .arrow:after { content : "" ; position : absolute ; background-color : #0000c8 ; display : inline-block ; top : 0 ; left : 0 }
section.editorial > .images.detail .button-area button > .arrow:before { width : 15px ; height : 2px }
section.editorial > .images.detail .button-area button > .arrow:after { width : 2px ; height : 15px }
section.editorial > .images.detail .button-area button > .square { display : inline-block ; width : 29px ; height : 14.5px ; border-right : solid 1px #0000c8 ; border-left : solid 1px #0000c8 ; position : absolute ; left : 0 }
section.editorial > .images.detail .button-area button > .square.square-1 { border-top : solid 1px #0000c8 ; top : 0 }
section.editorial > .images.detail .button-area button > .square.square-2 { border-bottom : solid 1px #0000c8 ; bottom : 0 }
section.editorial > .images.detail .button-area button > .square.square-1:before,section.editorial > .images.detail .button-area button > .square.square-2:before { content : "" ; width : 0 ; height : 1px ; background-color : #0000c8 ; position : absolute ;.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;  }
section.editorial > .images.detail .button-area button > .square.square-1:before { bottom : 0 ; right : 0  }
section.editorial > .images.detail .button-area button > .square.square-2:before { top : 0 ; left : 0  }
section.editorial > .images.detail #btn-editorial-next button { transform : rotate(135deg) }
section.editorial > .images.detail .button-area > .center { position : absolute ; top : 50% ; margin-top : -21px }
section.editorial > .images.detail #btn-editorial-prev > .center { left : 20px }
section.editorial > .images.detail #btn-editorial-next > .center { right : 24px }
section.editorial > .images.detail .button-area:hover button > .square.square-1 { left : 2.8px }
section.editorial > .images.detail .button-area:hover button > .square.square-2 { left : -2.8px }
section.editorial > .images.detail .button-area:hover button > .square.square-1:before,section.editorial > .images.detail .button-area:hover button .square.square-2:before { width : 5px }
section.editorial > .images.detail #btn-editorial-close { position : fixed ; top : 20px ; right : 20px ; display : inline-block ; transform : rotate(45deg) ; transition : ease-out .2s ; width : 40px ; height : 40px ; z-index : 3100 ; cursor : pointer }
section.editorial > .images.detail #btn-editorial-close:before,section.editorial > .images.detail #btn-editorial-close:after { content : "" ; display : inline-block ; width : 40px ; height : 1px ; background : #0000c5 ; position : absolute ; top : 50% ; left : 0 }
section.editorial > .images.detail #btn-editorial-close:before { transform : rotate(90deg) }
section.editorial > .images.detail #btn-editorial-close:hover { transform : rotate(135deg) }

section.editorial > article.video > video { display : none ; position : fixed ; z-index : 50000 ; width : 100% ; height : 100% ; top : 0 ; left : 0 ; background-color : #000 }
body.on-modal section.editorial > article.video > video { display : block }
section.editorial > .video h1.title { display: block ; text-align: center; line-height: 100px; font-size : 16px ; letter-spacing : -0.04em ; font-style : italic }
section.editorial > .video h1.title > span { display : inline-block ; line-height : 115% ; vertical-align : middle }
section.editorial > .video img { width : 100% ; height : auto ; margin-top : 5px }
section.editorial > .video .swiper-slide { overflow-y : auto ; padding-top : 50px }





/** STOCKIST **/
section.stockist { text-align : center ; margin-top : 0 }
section.stockist > article > a { display : block ; width : 100% ; height : 47px }
section.stockist > article > .gallery { border-top : solid 1px #000 }
section.stockist > article > .gallery .swiper-container { padding-bottom : 70px }
section.stockist > article > .gallery .swiper-wrapper { height : auto ; border-bottom : solid 1px #000 }
section.stockist > article > .gallery .swiper-slide > img { width : 100% ; height : auto }
section.stockist > article > .gallery .swiper-button-next,section.stockist > article > .gallery .swiper-button-prev { display : none !important }
section.stockist > article > .info { padding : 12px 0 25px 0 ; font-size : 10px }
section.stockist > article > .info h2 { font-size : 14px ; padding-bottom : 18px }
section.stockist > article > .info address { line-height : 1.4 }
section.stockist > article > .info address + address { padding-top : 5px }
section.stockist > article > .info p { padding-top : 23px }
section.stockist > article:first-child > .gallery { border-top : none }
section.stockist > article:last-child { padding-bottom : 47px }










/** AGREEMENT **/
section.agreement {  }
section.agreement > article { padding : 10px }
section.agreement > article h1 { width : 100% ; text-align : center; padding : 10px 0 20px 0 }
section.agreement > article h2 { padding : 20px 0 10px 0 }

/** MEMBER **/
section.member > article,section.order > article,section.member > article,section.mypage > article { padding : 0 15px 30px 15px }
section.member > article button { background-color : #000 ; color : #fff }
section.member > article > h1,section.order > article > h1,section.mypage > article > h1 { padding : 50px 0 25px 0 ; text-align : center ; font-size : 18px ; text-transform : uppercase ; font-weight : 700 }
section.member > article > h2,section.order > article > h2,section.mypage > article > h2 { padding-bottom : 50px ; text-align : center ; font-size : 15px ; text-transform : uppercase ; font-weight : 400 }
section.member > article > h1 + h2,section.order > article > h1 + h2,section.mypage > article > h1 + h2 { margin-top : -25px }

/** MEMBER > MY PAGE **/
section.member > article.mypage ul.index-list { width : 80% ; margin : 30px auto ; border-bottom : solid 1px #000 }
section.member > article.mypage ul.index-list > li { border-top : solid 1px #000 ; display : table ; width : 100% }
section.member > article.mypage ul.index-list > li a { display : table-cell ; width : 100% ; height : 80px ; padding : 0 0 0 45% ; color : #8f8f8f ; font-size : 8px ; position : relative ; vertical-align : middle }
section.member > article.mypage ul.index-list > li a h2 { position : absolute ; color : #000 ; font-size : 11px ; top : 0 ; left : 0 ; height: 100% ; display : flex ; align-items : center }
section.member > article.mypage ul.index-list > li a h2 > small { font-size : 12px ; font-family : "NotoSans KR", sans-serif ; font-weight : 200 ; letter-spacing : -0.1em ; display : block }

/** MEMBER > LOGIN **/
section.member > article.login .no-member-buy { padding-top : 40px ; text-align : center }
section.member > article.login .no-member-buy a { font-weight : 600 }
section.member > article.login .buttons { padding-top : 60px }
section.member > article.login .buttons button,section.member > article.login .buttons .button { width : 100% ; height : 36px ; background-size : 36px ; background-repeat : no-repeat ; background-position : center left ; margin : 3px 0 ; text-align : center ; line-height : 34px ; font-weight : 400 ; background-color : #000 ; color  :#fff }
section.member > article.login .buttons button.white,section.member > article.login .buttons .button.white { background-color : #fff ; color  :#000 ; border : solid 1px #000 }
section.member > article.login .sns button { border : none }
section.member > article.login .sns .naver { background-color : #26c726 ; background-image : url('https://m.cn.adererror.com/images/ico-naver.png') ; color : #fff }
section.member > article.login .sns .facebook { background-color : #4167b1 ; background-image : url('https://m.cn.adererror.com/images/ico-facebook.png') ; color : #fff }
section.member > article.login .sns .kakao { background-color : #ffeb00 ; background-image : url('https://m.cn.adererror.com/images/ico-kakao.png') ; color : #3c1d1e }
section.member > article.login .links { margin-top : 40px ; padding : 5px 0 40px 0 ; border-top : solid 1px #eaeaea ; width : 100% ; line-height : 2 ; display : table }
section.member > article.login .links > div { display : table-cell ; width : 50% }
section.member > article.login .links > .left { text-align : left }
section.member > article.login .links > .right { text-align : right }

/** MEMBER > JOIN **/
section.member > article.join .complete dl.info { display : inline-block ; width : 100% ; margin : 40px 0 ; padding : 0 15% }
section.member > article.join .complete dl.info > * { display : inline-block ; float: left ; height : 50px ; font-size : 14px }
section.member > article.join .complete dl.info > dt { width : 30% ; text-align : left }
section.member > article.join .complete dl.info > dd { width : 70% ; text-align : right }


/** MY PAGE > ORDER **/
section.mypage > article.order .search { border-bottom : solid 1px #000 ; padding : 0 0 15px 0 }
section.mypage > article.order .search > legend { padding-top : 20px }
section.mypage > article.order .search > .buttons,section.mypage > article.order .search > .forms { display : inline-block ; vertical-align : middle ; width : 100% ; margin-top : 8px }
section.mypage > article.order .search > .forms { color : #999 }
section.mypage > article.order .search > .forms input,section.mypage > article.order .search > .forms select { height : 38px ; border : solid 1px #000 ; text-align : center ; vertical-align : middle ; color : #000 }
section.mypage > article.order .search > .forms select { width : 100% }
section.mypage > article.order .search > .forms button { border : none ; margin : 0 ; padding : 0 }
section.mypage > article.order .search > .forms button[type='button'] { width : 40px ; height : 38px ; background : url('../image/ico-calendar.png') center no-repeat ; background-size : 50% ; display : none }
section.mypage > article.order .search > .forms button[type='button'] > img { display : none }
section.mypage > article.order .search > .forms button[type='submit'] { min-width : auto ; width : 60px ; height : 38px ; font-size : 14px ; background : #000 ; color : #fff ; line-height : 38px ; float : right }
section.mypage > article.order .search + .describe { margin : 12px 0 0 0 ; color : #b9b9b9 ; font-size : 12px }
section.mypage > article.order .search + .describe > li { padding : 3px 0 3px 8px ; position : relative }
section.mypage > article.order .search + .describe > li:before { content : "-" ; display : inline-block ; position : absolute ; top : 5px ; left : 0 }
section.mypage > article.order .search + .describe a { color : #b9b9b9 }
section.mypage > article.order .list > .order { display : inline-block ; width : 100% }
section.mypage > article.order .list > .order > .title { display : inline-block ; width : 100% ; background-color : #000 ; color : #fff ; padding : 0 10px ; height : 28px ; line-height : 28px ; margin-top : 50px }
section.mypage > article.order .list > .order > .item > .product { display : inline-block ; width : 100% ; position : relative ; padding : 15px 0 15px 120px ; min-height : 150px }
section.mypage > article.order .list > .order > .item > .product .thumbnail { display : inline-block ; position : absolute ; top : 15px ; left : 0 }
section.mypage > article.order .list > .order > .item > .product .thumbnail img { width : 90px ; height : auto }
section.mypage > article.order .list > .order > .item > .product dl { width : 100% ; min-height : 30px }
section.mypage > article.order .list > .order > .item > .product dl > * { display : inline-block ; float : left ; min-height : 30px ; padding : 5px 0 }
section.mypage > article.order .list > .order > .item > .product dl > dt { width : 80px }
section.mypage > article.order .list > .order > .item > .product dl > dd { width : calc( 100% - 80px ) }

section.mypage > article.order .list > .order > .button,section.mypage > article.order .list > .order > .buttons > * { width : 100% ; height : 34px ; line-height : 32px ; text-align : center ; margin : 2px 0 }
section.mypage > article.order .paymethod-detail { padding-top : 5px ; font-size : 8px }
section.mypage > article.order .buttons button,section.mypage > article.order .buttons .button { width : 100% ; margin : 2px 0 ; line-height : 32px ; text-align : center }


/** MYPAGE > COUPON **/
section.member > article.mypage.coupon .regist { width : 100% ; padding : 20px ; border : solid 1px #eaeaea }
section.member > article.mypage.coupon .regist h3 { font-weight : 600 ; font-size : 14px }
section.member > article.mypage.coupon .regist .form { display : inline-block ; width : 100% }
section.member > article.mypage.coupon .regist .form input { border : solid 1px #eaeaea ; height : 34px ; padding : 0 5px ; font-size : 14px ; width : calc( 70% - 5px ) }
section.member > article.mypage.coupon .regist .form button { width : 30% ; height : 34px ; float : right }
section.member > article.mypage.coupon .regist .describe { font-size : 10px ; color : #666 ; margin-top : 10px }

section.member > article.mypage.coupon .list h3 { display : inline-block ; width : 100% ; background-color : #000 ; color : #fff ; padding : 0 10px ; height : 28px ; line-height : 28px ; margin-top : 50px }
section.member > article.mypage.coupon table.list { margin-top : 15px }
section.member > article.mypage.coupon table.list > tbody > tr > * { padding : 7px 0 }
section.member > article.mypage.coupon table.list > tbody > tr.contents { text-align : left ; background : #f0f0f0 }
section.member > article.mypage.coupon table.list > tbody > tr.contents > td { padding : 10px ; font-size : 8px }


/** MYPAGE > MILEAGE **/
section.mypage > article.mileage .summary { display : block ; text-align : center ; padding : 0 0 40px 0 ; font-size : 8px ; margin-top : -30px }
section.mypage > article.mileage .summary ul { display : inline-block }
section.mypage > article.mileage .summary ul > li { padding : 5px 0 ; text-align : left }
section.mypage > article.mileage .summary ul > li > span { display : inline-block ; vertical-align : middle }
section.mypage > article.mileage .summary ul > li .title { width : 130px }
section.mypage > article.mileage ul.navigation { width : 100% }
section.mypage > article.mileage ul.navigation > li { border-bottom : solid 1px #bbb ; position : relative }
section.mypage > article.mileage ul.navigation > li:before,section.mypage > article.mileage ul.navigation > li:after { content : "" ; display : inline-block ; background-color : #000 ; width : 2px ; height : 10px ; position : absolute ; right : 18px ; opacity : .15 }
section.mypage > article.mileage ul.navigation > li:before { transform : rotate(-45deg) ; top : calc( 50% - 9px ) }
section.mypage > article.mileage ul.navigation > li:after { transform : rotate(45deg) ; top : calc( 50% - 3px ) }
section.mypage > article.mileage ul.navigation > li:first-child { border-top : solid 1px #bbb }
section.mypage > article.mileage ul.navigation > li a { display :inline-block ; width : 100% ; padding : 12px 0 }
section.mypage > article.mileage .detail > .item { padding : 0 0 40px 0 }
section.mypage > article.mileage .detail > .item h3 { display : inline-block ; width : 100% ; background-color : #000 ; color : #fff ; padding : 0 10px ; height : 28px ; line-height : 28px ; margin-bottom : 25px ; font-weight : 400 ; padding-left : 30px }
section.mypage > article.mileage .detail > .item table tr > * { padding : 3px 0 }


/** ORDER **/
section.order > article .buttons { padding-top : 35px }
section.order > article .buttons > button { width : 100% ; height : 30px }
section.order > article .buttons > button.submit { background : #000 ; color : #fff }

/** ORDER > CART **/
section.order > article.cart table.list > tbody > tr > td { height : 140px }
section.order > article.cart table.list > tbody > tr > td > input { opacity : 0 ; position : absolute ; top : 0 ; left : 0 }
section.order > article.cart table.list > tbody > tr > td:first-child { padding-left : 100px }
section.order > article.cart table.list > tbody > tr > td .thumbnail { display : inline-block ; position : absolute ; top : 15px ; left :0 ; width : 90px ; height : 110px ; background-position : center ;background-repeat : no-repeat ; background-size : cover }
section.order > article.cart table.list > tbody > tr > td .quantity > .form > input { width : 100% ; text-align : center ; border: solid 1px #000 }
section.order > article.cart table.list > tbody > tr > td .quantity > .form > button { display : none }
section.order > article.cart table.list > tbody > tr > td .quantity > button { width : 100% ; display : block ; }
section.order > article.cart table.list > tbody > tr > td .quantity > .form + button { margin-top : 5px ; font-family : "Futura" }
section.order > article.cart table.list > tbody > tr > td a > * { display : block }
/*
section.order > article.cart table.list > tfoot { text-align : right }
section.order > article.cart table.list > tfoot dl { display : inline-block ; width : 60% ; margin : 11px 0 }
section.order > article.cart table.list > tfoot dl > * { display : inline-block ; float : left }
section.order > article.cart table.list > tfoot dl > dt { width : 35% }
section.order > article.cart table.list > tfoot dl > dd { width : 65% }
section.order > article.cart table.list > tfoot > tr > td { padding : 18px 0 }
*/
section.order > article.cart .buttons > button { background : #000 ; color : #fff }

section.order > article.order .simplejoin { font-size : 12px ; width :100% ; padding : 20px 0 ; display : none }
section.order > article.order .pay-agreement { width : 100% ; padding : 20px 0 }
section.order > article.order span.check { position : relative ; display : inline-block ; padding : 5px 20px }
section.order > article.order span.check input { position : absolute ; width : 0 ; height : 0 }
section.order > article.order span.check input + label { font-size : 12px }
section.order > article.order span.check input + label:before { content : "" ; display : inline-block ; width : 14px ; height : 14px ; border : solid 1px #aaa ; vertical-align : middle ; margin-right : 10px }
section.order > article.order span.check input:checked + label:before { background : #000 ; border-color : #000 ; color : #fff }
section.order > article.order span.check input + label.right:before { position : absolute ; right : 0 }
section.order > article.order table.write > tbody.goods > tr > td { border-bottom : solid 1px #eaeaea ; position : relative ; height : 190px }
section.order > article.order table.write > tbody.goods > tr > td:first-child { padding-left : 110px }
section.order > article.order table.write > tbody.goods > tr:last-child > td { border-bottom : none }
section.order > article.order table.write > tbody.goods .thumbnail { position : absolute ; width : 100px ; height: 170px ; display : inline-block ; top : 10px ; left : 0 ; background-size : cover ; background-repeat : no-repeat ; background-position : center }
section.order > article.order table.write > tbody.paymethod > tr > td { padding : 10px 0 }
section.order > article.order table.write > tbody.paymethod .cont { width : 100% ; border : solid 1px #eaeaea }
section.order > article.order table.write > tbody.paymethod .cont > .check { border-bottom : solid 1px #eaeaea ; text-align : left ; padding : 0 0 0 20px }
section.order > article.order table.write > tbody.paymethod .cont > .check label { border : none ; line-height : 30px ; padding : 0 ; margin : 0 ; width : 100% ; display : block ; height : auto }
section.order > article.order table.write > tbody.paymethod .cont > .check label:before { position : absolute ; right : 0 ; top : 8px }
section.order > article.order table.write > tbody.paymethod .cont > .inner { padding : 8px 18px ; display : inline-block ; width : 100% }
section.order > article.order table.write > tbody.paymethod .cont > .inner .ec-base-label { display : inline-block ; position : relative ; text-align : center ; line-height : 30px ; border : solid 1px #eaeaea ; background : none ; width : calc( 50% - 4px ) ; margin : 2px ; float : left }
section.order > article.order table.write > tbody.paymethod .cont > .inner label { }
section.order > article.order table.write > tbody.paymethod .cont > .inner label > input { position : absolute ; width : 100%; height : 100% ; top : 0 ; left : 0 ; opacity: 0 }
section.order > article.order table.write > tbody.paymethod .cont > .inner label > span { display : inline-block ; width : 100% ; height : 30px ; background : none }
section.order > article.order table.write > tbody.paymethod .cont > .inner label > input:checked + span { background : #000 ; color : #fff }
section.order > article.order table.write > tbody.paymethod .cont.none { border : none }
section.order > article.order table.write > tbody.paymethod .cont.none > .check { display : none }
section.order > article.order table.write > tbody.paymethod .cont.none > .inner { padding : 0 }
section.order > article.order table.write > tbody.paymethod-detail > tr > td { padding : 0 0 10px 0 }
section.order > article.order table.write > tbody.paymethod-detail table.write { border : none }
section.order > article.order table.write > tbody.paymethod-detail table.write > tbody > tr:first-child > th { padding-top : 7px }
section.order > article.order table.write > tbody.paymethod-detail table.write > tbody > tr:first-child > td { padding-top : 0 }
section.order > article.order table.write > tbody.paymethod-detail table.write > tbody > tr:last-child > * { padding-bottom : 0 }
section.order > article.order table.write > tbody.paymethod-detail #payment_input_cash { padding : 0 }
section.order > article.order table.write > tbody.paymethod-detail .help { font-size : 10px }
section.order > article.order table.list > tfoot dl { margin : 2px 0 }
section.order > article.order table.list > tfoot > tr.total { font-size : 14px ; font-weight : 600 }
section.order > article.result .message { text-align : center ; padding-bottom : 40px }
section.order > article.result table.write { margin-bottom : 60px }
section.order > article.result table.write > tbody > tr > * { padding-top : 10px }
section.order > article.result table.write .detail { padding : 8px 0 }

/** SEARCH **/
section.search > article { padding : 0 0 30px 0 }
section.search > article .forms { width : 100% ; padding : 0 15px }
section.search > article .forms > div.cont { width : 100% ; position : relative ; margin : 60px 0 70px 0 }
section.search > article .forms > div.cont label { text-transform : uppercase ; color : #000 ; position : absolute ; bottom : 3px ; left : 0 ; font-size : 12px }
section.search > article .forms > div.cont input[name='keyword'] { width : 100% ; height : 28px ; border : none ; border-bottom : solid 1px #000 ; padding : 0 70px ; font-size : 16px ; text-align : center ; font-weight : 600 ; text-transform : uppercase }
section.search > article .forms > div.cont button { border : none }
section.search > article .forms > div.cont button[type='submit'] { min-width : auto ; font-size : 0 ; width : 18px ; height : 14px ; background : url('../image/ico-search.png') ; position : absolute ; right : 0 ; bottom : 5px ; margin : 0 }
section.search > article .forms > div.status { width : 100% ; border-bottom : solid 1px #000 ; display : inline-block ; margin-bottom : 70px ; padding-bottom : 6px ; font-size : 10px }
section.search > article .forms > div.status ul { display : inline-block ; float : right }
section.search > article .forms > div.status ul > li { display : inline-block ; float : left ; padding-left : 30px ; position : relative ; cursor : pointer }
section.search > article .forms > div.status ul > li:before { content : "" ; width : 2px ; height : 12px ; background : #929292 ; display : inline-block ; position : absolute ; top : calc( 50% - 6px ) ; left : 14px }
section.search > article .forms > div.status ul > li:nth-child(2) { padding : 0 }
section.search > article .forms > div.status ul > li:nth-child(2):before { display : none }
section.search > article .forms > div.status ul > li:hover { font-weight : 600 }
section.search > article .forms > div.status ul > li:nth-child(1),section.search > article .forms > div.status ul > li:nth-child(5),section.search > article .forms > div.status ul > li:nth-child(6) { display : none }
section.search > article .result { width : 100% ; border-top : solid 2px #ebebeb }
section.search > article .result > a { display : inline-block  ; position : relative ; float: left ; width : 50% ; height : auto ; padding-bottom : 64% ; border-bottom : solid 1px #000 ; border-right : solid 1px #000 ; color : #000 ; font-family : 'Futura', sans-serif ; font-size : 10px ; background-size : cover ; background-repeat : no-repeat ; background-position : center }
section.search > article .result > a:nth-child(2n) { border-right : none }
section.search > article .result > a > .cont { display : inline-block ; position : absolute ; bottom : 0 ; left : 0 ; padding : 10px 20px }
section.search > article .result > a > .cont > span { display : block }


/** COMMUNITY **/
section.community > article > h1,section.community > article > h1 { padding : 50px 0 25px 0 ; text-align : center ; font-size : 18px ; text-transform : uppercase ; font-weight : 600 }
section.community > article > h2,section.community > article > h2 { padding-bottom : 25px ; text-align : center ; font-size : 15px ; text-transform : uppercase ; font-weight : 400 }
section.community > article > h1 + h2 { margin-top : -25px }

section.community > article ul.list { border-top : solid 1px #eee }
section.community > article ul.list ~ ul.list { border-top : none }
section.community > article ul.list > li > a { display : inline-block ; width : 100% ; padding : 20px 15px ; font-size : 8px ; color : #aaa ; border-bottom : solid 1px #eee }
section.community > article ul.list > li > a .subject { display : inline-block ; width : 100% ; font-size : 14px ; padding-bottom : 5px ; line-height : 1.2 ; color : #000 }
section.community > article ul.list > li > a .answer { color : #000 ; display : inline-block ; float : right }
section.community > article ul.list.notice > li > a { background-color : #fbfbfb }
section.community > article ul.list.notice > li > a .subject { font-weight : 600 }
section.community > article table.write { border-bottom : none }
section.community > article .wait { text-align : center ; padding : 80px 0 ; color : #999 ; border-top : solid 1px #eee }
section.community > article .buttons {  padding : 15px }
section.community > article .buttons button,section.community > article .buttons .button { width : 100% ; height : 36px ; background-size : 36px ; background-repeat : no-repeat ; background-position : center left ; margin : 3px 0 ; text-align : center ; line-height : 34px ; font-weight : 400 ; display : inline-block }



body > .fullsize { position : fixed ; top : 0 ; left : 0 ; width : 100% ; height : calc( 100% + 50px ) ; z-index : 10000 ; margin-top : -50px ; background : #fff }
body > .fullsize iframe { width : 100% ; height : 100% ; position : absolute ; top : 0 ; left: 0 ; margin-top : 50px  }




/** BLUE MARK **/
section.bluemark { position : fixed ; margin-top : 0 ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; color : #0000C5 ; transition: all 0.6s linear }
section.bluemark ~ nav,section.bluemark ~ header,section.bluemark ~ footer { display : none }
section.bluemark section { margin-top : -50px }
section.bluemark article { position : absolute ; top : 0 ; left : 0 ; width : 100% ; height : 100% ; overflow : hidden }
section.bluemark section.is-not-genuine { display : none }
section.bluemark h1 { font-size : 0 ; font-weight : 800 ;text-align : center ; padding : 50px 0 20px 0 ; margin : 0 ; cursor : pointer }
section.bluemark h1 > img { width : 85px ; height : auto }
section.bluemark h2 { font-size : 0 ; width : 104% ; margin-left : -2% ; font-weight : 800 }
section.bluemark h2 > img { width : 100% ; height : auto }
section.bluemark .text.kr { letter-spacing: -0.09em; line-height: 25px; font-size: 11px ; font-weight : 600 }
section.bluemark .contact,section.bluemark  .text.en { letter-spacing : -0.07em ; line-height : 14px }
section.bluemark .margin-top-10 { margin-top:10px }


/** BLUE MARK // FORM **/
section.bluemark .form-inline { width : 100% ; height : 42px ; position : relative ; display : inline-block ; padding: 0 ; font-size : 20px }
section.bluemark .form-inline > .placeholder { cursor : text ; position : absolute ; top : 0 ; left : 20px ; line-height : 42px ; font-size: 15px ; font-weight : 200 ; color : #0000C5 ; opacity : 0.5 ; font-family : "Futura" ; letter-spacing : -0.05em }
section.bluemark .form-inline > button { width : 100% ; height : 42px ; font-size : 20px ; position : absolute ; background : #0000C5 ; right : 0 ; top : 0 ; line-height : 42px ; display : inline-block ; font-weight : 200 ; color : #fff; outline : none ; border : none ; font-family : "Futura-Bold" }
section.bluemark .form-inline input { -webkit-appearance:none;-webkit-border-radius:0 ; width : 100% ; height : 42px ; font-size : 20px ; border : solid 1px #0000C5 ; outline: none ; padding: 0 0 0 20px ; text-align: left ; color : #0000C5 ; background : none ; font-family : "Futura-Bold" }
section.bluemark .form-inline input#inp1 { text-transform : lowercase ; border-bottom : none }
section.bluemark .form-inline input#inp2 { text-transform : uppercase }
section.bluemark .form-inline input:focus + .placeholder,section.bluemark .form-inline input.has-value + .placeholder { display : none }
section.bluemark .form-inline,section.bluemark .form-inline input,section.bluemark .form-inline .placeholder,section.bluemark .form-inline button { min-height : auto ; height : 34px ; font-size : 14px ; line-height : 34px ; border-radius : 0 }
section.bluemark .form-inline button { padding : 0 }


/** BLUE CAMPAIGN **/
section.bluemark #original-blue { position : fixed ; z-index : 1000 ; color : #0000c5 ; background : rgba(255,255,255,0.7); display : none ; width : 100% ; height : 100% ; align-items : center ; overflow : auto }
section.bluemark #original-blue.on { display : flex }
section.bluemark #original-blue > .box { background-color : #fff ; width : 90% ; padding : 10px ; position : relative ; display : block ; border : solid 1px #000 ; margin : auto ; text-align : left }
section.bluemark #original-blue > .box button.close { position : absolute; outline : none ; border : none ; background : none ; right : 0 ; top : -30px ; width : 20px ; height : 20px ; transform : rotate(-45deg) ; cursor : pointer ;-webkit-transition : all 0.3s ease-out ; -moz-transition : all 0.3s ease-out ; -ms-transition : all 0.3s ease-out ; -o-transition : all 0.3s ease-out }
section.bluemark #original-blue > .box button.close:hover { transform : rotate(-135deg) }
section.bluemark #original-blue > .box button.close:before,section.bluemark #original-blue > .box button.close:after { content : "" ; background : #0000c5 ; position : absolute ; display : inline-block }
section.bluemark #original-blue > .box button.close:after { width : 1px ; height : 20px ; top : 0 ; left : 9px } 
section.bluemark #original-blue > .box button.close:before { width : 20px ; height : 1px ; top : 9px; left : 0 }
section.bluemark #original-blue > .box p { font-size : 10px ; line-height : 1.25 }
section.bluemark #original-blue > .box > img { margin-top : 10px }
section.bluemark #original-blue > .box .original-blue > img { width : 100% ; height : auto }


/** PAGE 1 **/
section.bluemark article.form { background : #0000C5 }
section.bluemark article.form > .cont { position : absolute; bottom : 0 ; left : 0 ; display : inline-block ; width : 100% ; background-color  :#fff ; padding : 0 }
section.bluemark article.form > .cont > .blue-color { position : absolute ; left : 30px ; top : 30px ; width : 100% ; padding-bottom : 15px ; position : static ; text-align : center ; background-color : #0000c5 ; margin-bottom : 10px }
section.bluemark article.form > .cont > .blue-color img { width : 140px ; height : auto }
section.bluemark article.form > .cont > .right { display : inline-block ; width : 100% }
section.bluemark article.form > .cont > .right .blue-mark { padding-left : 15px ; padding-bottom : 5px }
section.bluemark article.form > .cont > .right .blue-mark img { width : 120px ; height : auto }
section.bluemark article.form > .cont > .right .text { padding : 0 15px 3px 15px ; font-size : 8px ; line-height: 1.25 }
section.bluemark article.form > .cont > .right form { display : inline-block ; width : 100% ; position : relative ; padding : 10px 105px 20px 15px }
section.bluemark article.form > .cont > .right form input { font-family : 'futura', sans-serif }
section.bluemark article.form > .cont > .right form > .button { position : absolute ; width : 90px ; top : 10px ; right : 15px ; border : none }
section.bluemark article.form > .cont > .right form > .button button { height : 68px ; line-height : 68px ; font-family : 'futura', sans-serif }

/** RESULT **/
section.bluemark article.result { text-align : center }
section.bluemark article.result > h2 { padding-bottom: 4% }
section.bluemark article.result > .contact { padding : 25px 0 ; font-size: 10px }
section.bluemark article.is-genuine { background: #0f0fed }
section.bluemark article.box-bottom { background : #0000C5 }


/** ANIMATION **/
section.bluemark > .bottom { width : 100% ; height : 50% ; position : absolute ; bottom : 0 ; left : 0 ; z-index : -1 ; background : #0000C5 ;  transition: all 0.6s ;transition-timing-function:linear  }
section.bluemark.certified > .bottom { background : #030370 }
section.bluemark.decertified > .bottom { display : none }
section.bluemark.decertified > #wrapD3Cube { opacity : 0 }
section.bluemark.decertified > section.is-not-genuine { background-color : #fff ; display : block ; z-index : 10 }
section.bluemark.decertified > section.is-not-genuine h1 { padding : 30px 0 20px 0 }
section.bluemark.decertified > section.is-genuine-again { display : none }

/** 3D CUBE **/
#wrapD3Cube { width: 100%; height: 100%; position : absolute ; top : 0 ; left : 0 ; z-index : 1 ; overflow: hidden }
#D3Cube { width: 100%; height: 110%;
	-webkit-backface-visibility: hidden;
	transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    transform: rotateX(22deg) rotateY(0deg) rotateZ(0deg);
    -moz-transform: rotateX(22deg) rotateY(0deg) rotateZ(0deg);
    -webkit-transform: rotateX(22deg) rotateY(0deg) rotateZ(0deg);
    position: relative;
}
#D3Cube > article { position: absolute; float: left; overflow: hidden; }

/** ROTATE ANIMATION **/
@keyframes cubeRotation {
    0%   {  transform: rotate(22deg,0deg,0deg);   }
    100%   {   transform: rotate(22deg,-90deg,0deg);  }
}
@-webkit-keyframes cubeRotation {
    0%   { -webkit-transform: rotate(22deg,0deg,0deg);   }
    100%   { -webkit-transform: rotate(22deg,-90deg,0deg);  }
}
section.bluemark.certified #D3Cube {
    animation: cubeRotation 1.5s 1 ease-in-out;
    transform: rotateX(22deg) rotateY(-90deg) rotateZ(0deg);
    -moz-animation: cubeRotation 1.5s 1  ease-in-out; /* Safari 4.0 - 8.0 */
    -moz-transform: rotateX(22deg) rotateY(-90deg) rotateZ(0deg); 
    -webkit-animation: cubeRotation 1.5s 1  ease-in-out; /* Safari 4.0 - 8.0 */
    -webkit-transform: rotateX(22deg) rotateY(-90deg) rotateZ(0deg); 
}
section.bluemark.animate #D3Cube,section.bluemark.animate #D3Cube > article,section.bluemark.animate #D3Cube > article * { -webkit-transition: all 1.5s ease-in-out; transition: all 1.5s ease-in-out !important }
section.bluemark.certified #D3Cube > article.form { background : #0000C5 }
section.bluemark.certified #D3Cube > article.form * { opacity : 0 }
section.bluemark.certified #D3Cube > article.is-genuine { background : #0000C5 ; color : #fff }
section.bluemark.certified #D3Cube > article.box-bottom { background : #030370 }

section.bluemark.certified-again #wrapD3Cube { opacity : 0 }
section.bluemark.certified-again > .bottom { display : none }
section.bluemark.certified-again section.is-genuine-again { background-color : #fff ;display : block ; z-index : 10 }
section.bluemark.certified-again section.is-genuine-again h1 { padding : 30px 0 20px 0 }

/** RESPONSIVE **/
.mobile { display : inline-block }
.not-mobile { display : none !important }