@charset "utf-8";
/* CSS Document */
@media only screen and (max-width:1200px) {
.visual_texts01{font-size:2.2em}
.m-quick ul li{padding:0 2px}
.m-quick ul{padding:20px 10px}
.main-visual{height:500px}
}
@media only screen and (max-width:1000px) {
.menu-bt-wrapper{display:block}
.gnb{display:none}
.gnb li{float:none}
#logo{padding:0 0 0 10px;}
#header{height:68px;z-index:99}
.pfixed{position:relative !important;height:68px !important;}
.head{margin-top:8px}
.m-quick ul li a>div{width:30%}
.m-quick ul li p{width:70%}
.notice{padding-right:30px}
.notice>a{right:35px;}
.navi{position:static}
}

@media only screen and (max-width:992px) {
.intro-img{width:40%}
.intro-txt{width:60%;}
.tab li a, .tab2 li a{border-left:1px solid #ccc;border-right:1px solid #ccc;padding:8px 0;font-size:12px}
.tab li a.on, .tab li.on a, .tab2 li a.on, .tab2 li.on a{background:#23529a;color:#fff}
}

@media only screen and (max-width:800px) {
.foot_layerpopup01{width:96%;margin-left:-48%}
body{font-size:14px}
.sub1, .sub2, .sub3, .sub4, .sub5{height:120px}
.main-block{margin:20px auto 50px}
.m-quick ul li a{font-size:1.1em}
.m-quick ul li a>div img{max-width:40px !important;width:calc(100% - 10px)}
.info{padding:20px 15px 20px 20px;}
.back-area>div{height:auto;min-height:250px;padding:30% 0}
.info h4{font-size:1.5em}
.info h4 img{width:24px}
}

@media only screen and (max-width:768px) {
.pro1-bg .col-lg-6, .pro1-bg .col-sm-6, .pro2-bg .col-lg-6, .pro2-bg .col-sm-6, .pro3-bg .col-lg-6, .pro3-bg .col-sm-6, .pro4-bg .col-lg-6, .pro4-bg .col-sm-6, .pro5-bg .col-lg-6, .pro5-bg .col-sm-6, .pro6-bg .col-lg-6, .pro6-bg .col-sm-6, .pro7-bg .col-lg-6, .pro7-bg .col-sm-6, .pro8-bg .col-lg-6, .pro8-bg .col-sm-6, .pro9-bg .col-lg-6, .pro9-bg .col-sm-6, .pro10-bg .col-lg-6, .pro10-bg .col-sm-6
{min-height:0}
.intro-img{width:100%}
.intro-txt{width:100%;padding:30px 0 0}
}

@media only screen and (max-width:720px) {
.info{line-height:1.2}
}


@media only screen and (max-width:680px) {
.sub-container{padding:40px 10px 0}
h2.sub-title{margin-bottom:30px}
.back-area{margin-bottom:60px}
.cunsult{margin:0 -5px 60px}
.cunsult>li{padding:0 5px}
}

@media only screen and (max-width:640px) {
.tab2 li{width:calc(50% + 1px);margin:-1px 0 0 -1px}
.left1, .right1{float:none;width:100%;}
.right1{padding:30px 0}
.main-visual{height:400px}
.camera_caption {top:35%;}
h2.title{font-size:36px}
.visual_texts01 h2, .visual_texts02 h2, .visual_texts03 h2{font-size:30px}
.visual_texts01 span, .visual_texts02 span, .visual_texts03 span{font-size:14px}
.footIn{padding:0}
.visual_texts01 h2:before, .visual_texts02 h2:before, .visual_texts03 h2:before{width:50px}
h2.sub-title:before{width:30px;margin-left:-15px;}
.safe-middle li h4{font-size:20px}
.safe-top .text{font-size:14px}
.m-quick ul li a{font-size:1.2em}
.pc{display:none}
.mo{display:block}
.sub1, .sub2, .sub3, .sub4, .sub5{height:80px}
.e-copy{font-size:2em}
.e-copy p{margin-right:10px}
.m-quick ul li{width:50%;padding:2px}
.notice>a{right:0}
}

@media only screen and (max-width:600px) {
.notice{width:100%;padding-right:0}
.main-bnr{width:100%;margin-top:20px}
.main-bnr>a{padding:20% 0}
}

@media only screen and (max-width:480px) {
.footIn ul li{font-size:14px}
.visual_texts01{font-size:1.5em}
body{font-size:12px}
.teach1>li{width:100%}
.teach1>li:nth-child(2n-1){border-top-color:#1462b2}
.teach1>li:nth-child(4){border-top-color:#2bb048}
.main-visual{height:300px}
.more{width:auto}
.cunsult>li{width:100%;margin-bottom:20px;}
.cunsult>li>div p{margin-top:20px}
h3.sub{margin:20px 0 10px}
.info h4{margin-bottom:5px;font-size:1.4em}
.info{padding:10px}
.info h4 img{width:18px}
}