/** 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,section > .loading { 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,section > .loading > .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 ; display : block ; align-items : center ; background : #00030c }
section.intro > article.banner > * { width : 100% }
.cont img{width:100%;height:auto;}
section.intro > article.banner > video { position : absolute ; top : 0 ; left : calc( 50% - 960px ) ; width: 1920px ; height : 900px }
section.intro > article.new-collection { padding : 100px 0 }
section.intro > article.new-collection h1 { font-size : 18px ; padding-bottom : 20px }
section.intro > article.new-collection p { font-size : 11px ; color : #1a1a1a }
section.intro > article.new-collection img { width : auto ; height : 750px }
section.intro > article.new-collection .gallery { padding : 70px 0 }
section.intro > article.stockist { padding : 50px 0 0 50% ; height : 545px ; border-top : solid 1px #000 ; position : relative }
section.intro > article.stockist > .gallery { position: absolute ; top : 0 ; left : 0 ; width : 50% ; height : 100% ; border-right : solid 1px #000 ; background : #000 }
section.intro > article.stockist > .gallery img { width : auto ; min-width : 100% ; min-height : 100% }
section.intro > article.stockist .cont { width : 100% }
section.intro > article.stockist .cont h2 { font-size : 18px ; padding-bottom : 50px }
section.intro > article.stockist > h1 { position : absolute ; top : 0 ; right : 0 ; width : 50% ; border-bottom : solid 1px #000 ; height : 50px ; line-height : 49px ; font-size : 11px }
section.intro > article.stockist .swiper-container { height : 100% }
section.intro > article.stockist .swiper-slide { display : flex ; align-items : center ; background-size : cover ; background-position : center }


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 { content : "" ; display : inline-block ; width : 12px ; height : 1px ; background : #000 ; position : absolute }
section.intro > article.stockist .swiper-button-next:after,section.intro > article.stockist .swiper-button-prev:after { transform : rotate(50deg) ; margin-top : -9px }
section.intro > article.stockist .swiper-button-next:before,section.intro > article.stockist .swiper-button-prev:before { transform : rotate(-50deg) ; margin-top : 9px }
section.intro > article.stockist .swiper-button-prev { left : calc( 50% - 310px ) ; transform : rotate(180deg) }
section.intro > article.stockist .swiper-button-next { right : calc( 50% - 310px ) }
section.intro > article.stockist .swiper-button-next.swiper-button-disabled,section.intro > article.stockist .swiper-button-prev.swiper-button-disabled { opacity : .15 }



/** SHOP **/
section.shop > header { width : 100% ; text-align : center ; padding-left : 25% ; position : relative }
section.shop > header > h1 { border-right : solid 1px #000 ; position : absolute ; top : 0 ; height : 100% ; left : 0 ; width : 25% ; font-weight : 200 ; display : flex ; align-items : center ; border-bottom : solid 1px #000 }
section.shop > header > h1 .cont { width : 100% ; }
section.shop > header > ul { width : 100% ; height : 69px ; display : block ; overflow : hidden ; transition : ease .2s ; position : relative }
section.shop > header > ul > li { width : 33.333333333333333% ; float : left ; border-right : solid 1px #000 ; border-bottom : solid 1px #000 ; height : 23px ; line-height : 22px ; display : none }
section.shop > header > ul > li:nth-child(3n) { border-right : none }
section.shop > header > ul > li a { color : #aaaaaa ; font-weight : 100 }
section.shop > header > ul > li.on a { color : #000 }
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-1 > li:nth-child(5) { display : inline-block }
section.shop > header > ul.page-1 > li:nth-child(6) { display : inline-block }
section.shop > header > ul.page-1 > li:nth-child(7) { display : inline-block }
section.shop > header > ul.page-1 > li:nth-child(8) { display : inline-block }
section.shop > header > ul.page-2 > li:nth-child(9) { display : inline-block ; border-right : solid 1px #000 }
section.shop > header > ul.page-2 > li:nth-child(10) { display : inline-block }
section.shop > header > ul.page-2 > li:nth-child(11) { display : inline-block ; border-right : none }
section.shop > header > ul.page-2 > li:nth-child(12) { display : inline-block ; border-right : solid 1px #000 }
section.shop > header > ul.page-2 > li:nth-child(13) { display : inline-block }
section.shop > header > ul.page-2 > li:nth-child(14) { display : inline-block ; border-right : none }
section.shop > header > ul.page-2 > li:nth-child(15) { display : inline-block ; border-right : solid 1px #000 }
section.shop > header > ul.page-2 > li:nth-child(16) { display : inline-block }
section.shop > header > ul.page-3 > li:nth-child(17) { display : inline-block ; border-right : none }
section.shop > header > ul.page-3 > li:nth-child(18) { display : inline-block }
section.shop > header > .more { display : inline-block ; width : 25% ; height : 23px ; position : absolute ; bottom : 0 ; right : 0 }
section.shop > header > .more > button { width : 100% ; height : 23px ; position : relative ; cursor : pointer ; border-bottom : solid 1px #000 }
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.prev { border-right : solid 1px #000 }
section.shop > header > .more > button.prev:after { transform : rotate(180deg) }
section.shop > header.on > ul { height : 100% }
section.shop > header.on > button:after { transform : rotate(180deg) }
.shop > .list > ul { display : table ; width : 100% ; position : relative ;}
/*
.shop > .list > ul:after { content : "" ; position : absolute ; display : inline-block ; width : 100% ; height : 1px ; background : #000 ; bottom : -1px ; left : 0 }
*/
.shop > .list > ul > li { display : inline-block ; width : 25% ; float : left ; position : relative ; border-bottom : solid 1px #000 ; border-right : solid 1px #000 ; background-position : center ; background-size : cover ; background-repeat : no-repeat }
.shop > .list > ul > li:nth-child(1),.shop > .list > ul > li:nth-child(2),.shop > .list > ul > li:nth-child(3),.shop > .list > ul > li:nth-child(4) { border-top : none }
.shop > .list > ul > li:nth-child(4n) { border-right-color : transparent }
.shop > .list > ul > li a { display : inline-block ; width : 100% ; padding-bottom : 151.15% ; color : #000 }
.shop > .list > ul > li .box { position  :absolute ; bottom : 10px ; left : 10px ; width : calc( 100% - 10px ) }
.shop > .list > ul > li .box > strong { display : block }
.shop > .list > ul > li strong > span { font-weight : 200 !important ; font-size : 11px !important }
.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 ; vertical-align : text-bottom ; padding : 0 3px ; font-size : 6px }
.shop > .list > ul > li .sold-out img + span:before { content : "sold out" }
.shop > .list > ul > li .color { color : #999 ; padding-top : 3px }
.shop > .list > ul > li .price { font-size : 9px ; color : #999 ; padding-top : 4px ; display : inline-block }
.shop > .list > ul + .paging { border-top : solid 1px #000 ; margin-top : -1px }
.shop > .list > .more { width : 100% ; padding : 17px 0 20px 0 ; text-align : center ;  border-top : solid 1px #878787 }
.shop > .list > .more button { border-bottom : solid 1px #d1d1d1 ; color : #ccc ; height : 24px }
section.shop.detail > article { width : 50% }
section.shop.detail > article.gallery { }
section.shop.detail > article.gallery > img { width : 100% ; height : auto }
section.shop.detail > article.order { position : fixed ; display : flex ; height : 100% ; right : 0 ; top : 0 ; align-items : center }
section.shop.detail > article.order.static { position : static ; display : inline-block ; top : initial ; bottom : 0 ; padding-bottom : 100px }
section.shop.detail > article.order > .cont { width : 100% }
section.shop.detail > article.order > .cont > .box { width : 310px ; margin : auto }
section.shop.detail > article.order h1 { font-size : 14px ; font-weight : 200 }
section.shop.detail > article.order > .cont > .box > dl { border-top : solid 1px #000 ; border-bottom : solid 1px #000 ; color : #666666 ; font-size : 11px ; margin-bottom : 4px }
section.shop.detail > article.order > .cont > .box > dl > dt { height : 25px ; line-height : 25px ; position : relative ; cursor : pointer }
section.shop.detail > article.order > .cont > .box > 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 : 8px ; transition : ease-out .2s ; }
section.shop.detail > article.order > .cont > .box > dl > dt:hover,section.shop.detail > article.order > .cont > .box > dl > dt.on { color : #000 }
section.shop.detail > article.order > .cont > .box > dl > dt.on:after { transform : rotate(180deg) }
section.shop.detail > article.order > .cont > .box > dl > dd { display : none ; border-top : solid 1px #ececec ; padding : 7px 15px 7px 0 ; font-weight : 100 ; font-size : 9px ; color : #acacac ; height : 310px ; position : relative }
section.shop.detail > article.order > .cont > .box > dl > dd .cont { overflow-y : scroll ; width : calc( 100% - 13px ) ; height : calc( 100% - 14px ) ; position : absolute ; top : 7px ; left : 0 ; padding-right : 10px }
section.shop.detail > article.order > .cont > .box > dl > dd .cont::-webkit-scrollbar { width: 1px; }
section.shop.detail > article.order > .cont > .box > dl > dd .cont::-webkit-scrollbar-thumb { background-color: #888888 }
section.shop.detail > article.order > .cont > .box > dl > dd .cont::-webkit-scrollbar-track { background-color: #d2d2d2 }

section.shop.detail > article.order > .cont > .box > dl > dd strong,section.shop.detail > article.order > .cont > .box > dl > dd b { color : #000 ; font-size : 11px ; font-weight : 200 ; display : block ; padding : 20px 0 10px 0 }
section.shop.detail > article.order > .cont > .box > dl > dd span { line-height : 1.6 !important }
section.shop.detail > article.order > .cont > .box > dl > dd .cont > strong:first-child { padding-top : 0 }
section.shop.detail > article.order > .cont > .box > dl > dd.size { height : auto ; padding-bottom : 15px }
section.shop.detail > article.order > .cont > .box > dl > dd.size dl { width : 100% ; display : inline-block }
section.shop.detail > article.order > .cont > .box > dl > dd.size dl > * { width : 50% ; display : inline-block ; float : left ; padding-top : 15px }
section.shop.detail > article.order > .cont > .box > dl > dd.size dl > *:nth-child(1),section.shop.detail > article.order > .cont > .box > dl > dd.size dl > *:nth-child(2) { padding-top : 0 }
section.shop.detail > article.order > .cont > .box > dl > dd.size dl > dt { color : #000 ; font-size : 11px }
section.shop.detail > article.order > .cont > .box > dl > dd.size dl > dd { color : #999 }
section.shop.detail > article.order table.write { }
section.shop.detail > article.order table.write > tbody > tr > * { padding: 4px 0 ; min-height: auto }
section.shop.detail > article.order select { font-size : 9px ; color : #666666 }
section.shop.detail > article.order .color { color : #666666 ; padding-top : 4px }
section.shop.detail > article.order .price { font-size : 11px ; color : #666666 ; padding : 4px 0 }
section.shop.detail > article.order .option { margin-top : 65px }
section.shop.detail > article.order .option select { width : 100% ; height : 25px ; border : solid 1px #ebebeb }
section.shop.detail > article.order .buttons button,section.shop.detail > article.order .buttons .soldout { width : 100% ; height : 25px ; background : #ebebeb ; color: #000 ; margin : 4px 0 ; cursor : pointer ; line-height : 25px ; text-align : center }
section.shop.detail > article.order .buttons button:hover { background : #000 ; color : #fff }
section.shop.detail > article.order .buttons .soldout { color : #fff }


/** 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 { padding-bottom : 90px }*/
section.collaboration > article.shop .paging { padding : 40px 0 }
section.collaboration > article.shop .product_list_right ul li.item { width : 25% }
section.collaboration > article.shop.col-2-top #product-list > li.item:nth-child(1),
section.collaboration > article.shop.col-2-top #product-list > li.item:nth-child(2) { width : 50% }
section.collaboration > article.shop + article { border-top : solid 1px #000 }

section.collaboration > article:not(.shop) { padding-right : 480px }
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 ; cursor : url('../image/stop-icon2.png'), default; }
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 : 480px ; height : 100% ; position : absolute ; top : 0 ; right : 0 ; display : inline-flex ; align-items : center }
section.collaboration > article:not(.shop) > .cont p { padding-bottom : 15px ; line-height : 1.5 ; font-family : "futuraLight", sans-serif ;  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 : 210px ; height : 36px ; border : solid 1px #000 ; color : #000 ; text-align : center ; padding : 0 20px ; background : none ; margin : 9px 0 ; line-height : 34px ; transition : ease .3s }
section.collaboration > article:not(.shop) > .cont button:hover,
section.collaboration > article:not(.shop) > .cont .button:hover { border-color : #0000c5 ; color : #0000c5 }
section.collaboration > article:not(.shop) > .cont button.play { cursor : url('../image/play-icon2.png'), default }


section.collaboration > article.shop.alpha-industrie ul > li { width : 33.333333333333333333333% }
section.collaboration > article.shop.alpha-industrie ul > li:nth-child(1),section.collaboration > article.shop.alpha-industrie ul > li:nth-child(2) { width : 50% }
section.collaboration > article.shop.alpha-industrie ul > li:nth-child(2),section.collaboration > article.shop.alpha-industrie ul > li:nth-child(5) { border-right-color : transparent }
section.collaboration > article.shop.alpha-industrie ul > li:nth-child(4) { border-right-color : #000 }

/** 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 }
section.collection > article.list ul > li iframe { width : 100% ; height : 0 }
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( 86% - 54px ) }
section.collection > article.list ul > li .gallery .swiper-container { width : 100% ; height : 86% ; 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 { content : "" ; display : inline-block ; width : 12px ; height : 1px ; background : #000 ; position : absolute }
section.collection > article.list .swiper-button-next:after,section.collection > article.list .swiper-button-prev:after { transform : rotate(50deg) ; margin-top : -9px }
section.collection > article.list .swiper-button-next:before,section.collection > article.list .swiper-button-prev:before { transform : rotate(-50deg) ; margin-top : 9px }
section.collection > article.list .swiper-button-prev { left : calc( 50% - 730px ) ; transform : rotate(180deg) }
section.collection > article.list .swiper-button-next { right : calc( 50% - 730px ) }
section.collection > article.list .swiper-button-next.swiper-button-disabled,section.collection > article.list .swiper-button-prev.swiper-button-disabled { opacity : .15 }
section.collection > article.list .swiper-slide ul { display : block ; width : auto; height : 33.3333333333333333% }
section.collection > article.list .swiper-slide ul > li { display : inline-block ; float : left ; width : auto ; height : 100% }

section.collection > article.list ul.on { height : 100% }
section.collection > article.list ul.on > li:not(.on) { margin-top : 100% }
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 > article.images img { width : 100% ; height : auto }
/** EDITORIAL > IMAGE **/
section.editorial.detail ~ .loading { display : none !important }
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://en.adererror.com/styles/img/cursor-pause.png'), default;}
section.editorial.video > .images > video.play { cursor: url('https://en.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) }


/** EDITORIAL > IMAGE [[ KITSUNE 19S ]] **/
section.editorial.kitsune-19s-editorial > .images > .gallery > figure button { position : absolute ; display : inline-block ; background : none }
section.editorial.kitsune-19s-editorial > .images > .gallery > figure button > img { width : 100px ; height : auto }
section.editorial.kitsune-19s-editorial > .images > .gallery > figure.img-03 button { top : 26.53237410071942% ; left : 58.05284708893154% }
section.editorial.kitsune-19s-editorial > .images > .gallery > figure.img-04 button { top : 26.53237410071942% ; left : 35.05284708893154% }
section.editorial.kitsune-19s-editorial > .images > .gallery > figure.img-05 button { top : 8.53237410071942% ; left : 42.05284708893154% }
section.editorial.kitsune-19s-editorial > .images > .gallery > figure.img-06 button { top : 34.53237410071942% ; left : 65.05284708893154% }
section.editorial.kitsune-19s-editorial > .images > .gallery > figure.img-07 button { top : 49.53237410071942% ; left : 46.55284708893154% }
section.editorial.kitsune-19s-editorial > .images > .gallery > figure.img-08 button { top : 18.53237410071942% ; left : 70.05284708893154% }
section.editorial.kitsune-19s-editorial > .images > .gallery > figure.img-09 button { top : 71.53237410071942% ; left : 67.05284708893154% }
section.editorial.kitsune-19s-editorial > .images > .gallery > figure.img-10 button { top : 40.53237410071942% ; left : 32.05284708893154% }


section.editorial > article.video { text-align : center ; padding : 30px 0 }
section.editorial > article.video .video-wall { width : 1600px ; display : inline-block ; padding-top: 10px }
section.editorial > article.video .video-wall > li { padding : 5px ; position : relative ; float : left ; display : inline-block ; width :50% ; height : auto }
section.editorial > article.video .video-wall > li.width100 { width : 100% ; height: auto }
section.editorial > article.video .video-wall > li,section.editorial > article.video .video-wall > li > .video-container {  -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; }
section.editorial > article.video .video-wall > li video { width : 100% ; height : auto ;  -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; }
section.editorial > article.video .video-wall > li > img { width : 100% ; height : auto ; cursor : url(../image/play-icon2.png), default; -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;}
section.editorial > article.video .video-wall > li > .video-container { position : absolute ; top : 50% ; left : 50% ; overflow : hidden ; width : 0 ; height : 0 ; cursor : default }
section.editorial > article.video .video-wall > li.on > .video-container { position : fixed ; width : 100% ; height : 100% ; top : 0 ; left : 0 ; z-index : 9999999999 ; display : flex ; align-items : center ; background-color : #000  }
section.editorial > article.video .video-wall > li.on > .video-container video { width : 100% ; height : 100% ; cursor : url(../image/stop-icon2.png), auto ; margin : auto }
section.editorial > article.video .video-wall > li.on > .video-container.fullscreen { background-color : #000 }
section.editorial > article.video .video-wall > li.on > .video-container.fullscreen video { width :100%  ; height : 100% }
.video-wall.blur > li > img { filter : blur(6px) ; -webkit-filter: blur(6px); -moz-filter: blur(6px);  -o-filter: blur(6px) ; opacity : 0.5 }

section.editorial > article.video .video-wall > li.text { overflow : none ; font-family : "Tahoma" ; font-size : 13px ; line-height : 1.4 }
section.editorial > article.video .video-wall > li.text > .cont { position : absolute ; bottom : 10px ; left : 10px }
section.editorial > article.video .video-wall > li.text > .cont > h1 {  }
section.editorial > article.video .video-wall > li.text > .cont > div { height : 55px }
section.editorial > article.video .video-wall > li.text * { font-family : "Tahoma" ; font-size : 13px ; line-height : 1.4 }
section.editorial > article.video .video-wall.fantastic-mistake #text-typing2 { text-align: right ; padding-top: 20px }

section.editorial > article.video .video-wall h1 { display : inline-block ; height : 60px ; margin-bottom : 20px ; min-width : 195px ; padding : 0 ; position : relative }
section.editorial > article.video .video-wall h1 > * { position : absolute; width : 100% ; height : 100% ; display : inline-block ; z-index : 2 }
section.editorial > article.video .video-wall h1 > .cont { z-index : 3 ; padding : 10px ; }
section.editorial > article.video .video-wall h1 img { height : 40px ; width : auto }

section.editorial > article.video .video-wall.fantastic-mistake h1 { width : 523px ; position : absolute ; left : 90px ; top : 55px }
section.editorial > article.video .video-wall.fantastic-mistake > li.text > .cont { position : relative ; height : 393px }
section.editorial > article.video .video-wall.fantastic-mistake > li.text > .cont > .side-text { position : absolute ; left : -350px ; top : 700px}
section.editorial > article.video .video-wall.fantastic-mistake > li.text > .cont > .side-text > div  { width : 600px ; height : 50px ; transform : rotate(90deg) ; text-align : left }
section.editorial > article.video .video-wall.adererror h1 { position : absolute ; bottom : -130px ; left : -60px }
section.editorial > article.video .video-wall.adererror > li.text { height : 50px }
section.editorial > article.video .video-wall.adererror > li.text > .cont { position : relative }
section.editorial > article.video .video-wall.adererror > li.text > .cont > div { padding : 0 200px ; text-align : center  }
section.editorial > article.video .video-wall.adererror > li.text > .cont > .side-text { position : absolute ; right : -340px ; top : 340px ; padding : 0 }
section.editorial > article.video .video-wall.adererror > li.text > .cont > .side-text > div  { width : 600px ; height : 50px ; transform : rotate(90deg) ; text-align : left }
section.editorial > article.video .video-wall.brandfilm h1 { position : absolute ; width : 270px ; transform : rotate(90deg) ; z-index : 3 ; left : 510px ; top : -50px }
section.editorial > article.video .video-wall.brandfilm > li.text { height : 50px ; padding : 0 }
section.editorial > article.video .video-wall.g-shock h1 { height : 433px ; min-width : 50px ; width : 50px ; position : absolute ; left : -65px ; top : 75px }
section.editorial > article.video .video-wall.g-shock h1 img { width : 30px ; height : auto }
section.editorial > article.video .video-wall.g-shock > li.text { height : 40px }
section.editorial > article.video .video-wall.g-shock > li.text > .cont > div { width : 600px ; text-align : right ; padding-left : 100px }



/** STOCKIST **/
section.stockist { text-align : center ; padding-bottom : 40px }
section.stockist > article > a { display : block ; width : 100%; height : 49px }
section.stockist > article > .gallery { border-top : solid 1px #000 ; border-bottom : solid 1px #000 }
section.stockist > article:first-child > .gallery { border-top : none }
section.stockist > article > .gallery .swiper-wrapper { height : auto }
section.stockist > article > .gallery .swiper-slide > img { width : auto ; height : 710px ; border-left : solid 1px #000 ; border-right : solid 1px #000 }
section.stockist > article > .gallery .swiper-button-next:before,section.stockist > article > .gallery .swiper-button-prev:before,
section.stockist > article > .gallery .swiper-button-next:after,section.stockist > article > .gallery .swiper-button-prev:after { content : "" ; display : inline-block ; width : 12px ; height : 1px ; background : #000 ; position : absolute }
section.stockist > article > .gallery .swiper-button-next:after,section.stockist > article > .gallery .swiper-button-prev:after { transform : rotate(50deg) ; margin-top : -9px }
section.stockist > article > .gallery .swiper-button-next:before,section.stockist > article > .gallery .swiper-button-prev:before { transform : rotate(-50deg) ; margin-top : 9px }
section.stockist > article > .gallery .swiper-button-prev { left : initial ; right : calc( 50% - 730px ) }
section.stockist > article > .gallery .swiper-button-next { right : initial ; left : calc( 50% - 730px ) ; transform : rotate(180deg) }
section.stockist > article > .gallery .swiper-button-next.swiper-button-disabled,section.stockist > article > .gallery .swiper-button-prev.swiper-button-disabled { opacity : .15 }

section.stockist > article > .info { padding : 70px 0 35px 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 p { padding-top : 23px }













/** SHOP > CART **/
section.order > article { padding : 0 80px }
section.order > article .empty { width : 100% ; padding : 140px 0 ; text-align : center }
section.order > article .buttons { width : 100% ; display : inline-block ; text-align : center }
section.order > article .buttons button,section.order > article .buttons .button { min-width: 300px; height : 41px ; background : #000 ; color : #fff ; cursor : pointer }
section.order > article .buttons .all { background : #00fe66 }
section.order > article .buttons.table > * { min-width : auto ; width : 50% ; font-size : 14px ; line-height : 39px ; margin : 0 ; float : left }
section.order > article .buttons.table > *:first-child { border-right : none }

section.order > article.cart { margin : auto ; padding : 140px 150px 150px 150px }
section.order > article.cart table .thumbnail { display : inline-block ; width : 140px ; height : 210px ; background-size : cover ; background-repeat : no-repeat ; background-position : center ; position : absolute ; left : 0 ; top : 10px }
section.order > article.cart table.list > tbody > tr > td:first-child { padding-left : 160px ; height : 230px }
section.order > article.cart table.list > tbody > tr > td > input[type="checkbox"] { display : none }
section.order > article.cart table td .quantity { display : inline-block ; width : 100% }
section.order > article.cart table td .quantity .form { border : solid 1px #bbb ; position : relative ; padding-right : 14px }
section.order > article.cart table td .quantity .form input { text-align : center ; width : 100% ; height : 28px ; border:none }
section.order > article.cart table td .quantity .form button { border : none ; position : absolute ; right : 0 ; width : 14px ; height : 14px ; font-size : 6px ; color : #dddddd ; background-repeat : no-repeat ; background-position : center }
section.order > article.cart table td .quantity .form button.up { top : 0 ; background-image : url('../image/ico-qty-up.png') }
section.order > article.cart table td .quantity .form button.down { bottom : 0 ; background-image : url('../image/ico-qty-down.png') }
section.order > article.cart .buttons { padding-top : 80px ; text-align : right }
section.order > article.cart .buttons button { width : 400px }

section.order > article.cart .term-link { padding-bottom : 10px }
section.order > article.cart .term-link label { display : none }
section.order > article.cart .term-link span input { width : 0 ; height : 0 ; }
section.order > article.cart .term-link a { padding-bottom : 2px ; border-bottom : solid 1px #000 }

/** SHOP > ORDER > RESULT **/
section.order > article.result .message { width : 100% ; text-align : center ; padding : 75px 0 }
section.order > article.result .message > .info { width : 100% ; border-top : solid 1px #eaeaea ; margin-top : 75px ; padding-top : 75px }
section.order > article.result .message > .info dl { display : inline-block ; width : 230px }
section.order > article.result .message > .info dl > * { display : inline-block ; float : left ; text-align : left ; height : 34px }
section.order > article.result .message > .info dl > dt { width : 80px }
section.order > article.result .message > .info dl > dd { width : 150px }
section.order > article.result table > tfoot > tr:first-child > td { padding : 20px 0 }
section.order > article.result table.write .buttons { width : auto !important ; padding : 0 ; text-align : center }
section.order > article.result table.write .buttons * { height : 26px ; line-height : 24px ; min-width : auto ; width : auto ; font-size: 12px ; padding : 0 5px }
section.order > article.result table.write > tbody th,section.order > article.result table.write > tbody td { padding : 8px 0 }
section.order > article.result table.list.goods { margin-top : 50px }
section.order > article.result table.list.goods tbody > tr > td { height : 130px }
section.order > article.result table.list.goods tr > *:nth-child(1) { text-align : left }
section.order > article.result table.list.goods tr > td:nth-child(1) { position : relative ; padding-left : 120px }
section.order > article.result table.list.goods tr > *:nth-child(2) { text-align : center ; width : 90px }
section.order > article.result table.list.goods tr > *:nth-child(3) { text-align : right ; width : 130px }
section.order > article.result table.list.goods .thumbnail { position : absolute ; width : 110px ; height: 110px ; display : inline-block ; top : 10px ; left : 0 ; background-size : cover ; background-position : center }

/** TERMS / GUIDE **/
section.terms { padding : 120px 20px 60px 20px ; background : #efefef ; font-size : 14px }
section.terms > article { background : #fff ; background : #fff ; padding : 80px ; line-height : 2 ; font-size : 14px ; box-shadow : 0 0 1px 1px rgba(100,100,100,.1) }
section.terms > article h1 { font-size : 30px ; font-family : 'Futura', sans-serif ; font-weight : 200 ; margin-bottom : 50px }
section.terms > article h2 { font-size : 16px ; font-weight : 800 ; margin-top : 30px }
section.terms > article ol + ol { margin-top : 15px }



/** MEMBER **/
section.member > article,section.community > article { padding-top : 140px ; padding-bottom : 140px }
section.member > article h1,section.community > article h1 { text-align : center ; font-family : 'Futura', sans-serif ; font-size : 14px ; text-transform : uppercase ; font-weight : 400 ; margin-bottom : 40px }
section.member > article button[type='submit'],section.member > article button.submit,section.member > article a.submit { font-size : 18px ; text-align : center ; min-width : 160px ; height : 50px ; margin : 50px auto ; line-height : 50px ; background : #000 ; color : #fff }
section.member > article .terms { width : 100% ; text-align : left }
section.member > article .terms > .cont { width : 100% ; height : 150px ; padding : 15px ; overflow-y : scroll ; font-size : 14px ; border : solid 1px #efefef }

section.member > article.login { width : 310px ; margin : auto ; text-align : center ; padding-bottom : 140px }
section.member > article.login h1 { margin-bottom : 20px }
section.member > article.login .form-inline { padding : 0 0 25px 0 ; margin-top : 5px ; font-size : 22px }
section.member > article.login .form-inline input,section.member > article.login .form-inline select { font-size : 22px ; font-family : 'Futura', 'NotoSans Kr', sans-serif ; border-bottom : solid 1px #000 ; height : 46px ; background : none ; padding-left : 120px ; text-align : right }
section.member > article.login .form-inline label.control-label { top : 0 ; height : 46px ; line-height : 46px ; font-family : 'Futura', sans-serif ; font-size : 22px }
section.member > article.login .form-inline .describe { display : block ; font-size : 12px ; text-align : right ; position : absolute ; right : 0 ; bottom : 5px }
section.member > article.login button { width : 100% ; height : 41px ; font-weight : 400 ; font-size : 12px ; margin : 6px 0 ; line-height : 1 ; border-width : 1px }
section.member > article.login button[type='submit'],section.member > article.login button.submit { border-width : 1px ; margin-top : 25px ; font-size : 12px }
section.member > article.login .sns { width : 100% ; }
section.member > article.login .sns button { border : none ; background-repeat : no-repeat ; background-position : center left }
section.member > article.login .sns .naver { background-color : #26c726 ; background-image : url('https://en.adererror.com/images/ico-naver.png') ; color : #fff }
section.member > article.login .sns .facebook { background-color : #4167b1 ; background-image : url('https://en.adererror.com/images/ico-facebook.png') ; color : #fff }
section.member > article.login .sns .kakaotalk { background-color : #ffeb00 ; background-image : url('https://en.adererror.com/images/ico-kakao.png') ; color : #3c1d1e }
section.member > article.login .links { margin-top : 22px ; padding-top : 18px ; 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 }
section.member > article.login .no-member { padding-top : 25px ; margin-top : 40px ; border-top : solid 1px #eaeaea }
section.member > article.login .no-member p { font-weight : 600 ; margin-bottom : 20px }
section.member > article.login .agreement { display : block ; width : 100% ; text-align : left ; font-size : 12px ; padding-bottom : 40px }
section.member > article.login .agreement a { text-decoration : underline }
section.member > article.login .agreement .check { position : relative ; margin-right : 6px ; vertical-align : middle ; display : inline-block }
section.member > article.login .agreement .check * { cursor : pointer }
section.member > article.login .agreement .check input { position : absolute ; top : 0 ; left : 0 ; width : 100% ; height: 100% ; opacity : 0 ; display : inline-block ; z-index : 2 }
section.member > article.login .agreement .check input + em { display : inline-block ; width : 14px ; height : 14px ; border : solid 1px #000 }
section.member > article.login .agreement .check input:checked + em { background : #000 }

section.member > article.join h1 { margin-bottom : 70px }
section.member > article.join .complete { font-size : 22px }
section.member > article.join .complete dl.info { display : inline-block ; width : 100% ; margin : 40px 0 100px 0 }
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 }
section.member > article.join .benefit { font-size : 12px ; padding : 5px ; background : #f0f0f0 }
section.member > article.join .buttons > * { width : 100% }
section.member > article.join .buttons > .button { margin : 10px 0 0 0 ; font-weight : 400 }
section.member > article.join .buttons > button { font-family : 'Futura', sans-serif ; font-size : 14px ; font-weight : 200 ; border : none }

section.member > article.find-id .form-inline.member-type select { text-align-last : right }

/** MY PAGE **/
section.mypage a { color : #000 }
section.mypage > article.dashboard { margin : 0 !important ; text-align : center }
section.mypage > article.dashboard ul.pages { display : inline-block ; width : 1290px ; margin : 80px auto !important }
section.mypage > article.dashboard ul.pages > li { display : inline-block ; width : 238px ; height : 265px ; margin : 10px ; border : solid 1px #e9e9e9 ; padding : 40px 15px ; text-align : center ; float : left ; font-size : 12px }
section.mypage > article.dashboard ul.pages > li h3 { font-family : "Futura", sans-serif ; font-size : 14px ; padding : 30px 0 50px 0 }
section.mypage > article.dashboard ul.pages > li h3 span { display : block ; font-size : 12px ; font-weight : 400 }
section.mypage > article.dashboard ul.pages > li p a { letter-spacing : -0.1em ; color : #666 }
section.mypage > article.dashboard ul.pages > li:hover { border-color : #000 ; transition : ease-out .2s }
section.mypage > article.dashboard ul.pages > li:hover * { color : #000 !important ; transition : ease-out .2s }
section.mypage > article .empty { text-align : center ; margin : 100px auto }

/** MY PAGE > MODIFY **/
section.mypage > article.modify .buttons { padding : 40px 0 }
section.mypage > article.modify .buttons button { margin-bottom : 40px }
section.mypage > article.modify .buttons a { text-decoration : underline ; font-size : 12px ; color : #666 }

/** MY PAGE > ORDER **/
section.mypage > article.order .search { border-bottom : solid 1px #000 ; padding : 0 0 30px 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 }
section.mypage > article.order .search > .buttons + .forms { padding-left : 15px }
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 ; font-family : 'Futura' }
section.mypage > article.order .search > .forms select { width : 190px ; margin-right : 15px }
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% ; vertical-align : middle }
section.mypage > article.order .search > .forms button[type='button'] > img { display : none }
section.mypage > article.order .search > .forms button[type='button']:hover { background-color : none }
section.mypage > article.order .search > .forms button[type='submit'] { min-width : auto ; width : 80px ; height : 38px ; font-size : 14px ; background : #000 ; color : #fff ; line-height : 38px }
section.mypage > article.order .search > .forms button[type='submit']:hover { }
section.mypage > article.order .search + .describe { margin : 12px 0 50px 0 ; color : #b9b9b9 }
section.mypage > article.order .search + .describe > li { padding : 3px 0 }
section.mypage > article.order .search + .describe a { color : #b9b9b9 }
section.mypage > article.order table.list th,section.mypage > article.order table.list td{ text-align : center }
section.mypage > article.order.detail button[type='submit'] { margin : 0 ; padding : 0 8px ; height : 20px ; line-height : 18px ; min-width : auto ; width : auto ; margin-left : 10px }
section.mypage > article.order.detail table.write > tbody th,section.mypage > article.order.detail table.write > tbody td { padding : 8px 0 ; line-height : 1.4 ; min-height : auto }
section.mypage > article.order.detail table.list { margin : 40px 0 }
section.mypage > article.order.detail .buttons { padding : 10px 0 }
section.mypage > article.order.detail .buttons button,section.mypage > article.order.detail .buttons .button { padding : 3px 5px ; margin-right : 5px }

section.mypage > article.order table.list { margin-bottom : 40px }
section.mypage > article.order table.list td.product { position : relative ; padding-left : 250px ; height : 200px }
section.mypage > article.order table.list td.product .thumb { position : absolute ; left : 10px ; top : 10px }

/** MY PAGE > COUPON **/
section.mypage > article.coupon .regist { width : 600px ; margin : 120px auto }
section.mypage > article.coupon .regist .form-inline2 { padding : 0 110px 0 110px }
section.mypage > article.coupon .regist .form-inline2 .control-label { left : 0 ; top : 0 ; line-height : 34px }
section.mypage > article.coupon .regist .form-inline2 .button { position : absolute ; right : 0 ; top : 0 ; width : 90px ; height : 34px ; line-height : 32px ; text-align : center }
section.mypage > article.coupon .regist .form-inline2 .describe { text-align : center ; color : #777 ; width : 100% ; padding-top : 20px }

/** MY PAGE > MILEAGE **/
section.mypage > article.mileage .summary { display : block ; text-align : center ; padding : 30px 0 100px 0 }
section.mypage > article.mileage .summary ul { display : inline-block }
section.mypage > article.mileage .summary ul > li { padding : 8px 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 : 150px }

/** SEARCH **/
section.search > article .forms { width : 700px ; margin : auto }
section.search > article .forms > div.cont { width : 100% ; position : relative ; margin : 140px 0 120px 0 }
section.search > article .forms > div.cont label { text-transform : uppercase ; color : #000 ; position : absolute ; bottom : 3px ; left : 0 ; }
section.search > article .forms > div.cont input[name='keyword'] { width : 100% ; height : 28px ; border : none ; border-bottom : solid 1px #000 ; padding : 0 70px ; 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 : 120px ; padding-bottom : 3px }
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):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 : 25% ; height : auto ; padding-bottom : 32% ; border-bottom : solid 2px #ebebeb ; border-right : solid 2px #ebebeb ; color : #000 ; font-family : 'Futura', sans-serif ; background-size : 80% ; background-repeat : no-repeat ; background-position : center }
section.search > article .result > a:nth-child(4n) { border-right : none }
section.search > article .result > a > .cont { display : inline-block ; position : absolute ; bottom : 0 ; left : 0 ; padding : 30px 50px }
section.search > article .result > a > .cont > span { display : block }

/** COMMUNITY **/
section.community > article h1 { margin-bottom : 10px }
section.community > article h2 { font-size : 18px ; font-weight : 400 ; text-align : center ; padding-bottom : 60px }
section.community > article .empty { padding : 150px 0 ; text-align : center }
section.community > article .buttons { display : inline-block ; text-align : center ; width : 100% ; padding-top : 15px }
section.community > article .buttons > .left { float : left ; text-align : left }
section.community > article .buttons > .right { float : right ; text-align : right }
section.community > article .buttons button,section.community > article .buttons .button { height : 30px ; line-height : 28px ; min-width : 150px ; padding : 0 20px ; text-align : center }
section.community > article .buttons .over .text { width : 148px }
section.community > article .relate-goods { border : solid 1px #000 ; width : 100% ; display : table }
section.community > article .relate-goods > * { display : table-cell ; vertical-align : middle ; padding : 15px }
section.community > article .relate-goods > .thumbnail { width : 100px }
section.community > article .relate-goods > .thumbnail img { width : 100% ; height : auto }
section.community > article.wrap { width : 800px }
section.community > article form .button { width : 100px }


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 : 120px ; height : auto }
section.bluemark h2 { font-size : 0 ; width : 104% ; margin-left : -2% ; font-weight : 800 }
section.bluemark h2 > img { width : 100% ; height : auto }

/** PRESET **/
section.bluemark .text.kr { letter-spacing: -0.09em; line-height: 25px; font-size: 1em; font-weight : 600 }
section.bluemark .contact,section.bluemark  .text.en { letter-spacing : -0.05em }
section.bluemark .margin-top-10 { margin-top:10px }

/** 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 }


/** 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 : 580px ; position : relative ; padding : 20px ; display : block ; border : solid 1px #000 ; margin : auto ; text-align : left }
section.bluemark #original-blue > .box button.close { position : absolute; outline : none ; border : none ; right : -60px ; top : -20px ; background : none ; width : 40px ; height : 40px ; 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 : 4px ; height : 40px ; top : 0 ; left : 18px } 
section.bluemark #original-blue > .box button.close:before { width : 40px ; height : 4px ; top : 18px; left : 0 }
section.bluemark #original-blue > .box p { font-size : 14px ; line-height : 1.25 }
section.bluemark #original-blue > .box > img {margin-top:20px}
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 : 30px }
section.bluemark article.form > .cont > .blue-color { cursor : pointer ; position : absolute ; left : 30px ; top : 30px }
section.bluemark article.form > .cont > .blue-color img { width : 240px ; height : auto }
section.bluemark article.form > .cont > .right { float : right ; display : inline-block ; width : 720px }
section.bluemark article.form > .cont > .right .blue-mark { padding-bottom : 10px }
section.bluemark article.form > .cont > .right .blue-mark img { width : 220px ; height : auto }
section.bluemark article.form > .cont > .right .text { padding-bottom : 10px ; line-height: 1.25 }
section.bluemark article.form > .cont > .right form { display : inline-block ; width : 100% ; position : relative ; padding-right : 200px }
section.bluemark article.form > .cont > .right form input { font-family : 'futura', sans-serif }
section.bluemark article.form > .cont > .right form > .button { width : 200px ; position : absolute ; top : 0 ; right : 0 ; border : none }
section.bluemark article.form > .cont > .right form > .button button { height : 84px ; line-height : 84px ; 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 }
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 : none }
.not-mobile { display : inline-block }