@charset "utf-8";

html, body {height:100%;margin:0;padding:0;width:100%;}
#skip{top:0;right:0;position:absolute;width:100%;height:15px;text-align:center}
#skip li a{display:block;left:-10000px;position:absolute;top:0;width:100%;text-align:center;z-index:0;height:1px}
#skip li a:hover, #skip li a:focus, #skip li a:active {background:#363636;position:absolute;top:0px;left:0;z-index:5;color:#fff;width:100%;height:25px;padding:5px 0 0 0}
.blind{display:block;overflow:hidden;position:absolute;top:0;left:-5000px;font-size:1.8em}
.hide{display:none !important;margin:0;padding:0}
button{border:none}

header{border-bottom:3px solid #180e5e;background:#606060;position:relative;z-index:3}
.gnb{overflow:hidden}
.gnb p{float:left}
.gnb p a{display:block;padding:10px 15px;background:#424242;color:#fff}
.gnb p a:after{content:"";display:inline-block;width:4px;height:7px;margin-left:10px;background:url("/resource/eco/images/common/ico.png") no-repeat -66px -260px}
.gnb p a:hover,.gnb p a:focus{text-decoration:underline}
.gnb ul{overflow:hidden;float:right}
.gnb li{float:left;margin-right:15px}
.gnb li a{color:#fff;display:block;padding:10px 0}
.gnb li a:hover,.gnb li a:focus{text-decoration:underline}
.head{background:#fff;position:relative}
.head h1{border-bottom:1px solid #e0e0e0;padding: 0 0 0 10px;height: 66px;box-sizing: content-box;display: flex;flex-wrap: wrap;align-items: center;align-content: center;}
.head h1 a{font-size:18px;letter-spacing:-0.05em;color:#58585a;display: flex;flex-wrap: wrap;align-items: center;width: max-content;}
.head h1 img{width:60px;vertical-align:middle;margin-right:10px}
.head h1 span{margin-top: .3em;}
.menu{position:relative}
.menu button{width:40px;height:0;padding:40px 0 0 0;overflow:hidden;background:url("/resource/eco/images/common/ico.png") no-repeat;position:absolute;top:-55px;right:15px}
.menu div button{background-position:-40px 0}
.menu>div{display:none;position:absolute;top:0;right:0;width:100%}
.menu div.on{display:block}
.menu li a{display:block}
.menu li a:hover,.menu li a:focus{text-decoration:underline}
.menu>div>ul>li{border-top:1px solid #43359a}
.menu>div>ul>li>a{padding:15px 20px;background:#180e5e;color:#fff;font-size:18px}
.menu>div>ul>li>a:after{content:"+";display:block;float:right}
.menu>div>ul>li.on>a:after{content:"-"}
.menu div div{padding:15px}
.menu li li a{padding:7px 15px;font-size:16px}
.menu li li a:before{content:"";display:inline-block;width:3px;height:3px;vertical-align:middle;background:#180e5e;margin-right:7px}
.menu li div{display:none;background:#fff}
.menu li.on div{display:block}

section{position:relative;z-index:1}
.main_container{background:url("/resource/eco/images/common/m_bg.jpg") no-repeat center 0}
.air{background:url("/resource/eco/images/common/air_bg.png") no-repeat #233969;background-size:cover;color:#fff}
.air li{border-top:1px solid #8f9bb2;padding:30px 0 30px 140px;position:relative}
.air li:first-child{border:none}
.air li:before{content:"";display:block;width:70px;height:70px;position:absolute;top:25px;left:40px;background:url("/resource/eco/images/common/ico.png") no-repeat}
.air li>em{font-style:normal;display:block;margin-bottom:10px;text-decoration:underline;font-size:20px}
.air strong{font-size:26px;font-weight:bold}
.air strong em{display:inline-block;width:45px;height:30px;font-style:normal;color:#fff;text-align:center;font-size:16px;vertical-align:middle;padding-top:10px;margin-right:10px}
.air strong em.type1{background:#0072bc}
.air strong em.type2{background:#197b30}
.air strong em.type3{background:#e35917}
.air strong em.type4{background:#ed1c24}
.air span{font-weight:normal;font-size:16px;vertical-align:baseline}
.air .no1:before{background-position:center -40px}
.air .no2:before{background-position:center -110px}
.air .no3:before{background-position:center -180px}
.air li.no4{padding-left:40px;}
.air li.no4:before{display:none}
.air li.no4 a{color:#fff;padding:10px 20px;background:#233969;border-radius:30px;font-size:18px;display:inline-block}
.air li.no4 p{font-size:18px}
.air li.no4 p strong{margin:20px 0 6px;font-size:18px;display:block;}
.org{background:url("/resource/eco/images/common/org_bg.png") no-repeat right center #03452c;background-size:auto 100%;padding:30px}
.org h2{font-size:30px;color:#fff;margin-bottom:20px}
.org>ul>li{margin-top:5px;position:relative}
.org button{background:url("/resource/eco/images/common/ico.png") no-repeat #fff;color:#010101;font-size:16px;width:100%;height:45px;text-align:left}
.org li>button{background-position:right -260px}
.org li div button{background-position:right -302px;position:absolute;top:-46px;left:0}
.org div{display:none;position:absolute;top:46px;left:0;right:0;background:#606060;padding:20px;z-index:2}
.org div.on{display:block}
.org div a{display:block;padding:5px 0;color:#fff}
.org div a:before{content:"";display:inline-block;width:3px;height:3px;vertical-align:middle;background:#fff;margin-right:7px}
.org div a:hover,.org div a:focus{text-decoration:underline}
.org>ul>li a{display:block;background:#fff;color:#010101;font-size:16px;width:100%;height:25px;padding:10px 0;text-align:center}
.bad{background:url("/resource/eco/images/common/bad_bg.png") no-repeat right bottom #b7eeb0;padding:40px 30px;height:140px}
.bad h2{font-size:24px;color:#010101;margin-bottom:15px}
.bad .smell2{margin-top:15px;}
.bad a{display:inline-block;padding:7px 20px;background:#096a04;border-radius:30px;color:#fff}
.bad a:after{content:"→";vertical-align:middle;margin-left:10px}
.bad a:hover,.bad a:focus{background:#034600}

footer{color:#000;line-height:1.5em;z-index:2;border-top:1px solid #e0e0e0}
footer div{padding:20px 15px;position:relative;box-sizing: content-box;}
footer h2{display:none;font-size:24px;color:#58585a;position:absolute;top:20px;left:20px}
footer h2 img{vertical-align:middle;margin-right:20px}
footer address{font-style:normal;margin-bottom:5px}
footer span{display:inline-block;width:15px}

.sub_container{padding-top: 30px;}
.sub_container:after{content:"";display:block;clear:both}
.sub_container>.left{display:none;float:left;width:250px}
.sub_container>.left h2{background:url("/resource/eco/images/common/lnb_bg.gif");font-size:18px;color:#fff;word-break:keep-all;padding:20px;border-radius:10px 10px 0 0;text-align:center;line-height:1.25em}
.sub_container>.left ul{border:1px solid #d8d8d8;border-top:none}
.sub_container>.left li{border-top:1px solid #d8d8d8;background:#efefef}
.sub_container>.left li:first-child{border:none}
.sub_container>.left li a{display:block;padding:20px 40px 20px 20px;font-size:16px;color:#45423f;background:#fff;position:relative;word-break: keep-all;line-height: 1.25em;}
.sub_container>.left>ul>li ul{padding-bottom:15px}
.sub_container>.left>ul>li.on>a{color:#184314;font-weight:bold}
.sub_container>.left>ul>li.on>a:after{content:"";display:inline-block;width:17px;height:18px;background:url("/resource/eco/images/common/ico.png") no-repeat -53px -400px;position:absolute;top:40%;right:20px}
.sub_container>.left li ul{display:none;border:none;margin-top:15px}
.sub_container>.left li.on ul{display:block}
.sub_container>.left li li{border:none}
.sub_container>.left li li a{font-size:14px;padding:5px 10px 5px 20px;background:none}
.sub_container>.left li li.on a{color:#000;font-weight:bold}
.sub_container>.right{width:90%;margin:0 auto;line-height:1.6em;}
.right>.tit{border-bottom:1px solid #d8d8d8;padding:0 0 20px 0;position:relative}
.right>.tit p{background:url("/resource/eco/images/common/ico.png") no-repeat 0 -417px;padding-left:15px;margin-bottom:25px}
.right>.tit p em{font-style:normal;font-weight:bold}
.right>.tit h3{font-size:22px;color:#4e4e4e;line-height: 1.4;}
.right>.tit ul{overflow:hidden;margin-top:5px;position: absolute;right: 0;top: 0;margin: auto;}
.right>.tit li{float: right;margin-right:3px}
.right>.tit li a{display:block;width:24px;height:0;padding:24px 0 0 0;overflow:hidden;background:url("/resource/eco/images/common/ico.png") no-repeat}
.right>.tit li.print a{background-position:0 -360px}
.right>.tit li.face a{background-position:-24px -360px}
.right>.tit li.twi a{background-position:-48px -360px}
.s_con{padding-bottom: 40px;}


@media all and (min-width:768px){
	.head h1{height:50px;padding:20px}
	.head h1 a{font-size:24px; margin:auto;}
	.head h1 img{width:auto}
    .head h1 span{margin-top: .5em;}
	.menu button{top:-64px;right:20px}

	.m_con{padding:110px 30px}
	.m_con:after{content:"";display:block;clear:both}
	.air ul{overflow:hidden}
	.air li{float:left;width:25%;box-sizing:border-box;border-top:none;border-left:1px solid #8f9bb2;text-align:center;padding:50px 0}
	.air li:before{position:static;margin:0 auto 30px auto}
	.air li>em{font-size:24px;margin-bottom:20px}
	.air strong{font-size:46px}
	.air li.no4{padding-left:0;}
	.air li.no4 a{margin:0 0 20px;}
	.air li.no4 a:hover{background:#11254f;text-decoration:underline}
	.air li.no4 p strong{text-decoration:underline}
	.org{width:66.666%;height:220px;box-sizing:border-box;float:left}
	.org>ul:after{content:"";display:block;clear:both}
	.org>ul>li{float:left;width:31%;margin:0 2% 10px 0}
	.bad{width:33.333%;height:220px;padding:30px;box-sizing:border-box;float:left}

	footer{font-size:16px}

	.sub_container>.right{width:94%}
	.right>.tit ul{bottom:20px;right:-3px; top:auto;}
}
@media all and (min-width:1500px){
	.gnb{max-width: 1500px;margin:0 auto}
	.head{position:relative}
	.head h1{text-align:center}
	.menu button{display:none}
	.menu div{display:block;position:static}
	.menu>div>ul{overflow:hidden;width:1500px;margin:0 auto}
	.menu>div>ul>li{float:left;border:none}
	.menu>div>ul>li:before{content:"/";display:inline-block;vertical-align:top;margin-top:31px}
	.menu>div>ul>li:first-child:before{display:none}
	.menu>div>ul>li>a{display:inline-block;background:none;padding: 30px 25px;color:#000;position:relative;}
	.menu>div>ul>li>a:after{display:none}
	.menu>div>ul>li.on>a:after{content:"";height:5px;display:block;background:#180e5e;position:absolute;bottom:0px;left:0;right:0;}
	.menu div div{position:absolute;top:80px;left:0;background:#180e5e;width:100%;padding:15px 0}
	.menu ul ul{overflow:hidden;width: 1500px;flex-wrap: wrap;display: flex;margin:0 auto;justify-content: flex-start;}
	.menu li li{float:left;margin-right:10px}
	.menu li li a{color:#fff}
	.menu li li a:before{background:#fff}
 	 /*
	.menu02 ul li:first-child{margin-left:150px}
	.menu03 ul li:first-child{margin-left:200px}
	.menu04 ul li:first-child{margin-left:0}
	.menu05 ul li:first-child{margin-left:500px}
	.menu06 ul li:first-child{margin-left:180px}
	.menu07 ul li:first-child{margin-left:650px}
	.menu08 ul li:first-child{margin-left:300px}
	*/
  	.menu ul .menu01 ul li:first-child{padding-left: 135px;}
  	.menu ul .menu02 ul li:first-child{padding-left: 285px;}
	.menu ul .menu03 ul li:first-child{padding-left: 285px;}
	.menu ul .menu04 ul{justify-content: center;}
	.menu ul .menu04 ul li:first-child{padding-left: 208px;}
	.menu ul .menu05 ul,
	.menu ul .menu06 ul,
	.menu ul .menu07 ul,
	.menu ul .menu08 ul{justify-content:flex-end;}
	.menu ul .menu05 ul li:first-child{padding-right: 1.5em;}

	.m_con{width:1200px;padding:100px 0;margin:0 auto}

	footer div{width:700px;margin:0 auto;padding-left:500px}
	footer h2{display:block}

	.sub_container{width:1500px;margin:0 auto;padding-bottom: 30px;}
	.sub_container>.left{display:block}
	.sub_container>.right{float:right;width:1200px;padding-top: 45px;}
	.right>.tit h3{font-size:30px;}
	.s_con{padding:20px 0 40px;}
}