@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@300;400;700&display=swap');

/*reset*/
* {margin: 0;padding: 0;}
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, tbody, tfoot, thead, tr, th, td{margin:0;padding:0;}
a {color: inherit; text-decoration: inherit;}
li {list-style: none;}
address, em, i {font-style: normal;}
mark {background-color: #ffe0e5; color: #2e2e2e; padding: 0 5px}
button {background: none; border: none; cursor: pointer;}
img {vertical-align: middle;}
br.mo {display: none;}
input , textarea{-webkit-appearance: none; -webkit-border-radius: 0; }
select::-ms-expand {display:none}
select {-webkit-border-radius: 0;}
/* LayOut */
#wrap {position:relative; width:100%; margin:0 auto; font-family: 'Noto Sans KR', sans-serif; color: #000; font-size: 14px;overflow: hidden; min-width:280px}
#wrap .inner {width: 1200px; margin: 0 auto;}

/* header */
#header {position:absolute;; left:50%; top:0; transform: translateX(-50%); z-index:9999; height: 90px; line-height: 90px; width: 100%;}
#header:before {content: ''; position: absolute; left: 0; top: 0px; width: 100%; opacity: 0; height: 90px; background: #fff;  transition: 0.2s;}
#header .inner {width:100%; max-width: 1300px;margin: 0 auto;}
#header .logo {float: left; position: relative; display: block;}
#header .logo img:nth-child(2) {position: absolute;left: 50%; top: 53%; transform: translate(-50%,-50%); opacity: 0;}
#header.on:after {content: ''; position: absolute; left: 0; top: 90px; width: 100%; height: 1px; background: #ddd;}
#header.on:before {opacity: 1; height: 180px; top: 0px;}
#header.on .logo img:nth-child(1) {opacity: 0}
#header.on .logo img:nth-child(2) {opacity: 1; transition: 0.3s}
#header.on #gnb > ul > li > a {color: #000}
#header .gnbBtn {display: none;}
#mGnb {display: none;}
/* gnb */
#gnb {float: right; width: 650px;}
#gnb > ul > li {float: left; width: 25%;}
#gnb > ul > li > a {display: block; text-align: center; color: #fff; font-size: 18px; position: relative; font-size: 16px}
#gnb > ul > li > a:after {content: ''; width: 0%; height: 3px; background: #ef413d; position: absolute; bottom: -1px; left: 50%; transform: translateX(-50%); transition: all 0.3s; z-index: 20;}
#gnb li a.on:after , #gnb li a:focus:after {width: 100%}

/* gnb - depth */
#gnb .depth {position: absolute; top: 90px; display: none; width: 100%; }
#gnb .depth ul {position: absolute;}
#gnb .depth.a ul{left: -110px;}
#gnb .depth.b ul{left: 35px;}
#gnb .depth.c ul{left: -50px;}
#gnb .depth.d ul{left: 10px;}
#gnb .depth li {display: inline-block; color: #000; margin: 0 15px}
#gnb .depth li a {display: block;}
#gnb .depth li a:hover, #gnb .depth li a:focus{ color: #ee413d}

/* aside */
#aside {opacity: 0; width: 0; height: 0;overflow: hidden;}
#aside.on {opacity: 1; position:fixed; right: 20px; top:50%; transform: translateY(-50%); z-index:999; width: 90px; height: auto;transition: opacity 0.3s}
#aside.on ul li a {display: block; text-align: center; line-height: 90px; background: #ef413d}
#aside.on ul li:nth-child(2) a {background: #fcee2c}
#aside.on ul li:nth-child(3) a {background: #1a1a1a}

/* contents */
#contents {position:relative; z-index:9; transition:0.2s; -webkit-transition:0.2s;}
#contents .c_position {position:absolute; left:0; right:0; top:10px; height:1px;}

/* #wrap.off */
#wrap.off #contents .intro {height:10px !important; min-height:10px;}
#wrap.off #contents .intro .scrollBtn {opacity: 0}

/* intro */
#contents .intro {position:relative; overflow:hidden; min-height:100vh; background-color:#fff; transition:0.8s; -webkit-transition:0.8s;}
#contents .intro .visual {position:absolute; left:0; top:0; bottom:0; width: 100%; }
#contents .intro .visual li {width: 100vw; height: 100vh;}
#contents .intro .visual li img {width: 100vw; height: 100vh; object-fit: cover; position: absolute;  left: 0; top: 0; transform: scale(1.1); transition: transform 3.5s}
#contents .intro .visual li:first-child img {animation-name: sc; animation-duration: 3.5s}
@keyframes sc { 0% {transform: scale(1.1);} }
#contents .intro .visual .slick-active img{transform: scale(1);}
#contents .intro .slogan {position:absolute; left:50%; transform: translate(-50%,-50%); top:50%; color: #fff; text-align: center;width: 100%;}
.typewrite span{ animation: caret 1s steps(1) infinite; border-right: 0.065em solid #fff; padding-right: 1px;}
@keyframes caret { 50% { border-color: transparent; } }
#contents .intro .slogan h2 { font-size: 32px; letter-spacing: 3px;}
#contents .intro .slogan h3 { font-size: 50px; letter-spacing: 0px; margin: 5px 0 80px}
#contents .intro .slogan p {position: relative; font-size: 16px}
#contents .intro .slogan p:before {content: ''; width: 60px; height: 3px; background: #fff; position: absolute;left:50%; transform: translateX(-50%); top: -40px;}

/* intro - scrollBtn */
#contents .intro .scrollBtn {position:absolute; left:50%; bottom:5%; z-index:10; width:70px; height:70px; transform: translateX(-50%); border-radius: 100%; border: 1px solid #fff;  transition: all 0.3s;text-align: center; padding-top: 8px; box-sizing: border-box;}
#contents .intro .scrollBtn  img {width: 65%;}
#contents .intro .scrollBtn span {position: absolute;width: 23%; display: block;left:50%; transform: translateX(-50%);}
#contents .intro .scrollBtn span img {width: 65%;}
#contents .intro .scrollBtn span.a  {bottom: 30%;animation: ani linear 1.2s 0s infinite;}
#contents .intro .scrollBtn span.b  {bottom: 18%;animation: ani linear 1.2s 0.3s infinite;}
#contents .intro .scrollBtn span.c  {bottom: 5%;animation: ani linear 1.2s 0.6s infinite;}
@keyframes ani {
	0% { opacity: 1; transform: translateX(-50%); }
	100% { opacity: 0.2; transform: translateX(-50%); }
}

/* section.renthana */
section.renthana {background: #fff; padding: 120px 0 100px; position: relative;}
section.renthana:before {content: '';position: absolute; width:90%; height: 350px;background: #f2f2f2; left: 0; bottom: 0;}
section.renthana .slide {display: none; width: 0;}
section.renthana .inner {display: flex;}
section.renthana .inner li {width: 28%; height: 350px;transition: all 0.4s;}
section.renthana .inner li.on {width: 42%;transition: all 0.5s}
section.renthana .inner li a {display: block; width: 100%; height: 100%;overflow: hidden; background: url(../img/main/renthana_1.png) no-repeat center/cover;position: relative;}
section.renthana .inner li:nth-child(2) a {background-image: url(../img/main/renthana_2.png)}
section.renthana .inner li:nth-child(3) a {background-image: url(../img/main/renthana_3.png)}
section.renthana .inner li a p {position: absolute; left: 26px; bottom: 30px; color: #fff; font-size: 30px}
section.renthana .inner li a p span {font-weight: 300; font-size: 14px; display: block;}
section.renthana .inner li a .plus {position: absolute; right: 0; bottom: 0; background: #ef413d; width: 60px; height: 60px; padding: 12px; box-sizing: border-box; opacity: 0;}
section.renthana .inner li a .plus img {width: 100%}
section.renthana .inner li.on a .plus {opacity: 1; transition: opacity 0.5s;}

/* section .title */
section .title { margin: 0 auto 50px; text-align: center; padding-top: 45px; background: url(../img/main/title_1.png) no-repeat center top 0/30px; width: 1200px}
section .title h2 { font-size: 38px; margin-bottom: 20px}
section .title p { font-size: 20px; color: #666}
section .title p span {color: #ef413d}

/* section.service */
section.service {background: #fff; padding: 100px 0; position: relative;}
section.service:before {content: '';position: absolute; width:110%; height: 2px; right: 0; top: 53.5%;background: url(../img/main/service_bar.png) no-repeat center/cover; animation: line linear 2.5s 0s infinite;}
@keyframes line { 0% {transform: translateX(0)} 100% {transform: translateX(30px)} }
section.service ul {display: flex; justify-content: space-between; position: relative;text-align: center;}
section.service ul li .icon {width: 240px; height: 240px; line-height: 240px; border-radius: 100%; background: #fff; border: 1px solid #000; transition: all 0.2s}
section.service ul li .icon img:nth-child(1) {display: inline-block;}
section.service ul li .icon img:nth-child(2) {display: none;}
section.service ul li h3 { font-size:  20px; margin: 30px 0 20px}
section.service ul li p {color: #666}
section.service ul li.on .icon {background: #ef413d; border-color: #ef413d}
section.service ul li.on .icon img:nth-child(1) {display: none;}
section.service ul li.on .icon img:nth-child(2) {display: inline-block;}

/* section.g */
section.contact {background-color: #ef413d; padding: 100px 0}
section.contact .title {background: url(../img/main/title_2.png) no-repeat center top 0/30px; color: #fff}
section.contact .title p {color: #fff}

/* form-box */
.form-box {box-sizing: border-box; overflow: hidden;font-family: 'Noto Sans KR', sans-serif; background: #fff; width: 1300px; padding: 50px; margin: 0 auto;}
.form-box table {width: 100%;}
.form-box table .th {color: #1a1a1a; font-size: 15px; box-sizing: border-box; font-weight: 500; width: 150px; position: relative; padding-left: 13px}
.form-box table .th i {color: #898989}
.form-box table .th.b {padding-left: 40px}
.form-box table .th span {margin-right: 13px; width: 4px; height: 4px; background: #ee413d; position: absolute; left: 0px; top: 29px;}
.form-box table .th span.b {left: 28px;}
.form-box table .th span.c {top: 18px}
.form-box table td {padding: 6px 0;  overflow: hidden;}
.form-box input[type=text],.form-box select  {-webkit-border-radius: 0;background: #fff; border: none; width: 450px; height: 50px; line-height: 50px; padding-left:20px; box-sizing: border-box; font-size: 18px; font-family: 'Noto Sans KR', sans-serif; font-weight: 100; border: 1px solid #dbdbdb; outline: none;}
textarea {-webkit-border-radius: 0;background: #fff; border: 1px solid #dbdbdb; width: 100%; height: 180px; padding: 15px 20px; box-sizing: border-box; font-size: 18px;font-family: 'Noto Sans KR', sans-serif; font-weight: 100;color: #000;outline: none}
.form-box select {background: #fff url(../img/main/selectbox.png) no-repeat right 12px center;-webkit-appearance: none; -moz-appearance: none;appearance: none; color: #888}
div.check-box {float: left; margin-top:15px;}

/* check */
.check {display:inline-block; margin-left: 14px;}
.check:hover {cursor: pointer}
.check input[type=checkbox] {opacity: 0; position: absolute;width: 35px;height: 35px; }
.check input[type=checkbox] + .tit{ position: relative; z-index: 11; display: inline-block; font-weight: 500; font-size: 20px; color: #1a1a1a;padding-right: 45px;}
.check input[type=checkbox] + .tit::before{content: ''; display: inline-block; width: 35px; height: 35px; position: absolute; top: -1px; right: 0;  border: none;text-align: center; background: url(../img/main/check_1.png) no-repeat center/34px; font-family: 'Noto Sans KR', sans-serif; }
.check input[type=checkbox]:checked + .tit::before{background: url(../img/main/check_2.png) no-repeat center/34px; font-family: 'Noto Sans KR', sans-serif; }
.form-box .veiwList {width: 100%; display: flex;}
.form-box .veiwList li {width: 50%;}
.form-box .veiwList li:nth-child(2) {padding-left: 10%; box-sizing: border-box;}
.form-box button.veiw {border:none; font-size: 16px; color: #fff; background: #ef413d;font-family: 'Noto Sans KR', sans-serif; padding: 8px 25px; display: inline-block; border-radius: 40px; margin: 5px 0 0;}
.form-box .veiwInner {background: #f7f7f7; border: 1px solid #dbdbdb; width: 100%; margin: 20px 0; padding: 15px; font-size: 12px; display: none; box-sizing: border-box; color: #666}
.form-box .veiwInner h3 {font-size: 15px; margin-bottom: 10px;}
.form-box .veiwInner b{margin: 5px 0; display: block}
.filebox input[type="file"] {position: absolute;width: 1px;height: 1px;padding: 0;margin: -1px;overflow: hidden;clip:rect(0,0,0,0);border: 0;}
.filebox label {display:block; width: 20%; text-align: center;font-size: 18px; color: #ef413d; background: #fff;font-family: 'Noto Sans KR', sans-serif;  height: 49px; line-height: 49px; cursor: pointer; border: 1px solid #ef413d;float: right;}
.filebox .upload-name {-webkit-border-radius: 0;background: #fff; border: 1px solid #dbdbdb; width: 100%; height: 50px; line-height: 50px; padding-left:20px; box-sizing: border-box; font-size: 17px; font-family: 'Noto Sans KR', sans-serif; font-weight: 100; outline: none; -webkit-appearance: none;-moz-appearance: none;appearance: none; color: #9d9d9d; width: 78%; float: left;}
.contact .btnBox {width: 1300px; margin: 50px auto 0}
.contact .btn {border:none; font-size: 25px; color: #fff; background: #000;font-family: 'Noto Sans KR', sans-serif; display: block; margin: 0 auto; padding: 19px 120px;}

/* section.location */
section.location {padding: 80px 0}
section.location .inner {width: 1300px}
section.location .inner .map {width: 100%; height: 450px}
section.location .inner .list {display: flex; justify-content: space-between; margin-top: 30px}
section.location .inner .list li {width: 33.3333%; text-align: center; color: #666; position: relative;font-weight: 300}
section.location .inner .list li:before {content: ''; width: 1px; height: 100%; background: #ccc; position: absolute; top: 0; left: 0}
section.location .inner .list li:first-child:before {display: none;}
section.location .inner .list li h3 {font-weight: normal; margin: 12px 0 5px; color: #000; font-size: 17px}

/* footer */
footer .top {border-top: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6; padding: 25px 0; text-align: center;}
footer .top ul {display: inline-block;}
footer .top ul li {display: inline-block; position: relative; margin: 0 20px}
footer .top ul li:before {content: ''; width: 1px; height: 90%; background: #ccc; position: absolute; top: 1px; right: -21px}
footer .top ul li a:hover, footer .top ul li a:focus{ color: #ee413d}
footer .top ul li:last-child:before {display: none;}
footer .middle {width: 1300px; margin: 0 auto; padding: 30px 0; overflow:hidden;}
footer .middle table {display: block; float: left; color: #666;font-weight: 300}
footer .middle table b{font-weight: 300; color: #000}
footer .middle table .th {width: 160px}
footer .middle table  td {padding: 5px 0}
footer .middle ul {float: right; text-align: right;}
footer .middle ul li:first-child {margin-bottom: 20px}
footer .bottom {border-top: 1px solid #e6e6e6;border-bottom: 1px solid #e6e6e6; padding: 20px 0; text-align: center; color: #ee413d; clear: both;}

/*  popup */
#layer-mask {background: rgba(0, 0, 0, 0.51); width: 100%; height: 100vh; position: fixed; left: 0; top: 0;z-index: 90}
.layer-popup {font-family: 'Noto Sans KR', sans-serif;display: none; z-index: 100; position: fixed; width:100%; height:100vh; left:0; top:0; font-size:14px}
.layer-popup .inner {width:80%; max-width:900px; height:800px;     background-color: #fff; padding:80px 80px 70px; box-sizing:border-box;left: 50%; transform: translate(-50%,-50%); top: 50%; position:absolute;}
.layer-popup .inner .txt { overflow:auto;     height: 80%;color:#888}
.layer-popup .inner h2 {border-bottom:3px solid #000;font-size:35px; margin-bottom:40px}
.layer-popup .inner h5 {font-size:16px; margin:20px 0 7px;color:#000}
.layer-popup .inner .close {opacity: 1;width: 40px; height: 50px; display: block; box-sizing: border-box; position: absolute; top: 10px; right: 15px; z-index: 100; background: none; border: none; z-index: 9999; cursor: pointer;}
.layer-popup .inner .close .blind {display:block;opacity: 1; width: 28px; height:3px; position: absolute; background: #fff; left: 0;top: 16px; transition: 0.2s; border-radius: 10px}
.layer-popup .inner .close .blind:nth-child(2) {top: 26px;width: 22px;}
.layer-popup .inner .close .blind:nth-child(3) {top: 36px;}
.layer-popup .inner .close .blind:nth-child(1){transform: rotate(45deg); transform-origin: center; width: 30px; top: 30px; background: #1a1a1a}
.layer-popup .inner .close .blind:nth-child(3){transform: rotate(-45deg); transform-origin:center; width: 30px; top: 30px; background: #1a1a1a}
.layer-popup .inner .close .blind:nth-child(2){opacity: 0}

/* 고객센터 팝업 */
#wrap .layer-popup.notice .inner{ width: 450px; height:450px; text-align: center; padding: 50px; box-sizing: border-box;}
.layer-popup.notice	.inner h3 {border-bottom: 3px solid #000; padding-bottom: 25px; font-size: 25px; margin: 25px 0}
.layer-popup.notice	.inner p {font-size: 16px; color: #888}
.layer-popup.notice	.inner input[type=text], .layer-popup.notice .inner input[type=password] {background: #fff; border: none; width: 100%; height: 50px; line-height: 50px; padding-left:20px; box-sizing: border-box; font-size: 16px; font-family: 'Noto Sans KR', sans-serif; font-weight: 100; border: 1px solid #dbdbdb; outline: none; margin: 25px 0 10px}
.layer-popup.notice	.inner button {width: 100%; background: #ef413d; color: #fff; font-weight: bold;font-size: 16px; font-family: 'Noto Sans KR', sans-serif;  height: 60px}
.layer-popup .inner .close {top: 20px;right: 10px}

/* ---------- 서브페이지 ---------- */

/* #subVisual */
#subVisual {position:relative; height: 450px;width: 100%;}
#subVisual > img {width: 100%; height: 100%; object-fit: cover; position: absolute;  left: 0; top: 0;}
#subVisual .tit {position: absolute; width: 100%; left: 0%; top: 50%; transform: translateY(-50%); font-size: 45px; color: #fff; text-align: center}
#subVisual .page {position: absolute; width: 1200px; left: 50%; bottom: 20px; transform: translateX(-50%); color: #fff; text-align: right; display: flex; justify-content: flex-end}
#subVisual .page li {margin: 0 10px; position: relative}
#subVisual .page li a {display: block; font-size: 16px; line-height: 13px;}
#subVisual .page li a:hover {text-decoration: underline}
#subVisual .page li img {vertical-align: top}
#subVisual .page li:last-child a {font-weight: bold}

/* #sub  */
#sub  {padding: 100px 0}

/* 고객센터 */
#sub .notice .topMenu {display: flex; justify-content: space-between}
#sub .notice .topMenu li {width: 50%;}
#sub .notice .topMenu li a{display: block; text-align: center; font-size: 20px; line-height: 80px; background: #f2f2f2; color: #808080}
#sub .notice .topMenu li a:hover,#sub .notice .topMenu li a:focus,#sub .notice .topMenu li a.on {background: #ef413d; color: #fff}
#sub .notice .tableBox {border-top: 2px solid #000; margin-top: 50px;}

/* 공지사항 */
#sub .notice .tableBox table {width: 100%; color: #999; text-align: center}
#sub .notice .tableBox table td {padding: 15px 0; border-bottom: 1px solid #ebebeb; }
#sub .notice .tableBox table td.th {padding: 10px 0; border-bottom: 2px solid #ebebeb; color: #333;text-align: center; font-weight: bold;padding: 14px 0; font-size: 17px}
#sub .notice .tableBox table td:nth-child(2) {text-align: left; padding-left: 20px; color: #393939;cursor: pointer}
#sub .notice .tableBox table td:nth-child(2).th {text-align: center; color: #000; cursor: default}
#sub .notice .tableBox table tr:hover {background: #f8f8f8}
#sub .notice .pagination {margin: 50px auto 0; display: flex; justify-content: space-between; width: 400px; box-sizing: border-box}
#sub .notice .pagination li a {font-weight: bold; color: #ccc;display: block; padding: 5px 10px}
#sub .notice .pagination li a:hover,#sub .notice .pagination li a.red {color: #ef413d}
/* 공지사항 상세페이지 */
#sub .notice .tableBox.b table td:nth-child(1) {text-align: left; padding-left: 40px}
#sub .notice .tableBox.b table tr:last-child td{border-bottom: 2px solid #000; padding: 40px 30px; line-height: 1.6}

/* btnBox */
#sub .notice .btnBox {margin: 50px auto 0; text-align: center}
#sub .notice .btnBox button {display: inline-block; font-size: 17px; font-weight: bold;font-family: 'Noto Sans KR', sans-serif; border: 1px solid #000; width: 20%; height: 55px; margin: 0 3px}
#sub .notice .btnBox button.b {background: #000; color: #fff}

/* 1:1문의하기 */
#sub .notice .top {display: flex; justify-content: space-between; margin-top: 50px}
#sub .notice .tableBox.c table td:nth-child(2) {text-align: center;}
#sub .notice .tableBox.c table td i {margin-right: 15px}
#sub .notice .tableBox.c .label {display:inline-block; width: 100px; padding: 8px 0px; background: #ef413d; color: #fff; font-weight: bold;}
#sub .notice .tableBox.c .label.gray {background: #8695b4; }
#sub .notice .top li:nth-child(1) {display: flex; justify-content:space-between;}
#sub .notice .top input[type=text] {-webkit-border-radius: 0;background: #fff; border: none; width: 300px; height: 50px; line-height: 50px; padding-left:20px; box-sizing: border-box; font-size: 16px; font-family: 'Noto Sans KR', sans-serif; font-weight: 100; border: 1px solid #dbdbdb; outline: none;}
#sub .notice .top .search {width: 50px; height: 50px; line-height: 50px; border-top: 1px solid #dbdbdb; border-right: 1px solid #dbdbdb; border-bottom: 1px solid #dbdbdb;display: block;}
#sub .notice .top .btn{display: block; font-size: 16px; font-family: 'Noto Sans KR', sans-serif; border: 1px solid #000; padding: 0 20px 0 30px; height: 50px}
#sub .notice .top .btn img {margin-left: 20px}

/* 1:1문의작성 */
#sub .notice .form-box {width: 100%; margin-top: 50px; border-top: 3px solid #000;padding: 30px 0 0}

/* 1:1문의 상세보기 */
#sub .notice .viewBox {margin-top: 50px; margin-bottom: 30px}
#sub .notice .viewBox table {width: 100%; border-top:2px solid #000}
#sub .notice .viewBox table td {padding: 15px 25px;border-bottom: 1px solid #e6e6e6}
#sub .notice .viewBox table td.th {background: #fafafa; width: 20%; text-align: center;color: #999}
#sub .notice .viewBox table td i {margin-right: 8px}

/* about */
#sub .about {position: relative}
#sub .about ul li {position: relative; margin-bottom: 50px; padding-bottom: 50px}
#sub .about ul li:before {content: ''; position: absolute; bottom: 0; background: #f2f2f2; width: 45%; height: 85%; z-index: -1}
#sub .about ul li:nth-child(1):before,#sub .about ul li:nth-child(3):before {left: 0;}
#sub .about ul li:nth-child(2):before {right: 0}
#sub .about ul li .inner {display: flex; justify-content: space-between; flex-wrap: wrap}
#sub .about ul li:nth-child(2) .inner{text-align: right;}
#sub .about ul li .inner > div {width: 50%; height: 100%;}
#sub .about ul li .inner > div img {width: 100%;}
#sub .about ul li .inner .text { font-size: 18px; font-weight: 500; line-height: 1.6; color: #808080; padding: 0 50px; box-sizing: border-box}
#sub .about ul li .inner .text p {margin-top: 150px}
#sub .about ul li .inner .text .logoImg {margin-top: 0}
#sub .about ul li .inner .text .logoImg img:nth-child(2) {display: none}

/* ci */
#sub .ci .inner { text-align:center;}
#sub .ci .inner .txt p {margin: 50px auto 0; color: #666666; font-size: 18px}
#sub .ci .inner .txt p b {color: #000; display: block; margin-bottom: 50px; font-size: 20px}

/* rental */
#sub .b2b {position: relative; padding-bottom: 30px}
#sub .b2b::before {position: absolute;width: 100%; height: 30%; content: ''; background: #f2f2f2;left: 0; bottom: 0}
#sub .b2b ul {display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 115px; padding: 0 30px}
#sub .b2b ul li {width: 33.3333%; text-align: center; position: relative; padding: 0 30px; box-sizing: border-box;}
#sub .b2b ul li .txt {background: #fff; border: 1px solid #e6e6e6; padding: 100px 0 50px; position: relative;}
#sub .b2b ul li .txt .icon {position:absolute; left: 50%; top: -65px; transform: translateX(-50%);}
#sub .b2b ul li .txt h3 {font-size: 22px; margin-bottom: 50px; position: relative;}
#sub .b2b ul li .txt h3:after {content: ''; width: 30px; height: 3px; background-color: #ef413d; position: absolute; left: 50%; bottom: -25px; transform: translateX(-50%);}
#sub .b2b.b ul {margin-top: 90px;}
#sub .b2b.b ul li .txt .icon {width: 22%}
#sub .b2b.b ul li .txt .icon img {width: 100%}
#sub .b2b.b ul li {width: 50%; padding: 0 10px; }
#sub .b2b.b ul li .txt {padding: 80px 0 50px;}
#sub .b2b.b ul li .txt h3 {font-size: 22px}
#sub .b2b.b ul li .txt p {font-size: 18px}
#sub .b2b.b ul li .txt h5 {font-size: 22px; font-weight: bold; margin-top: 10px}
#sub .mall2 {margin-bottom: 100px}
#sub .notice .top.b {margin-top: 0px}

/* install */
#sub .installList {display: flex; flex-wrap: wrap; padding: 50px 0 20px; border-top: 2px solid #000; border-bottom: 1px solid #eee; margin-top: 50px}
#sub .installList li {width: 31%; margin-bottom: 30px; margin-right: 3.3333%}
#sub .installList li:nth-child(3n){margin-right: 0}
#sub .installList li .thumbnail img {width: 100%}

#sub .installList li .thumbnail {position: relative;}
#sub .installList li .thumbnail .txt {position: absolute; width: 100%; left: 0; bottom: 0;text-align: center; font-size: 2vw; font-weight: bold; padding: 4px 0 5px; background: #ef423e; color: #fff; letter-spacing: -1px}
#sub .installList li .thumbnail .txt img {width: 26%; display: block; margin: 0 auto;}

#sub .installList li h3 {font-weight: normal; margin-top: 20px; display: -webkit-box; display: -ms-flexbox; display: box; height: 44px;overflow:hidden; vertical-align:top; text-overflow: ellipsis; word-break:break-all; -webkit-box-orient:vertical; -webkit-line-clamp:2}
#sub .installList li h4 {font-weight: normal; font-size: 13px; color: #999; margin-top: 10px; margin-left: 3px}
/* mall */
.goods {display: flex; justify-content: space-between;flex-wrap: wrap;}
.goods li {width: 24%; margin-bottom: 70px;}
.goods li img {width: 100%}
.goodText {margin: 10px 0}
.goodText h3 { font-size: 18px;   line-height: 1.4; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;  -webkit-box-orient: vertical;height:50px; margin-bottom: 5px}
.goodText span {color: #848484; display: block; font-size: 12px}
.goodText span.line {text-decoration:line-through; font-weight: 500; font-size: 16px; margin: 10px 0}
.goodText h4 {font-weight: bold; color: #ef413d}
.goodText h4 b {color: #000; font-size: 20px}