@import url(http://fonts.googleapis.com/css?family=Open+Sans:300,400,500,600,700,800);

.darkmode_on{ display: none;}

/* 안쓰이는듯 삭제예정
.down {
    background-color:rgba(0,0,0,.8);
    -webkit-transition-duration:0.4s;
    -webkit-transition-timing-function:ease;
    transition-duration:0.4s;
    transition-timing-function:ease;
}
*/

/*::-webkit-scrollbar{ display: none;}   .type2::-webkit-scrollbar{*/

/* 스크롤바 설정*/
body::-webkit-scrollbar{
    width: 6px;   
    background: transparent; 
}

/* 스크롤바 막대 설정*/
::-webkit-scrollbar-thumb{  
    background-color: #ddd;
    -border-radius: 10px;
    background-clip: padding-box;
    border: 1px solid transparent;
}

::-webkit-scrollbar-thumb:hover{
    -border: 0px solid transparent;
    background-color: rgb(211, 191, 12);
}

/* 스크롤바 뒷 배경 설정*/
::-webkit-scrollbar-track{
    background-color: rgba(0,0,0, 1);

    -border-radius: 10px;
    box-shadow: inset 5px 0px 5px rgba(15,15,15, 0.3);

    
}





/*thumbnail img _ colorchip*/
.color_chip{ display: none !important;}

.b{border: 1px dotted forestgreen;} 
*,
*::before,
*::after {
  box-sizing: border-box;
}
.hide{ display: none;}

.fw-300{ font-weight: 300;}
.fw-400{font-weight: 400;}
.fw-500{font-weight: 500;}
.fw-600{font-weight: 600;}
.fw-700{font-weight: 700;}
.fw-800{font-weight: 800;}


.z-0{ z-index:0 ;}
.z-1{ z-index:20 ;}
.z-2{z-index:50}
.z-3{z-index:80}
.z-4{z-index:90}
.z-5{z-index:100 ;}
.z-6{z-index:300}
.z-7{z-index:400}
.z-8{z-index:600}
.z-9{z-index:800}
.z-10{z-index:1000}
h1{ font-size:5rem ;;}
h2{ font-size:4.5rem ;}
h3{ font-size: 4rem;}
h4{ font-size: 3rem;}
h5{ font-size:2.1rem ;}
h6{ font-size:1.1rem ;}



a{ color: var(--ho-black);}
*{padding: 0; margin: 0;  text-decoration: none; list-style: none;}
:root {
    --ho-display-1:7rem ;
    --ho-display-2:5.5rem ; 
    --ho-display-4:2.8rem ; 
    --ho-display-5:2rem ;
    --ho-display-6:1.7rem ;
    --ho-display-7:1rem ;
    --ho-display-8:0.85rem ;
    --ho-head-5:2.1rem ;
    --ho-head-6:1.1rem ;

    --ho-black-opacity:rgba(0,0,0,0);
    --ho-black:#000;
    --ho-white:#fff;
    --ho-gray-100: #f8f9fa;
    --ho-gray-200: #e9ecef;
    --ho-gray-300: #dee2e6;
    --ho-gray-400: #ced4da;
    --ho-gray-500: #adb5bd;
    --ho-gray-600: #6c757d;
    --ho-gray-700: #495057;
    --ho-gray-800: #343a40;
    --ho-gray-900: #212529;

    --ho-font-family: 'Open Sans',sans-serif;
    --ho-font-size:16px;
    --ho-font-weight:400;
    --ho-line-height:1.5;
    --ho-text-align:center;
    --ho-color:var(--ho-black);
    --ho-bg: :var(--ho-white);   

    --ho-col-lg: 960px;
    --ho-col-md: 720px;
    --ho-col-sm: 540px;
    --ho-col-xs: none;
}




body{
    margin: 0;
    padding: 0;
    font-family: var(--ho-font-family);
    font-size: var(--ho-font-size);
    font-weight: var(--ho-font-weight);
    line-height: var(--ho-line-height);
    color: var(--ho-color);
    text-align: var(--ho-text-align);
    background-color: var(--ho-bg);
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}





/*navbar-popup popup layer menu
*/
.container-fluid{ 

    position: fixed;width: 100vw;
    /*
    display: none;
    
    height: 100vh;*/
    overflow: hidden;
    background-color: var(--ho-white);  
    top: 0;
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */

}
.container-fluid::-webkit-scrollbar { 
    display: none; /* Chrome, Safari, Opera*/
}

.navbar-popup{     border-color:var(--ho-black);      }

.navbar-popup{ 
    height: 0vh; 
    transition: all 0.5s ease; 
    } 

    .navbar-popup.navbar-popup-toggle{ 
        animation: gradient_tall 0.5s ease forwards;
        animation-delay: 0.5;
        background-color: var(--ho-black);   
        } 
            @keyframes gradient_tall {
                0% {            background-color: var(--ho-black);      }
                100% {         background-color: var(--ho-white);      }
            }


.navbar-popup--open{ cursor: pointer;}
.navbar-popup--open svg:hover{ transform: rotate(360deg); transition: all 0.2s ease;} 

.navbar-popup--bg{ display: block;      }
.navbar-popup--bg  svg{
    display: block;
    position: absolute;     
    width: 337px;
    height: 80px;                    }
.navbar-popup--bg svg:nth-child(1){
    transform: rotate(180deg) translateX(-50%) scale(1.4,1);
    top: -1px;
    right:20px ;                           }
.navbar-popup--bg svg:nth-child(2){
    transform: rotate(0deg) translateX(-50%) scale(1.5,1);
    bottom: 80px;
    left:60px;                         }
@media screen and (max-width: 960px) {
    .navbar-popup--bg  svg{ width: 287px; height: 75px;}
    .navbar-popup--bg svg:nth-child(1){                right:10px ;     transform: rotate(180deg) translateX(-50%) scale(1,1);                      }
    .navbar-popup--bg svg:nth-child(2){                left:0 ;          transform: rotate(0deg) translateX(-50%) scale(1,1);                  }
}
.navbar-popup--close{
    display: block;
    position:absolute;
    transform: translate(-50%,50%);
    right: 0;
    top: 10px; 
    cursor: pointer;
    z-index: 3;
}
.navbar-popup--close svg{ 
    width: 30px; height: 30px ; fill:var(--ho-white) ; mix-blend-mode: difference;
    position: relative;
    top: -5px;
    left: -40px;
    transform: rotate(0deg);
}  
.navbar-popup.navbar-popup-toggle .navbar-popup--close svg{ 
	animation: gradient_close 0.5s ease forwards;}
    @keyframes gradient_close {
        100% {            transform: rotate(360deg);      }
    }



@media screen and (max-width: 960px) {
    .navbar-popup--close svg{     top: -1px;        left: -10px;} 

}
.navbar-popup--icon{
    display: block;
    position:absolute;
    transform: translate(0%,0%);
    right: 0;
    bottom: 0px; 
    width: 100%;
    height: 82px;
    text-align: left;
    background-color: var(--ho-black);                
}
.navbar-popup--icon svg{ width: 65px; height: 65px ; }   
.navbar-popup--icon a:first-child svg{margin-left: 20px;}   
.navbar-popup--icon>svg{ float: right; cursor: pointer; }
.navbar-popup--logo{
    display: block;
    position:absolute;
    left:100px;
    top:100px;      
    cursor: pointer;
}
.navbar-popup.navbar-popup-toggle .navbar-popup--logo{ 
	animation: gradient_open-logo 1s ease forwards;}
    @keyframes gradient_open-logo {
        0% {            transform: translateY(-10%);      }
        100% {            transform: translateY(0%);      }
    }



.navbar-popup--logo svg{ display: block; width: 262px; height:130px;}
@media screen and (max-width: 960px) {
    .navbar-popup--logo{
    left: 8vw;
    top: 5vh;    
    }
    .navbar-popup--logo svg{ width: 212px; height:100px;}
}

.navbar-popup--menu{
    display: block;
   width: 400px;
   position: relative;
   margin-left: 100px;
   margin-top: 260px;
   text-align: left;
}
@media screen and (max-width: 960px) {
       .navbar-popup--menu{ 
           display: flex;
           position: relative;
           flex-direction:column;
           justify-content: flex-start;
           height: 70vh;
           width: 84vw;
           margin: 0 auto; 
           gap: 6vh;
           left: 0;
           top: 260px;
           transform: translateY(0%); 
       }
}
.navbar-popup.navbar-popup-toggle .navbar-popup--menu{ 
	animation: gradient_open-menuouter 1s ease forwards;}
    @keyframes gradient_open-menuouter {
        0% {            transform: translateY(-20%);      }
        100% {            transform: translateY(0%);      }
    }



.navbar-popup--menu h5, .navbar-popup--menu h6{  font-weight: 800;                  
   box-sizing: border-box; ;
   position: relative;
       
}                
.navbar-popup--menu .navbar-popup--menu__a{
   position: absolute;
   display: flex;
   flex-direction: column;
   left: 550px;               
   top: -160px; 
}
.navbar-popup--menu .navbar-popup--menu__a h5{
   font-size: var(--ho-display-1);
   letter-spacing: 1.6rem;
}
.navbar-popup--menu .navbar-popup--menu__b h6{
   font-size: var(--ho-display-5);
   letter-spacing: 0.4rem;
}
.navbar-popup--menu .navbar-popup--menu__b{
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 40px;
}                
@media screen and (max-width: 960px) {
   .navbar-popup--menu .navbar-popup--menu__a,
   .navbar-popup--menu .navbar-popup--menu__b{
           display: flex;
           position: relative;
           flex-direction:column;
           gap:4vh;
           left: 0;
           top: 0;
           transform: translateY(-15%);       
   }
   .navbar-popup--menu .navbar-popup--menu__a h5{
   font-size: var(--ho-head-5);
   letter-spacing: 0.6rem;
   }
   .navbar-popup--menu .navbar-popup--menu__b h6{
       font-size:var(--ho-head-6);
       letter-spacing: 0.2rem;
   }    
}
.navbar-popup--menu ul{box-sizing: border-box;}
.navbar-popup--menu ul li{ 
   display: block; 
   overflow: hidden; 
   list-style: none; 
   line-height: 3.2em; 
   font-size: var(--ho-display-7); 
   font-weight: 600; 
   border-bottom: 1px solid var(--ho-gray-500);} 

.navbar-popup--menu__a label { cursor: pointer;        }
.navbar-popup--menu__b label { cursor: pointer;        }

#ddmenu_d-toggle,
#ddmenu_c-toggle,
#ddmenu_b-toggle,
#ddmenu_a-toggle {            display: none;        }
#ddmenu_d,
#ddmenu_c,
#ddmenu_b,
#ddmenu_a {      
   overflow: hidden;
   max-height: 0;
   transition: all 0.5s ease;                    
   padding: 0px 0 0 0px;
}
#ddmenu_d-toggle:checked+#ddmenu_d, 
#ddmenu_c-toggle:checked+#ddmenu_c, 
#ddmenu_b-toggle:checked+#ddmenu_b, 
#ddmenu_a-toggle:checked+#ddmenu_a {                                    
   padding: 0px 0 0 15px;
}
:root {
   --ho-dropdown-menu-1:3.2rem ;
   --ho-dropdown-menu-2:6.4rem ;
   --ho-dropdown-menu-3:9.6rem ;
   --ho-dropdown-menu-4:12.8rem ;
   --ho-dropdown-menu-5:16rem ;
   --ho-dropdown-menu-6:19.2rem ;
   --ho-dropdown-menu-7:22.4rem ;
   --ho-dropdown-menu-8:25.6rem ;
   --ho-dropdown-menu-9:28.8rem ;
}
#ddmenu_d-toggle:checked+#ddmenu_d{ max-height: var(--ho-dropdown-menu-3);  }
#ddmenu_c-toggle:checked+#ddmenu_c{max-height: var(--ho-dropdown-menu-4);   }
#ddmenu_b-toggle:checked+#ddmenu_b{max-height: var(--ho-dropdown-menu-6);   }
#ddmenu_a-toggle:checked+#ddmenu_a {max-height: var(--ho-dropdown-menu-7);     }


.navbar-popup--menu  h5 svg{ width: 80px; height:94px;}
.navbar-popup--menu  h6 svg{ width: 24px; height: 20px;}
.navbar-popup--menu  h5 svg{                        
       position: absolute;
       display: block;
       top:30%;
       right: -8rem;
       transition: all 0.2s ease;
       transform: rotate(0deg);
   }
.navbar-popup--menu  h6 svg{                        
       position: absolute;
       display: block;
       top:30%;
       right: 7rem;
       transition: all 0.2s ease;
       transform: rotate(0deg);
       
}
@media screen and (max-width: 960px) {
   .navbar-popup--menu  h5 svg{ width: 30px; height: 24px; right: 0rem;}
   .navbar-popup--menu  h6 svg{ width: 18px; height: 14px; right: 0rem;}
}   
label.nav_labelselected svg{ transform: rotate(180deg); } 
/*//popup layer menu*/
/*footer subscribe section*/
.subscribe_container-inner{ background-color: #000;
    overflow: hidden;
    width: 96%; width: 100%;
    height: 400px; 
    margin: 0 auto; 
    position:relative;
}
.subscribe_container-inner__bg{ display: block;}
.subscribe_container-inner__bg img{ display: block; position: absolute;
width: 100%;  height:100%; top: 50%; left: 50%;  object-fit: contain;  transform: translate(-50%,-50%);}  



.subscribe_container-inner__line{ 
    display: block;
    position: absolute; 
    overflow: hidden; 
    width: 50vw;    
    height: 106px;
    left: 50%;
    top: 50%; 
    transform: translate(-50%,-0%);} 
.subscribe_container-inner__line svg{ 
    display: block; position: absolute; 
    width: 1527px;  height:106px; top: 50%; left: 50%;  object-fit: contain;  transform: translate(-50%,-50%);}  

.subscribe_container-inner__logo{ 
    display: block;
    position: absolute; 
    width:50vw;     
    height: 106px;
    top: 50%; 
    left: 0;
    transform: translate(0%,-50%);
   } 
.subscribe_container-inner__logo svg{ 
    display: block; position: absolute;  fill: #fff !important;
    width: 202px;  height:60px; top: 55%;    left: 23vw;      
    object-fit: contain;  transform: translate(-100%,-50%);
}   
/*
.subscribe_container-inner__button{ 
    display: block;
    position: absolute;     
    width:fit-content; 
    text-align: left;
    top: 50%; 
    right: -2%;  
    transform: translate(-100%,-50%);
    font-size: var(--ho-display-6);
    font-weight: 800;
    letter-spacing: 0.4em;    
    color: #fff;  
    cursor: pointer; 
    transition: all 2s;
    
    background-color: red;
    } */
.subscribe_container-inner__button{ 
    display: block; display: flex;
    position: absolute; 
    width:50vw;     
    height: 106px;
    top: 50%; 
    left: 57%;
    transform: translate(0%,-50%); 
    font-size: var(--ho-display-6);
    font-weight: 800;
    letter-spacing: 0.4em;    
    color: #fff;  
    cursor: pointer; 
    -transition: all 2s;
    justify-content: center;
    align-items: center;
    -background-color: rgba(15,15,255, 0.3);
    } 
    .subscribe_container-inner__button:hover span{ text-decoration: underline;  letter-spacing: 0.45em;    }
    .subscribe_container-inner__button span{
        display: block;
        position: absolute;
        width: 202px;
        top: 55%;
        left: 27vw;
        object-fit: contain;
        transform: translate(-50%,-50%); 
        text-align: center;
    }
    .subscribe_container-inner h6{ 
        display: block;
        position: absolute;     
        width:100%; 
        text-align: center;
        bottom: 5%;    
        left: 50%;
        transform: translate(-50%,-50%);
        font-size: var(--ho-display-7);
        font-weight: 500;
        color: #fff;  
    } 
@media screen and (max-width: 960px) {
    .subscribe_container-inner__bg img{ object-fit: cover;}
    .subscribe_container-inner__line{ width: 100vw}
    .subscribe_container-inner__logo svg{ 
        top: -45%;    left: 50vw;      
        transform: translate(-51%,-50%);
    }
    .subscribe_container-inner__button{ 
        
        left: 51%;  
        top: 38%;    
        font-size: var(--ho-display-7);
        transform: translate(-50%,-50%);  
    } 
    .subscribe_container-inner__button span{
        display: block;
        position: absolute;
        width: 202px;
        top: 50%; 
        left: 50%;
        object-fit: contain;
        transform: translate(-50%,-50%); 
        text-align: center;
    }

}
/*//footer subscribe aection*/


/*footer*/
footer{ position: sticky;}
.footer_container{ width: 100%; overflow: hidden; background-color: var(--ho-white);} 
.footer_container-inner{ 
    display: flex;
    flex-direction: column;
    margin: 2.4em auto 1.4em auto;  
}
.footer_container-inner .row{
    display: flex;
    flex-direction: row; 
    width: 96%;
    margin: 1em auto;
    justify-content: space-between; 
    text-align: left;
}
.footer_container-inner .row:first-child{        margin-bottom: 2.8em;     }
.footer_container-inner .row:first-child h6{ margin-bottom: 1.1em; font-size: var(--ho-display-7); color: var(--ho-black);}  
.footer_container-inner .row:first-child li{ font-size: 0.85em; line-height: 2.2;}  

.footer_container-inner .row:last-child{ clear: both; font-size: 0.85em;} 
.footer_container-inner .row:last-child ul{  display: flex; flex-direction: row;  }

.footer_container-inner .row:last-child ul{gap: 2em; }
.footer_container-inner .row:last-child ul:last-child{gap: 1em; padding-left: 7em;}
.footer_container-inner .row:last-child ul:last-child svg{ width: 38px; height: 38px;} 
@media screen and (max-width: 960px) {
    .footer_container-inner .row:first-child{    display: none; }
    .footer_container-inner .row{
        display: flex;
        flex-direction: column; 
        width: 96%;
        margin: 0 auto;
        justify-content: space-between; 
        text-align: center;
        gap: 1em;
    }
    .footer_container-inner .row:last-child{ clear: both; font-size: 0.75em;} 
    .footer_container-inner .row:last-child ul:last-child{gap: 1em; padding-left: 0em; text-align: center;}
    .footer_container-inner .row:last-child ul{ justify-content: center;}
    .footer_container-inner .row:last-child ul:last-child svg{ width: 46px; height: 46px;}  
}
/*//footer*/



/*header Basic*/
header .navbar{
    display: block; position: fixed;
    width: 100%; overflow: hidden; height:80px ;     
    background: var(--ho-white); 
    background: transparent;
    transition: all 1s;
}
.navbar .container{ 
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    width: 96%;
    margin: 0 auto;
    height: 100%;
    position: relative;            
}
.navbar .container ul:first-child,
    .navbar .container ul:last-child{
        display: flex;
        flex-direction: row;
        align-items: center;
        overflow: hidden;
        gap:5vw;
        font-weight: 800;
        font-size:0.95rem ;              
    }        
@media screen and (max-width: 960px) {
    .navbar .container ul:first-child{ display: none;}  
    .navbar .container ul:last-child li:nth-child(1),
    .navbar .container ul:last-child li:nth-child(2){ display: none;}
}


.navbar .container ul li a{ transition: all 0.5s ease;}

.navbar .container ul li a::before{
    content: "";
    display: block;
    background-color: var(--ho-black);
    width: 60px; width: 0px;
    height:20px;
    position: absolute;
    top: 50%;
    transform: translate(-2px, -50%);
    z-index: -1;   
    transition: all 0.2s ease;}
.navbar .container ul li a:hover{ color: var(--ho-white);}
.navbar .container ul:first-child li:nth-child(1) a:hover::before{ width: 58px;}
.navbar .container ul:first-child li:nth-child(2) a:hover::before{ width: 112px;}
.navbar .container ul:first-child li:nth-child(3) a:hover::before{ width: 58px;}
.navbar .container ul:last-child li:nth-child(1) a:hover::before{ width: 100px;}
.navbar .container ul:last-child li:nth-child(2) a:hover::before{ width: 63px;}
/*//header basic*/