.pc-only {display:block;} .m-only {display:none;} .main_container {overflow: hidden;} /* body{background: #969a9d;} */ /* .container {background:#99827D;} */ /********************************************* 공통 *********************************************/ .content_section {height: 100dvh; overflow: hidden; position:relative;} /* 관심고객등록 퀵버튼 */ .quick_fixed {position:fixed; right:100px; bottom:100px; z-index:1000; font-size:0;} .quick_fixed .txt {display: block; width:90px; padding-top: 90px; height: 0; overflow: hidden; background:url('/resources/img/main/btn_register.png') 0 0 no-repeat;} .quick_fixed .rolling {position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);} .quick_fixed .rolling svg {animation: quick_fixed_rolling 10s linear infinite;} @keyframes quick_fixed_rolling { 0% {transform: rotate(0deg);} 100% {transform: rotate(360deg);} } .quick_fixed.white {} .quick_fixed.white .txt {background-image:url('/resources/img/main/btn_register_white.png');} .quick_fixed.white .rolling svg path:not(.line) {fill:#fff;} .quick_fixed.white .rolling svg path.line {stroke:#fff;} .quick_fixed.hide {display: none;} /* 인디게이터 */ #fp-nav {margin-top: 0 !important; top:auto; bottom:9.25%; transition: all 0.3s;} #fp-nav.left {/* left:10.72%; */ left:206px;} #fp-nav ul {display: flex; align-items: center; gap:14px;} #fp-nav ul li, .fp-slidesNav ul li {margin: 0; width:auto; height:auto; display: flex; align-items: center;} #fp-nav ul li a, .fp-slidesNav ul li a {width:auto;} #fp-nav ul li:first-child, #fp-nav ul li:last-child {display: none;} #fp-nav ul li a span, .fp-slidesNav ul li a span {display: block; margin: 0 auto; width:6px; height:6px; background:#00173E; opacity:0.5; position:static;} #fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span {width:6px; height:6px; opacity:1;} #fp-nav ul li a.active span, #fp-nav ul li:hover a.active span, .fp-slidesNav ul li a.active span, .fp-slidesNav ul li:hover a.active span {margin: 0 auto;} #fp-nav ul li .fp-tooltip {font-size:14px; color:#00173E; position:static; max-width:0; overflow: hidden; margin-left: 0;} #fp-nav ul li:hover .fp-tooltip, #fp-nav.fp-show-active a.active+.fp-tooltip {max-width:500px; margin-left: 9px;} #fp-nav ul li:hover a span, .fp-slidesNav ul li:hover a span {margin: 0; width:6px; height:6px; opacity:1;;} #fp-nav ul li .fp-tooltip.right {right:14px;} #fp-nav.white {} #fp-nav.white ul li a span, #fp-nav.white .fp-slidesNav ul li a span {background:#fff;} #fp-nav.white ul li .fp-tooltip {color:#fff;} #fp-nav.hide {transform: translateY(100%); opacity:0;} /* 인디게이터_HOME */ .fp-btn-home {position:absolute; /* left:5.2%; */ left:100px; bottom:9.25%; width:90px; font-size:0; transition: all 0.3s;} .fp-btn-home::after {content: ''; position:absolute; right:0; top:50%; width:60px; height:1px; transform: translateY(-50%); background:#000; opacity:0.3;} .fp-btn-home .btn {opacity:0.3;} .fp-btn-home.active .btn {opacity:1;} .fp-btn-home.white .btn {opacity:0.5;} .fp-btn-home.white .btn path {fill:#fff; stroke:#fff;} .fp-btn-home.white::after {background:#fff; opacity:0.5;} .fp-btn-home.hide {transform: translateY(100%); opacity:0;} /* MOBILE */ @media screen and (max-width: 1024px) { #fp-nav, .fp-btn-home, .quick_fixed {display: none !important;} } /********************************************* INTRO *********************************************/ .intro_container {position:fixed; left:0; top:0; right:0; bottom:0; background:#121D3C; z-index:6000; transition: all 0.15s;} .intro_container .visual_wrap { position:absolute; left:0; top:0; width:100%; height:100%; mask-image: url('/resources/img/main/intro_mask.svg'); mask-size: 185px auto; mask-repeat: no-repeat; mask-position: center calc(50% - 80px); /* background:url('/resources/img/main/sec01_bg01.jpg') center center / cover no-repeat; */ } .intro_container .visual_wrap img {position:fixed; left:0; top:0; width:100%; height:100%; object-fit: cover;} .intro_container .visual_wrap::after {content:''; position:absolute; left:0; right:0; top:0; bottom:0; background:#71778a; transition: all 1.5s;} .intro_container .shiny_wrap {position:absolute; left: 50%; top: 50%; transform:translate(-50%, -50%); width:218px; height:219px; background:url('/resources/img/main/intro_shiny.png') 0 0 no-repeat; background-size:100% 100%; transform: translate(-32px, -391px); /* transform: translate(-173px, -91px); */ opacity:0; animation:intro_shiny 1s 0.3s alternate;} @keyframes intro_shiny { 0% {opacity:0;} 50% {opacity:1;} 100% {opacity:0;} } /* .intro_container .shiny_wrap.ani1 {transform: translate(-73px, -21px);} .intro_container .shiny_wrap.ani2 {transform: translate(-32px, -391px);} */ .intro_container .content_wrap {position:absolute; left:0; right:0; top: 50%; margin-top: 160px; color:#fff; text-align:center; letter-spacing: -0.025em; transition: all 0.5s;} .intro_container .content_wrap .txt01 {font-size:34px;;} .intro_container .content_wrap .txt02 {margin-top: 10px; font-size:48px; font-weight: 700;} .intro_container .skip_cursor {position:fixed; transform: translate(-50%, -50%); width:94px; padding-top: 94px; height: 0; overflow: hidden; background:url('/resources/img/main/btn_skip.png') 0 0 no-repeat; opacity:0; cursor: pointer;} .intro_container .btn_skip {display: block; position:fixed; left:50%; bottom:11.729%; transform: translateX(-50%); font-size:14px; font-weight: 500; color:#fff; z-index:9000; transition: all 0.5s;} /* PC */ @media screen and (min-width: 1025px) { .intro_container .btn_skip {display: none;} } /* PC_작은해상도 */ @media screen and (min-width: 1025px) and (max-width: 1920px), screen and (min-width: 1025px) and (max-height: 1080px) { } /* MOBILE */ @media screen and (max-width: 1024px) { .intro_container .skip_cursor {display: none;} .intro_container {} .intro_container .visual_wrap { mask-size: 85px auto; mask-position: center calc(50% - 37px); } .intro_container .visual_wrap img {} .intro_container .visual_wrap::after {} .intro_container .shiny_wrap {width:102px; height:102px; background-image:url('/resources/img/main/intro_shiny_m.png'); /* transform: translate(-77px, -12px); */ transform: translate(-23px, -168px);} /* .intro_container .shiny_wrap.ani1 {transform: translate(-15px, -18px);} .intro_container .shiny_wrap.ani2 {transform: translate(-23px, -168px);} */ .intro_container .content_wrap {margin-top: 74px;} .intro_container .content_wrap .txt01 {font-size:15px;;} .intro_container .content_wrap .txt02 {margin-top: 4px; font-size:22px;} } /* MOBILE_작은해상도 */ @media screen and (max-width: 1024px) and (max-height: 760px) { } .intro_container.active .visual_wrap::after {opacity:0;} .intro_container.active .content_wrap {opacity:0; visibility: hidden; transform: translateY(50dvh);} .intro_container.active .btn_skip {opacity:0;} .intro_container.hide {opacity:0; visibility: hidden;} .intro_container.hide .visual_wrap::after {content: normal;} /********************************************* SECTION_01 ::: MAIN *********************************************/ .section01 {} .section01 .main_swiper {height: 100%;} .section01 .main_swiper .swiper-slide {height: 100%;} .section01 .main_swiper .swiper-slide .visual {position: absolute; left: 0; top: 0; width: 100%; height: 100%;} .section01 .main_swiper .swiper-slide .visual img {width: 100%; height: 100%; object-fit: cover; object-position: center 80%;} .section01 .main_swiper .swiper-slide .content_wrap {position:absolute; left:17.07%; top: 50%; transform: translateY(-50%); color:#fff;} .section01 .main_swiper .swiper-slide .content_wrap .txt01 {font-family: 'Eulyoo1945', serif; font-size: 60px; line-height:normal; letter-spacing: -1.2px; display: flex; align-items: end; gap: 15px;} .section01 .main_swiper .swiper-slide .content_wrap .txt02 {margin-top: 41px; font-family: SUIT; font-size: 38px; letter-spacing: -0.025em;} .section01 .main_swiper .swiper-slide .content_wrap .txt02 strong {font-weight: 700;} .section01 .main_swiper .swiper-slide .content_wrap .bar {position:relative; margin-bottom: 14px; width:128px; height:1px; background:#fff;} .section01 .main_swiper .swiper-slide .content_wrap .txt03 {margin-top: 16px; font-size: 22px; font-weight: 400; font-family: SUIT; line-height:1.4; letter-spacing: -0.44px; position:relative;} .section01 .main_swiper .swiper-pagination {left:50%; width:auto; transform: translateX(-50%); bottom:9.25%; display: flex; font-size:0; gap:10px; padding: 10px; background:rgba(0,0,0,0.5); border-radius: 99px;} .section01 .main_swiper .swiper-pagination-bullet {width:6px; height:6px; margin: 0; background:#fff; opacity:0.5; border-radius: 99px; transition: all 0.5s;} .section01 .main_swiper .swiper-pagination-bullet-active {width:70px; opacity:0.5;} /* PC */ @media screen and (min-width: 1025px) { .section01 .main_swiper .swiper-slide {} .section01 .main_swiper .swiper-slide .content_wrap .txt01, .section01 .main_swiper .swiper-slide .content_wrap .txt02, .section01 .main_swiper .swiper-slide .content_wrap .txt03 {opacity:0; transform: translateX(50px);} .section01 .main_swiper .swiper-slide.item01 .content_wrap {right: 113px; top: 200px; left:unset; transform:unset} .section01 .main_swiper .swiper-slide.item02 .content_wrap * {color: #121D3C;} .section01 .main_swiper .swiper-slide.item02 .content_wrap {transform: translateY(-95.45%);} .section01 .main_swiper .swiper-slide.item02 .content_wrap .bar {background: #121D3C;} .section01 .main_swiper .swiper-slide .content_wrap .bar {transform: scaleX(0); transform-origin:left top;} .section01 .main_swiper .swiper-slide.item02 .contBox01 {opacity:0; margin-right: -100px;} .section01 .main_swiper .swiper-slide.item02 .contBox02 {opacity:0; margin-left: -100px;} .section01 .main_swiper .swiper-slide.active {} .section01 .main_swiper .swiper-slide.active .content_wrap .txt01 {opacity:1; transform: none; transition: all 0.5s;} .section01 .main_swiper .swiper-slide.active .content_wrap .txt02 {opacity:1; transform: none; transition: all 0.5s 0.1s;} .section01 .main_swiper .swiper-slide.active .content_wrap .txt03 {opacity:1; transform: none; transition: all 0.5s 0.3s;} .section01 .main_swiper .swiper-slide.active .content_wrap .bar {transform: scaleX(1); transition: all 0.5s 0.2s;} .section01 .main_swiper .swiper-slide.item02.active .contBox01, .section01 .main_swiper .swiper-slide.item02.active .contBox02 {opacity:1; margin: 0; transition: all 0.5s;} } /* PC_작은해상도 */ @media screen and (min-width: 1025px) and (max-width: 1920px), screen and (min-width: 1025px) and (max-height: 1080px) { .section01 {} .section01 .main_swiper {} .section01 .main_swiper .swiper-slide {} .section01 .main_swiper .swiper-slide .visual {} .section01 .main_swiper .swiper-slide .visual img {} .section01 .main_swiper .swiper-slide .content_wrap {} .section01 .main_swiper .swiper-slide .content_wrap .txt01 {font-size:4.22dvh;} .section01 .main_swiper .swiper-slide .content_wrap .txt02 {margin-top:41px; font-size:2.37dvh;} .section01 .main_swiper .swiper-slide .content_wrap .bar {margin-top: 2.31dvh; width: 128px;} .section01 .main_swiper .swiper-slide .content_wrap .txt03 {margin-top: 16px; font-size:1.8dvh;} } /* MOBILE */ @media screen and (max-width: 1024px) { .section01 {} .section01 .main_swiper {} .section01 .main_swiper .swiper-slide {} .section01 .main_swiper .swiper-slide .visual {} .section01 .main_swiper .swiper-slide .visual img {} .section01 .main_swiper .swiper-slide .content_wrap {left: 50%;transform: translateX(-50%); top: 16%; width: 90%;} .section01 .main_swiper .swiper-slide .content_wrap .txt01 {gap: 10px;font-size: 36px;letter-spacing: -0.72px;} .section01 .main_swiper .swiper-slide .content_wrap .txt02 {font-size: 20px; letter-spacing: -0.4px; margin-top:20px;} .section01 .main_swiper .swiper-slide .content_wrap .bar {width: 76px; margin-bottom: 8px;} .section01 .main_swiper .swiper-slide .content_wrap .txt03 {margin-top:10px; font-size: 14px; letter-spacing: -0.28px; } .section01 .main_swiper .swiper-pagination {bottom:4.54%;} .section01 .main_swiper .swiper-pagination-bullet {} .section01 .main_swiper .swiper-pagination-bullet-active {} .section01 .main_swiper .swiper-slide {} .section01 .main_swiper .swiper-slide .content_wrap .txt01, .section01 .main_swiper .swiper-slide .content_wrap .txt02, .section01 .main_swiper .swiper-slide .content_wrap .txt03 {opacity:0; transform: translateX(50px);} .section01 .main_swiper .swiper-slide .content_wrap .bar {transform: scaleX(0); transform-origin:left top;} .section01 .main_swiper .swiper-slide.item02 .contBox01 .txt01, .section01 .main_swiper .swiper-slide.item02 .contBox01 .txt02, .section01 .main_swiper .swiper-slide.item02 .contBox02 {opacity:0; transform: translateX(50px);} .section01 .main_swiper .swiper-slide.active .content_wrap .bar {transform: scaleX(1); transition: all 0.5s 0.2s;} .section01 .main_swiper .swiper-slide.active .content_wrap .txt01 {opacity:1; transform: none; transition: all 0.5s;} .section01 .main_swiper .swiper-slide.active .content_wrap .txt02 {opacity:1; transform: none; transition: all 0.5s 0.1s;} .section01 .main_swiper .swiper-slide.active .content_wrap .txt03 {opacity:1; transform: none; transition: all 0.5s 0.2s;} } /* MOBILE_작은해상도 */ @media screen and (max-width: 1024px) and (max-height: 760px) { } /********************************************* SECTION_02 ::: ENVIRONMENT *********************************************/ .section02 {background:url('/resources/img/main/sec02_bg.jpg') center center / cover no-repeat; color:#fff;} .section02 .card_inner {width:calc( 390px * 7 + 38px * 6 ); height:430px; position:absolute; left: 50%; top: 50%; transform: translate(-50%, -40.93%);} .section02 .card_inner div {width:390px; height:100%; position:absolute; left:50%; top:50%; top:0; transform: translateX(-50%); transition: all 0.5s;} .section02 .card_inner div img {width:100%; height: 100%; object-fit: cover;} .section02 .card_inner .card01 {z-index:4;} .section02 .card_inner .card02 {z-index:3;} .section02 .card_inner .card03 {z-index:2;} .section02 .card_inner .card04 {z-index:1;} .section02 .card_inner .card05 {z-index:2;} .section02 .card_inner .card06 {z-index:3;} .section02 .card_inner .card07 {z-index:4;} .section02 .card_dimmed {position:absolute; left: 0; top:0; width:100%; height:100%; background:linear-gradient(270deg, rgba(0, 0, 0, 0.70) 0%, rgba(0, 0, 0, 0.00) 20%, rgba(0, 0, 0, 0.00) 80.29%, rgba(0, 0, 0, 0.70) 100%); pointer-events:none;} .section02 .header_inner {position:absolute; left: 5.26%; top: 16.94%; font-size:40px; font-family:'SUITE', 'SUIT', sans-serif;} .section02 .content_inner01 {position:absolute; left: 50%; top:17.4%; transform: translateX(-320px); font-size:44px; line-height:1.3; letter-spacing: -0.025em;} .section02 .content_inner01 strong {font-weight: 700;} .section02 .content_inner02 {position:absolute; left: 50%; bottom:13.7%; transform: translateX(-320px); font-size:18px; font-weight: 500; line-height:1.5; white-space:nowrap; color:#DBDBDB;} .section02.fp-completely .card_inner .card01 {transform: translateX( calc(-50% - (100% + 38px) * 3) );} .section02.fp-completely .card_inner .card02 {transform: translateX( calc(-50% - (100% + 38px) * 2) );} .section02.fp-completely .card_inner .card03 {transform: translateX( calc(-50% - (100% + 38px) * 1) );} .section02.fp-completely .card_inner .card04 {} .section02.fp-completely .card_inner .card05 {transform: translateX( calc(-50% + (100% + 38px) * 1) );} .section02.fp-completely .card_inner .card06 {transform: translateX( calc(-50% + (100% + 38px) * 2) );} .section02.fp-completely .card_inner .card07 {transform: translateX( calc(-50% + (100% + 38px) * 3) );} /* PC_작은해상도 */ @media screen and (min-width: 1025px) and (max-width: 1920px), screen and (min-width: 1025px) and (max-height: 1080px) { .section02 {} .section02 .card_inner {width:calc( 36.11dvh * 7 + 3.51dvh * 6 ); height:39.81dvh;} .section02 .card_inner div {width:36.11dvh;} .section02 .card_inner div img {} .section02 .card_inner .card01 {} .section02 .card_inner .card02 {} .section02 .card_inner .card03 {} .section02 .card_inner .card04 {} .section02 .card_inner .card05 {} .section02 .card_inner .card06 {} .section02 .card_inner .card07 {} .section02 .card_dimmed {} .section02 .header_inner {font-size:3.7dvh;} .section02 .content_inner01 {font-size:4.07dvh; transform: translateX(-29.62dvh);} .section02 .content_inner01 strong {} .section02 .content_inner02 {transform: translateX(-29.62dvh); font-size:1.66dvh;} .section02.fp-completely .card_inner .card01 {transform: translateX( calc(-50% - (100% + 3.51dvh) * 3) );} .section02.fp-completely .card_inner .card02 {transform: translateX( calc(-50% - (100% + 3.51dvh) * 2) );} .section02.fp-completely .card_inner .card03 {transform: translateX( calc(-50% - (100% + 3.51dvh) * 1) );} .section02.fp-completely .card_inner .card04 {} .section02.fp-completely .card_inner .card05 {transform: translateX( calc(-50% + (100% + 3.51dvh) * 1) );} .section02.fp-completely .card_inner .card06 {transform: translateX( calc(-50% + (100% + 3.51dvh) * 2) );} .section02.fp-completely .card_inner .card07 {transform: translateX( calc(-50% + (100% + 3.51dvh) * 3) );} } /* MOBILE */ @media screen and (max-width: 1024px) { .section02 {background-image:url('/resources/img/main/sec02_bg_m.jpg');} .section02 .card_inner {width:calc( 200px * 7 + 20px * 6 ); height:225px; transform: translate(-50%, -11.55%);} .section02 .card_inner div {width:200px;} .section02 .card_inner div img {} .section02 .card_inner .card01 {} .section02 .card_inner .card02 {} .section02 .card_inner .card03 {} .section02 .card_inner .card04 {} .section02 .card_inner .card05 {} .section02 .card_inner .card06 {} .section02 .card_inner .card07 {} .section02 .card_dimmed {display: none;} .section02 .header_inner {left:20px; top:13.77%; font-size:26px;} .section02 .content_inner01 {left:20px; top:20.05%; transform:none; font-size:30px; line-height:1.4;} .section02 .content_inner01 strong {} .section02 .content_inner02 {left:20px; bottom:9.75%; transform:none; font-size:16px;} .section02.fp-completely .card_inner .card01 {transform: translateX( calc(-50% - (100% + 20px) * 3) );} .section02.fp-completely .card_inner .card02 {transform: translateX( calc(-50% - (100% + 20px) * 2) );} .section02.fp-completely .card_inner .card03 {transform: translateX( calc(-50% - (100% + 20px) * 1) );} .section02.fp-completely .card_inner .card04 {} .section02.fp-completely .card_inner .card05 {transform: translateX( calc(-50% + (100% + 20px) * 1) );} .section02.fp-completely .card_inner .card06 {transform: translateX( calc(-50% + (100% + 20px) * 2) );} .section02.fp-completely .card_inner .card07 {transform: translateX( calc(-50% + (100% + 20px) * 3) );} } /* MOBILE_작은해상도 */ @media screen and (max-width: 1024px) and (max-height: 760px) { .section02 {} .section02 .card_inner {width:calc( 26.73dvh * 7 + 2.67dvh * 6 ); height:30.08dvh;} .section02 .card_inner div {width:26.73dvh;} .section02 .card_inner div img {} .section02 .card_inner .card01 {} .section02 .card_inner .card02 {} .section02 .card_inner .card03 {} .section02 .card_inner .card04 {} .section02 .card_inner .card05 {} .section02 .card_inner .card06 {} .section02 .card_inner .card07 {} .section02 .card_dimmed {} .section02 .header_inner {font-size:3.47dvh;} .section02 .content_inner01 {font-size:4.01dvh;} .section02 .content_inner01 strong {} .section02 .content_inner02 {font-size:2.13dvh;} .section02.fp-completely .card_inner .card01 {transform: translateX( calc(-50% - (100% + 2.67dvh) * 3) );} .section02.fp-completely .card_inner .card02 {transform: translateX( calc(-50% - (100% + 2.67dvh) * 2) );} .section02.fp-completely .card_inner .card03 {transform: translateX( calc(-50% - (100% + 2.67dvh) * 1) );} .section02.fp-completely .card_inner .card04 {} .section02.fp-completely .card_inner .card05 {transform: translateX( calc(-50% + (100% + 2.67dvh) * 1) );} .section02.fp-completely .card_inner .card06 {transform: translateX( calc(-50% + (100% + 2.67dvh) * 2) );} .section02.fp-completely .card_inner .card07 {transform: translateX( calc(-50% + (100% + 2.67dvh) * 3) );} } /********************************************* SECTION_03 ::: PREMIUM *********************************************/ .section03 {} .section03 .section_inner {position:absolute; left:0; top:0; width:100%; height:100%; background:center center / cover no-repeat; overflow: hidden; transition: all 0.75s;;} .section03 .section_inner.summary {background:#E1E9F5;} .section03 .section_inner.summary::before, .section03 .section_inner.summary::after {content:''; position:absolute; top: 50%; margin-top: 44px; transform: scaleX(0); width:607px; height:1px; background:#A8A8A8; transition: all 0.5s;} .section03 .section_inner.summary::before {left:0; transform-origin:0 center;} .section03 .section_inner.summary::after {right:0; transform-origin:right center;} .section03 .section_inner.summary .summaryBox {position:absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); letter-spacing: -0.025em; white-space:nowrap; text-align:center; color:#222;} .section03 .section_inner.summary .summaryBox .inner {} .section03 .section_inner.summary .summaryBox .txt01 {font-size:40px; margin-bottom: 20px;} .section03 .section_inner.summary .summaryBox .txt02 {font-size:60px;} .section03 .section_inner.summary .summaryBox .txt02 strong {font-weight: 700;} .section03 .section_inner[class*="item"] {transform: translateX(100%); color:#fff;} .section03 .section_inner[class*="item"] .contentBox {position:absolute; left: 50%; top: 50%;} .section03 .section_inner[class*="item"] .contentBox .num {font-family:'SUITE', 'SUIT', sans-serif; font-size:20px; margin-bottom: 40px;} .section03 .section_inner[class*="item"] .contentBox .title {} .section03 .section_inner[class*="item"] .contentBox .title span {position:relative; font-size:48px; position:relative; letter-spacing: -0.025em;} .section03 .section_inner[class*="item"] .contentBox .title span::after {content:''; position:absolute; left: 100%; bottom:14px; width:168px; height:1px; background:#fff; opacity:0.5; margin-left: 13px;} .section03 .section_inner[class*="item"] .contentBox .title strong {font-weight: 700;} .section03 .section_inner[class*="item"] .contentBox .txt01 {font-size:26px; margin-top: 24px; letter-spacing: -0.025em;} .section03 .section_inner[class*="item"] .contentBox .txt01 strong {font-weight: 700;} .section03 .section_inner[class*="item"] .contentBox .txt02 {font-size:18px; margin-top: 6px; line-height:1.4; letter-spacing: -0.025em; color:#DBDBDB;} .section03 .section_inner[class*="item"] .visualBox {} .section03 .section_inner[class*="item"] .visualBox > div {position:absolute; left: 50%; top: 50%; font-size:0; box-shadow: 0 4px 50px 0 rgba(0, 0, 0, 0.25);} .section03 .section_inner[class*="item"] .visualBox > div .imgcut {position:absolute; right:12px; bottom:14px; font-size:16px; font-weight: 500; font-family:'SUITE', 'SUIT', sans-serif;} .section03 .section_inner[class*="item"] .visualBox > div img {width:100%;} .section03 .section_inner.summary {} .section03 .section_inner.summary .summaryBox .inner {transform: translateY(50px); opacity:0; transition: all 0.5s 0.25s;} .section03 .section_inner[class*="item"] .contentBox .title span::after {transform: scaleX(0); transform-origin:0 center; transition: all 0.5s 0.4s;} .section03 .section_inner[class*="item"] .visualBox > div {clip-path:polygon(100% 0, 100% 0%, 100% 100%, 100% 100%); transition: all 0.5s 0.4s;} .section03.fp-completely .section_inner.summary::before, .section03.fp-completely .section_inner.summary::after {transform:none;} .section03.fp-completely .section_inner.summary .summaryBox .inner {transform: none; opacity:1;} .section03 .section_inner[class*="item"].active .contentBox .title span::after {transform: none;} .section03 .section_inner[class*="item"].active .visualBox > div {clip-path:polygon(100% 0, 0 0%, 0 100%, 100% 100%);} .section03.on1 .section_inner.item01, .section03.on2 .section_inner.item02, .section03.on3 .section_inner.item03, .section03.on4 .section_inner.item04, .section03.on5 .section_inner.item05, .section03.on6 .section_inner.item06, .section03.on7 .section_inner.item07 {transform: none;} /* PC */ @media screen and (min-width: 1025px) { .section03 .section_inner.item01 {background-image:url('/resources/img/main/sec03_bg01.jpg');} .section03 .section_inner.item01 .contentBox {transform: translate(-659px, -312px);} .section03 .section_inner.item01 .visualBox .img01 {transform: translate(-62.81%, 10%);} .section03 .section_inner.item01 .visualBox .img02 {transform: translate(53.46%, -68.09%);} .section03 .section_inner.item02 {background-image:url('/resources/img/main/sec03_bg02.jpg');} .section03 .section_inner.item02 .contentBox {transform: translate(231px, -229px);} .section03 .section_inner.item02 .visualBox .img01 {transform: translate(-157.35%, -75.47%);} .section03 .section_inner.item02 .visualBox .img02 {transform: translate(-56.56%, 2.5%);} .section03 .section_inner.item03 {background-image:url('/resources/img/main/sec03_bg03.jpg');} .section03 .section_inner.item03 .contentBox {transform: translate(-674px, -22px);} .section03 .section_inner.item03 .visualBox .img01 {transform: translate(-33.43%, -88%);} .section03 .section_inner.item03 .visualBox .img02 {transform: translate(59.95%, -36.19%);} .section03 .section_inner.item04 {background-image:url('/resources/img/main/sec03_bg04.jpg');} .section03 .section_inner.item04 .contentBox {transform: translate(-674px, -77px);} .section03 .section_inner.item04 .visualBox .img01 {transform: translate(-33.43%, -88%);} .section03 .section_inner.item04 .visualBox .img02 {transform: translate(59.95%, -36.19%);} .section03 .section_inner.item05 {background-image:url('/resources/img/main/sec03_bg05.jpg');} .section03 .section_inner.item05 .contentBox {transform: translate(241px, -10px);} .section03 .section_inner.item05 .visualBox .img01 {transform: translate(-157.14%, -41.85%);} .section03 .section_inner.item05 .visualBox .img02 {transform: translate(-56.25%, -97.5%);} .section03 .section_inner.item06 {background-image:url('/resources/img/main/sec03_bg06.jpg');} .section03 .section_inner.item06 .contentBox {transform: translate(-674px, -342px);} .section03 .section_inner.item06 .visualBox .img01 {transform: translate(-62.81%, 10%);} .section03 .section_inner.item06 .visualBox .img02 {transform: translate(53.46%, -68.09%);} .section03 .section_inner.item07 {background-image:url('/resources/img/main/sec03_bg07.jpg');} .section03 .section_inner.item07 .contentBox {transform: translate(251px, -262px);} .section03 .section_inner.item07 .visualBox .img01 {transform: translate(-157.35%, -75.47%);} .section03 .section_inner.item07 .visualBox .img02 {transform: translate(-56.56%, 2.5%);} } /* PC_작은해상도 */ @media screen and (min-width: 1025px) and (max-width: 1920px), screen and (min-width: 1025px) and (max-height: 1080px) { .section03 {} .section03 .section_inner {} .section03 .section_inner.summary {} .section03 .section_inner.summary::before, .section03 .section_inner.summary::after {margin-top: 4.07dvh; width:56.2dvh;} .section03 .section_inner.summary::before {} .section03 .section_inner.summary::after {} .section03 .section_inner.summary .summaryBox {} .section03 .section_inner.summary .summaryBox .inner {} .section03 .section_inner.summary .summaryBox .txt01 {font-size:3.7dvh; margin-bottom: 1.85dvh;} .section03 .section_inner.summary .summaryBox .txt02 {font-size:5.55dvh;} .section03 .section_inner.summary .summaryBox .txt02 strong {} .section03 .section_inner[class*="item"] {} .section03 .section_inner[class*="item"] .contentBox .num {font-size:1.85dvh; margin-bottom: 3.7dvh;} .section03 .section_inner[class*="item"] .contentBox .title {} .section03 .section_inner[class*="item"] .contentBox .title span {font-size:4.44dvh;} .section03 .section_inner[class*="item"] .contentBox .title span::after {bottom:1.29dvh; width:15.55dvh; margin-left:1.2dvh;} .section03 .section_inner[class*="item"] .contentBox .title strong {} .section03 .section_inner[class*="item"] .contentBox .txt01 {font-size:2.4dvh; margin-top:2.22dvh;} .section03 .section_inner[class*="item"] .contentBox .txt01 strong {} .section03 .section_inner[class*="item"] .contentBox .txt02 {font-size:1.66dvh; margin-top: 0.55dvh;} .section03 .section_inner[class*="item"] .visualBox {} .section03 .section_inner[class*="item"] .visualBox > div {} .section03 .section_inner[class*="item"] .visualBox > div .imgcut {right:1.11dvh; bottom:1.29dvh; font-size:1.48dvh;} .section03 .section_inner[class*="item"] .visualBox > div img {} .section03 .section_inner.item01 {} .section03 .section_inner.item01 .contentBox {transform: translate(-61.01dvh, -28.88dvh);} .section03 .section_inner.item01 .visualBox .img01 {width:29.62dvh;} .section03 .section_inner.item01 .visualBox .img02 {width:42.77dvh;} .section03 .section_inner.item02 {} .section03 .section_inner.item02 .contentBox {transform: translate(21.38dvh, -21.20dvh);} .section03 .section_inner.item02 .visualBox .img01 {width:42.77dvh;} .section03 .section_inner.item02 .visualBox .img02 {width:29.62dvh;} .section03 .section_inner.item03 {} .section03 .section_inner.item03 .contentBox {transform: translate(-62.4dvh, -2.03dvh);} .section03 .section_inner.item03 .visualBox .img01 {width:29.62dvh;} .section03 .section_inner.item03 .visualBox .img02 {width:42.77dvh;} .section03 .section_inner.item04 {} .section03 .section_inner.item04 .contentBox {transform: translate(-62.4dvh, -7.12dvh);} .section03 .section_inner.item04 .visualBox .img01 {width:29.62dvh;} .section03 .section_inner.item04 .visualBox .img02 {width:42.77dvh;} .section03 .section_inner.item05 {} .section03 .section_inner.item05 .contentBox {transform: translate(22.31dvh, -0.92dvh);} .section03 .section_inner.item05 .visualBox .img01 {width:42.77dvh;} .section03 .section_inner.item05 .visualBox .img02 {width:29.62dvh;} .section03 .section_inner.item06 {} .section03 .section_inner.item06 .contentBox {transform: translate(-62.4dvh, -31.66dvh);} .section03 .section_inner.item06 .visualBox .img01 {width:29.62dvh;} .section03 .section_inner.item06 .visualBox .img02 {width:42.77dvh;} .section03 .section_inner.item07 {} .section03 .section_inner.item07 .contentBox {transform: translate(23.24dvh, -24.25dvh);} .section03 .section_inner.item07 .visualBox .img01 {width:42.77dvh;} .section03 .section_inner.item07 .visualBox .img02 {width:29.62dvh;} } /* MOBILE */ @media screen and (max-width: 1024px) { .section03 {} .section03 .section_inner {} .section03 .section_inner.summary {} .section03 .section_inner.summary::before, .section03 .section_inner.summary::after {content:normal;} .section03 .section_inner.summary .summaryBox {} .section03 .section_inner.summary .summaryBox .inner {transition-delay: 0s;} .section03 .section_inner.summary .summaryBox .txt01 {font-size:26px; margin-bottom: 12px;} .section03 .section_inner.summary .summaryBox .txt02 {font-size:34px;} .section03 .section_inner.summary .summaryBox .txt02 strong {} .section03 .section_inner[class*="item"] {} .section03 .section_inner[class*="item"] .contentBox {left:20px; top:auto;} .section03 .section_inner[class*="item"] .contentBox .num {font-size:18px; margin-bottom: 30px;} .section03 .section_inner[class*="item"] .contentBox .title {} .section03 .section_inner[class*="item"] .contentBox .title span {font-size:34px;} .section03 .section_inner[class*="item"] .contentBox .title span::after {bottom:9px; width:100px; margin-left: 6px;} .section03 .section_inner[class*="item"] .contentBox .title strong {} .section03 .section_inner[class*="item"] .contentBox .txt01 {font-size:20px; margin-top: 20px; line-height:1.4;} .section03 .section_inner[class*="item"] .contentBox .txt01 strong {} .section03 .section_inner[class*="item"] .contentBox .txt02 {font-size:14px; margin-top: 12px;} .section03 .section_inner[class*="item"] .visualBox {} .section03 .section_inner[class*="item"] .visualBox > div {left:auto; top:auto;} .section03 .section_inner[class*="item"] .visualBox > div .imgcut {right:5px; bottom:5px; font-size:10px;} .section03 .section_inner[class*="item"] .visualBox > div img {} .section03 .section_inner.item01 {background-image:url('/resources/img/main/sec03_bg01_m.jpg');} .section03 .section_inner.item01 .contentBox {top:13.63%;} .section03 .section_inner.item01 .visualBox .img01 {left:5.12%; bottom:9.35%; width:32.82%;} .section03 .section_inner.item01 .visualBox .img02 {right:5.12%; bottom:12.7%; width:51.28%;} .section03 .section_inner.item02 {background-image:url('/resources/img/main/sec03_bg02_m.jpg');} .section03 .section_inner.item02 .contentBox {bottom:9.49%;} .section03 .section_inner.item02 .visualBox .img01 {left:5.12%; top:15.1%; width:51.28%;} .section03 .section_inner.item02 .visualBox .img02 {right:5.12%; top:30.88%; width:32.82%;} .section03 .section_inner.item03 {background-image:url('/resources/img/main/sec03_bg03_m.jpg');} .section03 .section_inner.item03 .contentBox {top:13.63%;} .section03 .section_inner.item03 .visualBox .img01 {left:5.12%; bottom:9.35%; width:32.82%;} .section03 .section_inner.item03 .visualBox .img02 {right:5.12%; bottom:12.7%; width:51.28%;} .section03 .section_inner.item04 {background-image:url('/resources/img/main/sec03_bg04_m.jpg');} .section03 .section_inner.item04 .contentBox {top:13.63%;} .section03 .section_inner.item04 .visualBox .img01 {left:5.12%; bottom:9.35%; width:32.82%;} .section03 .section_inner.item04 .visualBox .img02 {right:5.12%; bottom:12.7%; width:51.28%;} .section03 .section_inner.item05 {background-image:url('/resources/img/main/sec03_bg05_m.jpg');} .section03 .section_inner.item05 .contentBox {bottom:9.49%;} .section03 .section_inner.item05 .visualBox .img01 {left:5.12%; top:15.1%; width:51.28%;} .section03 .section_inner.item05 .visualBox .img02 {right:5.12%; top:30.88%; width:32.82%;} .section03 .section_inner.item06 {background-image:url('/resources/img/main/sec03_bg06_m.jpg');} .section03 .section_inner.item06 .contentBox {top:13.63%;} .section03 .section_inner.item06 .visualBox .img01 {left:5.12%; bottom:9.35%; width:32.82%;} .section03 .section_inner.item06 .visualBox .img02 {right:5.12%; bottom:12.7%; width:51.28%;} .section03 .section_inner.item07 {background-image:url('/resources/img/main/sec03_bg07_m.jpg');} .section03 .section_inner.item07 .contentBox {bottom:9.49%;} .section03 .section_inner.item07 .visualBox .img01 {left:5.12%; top:15.1%; width:51.28%;} .section03 .section_inner.item07 .visualBox .img02 {right:5.12%; top:30.88%; width:32.82%;} } /* MOBILE_작은해상도 */ @media screen and (max-width: 1024px) and (max-height: 760px) { } /********************************************* SECTION_04 ::: BRAND *********************************************/ .section04 {background:#fff;;} .section04 .bg_inner {position:absolute; left:0; top:0; width:100%; height:100%;} .section04 .bg_inner div { position:absolute; left:0; top:0; width:100%; height:100%; background:url('/resources/img/main/sec04_bg.jpg') center center / cover no-repeat; clip-path: polygon(0% 0, 100% 0%, 100% 100%, 0% 100%); transition: all 0.5s; } .section04 .bg_inner img {width:100%; height:100%; object-fit: cover;} .section04 .content_inner01 {position:absolute; right:11.45%; bottom:19.16%; color:#fff; line-height:1.3;} .section04 .content_inner01 .txt01 {font-size:34px; line-height:1.3;} .section04 .content_inner01 .txt01 strong {font-weight: 700; font-size:50px;} .section04 .content_inner01 .txt02 {font-weight: 700; font-size:60px;} .section04 .content_inner02 {position:absolute; left:50%; top: 50%; transform: translate(298px, -289px); color:#fff;} .section04 .content_inner02::after {content:''; position:absolute; left:9px; top: 100%; margin-top: 54px; width:1px; height:201px; background:#606060;;} .section04 .content_inner02 .txt01 {font-size:40px; font-family:'SUITE', 'SUIT', sans-serif; font-weight: 500; color:#222;} .section04 .content_inner02 .txt02 {margin-top: 34px; font-size:40px; font-weight: 700; color:#222;} .section04 .content_inner02 .txt03 {margin-top: 35px; font-size:18px; font-weight: 500; color:#666; line-height:1.5; letter-spacing: -0.025em;} .section04 .content_inner02 .txt03 ~ .txt03 {margin-top: 23px;} .section04 .content_inner01 {transition: all 0.5s; opacity:0; transform:translateY(100px);} .section04 .content_inner02 {opacity:0; transition: all 0.5s;} .section04 .content_inner02 .txt01, .section04 .content_inner02 .txt02, .section04 .content_inner02 .txt03 {transform: translateX(50px); opacity:0;} .section04 .content_inner02::after {transform: scaleY(0); transform-origin:center top;} .section04.fp-completely .content_inner01 {opacity:1; transform: none;} .section04.on1 .content_inner01 {opacity:0; visibility: hidden; transform: translateY(100px);} .section04.on1 .content_inner02 {opacity:1;} .section04.on1 .content_inner02 .txt01 {opacity:1; transform: none; transition: all 0.5s 0.4s;} .section04.on1 .content_inner02 .txt02 {opacity:1; transform: none; transition: all 0.5s 0.5s;} .section04.on1 .content_inner02 .txt03 {opacity:1; transform: none; transition: all 0.5s 0.6s;} .section04.on1 .content_inner02::after {transform: scaleY(1); transition: all 0.5s 0.7s;} .section04.on1 .bg_inner div:nth-child(1) {clip-path: polygon(10.41% 26.94%, 26.04% 26.94%, 26.04% 87.12%, 10.41% 87.12%);} .section04.on1 .bg_inner div:nth-child(2) {clip-path: polygon(27.08% 13.88%, 42.7% 13.88%, 42.7% 74.07%, 27.08% 74.07%);} .section04.on1 .bg_inner div:nth-child(3) {clip-path: polygon(43.75% 22.03%, 59.37% 22.03%, 59.37% 82.22%, 43.75% 82.22%);} /* PC_작은해상도 */ @media screen and (min-width: 1025px) and (max-width: 1920px), screen and (min-width: 1025px) and (max-height: 1080px) { .section04 {} .section04 .bg_inner {} .section04 .bg_inner div {} .section04 .bg_inner img {} .section04 .content_inner01 {} .section04 .content_inner01 .txt01 {font-size:3.14dvh;} .section04 .content_inner01 .txt01 strong {font-size:4.62dvh;} .section04 .content_inner01 .txt02 {font-size:5.55dvh;} .section04 .content_inner02 {transform: translate(27.59dvh, -26.75dvh);} .section04 .content_inner02::after {left:0.83dvh; margin-top:5dvh; height:18.61dvh;} .section04 .content_inner02 .txt01 {font-size:3.7dvh;} .section04 .content_inner02 .txt02 {margin-top: 3.14dvh; font-size:3.7dvh;} .section04 .content_inner02 .txt03 {margin-top: 3.24dvh; font-size:1.66dvh;} .section04 .content_inner02 .txt03 ~ .txt03 {margin-top: 2.12dvh;} } /* MOBILE */ @media screen and (max-width: 1024px) { .section04 {} .section04 .bg_inner {} .section04 .bg_inner div { background-image:url('/resources/img/main/sec04_bg_m.jpg'); } .section04 .bg_inner img {} .section04 .content_inner01 {right:20px; bottom:13.9%;} .section04 .content_inner01 .txt01 {font-size:20px;} .section04 .content_inner01 .txt01 strong {font-size:30px;} .section04 .content_inner01 .txt02 {font-size:38px;} .section04 .content_inner02 {left:20px; top: 50%; transform: translateY(62px);} .section04 .content_inner02::after {content:normal;} .section04 .content_inner02 .txt01 {font-size:25px;} .section04 .content_inner02 .txt02 {margin-top: 20px; font-size:28px;} .section04 .content_inner02 .txt03 {margin-top: 20px; font-size:14px;} .section04 .content_inner02 .txt03 ~ .txt03 {margin-top: 14px;} .section04 .content_inner01 {} .section04 .content_inner02 {} .section04 .content_inner02 .txt01, .section04 .content_inner02 .txt02, .section04 .content_inner02 .txt03 {} .section04 .content_inner02::after {} .section04.on1 .content_inner01 {} .section04.on1 .content_inner02 {} .section04.on1 .content_inner02 .txt01 {} .section04.on1 .content_inner02 .txt02 {} .section04.on1 .content_inner02 .txt03 {} .section04.on1 .bg_inner div:nth-child(1) {clip-path: polygon(5.12% 20.05%, 33.33% 20.05%, 33.33% 52.13%, 5.12% 52.13%);} .section04.on1 .bg_inner div:nth-child(2) {clip-path: polygon(35.89% 13.1%, 64.1% 13.1%, 64.1% 45.18%, 35.89% 45.18%);} .section04.on1 .bg_inner div:nth-child(3) {clip-path: polygon(66.66% 17.51%, 94.87% 17.51%, 94.87% 49.59%, 66.66% 49.59%);} } /* MOBILE_작은해상도 */ @media screen and (max-width: 1024px) and (max-height: 760px) { } /********************************************* SECTION_05 ::: OVERVIEW *********************************************/ .section05 {background:url('/resources/img/main/sec05_bg.jpg') center center / cover no-repeat; color:#fff;} .section05 .header_inner {position:absolute; left:5.2%; top: 27.03%; letter-spacing: -0.025em;} .section05 .header_inner .title {font-size:40px; font-weight: 500; font-family:'SUITE', 'SUIT', sans-serif;} .section05 .header_inner .txt {margin-top: 14px; font-size:32px; font-weight: 500; font-family: "Noto Sans KR", sans-serif; color:#A1A1A1;} .section05 .content_inner {position:absolute; right:16.09%; bottom:25.18%; width:820px; display: grid; grid-template-columns: repeat(3, 1fr); gap:125px 50px;} .section05 .content_inner .item {} .section05 .content_inner .titBox {font-size:22px; font-weight: 500;;} .section05 .content_inner .contBox {margin-top: 24px; letter-spacing: -0.025em; display: flex; align-items: center; gap:3px} .section05 .content_inner .contBox .num {font-size:70px; font-weight: 500; font-family:'SUITE', 'SUIT', sans-serif;} .section05 .content_inner .contBox .unit {font-size:30px; font-weight: 500; color:rgba(255, 255, 255, 0.5); position:relative; top: 10px;} .section05 .content_inner .contBox .num ~ .num {margin-left: 9px;} /* PC_작은해상도 */ @media screen and (min-width: 1025px) and (max-width: 1920px), screen and (min-width: 1025px) and (max-height: 1080px) { .section05 {} .section05 .header_inner {} .section05 .header_inner .title {font-size:3.7dvh;} .section05 .header_inner .txt {margin-top: 1.29dvh; font-size:2.96dvh;} .section05 .content_inner {width:75.92dvh; gap:11.57dvh 4.62dvh;} .section05 .content_inner .item {} .section05 .content_inner .titBox {font-size:2.03dvh;} .section05 .content_inner .contBox {margin-top: 2.22dvh;} .section05 .content_inner .contBox .num {font-size:6.48dvh;} .section05 .content_inner .contBox .unit {font-size:2.77dvh; top: 0.92dvh;} .section05 .content_inner .contBox .num ~ .num {margin-left: 0.83dvh;} } /* MOBILE */ @media screen and (max-width: 1024px) { .section05 {background-image:url('/resources/img/main/sec05_bg_m.jpg');} .section05 .header_inner {left:20px; top: 19.38%;} .section05 .header_inner .title {font-size:25px;} .section05 .header_inner .txt {margin-top: 8px; font-size:22px;} .section05 .content_inner {left:20px; right:auto; bottom:auto; top:39.3%; width:310px; grid-template-columns: repeat(2, 1fr); gap:28px 10px;} .section05 .content_inner .item {} .section05 .content_inner .titBox {font-size:15px;} .section05 .content_inner .contBox {margin-top: 14px;} .section05 .content_inner .contBox .num {font-size:50px;} .section05 .content_inner .contBox .unit {font-size:20px; top:5px;} .section05 .content_inner .contBox .num ~ .num {margin-left: 6px;} } /* MOBILE_작은해상도 */ @media screen and (max-width: 1024px) and (max-height: 760px) { } /********************************************* SECTION_06 ::: CONTACT *********************************************/ .section06 {background:url('/resources/img/main/sec06_bg.jpg') center center / cover no-repeat;} .section06 .content_inner {position:absolute; right:0; bottom:0; width:66.14%; padding:155px 100px; background:rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px);} .section06 .content_inner .header_wrap {padding-bottom: 93px; position:relative;;} .section06 .content_inner .header_wrap::after {content:''; position:absolute; left:0; bottom:45px; width:30px; height:1px; background:#B2B2B2;;} .section06 .content_inner .header_wrap .title {font-size:60px; font-weight: 500; font-family:'SUITE', 'SUIT', sans-serif; color:#222;} .section06 .content_inner .header_wrap .txt {margin-top: 13px; font-size:26px; font-weight: 500; color:#666;} .section06 .content_inner .content_wrap {display:flex; gap:70px;} .section06 .content_inner .content_wrap .item {} .section06 .content_inner .content_wrap .tit {font-size:26px; font-weight: 700; line-height:1.5; letter-spacing: -0.025em;} .section06 .content_inner .content_wrap .contBox {margin-top: 8px; display: flex; gap:40px; align-items: flex-end;} .section06 .content_inner .content_wrap .contBox .ct {font-size:22px; font-weight: 500; line-height:1.5; letter-spacing: -0.025em; color:#666;} .section06 .content_inner .content_wrap .contBox .map {display: flex; align-items: center; gap:12px;} .section06 .content_inner .content_wrap .contBox .map a {display: block; width:40px; padding-top: 40px; height: 0; overflow: hidden; background:0 0 no-repeat; background-size:100% 100%;;} .section06 .content_inner .content_wrap .contBox .map a.naver {background-image:url('/resources/img/main/sec06_map01.svg')} .section06 .content_inner .content_wrap .contBox .map a.kakao {background-image:url('/resources/img/main/sec06_map02.svg')} .section06 .content_inner .btn_wrap {margin-top: 86px;} .section06 .content_inner .btn_wrap .btn {display: flex; align-items: center; width:550px; height:110px; padding: 0 40px; position:relative; gap:12px; background:#121D3C; border-radius: 20px; transition: all 0.25s;} .section06 .content_inner .btn_wrap .btn:hover {background:#26396C;} .section06 .content_inner .btn_wrap .btn .en {font-size:30px; font-weight: 500; font-family:'SUITE', 'SUIT', sans-serif; color:#fff;} .section06 .content_inner .btn_wrap .btn .ko {font-size:22px; font-weight: 500; color:#CFCFCF; position:relative; top: 3px;} .section06 .content_inner .btn_wrap .btn svg {position:absolute; right:66px; top: 50%; transform: translateY(-50%);} /* PC_작은해상도 */ @media screen and (min-width: 1025px) and (max-width: 1920px), screen and (min-width: 1025px) and (max-height: 1080px) { .section06 {background-image:url('/resources/img/main/sec06_bg_m.jpg');} .section06 .content_inner {padding:14.35dvh 9.25dvh;} .section06 .content_inner .header_wrap {padding-bottom: 8.61dvh;} .section06 .content_inner .header_wrap::after {bottom:4.16dvh; width:2.77dvh;} .section06 .content_inner .header_wrap .title {font-size:5.55dvh;} .section06 .content_inner .header_wrap .txt {margin-top: 1.2dvh; font-size:2.4dvh;} .section06 .content_inner .content_wrap {gap:6.48dvh;} .section06 .content_inner .content_wrap .item {} .section06 .content_inner .content_wrap .tit {font-size:2.4dvh;} .section06 .content_inner .content_wrap .contBox {margin-top: 0.74dvh; gap:3.7dvh;} .section06 .content_inner .content_wrap .contBox .ct {font-size:2.03dvh;} .section06 .content_inner .content_wrap .contBox .map {gap:12px;} .section06 .content_inner .content_wrap .contBox .map a {width:3.7dvh; padding-top: 3.7dvh;} .section06 .content_inner .content_wrap .contBox .map a.naver {} .section06 .content_inner .content_wrap .contBox .map a.kakao {} .section06 .content_inner .btn_wrap {margin-top: 7.96dvh;} .section06 .content_inner .btn_wrap .btn {width:50.92dvh; height:10.18dvh; padding: 0 3.7dvh; gap:1.11dvh; border-radius:1.85dvh;} .section06 .content_inner .btn_wrap .btn .en {font-size:2.77dvh;} .section06 .content_inner .btn_wrap .btn .ko {font-size:2.03dvh;} .section06 .content_inner .btn_wrap .btn svg {right:6.11dvh; width:2.87dvh;} } /* MOBILE */ @media screen and (max-width: 1024px) { .section06 {background-image:url('/resources/img/main/sec06_bg_m.jpg');} .section06 .content_inner {width:89.74%; padding:52px 20px 96px 40px;} .section06 .content_inner .header_wrap {padding-bottom: 64px;} .section06 .content_inner .header_wrap::after {bottom:32px; width:18px;} .section06 .content_inner .header_wrap .title {font-size:36px;} .section06 .content_inner .header_wrap .txt {margin-top: 8px; font-size:16px;} .section06 .content_inner .content_wrap {flex-direction: column; gap:20px;} .section06 .content_inner .content_wrap .item {} .section06 .content_inner .content_wrap .tit {font-size:18px;} .section06 .content_inner .content_wrap .contBox {margin-top:2px; display: block;} .section06 .content_inner .content_wrap .contBox .ct {font-size:14px;} .section06 .content_inner .content_wrap .contBox .map {margin-top: 12px; gap:10px;} .section06 .content_inner .content_wrap .contBox .map a {width:30px; padding-top: 30px;} .section06 .content_inner .content_wrap .contBox .map a.naver {} .section06 .content_inner .content_wrap .contBox .map a.kakao {} .section06 .content_inner .btn_wrap {margin-top: 40px; display: flex; justify-content: flex-end;} .section06 .content_inner .btn_wrap .btn {max-width:100%; width:290px; height:68px; padding: 0 24px; gap:7px; border-radius:12px;} .section06 .content_inner .btn_wrap .btn .en {font-size:18px;} .section06 .content_inner .btn_wrap .btn .ko {font-size:13px; top:2px;} .section06 .content_inner .btn_wrap .btn svg {right:26px;} } /* MOBILE_작은해상도 */ @media screen and (max-width: 1024px) and (max-height: 760px) { .section06 .content_inner {padding:6.95dvh 2.67dvh 12.83dvh 5.34dvh;} .section06 .content_inner .header_wrap {padding-bottom: 8.55dvh;} .section06 .content_inner .header_wrap::after {bottom:4.27dvh; width:2.4dvh;} .section06 .content_inner .header_wrap .title {font-size:4.81dvh;} .section06 .content_inner .header_wrap .txt {margin-top: 1.06dvh; font-size:2.13dvh;} } /********************************************* FOOTER_SECTION *********************************************/ .footer_section {} /* PC_작은해상도 */ @media screen and (min-width: 1025px) and (max-width: 1920px), screen and (min-width: 1025px) and (max-height: 1080px) { } /* MOBILE */ @media screen and (max-width: 1024px) { } /* MOBILE_작은해상도 */ @media screen and (max-width: 1024px) and (max-height: 760px) { } /********************************************* HERO CTA ::: 전화 / 방문예약 (2026-07-27 추가) - PC : 히어로(section01) 좌하단 알약 버튼 2개 - MOBILE : 하단 고정 바 (기존 .quick_fixed 가 모바일에서 display:none 이라 모바일 상시 CTA가 없던 공백을 메움) - 브랜드 네이비 #121D3C / 폰트 SUIT — 기존 디자인 시스템 준수 - 두 버튼 모두 solid 배경: 슬라이드마다 배경 밝기가 달라도 대비 확보 *********************************************/ .hero_cta {position:absolute; left:17.07%; bottom:18%; z-index:20; display:flex; align-items:center; gap:12px;} .hero_cta a {display:inline-flex; align-items:center; justify-content:center; gap:10px; height:60px; padding:0 32px; border-radius:99px; font-family:'SUIT', sans-serif; font-size:18px; font-weight:600; letter-spacing:-0.36px; white-space:nowrap; transition:all 0.15s; box-shadow:0 4px 20px rgba(0,0,0,0.18);} .hero_cta a svg {flex:0 0 auto;} .hero_cta .cta_tel {background:#fff; color:#121D3C;} .hero_cta .cta_tel .num {font-weight:700;} .hero_cta .cta_tel:hover {background:#f2f4f8; transform:translateY(-2px); box-shadow:0 8px 26px rgba(0,0,0,0.22);} .hero_cta .cta_visit {background:#121D3C; color:#fff;} .hero_cta .cta_visit:hover {background:#1c2b56; transform:translateY(-2px); box-shadow:0 8px 26px rgba(18,29,60,0.35);} .mobile_cta_bar {display:none;} /* PC_작은해상도 — 히어로 텍스트와 동일하게 dvh 스케일 */ @media screen and (min-width: 1025px) and (max-width: 1920px), screen and (min-width: 1025px) and (max-height: 1080px) { .hero_cta a {height:5.6dvh; min-height:48px; padding:0 2.1vw; font-size:1.7dvh;} .hero_cta a svg {width:1.9dvh; height:1.9dvh; min-width:16px; min-height:16px;} .hero_cta .cta_visit svg {width:2.1dvh; height:1.4dvh;} } /* MOBILE — 인라인 CTA 숨기고 하단 고정 바로 대체 */ @media screen and (max-width: 1024px) { .hero_cta {display:none;} .mobile_cta_bar {display:flex; position:fixed; left:0; right:0; bottom:0; z-index:1100; height:calc(58px + env(safe-area-inset-bottom)); padding-bottom:env(safe-area-inset-bottom); box-shadow:0 -4px 16px rgba(0,0,0,0.16);} .mobile_cta_bar a {flex:1 1 50%; display:flex; align-items:center; justify-content:center; gap:8px; font-family:'SUIT', sans-serif; font-size:16px; font-weight:600; letter-spacing:-0.32px;} .mobile_cta_bar .cta_tel {background:#fff; color:#121D3C;} .mobile_cta_bar .cta_visit {background:#121D3C; color:#fff;} /* 고정 바(58px)와 겹치는 요소 회피 */ .section01 .main_swiper .swiper-pagination {bottom:calc(4.54% + 64px);} #fp-nav {bottom:calc(9.25% + 64px);} .footer_section .footer_inner {padding-bottom:64px;} } /********************************************* 평형정보(Unit) / 단지·동호수 배치도 — 서브페이지 디자인 이식 (2026-08-07, temp_cyber.css·temp_contents.css 병용) *********************************************/ /* 흰 배경 섹션 구간에서 헤더를 흰바+검은글씨(서브페이지 톤)로 — main.js lightsec 토글 */ .temp_header_skin1.lightsec {background:#fff; box-shadow:0 1px 10px rgba(0,0,0,.07);} /* 일반 스크롤: 섹션 높이 자동 (fullpage autoScrolling:false) */ .content_section.unit_section, .content_section.dongho_section {height:auto; overflow:visible; background:#fff;} /* unit 섹션 상단 라벨 */ .unit_section .header_inner {position:relative; left:auto; top:auto; text-align:center; padding:90px 20px 50px; color:#121D3C; font-family:'SUITE','SUIT',sans-serif;} .unit_section .header_inner .title {font-size:40px; font-weight:700; line-height:1.1;} .unit_section .header_inner .txt {font-size:18px; color:#666; margin-top:12px; font-family:'Pretendard',sans-serif;} /* 서브 컨테이너 폭 재현 (.page_content 래퍼 없이 동작) */ .unit_section .page_container, .dongho_section .page_container {max-width:1100px; margin:0 auto; padding:0 20px 100px;} .unit_section .page_container img, .dongho_section .page_container img {max-width:100%;} .dongho_section .page_container {padding-top:90px;} .dongho_section .content_wrap {text-align:center;} /* unit_info 탭 전환 (Vue 동적렌더 대체) */ .unit_section .unit_content .unit_info {display:none;} .unit_section .unit_content .unit_info.on {display:block;} @media screen and (max-width:1024px) { .unit_section .header_inner {padding:50px 16px 30px;} .unit_section .header_inner .title {font-size:26px;} .unit_section .header_inner .txt {font-size:14px;} .unit_section .page_container, .dongho_section .page_container {padding:0 16px 60px;} .dongho_section .page_container {padding-top:50px;} } /* 푸터 FAQ (자주 묻는 질문) — AI검색 인용·접근성 (2026-08-07). 흰 카드로 감싸 배경 겹침에도 가독성 확보 */ .footer_faq {max-width:1100px; margin:0 auto 44px; padding:40px 44px; background:#fff; border:1px solid #ececec; border-radius:10px; box-shadow:0 4px 20px rgba(0,0,0,.05); text-align:left;} .footer_faq .faq_tit {font-size:20px; font-weight:700; color:#121D3C; margin-bottom:22px; font-family:'Pretendard',sans-serif;} .footer_faq dl {margin:0;} .footer_faq dt {font-size:15px; font-weight:600; color:#333; margin-top:18px; font-family:'Pretendard',sans-serif;} .footer_faq dt:first-of-type {margin-top:0;} .footer_faq dd {font-size:14px; color:#888; line-height:1.65; margin:6px 0 0; font-family:'Pretendard',sans-serif;} @media screen and (max-width:1024px) { .footer_faq {margin-bottom:32px; padding:28px 20px;} .footer_faq .faq_tit {font-size:17px; margin-bottom:16px;} }