/* common */
/* font-family */
.pretendard {font-family: Pretendard;}
.baskerville {font-family: Baskervville, serif;}
.poppins {font-family: Poppins, serif;}

/* font-weight */
.fw_300 {font-weight: 300;}
.fw_400 {font-weight: 400;}
.fw_500 {font-weight: 500;}
.fw_600 {font-weight: 600;}
.fw_700 {font-weight: 700;}

/* padding-left */
.pl11 {padding-left: 0.57vw;}
.pl16 {padding-left: 0.83vw;}
.pl32 {padding-left: 1.67vw;}

/* margin */
.mb16 {margin-bottom: 0.83vw;}

/* 별표 */
.star {font-size: 20px; color: #FF0000;}

/* 맨위 버튼 */
.goTop {position: fixed; right: 0; bottom: 0; width: 3.125vw; height: 3.125vw; z-index: 999; display: none;}

@keyframes wheelMotion {
  from {
      transform: translateY(0)
  }
  to {
      transform: translateY(50%)
  }
}

@keyframes wheelMove {
  from {
      transform: translate(-50%,-100%)
  }
  to {
      transform: translate(-50%,00%)
  }
}

/* 플로팅 배너 */
#FloatingBtn{position:fixed;right:0;bottom:0;margin:auto 4.17vw 2.08vw auto;width:6.25vw;height:6.25vw;z-index:999;opacity:1;transition:1s all}
#FloatingBtn.on{opacity:0;transition:1s all}



/* 공통 */
section {width: 100%; height: 100vh; background-size: cover;}
section .contWrap {height: 100%; padding: 6.25vw 8.33vw;}
section .contWrap .tit p {margin-bottom: 1.04vw; font-size: 3.39vw; letter-spacing: -1.3px;}
section .contWrap .tit p:last-of-type{margin-bottom: 0;}

/* header */
#header {position: fixed; left: 50%; top: 1.56vw; display: block; width: 496px; padding: 12px 16px; z-index: 999; background: rgba(255,255,255,0.5); transform: translateX(-50%); box-shadow: 0 4px 20px 0px rgba(0,0,0,0.16); backdrop-filter: blur(15px); border-radius: 100px; transition: all 1s;}
#header.hidden {display: none; transition: all 1s;}
#header .gnb {display: flex; align-items: center; height: 42px;}
#header .gnb li a{display: block; width: 100%; height: 100%; padding: 12px 20px; font-size: 15px; border-radius: 50px; color:#000; letter-spacing: -0.3px;}
#header .gnb li.on a {background: linear-gradient(106deg, #60C7FF -9.88%, #00A5FF 109.88%); color: #fff;}

#header1 { position: fixed; left: 0; top: 0; display: flex; justify-content: center; align-items: center; width: 100%; height: 3.33vw; border-bottom: 1px solid #E2E2E2; background: #fff; z-index: 99;}
#header1 .logo a {display: block; width: 4.38vw;}

#scrollCont{width:100vw;height:100vh;overflow:hidden;overflow-y:auto;}
#scrollCont .container {position: relative;width: 100%;height: 100vh;}
.noScroll{position:fixed;top:0;left:0;width:100vw;height:100vh;z-index:9999;opacity:0}

/* main */
#secMain {position:relative;width:100vw;height:100vh;}
#secMain .contWrap{padding:0}
#secMain .contWrap .sound {position: absolute; right: 2.86vw; top: 2.86vw; z-index: 10; transition: all 1s; cursor: pointer;}
#secMain .contWrap .sound.on {opacity: 0; transition: all 1s;}
#secMain .contWrap .videoWrap{position:relative;width:100%;height:100vh;overflow:hidden;margin:0 auto}
#secMain .contWrap .videoWrap .videoBox{position:absolute;top:50%;left:50%;width:100vw;height:100vh;padding:0;overflow:hidden;transform:translate(-50%,-50%)}
#secMain .contWrap .videoWrap .videoBox.on{position:absolute;width:calc(100vw - 3.64vw);height:calc(100vh - 3.64vw);margin:0 auto;padding:0; overflow:hidden; border-radius:1.04vw;transition:1s all}
#secMain .contWrap .videoWrap .videoBox video{position:absolute;left:50%;top:50%;width:100%;transform:translate(-50% ,-50%);z-index:-1; border-radius:1.04vw;}

@media screen and (max-aspect-ratio:1280/720){
  #byRyzn #kvBox .sec_wrap .bg_video .video_box video{width:auto;height:100vh}
}

#secMain .contWrap .scroll {position: absolute; left: 50%; bottom: 6.56vw;  display: flex; align-items: center; gap: 17px; transform: translateX(-50%); transition: all 1s;}
#secMain .contWrap .scroll.on {opacity: 0; transition: all 1s;}
#secMain .contWrap .scroll .scrollTxt p {font-size: 20px; color: #fff;}
#secMain .contWrap .scroll .scrollBox {position: relative; width: 28px; height: 44px;}
#secMain .contWrap .scroll .scrollBox span {position: absolute; top: 50%; left: 50%; width: 4px; transform: translate(-50%, -90%); animation: wheelMove 1s ease-in infinite alternate;}

/* sec01 */
#sec01 {position: relative; width: 100%; height: 74.36vw; background: url('../images/sec01Bg.jpg') no-repeat top center; background-size: cover; overflow: hidden;}
#sec01 .logo {position: absolute; left: 2.92vw; top: 2.6vw; width: 8.75vw; height: auto;}
#sec01 .contWrap {position: relative; display: flex; width: 100%; height: 100vh; padding: 14.58vw 14.58vw 0;}
#sec01 .txtWrap {position: relative; width: 100%; height: 27.14vw;}
#sec01 .txtWrap p {position: relative; font-size: 3.39vw; color: #11446C; margin-bottom: 2.08vw; opacity: 0; transform: translateY(10%);}
#sec01 .txtWrap .txtBox {opacity: 0; transform: translateY(10%);}
#sec01 .txtWrap .txtBox p{ font-size: 1.77vw; margin-bottom: 1.04vw; opacity: 1;}
#sec01 .txtWrap .txtBox02 p:last-of-type {margin-bottom: 2.08vw;}
#sec01 .txtWrap span.line {position: absolute; left: 0.57vw; top: 3.39vw; width: 2px; background: #11446C;}
#sec01 .scroll {position: absolute; left: 50%; bottom: 3%; display: flex; align-items: center; gap: 17px; transform: translate(-50%, -50%); transition: all 1s; opacity: 1; z-index: 10;}
#sec01 .scroll.on {opacity: 0; transition: all 1s;}
#sec01 .scroll .scrollTxt p {font-size: 20px; color: #11446C;}
#sec01 .scroll .scrollBox {position: relative; width: 28px; height: 44px;}
#sec01 .scroll .scrollBox span {position: absolute; top: 50%; left: 50%; width: 4px; transform: translate(-50%, -90%); animation: wheelMove 1s ease-in infinite alternate;}


/* sec02 */
#sec02 {position: relative; width: 100%; height: 47.71vw; overflow: hidden;}
#sec02 .contWrap {display: flex; justify-content: space-between; align-items: center; width: 100%; height: 100%; padding: 0;}
#sec02 .contWrap .leftBox,
#sec02 .contWrap .rightBox {width: 50%; height: 100%;}
#sec02 .contWrap .leftBox .videoBox{position: absolute; width: 100%; height: 100%; left: 0; top: 0;}
#sec02 .contWrap .leftBox .videoBox video {width: 101%; height: 100%; object-fit: cover;}
#sec02 .contWrap .rightBox {display: flex; justify-content: center; align-items: center;}
#sec02 .contWrap .rightBox p {margin-bottom: 20px; font-size: 3.38vw; letter-spacing: -1.3px;}
#sec02 .contWrap .rightBox p:last-of-type {margin-bottom: 0;}


/* sec03 */
#sec03 {height: auto;}
#sec03 .contWrap {display: flex; padding: 0;}
#sec03 .contWrap .conBox {position: relative; width: 50%; ;} 
#sec03 .contWrap .left{padding: 4.17vw 0 2.08vw 8.33vw;}
#sec03 .contWrap .left .tit {margin: 2.08vw 0 5.2vw;}
#sec03 .contWrap .left strong {display: block; margin-bottom: 1.25vw; font-size: 3.39vw;}
#sec03 .contWrap .left p {font-size: 1.77vw;} 

#sec03 .contWrap .left .txtWrap {display: flex; flex-direction: column; align-items: flex-end; gap: 1.67vw; margin: 7.81vw 0 7.6vw;}
#sec03 .contWrap .left .txtWrap .txt {padding: 1.15vw 1.86vw; box-shadow: 0 2px 20px 0px rgba(0,0,0,0.08); border-radius: 100px 0 100px 100px; opacity: 0; background: #fff;}
#sec03 .contWrap .left .txtWrap .txt p{font-size: 1.25vw; letter-spacing: -0.48px;}
#sec03 .contWrap .left .txtWrap .txt p span{font-size: 1.25vw; color: #00A5FF; letter-spacing: -0.48px;}

#sec03 .contWrap .left .inforTxt {display: flex; flex-direction: column; gap: 4px;}
#sec03 .contWrap .left .inforTxt p {font-size: 0.68vw; color: #9F9F9F; line-height: 1vw;}
#sec03 .contWrap .left .inforTxt ul {display: flex; flex-direction: column; gap: 4px;}
#sec03 .contWrap .left .inforTxt ul li {position: relative; padding-left: 0.94vw;}
#sec03 .contWrap .left .inforTxt ul li::before {content: ""; position: absolute; left: 0.42vw; top: 0.36vw; width: 3px; height: 3px; background: #9f9f9f; border-radius: 50%;}

#sec03 .contWrap .right {padding: 4.17vw 4.17vw 2.6vw;}
#sec03 .contWrap .right .rightWrap {display: flex; flex-direction: column; gap: 1.56vw;}
#sec03 .contWrap .right .rightWrap .imgBox {position: absolute; bottom: 0; width: 34.53vw;}
#sec03 .contWrap .right .rightWrap .imgBg {position: absolute; bottom: 0; right: 0; width: 67.6vw; z-index: -1;}



/* sec04 */
#sec04 {background: url('../images/sec04Bg.jpg') no-repeat center center; background-size: cover;}
/* sec05 */
#sec05 {width: 100%; height: 100vh; background: #fff; overflow: hidden;}
#sec05 .contWrap {position: relative; height: 100%; padding: 5.2vw 8.44vw 0;}
#sec05 .contWrap .secTit p {font-size: 3.39vw;}
#sec05 .contWrap .pdBox {position: absolute; top: 60%; right: -21%; z-index: 1; opacity: 0; transform: translateY(-50%);}
/* #sec05 .contWrap .pdBox02 {top: 63%;} */
/* #sec05 .contWrap .pdBox03 {top: 30.8%;} */
#sec05 .contWrap .pdBox01 .pdImg{width: 47.14vw;}
#sec05 .contWrap .pdBox02 .pdImg{width: 36.61vw;}
#sec05 .contWrap .pdBox03 .pdImg{width: 21.09vw;}
#sec05 .contWrap .pdInfo {position: absolute; left: 50%; top: 60%; transform: translate(-50%, -50%); width: 100%;}
#sec05 .contWrap .pdInfo .pdWrap .textBox {position: absolute; left: 50%; top: 55%; display: flex; gap: 5.2vw; height: 14.06vw; padding-top: 1.56vw; border-top: 2px solid #000; transform: translate(-50%, -50%); opacity: 0; }
#sec05 .contWrap .pdInfo .pdWrap .pdTit p{font-size: 1.77vw;}
#sec05 .contWrap .pdInfo .pdWrap .pdTxt p {font-size: 1.04vw; line-height: 2.08vw; letter-spacing: -0.4px;}
#sec05 .contWrap .pdInfo .pdWrap .pdTxt p span {display: inline-block; margin-right: 0.3vw;}
#sec05 .contWrap .pdInfo .pdWrap .pdTxt p.padding {padding-left: 4.17vw;}
/* sec06 */
#sec06 {background: url('../images/sec06Bg.jpg') no-repeat top center; background-size: cover;}

/* sec07 */
#sec07 {height: auto;}
#sec07 .contWrap {display: flex; flex-direction: column; gap: 4.17vw; }
#sec07 .contWrap .tit {text-align: center;}
#sec07 .contWrap .tit strong {display: block; margin-bottom: 1.25vw; font-size: 3.39vw; }
#sec07 .contWrap .tit p {font-size: 1.04vw; letter-spacing: -0.4px;}
#sec07 .contWrap .tit p:first-of-type {margin-bottom: 0.5vw;}

#sec07 .contWrap .formWrap {display: flex; flex-direction: column; gap: 1.88vw; width: 100%; max-width: 62.5vw; margin: 0 auto;}
#sec07 .contWrap .formWrap .row {display: flex; gap: 2.08vw;}
#sec07 .contWrap .formWrap .row .rowCon {width: 50%;}
#sec07 .contWrap .formWrap .row .rowCon p {font-size: 1.04vw; margin-bottom: 0.83vw;}
#sec07 .contWrap .formWrap .row .rowCon span {display: inline-block; vertical-align: top;}
#sec07 .contWrap .formWrap .row .rowCon p.salesTxt{margin-top: 0.21vw; margin-bottom:0;font-size: 0.78vw; color: #666; line-height: 1.2vw; letter-spacing: -0.3px;}
#sec07 .contWrap .formWrap .row .rowCon.rowConDown {padding-right: 1.04vw;}

#sec07 .contWrap .formWrap .row .rowCon .email,
#sec07 .contWrap .formWrap .row .rowCon .tel {display: flex; gap: 0.42vw;}
#sec07 .contWrap .formWrap .row .rowCon .email input,
#sec07 .contWrap .formWrap .row .rowCon .email select {width: 9.38vw; padding: 0.94vw 0.73vw;}
#sec07 .contWrap .formWrap .row .rowCon .email .emailWrite {display: flex; align-items: center; gap: 8px;}
#sec07 .contWrap .formWrap .row .rowCon .email .emailWrite span {font-size: 0.89vw;}
#sec07 .contWrap .formWrap .row .rowCon .tel {align-items: center;}
#sec07 .contWrap .formWrap .row .rowCon .tel input {width: 33.33%; text-align: center;}
#sec07 .contWrap .formWrap .row .rowCon .tel span {width: 0.63vw; height: 1px;background: #000; }


#sec07 .contWrap .formWrap .row select {background: url('../images/arrowDown.svg') no-repeat 96% 50%;}
#sec07 .contWrap .formWrap .row .email select {background: url('../images/arrowDown.svg') no-repeat 92% 50%;}

#sec07 .contWrap .formWrap .row input[type="text"],
#sec07 .contWrap .formWrap .row select {width: 100%;}
#sec07 .contWrap .formWrap .row input::placeholder {color: #9F9F9F; font-size: 0.89vw; letter-spacing: -0.4px;}
#sec07 .contWrap .formWrap .row input:focus,
#sec07 .contWrap .formWrap .row select:focus {border: 1px solid #00A5FF;}
#sec07 .contWrap .formWrap .row input,
#sec07 .contWrap .formWrap .row select {padding: 0.94vw 1.04vw; font-size: 0.89vw; letter-spacing: -0.4px; border: 1px solid #E2E2E2; border-radius: 0.42vw;  font-family: 'Pretendard';}

#sec07 .contWrap .formWrap .agreeWrap {margin-bottom: 2.08vw;}
#sec07 .contWrap .formWrap .agreeWrap p { font-size: 1.04vw; letter-spacing: -0.4px;  }
#sec07 .contWrap .formWrap .agreeWrap .agreeTxt {margin: 0.83vw 0; padding: 1.25vw 1.67vw; background: #F6F6F6; border-radius: 0.52vw;}
#sec07 .contWrap .formWrap .agreeWrap .agreeTxt p,
#sec07 .contWrap .formWrap .agreeWrap .agreeTxt ul li{font-size: 0.78vw; line-height: 1.2vw; letter-spacing: -0.3px;}
#sec07 .contWrap .formWrap .agreeWrap .agreeTxt ul {margin-top: 1.3vw;}
#sec07 .contWrap .formWrap .agreeWrap .agreeTxt ul li {position: relative; padding-left: 1.2vw;}
#sec07 .contWrap .formWrap .agreeWrap .agreeTxt ul li::before {content: ''; position: absolute; left: 0.5vw; top: 50%; width: 3px; height: 3px; background: #000; border-radius: 50%; transform: translateY(-50%);}
#sec07 .contWrap .formWrap .agreeWrap .agreeBox label{display: flex; gap: 0.52vw;}
#sec07 .contWrap .formWrap .agreeWrap .agreeBox input[type="checkbox"]{width: 1.25vw; height: 1.25vw; background: url('../images/checkBox.png')no-repeat center center; background-size: cover;}
#sec07 .contWrap .formWrap .agreeWrap .agreeBox input[type="checkbox"]:checked {width: 1.25vw; height: 1.25vw; background: url('../images/checkBoxCk.png')no-repeat center center; background-size: cover;}
#sec07 .contWrap .formWrap .btnBox {display: flex; justify-content: center;}
#sec07 .contWrap .formWrap .downBtn { padding: 0.83vw 1.25vw; background: linear-gradient(06deg, #60C7FF -9.88%, #00A5FF 109.88%); border-radius: 2.92vw; font-size: 1.04vw; color: #fff;}


/* footer */
#footer {padding: 4.17vw 0;}
#footer .footerWrap {display: flex; justify-content: center; align-items: flex-start; gap: 4.32vw;}
#footer .footerWrap a, #footer .footerWrap p {font-size: 0.89vw; letter-spacing: -0.34px;}
#footer .footerWrap p {line-height: 1.51vw;}
#footer .footerWrap .ftLeft {width: 8.18vw;}
#footer .footerWrap .ftRight ul {display: flex; flex-direction: column; gap: 1.25vw;}


/* layerpop */
#layerPop {position: fixed; left: 0; top: 0; display: none; width: 100%; height: 100vh; background: #fff;}
#layerPop .closeBtn {position: absolute; right: 3.39vw; top: 3.39vw;}
#layerPop .popWrap {width: 100%; height: 100%; padding: 8.95vw 14.9vw;}
#layerPop .popWrap .popTit {text-align: center; margin-bottom: 3.33vw;}
#layerPop .popWrap .popTit p{font-size: 1.77vw; line-height: 2.86vw; letter-spacing: -0.68px;}
#layerPop .popWrap .popTit p span {font-size: 1.77vw; line-height: 2.86vw; letter-spacing: -0.68px;color: #00A5FF;}
#layerPop .popWrap .popCont {display: flex; justify-content: center; align-items: center; gap: 7.5vw;}


/* 개인정보 처리방침 */
.privacy {height: auto;}
.privacy .contWrap {display: flex; flex-direction: column; gap: 3.33vw; width: 100%; max-width: 1080px; margin: 0 auto; padding: 9.58vw 0; text-align: left;}
.privacy .contWrap strong {display: block; margin-bottom: 1.25vw; font-size: 1.04vw; letter-spacing: -0.4px;}
.privacy .contWrap p,
.privacy .contWrap .tit p {font-size: 0.78vw; letter-spacing: -0.3px; line-height: 1.2vw;} 
.privacy .contWrap .tit h2{margin-bottom: 4.17vw; font-size: 1.77vw; letter-spacing: -0.68px; text-align: center;}
.privacy .contWrap .tableBox table {width: 100%; border-top: 1px solid #000; border-bottom: 1px solid #E2E2E2; text-align: center;}
.privacy .contWrap .tableBox table thead tr {background: #F6F6F6;}
.privacy .contWrap .tableBox table tr th,
.privacy .contWrap .tableBox table tr td {padding: 0.63vw 0.83vw; border-right: 1px solid #E2E2E2;}
.privacy .contWrap .tableBox table tr th:last-child,
.privacy .contWrap .tableBox table tr td:last-child {border-right: none;}
.privacy .contWrap ul li {position: relative;}
.privacy .contWrap ul li::before {content: ''; position: absolute; left: 0; top: 50%; width: 3px; height: 3px; transform: translateY(-50%); background: #000;border-radius: 50%;}