@charset "utf-8"; 

html	{height:100%}
body	{overflow:hidden; height:100%}
#wrapper	{height:100%}
#wrapper #container	{height:100%}
.content	{height:100%}

#app {height:100%}
#wrapper #header h1 a	{}

/* layout */
#wrapper #header.op	{background:rgba(251, 251, 251, 0.8)}
#wrapper #container	{padding:0}
#wrapper #container .content	{padding:0; max-width:100%; font-family:'맑은 고딕','AppleGothic','돋움','Dotum', sans-serif;}

#wrapper #footer		{position:fixed; right:0; bottom:0; left:0; height:0; background:rgba(251, 251, 251, 0.8); -webkit-transition: height 1.0s cubic-bezier(0.700, 0.300, 0.200, 1.000); -moz-transition: height 1.0s cubic-bezier(0.700, 0.300, 0.200, 1.000); -ms-transition: height 1.0s cubic-bezier(0.700, 0.300, 0.200, 1.000); -o-transition: height 1.0s cubic-bezier(0.700, 0.300, 0.200, 1.000); transition: height 1.0s cubic-bezier(0.700, 0.300, 0.200, 1.000)}
#wrapper #footer.on	{height:155px}
#wrapper #footer .footer_wrap .foot_menu	{display:none}

#wrapper #footer .foot_util ul li:nth-child(2):after	{display:block}
#wrapper #footer .foot_util ul li:first-child	{display:inline-block}
#wrapper #footer .foot_util ul li:last-child	{display:inline-block}

/* Main */
.side_slide	{position:relative; width:100%; height:100%}
.side_slide .bx-wrapper	{overflow:hidden; position:absolute; top:0; bottom:0; left:0; width:50%; height:100% !important}
.side_slide .bx-wrapper .bx-viewport	{width:200% !important; height:100% !important}
.side_slide .bx-wrapper .bx-viewport .slide_wrap	{height:100% !important}

.side_slide .bx-wrapper.slideR	{right:0; left:auto}
.side_slide .bx-wrapper.slideR .bx-viewport	{float:right}

.side_slide .slide_wrap li	{height:100%}
.side_slide .slide_wrap li .img	{display:block; height:100%}
.side_slide .slide_wrap li .desc	{display:none}

.info_wrap	{display:none; position:fixed; left:90px; bottom:90px}
.info_wrap .logo	{display:block; margin:0 0 15px 5px; width:48px; height:55px; background:url('/images/common/icon_simbol.svg') no-repeat 0 0; background-size:48px auto;}
.info_wrap div {min-height:32px; padding:13px 9px 0 0; border-top:1px solid #fff; line-height:14px;}
.info_wrap div a	{display:inline-block; margin:0 -2px; padding:2px; color:#fff; font-size:12px; font-family:'Courier New', 'Courier', 'Arial', sans-serif; line-height:10px; letter-spacing:3px}
.info_wrap div a:hover	{background:#000}


.key_wrap	{position:fixed; bottom:30px; left:50%; margin-left:-27px; width:53px; height:70px}
.key_wrap .txt	{display:block; margin:0 -10px; padding-top:34px; color:#ff3c00; font-size:12px; line-height:30px; text-align:center}
.key_wrap button		{display:block; position:absolute; width:17px; height:17px}
.key_wrap .key_up		{top:0; left:18px; background:url('/images/content/key_up_white.svg') no-repeat 0 0; background-size:17px 17px;}
.key_wrap .key_right	{top:18px; right:0; background:url('/images/content/key_dump_white.svg') no-repeat 0 0; background-size:17px 17px;}
.key_wrap .key_down	{top:18px; left:18px; background:url('/images/content/key_down_white.svg') no-repeat 0 0; background-size:17px 17px;}
.key_wrap .key_left		{top:18px; left:0; background:url('/images/content/key_dump_white.svg') no-repeat 0 0; background-size:17px 17px;}

.key_wrap .key_up:hover		{background:url('/images/content/key_up_ov.svg') no-repeat 0 0; background-size:17px 17px;}
.key_wrap .key_right:hover	{background:url('/images/content/key_dump_white.svg') no-repeat 0 0; background-size:17px 17px;}
.key_wrap .key_down:hover	{background:url('/images/content/key_down_ov.svg') no-repeat 0 0; background-size:17px 17px;}
.key_wrap .key_left:hover		{background:url('/images/content/key_dump_white.svg') no-repeat 0 0; background-size:17px 17px;}




@media screen and (max-width:736px){
	/* layout */
	#wrapper #container .content	{margin:0}
	#wrapper #footer.on	{height:215px}
	#wrapper #footer .foot_util ul li:nth-child(2)	{padding: 0 8px;}

	.side_slide .slide_wrap li .logo	{margin:-37px 0 0 -32px; width:64px; height:75px; background-size:64px auto}

	.info_wrap	{left:18px; bottom:70px}
	.info_wrap div {padding:12px 9px 0 0; min-width:135px; min-height:24px; font-size:10px; line-height:8px;}
	.info_wrap div a	{font-size:10px; line-height:8px; letter-spacing:0px}

}