*{box-sizing: border-box}
body{font-family: 'Noto Sans KR', sans-serif;
font-size: 13px}

.sitenav{position: fixed;bottom: 10px;right: 1px;}

.header{margin: 20px 0;overflow: hidden;}
.header h1{padding: 5px 5px 22px 5px;width: 280px;float: left;text-align: center}
.header ul{float: right;padding: 15px 0 0 0;}
.header::after{content:'';clear: both;}
.header ul li{float: left; margin-right: 20px}
.header ul li:nth-child(1){background: url(../12_10/rwd1_img/icn_contact.jpg) no-repeat left center;
text-indent: 20px;}
.header ul li:nth-child(2){background: url(../12_10/rwd1_img/icn_news.jpg) no-repeat left center;
text-indent: 15px;}
.header ul li:nth-child(3){background: url(../12_10/rwd1_img/icn_sitemap.jpg) no-repeat left center;
text-indent: 20px;}

.nav{max-width: 1024px;margin: auto;text-align: center;
border-bottom: 3px double #000;font-size: 16px}
.nav a{display: block;}
.nav a:hover{background: #6ebfde;color: #fff}
.nav li{text-align: center;float: left;border-bottom: none;}
.nav .contact{border-right: none}
.nav::after{content: '';clear: both;display: block;width: 100%;height: 100%;}

.main_tap{position: relative;}
.main_tap:hover .sub_area{display: flex;}
.sub_area{display: flex;position: absolute;width: 1024px;top: 50px;background: #6ebfde;color: #fff;
font-size: 14px;display: none;}
.sub_area .sub_list{border-left: 1px solid #7dc6e1;padding: 10px;margin: 0;width: 100%;}

.banner{position: relative;max-width: 100%;margin: auto;color: #fff;
    background: url(../12_10/koway_img/main_banner_you9_1200.jpg) left top;background-size: cover}
.banner .bannerlist{position: absolute;top: 50%;left: 60%}


.warpcontents{width: 100%;background: url(../12_10/rwd1_img/bg_footer.jpg) no-repeat center bottom;
padding-bottom: 110px}

.contents h2{padding-top: 50px}
.contents h3{border-left: 5px solid #000;font-size: 20px;margin: 10px 0}
.contents{overflow: hidden;}
.contents section {margin-top: 20px}
.contents section img{width: 100%}
.contents::after{content: '';clear: both;}
.contents a{display: block;}

.tablet{display: none;}

.miner1:hover,.miner4:hover{background: #d9d9d9;}
.miner1:hover,.miner4:hover .box{}
.miner1:hover h3,.miner4:hover h3{border-left: 5px solid #666}
.miner2:hover,.miner5:hover{background: #c2dae6 }
.miner2:hover h3,.miner5:hover h3{border-left: 5px solid #627ad0}
.miner3:hover,.miner6:hover{background:  #dce2e6}
.miner3:hover h3,.miner6:hover h3{border-left: 5px solid #3d98c5}

.middlebanner{clear: both;position: relative;max-width: 100%;z-index: 1}
#miner1{position: absolute;width: 100%;z-index: 10;}
#miner2{position: absolute;width: 100%;}
#miner3{position: absolute;width: 100%;}
#miner4{position: absolute;width: 100%;z-index: 10;}
#miner5{position: absolute;width: 100%;}
#miner6{position: absolute;width: 100%;}
#miner1 img,#miner2 img,#miner3 img,#miner4 img,#miner5 img,#miner6 img{width: 100%}
#miner1 .input,#miner2 .input,#miner3 .input,#miner4 .input,#miner5 .input,#miner6 .input{
position: absolute;width: 100%;top: 50%;left: 50%;color: #fff;text-align: center;
transform: translate(-50%,-50%);letter-spacing: 1.5;font-size: 1.5em}
#miner1:target{z-index: 10;}
#miner2:target{z-index: 10;}
#miner3:target{z-index: 10;}
#miner4:target{z-index: 10;}
#miner5:target{z-index: 10;}
#miner6:target{z-index: 10;}
.middlebanner::after{content: '';clear: both;display: block;height: 540px;}

.side{margin-top: 30px}
.side h2{background: url(../12_10/rwd1_img/bg_headerLine.jpg)repeat-x left bottom;
padding: 10px 0;margin: 0 5px 15px 0;font-size: 16px}
.side dt{background: url(../12_10/rwd1_img/icn_arrow.jpg) no-repeat left center;
padding-left: 5px;font-weight: bold}
.side dd{padding: 10px 0;text-decoration: underline;line-height: 1.5;margin: 0 0 20px 10px;}

.info li img{width: 98%;height: auto;max-width: 470px;}

.footer{text-align: center}
.footer li{padding: 5px 0;}
.footer::before{content: '';display: block;border-top: 10px solid #000;width: 100%;height: 100%;}

@media only screen and (max-width: 412px) {
    .header h1{padding: 0;}
    .header{display: flex;float: none;}
    .header{flex-direction:column;align-items: center}

    .banner{height: 40vh;background-position: -100px 0}
    .banner .bannerlist{position: absolute;top: 60%;left: 10%}

    .nav{border-bottom: none}
    .nav li{width: 50%;border-bottom: 2px solid #000}
    .nav li:nth-child(odd){border-right:1px dotted #000}
    .nav li a{padding: 5px 0;}
    .main_tap:hover .sub_area{display: none;}


    .contents section{width: 100%;float: none;text-align: center}
    .contents h3{border: none;font-size: 1.3em}
    .contents p{display: none;}
    .middlebanner{display: none;}

    .side dd{padding: 5px 0 10px 0;margin:0}
    
    .footer{text-align: left}
}

@media only screen and (min-width: 413px) and (max-width: 960px){
    body {}

    .header ul{padding-top: 20px;}

    .banner{height: 60vh}
    .banner .bannerlist{position: absolute;top: 50%;left: 10%}

    .nav li{width: 16%;font-size: 1.2em;}
    .nav a{height: 50px;line-height: 2.5}

    .contents section{width: 100%; padding: 10px;float: left;}
    .contents section span{display: block;padding-top: 150px}
    .contents section img{width: auto;float: left;margin-right: 10px}
    .contents section h3{margin-left: 391px}
    .contents section p{width: auto;padding: 10px;border: 1px solid #000;
    margin-left: 391px}
    .tablet{display: block;}

    .middlebanner{display: none;}
}

@media only screen and (min-width: 961px) {
    .warp {max-width: 1023px;margin: auto;
    }
    .header h1 img{max-width: 265px}

    .banner{height: 86vh}

    .nav li{width: 16%;margin: auto;}
    .nav li:nth-child(1){margin-left: 2%}
    .nav a{height: 50px;line-height: 3}
    .contents section{float: left;}
    .contents h3{text-align: center;padding: 10px 0}
    .contents p{line-height: 2;text-align: center}
    .contents section{width: 33%; padding: 10px}

    .side{overflow: hidden;}
    .side .news{width: 49%;float: left;}
    .side .info{width: 49%;float: right;}
}