@charset "utf-8";
@import url('./unable/board.css');
@import url('./custom_board.css');

/* custom selection */
::selection{background:#cac69c; color:#fff; text-shadow:none;}
::-moz-selection{background:#cac69c; color:#fff; text-shadow:none;}
::-webkit-selection{background:#cac69c; color:#fff; text-shadow:none;}

/* eng text */
.lang_en{font-family:'Marcellus', Sans-serif; letter-spacing:3px;}

/* id */
#update{display:flex; flex-flow:row wrap; justify-content:center; align-items:flex-start; height:100%; background:rgba(0,0,0,0.5);}
#update > div{box-sizing:border-box; padding:40px 50px; margin-top:30px; background:#010101; border-radius:3px; box-shadow:0px 30px 60px rgba(0,0,0,0.24); color:#fff; font-size:14px;}
#update p{margin-top:5px;}
#update a{display:inline-block; padding:10px 20px; margin-top:20px; border:2px solid rgba(255,255,255,0.6); border-radius:50rem; font-size:13px; color:#fff; transition:0.3s ease;}
#update a:hover,
#update a:focus{border:2px solid rgba(255,255,255,1);}

/* custom */
body{overflow-y:hidden;}
html,
body,
#wrap{height:100%;}
#wrap .reponsive{display:none; opacity:0; visibility:hidden;}
	/* header */
#header{opacity:0; visibility:hidden; position:fixed; top:0px; left:0px; z-index:21; width:100%; height:100%; transition:0.3s linear 0s;}
#header .show_visual_text{max-width:1060px; height:auto; margin:0 auto; padding-top:30px;}
#header .show_visual_text h1{opacity:0; width:200px; height:37px;}
#header .show_visual_text P{opacity:0; margin-top:13px; font-size:12px;}
#header .show_visual_text .btn_scroll{opacity:0; position:absolute; left:50%; bottom:10px; margin-top:0px; margin-left:-120px; border-width:0px;}
#header.active{opacity:1; visibility:visible;}
#header.active .show_visual_text h1,
#header.active .show_visual_text p,
#header.active .show_visual_text .btn_scroll{opacity:1;}
.ie #header .show_visual_text{box-sizing:border-box; padding-top:19px;}
.ie #header .show_visual_text .btn_scroll{margin-left:-120px;}

	/* visual text */
.show_visual_text{display:flex; flex-flow:column; justify-content:center; align-items:center;}
.show_visual_text h1{width:500px; height:95px; transition:opacity 0.3s ease-in 0s;}
.show_visual_text h1 span{display:block; height:100%; background:url(../images/common/logo.svg) no-repeat 50% 0; background-size:100%; font-size:0px;}
.show_visual_text p{margin-top:65px; font-size:30px; letter-spacing:2.4px; font-weight:600; white-space:nowrap; text-transform:uppercase; transition:opacity 0.3s ease-in 0s;}
.show_visual_text .btn_scroll{position:relative; display:flex; flex-flow:row nowrap; justify-content:center; align-items:center; width:240px; height:60px; box-sizing:border-box; margin-top:175px; border:2px solid #000; border-radius:50rem; transition:opacity 0.3s ease-in 0s;}
.show_visual_text .btn_scroll span{font-size:14px; letter-spacing:3px;}
.show_visual_text .btn_scroll:after{content:''; display:block; position:absolute; right:30px; top:50%; width:18px; height:10px; margin-top:-5px; background:url(../images/common/img_arrow.png) no-repeat 50% 0; background-size:100%; animation:trackBallSlide 5s linear infinite;}

	/* footer */
#footer{position:absolute; bottom:0px; z-index:28; border-top:1px solid rgba(255,255,255,0.15); color:#fff; transform:rotate(-90deg); transform-origin:0% 100%;}
#footer:after{content:''; display:block; clear:both;}
#footer p{float:right; opacity:0.4; padding:23px 30px 23px 0; font-size:11px; letter-spacing:2px;}

	/* sns */
[data-footer="sns"]{float:left; margin-top:-15px; padding-right:17px; transform:rotate(90deg); transform-origin:100% 100%;}
[data-footer="sns"] li a{opacity:0.9; display:block; width:21px; height:22px; background-repeat:no-repeat; background-position:50% 0; background-size:100%; font-size:0px; transition:0.3s ease}
[data-footer="sns"] li{margin-top:30px;}
[data-footer="sns"] li:first-child{margin-top:0px;}
[data-sns="instar"]{background-image:url(../images/common/icon_sns_instar.png);}
[data-sns="blog"]{background-image:url(../images/common/icon_sns_blog.png);}
[data-footer="sns"] li a:hover,
[data-footer="sns"] li a:focus{opacity:0.5;}

/* call && top */
.btn_round{opacity:0.5; position:absolute; right:80px; bottom:40px; z-index:35; display:block; width:60px; height:60px; line-height:56px; border-radius:100%; border:2px solid #fff; text-transform:uppercase; font-size:11px; letter-spacing:3px; text-align:center; color:#fff; transition:0.3s ease-in;}
.btn_round span{font-weight:bold; color:#fff;}
.btn_round:hover,
.btn_round:focus{opacity:1; background:#fff; color:#000;}
.btn_round:hover span,
.btn_round:focus span{color:#000;}
.btn_round.call{position:fixed; right:40px; z-index:26; border-color:#000; color:#000;}
.btn_round.call span{color:#000;}
.btn_round.call:hover,
.btn_round.call:focus{background:#000; color:#fff;}
.btn_round.call:hover span,
.btn_round.call:focus span{color:#fff;}

@media screen and (min-width:1025px){
	/* scrollbar */
	body{overflow-x:overlay;}
	::-webkit-scrollbar-track{background-color:transparent; border-radius:0; -webkit-box-shadow:none;}
	::-webkit-scrollbar{width:6px; height:6px; background-color:transparent; border-radius:0;}
	::-webkit-scrollbar-thumb{background-color:#000; border-radius:0;}
	
	/* firefox mac */
	.scrollx #wrap{overflow:hidden;}
}

@media screen and (max-width:1024px){
	body{overflow-y:auto; overflow-x:hidden;}
	#wrap .reponsive{display:block; height:0px; width:0px; font-size:0px;}
	#header .show_visual_text .btn_scroll{position:fixed; bottom:60px; transform:scale(0.8,0.8) rotate(90deg);}
	#header .show_visual_text .btn_scroll:after{right:50px;}
	.show_visual_text .btn_scroll{border-width:0px; box-shadow:none !important; transform:rotate(90deg);}
	.show_visual_text .btn_scroll span{font-size:16px; transform:rotate(-90deg);}
	.show_visual_text .btn_scroll:after{background-image:url(../images/common/img_arrow@x3.png);}
	#content .show_visual_text{transform:scale(0.8,0.8);}
	
	#header.active .show_visual_text h1,
	#header.active .show_visual_text P{opacity:0;}
	
	.btn_round{right:40px; bottom:80px;}
	.btn_round.call{bottom:40px;}
	
	#footer{width:100%; box-sizing:border-box; padding:0 15px; transform:rotate(0);}
	#footer p{padding-right:0px;}
	[data-footer="sns"]{margin-top:5px; padding-right:0px; transform:rotate(0);}
	[data-footer="sns"] li{display:inline-block; margin-left:20px; margin-top:0px;}
	[data-footer="sns"] li:first-child{margin-left:0px;}
	[data-footer="sns"] li a{margin-top:0px;}
	
	[data-sns="instar"]{background-image:url(../images/common/icon_sns_instar@x3.png);}
	[data-sns="blog"]{background-image:url(../images/common/icon_sns_blog@x3.png);}
}

@media screen and (max-width:768px){
	html, body{font-size:14px;}
	#header .show_visual_text .btn_scroll{opacity:0 !important;}
}

@media screen and (max-width:620px){
	#footer p{float:none; clear:left; padding-top:13px;}	
	.btn_round{right:20px; bottom:130px;}
	.btn_round.call{right:20px; bottom:20px;}
}

@media screen and (max-width:420px){
	.btn_round{bottom:140px;}
	#footer p{font-size:10px; letter-spacing:1px;}
}

@media screen and (max-width:320px){
	.btn_round{width:45px; height:45px; line-height:41px;}
	.btn_round span{letter-spacing:2px;}
}

/* motion */
@keyframes trackBallSlide{
  0%{opacity:1; transform:translateX(-20px);}
  8%{opacity:1; transform:translateX(5px);}
  14%{opacity:0; transform:translateX(25px);}
  15%, 19%{opacity:0; transform:translateX(-20px);}
  28%, 29.99%{opacity:1; transform:scale(1) translateX(-20px);}
  30%{opacity:1; transform:translateX(-20px);}
  36%{opacity:1; transform:translateX(5px);}
  44%{opacity:0; transform:translateX(25px);}
  45%, 49%{opacity:0; transform:translateX(-20px);}
  58%, 59.99%{opacity:1; transform:translateX(-20px);}
  60%{opacity:1; transform:translateX(-20px);}
  66%{opacity:1; transform:translateX(5px);}
  74%{opacity:0; transform:translateX(25px);}
  75%, 79%{opacity:0; transform:translateX(-20px);}
  88%, 100%{opacity:1; transform:translateX(-20px);}
}