/* latest version 200221 */

/* ************************************** *
* content
* ************************************** */
/* 공통 */
h3.tit-h3 { padding-left: 30px; margin: 80px 0 25px; background: url('image/tit-h3.gif') no-repeat top left; font-size: 21px; font-weight: bold; color: #005cb5; line-height: 1em;}
p.p-comm { font-size: 16px; color: #444; line-height: 1.7em;}
.bu-list li { padding-left: 42px; margin-bottom: 8px; background: url('image/bu-list.gif') no-repeat; background-position: 20px 8px; font-size: 16px; color: #444; line-height: 1.6em;}
.system-bot { margin-top: 100px; text-align: center; letter-spacing: -0.075em;}
.system-bot p:nth-of-type(1) { padding-top: 30px; margin-bottom: 10px; font-size: 28px; color: #41af2c;}
.system-bot p:nth-of-type(2) { display: inline-block; padding: 3px 10px; background: #005cb5; font-size: 32px; line-height: 1.2em; color: #fff;}
.system-bot p:nth-of-type(3) { display: inline-block;}
.system-bot p:nth-of-type(3) a { padding: 3px 10px; background: #f1e317; font-size: 32px; line-height: 1.2em; font-weight: 700; letter-spacing: 0; -webkit-animation: textBgChange ease-in-out 4s infinite; -ms-animation: textBgChange ease-in-out 4s infinite; -moz-animation: textBgChange ease-in-out 4s infinite; -o-animation: textBgChange ease-in-out 4s infinite; animation: textBgChange ease-in-out 4s infinite;}
/* table */
.div-tbl { padding: 30px 0 10px;}
.tbl-top { width: 100%; border-top: solid 2px #222; text-align: center;}
.tbl-top thead th { padding: 12px 10px; font-weight: bold; border: solid 1px #ccc; font-size: 14px; background: #edfbe9; color: #111; line-height: 1.4em;}
.tbl-top tbody th { padding: 12px; border: solid 1px #ccc; background: #f5f5f5; font-size: 14px; color: #333; line-height: 1.4em;}
.tbl-top tbody td { padding: 12px; border: solid 1px #ccc; font-size: 14px; color: #444; line-height: 1.4em;}
.tbl-top tbody td.td-left { text-align: left;}
.tbl-top .bg1 { background: #ffe3e3;}
.tbl-top .bg2 { background: #ececff;}
.tbl-top .bg3 { background: #def7ff;}
/* ////////////////////////////////////////////////// tablet & mobile */
@media all and (max-width:990px) {
	/* table */
    .div-tbl { overflow-x: scroll;}
    .div-tbl::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.3); border-radius: 10px; background-color: #f9f9f9;}
    .div-tbl::-webkit-scrollbar { height: 5px; background-color: #f9f9f9;}
    .div-tbl::-webkit-scrollbar-thumb { border-radius: 10px; -webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.3); background-color: #777;}
	.tbl-top { width: 990px;}
}
/* ////////////////////////////////////////////////// mobile */
@media all and (max-width:640px) {
    /* 공통 */
    h3.tit-h3 { margin: 60px 0 20px; padding-left: 25px; background-size: 14px; font-size: 17px;}
    p.p-comm {font-size: 14px;}
    .bu-list li { padding-left: 35px; background-size: 7px; background-position: 15px 8px; font-size: 13px;}
    .system-bot { margin-top: 60px;}
    .system-bot p:nth-of-type(1) { padding-top: 20px; font-size: 18px;}
    .system-bot p:nth-of-type(2) { font-size: 21px;}
    .system-bot p:nth-of-type(3) { display: block; margin-top: 10px;}
    .system-bot p:nth-of-type(3) a { font-size: 29px;}
	/* table */
	.tbl-top { width: 640px;}
    .div-tbl { padding: 20px 0 7px;}
    .tbl-top thead th { padding: 8px 6px; font-size: 13px;}
    .tbl-top tbody th { padding: 8px; font-size: 12px;}
    .tbl-top tbody td { padding: 8px; font-size: 12px;}
}
@-webkit-keyframes textBgChange {
	0% { background: #f1e317; color: #000;}
	50% { background: #41af2c; color: #fff;}
	100% { background: #f1e317; color: #000;}
}
@keyframes textBgChange {
	0% { background: #f1e317; color: #000;}
	50% { background: #41af2c; color: #fff;}
	100% { background: #f1e317; color: #000;}
}








/* 0101-방역서비스 */
.protection .damage { margin-top: 80px; padding: 50px; border: solid 1px #333; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; text-align: center;}
.protection .damage h3 { padding-bottom: 20px; font-size: 25px; letter-spacing: -0.075em;}
.protection .damage li { float: left; width: 30.33%; margin: 1.5%; padding-top: 130px; background-position: center top !important;}
.protection .damage li:nth-of-type(1) { background: url('image/ico-protection01.jpg') no-repeat;}
.protection .damage li:nth-of-type(2) { background: url('image/ico-protection02.jpg') no-repeat;}
.protection .damage li:nth-of-type(3) { background: url('image/ico-protection03.jpg') no-repeat;}
.protection .damage li:nth-of-type(4) { background: url('image/ico-protection04.jpg') no-repeat; margin: 1.5% 1.5% 1.5% 15.55%;}
.protection .damage li:nth-of-type(5) { background: url('image/ico-protection05.jpg') no-repeat;}
.protection .damage li h4 { font-size: 19px;}
.protection .damage li p { padding-top: 7px; font-size: 14px; color: #444; line-height: 1.6em;}
.protection .program { background: url('image/bg-dotline.gif') repeat-x left bottom;}
.protection .program li { float: left; width: 50%; padding: 30px 5% 30px 0; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; background: url('image/bg-dotline.gif') repeat-x left top;}
.protection .program li div { padding-left: 120px; background-position: 30px center !important;}
.protection .program li:nth-of-type(1) div { background: url('image/ico-program01.gif') no-repeat;}
.protection .program li:nth-of-type(2) div { background: url('image/ico-program02.gif') no-repeat;}
.protection .program li:nth-of-type(3) div { background: url('image/ico-program03.gif') no-repeat;}
.protection .program li:nth-of-type(4) div { background: url('image/ico-program04.gif') no-repeat;}
.protection .program li:nth-of-type(5) div { background: url('image/ico-program05.gif') no-repeat;}
.protection .program li:nth-of-type(6) div { background: url('image/ico-program06.gif') no-repeat;}
.protection .program li h4 { font-size: 19px;}
.protection .program li p { padding-top: 10px; font-size: 15px; color: #444; line-height: 1.6em;}
/* 0102-살균서비스 */
.virus { margin: 50px auto;}
.virus-list { width: 820px; margin: 0 auto;}
.virus-list li { float: left; width: 23%; margin: 0 1%;}
.virus-list li h4 { display: inline-block; padding: 4px 15px 5px; font-size: 15px; font-weight: bold; border-radius: 3px; border: solid 1px #5e1f74; color: #5e1f74;}
.virus-list li p { padding-top: 15px; font-size: 16px; color: #444; line-height: 1.8em;}
.sterilization-list { margin-top: 50px;}
.sterilization-list li { float: left; width: 27.33%; margin: 0 3%; text-align: center;}
.sterilization-list li img { max-width: 100%;}
.sterilization-list li h4 { padding: 40px 0 10px; font-size: 21px;}
.sterilization-list li p { font-size: 15px; color: #444; line-height: 1.7em;}
/* 0103-긴급서비스 */
.emergency p { margin: 70px 0; font-size: 16px; text-align: center;}
.emergency ul { display: table; margin: 0 auto;}
.emergency li { float: left; width: 250px; height: 60px; margin: 0 10px; border-radius: 30px; line-height: 60px; font-weight: bold; font-size: 17px; color: #fff; text-align: center;}
.emergency li:nth-of-type(1) { background: #44b228;}
.emergency li:nth-of-type(2) { background: #015db4;}
/* 0104-환불보장제도 */
.refund li { float: left; width: 50%;}
.refund li p { padding: 60px 0;}
.refund .refund-box { width: 400px; border-radius: 10px; border: solid 1px #e10000; background: #fffafa; padding: 20px 30px; font-size: 14px; line-height: 1.7em; color: #111;}
/* 02-서비스단가표 */
.tab .tab-nav { margin-bottom: 50px;}
.tab .tab-nav li { float: left; width: 15.66%; margin: 0.5%;}
.tab .tab-nav button { display: block; width: 100%; height: 50px; border-radius: 25px; background: #eee; border: solid 1px #eee; font-size: 14px; color: #111; text-align: center;}
.tab .tab-nav button:hover, .tab .tab-nav li.on button { background: #fff; border: solid 1px #44b228; color: #44b228;}
.tab .tab-con { z-index: 1;}
.tab .tab-con > li { display: none;}
.tab .tab-con > li.on { display: block;}
.price .txt-red { text-align: right; font-size: 15px; margin-top: 15px;}
.system-box { margin: 40px 0;}
.system-box li { position: relative; float: left; width: 48%; margin: 1%; padding: 30px 20px; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; box-shadow: 0 0 10px rgba(0,0,0,0.2); -webkit-box-shadow: 0 0 10px rgba(0,0,0,0.2); -ms-box-shadow: 0 0 10px rgba(0,0,0,0.2); -moz-box-shadow: 0 0 10px rgba(0,0,0,0.2); -o-box-shadow: 0 0 10px rgba(0,0,0,0.2);}
.system-box li h3 { position: absolute; left: 0; top: 25px; width: 150px; padding-top: 50px; background: url('image/ico-price-time.gif') no-repeat center 10px; font-size: 15px; font-weight: bold; color: #0461ae; text-align: center;}
.system-box li p { margin-left: 130px; min-height: 70px; font-size: 14px; color: #444; line-height: 1.7em;}
.system-box li.wd100 { width: 98%;}
/* 0401-신청방법 및 순서 */
.step { padding: 40px 0;}
.step li { float: left; width: 25%; background: url('image/bg-arr-step.gif') no-repeat 93% center;}
.step li div { width: 80%; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; padding: 40px; height: 300px; border: solid 1px #1580e8; background-position: right 40px bottom 40px !important; box-shadow: 3px 3px 3px rgba(0,0,0,0.2); -webkit-box-shadow: 3px 3px 3px rgba(0,0,0,0.2); -ms-box-shadow: 3px 3px 3px rgba(0,0,0,0.2); -moz-box-shadow: 3px 3px 3px rgba(0,0,0,0.2); -o-box-shadow: 3px 3px 3px rgba(0,0,0,0.2);}
.step li div p:nth-of-type(1) { font-size: 35px; font-family: 'Aldrich', sans-serif !important; color: #e1e1e1;}
.step li div h3 { padding: 5px 0; font-size: 17px; font-weight: bold; color: #111;}
.step li div p:nth-of-type(2) { font-size: 15px; color: #444; line-height: 1.5em;}
.step li:nth-of-type(1) div { background: url('image/ico-step01.jpg') no-repeat;}
.step li:nth-of-type(2) div { background: url('image/ico-step02.jpg') no-repeat;}
.step li:nth-of-type(3) div { background: url('image/ico-step03.jpg') no-repeat;}
.step li:nth-of-type(4) { background: none;}
.step li:nth-of-type(4) div { background: url('image/ico-step04.jpg') no-repeat;}
/* 0501-인사말 */
.greeting li { float: left; width: 43%;}
.greeting li:nth-of-type(2) { width: 50%; margin-left: 7%;}
.greeting h3 { margin: 50px 0; font-size: 30px; color: #111; letter-spacing: -0.075em; line-height: 1.2em;}
.greeting p { font-size: 17px; color: #444; line-height: 1.8em;}
.greeting p.p-sign { margin-top: 70px; font-size: 20px; text-align: right;}
/* 0502-찾아오시는길 */
.location .top-location { width: 530px; margin: 0 auto 50px; border-image-width: 2px; border-style: solid; border-image: linear-gradient(to right, rgba(69,180,37,1) 0%, rgba(0,92,182,1) 100%); border-image-slice: 1; text-align: center;}
.location .top-location p { display: inline-block; padding: 25px 0 25px 100px; background: url('image/ico-location.png') no-repeat; background-position: left center; font-size: 17px; color: #222; line-height: 1.6em;}
.location .btn-map { margin-top: 50px; text-align: center;}
/* 0503-대리점/지사모집 */
.agency{text-align:center;}
.agency h3 { margin: 30px 0; font-size: 22px;}
.agency p { font-size: 18px;}
.agency .agency-btn{width:200px;background:#5c5c5c;border-radius: 50px;margin:80px auto;}
.agency .agency-btn a{line-height:60px; padding:30px 45px; color:#fff;}
.agency .agency-btn:hover{ background:#44b228;}

/* ////////////////////////////////////////////////// notebook & tablet & mobile */
@media all and (max-width:1400px) {
    /* 0401-신청방법 및 순서 */
    .step li { width: 50%; margin: 0 0 30px;}

}
/* ////////////////////////////////////////////////// notebook & tablet & mobile */
@media all and (max-width:1200px) {
    /* 0104-환불보장제도 */
    .refund li p { padding: 20px 0 60px;}
    /* 0501-인사말 */
    .greeting h3 { margin: 0 0 50px 0;}
    /* 02-서비스단가표 */
    .system-box li { width: 98%;}
}
/* ////////////////////////////////////////////////// tablet & mobile */
@media all and (max-width:990px) {
    /* 0101-방역서비스 */
    .protection .program li { float: none; width: 100%;}
    /* 0102-살균서비스 */
    .virus-list { width: 100%;}
    .virus-list li { width: 48%; margin: 0 1% 30px;}
    /* 0104-환불보장제도 */
    .refund li { float: none; width: 100%;}
    /* 02-서비스단가표 */
    .tab .tab-nav li { width: 32.33%;}
    .tab .tab-nav button { height: 46px; font-size: 13px;}
    /* 0501-인사말 */
	.greeting li { float: none; width: 100%;}
    .greeting li:nth-of-type(2) { width: 100%; margin: 60px 0 0;}
}
/* ////////////////////////////////////////////////// mobile */
@media all and (max-width:640px) {
    /* 0101-방역서비스 */
    .protection .damage { margin-top: 60px; padding: 30px 20px 10px;}
    .protection .damage h3 { font-size: 19px;}
    .protection .damage li { float: none; width: 100%; margin: 0 0 20px 0; padding: 0 0 0 70px; background-size: 50px !important; background-position: left 10px !important; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; text-align: left;}
    .protection .damage li:nth-of-type(4) { margin: 0 0 20px 0;}
    .protection .damage li h4 { font-size: 16px;}
    .protection .damage li p { padding-top: 5px; font-size: 13px;}
    .protection .program li h4 { font-size: 16px;}
    .protection .program li p { padding-top: 6px; font-size: 13px;}
    /* 0102-살균서비스 */
    .virus { margin: 35px auto;}
    .virus-list li h4 { padding: 2px 10px 3px; font-size: 13px;}
    .virus-list li p { font-size: 14px;}
    .sterilization-list li { float: none; width: 80%; margin: 0 auto 50px;}
    .sterilization-list li h4 { padding: 30px 0 7px; font-size: 18px;}
    .sterilization-list li p { font-size: 13px;}
    /* 0103-긴급서비스 */
    .emergency p { margin: 40px 0;}
    .emergency ul { width: 100%;}
    .emergency li { float: left; width: 47%; height: 46px; margin: 0 1.5%; line-height: 46px; font-size: 14px;}
    /* 0104-환불보장제도 */
    .refund li p { padding: 30px 0; font-size: 14px;}
    .refund .refund-box { width: 100%; -webkit-box-sizing: border-box; -ms-box-sizing: border-box; -moz-box-sizing: border-box; -o-box-sizing: border-box; box-sizing: border-box; padding: 15px 20px; font-size: 13px;}
    /* 02-서비스단가표 */
    .tab .tab-nav button { height: 36px; font-size: 11px;}
    .price .txt-red { font-size: 13px; margin-top: 10px;}
    .price p { font-size: 13px;}
    .system-box { margin: 25px 0;}
    .system-box li { padding: 20px;}
    .system-box li h3 { left: 50%; top: 10px; transform: translate(-50%,0); width: 150px; padding-top: 42px; background-size: 25px; font-size: 14px;}
    .system-box li p { margin: 60px 0 0 0; min-height: auto; font-size: 13px;}
    /* 0401-신청방법 및 순서 */
    .step li { float: none; width: 100%; background-size: 15px; padding-bottom: 35px; margin: 0 0 20px; background: url('image/bg-arr-step2.jpg') no-repeat center bottom; background-size: 25px;}
    .step li div { width: 100%; padding: 25px; height: auto; background-position: right 20px top 25px !important; background-size: 45px !important;}
    .step li div p:nth-of-type(1) { font-size: 22px;}
    .step li div h3 { font-size: 15px;}
    .step li div p:nth-of-type(2) { font-size: 13px;}
    /* 0501-인사말 */
	.greeting h3 { margin: 30px 0; font-size: 21px;}
	.greeting p { font-size: 14px;}
	.greeting p.p-sign { margin-top: 40px; font-size: 16px;}
	.greeting p.p-sign img { width: 90px;}
    /* 0502-찾아오시는길 */
    .location .top-location { width: 100%; margin: 0 auto 30px; border: 0;}
    .location .top-location p { padding: 60px 0 0; background-position: center top; background-size: 60px; font-size: 14px;}
    .location .btn-map { margin-top: 40px;}
	.location .btn-map img { width: 130px;}
    /* 0503-대리점/지사모집 */
    .agency{text-align:center;}
    .agency h3 { margin: 30px 0; font-size: 21px;}
    .agency p { font-size: 14px;}
}