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

    .mainBox.work .titleArea .txt{padding-left: 70px;}

    .mainBox.company.active .conArea .imgBox{width: 75%;}

}

@media all  and (max-width: 1400px){
    .title1{font-size: 50px;}
    .title2{font-size: 26px;}

    .mainBox.company #companySlide .swiper-pagination{left: 6%;}

    
}

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

    .inner{width: 95%;}
    .title1{font-size: 45px;}
    .title2{font-size: 24px;}

    #header{padding-top: 45px;}
    #header .logo img{height: 45px;}

    #fullPageMenu{left: 20px;}
    #fullPageMenu li{width: 12px; text-align: center; padding: 0;}
    #fullPageMenu li a{background: #fff; width: 6px; height: 6px; display: inline-block; margin: 8px 0;}
    #fullPageMenu li.active{background: none;}
    #fullPageMenu li.active a{background: #fff; width: 12px; height: 12px;}

    /* main */
    #navBtn{right: 30px;}
    .sideTxt .txt{right: 0;}
    .sideTxt .scrollBtn{display: none;}

    .mainBox h2{font-size: 25px;}

    .mainBox .titleArea{float: none; width: 100%; height: auto; text-align: center;}
    .mainBox .titleArea .txt{position: relative; left: auto; top: auto; transform: translate(0, 0);}

    .mainBox .mainVisualLogo{height: 110px;}

    .mainBox.work .titleArea{width: 100%; padding-top: 120px;}
    .mainBox.work .titleArea .txt{padding-left: 0; left: auto; top: auto; transform: translate(0, 0);}
    .mainBox.work .titleArea .txt .title1{margin-bottom: 22px;}
    .mainBox.work .titleArea .txt .boardCate li{display: inline-block; margin: 0 10px;}
    .mainBox.work .titleArea .txt .boardCate li a{font-size: 20px;}
    .mainBox.work .boardArea{width: 80%; height: 65vh; float: none; margin: 50px auto 0 auto;}
    .mainBox.active .videoList li:nth-child(1) iframe{position: relative; transform: scale(1); animation: none;}
   

    .mainBox.company .titleArea{width: 100%; padding-top: 150px;}
    .mainBox.company .titleArea .rollList li{display: inline-block; margin: 0 10px;}
    .mainBox.company .conArea{float: none; width: 100%; height: 100%;}
    .mainBox.company .conArea .txtBox{position: relative; width: 100%; max-width: 800px; margin: 0 auto; top: 30%; text-align: center; padding: 0 65px;}
    .mainBox.company.active .conArea .imgBox{position: relative; width: 100%;  text-align: center;}
    .mainBox.company.active .conArea .imgBox img{max-width: 800px;}
    .mainBox.company #companySlide .swiper-pagination{left: 0; top: 100px; transform: translate(0); width: 100%; text-align: center;}
    .mainBox.company #companySlide .swiper-pagination span{display: inline-block; margin: 0 10px;}

    .contactArea .titleArea{ padding: 120px 0 50px 0;}
    .contactArea .titleArea .txt .info{margin: 10px 0;}
    .contactArea .titleArea .txt .info li{display: inline-block; margin: 0 10px;}
    .contactArea .titleArea .txt .info li + li{margin-top: 0;}
    .contactArea .titleArea .txt .copyright{margin-top: 0;}
    .contactArea .infoArea{float: none; width: 80%; height: auto; margin: 0 auto; padding: 30px 50px;}
    .contactArea .infoArea article h3{font-size: 24px; margin-bottom: 10px;}
    .contactArea .infoArea article .con{font-size: 16px;}
    .mainBox.contact.active article{padding: 15px 0;}

    .sns-link{padding: 20px;}

    .BoardContainer{padding-top: 100px;}

    .videoList.board li{width: 50%;}
    .videoList li:hover i{transform: none;}
    
    /* 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%;}

    /* reply */
    #Reply{width: 95%; margin: 0 auto;}

    .contact-board{flex-direction: column;}
    .contact-board .board-form{width: 100%;}
    .contact-board .footer-info{width: 100%;}

    .board-table .num{display: none;}
}

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

    /* common */
    #navBtn{display: block; width: 30px; height: 20px; top: 20px; right: 20px;}
    #navBtn.on{height: 22px;}
    .sideTxt .txt{display: none;}
    .sideTxt .scrollBtn{display: none;}

    #header .gnb{display: none;}

    #header{padding-top: 15px; height: auto;}
    #header .logo img{height: 32px;}

    #fullPageMenu{display: none;}

    #gnb .list_nav{font-size: 35px;}

    .video-bg-use .video-bg iframe{transform: scale(4);}

     /* main */
     .title1{font-size: 35px;}

    .mainBox h2{font-size: 20px;}
    .mainBox .mainVisualLogo{height: auto; width: 60%;}
    #mainVisual .controller .btn .swiper-pagination-current{font-size: 20px;}
    #mainVisual .controller .btn .swiper-button-prev, #mainVisual .controller .btn .swiper-button-next{height: 12px; margin-top: -17px;}
    .gridStyle{display: none;}

    .mainBox.work .titleArea .txt .boardCate li a{font-size: 17px;}
    .mainBox.company #companySlide .swiper-pagination{top: 80px; font-size: 17px;}

    .mainBox.work .boardArea{width: 85%;}
    .tabBox li{width: 100%; float: none;}

    .mainBox.company .conArea .imgBox,
    .mainBox.company.active .conArea .imgBox{opacity: 1;  right: 0%; top: 25%; width: 100%; transform: translateY(0); position: relative;}
    .mainBox.company .conArea .txtBox .title1,
    .mainBox.company.active .conArea .txtBox .title1,
    .mainBox.company .conArea .txtBox .title2,
    .mainBox.company.active .conArea .txtBox .title2,
    .mainBox.company .conArea .txtBox .t3,
    .mainBox.company.active .conArea .txtBox .t3{transform: translateY(0); opacity: 1;}

    .mainBox.company .conArea .txtBox{margin-top: 30px;}
    .mainBox.company.active .conArea .txtBox .title1,
    .mainBox.company.active .conArea .txtBox .title2,
    .mainBox.company.active .conArea .txtBox .t3,
    .mainBox.company.active .conArea .imgBox{animation: none}

    .contactArea .titleArea{padding: 80px 0 30px 0;}
    .contactArea .titleArea .txt .title1{margin: 30px 0 10px 0;}
    .contactArea .titleArea .txt .info{font-size: 14px;}
    .contactArea .titleArea .txt .info b{min-width: auto;}
    .contactArea .infoArea{padding: 20px; margin-bottom: 50px;}
    .contactArea .infoArea article{padding-bottom: 15px;}
    .contactArea .infoArea article h3{font-size: 18px; margin-bottom: 5px;}
    .contactArea .infoArea article .con{font-size: 14px;}
    .contactArea .infoArea article .con .mapArea .root_daum_roughmap{height: 150px;}
    .mainBox.contact article{transform: translateY(0); opacity: 1;}
    .mainBox.contact.active article{animation: none;}
    .contactArea .infoArea article .con p + p{padding-top: 2px;}

    .modal-container .modal-wrapper{padding: 0; width: 90%;}
    .modal-container .modal-wrapper .close{top: -40px; right: 0; width: 30px; height: 30px;}

    
    .board-table .check{display: none;}
    .board-table .date{display: none;}
    .board-table .cate{width: 20%;}
    .board-table .name{width: 20%;}
    .board-table .state{display: none;}


    .videoList.board li{width: 100%;}

    #bbsSchForm .search_wrap select{height: 35px; font-size: 12px;}
    #bbsSchForm .search_wrap input{height: 35px; font-size: 12px;}
    #bbsSchForm .search_wrap button{height: 35px; font-size: 12px;}

    /* 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 .title{font-size: 14px;}
    .BoardView .h_info li{font-size: 12px; line-height: 20px;}
    .BoardView .contents{font-size: 13px;}
    .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;}

    .youtubeFrameWrap{height: 400px;}

    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;}

}