@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100..900&display=swap');

/* 공통 */
.container {overflow-x:hidden}
.wrapper {width:100%;max-width:1240px;padding:0 20px;margin:0 auto}
.only_mb {display:none}
.btn_wrap {display:flex;align-items:center;justify-content:center;gap:0 10px}
.btn_primary {display:flex;align-items:center;justify-content:center;gap:0 10px;transition:all .2s}
.sec {overflow:hidden}

/* 인덱스 */
.title_box {margin-bottom:48px;text-align:center}
.title_box .tit {display:block;font-size:36px;font-weight:600}
.title_box p {font-size:24px;color:#777777;line-height:1.7;margin-top:16px}

.index .sec:not(.sec_01) {padding:100px 0}
.index .sec_01 .swiper-slide {position:relative}
.index .sec_01 .swiper-slide-active .img_wrap img {transform:scale(1.05)}
.index .sec_01 .swiper-slide .img_wrap {height:700px}
.index .sec_01 .swiper-slide .img_wrap img {width:100%;height:100%;object-fit:cover;transition:all 5s}
.index .sec_01 .swiper-slide .txt_wrap {width:100%;position:absolute;top:50%;left:0;transform:translateY(-50%);text-align:center;z-index:2;color:#ffffff}
.index .sec_01 .swiper-slide .txt_wrap .sub {display:inline-block;background:rgba(255,255,255,.8);color:rgba(34,34,34,.8);font-size:18px;font-weight:600;padding:3px 8px 5px}
.index .sec_01 .swiper-slide .txt_wrap .tit {display:block;font-size:56px;font-weight:600;margin:24px 0;line-height:1.35}
.index .sec_01 .swiper-slide .txt_wrap p {font-size:24px;font-weight:500;color:rgba(255,255,255,.8);line-height:1.7}

.index .sec_02 .wrapper {max-width:1055px}
.index .sec_02 .tab_menu {margin-top:24px}
.index .sec_02 .tab_menu ul {display:flex;align-items:center;justify-content:center;gap:8px;}
.index .sec_02 .tab_menu li > * {display:flex;align-items:center;justify-content:center;gap:4px;background:#F7F7F7;height:44px;font-size:18px;font-weight:500;color:#999999;padding:0 12px;transition:all .2s}
.index .sec_02 .tab_menu li > * path {transition:all .2s}
.index .sec_02 .tab_menu li > *:hover {color:#2565B0}
.index .sec_02 .tab_menu li > *:hover path {stroke:#2565B0}
.index .sec_02 .tab_menu li > *.on {background:rgba(37,101,176,.1);color:#2565B0}
.index .sec_02 .tab_menu li > *.on path {stroke:#2565B0}
.index .sec_02 .item {display:flex;align-items:flex-start;gap:0 48px;}
.index .sec_02 .item > div {width:100%}
.index .sec_02 .item .txt_wrap .tit {display:block;font-size:24px;font-weight:600;color:#333333}
.index .sec_02 .item .txt_wrap p {font-size:18px;color:#777777;line-height:1.7;margin-top:16px}
.index .sec_02 .item .txt_wrap .btn_more {margin-top:32px}
.index .btn_more {display:flex;align-items:center;gap:0 8px;color:#333333;font-size:18px;font-weight:500;}
.index .btn_more svg {margin-top:3px}
.tab_cont {display:none}
.tab_cont.on {display:block}

.index .sec_03 {background:url('/html/img/index_03_bg.jpg') no-repeat center/cover}
.index .sec_03 .list {display:flex;align-items:center;gap:24px;}
.index .sec_03 .list > a {display:flex;align-items:center;justify-content:center;gap:10px;width:100%;height:250px;font-size:24px;font-weight:600;background:url('/html/img/index_03_01.jpg') no-repeat center/cover;border-radius:40px 0 40px 0;color:#ffffff}
.index .sec_03 .list > a:nth-child(2) {background-image:url('/html/img/index_03_02.jpg')}
.index .sec_03 .list > a svg {transition:all .2s;margin-top:2px}
.index .sec_03 .list > a:hover svg {transform:translateX(5px)}

.index .sec_04 .list {display:flex;gap:24px;}
.index .sec_04 .list > a {display:block;width:100%;border:solid 1px #CCCCCC;padding:28px 16px;text-align:center;transition:all .2s}
.index .sec_04 .list > a span {display:flex;align-items:center;justify-content:center;gap:0 6px;font-size:24px;font-weight:500;margin-top:20px;}
.index .sec_04 .list > a svg {transition:all .2s;margin-top:3px}
.index .sec_04 .list > a:hover {border-color:#79D0FF}
.index .sec_04 .list > a:hover svg {transform:translateX(5px)}

.index .sec_05 {background:#F6F8F9}
.index .sec_05 .cont {display:flex;gap:24px}
.index .sec_05 img {width:100%}
.index .sec_05 .thumb {width:82%;border-radius:10px;overflow:hidden}
.index .sec_05 .list {display:flex;flex-direction:column;justify-content:space-between;width:18%}
.index .sec_05 .list button {border-radius:10px;overflow:hidden;position:relative;display:block;}
.index .sec_05 .list button::before {content:'';display:block;width:100%;height:100%;background:rgba(0,0,0,.4) url('/html/img/plus.svg') no-repeat center/48px;position:absolute;top:0;left:0;opacity:0;transition:all .2s}

.index .sec_06 .list {display:flex;align-items:flex-start;justify-content:center;gap:0 60px;}
.index .sec_06 .list .item {width:100%;text-align:center}
.index .sec_06 .list .item span {display:block;font-size:18px;font-weight:500;line-height:1.5;margin-top:20px}

.index .sec_07 {background:#222222}
.index .sec_07 .title_box .tit {color:#ffffff}
.index .sec_07 .profile_banner {display:flex;align-items:center;justify-content:center;padding:16px;background:#ffffff;border-radius:20px}
.index .sec_07 .profile_banner .logo {width:100px}
.index .sec_07 .profile_banner .name {margin-left:24px}
.index .sec_07 .profile_banner .name span {font-size:20px;color:#777777}
.index .sec_07 .profile_banner .name .btn_more {margin-top:16px}
.index .sec_07 .profile_banner .sns {display:flex;align-items:center;gap:24px;position:relative;padding-left:24px;margin-left:24px}
.index .sec_07 .profile_banner .sns::before {content:'';display:block;width:2px;height:40px;background:#DDDDDD;position:absolute;top:50%;left:0;transform:translateY(-50%)}
.index .sec_07 .profile_banner .sns span {font-size:20px;font-weight:500}
.index .sec_07 .profile_banner .sns .link {display:flex;align-items:center;gap:16px;}
.index .sec_07 .profile_banner .sns .link a {display:block;width:48px}
.index .sec_07 .photo_list {display:grid;grid-template-columns:repeat(3, 1fr);gap:16px;margin-top:16px}
.index .sec_07 .photo_list a{
    display: block;
    overflow: hidden;
}
.index .sec_07 .photo_list img {width:100%;
transform: scale(1);
-webkit-transform: scale(1);
transition: all 0.3s ease-in-out;
}
.index .sec_07 .photo_list a:hover img{
    transform: scale(1.1);
    -webkit-transform: scale(1.1);
}

.index .sec_08 .list {display:flex;align-items:flex-start;gap:0 22px;}
.index .sec_08 .list a {display:block;width:100%;min-width:0}
.index .sec_08 .list a:hover .img_wrap img {transform:scale(1.05)}
.index .sec_08 .list a:hover .txt_wrap .btn_more {color:#222222}
.index .sec_08 .list a:hover .txt_wrap .btn_more path {stroke:#222222}
.index .sec_08 .list .img_wrap {border-radius:16px;overflow:hidden}
.index .sec_08 .list .img_wrap img {transition:all .5s;width:100%}
.index .sec_08 .list .txt_wrap {margin-top:20px}
.index .sec_08 .list .txt_wrap .date {display:block;font-size:16px;font-weight:500;color:#777777}
.index .sec_08 .list .txt_wrap .tit {display:block;font-size:20px;font-weight:500;margin-top:8px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.index .sec_08 .list .txt_wrap .btn_more {margin-top:20px;color:#777777;transition:all .2s}
.index .sec_08 .list .txt_wrap .btn_more path {transition:all .2s}

.index .sec_09 {background:#F1F1F1}
.index .sec_09 .cont {display:flex;align-items:flex-start;gap:20px;}
.index .sec_09 .cont > div {width:29%}
.index .sec_09 .cont > div > .tit {display:flex;align-items:center;justify-content:space-between;height:70px;border-radius:16px;background:#2565B0;font-size:20px;font-weight:600;color:#ffffff;padding:0 24px}
.index .sec_09 .cont > div > .tit:hover svg {transform:translateX(5px)}
.index .sec_09 .cont > div > .tit svg {transition:all .2s}
.index .sec_09 .cont > div:first-child {width:42%}
.index .sec_09 .cont > div:nth-child(2) > .tit {background:#007FA1}
.index .sec_09 .cont > div:nth-child(3) > .tit {background:#30B6FF}
.index .sec_09 .list .item {display:block;background:#ffffff;border-radius:16px;margin-top:10px;padding:20px 24px;min-width:0}
.index .sec_09 .list .item:hover .tit {text-decoration:underline;}
.index .sec_09 .list .item .tit {display:block;font-size:16px;font-weight:500;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;}
.index .sec_09 .list .item .date {display:block;font-size:14px;color:#777777;margin-top:6px}
button {color:#000;cursor:pointer;background:transparent;border:none;outline:0}
.main-wrap img{
    max-width: 100%;
}
@media (hover: hover) {
    .index .sec_05 .list button:hover::before {opacity:1}
}

/* @media all and (max-width: 1199px) {
    .title_box p {font-size:18px}

    .index .btn_more {font-size:16px}
    .index .sec_01 .swiper-slide .txt_wrap .sub {font-size:16px}
    .index .sec_01 .swiper-slide .txt_wrap .tit {font-size:42px}
    .index .sec_01 .swiper-slide .txt_wrap p {font-size:18px}

    .index .sec_02 .item .txt_wrap p {font-size:16px}

    .index .sec_04 .list > a span {font-size:20px}
    .index .sec_04 .list > a span svg {width:20px;height:20px}

    .index .sec_06 .list {gap:30px}

    .index .sec_08 .list .txt_wrap .tit {font-size:18px}
}

@media all and (max-width: 1023px) {
    .index .sec_02 .item {flex-direction:column;gap:30px 0;max-width:600px;margin:0 auto;}
    .index .sec_05 .cont {flex-direction:column;gap:20px}
    .index .sec_05 .thumb {width:100%;}
    .index .sec_05 .list {flex-direction:row;gap:10px;;width:100%}
    .index .sec_05 .list button {width:100%;border-radius:5px}

    .index .sec_06 .list {flex-wrap:wrap}
    .index .sec_06 .list .item {width:240px}

    .index .sec_07 .profile_banner .name span {font-size:18px}
    .index .sec_07 .profile_banner .sns span {font-size:18px}

    .index .sec_09 .cont {flex-wrap:wrap}
    .index .sec_09 .cont > div:first-child {width:100%}
    .index .sec_09 .cont > div:nth-child(2),
    .index .sec_09 .cont > div:nth-child(3) {flex:1}
}

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

    .title_box {margin-bottom:30px}
    .title_box .tit {font-size:30px}
    .title_box p {font-size:16px;margin-top:10px}

    .index .sec:not(.sec_01) {padding:80px 0}
    .index .btn_more {font-size:14px;gap:0 5px}
    .index .btn_more svg {width:18px;height:18px;margin-top:2px}
    .index .sec_01 .swiper-slide .txt_wrap .sub {font-size:14px}
    .index .sec_01 .swiper-slide .txt_wrap .tit {font-size:34px}
    .index .sec_01 .swiper-slide .txt_wrap p {font-size:16px}
    
    .index .sec_02 .tab_menu {margin-top:16px}
    .index .sec_02 .tab_menu li > * {font-size:16px}
    .index .sec_02 .tab_menu li > * svg {display:none}
    .index .sec_02 .item .txt_wrap .tit {font-size:20px}
    .index .sec_02 .item .txt_wrap p {font-size:14px}
    .index .sec_02 .item .txt_wrap .btn_more {margin-top:20px}

    .index .sec_03 .list {flex-direction:column;gap:20px;}
    .index .sec_03 .list > a {height:150px;font-size:18px;border-radius:30px 0 30px 0}
    .index .sec_03 .list > a svg {width:20px;height:20px}

    .index .sec_04 .list {flex-direction:column;gap:20px;}
    
    .index .sec_06 .list {gap:20px 6%;max-width:500px;margin:0 auto}
    .index .sec_06 .list .item {width:47%}
    .index .sec_06 .list .item span {font-size:15px;margin-top:14px}

    .index .sec_07 .photo_list {grid-template-columns:repeat(2, 1fr);}
    .index .sec_07 .profile_banner {flex-wrap:wrap;gap:20px 0}
    .index .sec_07 .profile_banner .sns {width:100%;justify-content:center;padding:0;margin:0}
    .index .sec_07 .profile_banner .sns::before {display:none}
    .index .sec_07 .profile_banner .sns .link {gap:10px}
    .index .sec_07 .profile_banner .sns .link a {width:40px}
    .index .sec_07 .profile_banner .name .btn_more {margin-top:10px}
    .index .sec_07 .profile_banner .sns span {font-size:14px}

    .index .sec_08 .list {flex-direction:column;gap:20px 0;max-width:500px;margin:0 auto;}
    .index .sec_08 .list .txt_wrap .date {font-size:14px}
    .index .sec_08 .list .txt_wrap .tit {font-size:16px;margin-top:4px}
    .index .sec_08 .list .txt_wrap .btn_more {margin-top:10px}

    .index .sec_09 .cont > div > .tit {height:56px;font-size:18px;border-radius:10px;padding:0 20px}
    .index .sec_09 .cont > div > .tit svg {width:24px;height:24px}
    .index .sec_09 .list .item {border-radius:10px}
}

@media all and (max-width: 499px) {
    .index .sec_09 .cont > div:nth-child(2),
    .index .sec_09 .cont > div:nth-child(3) {width:100%}
}

@media all and (max-width: 374px) {
    .index .sec_02 .tab_menu li > * {font-size:14px}
} */