@charset "utf-8";

@media screen and (max-width:1100px){
    .w_loc > div{
        width:100%;
    }
}
@media screen and (max-width:960px){
    .w_loc{
        display:none;
    }
    .wrap_m_loc{
        display:block;
        cursor: pointer;
        width:calc(100% - 40px);
        margin:0 auto;
    }
    .wrap_m_loc p{
        width:100%;
        background:rgba(117,17,55,.8);
        font-size:16px;
        font-weight:500;
        color:#fff;
        padding:17px 20px;
        position:relative;
    }
    .wrap_m_loc p i{
        color:#fff;
        position:absolute;
        top:16px;
        right:20px;
    }
    .m_loc{
        display:none;
    }
    .m_loc a{
        width:100%;
        background:rgba(0,0,0,.4);
        font-size:16px;
        color:#fff;
        padding:17px 20px;
        display:block;
        margin:1px auto;
    }
    .wrap_m_loc.changed{
        position:fixed;
        top:0;
        left:20px;
        z-index:10000;
    }
}
@media screen and (max-width:480px){
    .sub_visual{
        height:240px;
    }
}

/* sub */
@media screen and (max-width:1100px){
    .content > div.inner{
        width:100%;
        padding:0 20px;
    }
    .content section > div.inner,.content section:nth-child(odd) > div.inner{
        width:100%;
    }
    .content section{
        padding:70px 20px;
    }
}
@media screen and (max-width:760px){
    .content{
        margin-top:70px;
    }
    .content section{
        padding:45px 20px;
    }
    .content section:nth-child(odd){
        padding-bottom:45px !important;
    }
    .barTit h3{
        font-size:25px;
        padding-bottom:7px;
    }
    p.txt{
        font-size:16px;
    }
    .txtTit{
        font-size:25px;
        margin-bottom:20px;
    }
}

/* intro */
@media screen and (max-width:1200px){
    .intro .img_area{
        margin-right: -20px;
    }
}
@media screen and (max-width:760px){
    .intro .cer_area li{
        margin:0 7px 18px 7px;
    }
    .intro .cer_area li dt img{
        width:130px;
        height:auto;
    }
    .intro .cer_area li dd{
        font-size:16px;
    }
}
/* history */
@media screen and (max-width:960px){
    .skill > div{
        padding: 0 0 0 20px;
    }
    .skill .skill_logo{
        padding: 0 10px;
    }
}
@media screen and (max-width:760px){
    .history:after{
        display: none;
    }
    .history > div{
        width: 50%;
    }
    .history > div:nth-child(3),.history > div:last-child{
        margin-top: 30px;
    }
    .history .year{
        height: 45px;
    }
    .history ul{
        padding-top: 15px;
    }
    .skill{
        padding: 20px;
    }
    .skill > div{
        width: 50%;
        padding: 20px 10px 0 10px;
    }
    .skill > div:first-child{
        width: 100%;
        border-bottom: 1px solid #dcdcdc;
        padding: 0 0 20px 0;
    }
    .skill > div:nth-child(2){
        border-left: 0;
    }
}
@media screen and (max-width:480px){
    .history > div{
        width: 100%;
    }
    .history > div:nth-child(2){
        margin-top: 30px;
    }
    .skill > div{
        width: 100%;
        padding: 0 20px;
    }
    .skill > div:first-child{
        margin-bottom: 20px;
    }
}
/* location */
@media screen and (max-width:960px){
    .location .map_txt ul{
        display:block;
    }
    .location .map_txt li{
        margin-bottom:25px;
    }
    .location .map_txt li:last-child{
        margin-bottom:0;
    }
}
@media screen and (max-width:760px){
    .location .map_txt dt{
        font-size:18px;
        margin-bottom:10px;
    }
    .location .map_txt dd{
        font-size:16px;
    }
    .location .map_txt li{
        background-size:35px auto;
        padding-left:60px !important;
        background-position:0 20%;
    }
    .location > div > div:nth-child(2){
        padding:40px 0;
    }
    .location > div > div:last-child{
        padding-top:40px;
    }
    .location #map_head,.location #map_factory{
        height:300px;
    }

}

/* membrane */
@media screen and (max-width:1100px){
    .mem_kind .kind .swiper-slide{
        width: 100% !important;
        padding-bottom: 30px;
    }
    .mem_kind .kind_img span{
        position: absolute;
        width: 100%;
        right: 0;
        text-align: center;
        font-size: 15px;
        color: #fff;
        line-height: 18px;    
        padding-right: 10px;
    }
    .mem_kind .swiper-pagination1,.mem_compare .swiper-pagination2{
        display: block;
    }
    .mem_compare .swiper-slide{
        width: 50%;
        padding-bottom: 30px;
    }
}
@media screen and (max-width:760px){
    .mem_kind .txtTit{
        background: none;
        padding-bottom: 35px;
    }
    .mem_kind .txtTit:after{
        content:'';
        position: absolute;
        bottom: 0;
        left: 50%;
        width: 3px;
        height: 35px;
        background: #fff;
    }
    .mem_kind .txtTit span{
        display: block;
        font-size: 22px;
        line-height:25px;
        padding: 10px 15px;
    }
    .mem_kind .txtTit span br{
        display: block;
    }
    .mem_compare .swiper-slide{
        width: 100%;
    }
    .mem_compare dt{
        height: 180px !important;
    }
    .mem_compare dt img{
        height: 100px;
        width: auto;
    }
    .mem_compare .bTit dt{
        line-height: 180px;
    }
}
/* etfe */
@media screen and (max-width:760px){
    .etfe table{
        width:100%;
    }
    .etfe .wrap_table table:nth-child(2){
        border:0;
    }
    .etfe table th,.etfe table td{
        height:auto;
        padding:15px 0;
    }
    .etfe table th{
        width:40%;
    }
    .etfe .img_area .m_img{
        display:block;
    }
    .etfe .img_area .w_img{
        display:none;
    }
}
/* replace */
@media screen and (max-width:1100px){
    .replace .line_bg hr.line1{
        top:13%;
    }
    .replace .line_bg hr.line2{
        top:42.5%;
    }
    .replace .line_bg hr.line3{
        top:72%;
    }
}
@media screen and (max-width:960px){
    .replace .line_bg{
        display:none;
    }
    .replace .step{
        width:33.33%;
        padding:0 10px;
        margin:0 0 40px 0;
    }
    .replace .step:before{
        content:'';
        display:block;
        position:Absolute;
        top:25px;
        left:0;
        width:100%;
        height:1px;
        background:#dcdcdc;
        z-index:-1;
    }
    .replace .step:after{
        top:13px;
        right:10px;
    }
}
@media screen and (max-width:760px){
    .replace .img_area{
        margin-top:40px;
    }
    .replace .step_area{
        padding-top:20px;
    }
    .replace .step{
        width:50%;
        margin:0 0 25px 0;
    }    
    .replace .c_num{
        width:30px;
        height:30px;
        line-height:30px;
        font-size:14px;
    }
    .replace .step:before{
        top:15px;
    }
    .replace .step:after{
        width:7px;
        height:14px;
        top:8px;
        right:5px;
        background-size:cover;
    }
    .replace .step dt{
        font-size:18px;
        margin:15px 0 7px 0;
    }
    .replace .step dd{
        font-size:15px;
    }

}
/* mas */
@media screen and (max-width:760px){
    #mas-ani .mas_tit a{
        padding: 15px 30px 15px;
    }
    #mas-ani .mas_tit dt{
        font-size: 18px;
        line-height: 22px;
    }
    #mas-ani .mas_tit dd{
        font-size: 16px;
        line-height: 20px;
    }
    .mas section .picArea{
        width: 100%;
    }
    .mas .picArea{
        height:275px;
    }
    .mas .areaCon{
        width: 273px;
        margin: 0 auto;
    }
    .mas .areaCon .caption{
        width: 273px;
        top: 225px;
        height: 50px;
    }
    .mas .areaCon .caption h3{
        line-height:50px;
        font-size:18px;
    }
    .mas .areaCon .caption ul{
        top: 60px;
        left: calc(50% - 75px);
    }
    .mas .areaCon .caption li{
        font-size:14px;
        line-height:30px;
        width:170px;
        padding-left:10px;
    }        
    .mas .areaCon > p{
        height: 275px;
        text-align: center;
    }
    .mas .areaCon > p img{
        left: 0;
        height: 100%;
        width: auto;
    }
}
/* portfolio */
@media screen and (max-width:1100px){
    .portfolio{
        width: 100%;
        padding:0 20px;
    }
}
@media screen and (max-width:760px){
    .portfolio .barTit{
        margin-bottom: 45px;
    }
}

/* qna*/
@media screen and (max-width:1100px){
    .qna{
        width: 100%;
        padding:0 20px;
    }
}
@media screen and (max-width:960px){
    .qna .flex input#wr_name,.qna .flex input.telnum,.qna .flex input.email{
        width: 40%;
    }
}
@media screen and (max-width:760px){
    .qna .agree_area label{
        font-size: 16px;
        line-height: 30px;
    }
    .qna .flex{
        padding: 15px 0;
    }
    .qna .flex label{
        width: 15%;
        min-width: 100px;
        padding: 0 15px;
        font-size: 16px;
    }
    .qna .flex textarea{
        height: 150px;
    }
    .qna .agree_area label.css-checkbox{
        font-size: 14px;
        line-height: 30px;
    }
    input.css-checkbox:checked+label.css-checkbox{
        background-size:20px 20px;
    }
    .qna .agree_area label.css-checkbox{
        background-size:20px 20px;
        padding:0 0 0 25px;
        height:20px;
        line-height:20px;
    }
    .qna .agree_area .agree_txt{
        padding: 20px;
        font-size: 14px;
    }
    .qna .btn_confirm{
        margin-top: 20px;
    }
    .qna .btn_submit{
        font-size: 18px;
        width: 150px;
        height: 50px;
    }
    .qna .flex input#wr_name,.qna .flex input.telnum,.qna .flex input.email{
        width: 60%;
    }
}
@media screen and (max-width:480px){
    .qna .flex input#wr_name,.qna .flex input.telnum,.qna .flex input.email{
        width: 85%;
    }
}

/* certify */
@media screen and (max-width:760px){
    .certify .benefit{
        margin-top: 40px;
    }
    .certify .benefit > div{
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid #dcdcdc;
    }
    .certify .benefit > div:first-child{
        border-top: 1px solid #dcdcdc;
    }
    .certify .system dt{
        margin-bottom: 15px;
    }
    .certify .system dd{
        font-size: 15px;
        line-height: 1.2;
    }
    .certify .cer_area li{
        margin:0 7px 18px 7px;
    }
    .certify .cer_area li dt img{
        width: 130px;
        height: auto;
    }
    .certify .cer_area li dd{
        font-size:16px;
    }
}
@media screen and (max-width:480px){
    .certify .system > div{
        width: 100%;
        margin-bottom: 20px;
    }
    .certify .system > div:last-child{
        margin: 0;
    }
}

@media screen and (max-width:760px){
    br.mView{
        display: block;
    }
}