/* 디자인 폰트 */
@font-face {
    font-family: 'InkLiquid';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_one@1.0/InkLipquid.woff') format('woff');
    font-weight: normal;
    font-display: swap;
}

/* section schedule */
.section.schedule {background: var(--background_color_1);}

/* section about */
.section {position: relative;}
.section.about {overflow: hidden; background: url(../img/common/section_about_bg2.png) no-repeat center bottom; background-size: cover;}
.section.about .left {flex: 1; position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 3; width: 100%;}
.section.about .left .logo_list li:first-child{max-width: 235px; width: 100%;}
.section.about .left .logo_list li:last-child{max-width: 272px; width: 100%;}
.section.about .right {content:''; display: block; aspect-ratio: 968 / 1000; min-width: 968px; width: calc((968 / 1920) * 100%); position: relative; z-index: 2;}
.section.about .right img {width: 100%; height: 100%; object-fit: cover; object-position: center;}

/* section ci_info */
.section.ci_info {background: var(--background_color_2);} 
.section.ci_info .ci .item .ci_holder {min-height: 294px;}
.section.ci_info .ci .item:first-child .ci_holder img {max-width: 190px;}
.section.ci_info .ci .item:nth-child(2) .ci_holder img {max-width: 314px;}
.section.ci_info .ci .item:last-child .ci_holder img {max-width: 247px;}
.section.ci_info .ci .item .ci_name span {background: var(--main-color); color: #fff; padding: 10px 20px;}

.company_info .logo {max-width: 198px;}
.company_info .line {display: block; width: 1px; height: 14px; background: #d9d9d9;}
.company_info .circle {background: var(--background_color_2); width: 50px; aspect-ratio: 1 / 1;}
.company_info .circle.mo_only {display: none;}

/* section meet_five */
.section.meet_five {background: var(--main-color_2); overflow: hidden;}
.section.meet_five .full_container .inner_container > * {align-items: flex-start;}
.section.meet_five::before {content:''; display: block; width: 49.06vw; aspect-ratio: 942 / 219; position: absolute; left: 0; top: 50%; z-index: 1; transform: translateY(-50%); background: url(../img/common/meet_five_vector02.png) no-repeat center / cover;}
.section.meet_five::after {content:''; display: block; width: 42.81vw; aspect-ratio: 822 / 276; position: absolute; right: 0; top: 50%; z-index: 1; transform: translateY(-50%); background: url(../img/common/meet_five_vector01.png) no-repeat center / cover;}
.section.meet_five .left_control {position: relative; z-index: 2; flex-shrink: 0;}
.section.meet_five .left_control .book_icon {display: block; width: 125px; aspect-ratio: 125 / 75; background: url(../img/common/2026_book.png) no-repeat center / cover;}
.section.meet_five .left_control .slider-button li {cursor: pointer; font-size: 30px; color: #fff; font-weight: 900; letter-spacing: -2%; line-height: 120%; opacity: .2; transition: .3s ease;}
.section.meet_five .left_control .slider-button li:hover {opacity: 1;}
.section.meet_five .left_control .slider-button li.active {opacity: 1; font-size: 40px;}
.section.meet_five .meet_five_swiper {max-width: 770px; width: 100%; z-index: 2; margin-right: inherit; flex: 1;}
.section.meet_five .big_title {font-size: 77px; font-weight: 900; letter-spacing: -2%; color: #fff; white-space: nowrap;}

.section.meet_five .swiper-slide .img_caption {visibility: hidden; opacity: 0;}
.section.meet_five .swiper-slide.swiper-slide-active .img_caption {visibility: visible; opacity: 1; transition: .5s ease;}
.section.meet_five .swiper-slide .img_caption p,
.section.meet_five .swiper-slide .img_caption ul li {color: #fff;}
.section.meet_five .swiper-slide .img_caption .title {flex-shrink: 0;}
.section.meet_five .swiper-slide .img_caption .title span {display: block; font-family: 'InkLiquid', sans-serif;}
.section.meet_five .swiper-slide .img_caption .dot li {position: relative; padding-left: 10px;}
.section.meet_five .swiper-slide .img_caption .dot li::before {content: ''; display: block; width: 3px; height: 3px; background: #fff; position: absolute; left: 0; top: 10px; border-radius: 50%;}

.meet_five_swiper {perspective: 1200px; overflow: visible;  /* 뒤에 쌓인 카드가 보이도록 */}
.meet_five_swiper .swiper-slide {backface-visibility: hidden; overflow: hidden; width: 100%!important;}

@media screen and (min-width: 1921px) {
  .section.meet_five .meet_five_swiper {max-width: 37.10vw;}
}


/***** media queries *****/

@media screen and (max-width: 1366px) {
  .section.meet_five .meet_five_swiper {max-width: 57vw;}
  .section.meet_five .big_title {font-size: 5.65vw;}
  .section.meet_five .left_control .slider-button li {font-size: 2.2vw;}
  .section.meet_five .left_control .slider-button li.active {font-size: 2.93vw;}
}

@media screen and (max-width: 1280px) {
  .section.about .right {transform: translateX(220px);}

  .company_info > *:first-child {width: 100%;}
}

@media screen and (max-width: 1024px) {

  .section.about .right {min-width: 798px;}

  .section.ci_info .ci .item .ci_holder {min-height: auto; aspect-ratio: 3 / 2;}
  .section.ci_info .ci .item:first-child .ci_holder img {max-width: 70%;}
  .section.ci_info .ci .item:nth-child(2) .ci_holder img {max-width: 90%;} 
  .section.ci_info .ci .item:last-child .ci_holder img {max-width: 90%;}

  .section.about .left .logo_list li:first-child {max-width: 185px;}
  .section.about .left .logo_list li:last-child {max-width: 192px;}

  .section.meet_five .swiper-slide.swiper-slide-active .img_caption {align-items: flex-start;}
  .section.meet_five .left_control .slider-button li.active {font-size: 2.63vw; opacity: 1;}
}

@media screen and (max-width: 768px) {
  .section.about .full_container > div {padding: 85px 0;}
  .section.about .left {flex: inherit; top: auto; transform: translateY(0); position: relative;}
  .section.about .right {transform: translateX(9%); min-width: auto; width: 57%; position: absolute; right: 0; top: 0;}
}

@media screen and (max-width: 480px) {
    .section.ci_info .ci .item .ci_holder {min-height: 100px; aspect-ratio: 3 / 1.5;}
    .section.ci_info .inner_container > .box_style {padding: 35px 15px;}
    .company_info .circle {width: 36px; flex-shrink: 0;}
    .company_info .circle.pc_only {display: none;}
    .company_info .circle.mo_only {display: block;}
    .company_info .logo {max-width: 158px;}

    .section.meet_five .full_container .inner_container > * {align-items: center;}
    .section.meet_five .left_control .book_icon {width: 75px; margin-left: auto; margin-right: auto;}
    .section.meet_five .big_title {text-align: center; font-size: 2.5rem; letter-spacing: 0;}
    .section.meet_five .left_control .slider-button {padding-top: 35px;}
    .section.meet_five .left_control .slider-button li {font-size: 1.25rem; letter-spacing: 0; text-align: center;}
    .section.meet_five .left_control .slider-button li:hover {opacity: .2;}
    .section.meet_five .left_control .slider-button li.active {font-size: 1.75rem; opacity: 1;}

    .section.meet_five .meet_five_swiper {max-width: 100%; margin-right: auto;}
}