@charset "utf-8";

/* 공통 */
.container {margin-top: 150px;overflow-x:hidden}
.no_scroll {height:100%;overflow:hidden}
.btn_wrap {display:flex;align-items:center;gap:0 10px}
.btn_primary {display:flex;align-items:center;justify-content:center;gap:0 10px;background:var(--primary);font-size:24px;font-weight:700;color:var(--white);border-radius:100px;padding:24px 40px;transition:all .2s}
.sec{position: relative;}
.sec .anchor{position: absolute;top: -150px;}

/* 인덱스 */
.index .sec:not(.sec_01) {padding:100px 0}

.index .sec_01 {padding:0;position:relative}
.index .sec_01 .img_wrap {height:600px}
.index .sec_01 .img_wrap img {width:100%;height:100%;object-fit:cover;animation:scaleUp 10s ease-in-out alternate both}
.index .sec_01 .txt_wrap {position:absolute;top:50%;left:0;transform:translateY(-50%);width:100%;z-index:2;color:#ffffff;text-align:center}
.index .sec_01 .txt_wrap .sub_tit {display:block;font-size:30px;font-weight:600;line-height:1.2}
.index .sec_01 .txt_wrap .tit {display:block;font-size:60px;margin-top:40px}
.index .sec_01 .txt_wrap .tit strong {font-weight:600}
.index .sec_01 .txt_wrap p {font-size:30px;font-weight:300;margin-top:60px;line-height:1.5}
@keyframes scaleUp {
    from {transform:scale(1)}
    to {transform:scale(1.1)}
}

.index .sec_02 {background:url('../img/index/index_02_bg.svg') no-repeat left top 70px}
.index .sec_02 .cont {display:flex;align-items:flex-start;gap:50px}
.index .sec_02 .cont .img_wrap {width:46%;border-radius:30px;overflow:hidden}
.index .sec_02 .cont .txt_wrap {flex:1;color:#002655;max-width:740px}
.index .sec_02 .cont .txt_wrap .tit {display:block;font-size:45px;font-weight:500;line-height:1.44}
.index .sec_02 .cont .txt_wrap .name {display:block;text-align:right;font-size:25px;font-weight:500;color:#8D8D8D;padding:30px 0 60px;position:relative}
.index .sec_02 .cont .txt_wrap .name::before {content:'';display:block;width:1px;height:calc(100% - 10px);background:#002655;position:absolute;top:50%;left:0;transform:translateY(-50%)}
.index .sec_02 .cont .txt_wrap p {font-size:22px;line-height:1.8}

.index .sec_03 {background:linear-gradient(125deg, #002655, #1C1C1C)}
.index .sec_03 .top_list {display:flex;gap:40px}
.index .sec_03 .top_list .item {display:block;position:relative;border-radius:30px;overflow:hidden;color:#ffffff}
.index .sec_03 .top_list .item .img_wrap img {transition:all 2s}
.index .sec_03 .top_list .item .txt_wrap {display:flex;flex-direction:column;align-items:flex-start;justify-content:flex-end;height:100%;background:linear-gradient(rgba(255,255,255,0), rgba(0,0,0,.6) 60%, rgba(0,0,0,0.8) 80%, #000000);position:absolute;top:0;left:0;padding:35px 30px}
.index .sec_03 .top_list .item .txt_wrap .tit {display:block;font-size:35px;font-weight:600;line-height:1.3}
.index .sec_03 .top_list .item .txt_wrap p {font-size:16px;line-height:1.75;margin-top:18px}
.index .sec_03 .top_list .item .txt_wrap p strong {font-weight:500}
.index .sec_03 .top_list .item .txt_wrap .btn_more {display:flex;align-items:center;gap:0 10px;height:32px;font-size:14px;color:#BDBDBD;border:solid 1px #BDBDBD;border-radius:30px;padding:0 16px;margin-top:24px;transition:all .2s}
.index .sec_03 .top_list .item:first-child .txt_wrap .btn_more{visibility: hidden;}
.index .sec_03 .top_list a.item:hover .img_wrap img {transform:scale(1.05)}
.index .sec_03 .top_list a.item:hover .btn_more {background:#ffffff;color:#000000;border:0}
.index .sec_03 .top_list a.item:hover .btn_more svg path {fill:#000000}
.index .sec_03 .btm_list {display:flex;gap:35px;margin-top:84px}
.index .sec_03 .btm_list > div {border-radius:20px;overflow:hidden}
.index .sec_03 .btm_list > div img {transform:scale(1.01)}
.index .explain {font-size:25px;color:#B0B0B0;line-height:1.5;text-align:center;margin-top:60px}

.index .sec_04 {background:#E3E3E3}
.index .sec_04 .explain {color:#7E7E7E}
.index .sec_04 .list {display:flex;justify-content:center;gap:0 55px;}
.index .sec_04 .list .item {max-width:496px;border-radius:35px;box-shadow:0 0 35px rgba(0,0,0,.1);overflow:hidden;padding: 70px 20px;background-color: #fff;}
.index .sec_04 .list .item .img_box{text-align: center;}
.index .sec_04 .list .item .links{margin-top: 20px;}
.index .sec_04 .list .item .links > a{display: flex;gap: 10px;justify-content: center;align-items: center;width: 100%;}
.index .sec_04 .list .item .links > a:nth-child(n + 2){margin-top: 16px;}
.index .sec_04 .list .item .links > a span{font-size: 25px;font-weight: 500;color: #002655;text-align: center;}
.index .sec_04 .list .item .links > a span b{font-weight: 700;}

.index .sec_05 {background:url('../img/index/index_05_bg.jpg') no-repeat center/cover}
.index .sec_05 .wrapper {max-width:900px}
.index .sec_05 .cont {display:flex;align-items:flex-start;justify-content:center;gap:50px;color:#CCCCCC;font-size:27px;font-weight:500}
.index .sec_05 .cont span {flex:95px 0 0}
.index .sec_05 .cont strong {font-weight:normal}
.index .sec_05 .cont .item {display:flex;align-items:flex-start;}
.index .sec_05 .cont .item + .item {margin-top:20px}
.index .sec_05 .cont .sns > * {display:inline-block;width:52px}

@media all and (max-width: 1499px) {
    .index .sec_02 .cont .txt_wrap {max-width:574px}
    .index .sec_02 .cont .txt_wrap .tit {font-size:35px}
    .index .sec_02 .cont .txt_wrap p {font-size:18px}
    .index .sec_02 .cont .txt_wrap .name {font-size:20px}
}

@media all and (max-width: 1199px) {
    .container{margin-top: 80px;}
}
@media all and (max-width: 1199px) {
    /* 인덱스 */
    .index .sec_01 .txt_wrap .sub_tit {font-size:24px}
    .index .sec_01 .txt_wrap .tit {font-size:48px;margin-top:30px}
    .index .sec_01 .txt_wrap p {font-size:24px;margin-top:40px}

    .index .sec_02 .cont {gap:36px}
    .index .sec_02 .cont .txt_wrap .tit {font-size:26px}
    .index .sec_02 .cont .txt_wrap .name {font-size:16px}
    .index .sec_02 .cont .txt_wrap p {font-size:16px}

    .index .sec_03 .top_list {gap:20px}
    .index .sec_03 .top_list .item {border-radius:20px}
    .index .sec_03 .top_list .item .txt_wrap {padding:30px 20px}
    .index .sec_03 .top_list .item .txt_wrap .tit {font-size:26px}
    .index .sec_03 .top_list .item .txt_wrap p {font-size:14px}
    .index .sec_03 .btm_list {gap:20px;margin-top:50px}
    .index .explain {font-size:18px}

    .index .sec_04 .list {gap:0 30px}
    .index .sec_04 .list .item {max-width:420px}
    .index .sec_04 .list .item .links{margin-top: 16px;}
    .index .sec_04 .list .item .links > a{gap: 8px;}
    .index .sec_04 .list .item .links > a:nth-child(n + 2){margin-top: 10px;}
    .index .sec_04 .list .item .links > a span{font-size: 18px;}

    .index .sec_05 .cont {font-size:20px}
    .index .sec_05 .cont span {flex-basis:80px}
    .index .sec_05 .cont .sns > * {width:44px}
}
@media all and (max-width: 1023px) {
    .index .sec_02 .cont {flex-direction:column;max-width:450px;margin:0 auto;}
    .index .sec_02 .cont .img_wrap {width:100%;border-radius:16px}

    .index .sec_03 .top_list {display:grid;grid-template-columns:repeat(2, 1fr);max-width:600px;margin:0 auto}
}
@media all and (max-width: 767px) {

    /* 푸터 */
    .footer {border-width:40px}
    .footer .float_btns {gap:10px;right:24px;bottom:24px}
    .footer .float_btns > * {width:48px;height:48px}
    .footer .info >div {display:flex;flex-direction:column;align-items:flex-start;gap:6px;}
    .footer .info span + span::before {display:none}
    
    /* 인덱스 */
    .index .sec:not(.sec_01) {padding:80px 0}
    .index .sec_01 .txt_wrap .sub_tit {font-size:18px}
    .index .sec_01 .txt_wrap .tit {font-size:32px;margin-top:24px}
    .index .sec_01 .txt_wrap p {font-size:18px;margin-top:30px}
    
    .index .sec_02 {background-size:35%;}
    .index .sec_02 .cont .txt_wrap .tit {font-size:20px}
    .index .sec_02 .cont .txt_wrap .name {font-size:14px;padding:16px 0 40px}
    .index .sec_02 .cont .txt_wrap p {font-size:14px}
    
    .index .sec_03 .top_list .item .txt_wrap .tit {font-size:20px}
    .index .sec_03 .btm_list {flex-direction:column;max-width:600px;margin:20px auto 0;}
    .index .sec_03 .btm_list > div {border-radius:16px}
    .index .explain {font-size:14px;margin-top:30px}
    
    .index .sec_04 .list {gap:20px;flex-wrap: wrap;}
    .index .sec_04 .list .item {width: 100%;border-radius:16px;padding: 40px 10px;}
    .index .sec_04 .list .item .links > a span{font-size: 16px;}
    .index .sec_04 .list .item .links > a img{width: 24px;}

    .index .sec_05 .cont {flex-direction:column;gap:20px;font-size:16px;max-width:260px;margin:0 auto}
    .index .sec_05 .cont span {flex-basis:68px}
}
@media all and (max-width: 499px) {
    .index .sec_03 .top_list {display:flex;flex-direction:column;}
    .index .sec_04 .list {flex-direction:column;}
}
@media all and (max-width: 374px) {}