/* Setting */ section{overflow:hidden;line-height:1.5;position:relative;padding:150px 0} section .section_fix{width:calc(100% - 40px);margin:0 auto;overflow:hidden;max-width:1300px;} section .section_fix .section_title{text-align:center;overflow:hidden;margin:0 auto 50px;} section .section_fix .section_title h3{font-size:40px;color:#211815;position:relative;line-height:1.3} /* Section01 */ #section01{padding:0;} #section01 .main_slide{width: 100%;min-height: 600px;height: 100vh;overflow: hidden;position: relative;} #section01 .main_slide .slick-slide{vertical-align:top;height:100vh;position:relative;transition:0.5s;float:left} #section01 .main_slide .slick-slide img{vertical-align:top;position:absolute;top:50%;left:50%;min-width:100%;min-height:100%;width:auto;height:auto;transform:translate(-50%,-50%)} #section01 .video {width: 100%;min-height: 600px;height: 100vh;overflow: hidden;position: relative;margin:0 auto;} #section01 .video #video{width:100%;height:100%;object-fit: cover !important;max-height:100vh;outline:none;border:0;} #section01 .textarea{position:absolute;width:100%;top:50%;left:50%;transform:translate(-50%,-50%);z-index:100;} #section01 .textarea .content-box p{font-size:60px;font-weight:600;text-align:center;color:#fff;line-height:1.35} #section01 .textarea .content-box p b{font-size:60px;font-weight:900} #section01 .textarea .content-box p.en2 b{font-family: 'Nohemi', 'Noto Sans KR', 'NanumSquare', sans-serif , 'Open Sans';} /* Section02 */ #section02{padding:0;height:100vh;min-height:800px;} #section02 .section_fix{overflow:visible;height:100%;} #section02 .section_body{display:flex;width:100%;height:100%;} #section02 .section_body .fl {width: 50%;display: flex;flex-direction: column;justify-content: center;align-items: flex-start;padding-right: 50px;} #section02 .section_body .fl .textarea {width: 100%;} #section02 .section_body .fl .textarea h3 {display:block;font-size: 60px;line-height: 1.2;margin-bottom: 10px;} #section02 .section_body .fl .textarea span {display: block;font-size: 55px;font-weight: 900;color: #B03CCC;line-height: 1.1;margin-bottom: 0px;} #section02 .section_body .fl .textarea p {font-size: 22px;line-height: 1.5;margin-bottom:90px;} #section02 .section_body .fl .textarea p b{font-weight:700} #section02 .section_body .fl .textarea a{width:320px;line-height:60px;background:#B03CCC;border-radius:10px;color:#fff;font-size:25px;text-align:center;display:block;border:1px solid #B03CCC;box-sizing: border-box;transition:0.5s;font-weight:700;} #section02 .section_body .fl .textarea a:hover{background:#fff;color:#B03CCC;} #section02 .section_body .fr {width:50%;display: flex;gap: 30px;min-height: 800px;height:100%;overflow:visible;position:relative; align-items: flex-start;} #section02 .section_body .fr ul {display: flex;flex-direction: column;gap: 30px;width: 50%;height:auto;flex-shrink: 0;will-change: transform;animation-play-state: paused;} #section02 .section_body .fr ul li img {width: 100%;display: block;border-radius: 20px;} #section02 .section_body .fr ul.TtoB {animation: scrollTtoB 170s linear infinite;} #section02 .section_body .fr ul.BtoT {animation: scrollBtoT 170s linear infinite;} /* Section03 */ #section03{padding:0;height:100vh;min-height:800px;} #section03 .section_body{width:100%;display:flex;} #section03 .section_body .item{width:50%;position:relative;text-align:center;height:100vh;min-height:800px;transition:0.5s;overflow:hidden;} #section03 .section_body .item.fl .bg{background:url('../img/01_index/section03_contents-1.jpg') no-repeat center;background-size:cover;position:absolute;width:100%;height:100%;top:0;left:0;} #section03 .section_body .item .bg:after{content:'';width:100%;height:100%;position:absolute;top:0;left:0;background:rgba(0,0,0,1);transition:0.5s;mix-blend-mode: saturation;opacity:1} #section03 .section_body .item.fr .bg{background:url('../img/01_index/section03_performance-1.jpg') no-repeat center;background-size:cover;position:absolute;width:100%;height:100%;top:0;left:0;} #section03 .section_body .item .textarea{position:absolute;top:23%;left:50%;transform:translate(-50%,-50%);line-height:1;z-index:1;width:100%;} #section03 .section_body .item .textarea span{font-size:25px;color:#fff;display:block;width:180px;line-height:48px;font-weight:500;border-radius:24px;margin:0 auto 20px;} #section03 .section_body .item.fl .textarea span{background:#B03CCC} #section03 .section_body .item.fr .textarea span{background:#006EF4} #section03 .section_body .item .textarea h3{font-size:80px;color:#535353;display:block;margin-bottom:10px;} #section03 .section_body .item .textarea b{font-size:20px;color:#535353;display:block;font-weight:600} #section03 .section_body .item a{position:absolute;top:0;left:0;width:100%;height:100%;z-index:2} #section03 .section_body .item:hover .hidden{opacity:1} #section03 .section_body .item:hover .bg{transform:scale(1.2);transition:0.5s;} #section03 .section_body .item:hover .bg:after{opacity:0} /* Section04 */ #section04{padding:0;height:100vh;min-height:1080px;} #section04 .section_body{width:100%;display:flex;height:100%;position:relative;flex-direction: column;justify-content: center;} #section04 .textarea{position:relative;overflow:hidden;margin:0 auto 150px;} #section04 .textarea b{font-size:60px;display:block;text-align:center;line-height:1.2;margin:0 auto 100px;font-weight:800;} #section04 .textarea .counter_container{display: flex;justify-content: space-around;text-align: center;width:100%;max-width:1100px;margin:0 auto;} #section04 .textarea .counter_container .counter_item{position:relative;border-radius: 15px;padding: 40px 20px;margin: 0 10px;overflow:hidden;align-self: flex-start;} #section04 .textarea .counter_container .counter_item p{font-size:20px;font-weight: bold;margin-bottom: 10px;line-height:1;min-height:40px; display: flex;align-items: center;justify-content: center;} #section04 .textarea .counter_container .num_box{display: inline-flex;align-items: baseline;} #section04 .textarea .counter_container .num_box .count_wrapper{position: relative; display: inline-block;} #section04 .textarea .counter_container .num_box .count_wrapper p{display:inline-block;font-size:90px;font-weight:900;font-variant-numeric: tabular-nums;font-feature-settings: "tnum";line-height: 1;} #section04 .textarea .counter_container .num_box .count_wrapper p:not(.count) {visibility: hidden;pointer-events: none;} #section04 .textarea .counter_container .num_box .count_wrapper p.count{position:absolute;top:0;left:0;text-align:right;width:100%;} #section04 .textarea .counter_container .num_box span{font-size:50px;font-weight:900;} #section04 .logobox {display: flex;flex-direction: column;gap:0px;} #section04 .logobox .top,#section04 .logobox .bottom {display: flex;white-space: nowrap;width: max-content;} #section04 .logobox img {height: 64px;margin: 15px 20px;padding:8px;box-shadow:0 0 10px rgba(0,0,0,0.1);border-radius: 8px;flex-shrink: 0;will-change: transform;animation-play-state: paused;} #section04 .logobox .top {animation: scrollLeft 60s linear infinite;} #section04 .logobox .bottom {animation: scrollRight 60s linear infinite;animation-delay: 0s;} /* --- Keyframes --- */ @keyframes scrollLeft { 0% { transform: translateX(0%); } 100% { transform: translateX(-50%); } } @keyframes scrollRight { 0% { transform: translateX(-52%); } 100% { transform: translateX(-2%); } } @keyframes scrollTtoB { 0% { transform: translateY(-55%); } /* 미리 위로 올려둔 상태에서 */ 100% { transform: translateY(-5%); } /* 아래로 내려옴 */ } @keyframes scrollBtoT { 0% { transform: translateY(0); } 100% { transform: translateY(-50%); } /* 위로 올라감 */ } /* Mobile */ @media all and (max-width:1440px){ #section01 .textarea .content-box p{font-size:54px;} #section01 .textarea .content-box p b{font-size:54px;} #section02 .section_body .fl .textarea h3{font-size:54px;} #section02 .section_body .fl .textarea span{font-size:50px;} #section02 .section_body .fl .textarea p{font-size:20px;} #section02 .section_body .fl .textarea a{font-size:23px;} #section03 .section_body .item .textarea span{font-size:23px;line-height:44px;} #section03 .section_body .item .textarea h3{font-size:72px;} #section03 .section_body .item .textarea b{font-size:18px;} #section04 .textarea{margin:0 auto 100px;} #section04 .textarea b{font-size:54px;margin:0 auto 60px;} #section04 .textarea .counter_container .num_box .count_wrapper p{font-size:80px;} } @media all and (max-width:1024px){ #section01 .textarea .content-box p{font-size:48px;} #section01 .textarea .content-box p b{font-size:48px;} #section02 .section_body .fl .textarea h3{font-size:48px;} #section02 .section_body .fl .textarea span{font-size:45px;} #section02 .section_body .fl .textarea p{font-size:18px;} #section02 .section_body .fl .textarea a{font-size:21px;} #section03 .section_body .item .textarea h3{font-size:64px;} #section04 .textarea{margin:0 auto 60px} #section04 .textarea b{font-size:48px;margin:0 auto 40px;} #section04 .textarea .counter_container .num_box .count_wrapper p{font-size:70px;} #section04 .textarea .counter_container .num_box span{font-size:40px;} } @media all and (max-width:900px){ #section02{height:auto} #section02 .section_body{flex-direction: column;align-items: center;} #section02 .section_body .fl{width:100%;padding:120px 0 30px;text-align:center;} #section02 .section_body .fl .textarea a{margin:0 auto 30px;} #section02 .section_body .fr{width:calc(100% + 40px);overflow:hidden;padding-right:30px;position:relative;height:auto;min-height:auto;margin:0 -20px 100px;gap:0;} #section02 .section_body .fr ul {flex-direction: row;width:auto;} #section02 .section_body .fr ul li img {max-width:300px} #section02 .section_body .fr ul.TtoB{animation: scrollLeft 170s linear infinite;} #section02 .section_body .fr ul.BtoT{display:none} #section03{height:auto;min-height:auto;} #section03 .section_body{flex-direction: column;} #section03 .section_body .item{width:100%;min-height:720px;height:720px;} #section03 .section_body .item .textarea .hidden{opacity:1;position:static;} #section03 .section_body .item .bg:after{background:rgba(0,0,0,0);} #section04{height:auto;min-height:auto;padding:120px 0;} #section04 .textarea .counter_container{flex-wrap: wrap;max-width:580px;} #section04 .textarea .counter_container .counter_item{width:50%;box-sizing:border-box;margin:0;} #section04 .textarea .counter_container .num_box .count_wrapper p{font-size:64px;} } @media all and (max-width:768px){ #section01 .textarea .content-box p{font-size:36px;} #section01 .textarea .content-box p b{font-size:36px;} #section02 .section_body .fl .textarea h3{font-size:42px;} #section02 .section_body .fl .textarea span{font-size:40px;} #section02 .section_body .fl .textarea p{font-size:16px;} #section02 .section_body .fl .textarea a{font-size:19px;} #section03 .section_body .item{min-height:640px;height:640px;} #section03 .section_body .item .textarea span{font-size:21px;line-height:40px;} #section03 .section_body .item .textarea h3{font-size:54px;} #section03 .section_body .item .textarea b{font-size:16px;} #section04 .textarea b{font-size:42px;} #section04 .textarea .counter_container .num_box .count_wrapper p{font-size:54px;} #section04 .textarea .counter_container .num_box span{font-size:30px;} #section04 .logobox img{height:54px;} } @media all and (max-width:640px){ #section01 .textarea .content-box p{font-size:32px;} #section01 .textarea .content-box p b{font-size:32px;} #section01 .textarea .content-box p.en2 b{font-weight:700} #section02 .section_body .fl .textarea h3{font-size:36px;} #section02 .section_body .fl .textarea span{font-size:35px;} #section02 .section_body .fr{height:720px;min-height:720px;} #section04 .textarea b{font-size:36px;} #section04 .textarea .counter_container{max-width: 440px;} #section04 .textarea .counter_container .num_box .count_wrapper p{font-size:48px;} } @media all and (max-width:480px){ #section01 .textarea .content-box p{font-size:28px;} #section01 .textarea .content-box p b{font-size:28px;} #section02 .section_body .fl .textarea h3{font-size:30px;} #section02 .section_body .fl .textarea span{font-size:27px;} #section02 .section_body .fr{height:600px;min-height:600px;} #section03 .section_body .item{min-height:540px;height:540px;} #section03 .section_body .item .textarea span{font-size:19px;line-height:32px;} #section03 .section_body .item .textarea h3{font-size:42px;} #section04 .textarea{margin:0 auto 30px;} #section04 .textarea b{font-size:30px;} #section04 .textarea .counter_container{max-width: 380px;} #section04 .textarea .counter_container .counter_item{padding:30px 20px;} #section04 .textarea .counter_container .num_box .count_wrapper p{font-size:40px;} } @media all and (max-width:425px){ #section01 .textarea .content-box p{font-size:24px;} #section01 .textarea .content-box p b{font-size:24px;} #section02{min-height:auto} #section02 .section_body .fl{padding:50px 0 0px;} #section02 .section_body .fl .textarea h3{font-size:27px;} #section02 .section_body .fl .textarea span{font-size:24px;} #section02 .section_body .fl .textarea span br{display:none} #section02 .section_body .fl .textarea p{font-size:15px;margin:0 auto 20px;} #section02 .section_body .fl .textarea a{font-size:17px;line-height:50px;width:240px;} #section02 .section_body .fr{height:auto;min-height:auto;margin-bottom:30px;} #section03 .section_body .item{min-height:480px;height:480px;} #section03 .section_body .item .textarea span{font-size:17px;} #section03 .section_body .item .textarea h3{font-size:36px;} #section04{padding:100px 0} #section04 .textarea{margin:0 auto 30px;} #section04 .textarea b{font-size:27px;} #section04 .textarea .counter_container{max-width: 320px;} #section04 .textarea .counter_container .counter_item{padding:24px 12px;} #section04 .textarea .counter_container .num_box .count_wrapper p{font-size:32px;} #section04 .logobox img{height:40px;margin:10px 12px;} }