@charset "utf-8";

@import url('base.css');

/* --------------------------------------------
 * layout
/* ------------------------------------------ */
.mbg{ display:none; position:fixed; left:0; top:0; width:100%; height:100%; background-color:#000; -ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=50)"; filter:alpha(opacity=70); opacity:.7; z-index:9;}
.mbg.type01{ height: calc(100vh - 6rem);}
body.ovf_hdn, .ovf_hdn{ overflow:hidden; height:100%;}

#wrap{ position: relative; width:100%; margin:0 auto; padding: 0;}

#header{ position: absolute; top: 0; left: 0; width:100%; z-index:5; -webkit-transition: all 0.2s ease-in-out;-moz-transition: all 0.2s ease-in-out;-ms-transition: all 0.2s ease-in-out;-o-transition: all 0.2s ease-in-out; transition:all 0.2s ease-in-out; }
#header > .inner{ height: 94px; margin: 0 auto; display: flex; position: relative; z-index: 2; padding: 0 54px; align-items: center; transform: translateY(-100%); }
#header .logo a{ display: block; width: 189px; height: 39px; background: url(../images/logo.png) no-repeat 50% 50% / 100% auto; font-size: 0; color: transparent;}
#header .bt-mn{ position: relative; width: 3.2rem; height: 3.2rem; margin-left: auto; display: none;}
#header .bt-mn i{ position: absolute; top: 50%; left: 50%; background-color: #fff; width: 2.4rem; height: .2rem; border-radius: .2rem; margin-top: -.7rem; margin-left: -1.2rem; transition:all 0.2s ease-in-out; display: block; }
#header .bt-mn i:nth-child(2){ margin-top: -.1rem;}
#header .bt-mn i:nth-child(3){ margin-top: .5rem;}

#gnb{ margin-left: auto; font-size: 20px; font-weight: 400;}
#gnb > ul{ display: flex; gap: 35px;}
#gnb > ul > li > a{ position: relative; color: #fff;}
#gnb > ul > li > a::after{ content: ''; width: 0; height: 2px; display: block; background-color: #fff; position: absolute; left: 50%; bottom: -14px; transform: translateX(-50%); transition: width .3s ease-in-out; -webkit-transition: width .3s ease-in-out; -moz-transition: width .3s ease-in-out; -ms-transition: width .3s ease-in-out; -o-transition: width .3s ease-in-out; }
#gnb > ul > li:hover > a::after, 
#gnb > ul > li.on > a::after{ width: 100%;}

footer{ position: relative; width: 100%; background: #000; color: #fff; padding: 40px 54px; z-index: 2;}
footer .footerCopy{ margin-top: 25px; border-top: #eee 1px solid; padding: 20px 0 0 0; display: flex; justify-content: space-between;}
footer .btContact{ color: #fff;}

#indexWrap{ background-color: #080a12; padding: 0;}
#container{ padding: 0; overflow: hidden;}
.services #container{ background-color: #080a12;}
.contents{ max-width: 1360px; margin: 0 auto; padding: 120px 0 200px; min-height: 80vh;}
.sub-tit{ position: relative; font-size: 45px; color:#222; font-weight: 400; margin: 120px 0 40px; padding: 0 0 0 40px;}
.sub-tit::before{ content: ''; position: absolute; top: 50%; left: 0; width: 28px; height: 28px; transform: translateY(-60%); display: block; background: url(../images/blt_tit.png) no-repeat 50% 50% / cover;}
.sub-tit:nth-of-type(1){ margin-top: 0;}
.services .sub-tit{ color: #fff;}

.page-header{ position: relative; background-color: #222;}
.page-header .visual{ position: relative; width: 100%; height: 100%; overflow: hidden; z-index: 1;}
.page-header .visual .img{ width: 100%; height: 600px; object-fit: cover;}
.page-header .visual:after { display:block; content:''; width:100%; height:101%; position:absolute; top: -0.5%; left: 0; right: 0; bottom: 0; background-color:#080A12; transition: left .8s ease-in-out; -webkit-transition: left .8s ease-in-out; -moz-transition: left .8s ease-in-out; -ms-transition: left .8s ease-in-out; -o-transition: left .8s ease-in-out; } 
.page-header .visual.animate::after { left:100%; } 
.page-header .textBox{ position: absolute; top: 0; bottom: 0; left: 0; z-index: 2; padding-bottom: 90px; width: 100%; color: #fff; display: flex; align-items:center; flex-direction: column; justify-content: end; gap: 50px;}
.page-header .textBox .title{ font-size: 96px; font-weight: 400; width: 1360px;}
.page-header .textBox .desc{ font-size: 20px; color:#f1f1f1; font-weight: 200; width: 1360px; }
.services .page-header .visual .img{ height: 400px;}
.services .page-header .textBox{ padding-bottom: 50px;}

#siteFunctions{ position: fixed; width: 100%; height: 100vh; top:0; right: -100%; padding: 5rem; z-index: 99999; background-color: #000;}
#siteFunctions .mobMenu{ height: calc(100vh - 10rem); display: flex; flex-direction: column; justify-content: center; overflow-y: auto;}
#siteFunctions .mobMenu li{ text-align: center;}
#siteFunctions .mobMenu li + li{ margin-top: 2rem;}
#siteFunctions .mobMenu a{ color: #fff; font-size: 3rem;}
#siteFunctions .close{ width: 3.2rem; height: 3.2rem; position: absolute; top: 2rem; right: 2rem; }
#siteFunctions .close i{ position: absolute; width: 2.6rem; height: .2rem; display: block; background-color: #fff; top: 50%; left: 50%; margin: -.1rem 0 0 -1.3rem; transform: rotate(45deg);}
#siteFunctions .close i:nth-child(2){ transform: rotate(-45deg);}

/* --------------------------------------------
 * main page
/* ------------------------------------------ */
.main-visual{ position: relative; width: 100%; overflow: hidden; }
.main-visual .copy{ position: absolute; top: 0; left: 0; bottom: 0; width: 100%; display: flex; z-index: 2; align-items: center; padding: 170px 100px 0;}
.main-visual .copy .tx01{ font-size: 96px; font-weight: 400; text-transform: uppercase; color: #f1f1f1;}
.main-visual .copy .tx02{ position: absolute; bottom: 100px; right: 100px; font-size: 22px; padding: 0 0 0 35px; line-height: 1.8; color: #fff; }
.main-visual .copy .tx02::before{ content: ''; position: absolute; left: 0; top: 10px; bottom: 10px; width: 1px; background-color: #fff; display: block; }
.main-visual .bg{ height: 900px; background-repeat: no-repeat; background-size: cover; background-position: 50% 50%; }
.main-visual .vis1 .bg{ background-image: url(../images/main_vs1.jpg);}
.main-visual .vis2 .bg{ background-image: url(../images/main_vs2.jpg);}
.main-visual .pag{ position: absolute; bottom: 75px; left: 100px; z-index: 2;}
.main-visual .pag .swiper-pagination-bullet{ width: 38px; height: 2px; background-color: #1c409d; border-radius: 0; opacity: 1;}
.main-visual .pag .swiper-pagination-bullet.swiper-pagination-bullet-active{ height: 6px; background-color: #346bf4;}

.m-tit{ position: relative; font-size: 24px; font-weight: 400; padding-left: 40px; margin-bottom: 30px; color: #fff;}
.m-tit::before{ content: ''; position: absolute; top: 50%; left: 0; width: 22px; height: 22px; transform: translateY(-60%); display: block; background: url(../images/blt_tit.png) no-repeat 50% 50% / cover;}

.main-service{ position: relative; padding:80px 60px 0; color: #fff;}
.mservices-section{ display: flex; align-items: flex-start;}
.mservices-img{ position: relative; width: 50%; height: 3000px;}
.mservices-img-itm{ position: sticky; position: -webkit-sticky; top: 0; overflow: hidden;}
.mservices-img img{ width: 100%; height: 100vh; object-fit: cover; }
.mservices-tabs { position: sticky; position: -webkit-sticky; top: 0; padding-left: 55px; flex:1; height: 800px;}
.mservices-tabs .tab-itm{ display: none;}
.mservices-tabs .tab { border-top: #53545a 1px solid; overflow: hidden;}
.mservices-tabs .tab h3{ font-size: 72px; font-weight: 400; padding: 20px 0;}
.mservices-tabs .tab .tab-txt{ padding: 0 42px; height: 0; font-size: 18px; transition:all 0.4s ease-in-out;}
.mservices-tabs .tab .tab-txt .more{ padding: 0 20px; line-height: 50px; border: #fff 1px solid; display: inline-flex; align-items: center; color: #fff; font-size: 18px; margin-top: 50px;}
.mservices-tabs .tab .tab-txt .more::after{ content: ''; margin-left: 28px; width: 25px; height: 12px; background: url(../images/icon_aw.png) no-repeat 50% 50% / cover;}
.mservices-tabs .tab .tab-txt .more:hover{ background-color: #368bff; border-color: #368bff;}
.mservices-tabs .tab.selected .tab-txt{ padding: 60px 42px; height: auto; }

.main-contact{ position: relative; padding: 170px 120px 120px; color: #fff; overflow: hidden;}
.main-contact .bg{ position: absolute; bottom: 0; top: 0; left: 0; width: 100%; background: url(../images/main_contact.jpg) no-repeat 50% 50% / cover;}
.main-contact .txt{ position: relative; font-size: 22px;}
.main-contact .txt b{ display: block; font-size: 72px; font-weight: 400;}
.main-contact .txt p{ margin-top: 30px;}
.main-contact .btn-box{ margin-top: 60px;}
.main-contact .btn-box .btn{ background-color: #368bff; line-height: 70px; height: 70px;}
.main-contact .btn-box .btn:hover{ background-color: #fff; color: #368bff;}

/* --------------------------------------------
 * sub page
/* ------------------------------------------ */
.no-txt{ text-align: center; color: #999; font-size: 45px; font-weight: 300;}

.about-img{ width: 100%; display: flex; gap: 40px;}
.about-img .itm{ flex: 1;}
.about-img .itm .txt{ margin-top: 55px; display: flex; flex-direction: column; gap: 15px;}
.about-img .itm .txt b{ color: #080a12; font-size: 32px; font-weight: 400; }
.about-img .itm .txt span{ font-weight: 300; }
.about-tx{ margin-top: 120px; display: flex; align-items: flex-start;}
.about-tx .sub-tit{ width: 467px;}
.about-tx ul{ flex:1; color: #080a12;}
.about-tx ul li{ border-top: #000 1px solid; display: flex; padding: 15px 0; align-items: center;}
.about-tx ul li + li{ margin-top: 30px;}
.about-tx ul li b{ font-size: 24px; font-weight: 300; width: 230px;}
.about-tx ul li span{ flex:1;}
.about-map{ margin-top: 40px;}
.about-map iframe{ width: 100%; height: 380px;}

.services-page{ position: relative; color: #fff; padding-left: 467px;}
.services-nav{ position: absolute; top: 30px; left: 0;}
.services-nav.fixed{ position: fixed; top: 50px; left: 50%; margin-left: -680px; }
.services-nav li + li{ margin-top: 20px;}
.services-nav a{ color: #444; font-size: 24px;}
.services-nav li.active a{ color: #346bf4; }
.services-con-itm{ padding-top: 30px; margin-top: -30px;}
.services-con-itm + .services-con-itm{ margin-top: 150px;}
.services-img{ position: relative; margin-bottom: 35px;}
.services-img .txt{ position: absolute; top: 0; left: 0; padding: 35px 40px; max-width: 430px; font-size: .87em;}
.services-tx{ border-top: #fff 1px solid; display: flex; padding-top: 15px;}
.services-tx + .services-tx{ margin-top: 50px;}
.services-tx .tit{ width: 235px; font-size: 24px; font-weight: 400;}
.services-tx ul{ font-weight: 300;}
.services-tx ul li{ text-indent: -14px; padding-left: 14px;}
.services-tx ul li::before{ content: ''; width: 3px; height: 3px; display: inline-block; background-color: #fff; border-radius: 50%; margin-right: 10px; vertical-align: 4px;}
.services-tx ul li + li{ margin-top: 8px;}

.form-group{ display: flex; align-items: flex-start;}
.form-group + .form-group{ margin-top: 40px;}
.form-group .form-hd{ width: 460px; font-size: 32px; color: #080a12; padding: 15px 0;}
.form-group .form-hd i{ color:#ff5240;}
.form-group .form-bd{ position: relative; flex:1; border-top: #000 1px solid; padding: 15px 0;}
.form-group .input{ line-height: 1;}
.form-group .input,
.form-group .textarea{ font-family: "GMarketSans", sans-serif; width: 100%; border: none; font-size: 24px;}
.form-group .textarea{ font-size: 16px;}
.form-group .input::placeholder,
.form-group .textarea::placeholder{ color: #999; font-weight: 300; font-size: 24px;}
.clear-btn{ position: absolute; right: 20px; top: 50%; transform: translateY(-50%); width: 20px; height: 20px; background: url(../images/ic_x3.png); border: none; font-size: 0; color: transparent; cursor: pointer; display: none;  }
.form-group.chk-group{display: block; padding-left: 460px;}
.form-group.chk-group label{ width: 100%; display: flex; align-items: center; border-top: #000 1px solid; padding: 15px 0;}
.form-group.chk-group label input{ margin-right: 20px;}
.form-group.chk-group label span{ flex:1;}
.privacy-bx{ background-color: #f3f3f3; padding: 25px 30px; font-size: 13px;}
.privacy-bx .tit{ font-weight: 400; font-size: 16px;}
.privacy-bx ul{ margin-top: 20px; font-weight: 300;}
.privacy-bx ul li{ text-indent: -15px; padding-left: 15px;}
.privacy-bx ul li::before{ content: ''; display: inline-block; width: 3px; height: 3px; border-radius: 50%; vertical-align: 4px; margin-right: 10px; background-color: #111;}
.privacy-bx ul li b{ font-weight: 400;}
.privacy-bx ul li + li{ margin-top: 15px;}
.privacy-bx p{ margin-top: 20px; font-weight: 400; }

.sty-rdo{ font-size: 24px;}
.sty-rdo input[type="radio"]{ width: 0; height: 0; opacity: 0;}
.sty-rdo span{ display: inline-flex; align-items: center; color: #b9b9b9;} 
.sty-rdo span::before{ content: ''; width: 10px; height: 10px; border-radius: 50%; background-color: #b9b9b9; margin-right: 8px;}
.sty-rdo input:checked + span{ color: #346bf4;}
.sty-rdo input:checked + span::before{ background-color: #346bf4;}
.sty-rdo + .sty-rdo{ margin-left: 90px;}

/* named upload */
.filebox{ position: relative; text-align: left; display: flex; width: 100%; background-color: #fff}
.filebox input[type="file"]{ position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip:rect(0,0,0,0); border: 0;}
.filebox label{ background-color: #aaa; display: flex; align-items: center; height: 26px; line-height: 26px; padding: 0 10px; text-align: center; color: #111;  cursor: pointer; font-size: .87em; font-weight: 300;}
.filebox label::before{ content: ''; margin-right: 4px; width: 13px; height: 13px; background: url(../images/icon_clib.png) no-repeat 50% 50% / cover;}
.filebox .upload-name{ flex: 1; display: inline-block; padding:0 20px; color:#080a12; border: none; font-size: 16px; font-family: inherit; line-height: 26px; height: 26px; vertical-align: middle; border-radius:0; background-color: #fff; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
.filebox .upload-display{ margin-bottom: 5px;}
.filebox .upload-thumb-wrap{ display: inline-block; max-width:360px; padding: 2px; vertical-align: middle; border: 1px solid #ddd; border-radius: 5px; background-color: #fff;}
.filebox .upload-display img { display: block; max-width: 100%; width: 100%; height: auto;}
.filebox .clear-btn{ right: 170px;}

@media screen and (max-width:1400px){

  .page-header .textBox{ padding-left:30px; padding-right:30px;}
  .page-header .textBox .title,
  .page-header .textBox .desc{ width: 100%; }

  .contents{ padding: 120px 30px 200px;}

  .services-nav.fixed{ padding-left: 30px;}

  /* main page */
  .main-visual .copy{ padding: 170px 60px 0;}
  .main-visual .copy .tx01{ font-size: 6vw;}
  .main-visual .pag{ left: 60px;}

  .main-contact{ padding: 170px 60px 120px;}

  @media screen and (max-width:1024px){

    #header > .inner{ padding: 0 30px;}
    #header .bt-mn{ display: block;}

    #gnb{ display: none;}

    .page-header .visual .img{ height: 400px;}
    .page-header .textBox{ gap:10px; padding-bottom: 40px;}
    .page-header .textBox .title{ font-size: 50px;}

    footer{ padding: 40px 30px;}

    /* sub page */
    .mservices-img{ display: none;}
    .mservices-img img{ height: 600px;}
    .mservices-tabs{ padding-left: 0; height: auto; }
    .mservices-tabs .tab{ position: relative; padding-left: calc(40% + 50px);}
    .mservices-tabs .tab + .tab{ margin-top: 50px;}
    .mservices-tabs .tab-itm{ position: absolute; top: 0; left: 0; display: block; width: 40%;}
    .mservices-tabs .tab-itm img{ height: 400px; width: 100%; object-fit: cover;}
    .mservices-tabs .tab h3{ font-size: 6vw;}
    .mservices-tabs .tab .tab-txt{ height: auto; padding: 50px 0;}

    @media screen and (max-width:820px){

      /* main page */
      .main-visual .copy{ padding: 0 60px;}

      /* sub page */
      .about-img{ flex-direction: column;}
      .about-img .itm{ display: flex;}
      .about-img .itm .img{ width: 240px;}
      .about-img .itm .txt{ flex:1; margin: 0 0 0 40px;}
      .about-tx{ flex-direction: column;}
      .about-tx ul{ width: 100%;}

      .services-page{ padding-left: 200px;}
      .services-nav.fixed{ left: 0; margin-left: 0;}

      .form-group{ flex-direction: column;}
      .form-group .form-bd{ width: 100%;}
      .form-group.chk-group{ padding-left: 0;}

      @media screen and (max-width:768px){

        /* main page */
        .main-contact .txt b{ font-size: 6vw;}

        @media screen and (max-width:640px){

          #header > .inner{ padding: 0 1.5rem; height: 5rem;}
          #header .logo a{ width: 12rem;}

          footer{ padding: 2rem 1.5rem;}
          footer .logo{ width: 12rem;}
          footer .footerCopy{ margin-top: 1.5rem; padding: 1.5rem 0 0 0; font-size: 1rem;}
          
          .page-header .visual .img,
          .services .page-header .visual .img{ height: 20rem;}
          .page-header .textBox,
          .services .page-header .textBox{ padding: 0 1.5rem 2rem;}
          .page-header .textBox .title{ font-size: 3rem;}
          .page-header .textBox .desc{ display: none;}

          .contents{ padding: 4rem 1.5rem 5rem;}

          .sub-tit{ font-size: 2rem; padding-left: 2rem; margin: 3rem 0 1.5rem;}
          .sub-tit::before{ width: 1.4rem; height: 1.4rem; }

          /* main page */
          .main-visual .bg{ height: 60rem; max-height: 90vh;}
          .main-visual .copy{ padding: 0 1.5rem; flex-direction: column; justify-content: center; align-items: flex-start;}
          .main-visual .copy .tx01{ font-size: 9vw;}
          .main-visual .copy .tx02{ position: relative; width: 100%; font-size: 1.2rem; padding: 0 0 0 1.5rem; margin-top: 3rem; right: auto; left: auto; bottom: auto;}
          .main-visual .copy .tx02::before{ top: 0; bottom: 0;}
          .main-visual .pag{ bottom: 4rem; left: 1.5rem;}

          .main-service{ padding: 4rem 1.5rem;}
          .mservices-tabs .tab{ padding: 0; padding-left: 0;}
          .mservices-tabs .tab-itm{ position: relative; width: 100%; }
          .mservices-tabs .tab-itm img{ height: 100vw;}
          .mservices-tabs .tab .tab-txt{ padding: 0;}
          .mservices-tabs .tab .tab-txt p{ font-size: 1.3rem;}
          .mservices-tabs .tab.selected .tab-txt{ padding: 0;}

          .main-contact{ padding: 5rem 1.5rem;}
          .main-contact .txt p{ margin-top: 3rem; font-size: 1.3rem;}
          .main-contact .txt p br{ display: none;}

          /* sub page */
          .about-img{ gap:4rem;}
          .about-img .itm{ flex-direction: column;}
          .about-img .itm .img{ width: 100%;}
          .about-img .itm .txt{ margin: 2rem 0 0 0; gap:1rem}
          .about-img .itm .txt b{ font-size: 1.8rem;}
          .about-tx{ margin-top: 4rem;}
          .about-tx ul li{ align-items: flex-start;}
          .about-tx ul li + li{ margin-top: 2rem;}
          .about-tx ul li b{ width: 12rem; font-size: 1.8rem;}
          .about-tx ul li{ span{ padding-top: .4rem;}}

          .services-page{ padding-left: 0;}
          .services-nav{ position: relative; top: auto; left: auto; display: flex; justify-content: space-between; align-items: center; gap:3rem; padding: 0; margin-bottom: 3rem;background-color: #080a12;}
          .services-nav li + li{ margin: 0;}
          .services-nav a{ font-size: 1.5rem;}
          .services-nav.fixed{ position: fixed; top: 0; left: 0; width: 100%; padding: 2rem 1.5rem; z-index: 2;}
          .services-img .txt{ padding: 1.5rem;}          
          .services-con-itm{ padding-top: 80px; margin-top: -80px;}
          .services-con-itm + .services-con-itm{ margin-top: 0;}
          .services-tx{ flex-direction: column;}
          .services-tx + .services-tx{ margin-top: 3rem;}
          .services-tx .tit{ width: 100%; font-size: 1.8rem;}
          .services-tx .tit br{ display: none;}
          .services-tx ul{ margin-top: 1.5rem;}

          .form-group .form-hd{ width: 100%; font-size: 1.8rem; padding: 1rem 0;}
          .form-group .form-bd{ padding: 1rem 0;}
          .form-group .input, 
          .form-group .textarea{ font-size: 1.3rem;}
          .form-group .input::placeholder, 
          .form-group .textarea::placeholder{ font-size: 1.3rem;}
          .form-group + .form-group{ margin-top: 3rem;}

          .sty-rdo{ font-size: 1.3rem;}
          .sty-rdo + .sty-rdo{ margin-left: 2rem;}
          

        }/* /640px */

      }/* /768px */

  }/* /820px */

  } /* /1024px */

} /* /1400px */