@charset "utf-8"; 
/*
 * Name     : main.css
 * Version  : 1.1.2
 * Author   : 1px studio
 * Date     : 2023.10.25
 * Desc     : 반응형 ui bug 일부 수정
---------------------------------------------------
*/
/* 텍스트 스타일 */
.main-slide-title { font-size: var(--font-size-xl-2); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-xl-2); line-height: var(--line-height-xl); color: var(--white-100); opacity: 0; visibility: hidden; } 
.main-slide-summary { font-family: var(--font-family-kor); font-size: var(--font-size-sm-3); font-weight: var(--font-weight-normal); letter-spacing: var(--letter-spacing-sm-3); color: var(--white-100); opacity: 0; visibility: hidden; margin-bottom: 34px; margin-left: 6px; } 
.main-slide .swiper-pagination-bullet strong { font-size: var(--font-size-sm-1); font-weight: var(--font-weight-light); letter-spacing: var(--letter-spacing-xs-2); line-height: var(--line-height-xs); color: var(--gray-150); } 
.main-slide .swiper-pagination-bullet span { font-size: var(--font-size-xs-2); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-xs-2); line-height: var(--line-height-xs); color: var(--gray-150); display: block; } 
.section-title {font-size: var(--font-size-xl-1);font-weight: var(--font-weight-semibold);letter-spacing: var(--letter-spacing-xl-1);color: var(--main);position: relative;text-align: center;margin-bottom: 40px;} 
.section-title::after, .section-title-white::after { content: ''; width: 10px; height: 10px; background-color: var(--primary); position: absolute; border-radius: 20px; bottom: 13px; margin-left: 15px; } 
.section-desc { font-size: var(--font-size-sm-2); font-weight: var(--font-weight-normal); letter-spacing: var(--letter-spacing-sm-2); line-height: var(--line-height-sm); color: var(--main); text-align: center; } 
.section-intro-summary { font-size: var(--font-size-sm-2); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-sm-2); line-height: var(--line-height-sm); color: var(--main); margin: 0; display: flex; justify-content: space-between; } 
.section-intro-title { font-size: var(--font-size-lg-1); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-lg-1); line-height: var(--line-height-lg); color: var(--main); margin-bottom: 40px; margin-top: 20px; } 
.section-intro-desc { font-size: var(--font-size-sm-2); font-weight: var(--font-weight-normal); letter-spacing: var(--letter-spacing-sm-2); line-height: var(--line-height-sm); color: var(--main); } 
.section-adv-desc { font-size: var(--font-size-sm-1); font-weight: var(--font-weight-normal); letter-spacing: var(--letter-spacing-sm-1); line-height: var(--line-height-sm); color: var(--main); } 
.section-sub-title { font-size: var(--font-size-md-1); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-md-1); color: var(--main); } 
.section-title-white {font-size: var(--font-size-xl-1);font-weight: var(--font-weight-semibold);letter-spacing: var(--letter-spacing-xl-1);color: var(--white-100);position: relative;} 
.section-desc-white { font-size: var(--font-size-sm-3); font-weight: var(--font-weight-normal); letter-spacing: var(--letter-spacing-md-1); line-height: var(--line-height-md); color: var(--white-100); } 
.product-title { font-size: var(--font-size-sm-2); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-sm-2); color: var(--main); text-align: center; } 
.product-desc { font-size: var(--font-size-xs-2); font-weight: var(--font-weight-normal); letter-spacing: var(--letter-spacing-xs-2); line-height: var(--line-height-sm); color: var(--main); text-align: center; width: 100%; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: normal; } 
.event-title { font-size: var(--font-size-sm-2); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-sm-2); color: var(--main); width: 100%; display: -webkit-box; overflow: hidden; text-overflow: ellipsis; white-space: normal; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-break: normal; margin-bottom: 12px; } 
.event-date { font-size: var(--font-size-xs-2); font-weight: var(--font-weight-normal); letter-spacing: var(--letter-spacing-xs-2); color: var(--gray-200); } 
.event-more { font-size: var(--font-size-sm-2); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-sm-2); color: var(--white-300); font-family: var(--font-family-kor); float: right; } 
.event-more i { margin-left: 6px; } 

/* 버튼 스타일 */
.section-white-btn { font-size: var(--font-size-sm-2); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-sm-2); color: var(--main); background-color: var(--white-100); border-radius: 50px; padding: 18px 50px; border: none; transition: all .3s; } 
.section-point-btn { font-size: var(--font-size-sm-2); font-weight: var(--font-weight-bold); letter-spacing: var(--letter-spacing-sm-2); color: var(--white-100); background-color: var(--primary); border-radius: 50px; padding: 18px 50px; border: none; transition: all .3s; } 
.section-line-btn { font-size: var(--font-size-sm-1); font-weight: var(--font-weight-semibold); letter-spacing: var(--letter-spacing-sm-1); color: var(--primary); background: none; border: 2px solid var(--primary); border-radius: 50px; padding: 15px 36px; display: block; margin: 0 auto; transition: all .3s; } 



/* 메인 슬라이드 */
.main-slide-bg.img1 {background: url(../images/main/main-slide.gif) no-repeat center;}
.slick-area { cursor: pointer; } 
.main-slide { position: relative; padding: 100px 50px 50px 50px; height: 100vh; } 
.main-slide .main-swiper { overflow: hidden; position: relative; height: 100%; } 
.main-slide .main-swiper .swiper-slide { overflow: hidden; position: relative; height: 100%; } 
.main-slide .main-swiper .swiper-slide .main-slide-txt-wrap { display: flex; width:80%; justify-content: center; align-items: center; position: relative; z-index: 1; margin: 0 auto; max-width: 1400px; height: 100%; } 
.main-slide .main-swiper .swiper-slide .main-slide-txt { margin-top: 40px; width: 100%; } 
.main-slide .main-swiper .swiper-slide .main-slide-bg-wrap { position: absolute; left: 0; top: 0; width: 100%; height: 100%; } 
.main-slide .main-swiper .swiper-slide .main-slide-bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-position: center center; background-repeat: no-repeat; -webkit-transition: transform 5s ease; transition: transform 5s ease; -webkit-transform: scale(1.1); transform: scale(1.1); } 
.main-slide .swiper-button-prev { opacity: 0 !important; left: 0 !important; top: 0 !important; margin: 0 !important; width: 30% !important; height: 100% !important; background: none !important; display: block; } 
.main-slide .swiper-button-next { opacity: 0 !important; right: 0 !important; top: 0 !important; margin: 0 !important; width: 30% !important; height: 100% !important; background: none !important; display: block; } 
.main-slide .swiper-button-prev::after, .main-slide .swiper-button-next::after { content: none; } 
.main-slide .swiper-pagination { display: flex; justify-content: space-around; align-items: center; position: absolute; left: auto; right: 50px; bottom: 50px; z-index: 10; width: 800px; } 
.main-slide .swiper-pagination .swiper-pagination-bullet { opacity: 0.8; flex: 1; display: block; margin: 0; padding: 0 10px; width: auto; height: auto; border-radius: 0; background: none; text-align: left; transition: none !important; padding: 30px 50px 20px 50px; background: #fff; } 
.main-slide .swiper-pagination-bullet.swiper-pagination-bullet-active { opacity: 1; transform: none !important; } 
.main-slide .swiper-pagination-bullet.swiper-pagination-bullet-active span { color: var(--primary); } 
.main-slide .swiper-pagination-bullet.swiper-pagination-bullet-active strong { color: var(--main); } 
.main-slide .main-swiper .swiper-slide-active .main-slide-bg { -webkit-transform: scale(1); transform: scale(1); } 
.main-slide .swiper-slide-active .main-slide-txt-wrap .main-slide-summary { -webkit-animation: fadeUp 1s 1.1s forwards; animation: fadeUp 1s 1.1s forwards; } 
.main-slide .swiper-slide-active .main-slide-txt-wrap .main-slide-title { -webkit-animation: fadeUp 1s 1.2s forwards; animation: fadeUp 1s 1.2s forwards; } 
.main-slide .load-init .swiper-slide-active .main-slide-txt-wrap .main-slide-summary { -webkit-animation: fadeUp 1s 0.3s forwards; animation: fadeUp 1s 0.3s forwards; } 
.main-slide .load-init .swiper-slide-active .main-slide-txt-wrap .main-slide-title { -webkit-animation: fadeUp 1s 0.4s forwards; animation: fadeUp 1s 0.4s forwards; } 


/* Hero */
 
.hero {position: relative; height: 660px; overflow: hidden}
.hero .hero-bg {position: absolute; top: 0; left: 0; bottom: 0; right: 0; margin-bottom: 0; background-color: none; background-size: cover; background-position: center; background-repeat: no-repeat; transform: scale(1.15); transition: transform 5s; z-index: 5}
.hero.--load .hero-bg {transform: scale(1)}
.hero .caption {position: relative; display: flex; width: 100%; height: 100%; padding-top: 10px; text-align: center; align-items: top; z-index: 10}
.hero .caption h2 {font-size: 30px; font-weight: 700; color: #302f2f; letter-spacing: -0.02em; line-height: 1.5}


/* 메인 intro */

.main-intro {height: 400px;width: 100%;text-align: center;}
.main-intro span {font-size: 25px;color: #3a3939;font-weight: 600;display: block;width: 100%;padding-top: 65px;line-height: 1.5;}
.main-intro button.sbb-btn {font-weight: 500;background-color: var(--main);height: 48px;border-radius: 24px;padding: 12px 30px;font-size: 16px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: normal;letter-spacing: normal;border: none;text-align: left;color: var(--white-100);transition: 0.3s ease;margin-top: 20px;}
.main-intro button.sbb-btn:hover {background: var(--white-100);color: var(--main);}
.main-intro {background: url("../images/main/main_intro.jpg")no-repeat center;}
a.button-more-arrow .icon::before {background-color: var(--primary);}


/* 메인 카운터 */

.main-counter {height: 600px;width: 100%;text-align: center;}
.main-counter span {font-size: 25px;color: #3a3939;font-weight: 600;display: block;width: 100%;padding-top: 65px;line-height: 1.5;}
.main-counter button.sbb-btn {font-weight: 500;background-color: var(--main);height: 48px;border-radius: 24px;padding: 12px 30px;font-size: 16px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: normal;letter-spacing: normal;border: none;text-align: left;color: var(--white-100);transition: 0.3s ease;margin-top: 20px;}
.main-counter button.sbb-btn:hover {background: var(--white-100);color: var(--main);}
.main-counter {background: url("../images/main/main_counter.jpg")no-repeat center;}
a.button-more-arrow .icon::before {background-color: var(--primary);}


/* 메인 그래프 */

.main-graph {height: 400px;width: 100%;text-align: center;}
.main-graph span {font-size: 35px;color: #3a3939;font-weight: 600;display: block;width: 100%;padding-top: 65px;line-height: 1.5;}
.main-graph button.sbb-btn {font-weight: 500;background-color: var(--main);height: 48px;border-radius: 24px;padding: 12px 30px;font-size: 16px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: normal;letter-spacing: normal;border: none;text-align: left;color: var(--white-100);transition: 0.3s ease;margin-top: 20px;}
.main-graph button.sbb-btn:hover {background: var(--white-100);color: var(--main);}
.main-graph {background: url("../images/main/main_graph.jpg")no-repeat center;}
a.button-more-arrow .icon::before {background-color: var(--primary);}

/* 메인 about */

.about-overview {padding-bottom: 140px}
.about-overview .row-overview .col-img img {display: block; width: 100%}
.about-overview .row-overview .col-content .en-heading {font-size: 20px; font-weight: 700; color: var(--primary); letter-spacing: 0.02em; margin-bottom: 20px}
.about-overview .row-overview .col-content h3 {font-size: 28px; font-weight: 700; color: var(--main); letter-spacing: -0.02em; line-height: 1.36; margin-bottom: 10px}
.about-overview .row-overview .col-content p {font-size: 17px; color: var(--gray-400); letter-spacing: -0.02em; line-height: 1.56}
.about-overview .row-overview .col-content .company-info {margin-top: 48px}
.about-overview .row-overview .col-content .company-info li {padding: 16px 20px; border-bottom: 2px solid #e9e9e9}
.about-overview .row-overview .col-content .company-info li dl {font-size: 0}
.about-overview .row-overview .col-content .company-info li dl dt, .about-overview .row-overview .col-content .company-info li dl dd {display: inline-block; font-size: 18px; letter-spacing: -0.02em; line-height: 1.5; vertical-align: top}
.about-overview .row-overview .col-content .company-info li dl dt {font-weight: 600; color: var(--gray-300); width: 110px}
.about-overview .row-overview .col-content .company-info li dl dd {font-weight: 600; color: var(--main); text-align: right; width: calc(100% - 110px)}

.about-core-value .section-sub-heading {position: relative; margin-bottom: 0; padding-bottom: 75px}
.about-core-value .section-sub-heading::after {content: 'Motivation from Pleasure'; position: absolute; bottom: 0; left: 0; right: 0; font-size: 90px; font-weight: 900; color: var(--gray-200); line-height: 0.5; text-align: center; opacity: .1}
.about-core-value .row-core .col-core-item figure {margin-bottom: 0}
.about-core-value .row-core .col-core-item figure img {display: block; width: 100%}
.about-core-value .row-core .col-core-item figure figcaption {position: relative; margin-top: -40px; margin-right: 80px; padding: 32px 24px; background-color: var(--white-100); z-index: 5}
.about-core-value .row-core .col-core-item figure figcaption .col-title {width: 80px}
.about-core-value .row-core .col-core-item figure figcaption .col-title h5 {font-size: 14px; font-weight: 700; color: var(--primary)}
.about-core-value .row-core .col-core-item figure figcaption .col-content h4 {font-size: 20px; font-weight: 600; color: var(--main); letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 14px}
.about-core-value .row-core .col-core-item figure figcaption .col-content p {color: var(--gray-400); letter-spacing: -0.02em; line-height: 1.56}


/* 메인 플로우 */

.main-flow {height: 350px;width: 100%;text-align: center;}
.main-flow span {font-size: 30px;color: #3a3939;font-weight: 600;display: block;width: 100%;padding-top: 65px;line-height: 1.5;}
.main-flow button.sbb-btn {font-weight: 500;background-color: var(--main);height: 48px;border-radius: 24px;padding: 12px 30px;font-size: 16px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: normal;letter-spacing: normal;border: none;text-align: left;color: var(--white-100);transition: 0.3s ease;margin-top: 20px;}
.main-flow button.sbb-btn:hover {background: var(--white-100);color: var(--main);}
.main-flow {background: url("../images/main/main_flow.jpg")no-repeat center;}
a.button-more-arrow .icon::before {background-color: var(--primary);}


/* 연혁 */
.history .history-cover {margin-bottom: 24px; padding: 140px 0; background-size: cover; background-position: center; background-repeat: no-repeat}
.history .history-cover h3 {font-size: 36px; font-weight: 600; color: var(--white-100); letter-spacing: -0.02em; line-height: 1.16; margin-bottom: 20px}
.history .history-cover p {font-size: 18px; font-weight: 400; color: rgba(255,255,255,.8); letter-spacing: -0.02em; line-height: 1.55}
.history .history-item {padding: 48px 32px}
.history .history-item + .history-item {border-top: 1px solid #e9e9e9}
.history .history-item .col-year h4 {font-size: 32px; font-weight: 700; color: var(--main); letter-spacing: 0.02em}
.history .history-item .col-content > ul > li {font-size: 0}
.history .history-item .col-content > ul > li + li {margin-top: 10px}
.history .history-item .col-content > ul > li > b, .history .history-item .col-content > ul > li > p {display: inline-block; font-size: 18px; letter-spacing: -0.02em; line-height: 1.56; vertical-align: top}
.history .history-item .col-content > ul > li > b {width: 56px; font-weight: 700; color: var(--gray-300)}
.history .history-item .col-content > ul > li > p {width: calc(100% - 56px); font-weight: 500; color: var(--gray-400)}


/* *********************************************
 * Business
 ******************************************** */
/* 사업소개 */
.business-overview {padding-left: 20px; padding-right: 20px}
.business-overview .overview-container {max-width: 880px; margin: auto}
.business-overview .overview-heading {font-size: 20px; font-weight: 600; color: var(--main); letter-spacing: -0.02em; line-height: 1.36; margin-bottom: 64px}
.business-overview .overview-cover {position: relative; height: 400px; margin-bottom: 80px; background-image: url(../images/sub/business_about_cover.jpg); background-size: cover; background-repeat: no-repeat; background-position: center}
.business-overview .overview-cover .typo-box {position: absolute; bottom: 0; right: 0; max-width: 480px; padding: 36px; background-color: var(--primary); opacity: 0.78; z-index: 10}
.business-overview .overview-cover .typo-box p {font-size: 18px; font-weight: 500; color: var(--white-100); letter-spacing: -0.02em; line-height: 1.64}
.business-overview .row-overview .col-item .item-inner {height: 100%; padding: 32px; border: 1px solid #dee2e6}
.business-overview .row-overview .col-item .item-inner .item-header {margin-bottom: 32px}
.business-overview .row-overview .col-item .item-inner .item-header h3 {font-size: 15px; font-weight: 700; color: var(--main); letter-spacing: -0.02em}
.business-overview .row-overview .col-item .item-inner .item-header .icon {display: inline-flex; width: 64px; height: 64px; font-size: 48px; color: var(--primary); align-items: center; justify-content: center}
.business-overview .row-overview .col-item .item-inner p {font-size: 13px; color: var(--gray-400); letter-spacing: -0.02em; line-height: 1.8}
.business-strength .row-strength + .row-strength {margin-top: 64px}
.business-strength .row-strength .col-img img {display: block; width: 100%}
.business-strength .row-strength .col-info .heading {position: relative; margin-bottom: 24px; z-index: 5}
.business-strength .row-strength .col-info .heading h4 {font-size: 22px; font-weight: 700; color: var(--main); line-height: 1.1}
.business-strength .row-strength .col-info .heading .num {position: absolute; bottom: 0; left: 0; display: block; font-size: 90px; font-weight: 900; color: var(--gray-200); line-height: 0.8; opacity: 0.09; z-index: -1}
.business-strength .row-strength .col-info p {color: var(--gray-400); letter-spacing: -0.02em; line-height: 1.75}
.business-field .row-field .col-field .field-card {height: 100%; border: 1px solid #dee2e6}
.business-field .row-field .col-field .field-card figure {margin-bottom: 0}
.business-field .row-field .col-field .field-card figure img {display: block; width: 100%}
.business-field .row-field .col-field .field-card .content {padding: 80px 40px 40px}
.business-field .row-field .col-field .field-card .content .heading {position: relative; margin-bottom: 20px; z-index: 5}
.business-field .row-field .col-field .field-card .content .heading h4 {font-size: 22px; font-weight: 700; color: var(--main); letter-spacing: -0.02em}
.business-field .row-field .col-field .field-card .content .heading .num {position: absolute; bottom: 0; left: 0; font-size: 90px; font-weight: 900; color: var(--gray-200); line-height: 0.85; opacity: 0.09; z-index: -1}
.business-field .row-field .col-field .field-card .content p {font-size: 17px; color: var(--gray-400); letter-spacing: -0.02em; line-height: 1.8}
.business-detail {background-color: var(--white-200);}
.business-detail .row-detail .col-img img {display: block; width: 100%}
.business-detail .row-detail .col-text {display: flex; background-color: var(--white-100); align-items: center}
.business-detail .row-detail .col-text .text-inner {width: 100%; padding-left: 64px; padding-right: 20px}
.business-detail .row-detail .col-text .text-inner h4 {font-size: 15px; font-weight: 700; color: var(--main); letter-spacing: -0.02em; line-height: 1.3; margin-bottom: 16px}
.business-detail .row-detail .col-text .text-inner p {font-size: 11px; font-weight: 500; color: var(--gray-300); letter-spacing: -0.02em; line-height: 1.8}
.business-detail .row-detail .col-text .text-inner .button-more-arrow {color: var(--main); margin-top: 48px}
.business-detail .row-detail .col-text .text-inner .button-more-arrow .icon {color: var(--white-100)}
.business-detail .row-detail + .row-detail {margin-top: 32px}


/* 오시는 길 */
.location .location-info {padding-left: 64px; padding-right: 64px}
.location .location-info .info-heading {font-size: 16px; font-weight: 600; color: var(--main); letter-spacing: -0.02em}
.location .location-info p {color: var(--gray-300); letter-spacing: -0.02em; line-height: 1.8}

/* 메인 배너 */

.main-banner {height: 300px;width: 100%;text-align: center;}
.main-banner span {font-size: 35px;color: #3a3939;font-weight: 600;display: block;width: 100%;padding-top: 10px;line-height: 1.5;}
.main-banner button.sbb-btn {font-weight: 500;background-color: var(--main);height: 48px;border-radius: 24px;padding: 12px 30px;font-size: 16px;font-weight: 500;font-stretch: normal;font-style: normal;line-height: normal;letter-spacing: normal;border: none;text-align: left;color: var(--white-100);transition: 0.3s ease;margin-top: 10px;}
.main-banner button.sbb-btn:hover {background: var(--white-100);color: var(--main);}
.main-banner {background: url("../images/main/main_bottom_banner2.jpg")no-repeat center;}
a.button-more-arrow .icon::before {background-color: var(--primary);}


@-webkit-keyframes fadeUp { 
 from { opacity: 0; visibility: hidden; -webkit-transform: translateY(40px); transform: translateY(40px); } 
 to { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } 
 }

@keyframes fadeUp { 
 from { opacity: 0; visibility: hidden; -webkit-transform: translateY(40px); transform: translateY(40px); } 
 to { opacity: 1; visibility: visible; -webkit-transform: translateY(0); transform: translateY(0); } 
 }

/* introduce */
section.intro .intro-box {margin:0;}
section.intro .intro-box .i-box { padding: 50px 40px; flex: 1; width: 33.3333%; transition: all .45s; position: relative; background-color: var(--white-200-2);} 
section.intro .intro-box .i-box:nth-child(1) { border-bottom: 8px solid var(--gray-150); } 
section.intro .intro-box .i-box:nth-child(2) { border-bottom: 8px solid var(--blueblack); margin: 0 40px; } 
section.intro .intro-box .i-box:nth-child(3) { border-bottom: 8px solid var(--primary); } 
section.intro .intro-box .i-box .i-link { width: 100%; height: 100%; } 
section.intro .intro-box .i-box .i-txt-1 {visibility: visible;opacity: 1;transition: all .45s;} 
section.intro .intro-box .i-box .i-txt-2 { visibility: hidden; position: absolute; top: 50px; left: 40px; right: 40px; transform: translateY(30px); opacity: 0; } 
section.intro .intro-box .i-box .section-intro-summary i { transform: translateX(-30px); } 


/* advantage */
section.advantage { position: relative; } 
section.advantage .row.nth1 .txt { padding-left: 70px; padding-top: 50px; } 
section.advantage .row.nth2 .txt { text-align: right; padding-right: 70px; padding-top: 50px; } 

/* banner */
section.banner {padding: 200px 0 220px 0;margin: 0 30px;background: url(../images/main/show-banner.jpg) no-repeat center;background-size: cover;background-attachment: fixed;text-align: center;} 

/* product */
section.product { background: var(--white-200); padding: 120px 0; text-align: center; position: relative; } 
section.product .container-xxl {position: relative;}
section.product .prod-swiper .swiper-slide { width: calc(100% / 4); } 
section.product .prod-swiper .swiper-slide .txt { background-color: var(--white-100); padding: 30px; } 
section.product .swiper-button-prev { top: 50px; left: unset; right: 70px;color: var(--blueblack); width: 40px; height: 40px; } 
section.product .swiper-button-next { top: 50px; left: unset; right: 10px;color: var(--blueblack); width: 40px; height: 40px; } 
section.product .swiper-button-prev::after, section.product .swiper-button-next::after { font-size: 23px; } 
section.product .prod-swiper .swiper-slide img {object-fit: cover;max-height: 300px;}
.smooth-edge {width: 90px; height: 100%; display: block; position: absolute; top: 0; z-index: 1; right: 0px; background: linear-gradient( to right, transparent, var(--white-200) ); }
.smooth-edge.left {right: unset;left:0;background: linear-gradient( to right, var(--white-200), transparent );}


/* notice */
.notice .notice-content .row {background: var(--white-200);border-radius: 8px;overflow: hidden;padding: 40px 30px 30px;margin:0;margin-bottom: 20px;}
.notice .notice-content .row .notice-text {font-size: var(--font-size-sm-1);display: none;padding-top: 30px;}
.notice .notice-content .row div > a {display:none}

@media (min-width: 768px) {
   .business-strength .row-strength .col-info.text-md-end .heading .num {left: auto; right: 0}
    section.intro .intro-box .i-box:hover { text-decoration: none; transform: translateY(-10px); transition: all .45s; box-shadow: 0px 20px 25px -9px rgba(0,0,0,0.16); } 
    section.intro .intro-box .i-box:hover .i-txt-1 {visibility: hidden;opacity: 0;transition: all .15s;transform: translateY(15px);} 
    section.intro .intro-box .i-box:hover .i-txt-2 { visibility: visible; transform: translateY(0); transition: all ease .45s; opacity: 1; } 
    section.intro .intro-box .i-box:hover .section-intro-summary i { transform: translateX(0px); transition: all .45s; } 
}
@media (hover: hover) {
    .section-white-btn:hover { border-radius: 0; transition: all .3s; background: var(--main); color: var(--white-100); } 
    .section-point-btn:hover { border-radius: 0; transition: all .3s; background: var(--main); color: var(--white-100); } 
    .section-line-btn:hover { border-radius: 0; transition: all .3s; border-color: var(--main); color: var(--main); }     
    section.event .event-swiper .swiper-slide a .image:hover img {transform: scale(1.08);transition: all .8s;}
}
@media (max-width: 1280px) {
    :root {
        --font-size-sm-3: 18px;
    }
    .main-hero {padding: 80px 30px 30px;}
    .main-slide {padding: 80px 30px 30px;}
    .main-slide .swiper-pagination-bullet strong {display: none;}
    .main-slide .swiper-pagination-bullet span {font-size: var(--font-size-sm-3);font-weight: var(--font-weight-medium);}
    .main-slide .swiper-pagination {width: auto;right: 30px;bottom: 30px;}
    .main-slide .swiper-pagination .swiper-pagination-bullet {padding: 20px 42px 16px 42px;opacity: 1;position: relative;}
    .main-slide .swiper-pagination .swiper-pagination-bullet::after {content: '';background: var(--blueblack);opacity: 0.8;width: 1px;height: 16px;position: absolute;z-index: 1;top: 30px;right: 0;transform: rotate(35deg);}
    .main-slide .swiper-pagination .swiper-pagination-bullet:last-child::after {content:none;}
    .location .location-info {padding-left: 32px; padding-right: 32px}
    section.intro .intro-box .i-box:nth-child(2) {margin: 0 20px;}
    section.banner {padding: 180px 0 160px 0;margin: 0;}
    section.intro .intro-box .i-box .i-txt-2 br {display: none;}
    section.notice .notice-content .row div:last-child {padding:0;}
}
@media (max-width: 1100px) {
    .smooth-edge {display: none;}
}
@media (max-width: 991px) {
    #header, #header .container-fluid, #header .container-fluid .row {height: 80px;}
    .main-slide {padding: 80px 15px 15px;height: calc(100vh - 100px);}
    .main-slide-bg.img1 {background: url(../images/main/main-slide-mobile.gif) no-repeat center;}
    .section-intro-summary {font-size: var(--font-size-sm-1)}
    section.intro .intro-box .i-box .i-txt-2 {display: none;word-break: break-all;}
    section.intro .i-box .i-txt-1 .section-intro-title {margin-bottom: 44px;}
    section.intro .intro-box .i-box > .section-intro-summary {position: absolute;bottom: 40px;width: 75%;}
    section.intro .intro-box .i-box:hover .i-txt-1 {opacity: 1;visibility: visible;transform: translateY(0);}
    section.product {padding: 90px 0;}
    section.event .event-swiper .swiper-slide {width: 370px;}
    section.banner {padding: 130px 0 110px 0;}
    section.banner .section-desc-white {margin-bottom: 50px !important;}

    section.advantage .row.nth1 .txt {padding-left: 40px;padding-top: 35px;}
    section.advantage .row.nth2 .txt {padding-right: 40px;padding-top: 35px;}
    section.advantage .row .txt br {display: none;}
    section.advantage img {height: 100%;object-fit: cover;width: 100%;}
    section.event .event-swiper .swiper-slide a .image {height: 250px;}
    section.notice .notice-content .row .notice-text {padding-top: 20px;}
    section.notice .notice-date {padding-left: 0;}
}

@media (max-width: 767px) {
    .hero {height: 350px}
    .hero .caption {padding-top: 5px;padding-left: 0;}
    .hero .caption h2 {font-size: 20px}
    .main-slide .swiper-pagination .swiper-pagination-bullet {padding: 13px 26px 10px 26px;}
    .main-slide .swiper-pagination .swiper-pagination-bullet::after {top: 15px;}
    .main-slide .swiper-pagination-bullet span {font-size: var(--font-size-sm-2);}
    .main-slide-summary {font-size:var(--font-size-sm-3);margin-bottom: 15px;}
    .main-slide-title {line-height: 1.25;}
    .main-slide .main-swiper .swiper-slide .main-slide-txt {margin-top: 0;}
    section.intro .intro-box {margin-top: 40px !important;}
    section.intro .intro-box .i-box {width: 100%;flex: unset;margin: 8px 10px !important;padding: 30px 60px;display: flex;justify-content: space-between;align-items: center;}
    section.intro .i-box .i-txt-1 .section-intro-title {margin: 10px 0 0;}
    section.intro .intro-box .i-box > .section-intro-summary {position: static;width: auto;font-size: 0;}
    .section-intro-title {font-weight: var(--font-weight-medium);}
    section.intro .intro-box .i-box .section-intro-summary i {transform: translateX(0);font-size: 25px;}
    section.advantage .row .col-md-4 {max-height: 260px;height: 100%;overflow: hidden;align-items: center;display: flex;}
    section.advantage .row.nth2 {flex-direction: column-reverse;display: flex;margin-top: 20px !important;}
    section.advantage .row .txt {text-align: left !important;padding: 30px !important;}
    section.intro .intro-box .i-box:nth-child(1) { border-left: 8px solid var(--gray-150);border-bottom: none; } 
    section.intro .intro-box .i-box:nth-child(2) { border-left: 8px solid var(--blueblack);border-bottom: none; } 
    section.intro .intro-box .i-box:nth-child(3) { border-left: 8px solid var(--primary);border-bottom: none; } 
    section.product {padding: 60px 0;}
    section.notice .notice-content .row {padding: 40px 10px 30px;}
    section.notice .notice-content .row div:first-child {padding:0;}
    section.notice .notice-date {padding: 0;text-align: center;}
   .location .location-info {padding-left: 16px; padding-right: 16px}
    .location .location-info .col-info + .col-info {margin-top: 28px}
    .location .location-info .info-heading {font-size: 14px}
 .about-overview .row-overview .col-content {margin-top: 32px}
    .about-overview .row-overview .col-content .en-heading {font-size: 16px; margin-bottom: 16px}
    .about-overview .row-overview .col-content h3 {font-size: 21px}
    .about-overview .row-overview .col-content p {font-size: 15px}
    .about-overview .row-overview .col-content .company-info {margin-top: 28px}
    .about-overview .row-overview .col-content .company-info li dl dt {width: 80px}
    .about-overview .row-overview .col-content .company-info li {padding: 12px 16px}
    .about-overview .row-overview .col-content .company-info li dl dt, .about-overview .row-overview .col-content .company-info li dl dd {font-size: 14px}
    .about-overview .row-overview .col-content .company-info li dl dd {width: calc(100% - 80px)}

    .about-core-value .section-sub-heading::after {bottom: 0; font-size: 8vw; line-height: 0.9}
    .about-core-value .row-core .col-core-item + .col-core-item {margin-top: 28px}
    .about-core-value .row-core .col-core-item figure figcaption {margin-top: -32px; margin-right: 64px; padding: 24px 20px}
    .about-core-value .row-core .col-core-item figure figcaption .col-title {margin-bottom: 8px}
    .about-core-value .row-core .col-core-item figure figcaption .col-title h5 {font-size: 12px}
    .about-core-value .row-core .col-core-item figure figcaption .col-content h4 {font-size: 16px}
    .about-core-value .row-core .col-core-item figure figcaption .col-content p {font-size: 14px}

   .history .history-cover {padding: 100px 0}
    .history .history-cover h3 {font-size: 26px; margin-bottom: 16px}
    .history .history-cover p {font-size: 16px}
    .history .history-item {padding: 32px 24px}
    .history .history-item .col-year h4 {font-size: 22px}
    .history .history-item .col-content > ul > li > b, .history .history-item .col-content > ul > li > p {font-size: 16px}
    .history .history-item .col-content > ul > li > b {width: 42px}
    .history .history-item .col-content > ul > li > p {width: calc(100% - 42px)}
  .business-overview .overview-heading {font-size: 22px; margin-bottom: 36px}
    .business-overview .overview-cover {height: 300px; margin-bottom: 48px}
    .business-overview .overview-cover .typo-box {padding: 28px}
    .business-overview .overview-cover .typo-box p {font-size: 16px}
    .business-overview .row-overview .col-item + .col-item {margin-top: 24px}
    .business-overview .row-overview .col-item .item-inner {padding: 24px}
    .business-overview .row-overview .col-item .item-inner .item-header h3 {font-size: 17px}
    .business-overview .row-overview .col-item .item-inner .item-header .icon {width: 48px; height: 48px; font-size: 32px}
    .business-overview .row-overview .col-item .item-inner p {font-size: 15px}
    .business-strength .row-strength .col-info {margin-top: 60px}
    .business-strength .row-strength .col-info .heading {margin-bottom: 16px}
    .business-strength .row-strength .col-info .heading h4 {font-size: 19px}
    .business-strength .row-strength .col-info .heading .num {font-size: 64px}
    .business-strength .row-strength + .row-strength {margin-top: 48px}
    .business-field .row-field .col-field .field-card .content {padding: 56px 24px 24px}
    .business-field .row-field .col-field .field-card .content .heading {margin-bottom: 12px}
    .business-field .row-field .col-field .field-card .content .heading h4 {font-size: 18px}
    .business-field .row-field .col-field .field-card .content .heading .num {font-size: 56px}
    .business-field .row-field .col-field .field-card .content p {font-size: 15px}
    .business-detail .row-detail .col-text .text-inner {padding-top: 28px; padding-left: 24px; padding-right: 24px; padding-bottom: 28px}
    .business-detail .row-detail .col-text .text-inner h4 {font-size: 18px}
    .business-detail .row-detail .col-text .text-inner p {font-size: 15px}
    .business-detail .row-detail .col-text .text-inner .button-more-arrow {margin-top: 28px}
}
@media (max-width: 575px) {
    .main-hero .caption h2 {padding-left: 0px}
    .main-hero {padding: 50px 15px 0px 0px;height: calc(100vh - 100px);}
    .main-hero-bg.img1 {background: url(../images/main/main-slide-mobile.gif) no-repeat center;}
    .history .history-item {padding: 24px 0}
    .history .history-item .col-year {margin-bottom: 20px}
    .history .history-item .col-content > ul > li > b, .history .history-item .col-content > ul > li > p {font-size: 15px}
    .section-intro-title {font-size: var(--font-size-sm-2)}
    section.intro .intro-box .i-box {padding: 25px 30px;}
    section.intro .intro-box .i-box .section-intro-summary i {font-size: 15px;}
    section.product .swiper-button-prev::after, section.product .swiper-button-next::after,
    section.event .swiper-button-prev::after, section.event .swiper-button-next::after {font-size: 15px;}
    section.product .swiper-button-prev, section.product .swiper-button-next,
    section.event .swiper-button-prev, section.event .swiper-button-next {top: 60px;}
    section.product .swiper-button-prev, section.event .swiper-button-prev {right: 60px;}
}
@media (max-width: 480px) {
    section.notice .notice-date {padding-left:0;}
}