@charset "utf-8";
@import url("common.css");
@import url("header.css");
@import url("footer.css");

.swiper1{
  top: 0;
  width: 100%;
}
.glox-info-imgbox{
  margin-top: 20px;
}
.glox-info-imgbox > img{
  width: 100%;
  border-radius: 20px;
}

.greybox{
  background: #f4f4f4;
}
.greybox2{
  padding: 25px 20px !important;
}

/* 배너 */
.bannerbox{
  margin: 0 auto;
}
.slidewrap{
  margin: 0 auto 25px;
}
.slidewrap > .gloxmain > .swiper-wrapper > .swiper-slide{
  position: relative;
  overflow: hidden;
}
.slidewrap > .gloxmain > .swiper-wrapper > .swiper-slide > img{
  transform: translateY(-5%);
}
.slidewrap > .gloxmain > .swiper-wrapper > .swiper-slide > .swiper-textbox{
  position: absolute;
  top: 0;
  display: flex;
  flex-direction: column;
}
.slidewrap > .gloxmain > .swiper-wrapper > .swiper-slide > .swiper-textbox > h1{
  color: #fff;
  font-weight: 700;   
  margin: 10px 0;
 }
.slidewrap > .gloxmain > .swiper-wrapper > .swiper-slide > .swiper-textbox > p{
  color: #fff;
}
       
.glox-main > .glox-main-subtitle > h2{
  margin-top: 0 !important;
}

.glox-main > .glox-info-textbox{
  margin-top: 50px;
}

.glox-main > .glox-info-textbox > p > span{
  font-weight: 700;
  color: #6f8eff;
}

.glox-info-textbox{
  position: relative;
  text-align: left;
}
.glox-info-textbox > h1{
  text-align: center;
  margin: 30px 0;
}

.glox-info-textbox > h2{
  margin-top: 50px;
}

.glox-info-textbox > h3{
  color: #7b7b7b;
}
.glox-privacy > .glox-info-textbox > h3{
  color: #202020;
}
.glox-info-textbox > .greyline{
  margin-bottom: 20px;
}

.glox-info-textbox > .grid-box{
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr 1fr;
}

.glox-info-textbox > .grid-box2{
  grid-template-rows: 1fr 1fr;
  grid-template-columns: 1fr 1fr;
}

.glox-info-textbox > .button-box{
  text-align: center;
}

.glox-info-textbox > .button-box > .more-review{
  display: inline-block;
  margin-top: 20px;
  text-align: center;
  background-color: #3a3a3a;
  color: #fff;
  border-radius: 6px;
  padding: 10px 20px;
}
  

/* 메인 부분 */
.glox-info-buttonbox{
  padding: 0 20px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
}
.glox-info-buttonbox > .glox-info-button{
  width: 20%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.glox-info-buttonbox > .glox-info-button > a{
    width: 100%;
}
    

button{
  font-family: pretendard;
  font-weight: 700;
  cursor: pointer;
}
.glox-inquary-line{
  background-color: #b5b5b5;
  height: 1px;
  margin-bottom: 20px;
}

/* 상담페이지 */
.glox-inquary > form > .form .glox-inquary-input > input, 
.glox-inquary > form > .form .glox-inquary-input > textarea{
  width: 94%;
  border-radius: 0.8333rem;
  border: 1px solid rgba(118,118,118,.2);
  background: var(--grey-bg-color);
  padding: 0 12px;
}
.glox-inquary > form > .form > div > .submitbtn{
  flex-grow: 0;
  display: flex;
  flex-direction: row;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 10px 20px;
  border-radius: 6px;
  background-color: #202020;
  color: #fff;
  margin: 0 auto;
  margin-bottom: 50px;
}

.glox-info > .glox-direct-link {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid #b5b5b5;
}
.glox-info > .glox-direct-link >.direct-link{
  width: 23%;
}
.glox-info > .glox-direct-link >.direct-link > a{
  width: 100%;
}
.glox-info > .glox-direct-link >.direct-link > p{
  text-align: center;
  color: #202020;
}
.glox-inquary > form > .form .agreebox{
  display: flex;
  flex-direction: row;
  align-items: center;
}


.glox-product{
  position: relative;
}
.glox-product > .product-btn{
  padding: 9px 25px 7px 26px;
  border-radius: 5px;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  background-color: rgba(255, 255, 255, 0.2);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
  display: flex;
  flex-direction: row;
  align-items: center;
  border: none;
}
.glox-product > .product-btn > img{
  transform: rotate(270deg);
}


/* 제품구성 */
.product-composition > .glox-info-textbox > h2{
  margin-top: 50px;
}

.product-composition > .glox-info-textbox > h3{
  margin-bottom: 10px;
  color: #202020;
}

.product-composition > .glox-info-textbox > .glox-info-imgbox{
  margin-bottom: 20px;
  text-align: center;
}

/* 장착차량 */

.product-combination > .glox-info-textbox > h2{
  margin-top: 50px;
}
.product-combination > .glox-info-textbox >.glox-info-imgbox{
  margin-bottom: 20px;
}
.product-combination > .glox-info-textbox .swiper4 > .swiper-wrapper > .swiper-slide > img{
  width: 100%;
  border-radius: 20px;
}


/* 장착 매뉴얼 */
.product-menual > .glox-info-textbox > h2, .product-menual > .glox-info-textbox > h3{
  margin-top: 50px;
}
.product-menual > .glox-info-textbox > .glox-info-imgbox > span{
  color: red;
  display: block;
}

.product-menual > .glox-info-textbox > span{
  color: red;
  display: block;
}

.product-menual > .glox-info-textbox > .middle-span{
  margin-bottom: 20px;
  display: block;
}

.product-menual > .glox-info-textbox > .swiper5{
  position: relative;
}

.product-menual > .glox-info-textbox > .swiper5 > .swiper-wrapper{
  margin-bottom: 40px;
}
.product-menual > .glox-info-textbox > .swiper5 > .swiper-wrapper > .swiper-slide > img{
  width: 100%;
}
.product-menual > .glox-info-textbox > .swiper5 > .swiper-wrapper > .swiper-slide > p{
  padding: 10px 0;
  text-align: center;
  background: rgba(118,118,118,.2);
}
.product-menual > .glox-info-textbox > .swiper5 > .swiper-wrapper > .swiper-pagination{
  bottom: -20px;
}
.product-menual > .glox-info-textbox > .swiper5 > .swiper-wrapper > .swiper-pagination > span{
  display: inline-block;
}
.product-menual > .glox-info-textbox > .swiper6 > .swiper-wrapper > .swiper-slide{
  position: relative;
}
.product-menual > .glox-info-textbox > .swiper6 > .swiper-wrapper > .swiper-slide > img{
  width: 100%;
  border-radius: 20px;
}
.product-menual > .glox-info-textbox > .swiper6 > .swiper-wrapper > .swiper-slide > .swiper-textbox{
  position: absolute;
  left: 20px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  border-radius: 25px;
  background: var(--btn-color);
  display: flex;
  align-items: center;
  justify-content: center;
}
.product-menual > .glox-info-textbox > .swiper6 > .swiper-wrapper > .swiper-slide > .swiper-textbox > p{
  color: #fff;
  font-weight: 700;
  font-size: 24px;
  margin-bottom: 0 !important;
}
.product-menual > .glox-info-textbox > .swiper6 > .swiper-wrapper > .swiper-slide > .single-bike,
.product-menual > .glox-info-textbox > .swiper6 > .swiper-wrapper > .swiper-slide > .double-bike{
  width: 180px;
  height: 40px;
  border-radius: 10px;
  right: 20px;
  left: auto;
}

.product-menual > .glox-info-textbox > .glox-info-imgbox{
  margin-bottom: 20px;
}


/* 인증 및 안전 */
.product-safety >.glox-info-imgbox{
    margin-bottom: 20px;
}

/* 고지사항 */
.product-notice > .glox-info-textbox{
  margin-top: 50px;
}
.product-notice > .glox-info-imgbox{
  margin-bottom: 20px;
}
.product-notice > .glox-info-imgbox > img{
  border-radius: 20px;
}

.product-notice > .glox-info-textbox > ul > li{
  list-style: disc;
  list-style-position: inside;
  margin-bottom: 20px;
}

.product-notice > .glox-info-textbox > .glox-info-iconbox{
  display: flex;
  flex-direction: row;
}

.product-notice > .glox-info-textbox > .glox-info-iconbox > .glox-info-icon{
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 33%;
  position: relative;
  align-items: center;
  margin-bottom: 10px;
}
.product-notice > .glox-info-textbox > .glox-info-iconbox > .glox-info-icon > img{
  width: 100%;
}
.product-notice > .glox-info-textbox > .glox-info-iconbox > .glox-info-icon > p{
  position: absolute;
  bottom: 8px;
}


/* 회사소개 */
.glox-company > .glox-info-textbox > .glox-info-imgbox > .glox-logo-company{
  border-radius: 0;
}

.glox-company > .glox-info-textbox > .last-p{
  text-align: right;
}

.glox-info > .glox-direct-link{
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  border-bottom: 1px solid #b5b5b5;
}
.glox-info > .glox-direct-link > .direct-link{
  width: 23%;
}
.glox-info > .glox-direct-link > .direct-link > a{
  width: 100%;
}
.glox-info > .glox-direct-link > .direct-link > a > p{
  text-align: center;
  color: #202020;
}

/* 모바일 이외 */
@media screen and ( min-width: 768px ){
  
  /* 배너 */
  .slidewrap{
    max-width: 2560px;
    max-height: 80vh;
    min-height: 450px;
  }
  .slidewrap > .gloxmain{
    max-height: 80vh;
    min-height: 450px;
  }
  .slidewrap > .gloxmain > .swiper-wrapper > .swiper-slide > .banner-imgbox{
    width: 100%;
     height: auto;
    min-height: 450px;
  }
  .slidewrap > .gloxmain > .swiper-wrapper > .swiper-slide > .banner-imgbox > img{
    width: 100%;
    transform: translateY(2%);
    min-height: 450px;
  }
  .slidewrap > .gloxmain > .swiper-wrapper > .swiper-slide > .swiper-textbox{
    left: 48%;
    top: 50%;
    transform: translate(-82%, -42%);
    min-width: 440px;
  }
  .slidewrap > .gloxmain > .swiper-wrapper > .swiper-slide > .swiper-textbox > img{
    width: 14vw;
    margin-bottom: 20px;
  }
  .slidewrap > .gloxmain > .swiper-wrapper > .swiper-slide > .swiper-textbox > h1{
    font-size: 80px;
    text-shadow: 2px 2px 2px rgba(0,0,0,.8);
    margin-bottom: 20px;
  }
  .slidewrap > .gloxmain > .swiper-wrapper > .swiper-slide > .swiper-textbox > p{
    font-size: 36px;
    text-shadow: 1px 2px 2px rgba(0,0,0,.8);
    font-weight: 500;
  }

  .wrap{
    min-width: 768px;
    max-width: 860px;
    margin: 0 auto;
    padding: 0 16px;
  }


  

  .glox-info{
    margin-bottom: 50px;
  }

    /* 메인 부분 */
  .glox-info > .glox-info-buttonbox > .glox-info-button > p{
    font-size: 20px;
  }
  .glox-info > .glox-info-textbox > .button-box > .more-review{
    font-size: 20px;
  }
  .glox-info > .glox-info-textbox h1{
    font-size: 62px;
  }
  .glox-info > .glox-info-textbox h2{
    font-size: 50px;
    margin-bottom: 20px;
  }
  .glox-info > .glox-info-textbox h3{
    font-size: 36px;
  }
  .glox-privacy >  .glox-info-textbox h3{
    margin: 50px 0 20px 0;
  }
  .glox-info > .glox-info-textbox p{
    font-size: 20px;
    margin: 20px 0;
    line-height: 30px;
  }
  .swiper-textbox > p{
    margin: 0 !important;
  }
  .glox-privacy >  .glox-info-textbox p{
    margin: 10px 0;
  }
  .glox-privacy >  .glox-info-textbox ul{
    margin-top: 10px;
  }
  .glox-privacy >  .glox-info-textbox ul > li{
    font-size: 20px;
    margin: 10px 0;
    list-style: disc;
    list-style-position: inside;
    line-height: 2.2rem;
  }
  .glox-info > .glox-info-textbox > .button-box > .more-review{
    font-size: 20px;
  }

  .glox-info-imgbox > iframe{
    width: 768px;
    height: 432px;
  }

  .glox-info > .glox-info-logobox{
    width: 6vw;
    margin-bottom: 20px;
  }
  .glox-info > .glox-info-logobox > img{
    width: 100%;
  }

  .glox-info > .last{
    margin-top: 20px;
  }

  .glox-info .channeltalk{
    font-size: 20px;
  }

  .glox-main > .glox-main-subtitle > h2{
    margin-top: 0 !important;
  }
  .glox-main > .glox-info-textbox > p > span{
    font-size: 30px;
  }
  .glox-main > .glox-info-buttonbox > .glox-info-button > a > img{
    cursor: pointer;
  }
  .glox-direct-link > .direct-link > a > p {
    padding: 10px 0;
    font-size: 20px;
  }

  /* 상담페이지 */
  .glox-inquary > h3{
    font-size: 32px;
    text-align: center;
    margin: 50px 0 20px 0;
  }
    
  .glox-inquary > form > .form .glox-inquary-input{
    margin-bottom: 25px;
  }
  .glox-inquary > form > .form .glox-inquary-input > p{
    font-size: 20px;
    line-height: 32px;
  }
  .glox-inquary > form > .form .glox-inquary-input > p > span{
    color: red;
    margin-left: 2px;
  }

  .glox-inquary > form > .form .glox-inquary-input > #textarea{
    height: 150px;
    padding-top: 10px;
    cursor: auto;
  }
  .glox-inquary > form > .form .glox-inquary-input > .agree{
    height: 80px;
    padding: 12px;
    font-size: 16px;
  }
  .glox-inquary > form > .form .glox-inquary-input > input{
    font-size: 16px;
    cursor: auto;
    height: 50px;
  }
  .glox-inquary > form > .form > div > .submitbtn{
    font-size: 20px;
  }
  .glox-inquary > form > .form .agreebox{
    margin-top: 20px;
    gap: 10px;
  }
  .glox-inquary > form > .form .agreebox > #agree-check{
    width: 20px;
    height: 20px;
  }
  .glox-inquary > form > .form .agreebox > p{
    font-size: 16px;
  }

  /* 제품구성 */
  .product-composition > .glox-info-textbox > h3{
    margin-top: 50px;
  }

  /* 장착차량 */
  .product-combination > .glox-info-textbox{
      margin-bottom: 50px;
  }
  .product-combination > .glox-info-textbox > .swiper4 > .swiper-wrapper > .swiper-slide{
    width: 80%;
  }
  .product-combination > .glox-info-textbox > .swiper4 > .swiper-wrapper > .swiper-slide > img{
    width: 100%;
  }

  /* 장착 매뉴얼 */
  .product-menual > .glox-info-textbox > .glox-info-imgbox > span{
    font-size: 20px;
  }
  .product-menual > .glox-info-textbox > .swiper5 > .swiper-wrapper > .swiper-slide{
    width: 80%;
  }
  .product-menual > .glox-info-textbox > .swiper6 > .swiper-wrapper{
    margin-bottom: 50px;
  }
  .product-menual > .glox-info-textbox > .glox-info-imgbox{
    margin: 50px 0;
  }


  /* 인증 및 안전 */
  .product-safety > .titlebox{
    margin-bottom: 50px;
  }

  /* 고지사항 */
  .product-notice > .glox-info-textbox > ul > li{
    font-size: 24px;
  }

  /* 회사소개 */
  .glox-company > .glox-info-textbox > .glox-info-imgbox > .glox-logo-company{
    width: 30vw;
    margin: 20px 0;
  }
  .glox-company > .glox-company-dis p{
    margin: 0;
  }
}



/* 모바일 */
@media screen and ( max-width: 767px ){

    /* 배너 */
  .slidewrap{
    min-height: 350px;
  }
  .slidewrap > .gloxmain > .swiper-wrapper > .swiper-slide > .banner-imgbox{
    width: 100%;
    height: auto;
  }
  .slidewrap > .gloxmain > .swiper-wrapper > .swiper-slide > .banner-imgbox > img{
    width: 100%;
    min-height: 350px;
    transform: translateY(5%);
  }
  .slidewrap > .gloxmain > .swiper-wrapper > .swiper-slide > .banner-imgbox > .bn1{
    content: url(/img/bn1_m.jpg);
  }
  .slidewrap > .gloxmain > .swiper-wrapper > .swiper-slide > .banner-imgbox > .bn2{
    content: url(/img/bn2_m.jpg);
  }
  .slidewrap > .gloxmain > .swiper-wrapper > .swiper-slide > .banner-imgbox > .bn3{
    content: url(/img/bn3_m.jpg);
  }

  .slidewrap > .gloxmain > .swiper-wrapper > .swiper-slide > .swiper-textbox{
    top: 50%;
    transform: translate(20px, -40%);
  }
  .slidewrap > .gloxmain > .swiper-wrapper > .swiper-slide > .swiper-textbox > img{
    width: 16vw;
  }
  .slidewrap > .gloxmain > .swiper-wrapper > .swiper-slide > .swiper-textbox > h1{
    font-size: 35px;
    text-shadow: 1px 2px 2px rgba(0,0,0,.8);
  }
  .slidewrap > .gloxmain > .swiper-wrapper > .swiper-slide > .swiper-textbox > p{
    font-size: 16px;
    text-shadow: 1px 2px 2px rgba(0,0,0,.8);
  }
  .glox-info{
    margin-bottom: 50px;
  }
    /* 메인 부분 */
  .glox-main > .glox-info-buttonbox > .glox-info-button > p{
    font-size: 14px;
  }
  .glox-info-imgbox > iframe{
    width: 100%;
    max-width: 767px;
    max-height: 431px;
    min-height: 240px;
  }
  .glox-info-textbox{
    padding: 0 20px;
  }
  .glox-info-textbox h1{
    font-size: 36px;
  }
  .glox-info-textbox h2{
    font-size: 24px;
    margin-bottom: 10px;
    margin-top: 30px !important;
  }
  .glox-info-textbox h3{
    font-size: 20px;
  }
  
  .glox-info-textbox > .grid-box > img{
    border-radius: 10px;
  }
  .glox-info-textbox > .button-box .more-review{
    font-size: 14px;
  }
      
  .glox-info-textbox p{
    font-size: 14px;
    margin: 10px 0;
    line-height: 18px;
  }
  .glox-privacy >  .glox-info-textbox h3{
    margin: 30px 0 10px 0;
  }
  .glox-privacy >  .glox-info-textbox p{
    margin: 10px 0;
  }
  .glox-privacy >  .glox-info-textbox ul{
    margin-top: 10px;
  }
  .glox-privacy >  .glox-info-textbox ul > li{
    font-size: 14px;
    margin: 10px 0;
    list-style: disc;
    list-style-position: inside;
    line-height: 1.5rem;
  }
  .glox-info-textbox > p:last-child{
    margin-bottom: 0;
  }
  
  .glox-info > .glox-info-logobox{
    width: 20vw;
    margin-left: 20px;
    margin-bottom: 20px;
  }
  .glox-info > .glox-info-logobox > img{
    width: 100%;
  }

  .glox-info > .last{
    margin-top: 20px;
  }

  .glox-info .channeltalk{
    font-size: 14px;
  }
  .glox-direct-link > .direct-link > a > p {
    font-size: 14px;
    padding: 15px 0;
  }

  
  .content-line{
    background-color: #202020;
    height: 1px;
  }

  /* 상담페이지 */
  .glox-inquary > h3{
    font-size: 24px;
    text-align: center;
    margin: 50px 0 20px 0;
  }
    
  .glox-inquary > form > .form{
    padding: 0 20px;
  }

  .glox-inquary > form > .form .glox-inquary-input{
    margin-bottom: 25px;
  }
  .glox-inquary > form > .form .glox-inquary-input > p{
    font-size: 14px;
    line-height: 22px;
  }
  .glox-inquary > form > .form .glox-inquary-input span{
    color: red;
    margin-left: 2px;
  }
  .glox-inquary > form > .form #textarea{
    height: 150px;
  }
  .glox-inquary > form > .form .agreebox{
    gap: 10px;
  }
  .glox-inquary > form > .form .agreebox > #agree-check{
    width: 18px;
  }

  .glox-inquary > form > .form .agree{
    height: 80px;
    padding: 12px;
  }
  .glox-inquary > form > .form input{
    font-size: 14px;
    height: 34px;
  }
  .glox-inquary > form > .form .submitbtn{
    font-size: 14px;
  }

  /* 제품페이지 */
  .product-banner{
    height: 44vh;
  }
  .product-banner > .gloxmain{
    height: 50vh;
  }
  .product-banner > .gloxmain > .bannerbox > .banner-imgbox{
    height: 50vh;
  }

  /* 제품구성 */
  .product-composition > .glox-info-textbox > h3{
    margin-top: 30px;
  }

  /* 장착차량 */

  .product-combination > .glox-info-textbox > .swiper4 > .swiper-wrapper > .swiper-slide{
    width: 85%;
  }

   /* 장착 매뉴얼 */
  .product-menual > .glox-info-textbox > span{
    font-size: 14px;
  }

  .product-menual > .glox-info-textbox > .swiper6 > .swiper-wrapper > .swiper-slide{
    width: 92%;
  }
    
  .product-menual > .glox-info-imgbox{
    margin: 25px 0;
  }
  

  /* 인증 및 안전 */


  /* 고지사항 */
  .product-notice > .glox-info-textbox > ul > li{
    font-size: 14px;
  }

  /* 회사소개 */
  .glox-company > .glox-info-textbox > .glox-info-imgbox > .glox-logo-company{
    width: 20vw;
    margin: 30px 0;
  }

  .glox-main > .glox-main-subtitle > h2{
    margin-top: 0 !important; 
  }
  .glox-main > .glox-info-textbox > p > span{
    font-size: 18px;
  }
}