/* @import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
.download-header {
    font-family: "Noto Sans KR", sans-serif !important;
} */

@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);
/* @font-face {
    font-family: "Noto Sans KR";
    src: url('./fonts/NotoSansCJkr/NotoSansCJKkr-Bold.otf');
}  */
.download-header {
    font-family: "Noto Sans KR", sans-serif !important;
} 


.margin-top-100{
    margin-top: 100px;
}

.customer{
    background-image: url('./img/header_customer.png');
}
.desk{
    background-image: url('./img/header_desk.png');
}
.mypc{
    background-image: url('./img/header_mypc.png');
}
.wrapper{
    width:100%;
    height:100%;
}

.left {
    float: left;
}

.right {
    float: right;
}

.bold {
    text-align: left; display: inline-block; font-weight: bold;
}

.width-half{
    width:48%;
}

.width-triangle{
    width:32.5%;
}


.download-header{
    width:100%;
    /* height:980px; */
    height: 1280px;

    min-width: 1440px;
    background-image: url('./img/header_bg.png');
    background-size: cover;
    background-repeat: no-repeat;
    margin: 0 auto;
    /* background-image: linear-gradient(237deg, rgba(0, 0, 0, 0) 92%, rgba(84, 84, 84, 0.36) -2%); */
}

.header-logo{
    background-image: url('./img/header_logo.png');
    background-repeat: no-repeat;
    width: 1280px;
    height: 61px;
    position: relative;
    min-width: 1280px;
    margin: 0 auto;
    
}

.header-title{
    /* width: 1036px; */
    height: 91px;
    text-shadow: 0 3px 10px rgba(0,0,0, 0.16);
    font-size: 61px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.15;
    letter-spacing: -1.53px;
    text-align: center;
    color: #ffffff;
    margin: 0 auto;
}


.header-subtitle{
    /* width: 774px; */
    height: 36px;
    margin: 10px 131px 0;
    font-size: 24px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.29;
    letter-spacing: normal;
    text-align: center;
    color: #ffffff;
    margin:0 auto;
}

.header-box-group{
    
    margin-top: 60px;
    text-align: center;
    vertical-align: middle;
}

.header-normal-box{
    display: inline-block;
    vertical-align: top;
    width: 392px;
    height:510px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    margin: 3px;
    background-repeat: no-repeat;
    background-size: 110%;
}

.transition-short{
    animation: fadeIn 0.5s ease-in-out;
}

.transition-middle{
    animation: fadeIn 1.0s ease-in-out;

}

.transition-long{
    animation: fadeIn 1.5s ease-in-out;
}


@keyframes fadeIn{
    from{
        opacity: 0;
        transform: translateY(20px)
    }
    to {
        opacity: 3;
        transform: none;
    }
}




.header-normal-box:hover{
    cursor: pointer;
}

.header-normal-box.transition-short.active-on:hover{
    cursor:default;
}

.header-normal-box.transition-middle.active-on:hover{
    cursor:default;
}

.header-active-box{
    display: block;
    float: left;
    width:670px;
    height:570px;

    position: relative;
    right: -29px;
    top: -23px;
   
   
}
/* .header-active-box.customer-box{
    background-image: url('./img/active-customer.png');
    background-repeat: no-repeat;
    background-size: 100%;
}

.header-active-box.desk-box{
    background-image: url('./img/active_desk.png');
    background-repeat: no-repeat;
    background-size: 100%;
}

.header-active-box.mypc-box{
    background-image: url('./img/active_mypc.png');
    background-repeat: no-repeat;
    background-size: 100%;
} */



.normal-box-title{
    z-index: 90;
    margin: 58px 0px 0px 48px;
    font-size: 30px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.5;
    letter-spacing: -1.5px;
    text-align: left;
    color: #000000;
}

.normal-box-subtitle{
    z-index: 10;
    margin-left:48px;
    opacity: 0.4;
    font-size: 18px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.33;
    letter-spacing: -0.45px;
    text-align: left;
    color: #000000;
}
.normal-box-icon{
    width:100px;
    height:100px;

    position: relative;
    right:-250px;
    top:220px;
}


.header-off-box{
    display: inline-block;
    vertical-align: top;
    width: 285px;
    height:510px;
    background-color: rgba(255, 255, 255, 0.4);
    border-radius: 20px;
    margin: 3px;

}

.off-box-icon{
    width:100px;
    height:100px;

    position: relative;
    right:-150px;
    top:220px;
}


.active-box-title{
    width: 100%;
    height: 50px;
    font-size: 34px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    letter-spacing: -1.7px;
    text-align: center;
    color: #ffffff;
    padding-top: 75px;
}

.active-box-subtitle{
   width: 100%;
    height: 36px;
    opacity: 0.8;
    font-size: 24px;
    font-weight: 500;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.17;
    letter-spacing: -1.2px;
    text-align: center;
    color: #ffffff;
}


.active-box-download-group{
    vertical-align: middle;
    width: 75%;
    height: 210px;
    text-align: center;
    margin: 0 auto;
  
    
   
}

.active-box-description-group{
    width:85%;
    margin :0 auto;
    border-top: 1px solid rgba(255,255,255,0.5);
}

.active-box-download-group .width-half{
    width:35%;
    margin :0 auto;
}

.download-box{
    float: left;
    width: 160px;
    height: 160px;
   
    margin: 24px 34px;
}

.download-box.change-margin{
    margin: 24px 21.5px 24px 21.5px;
}


.download-box.center{
    width:90%;

}


.download-box>span{
    display: block;
}

span{
    width:100%;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 2;
    letter-spacing: -0.32px;
    text-align: center;
    color: #ffffff;
}


.download-button{
    border : 1px solid rgba(255,255,255,0.5);
    border-radius: 25px;
    width:140px;
    margin: 10px auto;
    padding:3px;
    
    
}

.download-button:hover{
    background-color: rgba(255, 255, 255, 0.4);
    cursor:pointer;
}

.download-img{
    position: relative;
    top: 5px;
    
}

.download-img.degree{
    -webkit-transform: rotate(270deg);
    -moz-transform: rotate(270deg);
    -o-transform: rotate(270deg);
    -ms-transform: rotate(270deg);
    transform: rotate(270deg);
}

.description-header{
    width: 100%;
    font-size: 20px;
    font-weight: bold;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.45;
    letter-spacing: -1px;
    color: #ffffff; 
    text-align: left;
    margin: 15px auto;
   
}
.description-contents{
    width: 100%;
    height:80px;
    margin: 0 auto;
}



.description-contents-info{
    float:left;
    font-size: 16px;
    font-weight: normal;
    font-stretch: normal;
    font-style: normal;
    line-height: 1.45;
    letter-spacing: -1px;
    text-align: left;
    color: #ffffff;
    margin-bottom: 5px;
}

#active-customer-box{
    display: none;
    background-image: url('./img/active-customer.PNG');
    background-repeat: no-repeat;
    border-radius: 20px;
    background-size: 110%;
  
}

#active-desk-box{
    display: none;
    background-image: url('./img/active_desk.png');
    background-repeat: no-repeat;
    border-radius: 20px;
    background-size: 110%;
}

#active-mypc-box{
    display: none;
    background-image: url('./img/active_mypc.PNG');
    background-repeat: no-repeat;
    border-radius: 20px;
    background-size: 110%;
}


.lang-box{
    position: absolute;
    width: 60px;
    height: 25px;
    background-color: rgba(255, 255, 255, 0.4);
    right: 0;
    margin: 20px;
    border-radius: 5px;
}

.lang-box:hover{
    cursor: pointer;
    background-color: rgba(255, 255, 255, 0.4);
   
}

.lang-box>div{
    color: #000000;
    text-align: center;
    margin-top: 3px;
    font-size: 12px;
}

.lang-list{
   
   position: absolute;
   left: -40px;
    top: 25px;
   width: 100%;
   height: 100%;

    
  
}

.lang-list>li{
    display: none;
    list-style-type: none;
    width: 60px;
    height: 17px;
    margin-top: 3px;
    text-align: center;
    color: #000000;
    background-color: white;
    border-radius: 5px;
    font-size: 10px;
}


.description-contents-info.width-triangle.add-width{
    width: 33.5%;
}