@charset "utf-8";
@font-face {
  font-family: "Pretendard";
  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Thin.woff")
  format("woff");
  font-weight: 100;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Light.woff")
  format("woff");
  font-weight: 300;
  font-style: normal;
}
@font-face {
  font-family: "Pretendard";
  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Regular.woff")
  format("woff");
  font-weight: 400;
  font-style: normal;
}

@font-face {
  font-family: "Pretendard";
  src: url("https://fastly.jsdelivr.net/gh/Project-Noonnu/noonfonts_2107@1.1/Pretendard-Bold.woff")
  format("woff");
  font-weight: 900;
  font-style: normal;
}


html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font:inherit;vertical-align: baseline;background: transparent; box-sizing: border-box;}

a:link { text-decoration: none; }
a:hover{ text-decoration: none; }
a:visited { text-decoration: none;}
a:active { text-decoration: none;}

body {line-height: 1; background: #fff; color: #000;}
ol,ul { list-style:none; }
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary { display: block;}
nav ul { list-style: none;}
blockquote, q { quotes: none;}
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none;}
a { margin: 0; padding: 0; border: 0; font-size: 100%; vertical-align: baseline; background: transparent; color:#555}
ins { background-color: #ff9; color: #000; text-decoration: none;}
mark { background-color: #ff9; color: #000; font-style: italic; font-weight: bold;}
del { text-decoration: line-through;}
abbr[title], dfn[title] { border-bottom: 1px dotted #000; cursor: help;}
table { border-collapse: collapse; border-spacing: 0; }
hr { display: block; height: 1px; border: 0; border-top: 1px solid #cccccc; margin: 1em 0; padding: 0;}
/*caption { text-indent:-9999em; font-size:0; line-height:0;}*/
caption {width: 100%; height: 1px; color: transparent; overflow: hidden; position: relative;}
input, select { vertical-align: middle; font-family: inherit;}
button{ border: 0; padding: 0; margin: 0; background: transparent; }
input, textarea, select, button {font-family: inherit;}
table{font-size:inherit;}
pre,code,kbd,samp,tt{font-family:monospace; font-size:108%;line-height:100%;}
.content legend {overflow:hidden;visibility:hidden;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0}



/* Default Document Style */
html {font-size:62.5%; height: 100%;}
body {  
  margin: 0;
  padding: 0;
  border: none; 
  color:#000;
  font-size: 2.5rem;
  font-style: normal;       
  background: transparent;
  height: 100%;
  width: 100%;    
  line-height: 1.5;
  letter-spacing: -1px;
  font-weight: 400;
  font-family: 'Pretendard', 'Noto Sans KR', '맑은 고딕', 'Malgun Gothic', sans-serif;
  transform-origin:center center;
	word-break: keep-all;
}


* {box-sizing: border-box; margin:0; padding:0;}
img {vertical-align:top; border:0; margin:0; padding:0; max-width: 100%;}
span, a, strong, i, em {display: inline-block}
table {width: 100%; }
strong {font-weight: 900; }

/* skipToContent */
#skipToContent a {position:absolute;top:0px;left:0px;z-index:9999;width:100%;height:1px;margin-top:-1px;display:block;background-color:#3875c1;font-size:14px;font-weight:500;color:#fff;line-height:1;text-align:center;overflow:hidden;}
#skipToContent a:focus,
#skipToContent a:active {margin-top:0px;height:auto;padding:10px 0px;}

/*---------- Popup ----------*/
.popup-wrap { display: none; position: fixed; z-index: 9; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0, 0, 0, 0.5); color:#000;}
.popup-wrap .close-btn {position: absolute; top: 18px; right:20px; cursor: pointer; background: url('img/ico-close-b.png') no-repeat 50% 50%; width:30px;height:30px; background-size: 15px; text-indent: -9999px; z-index: 2}
.popup-wrap .popup-inner { background-color: #fefefe; position: absolute; top:0; left: 50%;  text-align: left; width: 95%; max-width: 750px; margin:5vh auto; transform: translateX(-50%);  border:1px solid #000; }


.popup-wrap .popup-top {background: #fff; position: relative; padding:20px;}
.popup-wrap .popup-top .popup-tit {font-size: 2rem; color:#000; font-weight: 800;}
.popup-wrap .focus-return { position: absolute; top:0; left: -999999px; opacity: 0;}
.popup-wrap .popup-con {padding:20px; line-height: 1.4}
.popup-wrap .popup-con .txt-box {margin:10px 0; font-weight: 600;}
.popup-wrap .popup-con .txt1 {margin-bottom: 15px; padding-left: 12px; position: relative; font-size: 1.5rem; }
.popup-wrap .popup-con .txt1:before {content:'*'; display: block; position: absolute; top:0; left: 0; color:#e73a33; font-size: 1.5rem; font-weight: 700;}
.popup-wrap .video-box {position: relative; padding-top: 56.4%;}
.popup-wrap .video-box iframe {position: absolute; top:0; left: 0; width: 100%; height: 100%;}
.popup-wrap .popup-alarm {padding-top:60px;}
.popup-wrap .popup-alarm p {text-align: center; margin-bottom: 10px;}
.popup-wrap .popup-alarm p:last-of-type {margin-bottom: 0;}

/*content*/
img.logo-txt {max-height: 50px; vertical-align: middle; padding:0 2px; position: relative; top:-2px}
img.logo-txt-s {max-height: 23px; vertical-align: middle; padding:0 2px; position: relative; top:-2px}
img.logo-txt-m {max-height: 43px; vertical-align: middle; padding:0 2px; position: relative; top:-2px}

body {background: #f8f8f8;}
.wrap {overflow: hidden}
.wrap .inner {max-width: 1670px; margin:0 auto; padding:0 20px; width: 100%;}
section {border-bottom: 1px solid #999; position: relative;}
.wrap h2 {font-size: 5.5rem; line-height: 1.3; font-weight: 300;}
.wrap h2 strong {color:#c70e2b;}
.main-visual {position: relative; }
.main-visual h1 {position: absolute; top:40px; left: 40px; z-index: 2; width: 7%}
.main-visual .inner {position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); text-align: right; z-index: 2}
.main-visual h2 {font-size: 10rem; color:#fff; line-height: 1.2; text-align: left; display: inline-block; font-weight: 100; letter-spacing: -2px; opacity: 0; position: relative; top:30px;}
.main-visual h2 strong {color:#fff;}
.main-visual h2 img {margin-top:70px;}
.main-visual-slide .slide {padding-top:24%;}
.main-visual-slide .slide .img {content: ''; display:block; width:100%; height:100%;  position: absolute; top:50%; left: 0; transform: translateY(-50%) scale(1.2); opacity:1; object-fit: cover;}
.main-visual-slide .slide1 .img {background: url(../img/main-visual1.jpg) no-repeat 50% 50%; background-size: cover}
.main-visual-slide .slide2 .img {background: url(../img/main-visual2.jpg) no-repeat 50% 50%; background-size: cover}
.main-visual-slide .slide2 .inner {text-align: left}
.main-visual-slide .slide2 .inner h2 {color:#000;}
.main-visual-slide .slide2 .inner h2 strong {color:#c70e2b;}
.main-visual-slide .slide2 br {display: none;}

.main-visual-slide .slide.slick-active  .img  {animation:mainVisBg 5s forwards; }
.main-visual-slide .slide.slick-active .inner  h2 {animation:mainVisTxt 1s .2s forwards; }
@keyframes mainVisBg {
  0% {transform: translateY(-50%) scale(1.2)}
  100% {transform: translateY(-50%) scale(1)}
}
/*
@keyframes mainVisBg2 {
  0% {transform: translate(-50%,-50%) scale(1.2)}
  100% {transform: translate(-50%,-50%) scale(1)}
}
*/
@keyframes mainVisTxt {
  0% {top:30px; opacity: 0;}
  100% {top:0; opacity: 1;}
}

/*slick dots*/
.slick-dots {text-align: center; position: absolute; bottom:4%; left: 0px; width: 100%;}
.slick-dots li {display: inline-block; margin:0 6px;}
.slick-dots li button {display: block; width: 12px; height:12px; border-radius: 100px; background: #fff; text-indent: -9999px; border:0; opacity: 0.5}
.slick-dots li.slick-active button {opacity: 1 }
@media all and (max-width:1280px){
	.slick-control.type-lg .slick-next,
	.slick-control.type-lg .slick-prev {width: 50px;  height: 50px;}
}
@media all and (max-width:768px){
	.slick-slider .slick-prev, .slick-slider .slick-next {width: 45px; height: 45px; background-size: 30px; }
}




.about {padding:120px 0;}
.about .inner {display: flex; justify-content: space-between; align-items: center;}
.about .txt-box {width: 48%}
.about .txt-box dl dt h2 {margin:70px 0 50px;}
.about .txt-box dl dt h2:after {content: ''; display: block; width: 50px; height: 3px; background: #d52833; margin-top:80px;}
.about .txt-box dl dt img {max-width:39%}
.about .txt-box dl dd p {font-size: 2.5rem; margin-bottom: 30px;}
.about .img-box {width: 48%; text-align: right}

.brand {padding:120px 0; display: flex; justify-content: space-between; align-items: center; height: 1190px;}
.brand .txt-box {width: 58%; margin:0 auto; text-align: center; padding-top:80px; background: url(../img/ico-quote.png)no-repeat 50% 0;}
.brand .txt-box p {font-size: 4.8rem; font-weight: 300; line-height: 1.6; padding:60px 0; letter-spacing: -1px;}
.brand .txt-box p strong {color:#d90a2b;}
.brand .img1 {position: absolute; top:100px; right: 0; width: 20%}
.brand .img2 {position: absolute; bottom:100px; left: 0; width: 20%}


.spec {padding:120px 0; background-image: linear-gradient(to bottom, #f6ebe3, #ed959a); }
.spec .inner > dl {text-align: center}
.spec .inner > dl dt { margin-bottom: 30px;}
.spec .inner > dl dd {font-size: 2.9rem; line-height: 1.6; font-weight: 300}
.spec-info {position: relative; text-align: left; display: flex; justify-content: space-between; padding:140px 0 120px 0; max-width: 1340px; margin:0 auto;}
.spec-info ul {width:34%; display: flex; flex-direction: column; justify-content: space-between}
.spec-info ul li {padding:40px 20px; border-bottom: 1px solid rgba(0,0,0,0.1); flex-grow: 1; display: flex; align-items: center;}
.spec-info dl dt {font-size: 1.6rem; margin-bottom: 20px; font-weight: 800; letter-spacing: 0;}
.spec-info dl dd {font-size: 2rem;}
.spec-info .spec-img {position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); max-width: 44%}
.spec-info .spec-img img {width: 100%}


.spec-etc ul {display: flex; justify-content: space-between; position: relative; z-index: 2}
.spec-etc ul li {width: 33%; background: #fff; padding:40px 20px; text-align: center}
.spec-etc ul li dl dt {font-size: 1.6rem; font-weight: 800; letter-spacing: 0;}
.spec-etc ul li dl dt:after {content: ''; display: block; width: 18px; height: 2px; background: #d52833; margin:25px auto;}
.spec-etc ul li dl dd {font-size: 2rem;}

.spec .btn-box {text-align: center; margin:70px 0 0 0}
.spec .btn-box .buy-btn {background: #000; border-radius: 100px; color:#fff; padding:30px 60px; font-size: 3rem; display: flex; align-items: center; max-width: fit-content; margin:0 auto; font-weight: 600; gap:15px;}
.spec .btn-box .buy-btn:after {content: ''; display: block; width: 13px; height: 13px; border-top:2px solid #fff; border-right: 2px solid #fff; transform: rotate(45deg);}
.spec .btn-box .buy-btn img {max-height: 30px;}


.promise {padding:120px 0;}
.promise h2 {text-align: center; margin-bottom: 80px;}
.promise ul {display: flex; justify-content: space-between;}
.promise ul li {width:31%; border:1px solid #999;}
.promise ul li img {width: 100%}
.promise ul li p {font-size: 3rem; padding:18px 15px; text-align: center;}

.video {border-bottom: 0;}
.video .inner {position: absolute; top:50%; left: 50%; transform: translate(-50%,-50%); z-index: 2}
.video .inner p {text-align: center; color:#fff;}
.video .inner p:first-of-type {font-size: 4.5rem; font-weight: 300; margin-bottom: 5%}
.video .inner p:last-of-type {font-size: 5.5rem; font-weight: 600}
.video .inner p:last-of-type img {margin-top:10px}
.video-box {position:relative; overflow: hidden; height: 780px}
.video-box iframe {position: absolute; top:50%; left: 50%; width: 200%; height: 200%; transform: translate(-50%,-50%)}

.footer {background: #131316; padding:60px 20px; text-align: center; border-bottom: 0;}
.footer p {font-size: 1.4rem; color:#999; text-transform: uppercase; margin-top:25px; letter-spacing: 0}

/*go top*/
.btn-gotop {width: 40px; height: 40px; position: relative;  background: rgba(0,0,0,0.2); border-radius:100px; position: fixed; bottom:20px; right: 20px; margin:0 auto; cursor: pointer; display: none;}
.btn-gotop:before {content: ''; display: block; border:6px solid transparent; border-bottom:9px solid #fff; position: absolute; top:8px; left: 14px;}
.btn-gotop:hover {opacity: 1;}

@media all and (max-width:1920px) {
   .wrap h2 {font-size: 2.9vw;}
    
    .brand {height: 63vw}
   .brand .txt-box {background-size:6% auto; padding-top:3vw;}
   .brand .txt-box p {font-size: 2.5vw; padding:4vw 0;}
    .brand .txt-box > img {max-width: 11% }
   .brand img.logo-txt-m {max-height: 2.3vw;}
    
    .main-visual h1 {top:2vw; left: 2vw;}
   .main-visual h2 {font-size: 5.2vw}
   .main-visual h2 img {margin-top:3vw; max-width: 40%}
    
   .about .txt-box dl dt h2 {margin:3.5vw 0 2.8vw}
   .about .txt-box dl dt h2:after {margin-top:3vw;}
   .about .txt-box dl dd p {font-size: 1.3vw; margin-bottom: 1.4vw;}
   .about .txt-box dl dd p img.logo-txt-s {max-height: 1.2vw;}
    
    .spec .inner > dl dd {font-size: 1.5vw;}
    .spec .inner > dl dt {margin-bottom: 1.3vw;}
    .spec-info {padding:7vw 0 5vw 0}
    .spec-info dl dt {font-size: 0.9vw; margin-bottom: 1.2vw}
    .spec-info dl dd {font-size: 1.1vw;}
    .spec-info dl dd img {max-width: 16vw;}
    .spec-info ul li {padding:2vw 1vw;}
    .spec-info .spec-img {max-width: 35%}
    
    .spec-etc ul li {padding:2vw 1vw;}
    .spec-etc ul li dl dt {font-size: 0.9vw;}
    .spec-etc ul li dl dd {font-size: 1.1vw;}
    .spec-etc ul li dl dt:after {margin:1.5vw auto;}
    
    .spec .btn-box {margin:5vw 0 0 0}
    .spec .btn-box .buy-btn {padding:1.5vw 4vw; font-size: 1.5vw; gap:1vw;}
    .spec .btn-box .buy-btn:after {width: 0.7vw; height: 0.7vw;}
    .spec .btn-box .buy-btn img {max-height: 1.6vw;}
    
    .promise h2 {margin-bottom: 4vw;}
    .promise h2 img.logo-txt {max-height: 2.6vw;}
    .promise ul li p {font-size: 1.5vw;}
    
    .video .inner p:first-of-type {font-size:2.5vw;}
    .video .inner p:last-of-type {font-size: 3vw;}
    .video .inner p:last-of-type img {max-width: 16%}
    
    .footer img {max-width: 11%;}
    .footer p {font-size: 0.7vw; margin-top:1.7vw;}
    
    .footer {padding:3vw 1vw;}
}
@media all and (max-width:1800px) {
    .wrap .inner {padding:0 5%}
    html {font-size:60.5%; }
    
}
@media all and (max-width:1200px) {
    .wrap .inner {padding:0 10%}
    .video-box {height: 40vw;}
    
    .about,
    .spec,
    .promise {padding:100px 0;}
    
    
    
    .about .txt-box dl dd p {font-size: 1.4rem;}
    .about .txt-box dl dd p img.logo-txt-s {top:0; max-height: 1.4vw;}
    
    
}
@media all and (max-width:1200px) {
    
}
@media all and (max-width:1000px) {
    .wrap h2 {font-size:4vw}
    
    .wrap .inner {padding:0 8%;}
    
    .main-visual h2 {font-size:6vw}


    .about .txt-box dl dt h2:after {width:30px; height: 2px; }
    .about .txt-box dl dd p {font-size: 1.6vw; }
    .about .txt-box dl dd p img.logo-txt-s {max-height: 1.2vw;}
    
    
    .brand {height: 80vw;}
    .brand .txt-box p {font-size: 2.5vw;}
    .brand img.logo-txt-m {max-height: 2.3vw;}
    

    .spec .inner > dl dd {font-size: 2vw;}
    .spec-info {padding:7vw 0 5vw 0}
    .spec-info dl dt {font-size:1.5vw;}
    .spec-info dl dd {font-size: 1.8vw;}
    .spec-etc ul li dl dt {font-size: 1.5vw;}
    .spec-etc ul li dl dd {font-size: 1.8vw;}
    

    .promise h2 img.logo-txt {max-height: 3vw;}
    .promise ul li p {font-size: 1.8vw;}
    
    .video .inner p:first-of-type {font-size:2.8vw;}
    .video .inner p:last-of-type {font-size: 4vw;}
    .video .inner p:last-of-type img {max-width: 16%}
    
    .footer img {max-width: 11%;}
    .footer p {font-size: 0.7vw;}
    
    
}
@media all and (max-width:768px) {
    
    .spec .btn-box {margin:5vw 0 0 0}
    .spec .btn-box .buy-btn {padding:2vw 4.5vw; font-size: 3vw; gap:1vw;}
    .spec .btn-box .buy-btn:after {width: 1.2vw; height: 1.2vw;}
    .spec .btn-box .buy-btn img {max-height: 3vw;}
}

@media all and (max-width:680px) {
    .main-visual h1 {top:20px; left: 20px;}
    
    .main-visual-slide .slide1 .img {background: url(../img/main-visual1-mo.jpg) no-repeat 50% 50%; background-size: cover}
    .main-visual-slide .slide2 .img {background: url(../img/main-visual2-mo.jpg) no-repeat 50% 50%; background-size: cover}
    .main-visual-slide .slide {padding-top:50%; background: #fe8f98;}
    .main-visual-slide .slide2 {padding-top:50%; background: #f0eef1;}
    .main-visual-slide .slide2 br {display: inline-block}
    
    .main-visual .inner {position: relative; top:0; left: 0; transform: none; text-align: center !important;}
    .main-visual-slide .slide .img {position: relative; top:inherit; padding-top:100%; transform: scale(1.2)}
    .main-visual-slide .slide {padding-top:12vw; min-height: max-content;} 
    .main-visual-slide .slide h2 {text-align: center; font-size: 10vw;}
    .main-visual h2 img {margin:5vw auto;}
    
    .main-visual h1 {top:4vw; left: 4vw; width:10%}
    
    @keyframes mainVisBg {
      0% {transform: scale(1.2)}
      100% {transform:scale(1)}
    }
    @keyframes mainVisTxt {
      0% {top:30px; opacity: 0;}
      100% {top:0; opacity: 1;}
    }
    
    
    .about .inner {display: block;}
    .about .txt-box {width:100%}
    .about .img-box {width:100%}
    
    .about .txt-box dl dd p{font-size: 3.5vw;}
    .about .txt-box dl dd p br {display: none;}
    .about .txt-box dl dd p img.logo-txt-s {max-height: 3.5vw;}
    
    .wrap h2 {font-size: 8vw;}
    .about .txt-box {margin-bottom: 8vw;}
    .about .txt-box dl dt h2:after {margin:8vw 0}
    
    .spec .inner > dl dt {margin-bottom: 3.3vw;}
    .spec .inner > dl dd {font-size: 3.5vw;}
    
    .brand {height: 145vw;}
    .brand .txt-box {width:100%; padding-top:6vw; background-size: 6vw auto;}
    .brand .txt-box p {font-size: 4.2vw; padding:5vw 0;}
    .brand .img1 {top:10vw; width: 25% }
    .brand .img2 {bottom:10vw; width: 25%}
    .brand img.logo-txt-m {max-height: 3.2vw}
    
    .about, .spec, .promise {padding:15vw 0}
    
    .spec-info {padding:5vw 0vw;}
    .spec-info .spec-img {max-width: 50%}
    .spec-info ul {width:29%}
    .spec-info ul li {padding:4vw 1vw;}
    .spec-etc ul li dl dt,
    .spec-info dl dt {font-size: 2.5vw;}
    .spec-etc ul li dl dd,
    .spec-info dl dd {font-size: 3vw;}
    .spec-info dl dd img {max-width:90%}
    .spec-etc ul li dl dt:after {margin:3vw auto;}
    .spec-info dl dt {margin-bottom: 3vw;}
    
    .spec-etc ul{display: block;}
    .spec-etc ul li {width:100%; margin-bottom: 2vw; padding:4vw 1vw;}
    .spec-etc ul li dl dt:after {width:3vw;}
    
    .spec .btn-box {margin:9vw 0 0 0}
    .spec .btn-box .buy-btn {padding:4vw 10vw; font-size: 4vw; gap:1vw;}
    .spec .btn-box .buy-btn:after {width: 1.2vw; height: 1.2vw;}
    .spec .btn-box .buy-btn img {max-height: 4vw;}
    
    .promise h2 {margin-bottom: 6vw;}
    .promise h2 img.logo-txt {max-height: 7.2vw}
    .promise ul {display: block;}
    .promise ul li {width:100%; margin-bottom: 5vw;}
    .promise ul li p {font-size: 4.5vw; padding:4.5vw;}
    
    .video-box {height: 100vw;}
    .video .inner p:first-of-type {font-size: 5vw;}
    .video .inner p:last-of-type {font-size: 7vw;}
    .video .inner p:last-of-type img {max-width: 30%}
    
    .footer {padding:5vw 1vw;}
    .footer img {max-width: 20%}
    .footer p {font-size: 1.7vw; margin-top:3vw;}
    
    .btn-gotop {bottom: 10px; right: 10px; transform: scale(0.8)}
    
    
    
    
}