@charset "utf-8";

/* 색 설정 */
:root {
    --main-color: #CF2E41;
    --black-color : #222;
    --white-color : #fff;
}

/* size */
@media screen and (max-width: 1250px) { } /* tablet */
@media screen and (max-width: 650px) { } /* mobile */
.inner{ width:1200px; margin:0 auto; }
@media screen and (max-width: 1250px) { 
    .inner{ width:100%; padding:0; }
} /* tablet */
@media screen and (max-width: 650px) { 
    .paging_box{ font-size: 13px; }
} /* mobile */

/* 스크롤 커스텀 */
/* html::-webkit-scrollbar {width: 8px;}
html::-webkit-scrollbar-thumb {background-color: var(--main-color); border-radius: 10px;} */

/* 드래그 블록 커스텀 */
/* ::selection { background-color:var(--main-color); color:#fff; } */


/* default */
*{
    font-size: inherit;
    font-weight: inherit;
    font-family: inherit;
    color : inherit;
    box-sizing: border-box;
    letter-spacing: inherit;
    line-height: inherit;
}
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif:ital,wght@0,100..900;1,100..900&display=swap');

body{ font-family: "Noto Serif"; font-weight: 400; font-size: 16px; letter-spacing: -0.04em; background-color: #F5F5F5; overflow: hidden;}
section{ display:block; }
a{ color:inherit; }
p { word-break: keep-all; font-weight: 500; }
b { font-weight: 700; }
img { max-width: 100%; }
.paging_box{ padding:10px 0; display:flex; align-items: center; justify-content: center; }

select{
    -webkit-appearance: none; -moz-appearance: none;  appearance: none;
    background: url('../img/common/select-icon.png') no-repeat 98% 50% #fff; 
}
select::-ms-expand{ display:none; }


/* ==== common ==== */
.dp_title { font-size: 45px; color: var(--black-color); font-weight: 700; text-align: center; }
.dp_title.small { font-size: 28px; font-weight: 500; color: #fff; margin-bottom: 5px; }

.num_circle_Box { width: 60px; aspect-ratio: 1; display: block; margin: 0 auto 20px; position: relative; display: flex; align-items: center; justify-content: center; }
.num_circle_Box .num { font-size: 24px; font-weight: 700;  position: absolute; color: #6272C4; z-index: 3;}
.num_circle_Box .circle_in { width: 40px; aspect-ratio: 1; background-color: #fff; position: absolute;z-index: 2; border-radius: 50%; }
.num_circle_Box .circle_out { width: 60px; aspect-ratio: 1; background-color: rgba(20, 41, 146, 0.4); position: absolute; z-index: 1; border-radius: 50%; }

section.sec2 li.orange .num_circle_Box .num { color: #FF9831; }
section.sec2 li.blue .num_circle_Box .num { color: #0064DE; }
section.sec2 li.violet .num_circle_Box .num { color: #9374B3; }

section.sec2 li.orange .num_circle_Box .circle_out { background-color: #C56B10; }
section.sec2 li.blue .num_circle_Box .circle_out { background-color: #003576; }
section.sec2 li.violet .num_circle_Box .circle_out { background-color: #323471; }

@media screen and (max-width: 1250px) {
    .dp_title { font-size: 40px; }
    .dp_title.small { font-size: 24px; }

    .num_circle_Box .num { font-size: 20px; }
    .num_circle_Box .circle_in { width: 30px; }
    .num_circle_Box .circle_out { width: 50px; }
}
@media screen and (max-width: 750px) {
    .dp_title { font-size: 28px; }
    .dp_title.small { font-size: 20px; }

    .num_circle_Box { margin: 0 auto 10px; }
    .num_circle_Box .num { font-size: 16px; }
    .num_circle_Box .circle_in { width: 30px; }
    .num_circle_Box .circle_out { width: 40px; }
}
@media screen and (max-width: 550px) {
    .dp_title { font-size: 5vw; }
    .dp_title.small { font-size: 18px; }

    .num_circle_Box { width: 30px; margin: 0 auto 10px; }
    .num_circle_Box .num { font-size: 16px; display: inline-block; margin-top: 2.5px; }
    .num_circle_Box .circle_in { width: 24px; }
    .num_circle_Box .circle_out { width: 30px; }

}

.graph_div { max-width: 1000px; height: 400px; margin: 0 auto;  }
@media screen and (max-width: 600px) {
    .graph_div { height: 300px; }
}
@media screen and (max-width: 480px) {
    .graph_div { height: 250px; }
}


/* ==== main ==== */
main {  }

/* sec1 */
section.sec1 { position: relative; z-index: 3; }
section.sec1 .inner { position: relative; z-index: 3; }
section.sec1 .sec1_blur { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 2; }
section.sec1 .logo_box { padding: 70px 0; text-align: center; background-color: #fff; }
section.sec1 .sec1_div { position: relative; }
section.sec1 .sec1_div .sec1_bg { width: 100%; }
section.sec1 .sec1_div .star_box {  }
section.sec1 .sec1_div .star { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
section.sec1 .sec1_div .imgBox { text-align: center;  position: absolute; bottom: 50px; left: 50%; transform: translateX(-50%); }
section.sec1 .sec1_div .imgBox .sec1_img  { max-width: unset; }
section.sec1 .sec1_div .imgBox .sec1_img1 {  width: 988px; }
section.sec1 .sec1_div .imgBox .sec1_img2 { width: 632px; margin: 30px 0; }
section.sec1 .sec1_div .imgBox .sec1_img3 { width: 862px;  }



@media screen and (max-width: 1250px) {
    section.sec1 .logo_box { padding: 50px 0; }
    section.sec1 .logo_box .top_logo { width: 50%; }

    section.sec1 .sec1_div .imgBox .sec1_img1 {  width: 79.04vw; }
    section.sec1 .sec1_div .imgBox .sec1_img2 { width: 50.56vw; margin: 2.4vw 0; }
    section.sec1 .sec1_div .imgBox .sec1_img3 { width: 68.96vw;  }
}
@media screen and (max-width: 720px) {
    section.sec1 .logo_box { padding: 40px 0; }
    section.sec1 .logo_box .top_logo { width: 50%; }
    section.sec1 .sec1_div .imgBox { bottom: 30px; }
}
@media screen and (max-width: 500px) {
    section.sec1 .logo_box { padding: 25px 0; }
    section.sec1 .logo_box .top_logo { width: 55%; }
    
    section.sec1 .sec1_div .sec1_bg {  }
    section.sec1 .sec1_div .imgBox { bottom: 10px; }
    section.sec1 .sec1_div .imgBox .sec1_img1 {  width: 90vw; }
    section.sec1 .sec1_div .imgBox .sec1_img2 { width: 80%; margin: 1vw 0; }
    section.sec1 .sec1_div .imgBox .sec1_img3 { width: 100%; margin-bottom: 3vw;  }

}

/* sec2 */
section.sec2 li.purple .title_box { background-color: #6272C4; }
section.sec2 li.orange .title_box { background-color: #FF9831; }
section.sec2 li.blue .title_box { background-color: #0064DE; }
section.sec2 li.violet .title_box { background-color: #9374B3; }

section.sec2 li.purple .item .text_bg { background-color: #6272C4; }
section.sec2 li.orange .item .text_bg { background-color: #FF9831; }
section.sec2 li.blue .item .text_bg { background-color: #0064DE; }
section.sec2 li.violet .item .text_bg { background-color: #9374B3; }

section.sec2 li.orange .dp_title .under { background: linear-gradient(to top, #C56B10 35%, transparent 35%); }
section.sec2 li.blue .dp_title .under { background: linear-gradient(to top, #003576 35%, transparent 35%); }
section.sec2 li.violet .dp_title .under { background: linear-gradient(to top, #323471 35%, transparent 35%); }


section.sec2 { position: relative; }
section.sec2 .inner { position: relative;}
section.sec2 .sec2_blur { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); }
section.sec2 ul {  }
section.sec2 ul li { background-color: #F3EFEE; }

section.sec2 .title_box { position: relative; padding: 65px 0 75px; }
section.sec2 .title_box .bg_img { position: absolute; top: 15%; right: 5%; opacity: 0.2; }
section.sec2 .dp_title { position: relative; z-index: 2; color: #fff; }
section.sec2 .dp_title .under { padding: 0 15px; background: linear-gradient(to top, #142992 37%, transparent 37%); }

section.sec2 ul li .item .imgBox {  }
section.sec2 ul li .sec2_img { display: block; margin: 0 auto; border-radius: 10px; }

section.sec2 ul li .item { padding: 55px 0; text-align: center; }
section.sec2 ul li .item .text_2 { font-size: 22px; font-weight: 500; margin: 40px 0 20px; color: #222; }
section.sec2 ul li .item .text_2 span { margin-bottom: 25px; display: block; }
section.sec2 ul li .item .text_bg { padding: 15px 30px; font-size: 28px; font-weight: 700; margin: 0 auto; display: inline-block; font-weight: 700; color: #fff; word-break: break-all; }


@media screen and (max-width: 1250px) {
    section.sec2 .title_box { padding: 50px 10px; }
    section.sec2 ul li .item .text_bg { font-size: 24px; }
    section.sec2 .title_box .bg_img { width: 18%;  }
}
@media screen and (max-width: 720px) {
    section.sec2 .title_box { padding: 20px 10px; }
    section.sec2 ul li .item .text_2 { margin: 20px 0 10px; font-size: 18px; }
    section.sec2 ul li .item .text_bg { font-size: 20px; }
    section.sec2 .title_box .bg_img { top: 10px; right: 10px; }
    section.sec2 ul li .item .text_2 span { margin-bottom: 15px; }
}
@media screen and (max-width: 500px) {
    section.sec2 ul li .item { padding: 40px 10px; }
    section.sec2 ul li .item .text_2 { font-size: 14px; }
    section.sec2 ul li .item .text_bg { font-size: 16px;  padding: 10px 15px; }
    section.sec2 .dp_title .under { padding: 0 10px;  }
}



/* sec3 */
section.sec3 { position: relative; z-index: 3; }
section.sec3 .sec3_blur1 { position: absolute; top: 0; left: 0; }
section.sec3 .sec3_blur2 { position: absolute; bottom: 0; right: 0; }
section.sec3 .inner { position: relative; z-index: 3; padding: 100px 0; background-color: #fff; }
section.sec3 .dp_title { margin-bottom: 40px; }
section.sec3 .sec3_div { max-width: 1065px; width: 100%; margin: 0 auto; }
section.sec3 .mapBox { height: 540px;  overflow: hidden;  }
section.sec3 .mapBox iframe { border-radius: 20px; }
section.sec3 .sec3_div ul { margin: 40px 0 80px; }
section.sec3 .sec3_div ul li {  }
section.sec3 .sec3_div ul li.list1 { padding-bottom: 30px; }
section.sec3 .sec3_div ul li .item {  }
section.sec3 .sec3_div ul li .text_1 { font-size: 32px; font-weight: 700; margin-bottom: 5px; }
section.sec3 .sec3_div ul li .text_2 { font-size: 18px; font-weight: 700; color: #7F7F7F; }

section.sec3 .sec3_div_2 { position: relative; }
section.sec3 .sec3_div_2 .sec3_content { position: relative; align-items: center; justify-content: center; display: flex; max-width: 793px; width: 100%; margin: 0 auto; position: relative; overflow: ; position: relative;}
section.sec3 .sec3_div_2 .sec3_content .sec3_Swiper  { overflow: hidden; border-radius: 10px; }
section.sec3 .sec3_div_2 .sec3_content .sec3_Swiper .swiper-wrapper { }
section.sec3 .sec3_div_2 .sec3_content .sec3_Swiper .swiper-wrapper .swiper-slide {  }
section.sec3 .sec3_div_2 .sec3_content .imgBox {  }
section.sec3 .sec3_div_2 .sec3_content .imgBox .sec3_img { width: 100%;}

section.sec3 .sec3_div_2 .arrow_div { position: absolute; display: flex; justify-content: space-between; align-items: center; width: calc(100% + 100px); }
section.sec3 .sec3_div_2 .next_btn { cursor: pointer; }
section.sec3 .sec3_div_2 .pre_btn { cursor: pointer; }

@media screen and (max-width: 1250px) {
    section.sec3 .inner { padding: 100px 10px; }
    section.sec3 .dp_title { margin-bottom: 20px; }
    section.sec3 .sec3_div ul { margin: 20px 0 60px; }
    section.sec3 .sec3_div ul li .text_1 { font-size: 28px; }
    section.sec3 .sec3_div ul li .text_2 { font-size: 16px; }
    
}
@media screen and (max-width: 1024px) {
    section.sec3 .mapBox { height: 52vw; }
}
@media screen and (max-width: 780px) {

}
@media screen and (max-width: 720px) {
    section.sec3 .inner { padding: 13vw 10px; }
    section.sec3 .sec3_div ul li .text_1 { font-size: 24px; }
}
@media screen and (max-width: 500px) {
    section.sec3 .sec3_div ul { margin: 20px 0 40px; }
    section.sec3 .sec3_div ul li .text_1 { font-size: 20px; }
    section.sec3 .sec3_div ul li .text_2 { font-size: 14px; }
    
}