/* [icord] - hero section */
.icord .main-hero-section {background-image: url('../images/background/icord-hero-bg.png'); padding-top: 161px;}
.icord .main-hero-section .title-box {margin-bottom: 133px;}
.icord .main-hero-section .title-box h2 {font-size: 36px; line-height: 110%; color: #fff; font-weight: 800; margin-bottom: 13px; display: block;}
.icord .main-hero-section .title-box strong {font-size: 20px; line-height: 140%; color: #fff; font-weight: 600; margin-bottom: 10px; display: block;}
.icord .main-hero-section .title-box p {font-size: 16px; font-weight: 400; color: #fff; line-height: 140%;}

.icord .main-hero-section .list-box {height: 157px;}
.icord .main-hero-section .list-box ul {padding: 12px 20px 20px;}
.icord .main-hero-section .list-box ul li strong {font-size: 22px;}



/* [icord] - section1 */
.icord-section1 {padding: 69px 0 80px; background: url('../images/background/icord-section1-bg.png') no-repeat bottom center / cover;}

.icord-section1 .title-box{margin-bottom: 47px;}
.icord-section1 .title-box h2 {color: rgba(0, 63, 104, 0.1);}
.icord-section1 .title-box strong {color: #222;}
.icord-section1 .title-box p {color: #444;}

.icord-section1 .s-box {border-radius: 30px; overflow: hidden;}
.icord-section1 .s-box .img-box {height: 270px; background: url('../images/icord/icord-section1-img1.png') no-repeat 50% 50% / cover;}
.icord-section1 .bottom-box {padding: 30px 20px; background-color: #fff;}
.icord-section1 .top-txt-box {margin-bottom: 27px;}
.icord-section1 .top-txt-box strong {font-size: 20px;  font-weight: 800; color: #222; line-height: 140%; margin-bottom: 10px; display: block;}
.icord-section1 .top-txt-box ul li {font-size: 15px; line-height: 200%; color: #555; padding-left: 12px; position: relative;}
.icord-section1 .top-txt-box ul li::after{content: ''; position: absolute; top: 14px; left: 2px; width: 3px; height: 3px; border-radius: 100%; background-color: #555;}
.icord-section1 .middle-txt-box {margin-bottom: 30px;}
.icord-section1 .middle-txt-box strong {display: block; margin-bottom: 11px; font-size: 20px; font-weight: 700; color: #003f68;}
.icord-section1 .middle-txt-box p {font-size: 15px; line-height: 140%; color: #555;}
.icord-section1 .s-box .tag-box{display: flex; align-items: center; flex-wrap: wrap; gap: 5px;}
.icord-section1 .s-box .tag-box li {padding: 5px 10px; font-size: 12px; font-weight: 500; color: #555; background-color: #f0f0f0; border-radius: 50px;}


/* [icord] - section2 */
.icord-section2 {padding: 73px 0 80px; background: url('../images/background/icord-section2-bg.png') no-repeat 50% 50% / cover;}
.icord-section2 .title-box{margin-bottom: 47px;}
.icord-section2 .title-box h2 {color: rgba(255,255,255,0.3);}
.icord-section2 .title-box strong {color: #222;}
.icord-section2 .title-box p {color: #444;}

.icord-section2 .item-box li {display: flex; align-items: center; gap: 13px; background-color: #fff; border-radius: 30px; padding: 18px 20px;}
.icord-section2 .item-box li:nth-child(n+2){margin-top: 10px;}
.icord-section2 .item-box li i {width: 90px;}
.icord-section2 .item-box li .txt-box strong{font-size: 24px; color: #222; margin-bottom:6px; display: block;}
.icord-section2 .item-box li .txt-box p {font-size: 18px; line-height: 140%; color: #003f68; font-weight: 300; margin-bottom: 9px;}
.icord-section2 .item-box li .txt-box p b {font-weight: 700;}
.icord-section2 .item-box li .txt-box span {font-size: 14px; color: #777; font-weight: 300;}


/* [icord] - section3 */
.icord-section3 {padding: 72px 0 80px;}
.icord-section3 .title-box {margin-bottom: 46px;}
.icord-section3 .title-box h2 {color: rgba(0, 63, 104, 0.1);}
.icord-section3 .title-box strong{color: #222;}
.icord-section3 .title-box p {color: #444;}

.icord-section3 .process-box li{padding: 18px 0 18px 20px; display: flex; align-items: center; gap: 20px; border: 1px solid #ddd; border-radius: 30px;}
.icord-section3 .process-box li:nth-child(5) {border: 2px solid #0047AB;}
.icord-section3 .process-box li:nth-child(n+2){margin-top: 10px;}
.icord-section3 .process-box li i {width: 90px; height: 90px; border-radius: 100px; display: flex; align-items: center; justify-content: center;}
.icord-section3 .process-box li:nth-child(1) i {background-color: #ABEBAC;}
.icord-section3 .process-box li:nth-child(2) i {background-color: #4FE6AF;}
.icord-section3 .process-box li:nth-child(3) i {background-color: #10C4D3;}
.icord-section3 .process-box li:nth-child(4) i {background-color: #00A0FF;}
.icord-section3 .process-box li:nth-child(5) i {background-color: #0047AB;}

.icord-section3 .process-box li i img {width: 46px;}
.icord-section3 .process-box li .txt-box {width: calc(100% - 110px);}
.icord-section3 .process-box li .txt-box span {font-size: 15px; display: block; margin-bottom: 1px; color: #003F68; font-weight: 300;}
.icord-section3 .process-box li .txt-box strong {font-size: 20px; font-weight: 700; color: #222; margin-bottom: 6px; display: block;}
.icord-section3 .process-box li .txt-box p {font-size: 14px; color: #777; font-weight: 300; line-height: 120%;}
.icord-section3 .process-box li .txt-box p em {font-style: normal; color: #003F68;}
.icord-section3 .process-box li .txt-box p em.orange {color: #FF761A;}



/* [icord] - section4 */
.icord-section4 {padding: 70px 0 80px; margin: 0 20px; border-radius: 20px; background-color: #FF9892;}
.icord-section4 .title-box {margin-bottom: 46px;}
.icord-section4 .title-box h2{font-size: 54px; text-align: center; color: rgba(255,255,255,0.3);}
.icord-section4 .title-box strong, .icord-section4 .title-box p {color: #fff; text-align: center; display: block;}

.icord-section4-swiper {overflow: visible;}
.icord-section4-swiper .swiper-wrapper {align-items: stretch;}
.icord-section4-swiper .swiper-slide {width: 78%; flex-shrink: 0;}

.icord-section4 .item-box {padding: 40px 0; background-color: #fff; border-radius: 20px;}
.icord-section4 .item-box span {display: block; font-size: 18px; color: #003F68; line-height: 140%; margin-bottom: 23px; text-align: center;}
.icord-section4 .item-box strong {text-align: center; font-size: 24px; font-weight: 700; line-height: 120%; color: #222; display: block; margin-bottom: 23px; height: 92px;}
.icord-section4 .item-box strong em {font-style: normal; font-size: 20px; display: block; font-weight: 700; color: #F45776; margin-bottom: 7px;}
.icord-section4 .item-box  p {font-size: 16px; font-weight: 400; color: #777; line-height: 120%; text-align: center; display: block; margin-bottom: 40px;}
.icord-section4 .item-box img {height: 120px; margin: 0 auto;}



/* [icord] - banner */
#icord-banner-wrapper .banner-inner{padding: 80px 20px 67px;}
#icord-banner-wrapper a {display: block; padding: 20px; height: 195px; border-radius: 20px; color: #fff; position: relative;}
#icord-banner-wrapper a:first-child{background: #003F68;}
#icord-banner-wrapper a:nth-child(2){margin-top: 10px; background-color: #0F7DFF;}

#icord-banner-wrapper a strong {font-size: 20px; font-weight: 600;}
#icord-banner-wrapper a h4 {display: block; padding: 14px 0; font-size: 30px; font-weight: 800;  font-family: 'LEMON MILK'; line-height: 140%;}
#icord-banner-wrapper a p {font-size: 16px; line-height: 140%; font-weight: 400;}
#icord-banner-wrapper a i {position: absolute; bottom: 14px; right: 20px; width: 110px;}





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

  .icord .main-hero-section .list-box{height: 142px;}
  .icord .main-hero-section .list-box ul li strong {font-size: 5vw;}


  /* [icord] section 1 */
  .icord-section1 .title-box h2, .icord-section2 .title-box h2, .icord-section3 .title-box h2 {font-size: 12.5vw;}
  .icord-section1 .title-box strong, .icord-section2 .title-box strong, .icord-section3 .title-box strong, .icord-section4 .title-box strong {font-size: 6.8182vw;}
  .icord-section1 .title-box p, .icord-section2 .title-box p, .icord-section3 .title-box p, .icord-section4 .title-box p {font-size: 4.0909vw;}

  .icord-section1 .top-txt-box ul li::after {top: 3.1818vw;}
  .icord-section1 .top-txt-box strong {font-size: 4.5455vw;}
  .icord-section1 .top-txt-box ul li {font-size: 3.4091vw;}

  .icord-section1 .middle-txt-box strong  {font-size: 4.5455vw;}
  .icord-section1 .middle-txt-box p {font-size: 3.4091vw;}
  .icord-section1 .s-box .tag-box li {font-size: 2.7273vw;}


  /* [icord] section 2 */
  .icord-section2 .item-box li i {width: 20.4545vw;}
  .icord-section2 .item-box li .txt-box strong {font-size: 5.4545vw;}
  .icord-section2 .item-box li .txt-box p {font-size: 4.0909vw; margin-bottom: 4px;}
  .icord-section2 .item-box li .txt-box span {font-size: 3.1818vw;}


  /* [icord] section 3 */
  .icord-section3 .process-box li i {width: 20.4545vw; height: 20.4545vw;}
  .icord-section3 .process-box li i img {width: 10.4545vw;}
  .icord-section3 .process-box li .txt-box span {font-size: 3.4091vw;}
  .icord-section3 .process-box li .txt-box strong {font-size: 4.0909vw;}
  .icord-section3 .process-box li .txt-box p {font-size: 3.1818vw;}


  /* [icord] section 4 */
  .icord-section4 .title-box h2 {font-size: 12.2727vw;}
  .icord-section4 .item-box span {font-size: 4.0909vw;}
  .icord-section4 .item-box strong{font-size: 5.4545vw; height: 83px;}
  .icord-section4 .item-box strong em {font-size: 4.5455vw;}
  .icord-section4 .item-box p {font-size: 3.6364vw;}
  .icord-section4 .item-box img{height: 27.2727vw;}


  /* [icord] banner */
  #icord-banner-wrapper a strong {font-size: 4.5455vw;}
  #icord-banner-wrapper a h4 {font-size: 6.8182vw;}
  #icord-banner-wrapper a p {font-size: 3.6364vw;}
  #icord-banner-wrapper a i{width: 25vw;}
}