html, body, div {
    margin: 0; border: 0;
}

    /*스크롤 설정*/
    html {
    scrollbar-arrow-color: #efefef;
    scrollbar-Track-Color: #efefef;
    scrollbar-base-color: #dfdfdf;
    scrollbar-Face-Color: #dfdfdf;
    scrollbar-3dLight-Color: #dfdfdf;
    scrollbar-DarkShadow-Color: #dfdfdf;
    scrollbar-Highlight-Color: #dfdfdf;
    scrollbar-Shadow-Color: #dfdfdf;

    }
    
    body{
        overflow-x:hidden; overflow-y:auto;
    
    }
    
    /* Chrome, Safari용 스크롤 */
    ::-webkit-scrollbar {
        width: 12px;
        height: 12px;
    }

    ::-webkit-scrollbar-button:start:decrement,
    ::-webkit-scrollbar-button:end:increment {
        display: none;
        width: 12px;
        height: 12px;
        background: rgba(0,0,0,.05);
    }
    ::-webkit-scrollbar-track {
        background: var(--gray-Brighter);
    }
    ::-webkit-scrollbar-thumb {
        background: var(--gray-darkish);
    }


#main_page header{
    z-index:100;
    position:fixed;
    width: calc(100% - 90px);

    padding: 27px 45px;
    z-index: 400;
}

#header_dropdwon_btn,
#login_popup_showBtn{
	display: none;
}


footer{
    font-family: "TRGothic240A";
    font-weight: lighter;
    background-color: var(--gray-light);
    padding:40px;
    color: #B3B3B3;
    

    bottom: 0px; 
    width: calc(100% - 80px);
}

.bodyFix footer{
	position: absolute;
	bottom: 0px; 
}


/*메인페이지만 적용*/
#main_page > footer {
	position: static; 
	bottom:inherit;
}




#logo{
    float:left;
    display:inline-block;
    width : 217px;
    height: 48px;
    fill: #fff;
}


#login_popup_btn{
    height: 44px;
    width: 44px;
    cursor: pointer;
    fill:#fff;
}

#login_popup_btn:hover, #logo:hover{
    fill:var(--main-color);
}

.header_btn{
    float: right;
    cursor: pointer;
}

.header_btn .svg_icon_background{
    fill: #fff;
}
.header_btn .svg_icon_path{
    fill :var(--main-color);
}

.header_btn:hover .svg_icon_background{
    fill :var(--main-color-darkish);
}

.header_btn:hover .svg_icon_path{
    fill:#fff;
}


.dropdown_btn:hover .menu_group{
    display: block;

}

.dropdown_btn_support{
    opacity: 0;
}

.menu_group{
    position: fixed;
    display: none;
    font-size: 0px;

}

.dropdown_btn ul{
	margin:0px;
	list-style-type: none;
	
	list-style-image: none;
}

.menu_list .icon_background{
    fill:var(--gray-Brighter);
}

.menu_list .icon_path{
    fill:var(--gray-darker);
}
.menu_list:hover .icon_background{
    fill:var(--main-color-darkish);
}
.menu_list:hover .icon_path{
    fill:#fff;
}

#top_btn{
    z-index:100;
    position:fixed;
    bottom:45px;
    right:40px;
    cursor: pointer;
}



#top_btn .icon_background{
    fill:var(--main-color);
}

#top_btn .icon_path{
    fill:#fff;
}

#top_btn:hover  .icon_background{
    fill:#fff;
}

#top_btn:hover  .icon_path{
    fill:var(--main-color);
}



#main_section{

}

#video_wrapper{
    background-color: var(--main-color);
    height: 100vh;
    padding: 0;
    position: relative;
    overflow: hidden;
}

#video_mask{
    background-color: rgba(0,0,0,0.1);
    position: absolute;
    top: 0;
    left: 0;
    /*color:rgba(90,90,90,1);*/
    width: 100%;
    height: 100%;
    z-index: 2;
}

#main_video{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 1;


}
@media (min-aspect-ratio: 16 / 9) {
    #main_video {
        height:300%;
        top: -100%;

    }
}

@media (max-aspect-ratio: 16 / 9) {
    #main_video {
        width:400%;
        left: -150%
    }
}

#main_sentence_row{
    position: absolute;
    top: 0;
    left: 0;
    display: flex;
    flex-flow:row;
    align-items:center;
    z-index: 10;
    position: absolute;
    width: 100%;
    height: 100%;

}
#main_sentence_column{
    display: flex;
    flex-flow:column;
    align-items:center;
    width: 100%;
    color: #fff;
    font-size: 48px;

}

#main_sentence_column span{
    margin-bottom: 30px;
    font-family: 'TRGothic240A';

}

#circuitPageBtn,
#samplePageBtn{
    width:150px;
    height:30px;
    margin-top:10px;
    border-radius: 8px;
    padding-top: 18px;
    padding-bottom: 8px;
    cursor: pointer;

    font-family: "Nanum Square bold";
    letter-spacing:1px;
    text-align: center;
    font-size: 20px;
    color: #fff;
    background-color: var(--main-color);
    
}

#samplePageBtn{
    background-color: #EC4466;
}

#circuitPageBtn:hover{
    color: var(--main-color);
    background-color: #fff;

}

#samplePageBtn:hover{
    color: #EC4466;
    background-color: #fff;
}


#descriptions article{
    margin-left: 10%;
    margin-right: 10%;
    
	margin-top:4vw;
	margin-bottom:4vw;
	

}

#descriptions article img{
	width: 100%; 
}

#descriptions article .main_descriptions{
	
	
	
	display:table;
	font-family: 'TRGothic240A';
	
	text-align:center;
	   
	max-width: 1020px;
	margin:auto;

	color: rgba(90,90,90,0.95);

	
}
#descriptions article .main_descriptions .main_descriptions_text{
	
	margin: 10px 0px;
	text-align: left;
	
}

#descriptions article .main_descriptions .main_descriptions_title{

	font-size: 4.4vw ;
	margin-bottom: 1vw;

}

#descriptions article .main_descriptions .main_descriptions_context{
	
	padding-left: 2vw;
	
	color: #4e4e4e;
	font-size: 1.8vw ;
	width:100%;
	line-height: 3.5vw;;

}




.hilight{
  	padding-left: 0.15em;
    margin-left: -0.15em;
    padding-right: 0.15em;
    margin-right: -0.15em;
    padding-bottom: 0.3em;
    padding-top: 0.45em;
}

.blue-hilight{
	background-image: linear-gradient(white, white 0.6em, transparent 0.6em, transparent), 
							linear-gradient(to top, white, white 0.5em, transparent 0.5em, transparent), 
							linear-gradient(to right, #caddf7,
							#caddf7 100%, 
							transparent 100%, 
							transparent);
}

.yellow-hilight{
	background-image: linear-gradient(white, white 0.6em, transparent 0.6em, transparent), 
							linear-gradient(to top, white, white 0.5em, transparent 0.5em, transparent), 
							linear-gradient(to right, #ffc67c,
							#ffc67c 100%, 
							transparent 100%, 
							transparent);
}

.red-hilight{
		background-image: linear-gradient(white, white 0.6em, transparent 0.6em, transparent), 
							linear-gradient(to top, white, white 0.5em, transparent 0.5em, transparent), 
							linear-gradient(to right, #f7acbb,
							#f7acbb 100%, 
							transparent 100%, 
							transparent)
}

#descriptions article .main_descriptions .main_descriptions_img {
	
	margin: 20px 0px;

}


/*float 정렬*/
.float_left{
    float:left;
}
.float_right{
    float:right;
}

.text_select_prevent{
    /*text select prevent*/
    -webkit-touch-callout:none;
    -webkit-touch-select:none;
    -ms-user-select:none;
    -moz-user-select:none;
    -webkit-user-select:none;
    -user-select:none;
    -webkit-tap-highlight-color:rgba(0,0,0,0)
}


/* svg symbole*/

.symbolSide{
		width: 0px;
		height: 0px;
		display: none;
}

/* logrinForm page*/


.loginForm_box_wrapper{

	position:absolute;
	
	left: calc(50% - 188px);
	top:calc(50% - 163px - 152px);
}

@media print {body{display:none}}