/* 와이드 pc  */
.videoBox{width:100%;height:100%; overflow:hidden; position:absolute}
#videoBG {
   position:absolute; /*고정=>fixed/ 스크롤처리=>absolute */
   left:50%;
   top:50%; /*오른쪽, 아래에 여백을 두지않고 꽉차게 표시*/
   width:auto;
   min-width:100%; /*동영상 너비를 꽉차게*/
   height:auto;
   min-height:100%; /*동영상 높이를 꽉차게*/
  transform:translateX(-50%) translateY(-50%);
   z-index:-100; /*다른요소보다 아래에 위치*/
  
}

#imgBG{
	position:absolute; /*고정=>fixed/ 스크롤처리=>absolute */
   left:50%;
   top:50%; /*오른쪽, 아래에 여백을 두지않고 꽉차게 표시*/
   width:auto;
   min-width:100%; /*동영상 너비를 꽉차게*/
   height:auto;
   min-height:100%; /*동영상 높이를 꽉차게*/
   transform:translateX(-50%) translateY(-50%);
   z-index:-100;
}
.imgslogan{
   display: none;
   position:absolute; /*고정=>fixed/ 스크롤처리=>absolute */
   left:50%;
   top:50%;
   width:auto;
   min-width:100%; /*동영상 너비를 꽉차게*/
   transform:translateX(-50%) translateY(-50%);
   text-align: center;
   font-family: "Inter", sans-serif; font-size: 7vw;
   font-weight: 600; color: #fff;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, .6);
}

#wrap .down{display: block; width: 60px; height: 90px; border-radius: 30px;
   border: 2px solid rgba(255, 255, 255, .9); 
   position: absolute; left: 50%; 
   display: block;
   font-family: "Inter", sans-serif; font-style: italic; letter-spacing: -1px;
   color: #fff; text-align: center; font-weight: 300;  padding-top: 30px;
   
   transition: all .5s ease;
   transform: translateX(-50%);
   animation: scrolldown 3s infinite;}

   @keyframes scrolldown {
      0% {
         bottom: 12vh;
         opacity: 1;
      }
      75% {
         bottom: 8vh;
         opacity: 1;
      }
      100% {
         bottom: 12vh;
         opacity: 1;
      }
   }

   .down::after, .down::before{
      content: '';
      display: block;
      width: 1px; height: 50px;
      background: rgba(255, 255, 255, .9); ;
      position: absolute; bottom: 0; transform: translateX(-50%);
   }
   .down::after{left: 25%; transform: rotate(-5deg);}
   .down::before{right: 25%; transform: rotate(5deg);}


.down span{display: block; width: 32px; height: 4px; background: rgba(255, 255, 255, .9);
   position: absolute; left: 50%; transform: translateX(-50%);}

.down .bulb01{bottom: -2px; border-radius: 0 0 4px 4px;}
.down .bulb02{width: 24px; height: 3px; bottom: -10px; border-radius: 1.5px;}
.down .bulb03{width: 15px; height: 3px; bottom: -17px; border-radius: 1px;}

.cable01{display: block; width: 2px; height: calc(12vh - 15px); background: #fff;
   position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
   animation: cableheight 3s infinite;}
   
   @keyframes cableheight {
      0% {
         height: calc(12vh - 15px);
         opacity: 1;
      }
      75% {
         height: calc(8vh - 15px);
         opacity: 1;
      }
      100% {
         height: calc(12vh - 15px);
         opacity: 1;
      }
   }

#wrap .down:hover{background: #feffd4ce;
text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
box-shadow:  0 0 5px #ffe1a9af, 0 0 15px #ffe3b0bb, 0 0 20px #ffe9c291, 0 0 40px #ffffff83, 0 0 10px #ffbe6e;}


#wrap .down.light{background: #feffd4ce;
   text-shadow: 0 0 5px #ffa500, 0 0 15px #ffa500, 0 0 20px #ffa500, 0 0 40px #ffa500, 0 0 60px #ff0000, 0 0 10px #ff8d00, 0 0 98px #ff0000;
   box-shadow:  0 0 5px #ffe1a9af, 0 0 15px #ffe3b0bb, 0 0 20px #ffe9c291, 0 0 40px #ffffff83, 0 0 10px #ffbe6e;}
   
.mode_change{width: 100%; }
.mode_change .change_btn{position: relative; width: 90px; padding-top: 165px; margin: 0 auto;}

.mode_change .change_btn>div{position: absolute; left: 50%; top: 0; transform: translateX(-50%); z-index: 10;}
.mode_change .change_btn span{display: block; background: #fff; margin: 0 auto;}

.mode_change .change_btn .cable02{background: #111;
   width: 2px; height: 170px; transition: all .3s ease;}

.mode_change .change_btn .plug{width: 50px; height: 40px; border-radius: 20px 20px 0 0;
   position: relative; background: #fff; border: 2px solid #111;
   text-align: center; font-size: 1.4rem; font-weight: 700; padding-top: 12px;}
.mode_change .change_btn .plug::after,
.mode_change .change_btn .plug::before{content: '';
   background: #fff;
   display: block; width: 4px; height: 6px; border-radius: 0 0 8px 8px;
   border: 2px solid #111;
   position: absolute; bottom: -10px;}
.mode_change .change_btn .plug::after{left: 5px;}
.mode_change .change_btn .plug::before{right: 5px;}


.mode_change .change_btn .power{width: 70px; height: 40px;
   margin-top: 20px; position: relative; background: none;}
.mode_change .change_btn .power::after,
.mode_change .change_btn .power::before{content: ''; border-radius: 50%;
   display: block; width: 8px; height: 8px; background: #111;
   position: absolute; bottom: 6px;}
   .mode_change .change_btn .power::after{left: 17px;}
   .mode_change .change_btn .power::before{right: 17px;}



   .mode_change .change_btn.dark .cable02{height: 125px; background: #fff;}
   .mode_change .change_btn.dark .plug{background: #111; border-color: #fff; color: #fff;}
   .mode_change .change_btn.dark .plug::after,
   .mode_change .change_btn.dark .plug::before{border-color: #fff; background: #111;
      height: 14px;
      bottom: -18px;}

   .mode_change .change_btn.dark .power::after,
   .mode_change .change_btn.dark .power::before{background: #fff;}

.sub_title{
   display: block;
   position:absolute; /*고정=>fixed/ 스크롤처리=>absolute */
   left:50%;
   top:50%;
   width:auto;
   min-width:100%; /*동영상 너비를 꽉차게*/
   transform:translateX(-50%) translateY(-50%);
   text-align: center;
   font-family: "Inter", sans-serif; font-size: 6vw;
   font-weight: 600; color: #fff; font-style: italic;
   text-shadow: 1px 1px 2px rgba(0, 0, 0, .6);}

#content{width:100%; margin:0 auto; background: #fff;
      font-size: 1.8rem; font-weight: 500;}

section{width: 75%; max-width: 1440px; padding: 135px 0; margin: 0 auto;}
section h3{font-size: 6.4rem; font-family: "Inter", sans-serif; margin-bottom: 48px;}

/* sec01 */
.sec01>ul{display: grid; grid-template-columns: repeat(2,1fr);
   grid-template-areas: 'a a' 'b c'; gap: 48px 24px;}
   
   .sec01>ul>li:nth-of-type(1){grid-area: a;}
   .sec01>ul>li:nth-of-type(2){grid-area: b;}
   .sec01>ul>li:nth-of-type(3){grid-area: c;}

.sec01>ul>li strong{font-size: 2.4rem; display: block; line-height: normal;}
.sec01 .guide01 .pendant_guide{display: grid; gap: 24px; grid-template-columns: 540px 1fr;
   justify-content: space-between;
   grid-template-areas:
      'a b'
      'a c'
      'a d';}
.sec01 .guide01 .pendant_img{display: block; grid-area: a;}
.sec01 .guide01 img{width: 100%; height: 100%; object-fit: cover; object-position: left center;}

.sec01 .guide01 h4{font-size: 4.4rem; grid-area: b;}
.sec01 .pendant_list{font-family: "Inter", sans-serif; margin-bottom: auto;
   font-weight: 700; font-size: 2rem; grid-area: c;}
.sec01 .pendant_list li{margin: 8px 0;}

.sec01 .guide01 dl{font-size: 1.6rem; margin-top: auto; grid-area: d;}
.sec01 .guide01 dd{margin: 8px 0;}
.sec01 .guide01 .read_more{width: 40%; display: flex; align-items: center; justify-content: center; padding: 16px 0; margin: 16px auto;
   border: 1px solid transparent; transition: all .7s ease;}
.sec01 .guide01 .read_more span{display: block;}
.sec01 .guide01 .read_more span:first-of-type{font-size: 2.4rem; font-weight: 600;}
.sec01 .guide01 .read_more span:last-of-type{font-size: 4rem;}
.sec01 .guide01 .read_more:hover,
.sec01 .guide01 .read_more.open
{width: 100%; border: 1px solid #111;}

body.dark_mode .sec01 .guide01 .read_more:hover,
body.dark_mode .sec01 .guide01 .read_more.open{border-color: #fff;}

.sec01 .pendant_guide_more{display: none;}
.sec01 .pendant_guide_more>div{padding: 0 2.5%; margin-bottom: 48px; display: grid; grid-template-columns: 4.5fr 5.5fr;
   grid-template-areas: 'a a' 'b c'; gap: 24px;}

.sec01 .pendant_guide_more dl:first-of-type{grid-area: a;}
.sec01 .pendant_guide_more dl:first-of-type dd{margin: 15px 0;}
.sec01 .pendant_guide_more img{grid-area: b;}
.sec01 .pendant_guide_more dl:last-of-type{grid-area: c; font-weight: 600; font-size: 1.8rem; margin-top: 0;
   display: flex; flex-direction: column; justify-content: space-around;}

   .sec01 .bottom>img{width: 100%;}
   .sec01 .bottom strong a{padding: 16px 0; display: flex; align-items: center; justify-content: center; position: relative;}
   .sec01 .bottom strong a::after{content: ''; display: block; width: 100%; height: 1px; background: #111;
      position: absolute; left: 0; bottom: 0; transform: scaleX(0); transition: all .5s ease;}

      .sec01 .bottom strong a:hover::after,.sec01 .bottom strong a.open::after{transform: scaleX(1);}
      body.dark_mode .sec01 .bottom strong a:hover::after,
      body.dark_mode .sec01 .bottom strong a.open::after{background-color: #fff;}
   .sec01 .bottom strong a span{font-size: 3.2rem;}
   .sec01 .bottom .bottom_guide_more{padding: 24px 4%; display: none; border-bottom: 1px solid #111;}
   body.dark_mode .sec01 .bottom .bottom_guide_more{border-color: #fff;}
   .sec01 .bottom .bottom_guide_more p{font-size: 1.6rem; text-align: justify; margin-bottom: 24px;}
   .sec01 .bottom .bottom_guide_more dt{font-weight: 600;}
   .sec01 .bottom .bottom_guide_more dd{margin: 8px 0 24px; font-weight: 400; font-size: 1.6rem;}

/* .sec02{padding: 0 0 135px;} */
.sec02 .faq{position: relative;}
.sec02 .faq .open .all{font-size: 2rem; padding: 8px 0; position: absolute; top: -88px; right: 0;}
.sec02 .faq .q{position: relative;font-size: 2.4rem;
   border-bottom: 1px solid #ccc;}
.sec02 .faq .arrow{position: absolute; right: 0; top: 50%; transform: translateY(-50%);}
.sec02 .faq .q .trigger{padding: 24px 0; display: flex; align-items: center; gap: 24px; transition: all .5s ease;}
.sec02 .faq .q .trigger span{display: block;}
.sec02 .faq .a{padding: 48px; font-weight: 400; display: none; border-bottom: 1px solid #ccc;}
.sec02 .faq .a ol, .sec02 .faq .a ul{margin: 24px 0; font-weight: 600;}
.sec02 .faq .a li, .sec02 .faq .a dd{margin: 12px 0;}
.sec02 .faq .a dl{margin-bottom: 36px;}
.sec02 .faq .a dd{margin-left: 12px;}
.sec02 .faq .a dl dt:first-of-type{margin-top: 0;}
.sec02 .faq .a dl dt{font-weight: 600; margin-top: 24px;}

.sec03{ padding-bottom: 350px;}
.sec03 div{display: flex; gap: 24px;}
.sec03 div a{width: 30%;}
.sec03 div a .dw_img{width: 100%; display: block; box-shadow: 0 0 5px rgba(0, 0, 0, .3);
   overflow: hidden; position: relative;}
.sec03 div a img{width: 100%;}
.sec03 div a span:last-of-type{display: block; margin-top: 16px;
   font-size: 2.8rem; font-family: "Inter", sans-serif;}
.sec03 div a .dw_img::after{font-family: 'Material Symbols Outlined';
   content: '\e89e'; font-size: 5rem; font-weight: 600;
   background: rgba(0, 0, 0, .5); backdrop-filter: blur(5px); color: rgba(255, 255, 255, .8);
   display: flex; width: 100%; height: 100%; opacity: 0;
   position: absolute; left: 0; top: 0;
   align-items: center; justify-content: center;
   transition: all .5s ease;}
.sec03 div a:hover .dw_img::after{opacity: 1;}


/* 일반 pc */
@media screen and (max-width:1280px) {
	section{width: 85%; max-width: 1440px; padding: 135px 0; margin: 0 auto;}
   .sec01 .guide01 .pendant_guide{grid-template-columns: 1fr 1fr;}
   .sec03 div a{width: 40%;}
}

/* 테블릿 */
@media screen and (max-width:1024px) {
   section{width: 95%;}
   section h3{font-size: 5.2rem;}
   .sec01>ul {gap: 32px 16px;}
   .sec01 .guide01 h4 {font-size: 3.2rem;}
   .sec01 .pendant_list{font-size: 1.8rem;}
   .sec01 .guide01 .pendant_guide{gap: 16px;}
   .sec01 .pendant_guide_more>div{grid-template-areas: 'a a' 'b b' 'c c';}
   .sec03 div {gap: 16px;}
}


/* 소형 테블릿 */
@media screen and (max-width:768px) {
   section{padding: 75px 0;}
   section:last-of-type{padding-bottom: 150px;}
   .sec01 .guide01 .pendant_guide{grid-template-columns: 1fr 1fr; grid-template-areas: 'a b' 'a c' 'd d';}
   .sec03 div a span:last-of-type {font-size: 2.4rem; margin-top: 8px;}

}

/* 모바일 */
@media screen and (max-width:640px) {
   #content{font-size: 1.6rem;}

	section h3{font-size: 4.4rem;}
   .sec01 .guide01 h4 {font-size: 2.4rem;}
   .sec01 .pendant_list{font-size: 1.6rem;}
   .sec01 .pendant_list li {margin: 4px 0;}
   .sec01>ul>li strong {font-size: 2.2rem;}
   .sec01 .guide01 .read_more{margin: 8px auto; padding: 8px 0;}

   .sec02 .faq .q {font-size: 2.2rem;}
   .sec03 div a span:last-of-type {font-size: 2rem; margin-top: 8px;}
   .sec03 div a{width: 50%;}
}


@media screen and (max-width:480px) {
   #content {font-size: 1.5rem;}
   section h3{font-size: 3.4rem; margin-bottom: 24px;}
   .sec01 .guide01 .pendant_guide{grid-template-columns: 1fr; grid-template-areas: 'a' 'b' 'c' 'd';}
.sec01 .guide01 .read_more span:first-of-type {font-size: 2rem;}
   .sec01 .guide01 .read_more {width: 65%;
      margin: 4px auto;
      padding: 4px 0;
  }
  .sec01>ul>li strong {
   font-size: 2rem;}
   .sec01>ul {grid-template-columns: 1fr;grid-template-areas: 'a' 'b' 'c';}
   .sec02 .faq .q {font-size: 2rem;}
   .sec03 div {flex-direction: column; gap: 32px;}
   .sec03 div a {width: 100%;}
   .sec03 div a span:last-of-type {font-size: 2.2rem;}
}