.main .title-box h2, .icord .title-box h2 {font-size: 55px; font-weight: 900; line-height: 100%;}
.main .title-box strong, .icord .title-box strong {font-size: 30px; font-weight: 800; line-height: 140%;}
.main .title-box p, .icord .title-box p {font-size: 18px; font-weight: 400; line-height: 140%;}


/* [main] - hero */
.main-hero-section {padding: 211px 0 30px; box-sizing: border-box; background: url('../images/background/main-hero-bg.png') no-repeat 50% 50% / cover;}

.main .main-hero-section .title-box {margin-bottom: 100px;}
.main .main-hero-section .title-box h2 {font-size: 36px; font-weight: 800; color: #fff; line-height:110%; margin-bottom: 13px; display: block; }
.main .main-hero-section .title-box strong {font-size: 20px; line-height: 140%; color: #fff; font-weight: 600; margin-bottom: 10px; display: block;}
.main .main-hero-section .title-box p {font-size: 16px; font-weight: 400; color: #fff; line-height: 140%;}

.main-hero-section .list-box {width: 100%; height: 129px; border-radius: 10px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); background-color: rgba(0,0,0,0.1);}
.main-hero-section .list-box ul {display: flex; justify-content: space-between; padding: 14px 20px 22px; box-sizing: border-box; align-items: center; height: 100%;}
.main-hero-section .list-box ul li {text-align: center; display: flex; flex-direction: column; align-items: center; color: #fff; flex: 1; height: 100%; justify-content: space-between;}
.main-hero-section .list-box ul li i {width: 36px;}
.main-hero-section .list-box ul li strong {padding: 10px 0 4px; font-size: 24px; font-weight: 700; line-height: 120%;}
.main-hero-section .list-box ul li  p {font-size: 14px; line-height: 130%;}


/* [main] - section1 */
.main-section1 {padding: 68px 0px 80px 20px; background-color: #003F68; box-sizing: border-box; background-image: url('../images/background/main-section1-bg.png'); background-size: contain; background-repeat: no-repeat; background-position: bottom 50%;}

.main-section1 .title-box {margin-bottom: 77px;}
.main-section1 .title-box h2 {color: rgba(0,0,0,0.25);}
.main-section1 .title-box strong {color: #fff;}
.main-section1 .title-box p {color: #fff;}

.main-swiper .s-box {display: flex; flex-direction: column; border-radius: 30px; overflow: hidden; height: 510px;}
.main-swiper .s-box .img-box {height: 270px;}
.main-swiper .swiper-slide.slide1 .img-box{background: url('../images/main/main-section1-img1.png') no-repeat 50% 50% / cover;}
.main-swiper .swiper-slide.slide2 .img-box, .main-swiper .swiper-slide:nth-child(4) .img-box{background: url('../images/main/main-section1-img2.png') no-repeat 50% 50% / cover;}

.main-swiper .s-box .bottom-box {background-color: #fff; height: calc(100% - 270px);}
.main-swiper .s-box .box-inner {padding: 20px 20px 15px;}
.main-swiper .s-box .box-inner span {font-size: 18px; font-weight: 600; color: #00A0FF; line-height: 120%; display: block;}
.main-swiper .s-box .box-inner strong {font-size: 24px; line-height: 140%; color: #222; font-weight: 800; display: block; margin-bottom: 12px;}
.main-swiper .s-box .box-inner p {font-size: 15px; font-weight: 400; line-height: 140%; color: #555; margin-bottom: 18px;;}
.main-swiper .s-box .box-inner p em {color: #003f68; font-style: normal;}

.main-swiper .s-box .tag-box{display: flex; align-items: center; flex-wrap: wrap; gap: 5px;}
.main-swiper .s-box .tag-box li {padding: 5px 10px; font-size: 12px; font-weight: 500; color: #555; background-color: #f0f0f0; border-radius: 50px;}


/* [main] - section2 */
.main-section2 {padding: 66px 0 80px; background: url('../images/background/main-section2-bg.png') no-repeat 50% 50% / cover;}

.main .main-section2 .title-box {margin-bottom: 46px;}
.main .main-section2 .title-box h2 {color: rgba(255,255,255,0.7);}
.main .main-section2 .title-box strong {color: #222;}
.main .main-section2 .title-box p {color: #444;}

.main-section2 .item-box ul li {display: flex; align-items: center; gap: 13px; padding: 24px 15px; background-color: #fff; border-radius: 30px;}
.main-section2 .item-box ul li:nth-child(n+2){margin-top: 10px;}
.main-section2 .item-box ul li i {width: 87px;}
.main-section2 .item-box ul li .txt-box strong {font-size: 20px; color: #222; font-weight: 600; margin-bottom: 4px;}
.main-section2 .item-box ul li .txt-box p {font-size: 15px; line-height: 140%; color: #555;}


/* [main] - section3 */
.main-section3 {padding: 73px 0 80px 20px;}

.main .main-section3 .title-box {margin-bottom: 43px;}
.main .main-section3 .title-box h2 {color: rgba(0, 63, 104, 0.1);}
.main .main-section3 .title-box strong {color: #222;}

.main-section3 .item-box {padding: 22px 0 30px; border: 1px solid #e6eaec; border-radius: 25px; text-align: center;}
.main-section3 .item-box p {font-size: 18px; font-weight: 400; color: #222; line-height: 140%; margin-bottom: 22px;}
.main-section3 .item-box p b {font-size: 700;}
.main-section3 .item-box i {width: 120px; margin: 0 auto 20px; display: block;}
.main-section3 .item-box span {font-size: 16px; font-weight: 500; color: #003F68;}



/* [main] - banner */
#main-banner {margin: 0 20px 62px;}
#main-banner a {padding: 29px 31px 33px; position:relative; display: block; width: 100%; height: 286px; border-radius: 16px; overflow: hidden; background: url('../images/background/main-banner-bg.png') no-repeat 50% 50% / cover;}
#main-banner a strong {font-size: 24px; font-weight: 700; color: #fff; display: block; margin-bottom: 14px;}
#main-banner a p {font-size: 15px; color: #fff; line-height: 140%;}
#main-banner .btn-box {position: absolute; bottom: 33px; left: 32px; width: 43px; height: 43px; display: flex; align-items: center; justify-content: center; border-radius: 100px; background-color: rgba(255,255,255,0.2);}
#main-banner .btn-box i {width: 16px;}





@media screen and (max-width: 440px){
    /* main */
    /* [main] hero section */
    .main .main-hero-section .title-box{margin-bottom: 22.7273vw;}
    .main .main-hero-section .title-box h2 {font-size: 8.1818vw;}
    .main .main-hero-section .title-box strong {font-size: 4.5455vw;}
    .main .main-hero-section .title-box p {font-size: 3.6364vw;}

    .main-hero-section .list-box ul li strong {font-size: 5.4545vw;}
    .main-hero-section .list-box ul li p {font-size: 3.1818vw;}

    /* [main] common */
    .main .title-box h2 {font-size: 12.5vw;}
    .main .title-box strong{font-size: 6.8182vw;}
    .main .title-box p {font-size: 4.0909vw;}


    /* [main] section1 */
    .main-section1 .title-box {margin-bottom: 17.5vw;}
    .main-swiper .s-box .box-inner span {font-size: 4.0909vw;}
    .main-swiper .s-box .box-inner strong{font-size: 5.4545vw;}
    .main-swiper .s-box .box-inner p {font-size: 3.4091vw;}
    .main-swiper .s-box .tag-box li {font-size: 2.7273vw;}


    /* [main] section 2 */
    .main-section2 .item-box ul li{gap: 8px; padding: 24px 12px;}
    .main-section2 .item-box ul li i{width: 18.1818vw;}
    .main-section2 .item-box ul li .txt-box{width: calc(100% - 21.1364vw);}
    .main-section2 .item-box ul li .txt-box strong {font-size: 4.5455vw;}
    .main-section2 .item-box ul li .txt-box p{font-size: 3.4091vw;}


    /* [main] section3 */
    .main-section3 .item-box p {font-size: 4.0909vw;}
    .main-section3 .item-box i {width: 27.2727vw;}
    .main-section3 .item-box span{font-size: 3.6364vw;}


    /* [main] banner */
    #main-banner a {height: 240px;}
    #main-banner a strong {font-size: 5.4545vw;}
    #main-banner a p {font-size: 3.4091vw;}

}