@media all  and (max-width: 1180px){
    .webView{display: none;}
    .tabletView{display: block;}

    .inner{width: 100%; padding: 0 50px;}

    #footer .info .txt{display: block; line-height: 1.6;}
    #footer .info .txt li + li::before{content: "";}
    
    /* main */
    .main-area section.curation-tab .link-list article .img-box i{height: 210px;}

   
    .banner01 .txt-box{width: 70%;}
    .banner01 h3{font-size: 35px;}
    .banner01 .t2{font-size: 18px;}
    .banner01 .img-box{width: 30%; text-align: center; margin-top: 40px;}
    .banner01 .img-box img{max-width: 250px;}
    
    /* curation */
    .curation-box .question-box{min-height: 50vh;}

    .curation-box .swiper-pagination.swiper-pagination-fraction{right: 30px;}

    /* sub */
    .boardList{margin-top: 100px;}

    .sub-container{padding: 50px 0;}

    .sub-visual .inner{height: 320px; padding-top: 70px;}
    .sub-visual h2{font-size: 50px;}

    .tab-btns li a{padding: 20px 15px;}

    .company .map-area article .map-box .root_daum_roughmap{width: 100% !important;}
    .company .map-area article .map-box .root_daum_roughmap .wrap_map{height: 350px !important;}
   
    .product .product-list article .txt-box{padding: 25px;}
    .product .product-list article .txt-box h6{font-size: 20px;}
    .product .contact .txt{font-size: 20px;}
    .product .case .txt h6{font-size: 22px;}

    #caseBanner .txt-box{font-size: 18px; padding: 20px 10px;}

    /* board */
    .BoardView .title{float: none; width: 100%;}
    .BoardView .h_info{float: none; width: 100%; margin-top: 10px;}
    .BoardView .h_info li{font-size: 13px;}
    .BoardView .h_info li b{font-size: 13px;}

    .boardList header ul li.check{width: auto;}
    .boardList header ul li.num{width: 7%;}
    .boardList header ul li.subject{width: 45%;}
    .boardList header ul li.name{width: 18%;}
    .boardList header ul li.date{width: 15%;}
    .boardList header ul li.hit{width: 12%;}

    .boardList article ul li.check{width: auto;}
    .boardList article ul li.num{width: 7%;}
    .boardList article ul li.subject{width: 45%; text-align: left;}
    .boardList article ul li.name{width: 18%;}
    .boardList article ul li.date{width: 15%;}
    .boardList article ul li.hit{width: 12%;}

    .BoardView .info li{width: auto !important;}

    /* reply */
    #Reply{width: 95%; margin: 0 auto;}
}
@media all  and (max-width: 1000px){

    #wrap.main{padding-top: 60px;}

    #header .inner{height: 60px;}
    #header .logo img{height: 35px;}
    #header .gnb{display: none;}
    #header .oiBtn.menu{display: block;}

    #header #menu_btn{display: block;}

    .document-area .pdf-area .pdf-box iframe{height: 600px;}

    .board-tab{border: none;}
    .board-tab li{padding: 5px;}
    .board-tab li a{border-radius: 10px; border: 1px solid #ddd;}
    .board-tab li:first-child a{border-color: #ddd;}
    .board-tab li.active a{}

    .boardList header{display: none;}
    .boardList .articles{border-top: 1px solid #ddd;}
    .boardList article ul:not(.info){position: relative; padding: 15px 0; padding-left: 30px;}
    .boardList article ul:not(.info) li{line-height: 1; height: auto; text-align: left;}
    .boardList article ul:not(.info) li.check{position: absolute; left: 0; top: 15px;}
    .boardList article ul:not(.info) li.num{display: none;}
    .boardList article ul:not(.info) li.subject{width: 100%; flex: none; margin-bottom: 5px;}
    .boardList article ul:not(.info) li.date{width: auto; display: inline-block; vertical-align: middle; font-size: 12px; color: #888}
    .boardList article ul:not(.info) li.hit::before{content: "조회";}
    .boardList article ul:not(.info) li.hit{width: auto; display: inline-block; vertical-align: middle; font-size: 12px; color: #888}

    .BoardView header{display: block;}

}


@media all  and (max-width: 800px){

    .tabletView{display: none;}
    .mobileView{display: block;}

    .inner{padding: 0 15px;}

    #header .logo img{height: 25px;}
    #header.on .inner{height: 45px;}
    #header.on .logo img{height: 20px;}
    #header.on #menu_btn{height: 20px;}
    #header.on #menu_btn.on{height: 25px;}

    #header .link{display: none;}
    #header .link-list{display: none;}
    
    #footer{font-size: 12px;}
    #footer .top .links{font-size: 13px;}
    #footer .top .sns-link li a{width: 15px; height: 15px;}
    #footer .info .txt li + li::before{display: none;}

    .document-area .pdf-area .pdf-box iframe{height: 400px;}
    
    /* main */
    .banner01 .inner{display: block;}
    .banner01 .txt-box{width: 100%;}
    .banner01 .img-box{width: 100%;}
    .banner01 h3{font-size: 30px;}
    .banner01 .t1{font-size: 13px; margin: 30px 0;}
    .banner01 .t2 .bgBtn{margin-left: 0; margin-top: 10px;}


    .main-area section{padding: 30px 0;}

    .main-area section.about{text-align: center;}
    .main-area section.about img{max-width: 100%;}

    .main-area section.curation-tab .link-list{flex-wrap: wrap;}
    .main-area section.curation-tab .link-list article{width: 49%; flex: inherit; margin-bottom: 10px;}
    .main-area section.curation-tab .link-list article + article{margin-left: 0;}
    .main-area section.curation-tab .tab01 .link-list article:nth-child(2n){margin-left: 2%;}
    .main-area section.curation-tab .link-list article .img-box i{height: auto; padding-top: 100%;}
    .main-area section.curation-tab .link-list article h4{font-size: 13px;}

    .main-area section.curation-tab .tab-box.tab02 article:nth-child(1){order: 2; }
    .main-area section.curation-tab .tab-box.tab02 article:nth-child(2){order: 3; margin-left: 2%;}
    .main-area section.curation-tab .tab-box.tab02 article:last-child{width: 100%; order: 1}
    .main-area section.curation-tab .tab-box.tab02 article:last-child i{padding-top: 50%;}
    .main-area section.curation-tab .tab-box.tab03 article{order: 2;}
    .main-area section.curation-tab .tab-box.tab03 article:nth-child(1){width: 100%; order: 1}
    .main-area section.curation-tab .tab-box.tab03 article:nth-child(1) i{padding-top: 50%;}
    .main-area section.curation-tab .tab-box.tab03 article:nth-child(3){margin-left: 2%;}

    .main-area section header h3{font-size: 18px;}
    .main-area section header .btns{display: block;}
    
    .main-area section.pdf-link .tab-area{padding: 20px;}
    .main-area section.pdf-link .tab-btns{width: 100%;}
    .main-area section.pdf-link .tab-btns li{flex: 1;}
    .main-area section.pdf-link .tab-btns li + li{margin-left: 0;}
    .main-area section.pdf-link .tab-btns li a{font-size: 14px;}
    .main-area section.pdf-link .board-top{margin-bottom: 0;}
    .main-area section.pdf-link .board-top .btns{display: none;}
    

    /* curation */
    .curation-box .intro-box h3{font-size: 16px;}
    .curation-box .intro-box .btns{font-size: 16px; height: 50px; line-height: 50px; width: 155px;}
    .curation-box .intro-box::after{height: 175px;}

    .curation-box .result-area{padding: 40px 15px;}
    .curation-box .result-area .result-box h3{font-size: 16px;}
    .curation-box .result-area .result-box .state-list dl > *{min-width: 45px; padding: 0 5px;}
    .curation-box .result-area .result-box .state-list dl dt{font-size: 12px;}
    .curation-box .result-area .result-box .state-list dl dt::before{width: 14px; height: 14px;}
    .curation-box .result-area .result-box .state-list dl dd{font-size: 13px;}
    .curation-box .result-area .message::before{height: 125px;}
    .curation-box .result-area .message p{font-size: 15px;}
    .curation-box .more-box h3{font-size: 16px;}
    .curation-box .more-box .btns{font-size: 16px; height: 50px; line-height: 50px; width: 155px;}
    .curation-box .more-box .guide{font-size: 12px; margin-top: 45px;}

    .curation-box .summary{padding: 40px 20px;}
    .curation-box .summary .label-list label{margin-bottom: 10px;}
    .curation-box .summary article h6{font-size: 14px;}
    .curation-box .summary article .guide{padding: 15px; font-size: 14px;}
    .curation-box .summary article .guide .state::before{font-size: 12px;}
    .curation-box .summary article .guide .more a{font-size: 12px;}

    .curation-box{padding: 15px;}
    .curation-box .question-box{padding: 80px 0; justify-content: flex-start;}
    .curation-box article{width: 100%;}
    .curation-box article + article{margin-top: 60px;}
    .curation-box article h5{font-size: 14px;}
    .curation-box article .img-box img.m{display: inline-block;}
    .curation-box article .img-box img.pc{display: none;}
    #curation .swiper-wrapper{height: auto !important;}
    
    .curation-box article.age{margin-top: 100px;}
    .curation-box article.age h5{text-align: center;}
    .curation-box article.age .label-list label{width: 50%;}

    .curation-box .eBtn{width: 100px; height: 42px; line-height: 42px; font-size: 13px; margin: 0 10px;}
    .curation-box .swiper-wrapper{height: auto;}
    .curation-box .swiper-pagination{margin-top: 0;}
    .curation-box .swiper-pagination .swiper-pagination-bullet{height: 4px;}

    .curation-box .swiper-pagination.swiper-pagination-fraction{font-size: 16px; right: 20px;}


    .label-list label.radio span{font-size: 14px;}
    .label-list label{width: 33.33%; margin-bottom: 40px;}
    .label-list label + label{margin-left: 0;}

    label.radio span::before{width: 22px; height: 22px;}
    

    /* sub */
    .sub-container{padding: 25px 0 50px 0;}
    .sub-container h5{font-size: 22px; margin-bottom: 50px;}

    .sub-visual .inner{height: 240px; padding-top: 50px;}
    .sub-visual h2{font-size: 25px;}
    .sub-visual p{font-size: 13px; word-break: keep-all; line-height: 1.5;}

    .tab-btns{margin-bottom: 20px;}
    .tab-btns li{font-size: 13px;}
    .tab-btns li a{padding: 15px 10px;}

    .company .intro .txt .ceo{margin-top: 50px;}
    .company .map-area article h6{font-size: 18px;}
    .company .map-area article .info{display: block; font-size: 14px;}
    .company .map-area article .info li{margin: 10px 0; display: block; text-align: left; display: flex; align-items: center;}
    .company .map-area article .map-box{margin-top: 20px;}
    .company .map-area article .map-box .root_daum_roughmap .wrap_map{height: 200px !important;}

    .product .product-list{align-items: stretch;}
    .product .product-list article{width: 49%; margin-bottom: 10px;}
    .product .product-list article .txt-box h6{font-size: 16px; margin-bottom: 10px;}
    .product .product-list article .txt-box p{font-size: 13px;}

    .product .contact{width: 100%; margin: 30px 0 80px; padding: 30px 20px; padding-bottom: 40px;}
    .product .contact .txt{font-size: 17px;}
    .product .contact .info{display: block; font-size: 13px; bottom: -47px;
    }
    .product .contact .info li::before{width: 25px; height: 25px;}
    .product .contact .info li + li{margin: 0; margin-top: 10px;}

    .product .case .txt p{font-size: 13px;}
    .product .banner-area{padding: 0;}
    .product .banner-area .swiper-button-prev, 
    .product .banner-area .swiper-button-next{display: none;}
    #caseBanner .txt-box{font-size: 13px;}

    .board-tab li{width: auto; }
    .board-tab li a{font-size: 13px; padding: 10px;}

    .board-list li a{font-size: 13px;}

    .case .info h6{font-size: 18px;}
    .case .info p{font-size: 13px;}
    .case-list{display: flex; flex-wrap: wrap; align-items: stretch;}
    .case-list article{display: block; width: 50%; padding: 5px;}
    .case-list article + article{margin: 0;}
    .case-list article .img-box{width: 100%;}
    .case-list article .img-box i{width: 100%;}
    .case-list article .txt-box .t1{font-size: 18px;}
    .case-list article .txt-box .t2{font-size: 13px;}
    .case-list article .btns{padding: 0;}
    .case-list article .btns a{min-width: inherit; width: 100%; font-size: 14px; height: 40px; line-height: 40px;}

    .contact .tel-list{display: block; margin: 30px 0;}
    .contact .tel-list article{margin: 10px 0; width: 100%; padding: 20px 15px;}
    .contact .tel-list article::before{width: 45px; height: 45px;}
    .contact .tel-list article .txt{font-size: 20px;}
    .contact .tel-list article .txt h6{font-size: 18px;}

    .num-list li{font-size: 13px;}
    .num-list li + li{margin-top: 10px;}
    .num-list li::before{width: 45px; height: 45px; line-height: 45px; font-size: 16px; flex: none;}

    table.write-black{font-size: 13px;}
    table.write-black tr th{display: block; border-bottom: none; padding: 10px 5px; padding-bottom: 0;}
    table.write-black tr td{display: block; padding: 10px 5px; padding-top: 5px;}

    .form-box .inner{padding: 0;}

    #BoardWriteForm .bottomBtn .mBtn{height: 45px; min-width: inherit; line-height: 45px; font-size: 14px;}

    .contact .tel-area > h6{font-size: 18px;}

    /* board */
    /*
    .boardList header{display: none;}
    .boardList .articles article:nth-child(1){border-top: 1px solid #ccc;}
    .boardList article ul{border-bottom: none;}
    .boardList .articles article{position: relative; width: 100%; height: auto; border-bottom: 1px solid #ccc; padding: 5px 5px 5px 40px;}
    .boardList .articles article li{float: none; height: auto; line-height: inherit;  text-align: left; font-size: 12px;}
    .boardList .articles article li.check{position: absolute; left: 0;}
    .boardList .articles article li.num{position: absolute; left: 10px; text-align: center; width: 40px;}
    .boardList.checkOff .articles article li.num{left: 0;}
    .boardList article ul li.subject{width: 95%; margin-bottom: 10px;}
    .boardList article ul li.name,
    .boardList article ul li.date,
    .boardList article ul li.hit{display: inline-block; width: auto; font-size: 12px; color: #888;}
    .boardList article ul li.name::after,
    .boardList article ul li.date::after{content: "/"; margin: 0 5px; color: #999;}
    */

    .BoardView{margin-bottom: 100px;}
    .BoardView header{padding: 10px;}
    .BoardView .title{font-size: 14px;}
    .BoardView .h_info li{font-size: 12px; line-height: 20px;}
    .BoardView .contents{font-size: 13px; padding: 20px 10px;}
    .BoardView .bottomBtn .mBtn{font-size: 15px; height: 35px; line-height: 35px; margin-top: 20px;}
    .BoardView .date::before, .BoardView .date::after{display: none;}
    .BoardView .h_info li{margin-right: 10px;}
    .BoardView iframe{height: 250px !important;}

    table.write th{width: 20%; font-size: 12px;}
    table.write input[type=text], table.write input[type=tel], table.write input[type=email], table.write input[type=password], table.write textarea{font-size: 12px; font-weight: 400;}

    #Reply h3{font-size: 15px;}
    .replyWrite div.option{font-size: 12px;}
    .replyWrite fieldset.text{padding-right: 100px;}
    .replyWrite fieldset.text textarea,
    .replyWrite fieldset.text .btn{height: 80px; width: 90px;}

    .boardList .galleryList article{height: 200px; width: 49%; padding: 0;}
    .boardList .galleryList article .thumb{height: 200px;}

    .boardSearch select{width: 30%;}
    .boardSearch input[type="text"]{width: 40%;}
    .boardSearch button{width: 20%;}

}

@media all  and (max-width: 555px){

    /* board */
    table.write th{width: 28%; font-size: 2.5vw;}
    
    .BoardView .bottomBtn .mBtn{font-size: 12px; width: 70px; margin: 0 1px;}

    #Reply textarea{font-size: 12px;}
    .replyWrite fieldset.text .btn button{font-size: 12px;}
    #replyListContents{font-size: 12px;}

}