* {
	margin:0 auto;
    padding: 0;
}

html {
	width:100%;
	height:99.9%;
    overflow:hidden;
}
body {
	width: 100%;
	overflow: hidden;
}
#content_wrap{
	width: 100%;
	height: 100%;
	overflow-x:hidden;
	overflow-y:auto;	
}
@font-face {
    font-family:url('\font\KoPubWorld Dotum Medium.ttf') format('truetype');
}

#loading{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-color: #c0c0b6;
    z-index: 100;
    display: block; 
}
#loading_logo{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 9%;
}
#loading_start{
    position: absolute;
    top: 44%;
    left: 50%;
    transform: translate(-50%,-50%);
    width: 20%;
    display: none;
    cursor: pointer;
}
#loading_airplain{
    position: absolute;
    top: 50%;
    left: -7%;
    width: 7%;
    display: none;
}
#loadingbar_bg{
    position: absolute;
    bottom: 0%;
    left: 50%;
    transform: translate(-50%,0%);
    width: 100%;
    filter: brightness(0.5);
    z-index: 101;
}
#loadingbar{
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: 100%;
    height: 40%;
    overflow: hidden;
    z-index: 102;
}
#loadingbar div{
    position: absolute;
    bottom: 0%;
    left: 0%;
    width: initial;
    overflow: hidden;
    z-index: 102;
}
#loadingbar div img{
    width: 100vw;
    overflow: hidden;
    z-index: 103;
}

#loading_re_bg{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    background-image: url(../img/loading/loading_re.jpg);
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    display: block;
    filter: grayscale(1);
}
#loading_re_text{
    position: absolute;
    bottom: 2%;
    left: 50%;
    width: 25vw;
    transform: translate(-50%,0%);
}
#loading_re_count{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: 700;
    font-size: 6vh;
    color: #fff;
}


.loader_round {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    border: 0.5vw solid #f3f3f3;
    border-radius: 50%;
    border-top: 0.5vw solid #000000;
    width: 1vw;
    height: 1vw;
    -webkit-animation: spin 2s linear infinite; /* Safari */
    animation: spin 2s linear infinite;
}

/* Safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

#loading_text{
    position: absolute;
    top: 40%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-size: 5vh;
	font-weight: 700;
    font-family: 'Noto Sans KR', sans-serif;
    text-align: center;
    color: white;
}
#fade_circle {
	display: block;
	width: 100%;
	height: 100%;
}
		.sk-fading-circle {
  			width: 22vh;
  			height: 22vh;
  			position: relative;
            top: 40%;
            left: 0%;
            transform: translate(0%, -50%);
		}

		.sk-fading-circle .sk-circle {
  			width: 100%;
  			height: 100%;
  			position: absolute;
  			left: 0;
  			top: 0;
		}

		.sk-fading-circle .sk-circle:before {
  			content: '';
  			display: block;
  			margin: 0 auto;
  			width: 11%;
  			height: 11%;
  			background-color: white;
  			border-radius: 100%;
  			-webkit-animation: sk-circleFadeDelay 1.3s infinite ease-in-out both;
          	animation: sk-circleFadeDelay 1.3s infinite ease-in-out both;
		}
		
		.sk-fading-circle .sk-circle2 {
  			-webkit-transform: rotate(30deg);
      		-ms-transform: rotate(30deg);
          	transform: rotate(30deg);
		}
		
		.sk-fading-circle .sk-circle3 {
  			-webkit-transform: rotate(60deg);
      		-ms-transform: rotate(60deg);
          	transform: rotate(60deg);
		}
		
		.sk-fading-circle .sk-circle4 {
  			-webkit-transform: rotate(90deg);
      		-ms-transform: rotate(90deg);
          	transform: rotate(90deg);
		}
		
		.sk-fading-circle .sk-circle5 {
  			-webkit-transform: rotate(120deg);
      		-ms-transform: rotate(120deg);
          	transform: rotate(120deg);
		}
		
.sk-fading-circle .sk-circle6 {
  -webkit-transform: rotate(150deg);
      -ms-transform: rotate(150deg);
          transform: rotate(150deg);
}
.sk-fading-circle .sk-circle7 {
  -webkit-transform: rotate(180deg);
      -ms-transform: rotate(180deg);
          transform: rotate(180deg);
}
.sk-fading-circle .sk-circle8 {
  -webkit-transform: rotate(210deg);
      -ms-transform: rotate(210deg);
          transform: rotate(210deg);
}
.sk-fading-circle .sk-circle9 {
  -webkit-transform: rotate(240deg);
      -ms-transform: rotate(240deg);
          transform: rotate(240deg);
}
.sk-fading-circle .sk-circle10 {
  -webkit-transform: rotate(270deg);
      -ms-transform: rotate(270deg);
          transform: rotate(270deg);
}
.sk-fading-circle .sk-circle11 {
  -webkit-transform: rotate(300deg);
      -ms-transform: rotate(300deg);
          transform: rotate(300deg); 
}
.sk-fading-circle .sk-circle12 {
  -webkit-transform: rotate(330deg);
      -ms-transform: rotate(330deg);
          transform: rotate(330deg); 
}
.sk-fading-circle .sk-circle2:before {
  -webkit-animation-delay: -1.2s;
          animation-delay: -1.2s; 
}
.sk-fading-circle .sk-circle3:before {
  -webkit-animation-delay: -1.1s;
          animation-delay: -1.1s; 
}
.sk-fading-circle .sk-circle4:before {
  -webkit-animation-delay: -1s;
          animation-delay: -1s; 
}
.sk-fading-circle .sk-circle5:before {
  -webkit-animation-delay: -0.9s;
          animation-delay: -0.9s; 
}
.sk-fading-circle .sk-circle6:before {
  -webkit-animation-delay: -0.8s;
          animation-delay: -0.8s; 
}
.sk-fading-circle .sk-circle7:before {
  -webkit-animation-delay: -0.7s;
          animation-delay: -0.7s; 
}
.sk-fading-circle .sk-circle8:before {
  -webkit-animation-delay: -0.6s;
          animation-delay: -0.6s; 
}
.sk-fading-circle .sk-circle9:before {
  -webkit-animation-delay: -0.5s;
          animation-delay: -0.5s;
}
.sk-fading-circle .sk-circle10:before {
  -webkit-animation-delay: -0.4s;
          animation-delay: -0.4s;
}
.sk-fading-circle .sk-circle11:before {
  -webkit-animation-delay: -0.3s;
          animation-delay: -0.3s;
}
.sk-fading-circle .sk-circle12:before {
  -webkit-animation-delay: -0.2s;
          animation-delay: -0.2s;
}

@-webkit-keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes sk-circleFadeDelay {
  0%, 39%, 100% { opacity: 0; }
  40% { opacity: 1; } 
}


#Explain {
    display: none;
    position: absolute;
    left: 50%;
    bottom: 69%;
    width: 50%;
    transform: translate3d(-50%,50%,0);
}
#Explain .Ex_panel{
    position: absolute;
    width: 100%;
    bottom: -20vw;
}
#ExplainBg{
    opacity: 0.7;
}
#ExplainTxt1{
    display: block;
}
#ExplainTxt1_1{
    display: none;
}
#close_Explain{
    position: absolute;
    width: 2vw;
    top: -10.5vw;
    right: -2.5vw;
    cursor: pointer;
}

#bt_skip{
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translate3d(-50%,0%,0);
    width: 4vw;
    cursor: pointer;
    display: none;
}
#bt_skip_ex{
    position: absolute;
    bottom: 3%;
    left: 50%;
    transform: translate3d(-50%,0%,0);
    width: 4vw;
    cursor: pointer;
    display: none;
}


#panel_UI{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80%;
    height: 80%;
    display: none;
    z-index: 1;
}
#panel_UI_bg_top{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 80vw;
    height: 20%;
    background-color: white;
}
#panel_UI_tab{
    position: absolute;
    bottom: 0%;
    left: 1%;
    height: 25%;
    width: 50%;
    z-index: 2;
}
#panel_UI_tab div{
    position: absolute;
    bottom: 0%;
    width: 25%;
    height: 70%;
    filter: drop-shadow(2px 4px 6px black);
    background-color: white;
    font-size: 1vw;
    font-family: 'NanumSquare', sans-serif !important;
    color: black;
    text-align: center;
    cursor: pointer;
}
#panel_UI_tab_0{
    left: 0%;
}
#panel_UI_tab_1{
    left: 27%;
}
#panel_UI_tab_2{
    left: 54%;
}
#panel_UI_tab_3{
    left: 81%;
}
#panel_UI_bg_bottom{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 80vw;
    height: 100%;
    background-color: white;
    opacity: 0.9;
}
#company_list_bg{
    width: 100%;
    height: 100%;
}
#panel_Title{
    position: absolute;
    top: 4%;
    left: 4.5%;
    width: 33%;
}
#company_list_x{
    position: absolute;
    top: 1%;
    right: -4%;
    width: 3%;
    cursor: pointer;
}
#company_list_x:hover{
    filter: invert(1);
}
#company_search_form{
    position: absolute;
    top: 6%;
    right: 4%;
    height: 6%;
    width: 26%;
}
#company_search_form img{
    position: absolute;
    top: 45%;
    right: 3%;
    width: 7%;
}

input[type=text], select {
    height: 100%;
    width: 100%;
    padding: 12px 12px;
    margin: 8px 0;
    display: inline-block;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-sizing: border-box;
}
#company_img{
    position: absolute;
    top: 22%;
    left: 51%;
    width: 96%;
    height: 72%;
    overflow: auto;
    transform: translate(-50%,0);
}
#company_img img{
    width: 17%;
    margin: 1% 1% 2% 1%;
}
.company_img_on{
    cursor: pointer;
}
.company_img_on:hover{
    filter: drop-shadow(2px 4px 6px black);
}
.company_img_none{
    filter: opacity(0.5);
    cursor: default;
}



#about_company_round {
    position: absolute;
    width: 38%;
    height: 90%;
    top: 5vh;
    left: 40vw;
    border-radius: 3% 3% 3% 3%;
    background-color: rgba(249,247,251,0.83);   
    display: none;
    
}

#about_company_top {
    position: fixed;
    margin-left: 2%;
    width: 35.2%;
    height: 15%;
    z-index: 100;
    background-color: rgba(249,247,251,0.5);
}
#about_company00 {
    width: 100%;
    height: 100%;
}
#about_company01 {
    position: absolute;
    width: 30vh;
    height: 15.2vh;
    left: 50%;
    top: 6vh;
    transform: translate(-50%,-50%);
    
}
#about_company01 img {
    width: 100%;
}

#about_company02 {
    position: absolute;
    height: 6vh;
    left: 50%;
    top: 17.4vh;
    transform: translate(-50%,-50%);
}

#about_company02 img {
    height: 100%;
    cursor: pointer;
}

#about_company_frame {
    width: 99.5%;
    height: 80%;
    margin-top: 15vh;
    z-index: auto;
    overflow-x: hidden;
    overflow-y: scroll;
    background-color: rgba(249,247,251,0);
    
}
#about_company_frame::-webkit-scrollbar {
  width: 1.3vh;
}
#about_company_frame::-webkit-scrollbar-thumb {
  background-color: rgb(218 209 228);
  border-radius: 1.2vh;
  background-clip: padding-box;
  border: 2px solid transparent;
}
#about_company_frame::-webkit-scrollbar-track {
  background-color: rgba(249,247,251,0.5);
  border-radius: 1.2vh;
  box-shadow: inset 0px 0px 5px white;
}
#about_company {
    position: relative;
    width: 100%;
    height: 100%;
    margin-left: 0vw;
    background-color: rgba(249,247,251,0);
}



#about_company_img {
    width: 100%;
    height: auto;
    margin-top: -31%;
}

#close_about {
    position: absolute;
    width: 6%;
    top: 2%;
    right: -10%;
    cursor: pointer;
}
#close_about:hover{
    filter:invert(1);
}

#about_company_img_bt_0{
    position: absolute;
    width: 32%;
    margin-top: 483%;
    left: 50%;
    transform: translate(-50%,0%);
    cursor: pointer;
}
#about_company_img_bt_0:hover{
    filter: hue-rotate(229deg);
}
#about_company_img_bt_1{
    position: absolute;
    width: 32%;
    margin-top: 855%;
    left: 50%;
    transform: translate(-50%,0%);
    cursor: pointer;
}
#about_company_img_bt_1:hover{
    filter: hue-rotate(229deg);
}
#about_company_img_bt_2{
    position: absolute;
    width: 32%;
    margin-top: 1087.5%;
    left: 50%;
    transform: translate(-50%,0%);
    cursor: pointer;
}
#about_company_img_bt_2:hover{
    filter: hue-rotate(229deg);
}

#company_info{
    position: absolute;
    top: 0%;
    left: 50%;
    width: 100%;
    height: 100%;
    overflow: auto;
    transform: translate(-50%,0);
    background-image: url(../img/model/feature_bg_bk.png);
    background-size: cover;
    z-index: 99;
    display: none;
}
#company_info_left{
    position: absolute;
    top: 50%;
    left: 25%;
    transform:translate(-50%, -50%);
    width: 150%;
    height: 100%;
    overflow: hidden;
}
#company_info_back{
    position: absolute;
    top: 2%;
    left: 1%;
    width: 3%;
    
    cursor: pointer;
    z-index: 101;
}
#company_info_back:hover{
    filter: invert(1);
}
#company_info_reset{
    position: absolute;
    bottom: 4%;
    left: 27%;
    width: 4%;
    cursor: pointer;
    z-index: 101;
}
#company_info_reset:hover{
    filter: invert(1);
}
#company_info_360{
    position: absolute;
    top: 60%;
    left: 21%;
    width: 15%;
    transform: translate(0%, -50%);
    z-index: 100;
    opacity: 0.6;
    
}
.company_info_img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-40%,-50%);
    width: 100%;
}
#company_info_right{
    position: absolute;
    top: 15%;
    right: 25%;
    transform:translate(50%, 0%);
    width: 40%;
    color: white;
    font-family: 'Open Sans';
}
#company_info_right div h1{
    font-size: 4vw;
    font-weight: bold;
}
#company_info_right div h2{
	padding-bottom: 1.5vw;
    font-size: 1.5vw;
    font-weight: normal;
}
#company_info_right div h3{
    font-size: 1vw;
    font-family: Lora;
    font-weight: normal;
}
#company_info_buttons{
    position: absolute;
    bottom: 5%;
    right: 20%;
    width: 14%;
    z-index: 101;
}
#company_info_buttons img{
    width: 19%;
    padding-right: 4%;
    cursor: pointer;
}
#company_info_buttons img:hover{
    filter: grayscale(0);
}
.company_info_button_select{
    filter: grayscale(1);
}
#company_info_touchPanel{
    position: absolute;
    top: 0%;
    left: 0%;
    width: 100%;
    height: 100%;
    z-index: 100;
    cursor: grab;
}

#booth_back{
    position: absolute;
    top: 1%;
    left: 1%;
    width: 3%;
    cursor: pointer;
    display: none;
}
#booth_back:hover{
    filter: invert(1);
}

#videoPanel{
    position: absolute;
    top : 50%;
    left: 50%;
    transform: translate(-50%, -50%);    
    width: 80%;
    display: none;
}
#videoPlayer{
    width: 100%;
}
#closeBtn{
    position: absolute;
    top: 0%;
    right: -3%;
    width: 2.5%;
    
}
#closeBtn:hover{
    filter: invert(1);
}

#mouseRound{
	display: none;
	position: absolute;
	z-index: 0;
}
#mouseRound2{
	display: none;
	position: absolute;
	z-index: 0;
}


@media screen and (max-width: 768px) {
	body {
		height: 100%;
	}
	
    #loading_logo{
        width: 20%;
    }
    #loading_text{
        width: 70%;
    }
    #loading_start{
        width: 50%;
    }
    #loading_airplain{
        width: 15%;
    }
    #loading_re_bg{
	    position: absolute;
	    top: 0%;
	    left: 0%;
	    width: 100%;
	    height: 100%;
	    background-image: url(../img/loading/loading_re.jpg);
	    background-position: center;
	    background-repeat: no-repeat;
	    background-size: 400%;
	    display: block;
	    filter: grayscale(1);
    }
    #bt_skip{
        width: 8vw;
    }
    #bt_skip_ex{
        width: 8vw;
    }
    #panel_Title{
        top: 3%;
        left: 6%;
        width: 50%;
    }
    #company_list_x{
        top: 0%;
        right: -9%;
        width: 7%;
    }
    #company_search_form{
        top: 1%;
        right: 4%;
        height: 4%;
        width: 26%;
    }
    #panel_UI{
        
    }
    #company_search_form img{
        top: 70%;
        right: 3%;
        width: 15%;
    }
    
    #panel_UI_bg_top{
        height: 10%;
    }
    
    #company_info{
    position: absolute;
    top: 0%;
    left: 50%;
    width: 101%;
    height: 100%;
    overflow: auto;
    transform: translate(-50%,0%);
    background-image: url(../img/model/feature_bg_bk3.png);
    background-size: cover;    
    z-index: 99;
    display: none;
    }
    
    #company_info_left {
        top: 30%;
        left: 40.5%;
        width: 100%;
    }
    
    #company_info_right{
    position: absolute;
    top: 60.5%;
    right: 47%;
    transform:translate(50%, 0%);
    width: 85%;
    color: white;
    font-family: 'Open Sans';
    }
    #company_info_right div h1 {
    font-size: 7vw;
    font-weight: bold;
    }
    #company_info_right div h2 {
    padding-bottom: 1.5vw;
    font-size: 5vw;
    font-weight: normal;
    }
    #company_info_right div h3 {
    padding-bottom: 1.5vw;
    font-size: 3.5vw;
    font-weight: normal;
}
    #company_info_buttons{
    position: absolute;
    bottom: 3%;
    right: 38%;
    width: 23%;
    z-index: 101;
    }
    #company_info_buttons img{
    width: 17%;
    padding-right: 1%;
    cursor: pointer;
    }
    #company_info_360{
    position: absolute;
    top: 35%;
    left: 30%;
    width: 40%;
    transform: translate(0%, -50%);
    z-index: 100;
    opacity: 0.6;
    }
    #company_info_back {
    position: absolute;
    top: 2%;
    left: 1%;
    width: 15%;
    cursor: pointer;
    z-index: 101;
    }
    #company_info_reset{
    position: absolute;
    bottom: 44%;
    left: 38%;
    width: 20%;
    cursor: pointer;
    z-index: 101;
    }
    #company_img{
        top: 12%;
        left: 50%;
        width: 80%;
        height: 80%;
    }
    #company_img img{
        padding-bottom: 2%;
        width: 45%;
    }
    #Explain {
        bottom: 50%;
        width: 85%;
    }
    #close_Explain{
        width: 5vw;
        top: -31.5vw;
        right: -6vw;
    }
    #about_company_round{
        width: 100%;
        height: 100%;
        top: 0%;
        left: 0%;
    }
    #about_company_frame {
        width: 100%;
        height: 96%;
        margin-top: 2vh;

    }

    #about_company {
        width: 100%;
        margin-left: 0vw;
    }

    #about_company_top {
        width: 100%;
        height: 15%;
    }

    #about_company01 {
        width: 30vh;
        height: 15.2vh;
        top: 5vh;
    }
    #about_company02 {
        height: 6vh;
        top: 17.4vh;
    }
    #about_company_img {
        width: 100%;
        margin-top: 0%;
    }
    
    /*紐⑤컮�씪 踰꾪듉 �닔�젙遺�遺꾩엯�땲�떎.*/
    #about_company_img_bt_0 {
  		margin-top: 513%;
    }
    #about_company_img_bt_1 {
   		margin-top: 885%;
    }
    #about_company_img_bt_2 {
        margin-top: 1117.5%;
    }
    
    #close_about {
        position: fixed;
        width: 8%;
        margin-left: 0%;
        margin-bottom: 0%;
        top: 2%;
        right: 5%;
        filter: invert(0.2);
    }
    #close_about:hover{
        filter:invert(0.2);
    }
}