@charset "utf-8";
:root {
    --sec-padding: 200px;
}

.hot_pf {margin-top:80px}
.sec {overflow:hidden}
.only_mb {display:none}
.wrapper {width:100%;max-width:1740px;padding:0 20px;margin:0 auto}
.no_scroll {height:100%;overflow:hidden}
.btn_wrap {display:flex;align-items:center;justify-content:center;gap:0 10px}
.primary {color:var(--primary)}

.title_box {text-align:left;align-items:flex-start}
.title_box .sub {display:block;font-size:20px;font-weight:500;line-height:1.4;color:var(--primary);margin-bottom:14px}
.title_box .tit {display:block;font-size:54px;font-weight:700;line-height:1.4}
.title_box p {font-size:20px;line-height:1.6;margin-top:46px;color:inherit}
.title_box.center {text-align:center;align-items:center}
.title_box.side {display:flex;align-items:flex-start;justify-content:space-between;flex-direction:row}
.title_box.side p {margin:0}
.title_box.side.have_sub p {margin-top:30px}

.font-pretendard {font-family:'pretendard', sans-serif}

/* 히어로 섹션 */
.sec_hero {height:100vh;min-height:800px;position:relative;}
.sec_hero .img_wrap {width:100%;height:100%;overflow:hidden}
.sec_hero .img_wrap img {width:100%;height:100%;object-fit:cover;animation:scaleUp 10s alternate both ease-in-out;}
.sec_hero .txt_wrap {width:100%;position:absolute;top:42%;left:0;transform:translateY(-50%);padding:0 20px;text-align:center;color:#fff}
.sec_hero .txt_wrap .logo {width:80%}
.sec_hero .txt_wrap .tit {font-size:44px;font-weight:200;line-height:1.4;margin-top:44px}
.sec_hero .txt_wrap .tit .big {font-size:1.45em;font-weight:700}
.sec_hero .view_more {width:160px;position:absolute;bottom:80px;left:50%;transform:translateX(-50%)}
.sec_hero .view_more .more {animation:rotate 8s linear infinite}
.sec_hero .view_more .round {display:flex;align-items:center;justify-content:center;width:62%;height:62%;background:var(--primary);border-radius:200px;position:absolute;top:50%;left:50%;transform:translate(-50%, -50%)}

/* 설명 섹션 */
.sec_info {background:var(--primary);padding:120px 0;color:#ffffff}
.sec_info .wrapper {display:flex;align-items:flex-start;justify-content:space-between;gap:40px;}
.sec_info .title_box {flex:1}
.sec_info .info {display:flex;align-items:center;flex-wrap:wrap;gap:10px 30px;margin-top:44px}
.sec_info .info > div {display:flex;align-items:center;gap:0 14px;font-size:20px;}
.sec_info .cont {font-size:18px;color:#CACACA;margin-top:38px}
.sec_info .btn_wrap a {display:flex;align-items:center;justify-content:center;gap:0 10px;background:rgba(255,255,255,.9);border-radius:50px;padding:16px 20px;font-size:22px;font-weight:700;transition:all .2s}
.sec_info .btn_wrap a svg {transition:all .2s}
.sec_info .btn_wrap a:hover {background:rgba(255,255,255,1)}
.sec_info .btn_wrap a:hover svg {transform:translate(5px, -5px)}

/* 데탑뷰 화면 스크롤 */
.desktop_view .wrapper {max-width:1360px}
.desktop_view .inner1 {border-radius:15px;box-shadow:18px 18px 47px rgba(0,0,0,0.35);position:relative}
.desktop_view .inner1 > .sha1 {display:block;width:30%;position:absolute;top:-2%;left:98%}
.desktop_view .inner1 > .sha2 {display:block;width:40%;position:absolute;top:98%;left:-0.5%}
.desktop_view .inner2 {display:flex;flex-direction:column;border-radius:15px;overflow:hidden;box-shadow:75px 75px 140px rgba(0,0,0,0.25)}
.desktop_view .inner2 img {width:100%}
.desktop_view .cont {background:#fff;aspect-ratio:1.7/1;overflow:hidden}
.desktop_view .cont img {animation:desktopView 15s linear infinite}

/* 오버뷰 화면 슬라이드 */
.over_view .swiper {overflow:visible}
.over_view .swiper-wrapper {-webkit-transition-timing-function:linear!important;transition-timing-function:linear!important}
.over_view .swiper-slide {width:850px;padding:0 12px}
.over_view .img_wrap {border:solid 1px #F2F2F2;border-radius:20px;overflow:hidden;box-shadow:0 4px 30px rgba(0,0,0,0.15)}
.over_view .img_wrap img {width:100%}

/* 페이지 뷰(2단 기본) */
.page_view {padding:200px 0}
.page_view .title_box p {color:#565656}
.page_view .list {display:flex;align-items:flex-start;gap:0 80px;margin-top:60px}
.page_view .list > div {box-shadow:0 4px 20px rgba(0,0,0,0.15)}
.page_view .list > div:nth-child(2) {margin-top:170px}

/* 배너 통이미지 */
.sec_banner {max-width:3000px;margin:0 auto}
.sec_banner .title_box {padding:0 20px}
.sec_banner .banner_img img {width:100%}

/* 디자인시스템 컬러 */
.sec_system .color .item {display:flex;align-items:flex-end;justify-content:flex-end;text-align:right;padding:20px 40px;font-size:20px;font-weight:700;color:#fff}
.sec_system .color .item span {display:block;margin-top:8px}

/* 텍스트 슬라이드 */
.txt_slide {display:flex;opacity:.3;margin-top:80px}
.txt_slide p {display:flex;align-items:center;font-size:100px;font-weight:700;animation:txtSlide 8s linear infinite;white-space:nowrap;}
.txt_slide p::before {content:'';display:block;width:10px;height:10px;background:#fff;border-radius:10px;margin:0 40px}
@keyframes txtSlide {
    from {transform:translateX(0)}
    to {transform:translateX(-100%)}
}

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

@keyframes rotate {
    from {transform:rotate(0)}
    to {transform:rotate(360deg)}
}

@keyframes desktopView {
    from {transform:translateY(0)}
    to {transform:translateY(-83%)}
}

@media (hover: hover) {}

@media all and (max-width: 1199px) {
    :root {
        --sec-padding: 140px;
    }

    .title_box .sub {font-size:16px}
    .title_box .tit {font-size:40px}
    .title_box p {font-size:17px;margin-top:30px}

    /* 히어로 섹션 */
    .sec_hero {height:90vh;min-height:600px}
    .sec_hero .txt_wrap .tit {font-size:34px}
    .sec_hero .view_more {width:130px;bottom:65px}

    /* 설명 섹션 */
    .sec_info {padding:90px 0}
    .sec_info .info {margin-top:28px}
    .sec_info .info > div {font-size:18px}
    .sec_info .cont {font-size:16px;margin-top:30px}
    .sec_info .btn_wrap a {font-size:18px}

    /* 데탑뷰 화면 스크롤 */
    .desktop_view .inner1,
    .desktop_view .inner2 {border-radius:10px}

    /* 오버뷰 화면 슬라이드 */
    .over_view .swiper-slide {width:500px;padding:0 10px}
    .over_view .img_wrap {border-radius:12px}

    /* 페이지 뷰(2단 기본) */
    .page_view {padding:140px 0}
    .page_view .list {gap:0 45px}
    .page_view .list > div:nth-child(2) {margin-top:100px}

    /* 디자인시스템 컬러 */
    .sec_system .color .item {height:150px;font-size:17px;padding:20px 30px}

    /* 텍스트 슬라이드 */
    .txt_slide {margin-top:50px}
    .txt_slide p {font-size:60px}
    .txt_slide p::before {margin:0 25px}
}

@media all and (max-width: 1023px) {
    .sec_info .wrapper {flex-direction:column;align-items:center;gap:44px}

    .title_box.side {flex-direction:column;gap:20px;}
    .title_box.side.have_sub p {margin-top:0}
}

@media all and (max-width: 767px) {
    :root {
        --sec-padding: 80px;
    }

    .only_mb {display:block}
    .only_pc {display:none}

    .hot_pf {margin-top:68px}
    .title_box .sub {font-size:12px;margin-bottom:10px}
    .title_box .tit {font-size:24px}
    .title_box p {font-size:14px;margin-top:20px}

    /* 히어로 섹션 */
    .sec_hero {min-height:initial;height:600px}
    .sec_hero .txt_wrap .tit {font-size:24px;margin-top:40px}
    .sec_hero .view_more {width:100px;bottom:50px}

    /* 설명 섹션 */
    .sec_info {padding:60px 0}
    .sec_info .info {flex-direction:column;align-items:flex-start;margin-top:20px}
    .sec_info .info > div {gap:0 7px;font-size:16px}
    .sec_info .cont {font-size:14px;margin-top:20px}
    .sec_info .btn_wrap a {font-size:14px;padding:12px 20px}
    .sec_info .btn_wrap a svg {width:20px;height:20px}

    /* 데탑뷰 화면 스크롤 */
    .desktop_view .inner1,
    .desktop_view .inner2 {border-radius:5px}

    /* 오버뷰 화면 슬라이드 */
    .over_view .swiper-slide {width:300px;padding:0 8px}
    .over_view .img_wrap {border-radius:6px}

    /* 페이지 뷰(2단 기본) */
    .page_view {padding:80px 0}
    .page_view .list {gap:0 15px}
    .page_view .list > div:nth-child(2) {margin-top:42px}

    /* 디자인시스템 컬러 */
    .sec_system .color .item {font-size:14px;padding:20px}

    /* 텍스트 슬라이드 */
    .txt_slide {margin-top:20px}
    .txt_slide p {font-size:24px}
    .txt_slide p::before {width:5px;height:5px;margin:0 12px}
}

@media all and (max-width: 499px) {}

@media all and (max-width: 374px) {}