.introduce picture {text-align: center;}
.introduce picture img {width: 100%; max-width: 1920px;}

.introduce-section1 {width: 100%; display: flex; flex-direction: column; gap: 27px; align-items: center; padding-top: 100px;}
.introduce-section1 .introduce-title {position: relative;}
.introduce-section1 .introduce-title::after {content: ''; position: absolute; left: 50%; top: -5px; transform: translateX(-50%); width: 100%; max-width: 567px; height: 12px; background: url('/work/img/introduce_quotes.svg') no-repeat center/contain;}
.introduce-section1 .introduce-title::before {content: ''; position: absolute; left: 50%; top: calc(100% + 36px); transform: translateX(-50%); width: 1px; height: 57px; background: #BBDAD6;}
.introduce-section1 .introduce-title h2 {font-size: 34px; font-style: normal; font-weight: 300; line-height: 150%; letter-spacing: -0.68px; text-align: center;}
.introduce-section1 .introduce-title h2 b {font-weight: 600;}
.introduce-section1 .introduce-content {display: flex; gap: 73px; align-items: flex-end;}
.introduce-section1 .introduce-content img.pc {max-width: 572px;}
.introduce-section1 .introduce-content > div {padding-bottom: 68px; display: flex; flex-direction: column; gap: 28px;}
.introduce-section1 .introduce-content p {position: relative; font-size: 17px; font-style: normal; font-weight: 300;line-height: 164.706%; color: #222;}

.introduce-section2 {width: 100%; background: url('/work/img/introduce_section2_bg.jpg') no-repeat center/cover; display: flex; flex-direction: column; align-items: center; padding-top: 109px; padding-bottom: 139px; overflow: hidden;}
.introduce-section2.title-style >h2 + p {color: #fff;}
.introduce-section2 .section2-wrapper {display: flex; position: relative; margin-top: 59px;}
.introduce-section2 .section2-wrapper::after {content: ''; background: url('/work/img/introduce_section2_x.svg') no-repeat center / cover; min-width: 66px; min-height: 66px; position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%);}
.introduce-section2 .section2-wrapper > div {min-width: 514px; min-height:514px; border-radius: 50%; background: rgba(255, 255, 255, 0.20);border: 1px solid #FFF; box-shadow: 0 4px 82.2px 0 rgba(58, 146, 134, 0.20); display: flex; flex-direction: column; gap: 34px; padding-top: 150px; position: relative;}
.introduce-section2 .section2-wrapper > div::after {content: ''; position: absolute; width: 150%; height: 1px; background: #fff;top: 50%; transform: translateY(-50%);}
.introduce-section2 .section2-wrapper > div.left {margin-right: -85px; align-items: flex-start; padding-left: 75px;}
.introduce-section2 .section2-wrapper > div.left::after {right: 100%;}
.introduce-section2 .section2-wrapper > div.right::after {left: 100%;}
.introduce-section2 .section2-wrapper > div.right {margin-left: -85px; align-items: flex-end; padding-right: 85px;}
.introduce-section2 .section2-wrapper > div h3 {font-size: 32px; font-style: normal; font-weight: 700; line-height: 150%; color:#fff; text-align: center;}
.introduce-section2 .section2-wrapper > div p {color: #EEE; text-align: center; font-size: 17px; font-style: normal;font-weight: 300; line-height: 176.471%;}

.introduce-section3 {width: 100%; background: url('/work/img/introduce_section3_bg.jpg') no-repeat center center/cover; display: flex; flex-direction: column; align-items: center; padding-top: 180px; padding-bottom: 102px;}
.introduce-section3 > div {display: flex; justify-content: center; align-items: center; width: 92%; max-width: 1221px;}
.introduce-section3 > div img.pc {width: 100%; margin-top: 84px;}

.introduce-section4 {width: 100%; display: flex; flex-direction: column; align-items: center; padding-top: 160px; padding-bottom: 160px;}
.introduce-section4 .introduce-swiper {width: 100%; max-width: 1424px; position: relative; overflow: hidden;}
.introduce-section4 .swiper-pagination-progressbar {bottom: -82px; top: unset;}
.history-inner {width: 92%; max-width: 1424px; overflow:hidden}
.history-section {width: 100%;}
.history-section .history-line-lt {box-sizing: border-box;}
.history-section .history-line-lt .history-util {margin-top: 82px; position: relative;}
.history-section .navi-box {display: flex; justify-content: flex-end; gap: 7px;}
.history-section .navi-box .navi-wrap {width: 107px; position: relative; height: 50px; margin-top:15px;}
.history-section .history-line-lt .history-util .swiper-pagination-progressbar.swiper-pagination-horizontal {top: auto; bottom: 0;}
.history-section .history-line-lt .history-util .swiper-pagination-progressbar {background: #eee;}
.history-section .history-line-lt .history-util .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #111;}
.history-section .swiper-button-next.comp-next {background: url(/work/img/introduce_next.svg) no-repeat center / cover; width: 50px; height: 50px; border-radius:50%;}
.history-section .swiper-button-prev.comp-prev {background: url(/work/img/introduce_prev.svg) no-repeat center / cover; width: 50px; height: 50px; border-radius:50%;}
.history-section .swiper-button-next {right:0;}
.history-section .swiper-button-prev {left:0;}
.history-section .swiper-button-next::after, .history-section .swiper-button-prev::after {display: none;}
.history-line-rt {margin-top: 47px;}
.history-section .history-line-rt .swiper-slide {display:flex; flex-direction:column; justify-content:space-between; min-height: 437px; position: relative;}
.history-section .history-line-rt .swiper-slide::after {content: ''; position: absolute; width: 1px; height:100%; background: #eee; top: 0; right: -16px;}
.history-section .history-line-rt .year-box h4 {color: #3A9286; font-size: 14px; font-style: normal; font-weight: 600; line-height: 150%;}
.history-section .history-line-rt .year-box h2 {color: #222; font-size: 22px; font-style: normal; font-weight: 600; line-height: 150%; padding:12px 0;}
.history-section .history-line-rt .history-box {color: #444; font-size: 16px; font-style: normal; font-weight: 200; line-height: 175%;}
.history-section .history-line-rt img {width: 100%;}
.history-section .swiper-pagination-progressbar,.swiper-pagination {position:unset;}
.history-section .swiper-pagination-progressbar {width: 100%; height:2px;}

.introduce-section5 {width: 100%; background: url('/work/img/introduce_section5_bg.jpg') no-repeat center /cover; display: flex; flex-direction: column; align-items: center; padding-top: 154px; padding-bottom: 309px; overflow: hidden; position: relative;}
.introduce-section5.title-style span.width {width: 100vw; height: 1px; position: absolute; left: 50%; transform: translateX(-50%); background: linear-gradient(270deg, rgba(201, 201, 201, 0.00) 0%, #BDBDBD 12.5%, #C9C9C9 65.87%, rgba(201, 201, 201, 0.00) 100%);}
.introduce-section5.title-style span.width.top {top: 9.6%;}
.introduce-section5.title-style span.width.bottom {top: 21.3%;}
.introduce-section5 h2 {position: relative; margin-bottom: 55px;}
.introduce-section5 h2::after {content: ''; position: absolute; width: 1px; min-height: 405px; background: linear-gradient(180deg, rgba(201, 201, 201, 0.00) 0%, #BDBDBD 14.42%, #C9C9C9 65.87%, rgba(201, 201, 201, 0.00) 100%); top: -113px; left: -80px;}
.introduce-section5 h2::before {content: ''; position: absolute; width: 1px; min-height: 405px; background: linear-gradient(180deg, rgba(201, 201, 201, 0.00) 0%, #BDBDBD 14.42%, #C9C9C9 65.87%, rgba(201, 201, 201, 0.00) 100%); top: -113px; right: -80px;}
.introduce-section5 > div {display: flex; flex-direction: column; gap: 45px; margin-top: 103px;}
.introduce-section5 ul {display: flex; width: 1003px;}
.introduce-section5 ul.introduce-section5-content2 {justify-content: flex-end;}
.introduce-section5 ul li {display: flex; flex-direction: column; gap: 22px; align-items: center; margin-right: -30px;}
.introduce-section5 ul li p {color: #3A9286; font-size: 16px; font-style: normal; font-weight: 500; line-height: 150%; letter-spacing: -0.48px; text-align: center;}

.introduce-section5 ul li img {box-shadow: -4px 1.2px 8px 0 rgba(0, 0, 0, 0.30); max-height: 221px;}

@media (max-width: 1024px){
    .introduce-section1 {padding-top: 105px; gap: 30px;}
    .introduce-section1 .introduce-title h2 {font-size: 24px;}
    .introduce-section1 .introduce-title::before {display: none;}
    .introduce-section1 .introduce-content {flex-direction: column; align-items: center; gap: 25px;}
    .introduce-section1 .introduce-content > div {padding-bottom: 105px; gap: 30px;}
    .introduce-section1 .introduce-content p {font-weight: 400; line-height: 176.471%; letter-spacing: -0.51px; color: #555;}
    .introduce-section1 .introduce-content img.mo {width: 100%;}

    .introduce-section2 {background: url('/work/img/introduce_section2_bg_mo.jpg') no-repeat center top / cover; padding-top: 140px; padding-bottom: 100px;}
    .introduce-section2 .section2-wrapper {flex-direction: column; margin-top: 54px;}
    .introduce-section2 .section2-wrapper::after {min-width: 43px; min-height: 43px;}
    .introduce-section2 .section2-wrapper > div {padding-top: 0; min-width: 317px; min-height: 317px; gap: 10px;}
    .introduce-section2 .section2-wrapper > div::after {display: none;}
    .introduce-section2 .section2-wrapper > div.left {margin-right: 0; align-items: center; padding-left: 0; padding-top: 55px;}
    .introduce-section2 .section2-wrapper > div.right {margin-left: 0; align-items: center; padding-right: 0; padding-top: 86px; margin-top: -65px;}
    .introduce-section2 .section2-wrapper > div h3 {font-size: 24px;}
    .introduce-section2 .section2-wrapper > div p {font-size: 17px;}

    .introduce-section3 {background: url('/work/img/introduce_section3_bg_mo.jpg') no-repeat left -20px / cover; padding-top: 100px; padding-bottom: 111px;}
    .introduce-section3 > div {margin-top: 42px;}

    .introduce-section4 {padding: 100px 0;}
    .history-section .navi-box {display: none;}
    .history-inner {width: 100%; }
    .history-section .history-line-rt .year-box h4 {font-weight: 700; line-height: 120%}
    .history-section .history-line-rt .year-box h2 {font-weight: 700; line-height: 145.455%; padding:9.6px 0;}
    .history-section .history-line-rt .history-box {font-size: 17px; font-weight: 300; line-height: 176.471%;}
    .history-section {overflow: hidden;}
    .history-line-wrapper {padding-left: 90px; }
    .history-line-rt {margin-top: 51px; overflow: hidden;}
    .history-section .history-line-rt .swiper-slide {min-height: 350px;}
    .history-section .history-line-rt .swiper-slide::after {right: -13px;}
    .history-section .history-line-rt .img-box {max-height: 190px;}
    .history-section .history-line-rt img {max-height: 190px; object-fit: cover;}
    .history-section .history-line-lt .history-util {margin-top: 39px; display: flex; justify-content: center;}
    .history-section .swiper-pagination-progressbar {max-width: calc(100% - 180px); min-width: 206px;}

    .introduce-section5 {background: url('/work/img/introduce_section5_bg_mo.jpg') no-repeat left top / cover; padding-top: 176px; gap: 0;}
    .introduce-section5 > div {margin-top: 52px;}
    .introduce-section5.title-style span,.introduce-section5 h2::after,.introduce-section5 h2::before {display: none;}
    .introduce-section5 ul {width: auto; justify-content: center; margin-bottom: 20px;}
    .introduce-section5 ul:last-child {margin-bottom: 0;}
    .introduce-section5 ul li {margin-right: -28px; gap: 15px;}
    .introduce-section5 ul li img {max-height: 151px;}
    .introduce-section5 ul li p {font-size: 11px;}
}