@charset "utf-8";

.sub-visual {position: relative; height: 326px; background-repeat: no-repeat; background-position: center center; background-size: cover; margin-top: 90px;}
.sub-visual01 {background-image: url('../img/sub/sub-visual01.jpg');}
.sub-visual02 {background-image: url('../img/sub/sub-visual02.jpg');}
.sub-visual03 {background-image: url('../img/sub/sub-visual03.jpg');}
.sub-visual04 {background-image: url('../img/sub/sub-visual04.jpg');}
.sub-visual05 {background-image: url('../img/sub/sub-visual05.jpg');}

.sub-visual .title {display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding-bottom: 60px;}
.sub-visual .title h2 {font-size: 40px; font-weight: 700; line-height: 1.3em; color: #fff; text-align: center; margin-bottom: 10px;}
.sub-visual .title p {font-size: 20px; font-weight: 700; line-height: 1.6em; color: #fff; text-align: center;}

.lnb {position: absolute; bottom: 0; left: 0; width: 100%; padding: 0 15px;}
.lnb ul {display: flex; min-height: 60px; background: #131752;}
.lnb ul li {flex: 1; border-right: 1px solid rgba(255, 255, 255, 0.20);}
.lnb ul li:last-child {border-right: none;}
.lnb ul li a {display: flex; justify-content: center; align-items: center; height: 100%; font-size: 20px; font-weight: 700; line-height: 1.6em; color: #F8F8F8; text-align: center; padding: 10px 5px; transition: all 0.5s;}
.lnb ul li.active a {background: #fff; color: #131752;}

.breadcrumb {margin: 30px 0 60px;}
.breadcrumb ul {display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; margin: 0 -18px;}
.breadcrumb ul li {position: relative; padding: 0 18px; font-size: 18px; line-height: 1.6em; color: #999;}
.breadcrumb ul li:after {position: absolute; top: 50%; right: -10px; transform: translateY(-50%); content: ''; width: 20px; height: 20px; background: url('../img/sub/icon-arrow.png') no-repeat center center;}
.breadcrumb ul li:last-child:after {display: none;}
.breadcrumb ul li img {display: block;}

.sub-cont {padding-bottom: 200px;}
.sub-cont-layout {display: flex; gap: 56px;}
.sub-cont-layout .sub-title {max-width: 294px; width: 100%;}
.sub-cont-layout .sub-title h3 {font-size: 36px; font-weight: 700; line-height: 1.4em; color: #070707;}
.sub-cont-layout .sub-title p {font-size: 18px; line-height: 1.6em; color: #666; margin-top: 20px;}
.sub-cont-layout .sub-content {width: 1%; flex: 1 1 auto;}

/* S101 */
.greeting .img-box {position: relative; margin-bottom: 80px;}
.greeting .img-box .backdrop {height: 308px; background: url('../img/sub/greeting-img.jpg') no-repeat center center/cover; border-radius: 0 24px 24px 0;}
.greeting .img-box .box {position: absolute; bottom: -30px; right: 40px; width: 265px; height: 188px; background: url('../img/sub/greeting-box-bg.jpg') no-repeat center center/cover; padding: 25px 30px; border-radius: 24px; overflow: hidden;}
.greeting .img-box .box:after {position: absolute; bottom: 26px; right: 0; content: ''; width: 142px; height: 109px; background: url('../img/sub/greeting-box-logo.png') no-repeat right center;}
.greeting .img-box .box p {font-size: 22px; font-weight: 700; line-height: 1.8em; color: #FCFCFC;}
.greeting .sub-content .text-box .intro {font-size: 40px; font-weight: 700; line-height: 1.3em; color: #000; margin-bottom: 50px;}
.greeting .sub-content .text-box .intro span {color: #2050B8;}
.greeting .sub-content .text-box p {font-size: 20px; line-height: 1.7em; color: #666;}
.greeting .sub-content .text-box p:not(:last-child) {margin-bottom: 24px;}
.greeting .sub-content .text-box p.color-bk {color: #222;}
.greeting .sub-content .text-box .name {font-size: 22px; line-height: 1.8em; color: #222; text-align: right; margin-top: 50px;}
.greeting .sub-content .text-box .name b {font-weight: 700;}

/* S102 */
.history .sub-cont-layout .sub-title {max-width: 194px;}
.history-wrap {display: flex; gap: 100px;}
.history-title {max-width: 514px; width: 100%;}
.history-title .img-box {margin-bottom: 30px;}
.history-title .text-box h4 {font-size: 40px; font-weight: 700; line-height: 1.3em; color: #2050B8; margin-bottom: 10px;}
.history-title .text-box p {font-size: 18px; line-height: 1.6em; color: #666;}
.history-cont {width: 1%; flex: 1 1 auto; padding-top: 3px;}
.history-cont .year-wrap {position: relative; padding: 0 0 43px 52px;}
.history-cont .year-wrap:before {position: absolute; bottom: 0; left: 0; content: ''; width: 1px; height: calc(100% - 28px); background: #ddd;}
.history-cont .year-wrap:last-child:before {display: none;}
.history-cont .year-wrap:after {position: absolute; top: 18px; left: -10px; content: ''; width: 20px; height: 20px; border: 6px solid #0F87E9; border-radius: 50%; background: #fff;}
.history-cont .year-wrap .year {font-size: 40px; font-weight: 700; line-height: 1.3em; color: #000; margin-bottom: 20px;}
.history-cont .month-wrap {display: flex;}
.history-cont .month-wrap:not(:last-child) {margin-bottom: 7px;}
.history-cont .month-wrap .month {max-width: 50px; width: 100%; font-size: 20px; font-weight: 700; line-height: 1.4em; color: #444; padding-left: 10px;}
.history-cont .month-wrap ul li {font-size: 18px; line-height: 1.6em; color: #666;}

/* S103 */
.certificate .none {text-align: center; font-size: 18px; color: #666; padding: 60px 0;}
.certificate .gallery-list ul li a {border-radius: 20px;}
.certificate .gallery-list ul li a .thumb .pic {padding-bottom:141.03%;}
.certificate .gallery-list ul li a .tit {margin-bottom: 0; text-align: center;}

/* S104 */
.device-list {display: flex; flex-wrap: wrap; margin: -16px;}
.device-list li {width: 33.3333%; padding: 16px;}
.device-list li .inner {display: flex; flex-direction: column; height: 100%; background: #EEF0F4; border: 1px solid #ccc; border-radius: 24px; overflow: hidden; }
.device-list li .text-box {flex: 1; align-content: center; padding: 19px 5px; border-top: 1px solid #ccc;}
.device-list li .text-box p {font-size: 20px; font-weight: 700; line-height: 1.6em; color: #222; text-align: center;}
.device-list li .text-box p span {font-size: 18px; font-weight: 400; line-height: 1.6em;}

/* S105 */
.location .map {margin-bottom: 50px;}
.location .root_daum_roughmap {width:100% !important; height:560px !important;}
.location .root_daum_roughmap .wrap_map {height:560px !important;}
.location .root_daum_roughmap .border1,
.location .root_daum_roughmap .border2 {border: none;}
.location .root_daum_roughmap .border3, 
.location .root_daum_roughmap .border4 {background-color: transparent;}
.location .map iframe {width: 100%; height: 560px;}
.location .info-wrap {display: flex; flex-wrap: wrap; gap: 20px;}
.location .info {flex: 1 1 auto;}
.location .info dl {display: flex; font-size: 24px; font-weight: 500; line-height: 1.4em;} 
.location .info dl:not(:last-child) {margin-bottom: 36px;}
.location .info dt {max-width: 160px; width: 100%; color: #2050B8;}
.location .info dt img {margin-right: 14px;}
.location .info dd { width: 1%; flex: 1 1 auto; color: #222;}
.location .btn {display: flex; gap: 12px;}
.location .btn a {position: relative; display: flex; justify-content: center; align-items: center; width: 164px; height: 54px; border-radius: 10px; font-size: 18px; font-weight: 700; line-height: 1.6em; text-align: center; padding-right: 34px; transition: all 0.5s;}
.location .btn-print {color: #999; background: #fff; border: 1px solid #ccc;}
.location .btn-map {color: #fff; background: #2050B8; border: 1px solid #2050B8;}
.location .btn-print:hover {color: #2050B8; border: 1px solid #2050B8;}
.location .btn-map:hover {color: #2050B8; background: #fff;}
.location .btn a:after {position: absolute; top: 50%; transform: translateY(-50%); content: ''; width: 24px; height: 24px; background-repeat: no-repeat; background-position: center center; transition: all 0.5s;}
.location .btn-print:after {right: 33px; background-image: url('../img/sub/icon-print.png');} 
.location .btn-map:after {right: 26px; background-image: url('../img/sub/icon-map.png');} 
.location .btn-print:hover:after {background-image: url('../img/sub/icon-print-active.png');} 
.location .btn-map:hover:after {background-image: url('../img/sub/icon-map-active.png');} 
.location .btn img {margin-left: 10px;}

/* S2 */
.snb {position: relative; max-width: 294px; width: 100%; transition: all 0.6s;}
.snb-scroll {height: 100%; overflow-y: auto;}
.snb .depth03:nth-child(1) {border-top: 1px solid #eee;}
.snb .depth03 > li > a {position: relative; font-size: 18px; font-weight: 700; line-height: 1.6em; color: #222; padding: 16px 40px 16px 20px; border-bottom: 1px solid #eee; transition: all 0.5s;}
.snb .depth03 > li > a:hover {color: #2050B8;}
.snb .depth03 > li.active > a {background: #1C216B; color: #fff;}
.snb .depth03 > li.has-depth04 > a:after {position: absolute; top: 50%; right: 20px; transform: translateY(-50%); content: ''; width: 24px; height: 24px; background: url('../img/sub/icon-depth04-open.png') no-repeat center center; transition: all 0.5s;}
.snb .depth03 > li.has-depth04.active > a:after {transform: translateY(-50%) rotate(180deg); filter: brightness(100);}
.snb .depth04 {display: none; padding: 20px; background: #F8F8F8; border-bottom: 1px solid #eee;}
.snb .depth04 > li:not(:last-child) {margin-bottom: 10px;}
.snb .depth04 > li > a {position: relative; font-size: 18px; line-height: 1.6em; color: #666; padding-left: 26px; transition: all 0.5s;}
.snb .depth04 > li > a:before {position: absolute; top: 12px; left: 10px; content: ''; width: 4px; height: 4px; background: #666; border-radius: 50%; transition: all 0.5s;}
.snb .depth04 > li > a:hover {color: #2050B8;}
.snb .depth04 > li.active > a {color: #2050B8;}
.snb .depth04 > li.active > a:before {background: #2050B8;}
.snb .btn-snb {display: none; position: fixed; top: 140px; left: 270px; width: 35px; height: 45px; background: #fff; border-radius: 0 5px 5px 0; box-shadow: 7px 0 10px 0 rgba(0, 0, 0, 0.10); border: 0; z-index: 10; transition: all 0.6s;}
.snb .btn-snb:after {position: absolute; top: 50%; left: 50%; margin-top: -12px; margin-left: -12px; content: ''; width: 24px; height: 24px; background: url('../img/sub/icon-depth04-open.png') no-repeat center center; transition: all 0.5s; transform: rotate(90deg);}
.snb.closed {left: -270px;}
.snb.closed .btn-snb {left: 0;}
.snb.closed .btn-snb:after {transform: rotate(270deg);}

.product-title h3 {font-size: 36px; font-weight: 700; line-height: 1.4em; color: #070707; margin-bottom: 40px;}
.product-slide-items {margin: 0 0 60px;}
.product-slide-items .slide-item {width: auto; margin: 0 16px;}
.product-slide-items .pic {min-width: 366px; height: 345px; display: flex; align-items: center; justify-content: center; border-radius: 24px; border: 1px solid #2050B8; overflow: hidden;}
.product-slide-items .pic img {width: 100%; height: 100%; object-fit: cover;}
.product-slide-items .slick-arrow {position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border-radius: 50%; border: 1px solid #CCC; background-color: #fff; background-repeat: no-repeat; background-position: center center; box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.10); font-size: 0; z-index: 5;}
.product-slide-items .slick-prev {left: -27px; background-image: url('../img/sub/icon-slide-prev.png');}
.product-slide-items .slick-next {right: -27px; background-image: url('../img/sub/icon-slide-next.png');}
.product-img {margin-bottom: 60px;}
.product-img img {border-radius: 24px; border: 1px solid #2050B8;}

.product-tab-menu {margin-bottom: 72px;}
.product-tab-menu .notice {margin-bottom: 20px;}
.product-tab-menu p {font-size: 20px; line-height: 1.7em; color: #444;}
.product-tab-menu p span {color: #2050B8;}
.product-tab-menu ul {display: flex; flex-wrap: wrap; margin: -8px -5px;}
.product-tab-menu ul li {width: 20%; padding: 8px 5px;}
.product-tab-menu ul li a {font-size: 18px; font-weight: 700; line-height: 1.6em; color: #666; text-align: center; border: 1px solid #666; border-radius: 30px; padding: 15px 10px; transition: all 0.5s;}
.product-tab-menu ul li a:hover {border: 1px solid #2050B8; color: #2050B8;}
.product-tab-menu ul li.active a {border: 1px solid #2050B8; background: #2050B8; color: #fff;}
.product-tab-cont-wrap .tab-cont {display: none;}
.product-tab-cont-wrap .tab-cont.active {display: block;}

.product-item:not(:last-child) {margin-bottom: 80px;}
.product-item-title {position: relative; padding-top: 14px;}
.product-item-title:before {position: absolute; top: 0; left: 0; content: ''; width: 140px; height: 2px; background: #2050B8;}
.product-item-title p {font-size: 24px; font-weight: 700; line-height: 1.8em; color: #222; margin-bottom: 21px;}
.product-item .product-desc {font-size: 20px; line-height: 1.8em; color: #666;}
.product-item .product-desc .img-box {margin-top: 20px; text-align: center;}
.product .dot-list {margin-top: 40px;}
.product .dot-list li {position: relative; font-size: 20px; line-height: 1.6em; color: #666; padding-left: 30px;}
.product .dot-list li:not(:last-child) {margin-bottom: 4px;}
.product .dot-list li:before {position: absolute; top: 12px; left: 12px; content: ''; width: 6px; height: 6px; background: #666; border-radius: 50%;}

.detergent-bottom-img {margin-top: 80px;}

/* S3 */
.tech-img-box {border-radius: 24px; margin-bottom: 60px;} 
.tech-item:not(:last-child) {margin-bottom: 80px;}
.tech-title {margin-bottom: 10px;}
.tech-title p {font-size: 28px; font-weight: 700; line-height: 1.4em; color: #222;}
.tech-desc p {font-size: 20px; line-height: 1.6em; color: #222;}
.feature-list {margin: 40px 0;}
.feature-list ul {display: flex; flex-wrap: wrap; margin: -9px;}
.feature-list li {width: 33.333%; padding: 9px;}
.feature-list li .inner {position: relative; min-height: 246px; height: 100%; border-radius: 24px; border: 1px solid rgba(19, 23, 82, 0.10); background: #F5F8FF; padding: 50px 50px 29px 30px;}
.feature-list .feature-title {font-size: 24px; font-weight: 700; line-height: 1.8em; color: #131752; margin-bottom: 7px; padding-right: 40px;}
.feature-list .feature-desc {font-size: 18px; line-height: 1.6em; color: #666;}
.feature-list .icon {position: absolute; top: 34px; right: 42px;}
.table-wrap {position: relative;}
.table-notice {position: absolute; top: -32px; right: 0; font-size: 14px; font-weight: 700; line-height: 1.6em; color: #FF3B30; text-align: right;}
.table-notice.color-gray {font-weight: 300; color: #999;}
.table-responsive {overflow-x: auto; -webkit-overflow-scrolling: touch;}
.table {width: 100%; min-width: 1100px;}
.table thead {border: 1px solid #66728D;}
.table thead th {font-size: 16px; font-weight: 600; line-height: 1.3em; color: #fff; text-align: center; background: #66728D; padding: 10px 10px;}
.table thead th:not(:last-child) {border-right: 1px solid rgba(156, 165, 178, 0.40);}
.table thead .border-b {border-bottom: 1px solid rgba(156, 165, 178, 0.40);}
.table thead .border-r {border-right: 1px solid rgba(156, 165, 178, 0.40);}
.table tbody {border: 1px solid #eee;}
.table tbody tr:not(:last-child) {border-bottom: 1px solid #eee;}
.table tbody th {font-size: 16px; line-height: 1.3em; font-weight: 400; color: #070707; text-align: center; background: #F8F8F8; padding: 14px 18px; border-right: 1px solid #eee;}
.table tbody th.bg-dark {background: #66728D; color: #fff; border-bottom: 1px solid rgba(156, 165, 178, 0.40);}
.table tbody th span {color: #444;}
.table tbody td {font-size: 16px; line-height: 1.8em; color: #444; text-align: center; background: #FCFCFC; padding: 14px 18px;}
.table tbody td.align-left {text-align: left; padding: 14px 28px;}
.table tbody td:not(:last-child) {border-right: 1px solid #eee;}
.table .bullet-list {position: relative; font-size: 16px; line-height: 1.8em; color: #444; padding-left: 12px;}
.table .bullet-list:before {position: absolute; top: 13px; left: 1px; content: ''; width: 5px; height: 1px; background: #444;}
.table .num-list {position: relative; padding-left: 18px;}
.table .num-list:before {position: absolute; top: 0; left: 0;}
.table .num-list:nth-child(1):before {content: '1.';}
.table .num-list:nth-child(2):before {content: '2.';}
.table .num-list:nth-child(3):before {content: '3.';}
.table .num-list:nth-child(4):before {content: '4.';}
.table .num-list:nth-child(5):before {content: '5.';}

.tech .dot-list li {position: relative; font-size: 20px; line-height: 1.6em; color: #222; padding-left: 30px;}
.tech .dot-list li:before {position: absolute; top: 12px; left: 12px; content: ''; width: 6px; height: 6px; background: #222; border-radius: 50%;}
.tech .num-list li {position: relative; font-size: 20px; line-height: 1.6em; color: #222; padding-left: 30px;}
.tech .num-list li:before {position: absolute;  left: 6px;}
.tech .num-list li:nth-child(1):before {content: '1.';}
.tech .num-list li:nth-child(2):before {content: '2.';}

.tech .img-wrap {display: flex; gap: 20px;}
.tech .img-wrap figure {flex: 1;}