@charset "utf-8";

*{margin: 0; padding: 0;}
ul{list-style: none;}
a{text-decoration: none; color: black;}
img{vertical-align: top; border: 0;}
.clearfix:after{
    display: block; content: ""; clear: both;
}
html,body{font-family: "Noto Sans KR"; background-color: #fcfdfc;}
.size{
    width: 100%; height: 100%; min-height: 100vh; position: relative;
}
.top{width: 100%; height: 40px; padding-top: 10px;
        padding-bottom: 10px;}
.top .logo{
    padding-left: 10px;
}
.c_t{float: right;padding-right: 20px; font-size: 13pt;margin-top: -20px;}
.c_t:hover{
    font-weight: bold;
}
.menu{width: 100%; height: 40px; background-image: url(img/pp.png);
background-size: cover; display: none;}
.m_menu{width: 100%; height: 40px; background-image: url(img/pp.png);
background-size: cover; display: block;position: relative;}
.hamburger{
    background-image: url(img/ham_03.png); width: 50px; height: 19px;
    position: absolute; right: 3%; top:10px; cursor: pointer;
}
.menu_1{
    width: 1000px; height: 40px; left: 50%;
    position: relative;   margin-left: -500px;
    
}
.menu_1>li{
    float: left; font-size: 12pt; position: absolute;
    margin-top: 8px; 
  }
.menu_1 .m_1{left: 14%;}
.menu_1 .m_2{left: 29.4%;}
.menu_1 .m_3{left: 52%;}
.menu_1 .m_4{left: 66%;}
.menu_1 .m_5{left: 80.1%;}
.menu_1>li>a{color: #f1f1f1; transition: all 0.3s;}
.menu_1>li>a:hover{color: #fdd80e; }
.submenu{
       width: 1000px; height: 30px; left: 50%;
    position: relative;   margin-left: -500px; display: none;
}
.submenu>ul{float: left;position: absolute; font-size: 11pt; margin-top: 3px;}
.submenu>ul{display: none;}
.submenu>ul:nth-child(1){left: 14%;}
.submenu>ul:nth-child(2){left: 29.4%;}
.submenu>ul:nth-child(3){left: 52%;}
.submenu>ul:nth-child(4){left: 80.1%;}
.submenu>ul>li{float: left;}
.submenu>ul>li>a:hover{
    color: #747474;
}
.submenu>ul>div{float: left; padding-left: 5px; padding-right: 5px;}
#section{
  background-image: url(img/mobile.png); width: 100%;height: 76vh;position: inherit;  
    background-size:cover; background-position: center;
}
/*.gif{width:37.8%; position: absolute; left: 14%; height: 100%;*/
/*background-image: url(img/dk.gif); background-size: contain;*/
/*background-repeat: no-repeat;}*/
.rightbox{position: absolute; width: 48.2%; height: 96%; 
  left: 60%;display: none;
}
.product{
    width: 60%; height: 35%;left: 0%; position: relative; top:0%;
    
}
.product_n{right: 10%;position: absolute;top:10%;}
.product_n>div{
    width: 18px; height: 18px; background-color: darkgrey; float: left;
    text-align: center; font-size: 8.5pt; color: white; cursor: pointer;
    margin-left: 2px; margin-right: 2px; cursor: pointer; 

}
.product_n>div.on{
    background-color: #c00000; 
}
.product_p{
     width: 100%; height: 100%; top:10%; position: absolute; left: 2%;
  
}
.product_p>div{width: 100%; height: 100%; position: absolute; display: none;}
.product_p>div>.p_i {
     width: 50%; height: 100%; background-size: cover; 
}
.product_p>div>div{
    float: left;
}
.product_p .p_1{display: block;}
.product_p .p_1 .p_i{
    background-image: url(img/pr_1.png);
}
.product_p>div>.p_t{
    width: 40%; height: 80%; background-size: contain; 
    margin-top: 5%; background-repeat: no-repeat;
}
.product_p .p_1 .p_t{
    background-image: url(img/t_1.png);
}
.product_p .p_2 .p_i{
    background-image: url(img/pr_2.png);
}
.product_p .p_2 .p_t{
    background-image: url(img/t_2.png);
}
.product_p .p_3 .p_i{
    background-image: url(img/pr_3.png);
}
.product_p .p_3 .p_t{
    background-image: url(img/t_3.png);
}
.notice{
    background-image: url(img/notice.png); position: absolute;
    width: 55%; height: 3.5%; background-size: contain; background-repeat: no-repeat;
     
}
.notice_t{
    position: absolute; left: 2%; top:48%;  font-size: 0.8vw;
}
.notice_t>a{color: white;}
.notice_t>a:hover{
    color: #ff9393; text-decoration: underline;
}
.notice_n{
    position: absolute; left: 43%; top:48%; color: white; font-size: 0.8vw;
}
.btn_banner{
    background-image: url(img/ctn2_btn.gif); background-size: contain;
    position: absolute; width: 360px; height: 56px; top: 89%; left: 0.2%;
}
.btn_banner>a{
    display: block;width: 100%; height:100%;
}
.f_btn{
      width: 49.5%; height: 25.5%;position: absolute; 
    top: 60%; left: 2%; 
}
.f_btn .btn_1{
    background-image:url(img/ctn3_btn1.png); width: 174px; height: 59px;
    background-size: cover; background-repeat: no-repeat;  transition: all 0.3s;
     position: absolute;left: 0%; top: 0%;
}
.f_btn .btn_1>a{
    display: block; width: 100%; height: 100%;
}
.f_btn .btn_1:hover{
  background-image:url(img/ctn3_btn1_ov.png);   
}
.f_btn .btn_2{
    background-image:url(img/ctn3_btn2.png); width: 174px; height: 59px;
    background-size: contain; background-repeat: no-repeat;left: 174px;position: absolute;
    top:0%;transition: all 0.3s;
}
.f_btn .btn_2:hover{
  background-image:url(img/ctn3_btn2_ov.png);   
}
.f_btn .btn_2>a{
    display: block; width: 100%; height: 100%;
}
.f_btn .btn_3{
    background-image:url(img/ctn3_btn3.png); width:174px; height: 59px;
    background-size: contain; background-repeat: no-repeat;left: 0%;position: absolute;
    top: 59px; transition: all 0.3s;
}
.f_btn .btn_3:hover{
  background-image:url(img/ctn3_btn3_ov.png);   
}
.f_btn .btn_3>a{
    display: block; width: 100%; height: 100%;
}
.f_btn .btn_4{
    background-image:url(img/ctn3_btn4.png); width: 174px; height: 58px;
    background-size: contain; background-repeat: no-repeat;left:174px;position: absolute;
    top:59px; transition: all 0.3s;
}

.f_btn .btn_4>a{
    display: block; width: 100%; height: 100%;
}
#footer{
    position: inherit; width: 100%; height: 12vh; 
    border-top: 1px solid black;
}
.f_logo{position: absolute; 
    width: 80%; height: 52%; top:20%; left: 5%;
}
.f_logo .f_1{
    background-image: url(img/mark1.gif); position: absolute;
    width: 10.2%; height: 100%; background-size: contain; background-repeat: no-repeat;
}
.f_logo .f_2{
    background-image: url(img/mark2.gif); position: absolute;
    width: 7.4%; height: 100%; background-size: contain; left: 15%; background-repeat: no-repeat;
}
.f_logo .f_3{
    border: 1px solid black; width: 20%; height: 80%;
    position: absolute; left: 30%; top:10%;
}
.f_logo .f_3:hover{
    background-color: rgba(240, 248, 255, 0.47);
}
.f_logo .f_3>a{
    display: block; color: darkred; position: absolute;
    width: 90%; height: 90%;  font-size: 0.7vw;
     padding-left: 5%; padding-right: 5%; padding-top: 10%;
}
.f_add{
    position: absolute; background-image: url(img/addr.png);
    width: 48%; height: 40%; background-size: contain; background-repeat: no-repeat;
    left: 25%; top:23%;
}
.f_logo2{
    position: absolute; background-image: url(img/btm_logo.gif); background-repeat: no-repeat;width: 25%; height: 32%; background-size: contain; right: 1%; top:25%;
}
.m_banner{
     position:absolute; width: 100%; height: 100%;
    
}
.m_banner>p{
    width: 100%; height: 20%; position: absolute;
     border: 1px solid white;
    box-sizing: border-box; display: table; text-align: center;
    background-color: rgba(0, 0, 0, 0.6); font-size: 2vh;
    
}
.m_banner>p:hover{
    background-color: rgba(0, 0, 0, 0.85);
}
.m_banner>p>a{
    display: table-cell; vertical-align: middle; color: white;
}
.m_banner>p:nth-child(1){
    top:0%;
}
.m_banner>p:nth-child(2){
    top:20%;
}
.m_banner>p:nth-child(3){
    top:40%;
}
.m_banner>p:nth-child(4){
    top:60%;
}
.m_banner>p:nth-child(5){
    top:80%;
}