@charset "utf-8";

/* 공통 */
.wrapper {width:100%;max-width:1240px;padding:0 20px;margin:0 auto}
.font-SCDream {font-family:'SCDream', sans-serif}
.font-montserrat {font-family:'Montserrat', sans-serif;}
.only_mb {display:none}
.btn_wrap {display:flex;align-items:center;justify-content:center;gap:0 10px}
.btn_white {display:flex;align-items:center;justify-content:center;width:100%;max-width:240px;height:48px;font-size:16px;font-weight:500;background:#ffffff;text-align:center;border-radius:40px;transition:all .2s}
.btn_white:hover {background:#222222;color:#ffffff}
.btn_gray {display:flex;align-items:center;justify-content:center;width:100%;max-width:240px;height:48px;font-size:16px;font-weight:500;color:#ffffff;background:#757575;text-align:center;border-radius:40px;transition:all .2s}
.btn_gray:hover {background:#666666}
.sec {overflow:hidden}

.title_box {margin-bottom:52px}
.title_box.center {text-align:center}
.title_box .tit {display:block;font-size:36px;font-weight:600;font-family:'SCDream', sans-serif;line-height:1.4}

/* 메인 */
.index .sec:not(.sec_01) {padding:120px 0}
.index .sec_01 .swiper,
.index .sec_01 .swiper-slide {position:relative}
.index .sec_01 .img_wrap {height:800px}
.index .sec_01 .img_wrap img {width:100%;height:100%;object-fit:cover;}
.index .sec_01 .txt_wrap {position:absolute;bottom:200px;left:0;width:100%;color:#ffffff;text-align:center;padding:0 20px}
.index .sec_01 .txt_wrap .sub {display:block;font-size:18px;line-height:1.4;font-family:'Montserrat', sans-serif;text-transform:uppercase;opacity:.6;}
.index .sec_01 .txt_wrap .tit {display:block;font-size:52px;font-weight:700;line-height:1.4;margin-top:12px;font-family:'SCDream', sans-serif}
.index .sec_01 .txt_wrap p {font-size:26px;margin-top:32px;line-height:1.4}
.index .sec_01 .swiper-pagination {display:flex;align-items:center;justify-content:center;gap:0 8px;position:absolute;bottom:52px;left:0;width:100%;z-index:10}
.index .sec_01 .swiper-pagination-bullet {display:flex;align-items:center;justify-content:center;text-align:center;width:60px;height:6px;border-radius:50px;background:rgba(255,255,255,.3);margin:0 !important;padding-bottom:2px;opacity:1 !important}
.index .sec_01 .swiper-pagination-bullet-active {background:#ffffff}
.index .sec_01 .btn_prev,
.index .sec_01 .btn_next {display:flex;align-items:center;justify-content:center;width:60px;height:60px;background:rgba(12,12,12,.2);border-radius:60px;position:absolute;top:50%;left:10%;transform:translateY(-50%);cursor:pointer;z-index:10}
.index .sec_01 .btn_next {left:auto;right:10%}

.index .sec_02 .list {display:flex;gap:12px;}
.index .sec_02 .list .item {width:33.333%;border-radius:20px;padding:80px 32px;position:relative;overflow:hidden;color:#ffffff;transition:all .3s}
.index .sec_02 .list .item .img_wrap {width:100%;height:100%;position:absolute;top:0;left:0;}
.index .sec_02 .list .item .img_wrap img {width:100%;height:100%;object-fit:cover;}
.index .sec_02 .list .item .txt_wrap {position:relative;z-index:3}
.index .sec_02 .list .item .txt_wrap .tit {display:block;font-size:32px;font-weight:700;font-family:'SCDream', sans-serif}
.index .sec_02 .list .item .txt_wrap p {font-size:15px;margin-top:12px;color:#F2F2F2}
.index .sec_02 .list .item .btn_wrap {justify-content:flex-start;margin-top:40px}
.index .sec_02 .list .item .btn_wrap a {display:flex;align-items:center;justify-content:center;width:100%;max-width:130px;height:48px;font-size:16px;font-weight:500;background:rgba(255,255,255,.12);border:solid 1px #F2F2F2;color:#ffffff;text-align:center;border-radius:40px;transition:all .2s}
.index .sec_02 .list .item:nth-child(1) {background:#2e84f5}
.index .sec_02 .list .item:nth-child(2) {background:#54c4b7}
.index .sec_02 .list .item:nth-child(3) {background:#091981}

.index .sec_03 {background:#F2F2F2}
.index .sec_03 .title_box .red {color:#E1002D;text-transform:uppercase;}
.index .sec_03 .cont {display:flex;align-items:center;gap:0 32px;}
.index .sec_03 .thumb {width:50%}
.index .sec_03 .thumb .img_wrap {display:block;border-radius:12px;overflow:hidden;}
.index .sec_03 .thumb .img_wrap img {width:100%}
.index .sec_03 .list {width:50%;
max-height: 330px;
overflow-y: auto;
}
.index .sec_03 .list::-webkit-scrollbar {
  width: 4px;
  background-color: rgb(209, 209, 209);
}
.index .sec_03 .list::-webkit-scrollbar-thumb {
  background-color: rgb(125, 125, 125);
}

.index .sec_03 .list .item {display:flex;align-items:center;gap:0 12px;}
.index .sec_03 .list .item + .item {margin-top:12px}
.index .sec_03 .list .item .img_wrap {flex:30% 0 0;border-radius:4px;overflow:hidden}
.index .sec_03 .list .item .img_wrap img {width:100%}
.index .sec_03 .list .item .txt_wrap .tit {display:block;font-size:16px;font-weight:500;color:#333333;line-height:1.4;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp:2;}
.index .sec_03 .list .item .txt_wrap .date {display:block;font-size:14px;font-weight:500;color:#333333;opacity:.6;margin-top:8px}
.index .sec_03 .btn_wrap {margin-top:60px}

.index .sec_04 .swiper-wrapper {-webkit-transition-timing-function:linear!important;transition-timing-function:linear!important}
.index .sec_04 .swiper {overflow:visible}
.index .sec_04 .swiper-slide {width:242px;padding:0 12px}

.index .sec_05 {background:#F2F2F2}
.index .sec_05 .title_box,
.index .sec_07 .title_box {display:flex;align-items:center;justify-content:space-between;margin-bottom:32px}
.index .sec_05 .title_box .btn_white,
.index .sec_07 .title_box .btn_gray {max-width:130px}
.index .main_board_list {background:#ffffff;border-radius:12px;}
.index .main_board_list a {display:block;padding:24px 40px;min-width:0}
.index .main_board_list a:hover .tit {text-decoration:underline;}
.index .main_board_list a + a {border-top:solid 1px #CCCCCC}
.index .main_board_list a .date {display:block;font-size:14px;font-weight:500;color:#757575}
.index .main_board_list a .tit {display:block;font-size:18px;font-weight:700;margin-top:18px}
.index .main_board_list a p {width:100%;max-width:720px;font-size:16px;color:#666666;margin-top:4px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}

.index .sec_06 {background:#333333;color:#ffffff}
.index .sec_06 .tag_list {display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:8px 12px;margin-top:24px}
.index .sec_06 .tag_list span {display:flex;align-items:center;justify-content:center;font-size:20px;border:solid 1px #ffffff;border-radius:50px;padding:8px 24px 10px}
.index .sec_06 .swiper {position:relative;overflow:hidden}
.index .sec_06 .swiper-slide {width:246px;padding:0 6px}
.index .sec_06 .swiper-slide a{
    display: block;
    width: 234px;
    height: 234px;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center; 
    overflow: hidden;
}
.index .sec_06 .swiper-slide img {width:100%;
transform: scale(1);
-webkit-transform: scale(1);
transition: all 0.3s ease-in-out;
width: 100%;
height: auto;
display: block;
object-fit: cover;
}
.index .sec_06 .swiper-slide a:hover img{
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}
.index .sec_06 .btn_prev,
.index .sec_06 .btn_next {display:flex;align-items:center;justify-content:center;width:60px;height:60px;background:rgba(12,12,12,.2);border-radius:60px;position:absolute;top:50%;left:16px;transform:translateY(-50%);cursor:pointer;z-index:10;backdrop-filter:blur(4px);}
.index .sec_06 .btn_next {left:auto;right:16px}

.index .sec_07 .main_board_list {border-radius:0;border-top:solid 1px #333333;border-bottom:solid 1px #333333}
.index .sec_07 .link_wrap {display:flex;gap:12px;margin-top:72px}
.index .sec_07 .link_wrap a {display:flex;align-items:center;justify-content:space-between;width:100%;background:#ffffff;border:solid 1px #F2F2F2;border-radius:12px;padding:32px;box-shadow:0 12px 24px rgba(12,12,12,.08);transition:all .2s}
.index .sec_07 .link_wrap a:hover {border-color:#2E84F5;color:#2E84F5}
.index .sec_07 .link_wrap a:hover > img {transform:translateX(5px)}
.index .sec_07 .link_wrap a span {display:block;font-size:22px;font-weight:700;font-family:'SCDream', sans-serif;margin-top:12px}
.index .sec_07 .link_wrap a img {transition:all .2s}

.index .sec_08 {background:#EAF3FF}
.index .sec_08 .title_box .sub {display:block;font-size:16px;line-height:1.4;color:#2E84F5;font-family:'Montserrat', sans-serif;margin-bottom:12px;text-transform:uppercase;}
.index .sec_08 .list {display:flex;gap:15px}
.index .sec_08 .list .item {width:100%;background:#ffffff;border-radius:8px;padding:18px 18px 48px;text-align:center}
.index .sec_08 .list .item .img_wrap {border-radius:8px;overflow:hidden}
.index .sec_08 .list .item .img_wrap img {width:100%}
.index .sec_08 .list .item .txt_wrap .tit {display:block;font-size:20px;font-weight:700;margin-top:12px}
.index .sec_08 .list .item .txt_wrap .date {display:block;font-size:14px;color:#757575;margin-top:8px}

@media (hover: hover) {
    .index .sec_02 .list .item:hover {width:50%;box-shadow:4px 16px 40px rgba(0,0,0,.24);transform:translateY(-26px);}
    .index .sec_02 .list .item:hover .img_wrap {opacity:1}
    .index .sec_02 .list .item:hover .btn_wrap a {background:#ffffff;color:#333333}
}

@media all and (max-width: 1499px) {
    .index .sec_03 .thumb {max-width:720px}
    .index .sec_03 .list {flex:1}
}

@media all and (max-width: 1199px) {
    .title_box {margin-bottom:45px}
    .title_box img {width:70px}
    .title_box .tit {font-size:32px}

    /* 메인 */
    .index .sec:not(.sec_01) {padding:90px 0}
    .index .sec_01 .img_wrap {height:650px}
    .index .sec_01 .txt_wrap {bottom:140px}
    .index .sec_01 .txt_wrap .sub {font-size:16px}
    .index .sec_01 .txt_wrap .tit {font-size:50px}
    .index .sec_01 .txt_wrap p {font-size:20px}
    .index .sec_01 .btn_prev {width:50px;height:50px;left:20px;padding:12px}
    .index .sec_01 .btn_next {width:50px;height:50px;right:20px;padding:12px}

    .index .sec_06 .tag_list span {font-size:16px}
}

@media all and (max-width: 1023px) {
    /* 메인 */
    .index .sec_02 .list .item {padding:52px 24px 64px}
    .index .sec_02 .list .item .txt_wrap .tit {font-size:24px}
    .index .sec_02 .list .item .txt_wrap p {margin-top:8px}

    .index .sec_03 .cont {flex-direction:column;align-items:flex-start;gap:32px 0}
    .index .sec_03 .thumb {width:100%;max-width:initial}
    .index .sec_03 .list {width:100%;flex:none}

    .index .sec_07 .link_wrap a div img {width:36px}
    .index .sec_07 .link_wrap a span {font-size:20px}

    .index .sec_08 .list {flex-direction:column;max-width:400px;margin:0 auto}
}

@media all and (max-width: 767px) {
    .only_mb {display:block}
    .only_pc {display:none}

    .btn_white {height:48px;font-size:16px}
    .btn_gray {height:40px;font-size:15px;padding:0 20px}
    .title_box {margin-bottom:32px}
    .title_box img {width:52px}
    .title_box .tit {font-size:24px}
    
    /* 메인 */
    .index .sec:not(.sec_01) {padding:60px 0}
    .index .sec_01 .img_wrap {height:525px}
    .index .sec_01 .txt_wrap {bottom:50%;transform:translateY(50%)}
    .index .sec_01 .txt_wrap .sub {font-size:16px}
    .index .sec_01 .txt_wrap .tit {font-size:28px}
    .index .sec_01 .txt_wrap p {font-size:16px;margin-top:16px}
    .index .sec_01 .option {display:flex;align-items:center;justify-content:center;position:absolute;bottom:24px;left:0;width:100%;z-index:1}
    .index .sec_01 .btn_prev, .index .sec_01 .btn_next {position:initial;transform:none}
    .index .sec_01 .swiper-pagination {position:initial;width:auto}
    .index .sec_01 .swiper-pagination-bullet {width:36px;}

    .index .sec_02 .list {flex-direction:column;}
    .index .sec_02 .list .item {width:100%}
    .index .sec_02 .list .item .img_wrap {opacity:1}

    .index .sec_03 {padding:60px 0}
    .index .sec_03 .list .item .txt_wrap .tit {font-size:14px}
    .index .sec_03 .list .item .txt_wrap .date {font-size:12px;margin-top:4px}
    .index .sec_03 .list .item .img_wrap {flex-basis:140px}
    .index .sec_03 .thumb .img_wrap {border-radius:4px}
    .index .sec_03 .btn_wrap {margin-top:32px}
    .index .sec_03 .btn_wrap .btn_white {max-width:initial}

    .index .sec_04 .swiper-slide {width:184px;padding:0 4px}

    .index .main_board_list a {padding:16px}
    .index .main_board_list a .date {font-size:12px}
    .index .main_board_list a .tit {font-size:16px;margin-top:12px}
    .index .main_board_list a p {font-size:14px}

    .index .sec_06 .tag_list {gap:10px 8px}
    .index .sec_06 .tag_list span {font-size:14px;padding:8px 16px 10px}

    .index .sec_05 .title_box, .index .sec_07 .title_box {margin-bottom:24px}
    .index .sec_05 .title_box .btn_white,
    .index .sec_07 .title_box .btn_gray {max-width:108px;padding-bottom:2px;height:40px;font-size:15px;padding:0 20px}
    .index .sec_07 .link_wrap {margin-top:24px;flex-direction:column;gap:8px}

    .index .sec_08 .list .item {padding:12px 12px 32px}
}

.wrapper img{
    max-width: 100%;
}