body {
	margin: 0;
	height: 100%;
	font-family:'Malgun Gothic', dotum, sans-serif;
	overflow: hidden;
	overscroll-behavior: none;
}

a {
	color: #ff0;
	text-decoration: none;
}

a:hover {
	text-decoration: underline;
}

button {
	cursor: pointer;
	text-transform: uppercase;
}

a, button, input, select {
	pointer-events: auto;
}

/* loading bar */
#loading-screen {
	position: absolute;
	z-index: 2;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color: #000000;
	opacity: 1;
 	transition: 1s opacity;
}
			
#loading-screen.fade-out {
    opacity: 0;
}
			
#loader {
    display: block;
    position: relative;
    left: 50%;
    top: 50%;
    width: 150px;
    height: 150px;
    margin: -75px 0 0 -75px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #9370DB;
    -webkit-animation: spin 2s linear infinite;
    animation: spin 2s linear infinite;
}
			
#loader:before {
    content: "";
    position: absolute;
    top: 5px;
    left: 5px;
    right: 5px;
    bottom: 5px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #BA55D3;
    -webkit-animation: spin 3s linear infinite;
    animation: spin 3s linear infinite;
}
			
#loader:after {
    content: "";
    position: absolute;
    top: 15px;
    left: 15px;
    right: 15px;
    bottom: 15px;
    border-radius: 50%;
    border: 3px solid transparent;
    border-top-color: #FF00FF;
    -webkit-animation: spin 1.5s linear infinite;
    animation: spin 1.5s linear infinite;
}
			
@-webkit-keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    	}
	}
			
@keyframes spin {
    0%   {
        -webkit-transform: rotate(0deg);
        -ms-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    100% {
        -webkit-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
        transform: rotate(360deg);
    	}
	}

/* control_btns */
#cnt {position:absolute; width:270px; bottom:15px; left:50%; transform: translateX(-50%)}
.cnt_full_0 {color:#666666; font-size:24px; cursor:pointer}
.cnt_full_0:hover {color:#171717;}
			
.cnt_full_1 {color:#666666; font-size:24px; margin-right:-3px; cursor:pointer}
.cnt_full_1:hover {color:#171717;}
			
.cnt_full_2 {color:#666666; font-size:24px; margin-right:-3px; cursor:pointer}
.cnt_full_2:hover {color:#171717;}
			
.cnt_full_3 {color:#666666; font-size:24px; margin-right:-3px; cursor:pointer}
.cnt_full_3:hover {color:#171717;}
			
.cnt_full_4 {color:#666666; font-size:24px; margin-right:-3px; cursor:pointer}
.cnt_full_4:hover {color:#171717;}
			
.cnt_full_4a {color:#666666; font-size:24px; margin-right:-3px; cursor:pointer;}
.cnt_full_4a:hover {color:#171717;}
			
.cnt_full_5 {color:#666666; font-size:24px; margin-right:-3px; cursor:pointer}
.cnt_full_5:hover {color:#171717;}
	
.icon-background1 {
	color: #cacaca;
}	
			
/* control_btn_title */
#cnt_tit_1 {position:absolute; top:-30px; left:-3px; width:50px; height:25px; color:#ffffff; border-radius:4px; background:#979797; line-height:25px; font-size:12px; text-align:center; text-shadow: 1px 1px black; display:none;}
#cnt_tit_2 {position:absolute; top:-30px; left:32px; width:70px; height:25px; color:#ffffff; border-radius:4px; background:#979797; line-height:25px; font-size:12px; text-align:center; text-shadow: 1px 1px black; display:none;}
#cnt_tit_2a {position:absolute; top:-30px; left:32px; width:70px; height:25px; color:#ffffff; border-radius:4px; background:#979797; line-height:25px; font-size:12px; text-align:center; text-shadow: 1px 1px black; display:none;}
#cnt_tit_3 {position:absolute; top:-30px; left:67px; width:90px; height:25px; color:#ffffff; border-radius:4px; background:#979797; line-height:25px; font-size:12px; text-align:center; text-shadow: 1px 1px black; display:none;}
#cnt_tit_4 {position:absolute; top:-30px; left:122px; width:70px; height:25px; color:#ffffff; border-radius:4px; background:#979797; line-height:25px; font-size:12px; text-align:center; text-shadow: 1px 1px black; display:none;}
#cnt_tit_5 {position:absolute; top:-30px; left:167px; width:70px; height:25px; color:#ffffff; border-radius:4px; background:#979797; line-height:25px; font-size:12px; text-align:center; text-shadow: 1px 1px black; display:none;}
#cnt_tit_6 {position:absolute; top:-30px; right:-4px; width:50px; height:25px; color:#ffffff; border-radius:4px; background:#979797; line-height:25px; font-size:12px; text-align:center; text-shadow: 1px 1px black; display:none;}
	
/* control_hide_btn */	
#cnt1 {position:absolute; width:50px; bottom:15px; left:50%; transform: translateX(-50%); display:none}
.cnt_full_0a {color:#666666; font-size:24px; cursor:pointer}
.cnt_full_0a:hover {color:#171717;}
			
/* control_hide_btn_title */			
#cnt_tit_6a {position:absolute; top:-30px; right:-4px; width:50px; height:25px; color:#ffffff; border-radius:4px; background:#979797; line-height:25px; font-size:12px; text-align:center; text-shadow: 1px 1px black; display:none;}
	
	
/* color_change */	
#l_menu_open {position:absolute; margin-top:1px; margin-left:12px; font-size:24px; color:#666666; cursor:pointer}
#l_menu_open:hover {color:#171717;}
			
#l_menu {position:absolute; background:#000000; height:100%; overflow: hidden;}
.l_menu_clsoe {text-align:right; color:#818181; padding-right:5px; padding-bottom:3px; cursor:pointer}
.l_menu_01 {display:flex; background:#283039; margin-bottom:2px}
.l_menu_01_tit {text-align:center; background:#000000;}
.l_menu_01_tit_in {padding:9px 10px; background:#283039;}
.l_menu_01_tit_img {padding:0px; margin:0px;}
.l_menu_01_tit_tit {color:#ffffff; font-size:12px; line-height:16px; padding:0px; margin:0px;}
			
.l_menu_01_con {text-align:center; background:#283039; color:#b2b2b2; font-size:12px; line-height:18px;}
.l_menu_01_con p {margin: 10px 15px; padding:0px;}
.l_menu_01_con input {border:0px; cursor:pointer;}
			
.l_menu_02 {display:flex; background:#283039; height:100%;}
.l_menu_02_tit {text-align:center; background:#000000;}
.l_menu_02_tit_in {padding:9px 10px; width:48px; background:#283039;}
.l_menu_02_tit_in1 {padding:9px 10px; width:48px; background:#1d2227; cursor:pointer}
.l_menu_02_tit_img {padding:0px; margin:0px;}
.l_menu_02_tit_tit {color:#ffffff; font-size:12px; line-height:16px; padding:0px; margin:0px;}
.l_menu_02_tit_tit1 {color:#b2b2b2; font-size:12px; line-height:16px; padding:0px; margin:0px;}

.l_menu_02_tit1 {text-align:center; background:#000000; display:none}
.l_menu_02_tit1_in {padding:9px 10px; width:48px; background:#1d2227; cursor:pointer}
.l_menu_02_tit1_in1 {padding:9px 10px; width:48px; background:#283039;}
.l_menu_02_tit1_img {padding:0px; margin:0px;}
.l_menu_02_tit1_tit {color:#ffffff; font-size:12px; line-height:16px; padding:0px; margin:0px;}
.l_menu_02_tit1_tit1 {color:#b2b2b2; font-size:12px; line-height:16px; padding:0px; margin:0px;}
			
.l_menu_02_con {text-align:center; background:#283039; color:#b2b2b2; font-size:12px; line-height:18px; height:100%; }	
.l_menu_03_con {text-align:center; background:#283039; color:#b2b2b2; font-size:12px; line-height:18px; height:100%; display:none}

#r_menu_open {position:absolute; right:0px; margin-top:1px; margin-right:12px; font-size:24px; color:#666666; cursor:pointer}
#r_menu_open:hover {color:#171717;}

#r_menu {position:absolute; right:0px; background:#000000; height:100%; overflow: hidden;}
.r_menu_clsoe {background:#283039; color:#818181; padding-left:5px; padding-bottom:3px; cursor:pointer}
.r_menu_tit {color:#ffffff; font-size:14px; line-height:14px; text-align:center; font-weight:bold; padding:12px 2px 8px 2px;}
.r_menu_tit_line {height:1px; width:80%; background:#555555; margin:0 auto;}
.r_menu_01 {margin-top:8px; margin-bottom:2px}
.r_menu_01_tit {text-align:center; background:#000000;}
.r_menu_01_tit_in {padding:9px 10px; width:60px;}
.r_menu_01_tit_in1 {padding:9px 10px; width:60px; cursor:pointer}
.r_menu_01_tit_img {padding:0px; margin:0px;}
.r_menu_01_tit_tit {color:#ffffff; font-size:12px; line-height:16px; padding:0px; margin:0px;}
.r_menu_01_tit_tit1 {color:#b2b2b2; font-size:12px; line-height:16px; padding:0px; margin:0px;}

.r_menu_02 {margin-top:8px; margin-bottom:2px; display:none}
.r_menu_02_tit {text-align:center; background:#000000;}
.r_menu_02_tit_in {padding:9px 10px; width:60px;}
.r_menu_02_tit_in1 {padding:9px 10px; width:60px; cursor:pointer}
.r_menu_02_tit_img {padding:0px; margin:0px;}
.r_menu_02_tit_tit {color:#ffffff; font-size:12px; line-height:16px; padding:0px; margin:0px;}
.r_menu_02_tit_tit1 {color:#b2b2b2; font-size:12px; line-height:16px; padding:0px; margin:0px;}

.r_menu_03 {margin-bottom:2px}
.r_menu_03_tit {text-align:center; background:#000000;}
.r_menu_03_tit_in {padding:9px 10px; width:60px;}
.r_menu_03_tit_in1 {padding:9px 10px; width:60px; cursor:pointer}
.r_menu_03_tit_img {padding:0px; margin:0px;}
.r_menu_03_tit_tit {color:#ffffff; font-size:12px; line-height:16px; padding:0px; margin:0px;}
.r_menu_03_tit_tit1 {color:#b2b2b2; font-size:12px; line-height:16px; padding:0px; margin:0px;}

.r_menu_04 {margin-bottom:2px; display:none}
.r_menu_04_tit {text-align:center; background:#000000;}
.r_menu_04_tit_in {padding:9px 10px; width:60px;}
.r_menu_04_tit_in1 {padding:9px 10px; width:60px; cursor:pointer}
.r_menu_04_tit_img {padding:0px; margin:0px;}
.r_menu_04_tit_tit {color:#ffffff; font-size:12px; line-height:16px; padding:0px; margin:0px;}
.r_menu_04_tit_tit1 {color:#b2b2b2; font-size:12px; line-height:16px; padding:0px; margin:0px;}
	
/* texture_change */	
#info1 {
	display: block;
	text-align: center;
	max-height:60%;
	overflow-y: auto;
	z-index: 1; /* TODO Solve this in HTML */
}
			
#info1::-webkit-scrollbar {
	width: 15px;
}
#info1::-webkit-scrollbar-thumb {
	background-color: #a9acb0;
}
#info1::-webkit-scrollbar-track {
	background-color: #535961;
}

#info1 p {
	cursor:pointer;
	padding:0px;
	margin: 10px 15px;
}

#info1 p:hover {color:#ffffff;}

#info1 img {display: block; border: 1px solid #000000; margin:0px}

/* shape_change */	
#info2 {
	display: block;
	max-height:80%;
	overflow-y: auto;
	z-index: 1; /* TODO Solve this in HTML */
}
			
#info2::-webkit-scrollbar {
	width: 15px;
}
#info2::-webkit-scrollbar-thumb {
	background-color: #a9acb0;
}
#info2::-webkit-scrollbar-track {
	background-color: #535961;
}
			
/* guide_popup */
#timer { display:none;}

/* form mail */
#room_type {position:absolute; width:100%; height:100%; background-color:rgba( 30, 30, 30, 0.5 ); z-index:99999}
#m_close {position:absolute;top:0px;right:0px;background-color:#1e1e1e;padding:10px;z-index:101}
#m_close a {color:#ccc;}
.m_con {width:100%; height:100%; margin:0px auto; text-aling:center;z-index:100}
.resp-iframe {position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); width:80%; height:80%; border:0;}

.x { position:relative; background:#CCC; width:30px; height:30px; cursor:pointer}
.x b{ position:absolute; border:solid 15px rgba(255,255,255,0); }
.x b:nth-child(1){ border-top-color:#1e1e1e; top:-2px; }
.x b:nth-child(2){ border-left-color:#1e1e1e; left:-2px; }
.x b:nth-child(3){ border-bottom-color:#1e1e1e; bottom:-2px; }
.x b:nth-child(4){ border-right-color:#1e1e1e; right:-2px; }

/* guide_img */
#room_type1 {position:absolute; width:100%; height:100%; background-color:rgba( 30, 30, 30, 0.5 ); z-index:99999}
#room_type2 {position:absolute; width:100%; height:100%; background-color:rgba( 30, 30, 30, 0.5 ); z-index:99999}
.m_con img {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); max-width:100%; height:auto;}