@charset "utf-8";

:root {
    --sec-padding: 150px;
}

button {color:#000;cursor:pointer;background:transparent;border:none;outline:0}
.only_mb {display:none}
.sec {overflow:hidden}

.index .btn_more1 {display:inline-flex;align-items:center;gap:0 14px;font-size:18px;text-transform:capitalize;position:relative;padding:7px 0}
.index .btn_more1::after {content:'';display:block;width:100%;height:1px;background:var(--black);opacity:.5;position:absolute;bottom:0;left:0}
.index .btn_more1 svg {transition:all .2s}
.index .btn_more1:hover svg {transform:translateX(3px)}

.index .swiper-pagination {text-align:left;;width:100%;max-width:1480px;padding:0 20px;margin:0 auto;bottom:100px;transform:translateX(-50%);left:50%;}
.index .swiper-pagination-bullet {width:10px;height:10px;border:solid 2px var(--black);border-radius:30px;background:none;opacity:.3;transition:all .5s}
.index .swiper-pagination-bullet-active {width:30px;opacity:1}

/* 인덱스 */
.index .title_box {text-align:center}
.index .title_box.left {text-align:left}
.index .title_box .sub {display:block;font-size:32px;}
.index .title_box .tit {display:block;line-height:1;font-size:80px;font-weight:500;font-family:"utile-display", sans-serif;text-transform:capitalize;}
.index .title_box p {font-size:18px;line-height:1.8;color:#333333;margin-top:40px}

.index .sec_01 .swiper,
.index .sec_01 .swiper-slide {position:relative}
.index .sec_01 .swiper-slide .img_wrap {height: 80vh; min-height: 500px; overflow:hidden}
.index .sec_01 .swiper-slide .img_wrap img {width:100%;height:100%;object-fit:cover;animation:scaleUp 10s alternate both linear}
.index .sec_01 .swiper-slide .img_wrap img.mb {display:none}
.index .sec_01 .swiper-slide .txt_wrap {width:100%;position:absolute;bottom:164px;left:0}
.index .sec_01 .swiper-slide .txt_wrap .sub {display:block;font-size:32px}
.index .sec_01 .swiper-slide .txt_wrap .tit {display:block;font-size:95px;font-weight:500;margin-top:-10px}
.index .sec_01 .swiper-slide .txt_wrap p {font-size:22px;margin-top:30px}

.index .sec_01 .swiper-slide{
    height: 100vh;
    min-height: 700px;
    opacity: 0 !important;
}
.index .sec_01 .swiper-slide.swiper-slide-active{
    opacity: 1 !important;
}
.index .sec_01 .swiper-slide.swiper-slide01{
    background: url(/html/img/index_01_01.jpg) no-repeat left bottom / cover;
}
.index .sec_01 .swiper-slide.swiper-slide02{
    background: url(/html/img/index_01_02.jpg) no-repeat left bottom / cover;
}

@keyframes scaleUp {
    from {transform:scale(1)}
    to {transform:scale(1.1)}
}

.index .sec_02 {padding-top:78px}
.index .sec_02 .swiper {overflow:visible}
.index .sec_02 .swiper-slide {display:flex;align-items:center;width:auto;padding-right:100px}
.index .sec_02 .swiper-slide .img_wrap {width:760px}
.index .sec_02 .swiper-slide .txt_wrap .sub {display:block;font-size:80px;font-weight:500;text-transform:capitalize;}
.index .sec_02 .swiper-slide .txt_wrap .tit {display:block;font-size:32px;font-weight:600;margin-top:40px}
.index .sec_02 .swiper-slide .txt_wrap p {font-size:18px;line-height:1.8;color:#333333;margin-top:40px}
.index .sec_02 .swiper-slide .btn_more {display:inline-flex;align-items:center;gap:0 12px;font-size:18px;font-weight:500;border:solid 1px #A3A3A3;border-radius:40px;padding:10px 26px;text-transform:capitalize;margin-top:60px}
.index .sec_02 .swiper-slide .btn_more svg {transition:all .2s}
.index .sec_02 .swiper-slide .btn_more:hover svg {transform:translateX(4px)}

.index .sec_03 {padding:var(--sec-padding) 0 120px}
.index .sec_03 .inner {position:relative}
.index .sec_03 .title_box {position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);z-index:1}
.index .sec_03 .title_box > img {width:357px;opacity:.1;margin-bottom:-100px}
.index .sec_03 .list {display:flex;align-items:center;justify-content:space-between}
.index .sec_03 .item {display:block}
.index .sec_03 .item:hover .btn_more1 svg {transform:translateX(3px)}
.index .sec_03 .item .txt_wrap {display:flex;align-items:center;gap:0 10%}
.index .sec_03 .item .txt_wrap .tit {display:block;font-size:24px;font-weight:600}
.index .sec_03 .item_01 {max-width:390px}
.index .sec_03 .item_02 {max-width:460px;transform:translateX(15%);margin-left:auto}
.index .sec_03 .item_02 .txt_wrap {gap:0 15%}

.index .sec_04 {background:url('/html/img/index_04_bg.jpg') no-repeat center/cover fixed;padding:var(--sec-padding) 0;color:var(--white)}
.index .sec_04 .inner {max-width:1060px}
.index .sec_04 .title_box .sub {color:rgba(255,255,255,.7)}
.index .sec_04 .list {display:flex;align-items:flex-start;justify-content:center;gap:0 60px;margin-top:70px;position:relative}
.index .sec_04 .list .asset {width:156px;position:absolute;top:0;right:0;transform:translate(50%, -50%);z-index:2}
.index .sec_04 .list .asset img {animation:rotate360 60s infinite linear}
.index .sec_04 .item {display:block;width:100%;color:inherit}
.index .sec_04 .item .img_wrap {overflow:hidden}
.index .sec_04 .item .img_wrap img {transition:all .5s}
.index .sec_04 .item:hover .img_wrap img {transform:scale(1.04)}
.index .sec_04 .item:hover .btn_more1 svg {transform:translateX(3px)}
.index .sec_04 .item .txt_wrap {margin-top:24px;text-align:center}
.index .sec_04 .item .txt_wrap .tit {display:block;font-size:24px;font-weight:600}
.index .sec_04 .item .txt_wrap .btn_more1 {margin-top:16px;color:var(--white)}
.index .sec_04 .item .txt_wrap .btn_more1::after {background:var(--white)}
@keyframes rotate360 {
    from {transform:rotate(0deg)}
    to {transform:rotate(3600deg)}
}

.index .sec_05 {display:flex;;height:980px}
.index .sec_05 > div {display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;text-align:center}
.index .sec_05 > div .txt_wrap {margin-top:60px}
.index .sec_05 > div .txt_wrap .tit {display:block;font-size:32px;font-weight:600;line-height:1.3}
.index .sec_05 .left {background:url('/html/img/index_05_bg.png') no-repeat top center/cover fixed;position:relative;overflow:hidden}
.index .sec_05 .left .asset {width:90%;position:absolute;bottom:0;left:5%;transform:translateY(36%)}
.index .sec_05 .left > img {width:219px}
.index .sec_05 .left .txt_wrap svg {margin:24px 0}
.index .sec_05 .left .txt_wrap p {font-size:22px;line-height:1.5}
.index .sec_05 .right {position:relative}
.index .sec_05 .swiper {width:100%;max-width:500px}
.index .sec_05 .swiper-slide {opacity:0 !important}
.index .sec_05 .swiper-slide a {display:block}
.index .sec_05 .swiper-slide a:hover .asset_arrow {transform:translateX(4px)}
.index .sec_05 .swiper-slide-active {opacity:1 !important}
.index .sec_05 .swiper-pagination {bottom:0;text-align:center}
.index .sec_05 .swiper-slide .img_wrap {max-width:500px;position:relative;margin:0 auto}
.index .sec_05 .swiper-slide .img_wrap .asset_txt {font-size:80px;font-weight:500;position:absolute;left:-15%;top:0}
.index .sec_05 .swiper-slide .img_wrap .asset_arrow {width:86px;position:absolute;bottom:6%;right:9%;transition:all .2s}
.index .sec_05 .swiper-slide .img_wrap .round {width:100%;border-radius:500px;box-shadow:14px 20px 21px rgba(0,0,0,.05)}
.index .sec_05 .swiper-slide .txt_wrap p {font-size:18px;line-height:1.6;color:#333333;margin-top:20px}

.index .sec_06 {padding-top:var(--sec-padding)}
.index .sec_06 .inner {max-width:1770px}
.index .sec_06 .list {display:flex;align-items:flex-start;gap:0 40px;margin-top:130px}

.index .sec_07 {padding:200px 0}
.index .sec_07 .inner {display:flex;align-items:center;justify-content:center;max-width:1440px}
.index .sec_07 .img_wrap {position:relative}
.index .sec_07 .center_img {width:100%;max-width:570px}
.index .sec_07 .center_img > img {animation:float 2s infinite alternate both ease-in-out}
.index .sec_07 .txt {font-size:120px;font-weight:500;font-family:"utile-display", sans-serif;text-transform:capitalize;position:absolute;white-space:nowrap;z-index:1}
.index .sec_07 .txt.left {top:11%;left:20px}
.index .sec_07 .txt.right {bottom:29%;right:20px}
.index .sec_07 .left_img {width:100%;max-width:300px;opacity:.5;position:absolute;top:50%;right:calc(100% + 10%)}
.index .sec_07 .left_img img {animation:float 2s 1s infinite alternate both ease-in-out}
.index .sec_07 .right_img {width:100%;max-width:360px;opacity:.2;position:absolute;top:0;left:calc(100% + 10%)}
.index .sec_07 .right_img img {animation:float 1.5s 1.5s infinite alternate both ease-in-out}
@keyframes float {
    0% {transform:translateY(0)}
    100% {transform:translateY(-4%)}
}

@media screen and (max-width: 1399px){
    .index .sec_02 .swiper-slide .img_wrap {width:660px}

    .index .sec_05 .swiper-slide .img_wrap {max-width:400px}

}

@media screen and (max-width: 1199px){
    .index .title_box .sub {font-size:26px}
    .index .title_box .tit {font-size:56px}

    .index .sec_01 .swiper-slide .img_wrap {height:800px}
    .index .sec_01 .swiper-slide .txt_wrap .sub {font-size:24px}
    .index .sec_01 .swiper-slide .txt_wrap .tit {font-size:60px}
    .index .sec_01 .swiper-slide .txt_wrap p {font-size:20px;margin-top:24px}

    .index .sec_02 .swiper-slide {padding-right:50px}
    .index .sec_02 .swiper-slide .img_wrap {width:500px}
    .index .sec_02 .swiper-slide .txt_wrap .sub {font-size:56px}
    .index .sec_02 .swiper-slide .txt_wrap .tit {font-size:26px;margin-top:30px}
    .index .sec_02 .swiper-slide .txt_wrap p {margin-top:32px}
    .index .sec_02 .swiper-slide .btn_more {margin-top:45px}

    .index .sec_03 .title_box > img {width:260px}
    .index .sec_03 .item_01 {max-width:330px}
    .index .sec_03 .item_02 {max-width:375px}

    .index .sec_04 .list {gap:0 40px}

    .index .sec_05 {height:750px}
    .index .sec_05 > div .txt_wrap {margin-top:45px}
    .index .sec_05 > div .txt_wrap .tit {font-size:26px}
    .index .sec_05 .left > img {width:180px}
    .index .sec_05 .left .txt_wrap p {font-size:18px}
    .index .sec_05 .swiper-slide .img_wrap {width:340px}
    .index .sec_05 .swiper-slide .img_wrap .asset_txt {font-size:50px}
    .index .sec_05 .swiper-slide .img_wrap .asset_arrow {width:65px}

    .index .sec_06 .list {margin-top:80px;gap:20px}

    .index .sec_07 {padding:160px 0}
    .index .sec_07 .inner {max-width:800px}
    .index .sec_07 .txt {font-size:75px}
    .index .sec_07 .img_wrap {width:60%}
    .index .sec_07 .right_img {width:70%}
    .index .sec_07 .left_img {width:60%}
    /*
    */

    .index .sec_01 .swiper-slide{
        height: 90vh;
        min-height: 600px;
    }
    .index .sec_01 .swiper-slide .img_wrap {height:600px}
    .index .sec_01 .swiper-slide .txt_wrap .sub {font-size:32px}
    .index .sec_01 .swiper-slide .txt_wrap .tit {font-size:48px;margin-top:8px}
    .index .sec_01 .swiper-slide .txt_wrap p {font-size:20px;margin-top:24px}

    .index .sec_01 .swiper-slide.swiper-slide01{
        background: url(/html/img/index_01_01_mb.jpg) no-repeat center bottom / cover;
    }
    .index .sec_01 .swiper-slide.swiper-slide02{
        background: url(/html/img/index_01_02_mb.jpg) no-repeat center bottom / cover;
    }
    .index .sec_01 .swiper-slide .txt_wrap {text-align:center;bottom:auto;top:120px}
    .index .sec_01 .swiper-slide .img_wrap img.mb {display:block}
    .index .sec_01 .swiper-slide .img_wrap img.pc {display:none}
    .index .sec_01 .swiper-pagination {bottom:50%;text-align:center;}
}

@media screen and (max-width: 1023px){
    .index .sec_03 {padding-top:60px}
    .index .sec_03 .title_box {position:initial;transform:none}

    .index .sec_05 {display:block;height:auto}
    .index .sec_05 .left {padding:var(--sec-padding) 20px}
    .index .sec_05 .left .txt_wrap {margin:0}
    .index .sec_05 .right {padding:var(--sec-padding) 20px}






}

@media screen and (max-width: 768px){
    :root {
        --sec-padding: 80px;
    }
    .only_mb {display:block}
    .only_pc {display:none}
    .index .sec_01 .swiper-slide .txt_wrap .sub {font-size:20px}
    .index .sec_01 .swiper-slide .txt_wrap .tit {font-size:32px;margin-top:4px}
    .index .sec_01 .swiper-slide .txt_wrap p {font-size:18px;margin-top:20px}
    .index .title_box .sub {font-size:20px}
    .index .title_box .tit {font-size:32px}
    .index .title_box p {margin-top:30px}
    .index .btn_more1 {font-size:12px;padding:6px 0}
    .index .btn_more1 svg {width:12px}



    .index .sec_02 {padding:0}
    .index .sec_02 .swiper-slide {flex-direction:column;padding:0}
    .index .sec_02 .swiper-slide .txt_wrap {margin-top:-30px}
    .index .sec_02 .swiper-slide .txt_wrap .sub {font-size:32px}
    .index .sec_02 .swiper-slide .txt_wrap .tit {font-size:20px;margin-top:20px}
    .index .sec_02 .swiper-slide .txt_wrap p {margin-top:24px}
    .index .sec_02 .swiper-slide .btn_more {font-size:14px;margin-top:32px;padding:10px 16px}
    .index .sec_02 .swiper-slide .btn_more svg {width:5px;}

    .index .sec_03 {padding-bottom:90px}
    .index .sec_03 .list {flex-wrap:wrap;margin-top:40px}
    .index .sec_03 .title_box > img {width:200px}
    .index .sec_03 .item_01 {max-width:284px}
    .index .sec_03 .item_02 {max-width:290px;margin-top:-100px;transform:translateX(23%)}
    .index .sec_03 .item .txt_wrap .tit {font-size:20px}
    .index .sec_03 .item .txt_wrap {flex-direction:column;align-items:flex-start;gap:8px 0}

    .index .sec_04 .list {justify-content:flex-start;width:calc(100% + 40px);gap:0 20px;overflow-x:auto;margin-left:-20px;padding:0 20px}
    .index .sec_04 .list .asset {display:none}
    .index .sec_04 .item {min-width:280px;width:280px}
    .index .sec_04 .item .txt_wrap {margin-top:32px}
    .index .sec_04 .item .txt_wrap .tit {font-size:20px}
    .index .sec_04 .item .txt_wrap .btn_more1 {margin-top:5px}

    .index .sec_05 .left > img {display:none}
    .index .sec_05 > div .txt_wrap {margin-top:32px}
    .index .sec_05 > div .txt_wrap .tit {font-size:20px}
    .index .sec_05 .swiper-slide .img_wrap {width:280px}
    .index .sec_05 .swiper-slide .img_wrap .asset_txt {font-size:32px}
    .index .sec_05 .swiper-slide .img_wrap .asset_arrow {width:50px}
    .index .sec_05 .swiper-slide .txt_wrap p {font-size:16px}

    .index .sec_06 .title_box {text-align:center}
    .index .sec_06 .list {max-width:400px;flex-direction:column;margin:45px auto 0}

    .index .sec_07 {padding:120px 0}


}

@media screen and (max-width: 499px){
    .index .swiper-pagination-bullet {height:8px;width:8px}
    .index .swiper-pagination-bullet-active {width:23px}

    .index .sec_02 .inner {padding:0}
    .index .sec_02 .swiper-slide {width:100%;align-items:flex-start;padding:0 20px}
    .index .sec_02 .swiper-slide .img_wrap {width:calc(100% + 110px);max-width:initial;margin-left:-55px}

    .index .sec_05 .swiper-slide .img_wrap .asset_txt {left:-10px}

    .index .sec_07 .inner {max-width:450px}
    .index .sec_07 .txt {font-size:32px}
    .index .sec_07 .right_img {left:69%;top:-26%}
    .index .sec_07 .left_img {right:75%;top:56%}
}