595 lines
14 KiB
CSS
595 lines
14 KiB
CSS
@charset "UTF-8";
|
|
|
|
body:has(.container.sv.sw) header .header_inner {
|
|
width: min(1760px, calc(100% - 48px));
|
|
padding: 0;
|
|
}
|
|
|
|
header .header_inner .header_R {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
flex-wrap: nowrap;
|
|
gap: 0;
|
|
min-width: max-content;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
header .header_inner .header_R .language {
|
|
display: inline-flex !important;
|
|
align-items: center;
|
|
flex-wrap: nowrap !important;
|
|
flex-shrink: 0 !important;
|
|
width: max-content;
|
|
min-width: 74px;
|
|
white-space: nowrap !important;
|
|
writing-mode: horizontal-tb;
|
|
}
|
|
|
|
header .header_inner .header_R .language::before {
|
|
flex: 0 0 16px;
|
|
}
|
|
|
|
header .header_inner .header_R .language a {
|
|
display: inline-flex !important;
|
|
align-items: center;
|
|
white-space: nowrap !important;
|
|
flex: 0 0 auto !important;
|
|
writing-mode: horizontal-tb;
|
|
}
|
|
|
|
header .header_inner .header_R .language a:first-child::after {
|
|
flex: 0 0 auto;
|
|
}
|
|
|
|
/* 공통적용 - 페이지설정 */
|
|
::-webkit-scrollbar {
|
|
width: 12px;
|
|
height: 12px;
|
|
}
|
|
|
|
::-webkit-scrollbar-thumb {
|
|
background-color: #bbb;
|
|
background-clip: padding-box;
|
|
border: 2px solid transparent;
|
|
border-radius: 10px;
|
|
}
|
|
|
|
::-webkit-scrollbar-corner {
|
|
background-color: transparent;
|
|
}
|
|
|
|
/* 공통적용 - 텍스트에 stroke + 쉐도우 */
|
|
t {
|
|
color: #fff;
|
|
text-shadow: var(--text-stroke);
|
|
filter: drop-shadow(0 0 2px #000);
|
|
font-weight: 500;
|
|
}
|
|
t.t500 {
|
|
text-shadow: var(--text-stroke500);
|
|
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.4666666667));
|
|
}
|
|
t.t100 {
|
|
text-shadow: var(--text-stroke100);
|
|
filter: drop-shadow(0 0 2px rgba(0, 0, 0, 0.2));
|
|
}
|
|
t.t400 {
|
|
-webkit-text-stroke: 1px black;
|
|
color: #fff;
|
|
}
|
|
|
|
/* 공통적용 - 아이콘 관련 i */
|
|
i {
|
|
display: block;
|
|
background-size: contain;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
width: 40px;
|
|
aspect-ratio: 1/1;
|
|
position: relative;
|
|
}
|
|
i::after,
|
|
i::before {
|
|
position: absolute;
|
|
content: "";
|
|
}
|
|
i.arrow {
|
|
position: relative;
|
|
background-color: #fff;
|
|
}
|
|
i.arrow::after {
|
|
width: 30%;
|
|
aspect-ratio: 1/1;
|
|
top: 50%;
|
|
left: 50%;
|
|
border: 2px solid #000;
|
|
border-width: 0 2px 2px 0;
|
|
}
|
|
i.arrow.down::after {
|
|
transform: translate(-50%, -75%) rotate(45deg);
|
|
}
|
|
i.arrow.up::after {
|
|
transform: translate(-50%, -35%) rotate(-135deg);
|
|
}
|
|
i.arrow.right::after {
|
|
transform: translate(-70%, -50%) rotate(-45deg);
|
|
}
|
|
i.arrow.left::after {
|
|
transform: translate(-35%, -50%) rotate(135deg);
|
|
}
|
|
i.close::after,
|
|
i.close::before {
|
|
top: 50%;
|
|
left: 50%;
|
|
width: 50%;
|
|
height: 2px;
|
|
background-color: black;
|
|
}
|
|
i.close::after {
|
|
transform: translate(-50%, -50%) rotate(-45deg);
|
|
}
|
|
i.close::before {
|
|
transform: translate(-50%, -50%) rotate(45deg);
|
|
}
|
|
|
|
/* --- 화살표 */
|
|
/* --- 닫기 X */
|
|
/* 공통적용 - 자세히보기 팝업 popup_wrap */
|
|
|
|
.popup_wrap {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100vh;
|
|
background-color: rgba(0, 0, 0, 0.6666666667);
|
|
overflow: hidden;
|
|
z-index: 1000;
|
|
display: none;
|
|
}
|
|
.popup_wrap .btn_close {
|
|
--size-px: 64px;
|
|
width: var(--size-px);
|
|
height: var(--size-px);
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
top: 16px;
|
|
right: 24px;
|
|
}
|
|
.popup_wrap .btn_close i {
|
|
width: initial;
|
|
height: 100%;
|
|
_opacity: 0.8;
|
|
}
|
|
.popup_wrap .btn_close i::after,
|
|
.popup_wrap .btn_close i::before {
|
|
background-color: #fff;
|
|
}
|
|
.popup_wrap .btn_close:hover i {
|
|
opacity: 1;
|
|
}
|
|
.popup_wrap .popup_contents_wrap {
|
|
width: 100%;
|
|
height: 100%;
|
|
overflow: auto;
|
|
text-align: center;
|
|
-webkit-overflow-scrolling: touch; /* iOS 부드러운 스크롤 */
|
|
overscroll-behavior: contain; /* 바운스 효과 제한 */
|
|
}
|
|
.popup_wrap img {
|
|
padding: 80px 0;
|
|
width: 60%;
|
|
max-width: 920px;
|
|
min-width: 600px;
|
|
object-fit: cover;
|
|
object-position: top center;
|
|
}
|
|
|
|
.popup_wrap .flip_wrap {
|
|
position: relative;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
overflow: hidden;
|
|
height: auto;
|
|
top: 50%;
|
|
translate: 0 -50%;
|
|
}
|
|
.popup_wrap .flip_wrap .flipbook {
|
|
width: 1120px;
|
|
height: 792px;
|
|
overflow: hidden;
|
|
}
|
|
.popup_wrap .flip_wrap .flipbook::before {
|
|
content: "";
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 50%;
|
|
height: 100%;
|
|
background: linear-gradient(
|
|
90deg,
|
|
transparent 95%,
|
|
rgba(0, 0, 0, 0.0666666667) 100%
|
|
);
|
|
z-index: 1000;
|
|
}
|
|
.popup_wrap .flip_wrap .flipbook .page {
|
|
width: 560px;
|
|
height: 792px;
|
|
background-color: #fff;
|
|
}
|
|
.popup_wrap .flip_wrap .flipbook .page img {
|
|
width: 100%;
|
|
max-height: 100%;
|
|
height: auto;
|
|
object-fit: cover;
|
|
object-position: center;
|
|
padding: 0;
|
|
}
|
|
.popup_wrap .flip_wrap .flip-controls {
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
translate: -50% -50%;
|
|
width: 100%;
|
|
max-width: 1120px;
|
|
max-height: 792px;
|
|
height: 100%;
|
|
z-index: 1001;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
}
|
|
.popup_wrap .flip_wrap .flip-controls button {
|
|
width: 20%;
|
|
height: 100%;
|
|
position: relative;
|
|
}
|
|
.popup_wrap .flip_wrap .flip-controls button:hover::after {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: url(../../img/flipbook_corner.png) no-repeat bottom right/50px;
|
|
filter: drop-shadow(4px 15px 8px rgba(0, 0, 0, 0.6666666667));
|
|
}
|
|
.popup_wrap .flip_wrap .flip-controls button:hover::before {
|
|
content: "";
|
|
position: absolute;
|
|
bottom: 0;
|
|
right: 0;
|
|
width: 100%;
|
|
height: 200px;
|
|
background: linear-gradient(
|
|
105deg,
|
|
transparent 80%,
|
|
rgba(0, 0, 0, 0.4666666667) 100%
|
|
);
|
|
}
|
|
.popup_wrap .flip_wrap .flip-controls button:hover:first-child {
|
|
transform: scaleX(-1);
|
|
}
|
|
|
|
/* 공통 적용 - 인트로 제목 영역 */
|
|
section.intro .txt_box {
|
|
width: 100%;
|
|
margin-bottom: 2.08333%;
|
|
}
|
|
section.intro .txt_box .main_txt {
|
|
/* font-size: clamp(40px, 2.08333vw, 52px);*/
|
|
font-size: 52px;
|
|
line-height: 1.2;
|
|
}
|
|
|
|
section.intro .txt_box .eng_txt {
|
|
font-size: clamp(20px, 1.02vw, 24px);
|
|
font-size: 24px;
|
|
line-height: 1.2;
|
|
margin-bottom: 14px;
|
|
}
|
|
section.intro .txt_box .sub_txt {
|
|
font-size: clamp(16px, 0.8333vw, 20px);
|
|
font-size: 20px;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
/* 공통적용 - 중제목 영역 txt_box */
|
|
|
|
.txt_box {
|
|
text-align: center;
|
|
}
|
|
.txt_box p {
|
|
color: #fff;
|
|
font-weight: 700;
|
|
}
|
|
.txt_box.dark p:not(.eng_txt) {
|
|
color: #000;
|
|
}
|
|
.txt_box .eng_txt {
|
|
color: #00a6ff;
|
|
font-size: 20px;
|
|
line-height: 33px;
|
|
}
|
|
.txt_box .main_txt {
|
|
font-size: 40px;
|
|
}
|
|
.txt_box .sub_txt {
|
|
margin-top: 40px;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
}
|
|
|
|
.con_txt {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 40px;
|
|
font-size: 18px;
|
|
line-height: 180%;
|
|
}
|
|
|
|
.con_txt p {
|
|
color: rgba(0, 0, 0, 0.8);
|
|
word-break: keep-all;
|
|
text-wrap: balance;
|
|
}
|
|
|
|
.con_txt p b {
|
|
color: #000;
|
|
}
|
|
|
|
button.btn_more {
|
|
position: relative;
|
|
font-size: 18px;
|
|
font-weight: 700;
|
|
padding: 8px 0;
|
|
border-bottom: 2px solid rgba(0, 0, 0, 0.4);
|
|
letter-spacing: -0.06em;
|
|
width: max-content;
|
|
margin-top: 24px;
|
|
}
|
|
button.btn_more::after {
|
|
content: "";
|
|
width: 16px;
|
|
height: 16px;
|
|
display: inline-block;
|
|
background-image: url(../../img/ico_more.svg);
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: contain;
|
|
margin-left: 6px;
|
|
translate: 0 2px;
|
|
}
|
|
button.btn_more:hover {
|
|
color: var(--color-primary);
|
|
border-color: var(--color-primary);
|
|
}
|
|
button.btn_more:hover::after {
|
|
background-image: url(../../img/ico_more_hover.svg);
|
|
}
|
|
|
|
/* 공통적용 - 인트로 스크롤 박스 scroll_box */
|
|
.scroll_box {
|
|
width: max-content;
|
|
color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
gap: 24px;
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
translate: -50% 0;
|
|
font-size: 14px;
|
|
}
|
|
.scroll_box > div {
|
|
width: 2px;
|
|
height: 140px;
|
|
background-color: rgba(255, 255, 255, 0.2);
|
|
overflow: hidden;
|
|
}
|
|
|
|
.scroll_box > div::before {
|
|
content: " ";
|
|
display: block;
|
|
width: 100%;
|
|
height: 100%;
|
|
border-radius: 0 0 4px 4px;
|
|
background-color: #fff;
|
|
animation: scroll-down 2s infinite ease-in-out;
|
|
}
|
|
|
|
@keyframes scroll-down {
|
|
0% {
|
|
transform-origin: 50% 100%;
|
|
transform: scaleY(1);
|
|
}
|
|
50% {
|
|
transform-origin: 50% 100%;
|
|
transform: scaleY(0);
|
|
}
|
|
50.1% {
|
|
transform-origin: 50% 0;
|
|
transform: scaleY(0);
|
|
}
|
|
to {
|
|
transform-origin: 50% 0;
|
|
transform: scaleY(1);
|
|
}
|
|
}
|
|
/* 공통적용 - 체크박스 */
|
|
label.checkbox {
|
|
display: inline-flex;
|
|
gap: 12px;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
cursor: pointer;
|
|
}
|
|
label.checkbox input[type="checkbox"] {
|
|
display: block;
|
|
width: 16px;
|
|
height: 16px;
|
|
border-radius: 2px;
|
|
border: 1px solid rgba(0, 0, 0, 0.2);
|
|
background: #fff;
|
|
appearance: none;
|
|
}
|
|
label.checkbox input[type="checkbox"]:checked {
|
|
background-color: var(--color-primary);
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M13.3654 4.23423C13.5154 4.38425 13.5997 4.5877 13.5997 4.79983C13.5997 5.01196 13.5154 5.21541 13.3654 5.36543L6.96544 11.7654C6.81542 11.9154 6.61197 11.9997 6.39984 11.9997C6.18771 11.9997 5.98426 11.9154 5.83424 11.7654L2.63424 8.56543C2.48851 8.41455 2.40788 8.21247 2.4097 8.00271C2.41152 7.79295 2.49566 7.5923 2.64398 7.44397C2.79231 7.29565 2.99296 7.21151 3.20272 7.20969C3.41247 7.20787 3.61456 7.2885 3.76544 7.43423L6.39984 10.0686L12.2342 4.23423C12.3843 4.08425 12.5877 4 12.7998 4C13.012 4 13.2154 4.08425 13.3654 4.23423Z' fill='white'/%3E%3C/svg%3E");
|
|
background-size: 16px;
|
|
background-position: center;
|
|
}
|
|
label.checkbox span {
|
|
display: inline-flex;
|
|
gap: 4px;
|
|
align-items: center;
|
|
justify-content: flex-start;
|
|
font-size: 16px;
|
|
font-weight: 400;
|
|
line-height: 1.4;
|
|
letter-spacing: -0.32px;
|
|
}
|
|
label.checkbox span .en {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.blind {
|
|
text-indent: -9999px;
|
|
color: transparent;
|
|
font-size: 1px;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* --------------------------------- */
|
|
/* ! 인트로 */
|
|
/* --------------------------------- */
|
|
section.intro {
|
|
width: 100%;
|
|
height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: relative;
|
|
z-index: 1;
|
|
overflow: hidden;
|
|
background-repeat: no-repeat;
|
|
background-position: center;
|
|
background-size: cover;
|
|
}
|
|
|
|
section.intro .video_bg {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
section.intro .video_bg video {
|
|
width: 100%;
|
|
height: 100%;
|
|
object-fit: cover;
|
|
}
|
|
section.intro .txt_box .eng_txt {
|
|
color: #00a6ff;
|
|
}
|
|
|
|
.m_br {
|
|
display: none;
|
|
}
|
|
.pc_br {
|
|
display: block;
|
|
}
|
|
|
|
/* 아이콘 */
|
|
.ico_back {
|
|
width: 22px;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='20' viewBox='0 0 21 20' fill='none'%3E%3Cpath d='M3.14633 9.41169C2.99011 9.56796 2.90234 9.77988 2.90234 10.0009C2.90234 10.2218 2.99011 10.4337 3.14633 10.59L7.8605 15.3042C7.93737 15.3838 8.02933 15.4473 8.131 15.4909C8.23267 15.5346 8.34202 15.5576 8.45266 15.5586C8.56331 15.5595 8.67305 15.5384 8.77546 15.4965C8.87787 15.4546 8.97092 15.3928 9.04916 15.3145C9.12741 15.2363 9.18928 15.1432 9.23118 15.0408C9.27308 14.9384 9.29417 14.8287 9.29321 14.718C9.29225 14.6074 9.26926 14.498 9.22558 14.3963C9.18191 14.2947 9.11842 14.2027 9.03883 14.1259L5.74717 10.8342L16.783 10.8342C17.004 10.8342 17.216 10.7464 17.3723 10.5901C17.5285 10.4338 17.6163 10.2219 17.6163 10.0009C17.6163 9.77984 17.5285 9.56788 17.3723 9.4116C17.216 9.25532 17.004 9.16752 16.783 9.16752L5.74717 9.16752L9.03883 5.87585C9.19063 5.71868 9.27463 5.50818 9.27273 5.28968C9.27083 5.07119 9.18319 4.86218 9.02868 4.70767C8.87417 4.55316 8.66516 4.46552 8.44667 4.46362C8.22817 4.46173 8.01767 4.54572 7.8605 4.69752L3.14633 9.41169Z' fill='black'/%3E%3C/svg%3E");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 20px;
|
|
}
|
|
.ico_list {
|
|
width: 22px;
|
|
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='17' height='16' viewBox='0 0 17 16' fill='none'%3E%3Cpath d='M4.11719 8H10.1172M4.11719 5.5H10.1172M11.1172 5.5H12.1172M11.1172 8H12.1172M11.1172 10.5H12.1172M4.11719 10.5H10.1172M2.61719 2.5H13.6172V13.5H2.61719V2.5Z' stroke='black' stroke-linejoin='round'/%3E%3C/svg%3E");
|
|
background-position: center;
|
|
background-repeat: no-repeat;
|
|
background-size: 16px;
|
|
}
|
|
|
|
/* media query */
|
|
@media all and (max-width: 1400px) {
|
|
|
|
.map_list li{ font-size: 12px;}
|
|
|
|
.m_br {
|
|
display: block;
|
|
}
|
|
.pc_br {
|
|
display: none;
|
|
}
|
|
|
|
section.intro .txt_box .main_txt {
|
|
width: 95%; margin: 0 auto; font-size: clamp(32px, 7.6vw, 52px);
|
|
word-break: break-word;
|
|
}
|
|
|
|
section.intro .txt_box .eng_txt {
|
|
font-size: clamp(14px, 3.8888vw, 24px);
|
|
word-break: break-word;
|
|
}
|
|
section.intro .txt_box .sub_txt {
|
|
font-size: clamp(14px, 3.8888vw, 20px);
|
|
width: 95%;
|
|
margin: 0 auto;
|
|
word-break: break-word;
|
|
margin-top: 40px;
|
|
}
|
|
|
|
.txt_box .eng_txt {
|
|
color: #006aff;
|
|
font-size: clamp(12px, 3.3333vw, 20px);
|
|
line-height: 1.4;
|
|
margin-bottom: 8px;
|
|
}
|
|
.txt_box .main_txt {
|
|
font-size: clamp(24px, 6vw, 40px);
|
|
line-height: 1.4;
|
|
margin: 0 auto;
|
|
word-break: break-word;
|
|
}
|
|
.txt_box .sub_txt {
|
|
margin-top: 40px;
|
|
font-size: 16px;
|
|
line-height: 1.6;
|
|
}
|
|
|
|
button.btn_more {
|
|
font-size: clamp(12px, 3.33333vw, 18px);
|
|
}
|
|
button.btn_more::after {
|
|
min-width: 12px;
|
|
width: 3.33333vw;
|
|
max-width: 18px;
|
|
min-height: 12px;
|
|
height: 3.33333vw;
|
|
max-height: 18px;
|
|
vertical-align: baseline;
|
|
}
|
|
|
|
.popup_wrap img {
|
|
max-width: 600px;
|
|
width: 100%;
|
|
min-width: auto;
|
|
}
|
|
}
|
|
@media all and (max-width: 576px) {
|
|
.scroll_box > div {
|
|
width: 1px;
|
|
}
|
|
}
|