@import url('https://fonts.googleapis.com/css2?family=Lato:wght@100;300;400;700;900&display=swap');

/* 리셋 리스트 */
* {box-sizing: border-box}
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button{margin:0;padding:0;max-height:100000px;}
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{display:block;margin:0;padding:0;}
fieldset{border:0 none;vertical-align:top;}
dl,ul,ol,menu,li{list-style:none}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
input,select,textarea{vertical-align:middle;}
button{border:0 none;background-color:transparent;cursor:pointer}
button[type=submit]{outline:none;filter:chroma(color=#000000);}
table{border-collapse:collapse;border-spacing:0}
input:checked[type='checkbox']{-webkit-appearance:checkbox}
caption{visibility:hidden;overflow:hidden;width:1px;height:0;font-size:0;line-height:0;}
hr{display:none;}
legend{position:absolute;top:0;left:0;width:0;height:0;overflow:hidden;padding:0;visibility:hidden;font-size:0;line-height:0;}
th,td{white-space:-moz-pre-wrap;white-space:-pre-wrap;white-space:-o-pre-wrap;word-wrap:break-word;}
html { -webkit-text-size-adjust: none; font-size: 10px}
html, body {width:100%; height:100%; background-color: #000}
html.auto {height:100%; overflow:auto;}
html.overflow {height:100%; overflow:hidden;}
html, body { height:100%; top: 0 !important;}

input {border-radius: 0}

h1,h2,h3,h4,h5,h6 { font-weight:normal; }
img {max-width:100%; vertical-align:middle; border:none; outline:none; }
em, address {font-style:normal}
label {cursor:pointer}
/*form {clear:both}*/

video {border: none; outline: unset; -webkit-backface-visibility: hidden; -moz-backface-visibility: hidden; filter:contrast(101%); -webkit-filter:contrast(101%); background-color:transparent;}

/* 인트로 */
.intro_page { width: 100%; height: 100vh; display: flex; align-items: center; justify-content: center;  font-family: 'Pretendard Variable33'; background-color: #fff ; }
.intro_page .cont_box {width: calc(100% - 0px);height: calc(100% - 0px);position: relative;display: flex; }
.intro_page .cont_box .bg_img {position: absolute;left: 0; top:0; width: 100%; height: 100%; }
.intro_page .cont_box .bg_img img {position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-position: center; object-fit: cover; }
.intro_page .cont_box .bg_img .bg {position: absolute; left: 0; top: 0; background-color: #000; width: 100%; height: 100%; }
.intro_page .cont_box .cont {width: 25%; position: relative; transition-property: transform, opacity, width; transition-timing-function: ease-in-out; transition-duration: 1s; }
.intro_page.active .cont_box .cont:nth-child(1){transition-delay: 0s; }
.intro_page.active .cont_box .cont:nth-child(2){transition-delay: 0.2s; }
.intro_page.active .cont_box .cont:nth-child(3){transition-delay: 0.4s; }
.intro_page.active .cont_box .cont:nth-child(4){transition-delay: 0.6s; }
.intro_page .cont_box .cont:before {content: ""; position: absolute; left: 0px; top: 0px; width: calc(100% + 0px); height: calc(100% + 0px); background-color: rgba(0,0,0,0.65); z-index: 2; transition: opacity 0.3s ease-in-out; pointer-events: none; }
.intro_page .cont_box .cont + .cont {margin-left: 0px; }
.intro_page .cont_box .cont .video {position: relative; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.65); }
.intro_page .cont_box .cont .video > * {position: absolute; left: 0; top: 0; object-fit: cover; object-position: center; width: 100%; height: 100%; }
.intro_page .cont_box .cont .txt_box {position: absolute; left: 0; bottom: 6rem; text-align: center; color: #fff; width: 100%; 
 transform: translateY(3rem); transition: transform 0.3s ease-in-out; }
.intro_page .cont_box .cont .txt_box .desc {font-size: 1.5rem; font-weight: 700; }
.intro_page .cont_box .cont .txt_box .tit { font-family: "Cormorant Garamond", serif; font-weight: 600; font-size: 4.2rem; margin-top: 10px; }
.intro_page .cont_box .cont .txt_box .main_btn { margin-top: 4rem; opacity: 0; transition: opacity 0.3s ease-in-out; display: none; }

.intro_page .cont_box .cont:hover:before {opacity: 0; }
.intro_page .cont_box .cont:hover .txt_box {transform: unset; }
.intro_page .cont_box .cont:hover .txt_box .main_btn {opacity: 1; }

.intro_page .cont_box .logo { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); height: 3vw; z-index: 5; pointer-events: none; margin-left: 0px; }
.intro_page .cont_box .logo svg {width: auto; height: 100%; fill: #fff; }

.main_btn {overflow: hidden; position: relative;display: inline-flex;align-items: center;padding: 1rem 2rem;background-color: #fff;color: #000; 
 font-weight: 500;transition: opacity 1s ease-in-out, transform 1s ease-in-out; }
.main_btn::before {content: '';position: absolute;left: -1px;bottom: -1px; z-index: 0; width: calc(100% + 2px);height: calc(100% + 2px);
 background: transparent;box-shadow: inset 0px 0px 0px #000; display: block;-webkit-transition: all 0.4s cubic-bezier(.5, .24, 0, 1);transition: all 0.75s; }

.main_btn span {position: relative; z-index: 1; font-size: max(1.4rem, 12px); transition: 0.7s; }
.main_btn svg {position: relative; z-index: 1; height:1.4rem;margin-left: 1.5rem; transition: 0.7s; }
.main_btn .ico { position: relative; width: 2rem; height: 2rem; margin-left: 20px; 
 background: url('/data/skin/dualsonic/images/common/dual_ico_arrow.svg')center/contain no-repeat; transition: background 0.7s; z-index: 1; }

.intro_page.active .cont {pointer-events: none; transform: translateY(-130%); opacity: 0; }
.intro_page.active .logo svg {fill: #000; transition:fill 1s ease-in-out 0s; }


/* pop_up 컨트롤 */
.popup_slider_tab { display: none;}
.swiper-pagination { width: 20%!important ;}


/* 인트로 */
@media screen and (min-width: 769px) {
 .intro_page .cont_box .cont:hover{width: 40%; } 
}

@media screen and (max-width: 1240px) {
 .intro_page {background-color: #000; }
 .intro_page .cont_box {height: calc(100% - 50vh); width: calc(100% - 40px) ;}
 .intro_page .cont_box .cont:before {background-color: rgba(0,0,0,0.25); }
 .intro_page .cont_box .cont .video {padding-top: 75%; }
 .intro_page .cont_box .cont .txt_box {padding: 0 10px; word-break: keep-all; z-index: 3; transform: unset; bottom: 2rem; }
 .intro_page .cont_box .cont .txt_box .tit {font-size: 2.8vw; margin-top: 5px; }
}

@media screen and (max-width: 768px) {
 .designPopup.popup_slider  { transform: translate( 0%, 0) !important; }
 .intro_page {height: 100svh; }
 .intro_page .cont_box {flex-direction: column; height: calc(100svh - 30px); width: 450px; padding: 0 20px; max-width: 100%; }
 .intro_page .cont_box .cont {height: 25%; width: 100% ; }
 .intro_page .cont_box .cont + .cont {margin-left: 0; margin-top: 0px; }
 .intro_page .cont_box .cont:before {left: 0; top: 0; width: 100%; height: 100%; width: 100%; }
 .intro_page .cont_box .cont .video {padding-top: 0; }
 .intro_page .cont_box .cont .txt_box .tit {font-size: 24px; }
 .intro_page .cont_box .cont .video > * {object-position: top; }
 .intro_page .cont_box .cont .video > *.body_img {object-position: bottom; }
 .intro_page .cont_box .logo {display: none; }
}

@media screen and (max-width: 400px) {
 .intro_page .cont_box {flex-direction: column;height: calc(100svh - 0px);width: 100%; padding: 0 0px; max-width: 100%; }
 .intro_page .cont_box .cont + .cont {margin-top: 0px; }
 .intro_page .cont_box .cont:before {left: 0; top: 0; width: 100%; height: 100%; width: 100%; }
}

@media only screen and (max-width: 1280px) {
 /* pop_up 컨트롤 */
.designPopup.popup_slider  { transform: translate( 20%, 0) }
}
@media only screen and (min-width:3000px) {
 html {font-size: 11px}
}
@media only screen and (max-width:2600px) {
 html {font-size: 9.5px}
}
@media only screen and (max-width:2000px) {
 html {font-size: 9px}
}