@charset 'utf-8';


.o-hamburger {position:relative;left:0;top:0;display:block;width:40px;height:40px;overflow:visible;background-color:#fff;border:2px solid #212121;box-sizing:border-box;cursor:pointer;-webkit-transition:background .3s linear;transition:background .3s linear;}
.showcase .o-hamburger {background-color:transparent;}

.o-hamburger > span {position:absolute;}
.o-hamburger > span.word {
	font-size:12px;
	line-height:18px;
	display:block;
	width:18px;
	height:18px;
	
	color:#212121;
	text-align:center;
	vertical-align:middle;
	transition-property:transform;
	transition-duration:0.3s;
	transition-delay:0s;
}
.o-hamburger > span.m {left :7%;top   :6%;}
.o-hamburger > span.e {right:1%;top   :6%;}
.o-hamburger > span.n {left :6%;bottom:2%;}
.o-hamburger > span.u {right:1%;bottom:2%;}

.o-hamburger > span.word span,
.o-hamburger > span.word:after {
	transition-property:opacity;
	transition-duration:0.2s;
	transition-delay:0.2s;
}
.o-hamburger > span.word span.a {position:relative;display:block;width:100%;height:100%;opacity:1;text-align:center;}
.o-hamburger > span.word:after {position:absolute;display:block;width:100%;height:100%;opacity:0;text-align:center;left:0;top:0;}

.o-hamburger > span.word.m:after {content:'H';}
.o-hamburger > span.word.e:after {content:'I';}
.o-hamburger > span.word.n:after {content:'D';}
.o-hamburger > span.word.u:after {content:'E';}

.o-hamburger.hover {background-color:#212121;}
.o-hamburger.hover > span.word {
	color:#fff;
	transition-delay:0.2s;
}
.o-hamburger.selected {background-color:#212121;}
.o-hamburger.selected > span.word {
	color:#fff;
	transition-duration:0.4s;
	transition-delay:0.05s;
}
.o-hamburger.hover.selected{background-color: transparent;}
.o-hamburger.hover.selected > span.word {
	color:#000;
}

/*.o-hamburger.selected > span.m {transform:rotate(-720deg);-ms-transform:rotate(-720deg);}
.o-hamburger.selected > span.e {transform:rotate(-720deg);-ms-transform:rotate(-720deg);}
.o-hamburger.selected > span.n {transform:rotate(-720deg);-ms-transform:rotate(-720deg);}
.o-hamburger.selected > span.u {transform:rotate(-720deg);-ms-transform:rotate(-720deg);}*/

.o-hamburger.selected > span.word span {
	transition-duration:0.2s;
	transition-delay:0.2s;
}
.o-hamburger.selected > span.word span.a {opacity:0;}
.o-hamburger.selected > span.word:after {opacity:1;}

	html.open-complete {height:100%;}
	html.open-complete #document {/*position:fixed;top:0;left:0;width:100%;height:100%;overflow:hidden;*/}
	html.open-complete #document > header .wrap {background-color:#f4f4e7}
.V1.open-complete #o-background {display:none;}
	body.gnb-open {height:100%;overflow:hidden;}
	body.gnb-open #document,
	body.gnb-open #document > header{height:100%;}
	.gnb-box {position:fixed;z-index:-1;top:0;left:0;width:100%;height:100vh;pointer-events:none;background-color:transparent;border:0 solid #f4f4e7;box-sizing:border-box;
		-webkit-transition:border .3s ease-in, background 0s linear;
		transition:border .3s ease-in, background 0s linear;
	}
.V5 body.gnb-over .gnb-box,
.V6 body.gnb-over .gnb-box,
.V4 body.gnb-over .gnb-box {border-width:10px}
	body.gnb-open .gnb-box {border-width:50vh 50vw !important;background-color:#f4f4e7;
		-webkit-transition:border .3s ease-in, background 0s linear .3s;
		transition:border .3s ease-in, background 0s linear .3s;
	}
.ie9 .gnb-box {display:none;}
.ie9 body.gnb-over .gnb-box,
.ie9 body.gnb-open .gnb-box {display:block;}

body.gnb-over header nav,
body.gnb-over header .util {display:block;opacity:0;}

body.gnb-open header nav,
body.gnb-open header .util{display:block;opacity:1;pointer-events:auto;
		-webkit-transition:opacity .8s .2s linear;
		-ms-transition:opacity .8s .2s linear;
		transition:opacity .8s .2s linear;
	}

	header nav {display:none;opacity:0;pointer-events:none;position:absolute;/*z-index:9;*/top:0;left:30%;/*width:100%;height:100%;*/padding-top:15vh;box-sizing: border-box;
		-webkit-transition:opacity .3s linear;
		-ms-transition:opacity .3s linear;
		transition:opacity .3s linear;
	}
.ie9 header nav {display:none;padding-top:10vh;}
.V2 header nav {left:30.8%;/*padding-top:16.2vh;*/height:auto;padding-top:0;top:50%;transform:translateY(-50%); -ms-transform:translateY(-50%);}
.V1 header nav {left:19.1%;padding-top:17.4vh;}
	header nav ul,
	header nav li {margin:0;padding:0;list-style:none;}

	header nav .gnb a {position:relative;display:block;max-width:270px;height:91px;font-size:72px;opacity: 0;}
	header nav .gnb a canvas {/*height:165%;
		-webkit-transform:scale(0.5);
		-ms-transform:scale(0.5);
		transform:scale(0.5);
		-webkit-transform-origin:0 0;
		-ms-transform-origin:0 0;
		transform-origin:0 0;*/
	}
	header nav .gnb a:hover .on {opacity:1;}
	header nav .gnb a .on {opacity:0;position:absolute;top:0;left:0;-webkit-transition:opacity .2s linear;-ms-transition:opacity .2s linear;transition:opacity .2s linear}
	header nav .gnb a:hover,
	header nav .gnb a:focus {color: #f4f4e7;-webkit-text-stroke: 2px #212121;}
.V5 header nav .gnb a,
.V4 header nav .gnb a,
.V3 header nav .gnb a 	{font-size:54px;height:68px;}
.V2 header nav .gnb a 	{font-size:24px;height:36px;}
.V2 header nav .gnb a:hover .on {opacity:0;}
.V1 header nav .gnb a 	{font-size:36px;height:46px;}
.V1 header nav .gnb a:hover .on {opacity:0;}

.V2 header nav .gnb a:hover,
.V2 header nav .gnb a:focus,
.V1 header nav .gnb a:hover,
.V1 header nav .gnb a:focus {-webkit-text-stroke: 1px #212121;}

.no-webkitTextStroke #document > header .gnb a:hover > span,
.no-webkitTextStroke #document > header .gnb a:focus > span {
	color: rgba(0, 0, 0, 0.38);
}

:lang(ko) #document > header .gnb a>span {font-size:inherit;}
:lang(ko) header nav .gnb a {font-size:50px;line-height:1.82;max-width:none;}
.V5:lang(ko) header nav .gnb a,
.V4:lang(ko) header nav .gnb a,
.V3:lang(ko) header nav .gnb a {font-size:42px;line-height:1.62}
.V2:lang(ko) header nav .gnb a {font-size:18px;line-height:2}
.V1:lang(ko) header nav .gnb a {font-size:28px;line-height:1.64}

	header nav .lnb 		  {margin-top:10px;opacity: 0;}
/*.V3 header nav .lnb 		  {margin-top:52px;}*/
.V2 header nav .lnb 		  {margin:0;position:absolute;bottom:8px;left:175px;}
.V1 header nav .lnb 		  {margin-top:24px;}
	header nav .lnb li + li   {margin-top:4px;}
	header nav .lnb a 		  {font-size:24px;line-height:1.5;
		-webkit-transition:color .3s;
		-ms-transition:color .3s;
		transition:color .3s;
	}
.V2 header nav .lnb a 		  {font-size:14px;}
.V1 header nav .lnb a 		  {font-size:18px;}
	header nav .lnb a:hover,
	header nav .lnb a:focus   {color: rgba(0, 0, 0, 0.38);}

#document > header nav .lnb .language{position: static;margin-top: 32px;font: 12px/1.5 'Circular-Medium'; }
.V2 #document > header nav .lnb .language,
.V1 #document > header nav .lnb .language{margin-top: 16px;white-space: nowrap;}
#document > header nav .lnb .language a{margin: 0 8px;}
#document > header nav .lnb .language a:first-child{margin-left: 0;}

.V2 header .util 	   	   {bottom:25px;left:4.4%;}
.V1 header .util 	   	   {bottom:18px;left:auto;right:8.7%;
	-webkit-transform:rotate(90deg);
	-ms-transform:rotate(90deg);
	transform:rotate(90deg);
	-webkit-transform-origin:100% 100%;
	-ms-transform-origin:100% 100%;
	transform-origin:100% 100%;
}
	header .util		   {display:none;opacity:0;position:absolute;/*z-index:8*/;bottom:44px;left:4.3%;font-size:12px;line-height:1.5;color:#212121;
		-webkit-transition:opacity .8s linear;
		-ms-transition:opacity .8s linear;
		transition:opacity .8s linear;
	}

	header .alphabet	  {opacity:0;/*z-index:6;*/position:fixed;top:0;left:0;width:100vw;height:100%;pointer-events:none;
		-webkit-transition:opacity .3s linear;
		-ms-transition:opacity .3s linear;
		transition:opacity .3s linear;
	}
body.gnb-open header .alphabet{opacity:1;
		-webkit-transition:opacity 1s linear .3s;
		-ms-transition:opacity 1s linear .3s;
		transition:opacity 1s linear .3s;
	}
.ie9 header .alphabet {display:none;}
.ie9 body.gnb-open header .alphabet {display:block;}

	header .alphabet span {position:absolute;font-size:196px;color:#212121;opacity: 0;}
.V2 header .alphabet span,
.V1 header .alphabet span {font-size:96px;}
	header .alphabet span i {display:block;font-style:normal;}
	header .alphabet span.stroke {-webkit-text-stroke:3px #212121;color:transparent;}
.ie9 header .alphabet span.stroke {color:#212121;}

	header .alphabet.layout1 span.type1{top:34%;left:62%;}
.V2 header .alphabet.layout1 span.type1 {left:72%;}
	header .alphabet.layout1 span.type2{top:0;left:50%;}
	header .alphabet.layout1 span.type3{top:46%;left:13%;}
.V3 header .alphabet.layout1 span.type3 {left:8%;}
.V1 header .alphabet.layout1 span.type3 {left:0;}

	header .alphabet.layout2 span.type1 {top:80%;left:20%;}
	header .alphabet.layout2 span.type2 {top:40%;left:10%;}
.V1 header .alphabet.layout2 span.type2 {left:0;}
	header .alphabet.layout2 span.type3 {top:60%;left:60%;}
.V2 header .alphabet.layout2 span.type3 {left:70%;}

	header .alphabet.layout3 span.type1 {top:10%;left:70%;}
.V2 header .alphabet.layout3 span.type1 {top:0;left:50%;}
	header .alphabet.layout3 span.type2 {top:30%;left:60%;}
	header .alphabet.layout3 span.type3 {top:60%;left:70%;}
.V2 header .alphabet.layout3 span.type3 {top:70%;}


.ie9 header .alphabet.layout1 span.type1{top:15%;left:9%;}
.ie9 header .alphabet.layout1 span.type2{top:10%;left:27%;}
.ie9 header .alphabet.layout1 span.type3{top:50%;left:9%;}
.V3.ie9 header .alphabet.layout1 span.type3 {left:5%;}
.V1.ie9 header .alphabet.layout1 span.type3 {left:0;}
.ie9 header .alphabet.layout2 span.type1{top:30%;left:25%;}
.ie9 header .alphabet.layout2 span.type2{top:75%;left:30%;}
.ie9 header .alphabet.layout2 span.type3{top:75%;left:5%;}
.ie9 header .alphabet.layout3 span.type1{top:20%;left:10%;}
.ie9 header .alphabet.layout3 span.type2{top:75%;left:30%;}
.V3.ie9 header .alphabet.layout3 span.type2{left:32%;}
.ie9 header .alphabet.layout3 span.type3{top:40%;left:27%;}

	header .alphabet span.r-type1 i {transform:rotate(53deg);-webkit-transform:rotate(53deg);-ms-transform:rotate(53deg);}
	header .alphabet span.r-type2 i {transform:rotate(-56deg);-webkit-transform:rotate(-56deg);-ms-transform:rotate(-56deg);}
	header .alphabet span.r-type3 i {transform:rotate(234deg);-webkit-transform:rotate(234deg);-ms-transform:rotate(234deg);}


.x-move-ani {transition:all 0.8s cubic-bezier(0.160, 0.425, 0.665, 0.870);-webkit-transition:all 0.8s cubic-bezier(0.160, 0.425, 0.665, 0.870);-ms-transition:all 0.8s cubic-bezier(0.160, 0.425, 0.665, 0.870);}