html, body {width: 100%; height: 100%; padding: 0px; margin: 0px; }


@font-face {
    font-family: 'GangwonEduPowerExtraBoldA';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_2201-2@1.0/GangwonEduPowerExtraBoldA.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GongGothicMedium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_20-10@1.0/GongGothicMedium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css);

.nanumgothic * {
 font-family: 'Nanum Gothic', sans-serif;
}

a {
    text-decoration-line: none;
    text-decoration:none;
    color: white;
}
li{
    list-style: none;
}

.wrap{
    width: 100%;
    height: 100%;
    margin: 0 auto;
}
header{
    position:fixed;
    width: 100%;
    height: 80px;
    background-color: #000;
}


/*#myVideo{width: 100%;}*/

.nav_tit{width: 65%;margin: auto;}
.navbar{width: 100%;height: 80px;position: relative;display: flex;align-items: center;z-index: 999;}

.nav_logo{position:absolute;height: 50px;}
.nav_logo img{height: 50px;}

.nav_menu{width: 100%;display: flex;padding-left:0;justify-content:center;}
.nav_menu li{padding: 8px 12px;margin: 0 30px;font-size: 17px;}
.nav_menu li:hover{background-color: #d49466;border-radius: 4px;}


.nav_tooglebtn{display: none;position:absolute;top: 25px;right: 25px;font-size: 24px;}
/* 여기까지 상단 메뉴*/

article{
    width:100%;
}

.art_div{position: static; padding-top: 30px;}
.art_div_bg img{width: 100%;}

section{width: 100%;}
.sec_div{width: 70%; margin:0 auto;}
.sec_div1{text-align: center; padding-top: 50px;font-size: 3em;font-family: 'GangwonEduPowerExtraBoldA';}
.sec_div2{text-align: center; margin-top: 10px; margin-left: 100px; margin-right: 100px;font-size: 1em;font-family: 'GongGothicMedium';}
.sec_div_robot{width: 100%;background-color: #d49466;}
.sec_div3{width: 48%;margin-top: 10px;float:left;}
.pudubot_img img{margin-top: 10px;width: 100%;}
.sec_div4{width: 48%;margin-top: 10px;float:left;margin-bottom: 50px;}
.bellabot_img img{margin-top: 10px;width: 100%;}

.pudubot_txt{text-align: center;font-size: 2em;font-family: 'GongGothicMedium';}
.bellabot_txt{text-align: center;font-size: 2em;font-family: 'GongGothicMedium';}


.robot_test{width: 70%; margin:0 auto;text-align: center; border-bottom: 1px solid #000; padding-bottom: 30px;}
.robot_test img{width: 50%; border-radius: 10px;}

.robot_store_txt{width: 70%; margin:0 auto; text-align:center;padding-top: 30px; padding-bottom: 30px;font-size: 3em;font-family: 'GangwonEduPowerExtraBoldA';}

.robot_store_div{width:100%;text-align: center; margin:0 auto;}

.robot_store{width: 70%; margin:0 auto;text-align: center;}
.robot_store1{width: 50%;float:left;}
.robot_store1 img{margin-top: 10px;width: 100%;}
.robot_store2{width: 50%;float:left;}
.robot_store2 img{margin-top: 10px;width: 100%;}
.robot_store3{width: 50%;float:left;}
.robot_store3 img{width: 100%;}
.robot_store4{width: 50%;float:left;}
.robot_store4 img{width: 100%;padding-bottom: 50px;}


footer{clear: both;width: 100%;bottom:0; background-color: #000000;margin-top: 30px;}
.cominfo{padding: 10px 30px;}
.cominfo span{font-size: 12px; font-weight: 700;color:#fff}

@media (max-width: 1400px){
    #wrap {width: 100%;}
    .nav_tit {width: 80%;}
    
}

/* 화면 너비 0 ~ 1200px */
@media (max-width: 1200px){
    #wrap {width: 100%;}
    .nav_tit {width: 90%;}
    
}

/* 화면 너비 0 ~ 1200px */
@media (max-width: 1000px){
    #wrap {width: 100%;}
    .nav_tit {width: 95%;}
    
}

/* 화면 너비 0 ~ 1200px */
@media (max-width: 900px){
    #wrap {width: 100%;}
    .nav_tit {width: 100%;}
    .nav_logo{margin-left: 10px;}
    .nav_menu li{margin: 0 15px;}
    
}

/* 모바일 화면 너비 0 ~ 768px */
@media (max-width: 768px){

    .nav_logo{
        position: static;
        padding-top: 15px
    }
    .navbar{
        flex-direction: column;
        align-items: flex-start;
        background-color: #000000;
    }
    .nav_menu{
        display: none;
        flex-direction: column; 
        justify-content:center;
        background-color: #000000;
        text-align: center;
        padding-bottom: 15px;
        margin-top: 0;
    }
    .nav_tooglebtn{
        display: block;
    }
    .nav_menu.active{
        display: flex;
    }
    .art_div{padding-top: 80px;}
    .sec_div{width: 100%; margin:0 auto;}
    .sec_div2{width: 100%;text-align: center;margin: 30px 0;}
    .sec_div2_span{text-align: center;margin-left: 20px; margin-right: 20px;}
    .sec_div3{width: 100%;margin-top: 10px;clear:none;}
    .sec_div4{width: 100%;margin-top: 10px;clear:none;}
    .robot_test{width: 100%;}
    .robot_test img{width: 90%;}
    .robot_store_txt{width: 90%; padding-top: 30px; padding-bottom: 30px;font-size: 1.3em;font-family: 'GongGothicMedium';}

    .robot_store{width: 100%;}
}

    /* 화면 너비 0 ~ 480px */
@media (max-width: 600px){
    .nav_logo{
        position: static;
    }
    .navbar{
        flex-direction: column;
        align-items: flex-start;
        background-color: #000000;
    }
    .nav_menu{
        display: none;
        flex-direction: column; 
        justify-content:center;
        background-color: #000000;
        text-align: center;
        padding-bottom: 15px;
    }
    .nav_tooglebtn{
        display: block;
    }
    .nav_menu.active{
        display: flex;
    }
    
}
/*s22 화면*/
@media (max-width: 480px){
    .nav_logo{
        position: static;
    }
    .navbar{
        flex-direction: column;
        align-items: flex-start;
        background-color: #000000;
    }
    .nav_menu{
        display: none;
        flex-direction: column; 
        justify-content:center;
        background-color: #000000;
        text-align: center;
        padding-bottom: 15px;
    }
    .nav_tooglebtn{
        display: block;
    }
    .nav_menu.active{
        display: flex;
    }
}

/*s6 화면*/
@media (max-width: 380px){
    .nav_logo{
        position: static;
    }
    .navbar{
        flex-direction: column;
        align-items: flex-start;
        background-color: #000000;
    }
    .nav_menu{
        display: none;
        flex-direction: column; 
        justify-content:center;
        background-color: #000000;
        text-align: center;
        padding-bottom: 15px;
    }
    .nav_tooglebtn{
        display: block;
    }
    .nav_menu.active{
        display: flex;
    }
}

/*s9 화면*/
@media (max-width: 320px){
    .nav_logo{
        position: static;
    }
    .navbar{
        flex-direction: column;
        align-items: flex-start;
        background-color: #000000;
    }
    .nav_menu{
        display: none;
        flex-direction: column; 
        justify-content:center;
        background-color: #000000;
        text-align: center;
        padding-bottom: 15px;
    }
    .nav_tooglebtn{
        display: block;
    }
    .nav_menu.active{
        display: flex;
    }
}