/* Main */

.visual{ position: relative; width: 100%;}
.visual .wrap{ display: flex; text-align: center; justify-content: center; background-image: url("../../image/brand/img_visual.jpg");}
.visual::before{content: ""; position: absolute; top:0; left: 0; width: 100%; height:80%; background-color: #263849; z-index: -1;}

.slogan{ display: flex; flex-direction:column; text-align: center; justify-content: center; color: #fff; padding: 60px 0;}
.slogan:not(.button-box){ padding: 90px 0;}
.slogan .subtitle{ font-size: 1.562rem; font-weight: 700; letter-spacing: 1px; text-shadow: 0 1px 1px rgba(31, 28, 28, 0.26);}
.slogan h2{ font-size: 3rem; font-weight: 700;word-break: keep-all; letter-spacing: -0.5px; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.43), 0 1px 10px rgba(183, 193, 200, 0.37); margin-bottom:16px;}
.slogan .body{font-size: 1.25rem; font-weight: 300; color:#EDEDED; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.56);}
.slogan .line{ width:120px; background-color: rgba(255, 255, 255, 0.5) ;}
.slogan .button-box{ display: flex; align-items: center; justify-content: center; gap:10px; margin-top: 24px;}
.slogan .button-style{ width: 142px; padding:14px 24px;  background-color: #263849; box-sizing: border-box;}
.slogan .button-style.button-outline{border: 1px solid rgba(255, 255, 255, 0.75); background-color: rgba(0, 0, 0, 0.3); color:#fff;}


.award-sect {margin:60px auto 40px;}
.award-sect .award-sect-header{ display: flex; align-items: center; justify-content: space-between; margin-bottom: 40px; gap:40px; word-break: keep-all;}
.award-sect .award-sect-header .button_text{display: flex; align-items: center; font-size: 0.816rem;}
.award-sect .award-sect-title{display: flex; align-items: flex-end; gap:10px;}
.award-sect .award-sect-title h3{ color:#142B3D; font-size: 1.5rem; font-weight: 700;}
.award-sect .award-sect-title .subtext{color:#AEAEAE; font-size: 0.875rem; font-weight: 300;}

.award-sect-container {position: relative; width: 100%; padding-bottom:30px; overflow-x: auto; overflow-y: hidden;  scroll-snap-type: x mandatory;}
.award-sect-container::-webkit-scrollbar {height: 3px;}
.award-sect-container::-webkit-scrollbar-track { background: #E8E8E8; border-radius: 4px;}
.award-sect-container::-webkit-scrollbar-thumb {background: #3B3B3B;border-radius: 4px;}
.award-sect-container::-webkit-scrollbar-thumb:hover {background: #2b2b2b; }
.award-sect-container .slides {display: flex; gap:30px; /*padding:0 20px;*/ transition: transform 0.5s ease-in-out;}
.award-sect-container .slide {display: flex;align-items: center;justify-content: center;cursor: pointer;}
.award-sect-container .slide .figure-img { min-width:auto; height:auto; aspect-ratio:278/192;overflow: hidden; }
.award-sect-container .slide .figure-img img{ object-fit: cover; width: 100%; height: 100%;}
.award-sect-container .slide figcaption{ display: flex; flex-direction: column; gap:10px; margin-top: 12px;}
.award-sect-container .slide .award-name{font-size: 0.875rem; }
.award-sect-container .slide .award-category{ font-size:  0.813rem; font-weight: 500; padding:1px 6px; margin-right:4px; color:#fff;border-radius: 2px;}
.award-sect-container .slide .cate-main{ color:#263849; background-color: #D9E6F2;}
.award-sect-container .slide .award-company{ color:#142B3D;margin-top: 4px; font-size: 1.25rem; font-weight: 700;}
.award-sect-container .slide .award-project{color:#AEAEAE; font-weight:300;}
.award-sect-container .swiper-pagination-progressbar.swiper-pagination-horizontal{ height: 3px; top:auto; bottom:0; background:#E8E8E8; border-radius: 4px; }
.award-sect-container .swiper-pagination-progressbar .swiper-pagination-progressbar-fill{ background:#3B3B3B; border-radius: 4px; }

.swiper-button-next, .swiper-button-prev{width: 40px!important; height: 40px!important;  transition: all 0.3s ease;}
.swiper-button-next:hover, .swiper-button-prev:hover,
.swiper-button-next:focus, .swiper-button-prev:focus{background-color: #677f91;}
.swiper-button-next:hover, .swiper-button-next:focus{right: 0;}
.swiper-button-prev:hover, .swiper-button-prev:focus{left: 0;}
.swiper-button-prev:after, .swiper-rtl .swiper-button-next:after,
.swiper-button-next:after, .swiper-rtl .swiper-button-prev:after{ color:transparent; font-size: 1rem!important;}
.swiper-button-prev:hover:after, .swiper-rtl .swiper-button-next:hover:after,
.swiper-button-next:hover:after, .swiper-rtl .swiper-button-prev:hover:after,
.swiper-button-prev:focus:after, .swiper-rtl .swiper-button-next:focus:after,
.swiper-button-next:focus:after, .swiper-rtl .swiper-button-prev:focus:after{color:#fff;}

.overview-sect{ background-color: #F6F8FF; padding: 50px 0;}
/* .overview-sect .wrap{ display: grid; grid-template-columns: 250px 1fr; gap: 20px;} */
 .overview-sect .wrap{ display: flex; gap: 30px; }
.overview-sect .wrap figure{ max-height: 420px; overflow: hidden;}
.overview-sect-contanier{ color:#fff; background-color: #142B3D; padding:30px;}
.overview-sect-contanier h4{ font-size: 1.25rem; margin-bottom: 20px;}
.overview-sect-contanier ul li{ color: rgba(255, 255, 255, 0.7); font-size: 0.938rem; font-weight: 300; word-break: keep-all; margin-top: 12px; line-height: 1.45;}
.overview-sect-contanier ul li:first-child{margin-top: 0;}
.overview-sect-contanier ul li b{display: block; font-weight: 500; color: #fff;}
.overview-sect .main-figurebox{ display: flex;gap: 30px;}
.overview-sect .main-figurebox figure{ width: 50%; display: flex; align-items: center; justify-content: center; background-color: #000;}
/* .overview-sect .main-figurebox figure img{height: 100%;} */

.sponsors{ padding:20px 0;}
.sponsor-group{ display: flex; align-items: center; gap:40px; padding:20px 0}
.sponsor-group:first-of-type{border-bottom: 1px solid #ddd;}
.sponsor-group h4{ font-size: 0.875rem; font-weight: 400; color:#AEAEAE; width:94px;}
.sponsor-group .groupbox{ display: flex; flex-wrap: wrap; align-items: center; gap:16px 48px;width:100%; overflow:hidden;}
.sponsor-group .swiper-wrapper{ align-items:center; }
.sponsor-group .swiper-slide{ width:auto; }
.sponsor-group .swiper-slide img{width: 100%;}

/* 소형 모바일 */
@media (max-width: 479px) {
    .visual .wrap{ min-height: 252px;}
    .visual .wrap:not(.button-box){min-height: auto;}
    .slogan:not(.button-box){ padding: 40px 0;}
    .slogan .subtitle{ font-size: 1rem; margin-bottom: 10px;}
    .slogan hr{display: none;}
    .slogan h2{ font-size: 1.75rem; margin-bottom:8px;}
    .slogan .body{ font-size:0.875rem;}
    .slogan .button-style{width: auto; padding:12px 14px; font-size: 0.875rem;}

    .award-sect {margin:40px auto;}
    .award-sect .award-sect-header{flex-direction: column; align-items: flex-start; gap: 20px; margin-bottom: 20px;}
    .award-sect .award-sect-title{flex-direction: column; align-items: flex-start;}
    .award-sect .award-sect-title h3{ font-size: 1.25rem;}  
    .award-sect .award-sect-title .subtext{ font-size: 0.815rem;}
    
    .overview-sect-contanier h4,
    .award-sect-container .slide .award-company{ font-size: 1.125rem;}

    .overview-sect-contanier{ padding: 20px;}
    .overview-sect .wrap{display: flex; flex-direction: column; gap:10px}
    .overview-sect .main-figurebox{flex-direction: column; gap:10px}
    .overview-sect .main-figurebox figure{width: 100%;}

    .sponsors{ padding: 0;}
    .sponsor-group .groupbox{ gap:10px}
    .sponsor-group .swiper-slide img{width:90%;}
 }

/* 모바일 */
@media (min-width: 480px) and (max-width: 767px) { 
    
    .visual .wrap{ min-height: 252px;}
    .visual .wrap:not(.button-box){min-height: auto;}
    .slogan:not(.button-box){ padding: 60px 0;}
    .slogan .subtitle{ font-size: 1.125rem; margin-bottom: 10px;}
    .slogan hr{display: none;}
    .slogan h2{ font-size: 2.125rem; margin-bottom:8px;}
    .slogan .body{ font-size:1rem;}
    .slogan .button-style{ padding:12px 14px; font-size: 0.875rem;}

    .award-sect {margin:40px auto;}
    .award-sect .award-sect-header{flex-direction: column; align-items: flex-start; gap: 20px;}
    .award-sect .award-sect-title{flex-direction: column; align-items: flex-start;}

    .overview-sect .wrap{display: flex; flex-direction: column; gap:10px}
    .overview-sect .main-figurebox{flex-direction: column; gap:10px}
    .overview-sect .main-figurebox figure{width: 100%;} 
    .overview-sect-contanier ul{ display: flex; gap:20px;}
    .overview-sect-contanier ul li{width: 30%;}
    
    .sponsors{ padding: 0;}
    .sponsor-group .groupbox {gap: 10px 20px;}
}

/* 태블릿 */
@media (min-width: 768px) and (max-width: 1023px) { 

    .slogan .subtitle{ font-size: 1.375rem}
    .slogan h2{ font-size: 2.25rem ;}
    .slogan .body{ font-size: 1rem;}

    .award-sect .award-sect-title{flex-direction: column; align-items: flex-start;}

    /* .overview-sect .main-figurebox{flex-direction: column; gap:10px}
    .overview-sect .main-figurebox figure{width: 100%;} */
    .overview-sect .main-figurebox{gap:20px;}
    .overview-sect .wrap{flex-direction: column;gap:20px;}
    .overview-sect .wrap figure{ max-height: 320px;}
    .overview-sect-contanier ul{ display: flex; gap:20px;}
    .overview-sect-contanier ul li{width: 30%;}

    .sponsor-group .groupbox {gap: 16px 32px;}

}

/* PC (1024~1200) */
@media (min-width: 1024px) and (max-width: 1200px) { 
    .overview-sect .wrap{flex-direction: column;gap:20px;}
    .overview-sect .wrap figure{ max-height: 320px;}
    .overview-sect-contanier ul{ display: flex; gap:20px;}
    .overview-sect-contanier ul li{width: 30%;}
}

/* 대형 화면 (1200 이상)*/
@media (min-width: 1201px) {
     .visual .wrap{ height: 476px;}
    
     .overview-sect-contanier{ min-width: 280px;padding: 30px 30px;}
 }