@charset "utf-8";

#main_sub {position:relative; min-height: 800px; }
#main_sub100 {position:relative;height: 100vh; }
.sub_area{padding-top:108px; position:relative; }
.sub_area:after{content:''; display:block; clear:both;}

#main_sub{position:relative; }


.sub_contents1{width:100%; position:relative;  z-index: 0  ; }
.sub_contents1:after{content:''; display:block; clear:both;}
.sub_contents2{width:100%; position:relative;  z-index: 0  ; overflow: hidden; }

.sub_bg01{position:relative;  background-image: linear-gradient(to bottom, #FEF9F4, #F6F2EC);  }
.sub_bg01:after{position:absolute; content: ''; background: url(../images/common/sub_bg01.png) center top no-repeat; width:100%; height: 100%; left:0; top:10%; z-index: -1;}
.sub_bg02{position:relative; background: url(../images/common/sub_bg02.png)  no-repeat; height: 82.5vh; overflow: hidden;  }
.sub_bg03{position:absolute;width:100%;left:0; top:0; background: url(../images/common/sub_bg03.png)  no-repeat; background-size: cover; height: 100%; z-index: -10;   }
.kenburns-bottom-right {
	-webkit-animation: kenburns-bottom-right 5s ease-out both;
	        animation: kenburns-bottom-right 5s ease-out both;
}
@-webkit-keyframes kenburns-bottom-right {
    0% {
      
      -webkit-transform: scale(1) translate(0, 0);
              transform: scale(1) translate(0, 0);
      -webkit-transform-origin: 84% 84%;
              transform-origin: 84% 84%;
    }
    100% {
       
      -webkit-transform: scale(1.25) translate(20px, 15px);
              transform: scale(1.25) translate(20px, 15px);
      -webkit-transform-origin: right bottom;
              transform-origin: right bottom;
    }
  }
  @keyframes kenburns-bottom-right {
    0% {
     
      -webkit-transform: scale(1) translate(0, 0);
              transform: scale(1) translate(0, 0);
      -webkit-transform-origin: 84% 84%;
              transform-origin: 84% 84%;
    }
    100% {
      
      -webkit-transform: scale(1.25) translate(20px, 15px);
              transform: scale(1.25) translate(20px, 15px);
      -webkit-transform-origin: right bottom;
              transform-origin: right bottom;
    }
  }




.star1{position:absolute; top:10%; right:20%; width:50px; height: 50px;      transform: translateX(0px); }
.star1 img{  animation: rotate_image 6s linear  infinite;transform-origin: 50% 50%;}
@keyframes rotate_image{
    100% {
        transform: rotate(360deg);
    }
}

@keyframes rotate_image2{
    100% {
        transform: rotate(-360deg);
    }
}

.star2{position:absolute; top:30%; right:5%; width:50px; height: 50px; transform: translateX(0px); }
.star2 img{ width: 70%;  animation: rotate_image2 6s linear  infinite;transform-origin: 50% 50%;}
.star3{position:absolute; bottom:20%; left:10%; width:50px; height: 50px; transform: translateX(0px); }
.star3 img{ width: 80%;  animation: rotate_image 6s linear  infinite;transform-origin: 50% 50%;}


#Inbox {position:relative; width: 1400px; margin:0 auto; padding: 80px 0;}
#Inbox:after{content:''; display:block; clear:both;}
.vh83 {height: 82.5vh;}

#Inbox h1.tit01{text-align: center; font-size: 4.2rem; font-family: 'onemobiletitle'; font-weight: 400;}
#Inbox h1.tit02{text-align: left; font-size: 4.2rem; font-family: 'onemobiletitle';  color:#533C32; line-height: normal; margin-bottom: 15px;}
#Inbox h1.tit02 em {font-weight: normal;font-size: 3.2rem; }
.text-focus-in {	-webkit-animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
	        animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;}
            @-webkit-keyframes text-focus-in {
                0% {
                  -webkit-filter: blur(12px);
                          filter: blur(12px);
                  opacity: 0;
                }
                100% {
                  -webkit-filter: blur(0px);
                          filter: blur(0px);
                  opacity: 1;
                }
              }
              @keyframes text-focus-in {
                0% {
                  -webkit-filter: blur(12px);
                          filter: blur(12px);
                  opacity: 0;
                }
                100% {
                  -webkit-filter: blur(0px);
                          filter: blur(0px);
                  opacity: 1;
                }
              }


.location {position:relative; width: 100%; height: 50px; background: #533C32; z-index: 50;}
.fixed {position: fixed;top: 0; background:#533C32; box-shadow: 2px 3px 5px 2px rgba(0,0,0,.2);}
.fixed2{position: fixed;top:50px; color:#fff !important; text-shadow:2px 3px 5px 2px rgba(0,0,0,.2); transition:all .25s ease; ;}
.fixed3{position: fixed;top:0px; color:#fff !important; text-shadow:2px 3px 5px 2px rgba(0,0,0,.2); transition:all .25s ease; ;}
.fixed2 em {color:#6EB7FF !important}


.location-dep3{position:relative;   box-sizing: border-box}
.location-dep3 .loca_dep3_nav{width:90%; margin:0 auto; position:relative; z-index: 9999; }
.location-dep3 .loca_dep3_nav:after{ content: ""; display: block; clear: both; }
.location-dep3 .loca_dep3_nav>ul>li.home{ min-width: auto;width:70px;position:relative  }
.location-dep3 .loca_dep3_nav>ul>li.home:after{position:absolute; content: ''; width:1px; height: 100%; background: #9F928C !important; right:0; top:0}
.location-dep3 .loca_dep3_nav>ul>li.home i,  .location-dep3 { color:#fff !important;vertical-align:middle; margin-bottom: 5px}
.location-dep3 .loca_dep3_nav>ul>li {min-width:185px;  float:left; text-align: center; position:relative; line-height: 49px;box-sizing: border-box; font-size: 1.8rem; }
.location-dep3 .loca_dep3_nav>ul>li:first-child:after{background:none}

.location-dep3 .loca_dep3_nav>ul>li:after{position:absolute; content: '\e940'; font-family: 'xeicon';  width: 30px; height: 50px;right:0px; top:0}
.location-dep3 .loca_dep3_nav>ul>li:last-child:after {display: none;}
.location-dep3 .loca_dep3_nav>ul>li>a{color:#fff; display: inline-block; line-height: 50px;}
.location-dep3 .loca_dep3_nav>ul>li>a:hover{display: inline-block; width: 100%; height: 100%; color:#fff;   text-decoration: underline; }
.location-dep3 .loca_dep3_nav>ul>li.select{; color:#013392;  min-width: 200px; box-sizing: border-box}

.subdepth3{display:none}

.custom{box-sizing:border-box}
.custom button{display:block;font-size: 1.8rem; position:relative;background:none;border:0;height:47px;line-height:50px;margin:0;letter-spacing:-0.2px;cursor:pointer;border-radius:none;width: 100%;color: #fff;text-align: left; margin: 0 10px; box-sizing: border-box}
.custom button:hover, .custom .util_menu > li.custom button:focus{color:#fff; }
.custom.active button{color:#fff;}
.custom button span{display:inline-block; }
.custom button span:after{content:"\e946"; position:absolute; right:25px; top:0; font-size:14px; color:#fff; font-family:"xeicon"; font-weight:600; transform:rotate(-180deg); transition:all .25s ease;}
.custom.active button span:after{color:#fff; transform:rotate(0deg);}

.drop_open{z-index:10; position:absolute;    box-shadow: 2px 3px 5px 2px rgba(0, 0, 0, .1);border-radius: 5px; border:1px solid #fff; width:100%; top:54px; left:0}
.data_select ul li .drop_open ul{ border-top:none; background:#fff;}
.data_select ul li .drop_open ul li{border-bottom:1px solid #ddd; background:#fff; transition:all .25s ease;}
.data_select ul li.drop_open ul li:hover{background:#f8f8f8;}
.data_select ul li .drop_open ul li:last-child{border-bottom:0;}
.data_select ul li .drop_open ul li  a{display:block; color:#000; padding:0px 15px; font-size:1.6rem; letter-spacing:-0.2px; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; }
.data_select ul li .drop_open ul li  a:hover{color:#1D62EC; text-decoration: underline}
.data_select ul li .drop_open ul li  a.select{color:#1D62EC;  }




.sub_contents1 .intro > h1 {font-family:'ONEMobileTitle'; font-size: 4.2rem; text-align: center;  width:85%;  left:7.5%; position:relative}
.intro { width:100%; margin-top:80px; text-align: center;position:fixed; font-size:3rem; font-weight: 600;}
.intro .text01 {margin-top:50px; }  
.intro .text01 em {font-weight: 600; color:#1D62EC }
/* 버튼 */
.base_btn1{margin-top:150px}
.btn_a01 {border-radius: 30px; font-size: 1.8rem; border:0;  padding: 8px 30px;background-color: rgba(255,255,255,0.2); backdrop-filter: blur(10px); font-weight: 600; color:#fff}
.btn_a01.on, .btn_a01:hover{background: #000; color:#fff}

.base {  position: relative;  width: 100%;  height: 100vh; z-index: -1;   }
.base .inner {  position: absolute; top:350px;  left: 7.5%;  width: 85%;   height: 800px;  background-image: url(../images/bg1.png); background-size: cover;
   background-repeat: no-repeat; border-radius: 15px;  z-index: -10; color:#fff; scale:calc(1.0)}  
 .innerbg2{ background-image: url(../images/bg2.png) !important; background-size: cover;} 
   

#header-stones {position: absolute;    top: 55.08333vw;    left:50%;    width: 100%;    height: 50vh;}
section .mainbase {  width: 100%; height:100vh;   position:relative; color:#fff; text-align: center; background-size: cover}


.Txt_area{      position: relative;    z-index:100; background: #fff;   color: #000;    font-size: 50px;  height: auto;   text-align: center;    
    width: 100%;  margin-top: 200px;  padding:80px 10%; overflow: hidden; }
.Txt_area .txt1 {text-align: left; font-size: 1.8rem;}


.mainbase{height: 100%;}


/* sub_visual */
.subVisual {position: relative;height:220px; box-sizing:border-box; overflow:hidden; margin-top:0; width:100%;}
.subVisual:before{position:absolute; content: ''; background: #000;width:100%; height: 100%; z-index: -2;}
.subVisual:after {content:'';position: absolute;width: 100%;height: 100%;left: 0;top: 0;background-repeat: no-repeat;background-position: center 90%;-webkit-background-size: cover;
    background-size: cover;transition:all 2s ease-in-out; transform:scale(1.2);}
.subVisual.on:after {transform:scale(1) ;}
.subVisual.notice:after {background-image:url(../images/sub03_visual.png); z-index:-1;  animation: fadein 3s; -moz-animation: fadein 3s; /* Firefox */  }
.subVisual.customer:after {background-image:url(../images/sub02_visual.png); z-index:-1;  animation: fadein 3s; -moz-animation: fadein 3s; /* Firefox */  }
.subVisual.company:after {background-image:url(../images/sub04_visual.png); z-index:-1;  animation: fadein 3s; -moz-animation: fadein 3s; /* Firefox */  }
.company_bg{ position: fixed;top: 70%;left:0;/* background: url(../images/sub/history_bg.png) no-repeat; */ background-size: cover;   width: 100%;height: 321px;;}
.subVisual h1{  text-align:center; color:#fff; font-size:4.2rem; font-family: 'onemobiletitle'; font-weight:400; padding-top:80px; z-index: 10;}
    @keyframes fadein {
        from {transform:scale(1.2);}
        to {
            transform:scale(1);
        }
    }
    @-moz-keyframes fadein { /* Firefox */
        from {
           transform:scale(1.2);
        }
        to {
            transform:scale(1);
        }
    }
    @-webkit-keyframes fadein { /* Safari and Chrome */
        from {
             transform:scale(1.2);
        }
        to {
            transform:scale(1);
        }
    }
    @-o-keyframes fadein { /* Opera */
        from {
            transform:scale(1.2);
        }
        to {
            transform:scale(1);
        }
    }

.incruitBox {position:relative; margin: 30px 0; overflow:hidden;}
.incruitBox p{text-align: center; width: 100%; font-size: 3rem;}
.incruitBox ul { width:80%; margin: 0 auto;margin-top: 60px;}
.incruitBox li {display: inline-block; width: 24.5%; text-align: center; color:#533C32;}
.incruitBox li > div {width:185px; height: 185px; border-radius: 50%; background: #fff; margin: 0 auto;}
.incruitBox li > div > span {height: 125px; width:125px; display: block; text-align: center; margin: 0 auto;}
.icon01{background: url(../images/sub/icon01.png) no-repeat center;}
.icon02{background: url(../images/sub/icon02.png) no-repeat center;}
.icon03{background: url(../images/sub/icon03.png) no-repeat center;}
.icon04{background: url(../images/sub/icon04.png) no-repeat center;}


.sub_contents3 {height: 100vh; position:relative; width: 100%;}

.cont_1{    position:absolute; overflow:hidden;    width:100%;height:80vh;    left:0; z-index: -1;}
#cont_2{    top:0%;    /* top:100%; */       transition:top 1s;}

#slider{    display:flex;    align-items:flex-start;    position:absolute;    height:420px;    top:calc(60% - 180px); left:0w;       transition:transform .3s;}
#slider li{    flex:none;    display:flex;    justify-content:center;align-items:center;    position:relative; overflow:hidden; width:350px;   height:100%;
    aspect-ratio:1/1;    margin:0 30px 0 0;     border-radius: 8px;   transition:transform .2s; background-color:rgb(255,255,255,.3);backdrop-filter: blur(5px); }
#slider li .product {position:relative; height: 100%;}
#slider li .product > dl {padding:40px 30px; text-align: center;}
#slider li .product > dl > dt {font-size: 4rem; font-family:'onemobiletitle'; margin-bottom: 40px;}
#slider li .product > dl > dt > em {font-size: 1.5rem; vertical-align: top;}
#slider li .product > dl > dt > p {font-size: 1.8rem; color:#1D62EC}
#slider li .product > dl > dd {font-size: 1.5rem;}
#slider li .product .pro_txt {position:absolute;bottom:0; background: #533C32; height: 120px; border-bottom-left-radius: 8px; border-bottom-right-radius: 8px; color:#fff; padding: 20px; 
  font-size: 1.4rem; font-weight: normal;  text-align: center; }

#indicator{    position:absolute;    left:50%;bottom:0%;    transform:translateX(-50%);    width:100%; height:10px; border-radius: 8px;   background:#fff;    border:1px solid #fff;}
#indi_bar{    position:absolute;    left:0;top:0;    height:100%;width:100%;    background:#DFD9D4;   border-radius: 8px;  clip-path:polygon(0% 0%, 10px 0%, 10px 100%, 0% 100%);
    transition:all .2s;}

/* 연구컨설팅  */
.consulting{position:relative; width: 100%; height: 350px; border-radius: 8px; margin-bottom: 100px;}
.color-change-3x{	-webkit-animation: color-change-3x 6s linear infinite alternate both;
    animation: color-change-3x 4s linear infinite alternate both;}
    @-webkit-keyframes color-change-3x {
        0% {
          background: #533C32;
        }
        50% {
          background: #8B746B;
        }
        100% {
          background: #928580;
        }
      }
      @keyframes color-change-3x {
        0% {
          background: #533C32;
        }
                50% {
          background: #8B746B;
        }
        100% {
          background: #928580;
        }
      }
      
.consulting h3 {color:#fff; font-size: 4rem; font-weight: bold;position:absolute; left:10%; top:40%;transition:all .25s ease;}
.consulting h3 em {display: block; font-size: 1.8rem;}
.consulting .consult_box {display: flex; position:absolute; right:25px; bottom:-80px; gap: 0px 25px; }
.consulting .consult_box >.inbox {width:25%;width:300px ;  height: 270px; background:#fff;  box-shadow: 2px 3px 5px 2px rgba(0, 0, 0, .1);border-radius: 5px; padding: 45px 30px; }
.consulting .consult_box >.inbox h4{ font-size: 2.5rem;  font-family: 'ONEMobileTitle'; margin-bottom: 20px;}
.consulting .consult_box >.inbox ul > li {position:relative; padding-left: 15px;}
.consulting .consult_box >.inbox ul > li:after{position:absolute; content: ''; width:5px; height: 5px ; border-radius: 50%; background: #1D62EC; left:0; top:10px}


.marquee { z-index: 1; overflow: hidden; position: absolute; bottom: 60px; left: 0; max-width: 100%; width: 100vw; height: 150px; font-size: 120px; 
     color: transparent; -webkit-text-stroke: 1px #fff; font-weight: bold; }
.marquee .track { position: absolute; white-space: nowrap; will-change: transform; animation: marquee 60s linear infinite; }
@keyframes marquee {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}
@keyframes subvisualFadeIn {
	to { opacity: 1; }
}
@keyframes subvisual {
    to { transform: scale(1); }
}




/* 연혁 */
.history_list {position:relative; padding-left:50%;}
.history_list .years_tit {position:absolute; top:10%; left:0; width:50%; height:80vh; padding-bottom: 0;  max-height:calc(var(--vh, 1vh) * 80);  display:flex; background: no-repeat 50% 50% / cover; flex-direction:column; justify-content:center; align-items:center; text-align:center;}
.history_list .years_tit .tit {font-size:20px; color:#fff; font-weight:300; line-height:1.2; margin-bottom:40px; text-align:center; }
.history_list .years_tit ul {display:flex; flex-direction:column; gap:20px; margin-top: 300px;}
.history_list .years_tit li {font-size:4.5rem; color:rgba(0,0,0,0); font-weight:700; line-height:84px; -webkit-text-stroke:1px rgba(0,0,0,.5)}
.history_list .years_tit li.on, .history_list .years_tit li:hover {color:#1D62EC; -webkit-text-stroke:0;}
.history_list .years_tit li a {display:block; color:inherit;}
.history_list .years_con {padding:0px 0 100px 80px;}
.history_list .years_con dl {margin-bottom:60px;}
.history_list .years_con dl:last-child {margin-bottom:0;}
.history_list .years_con dt {position:relative; font-size:4rem; color:#000; font-weight:700; line-height:1.2;}
.history_list .years_con dt .ypoint {position:absolute; top:-50vh;}
.history_list .years_con dd {padding-top:30px; display:flex; flex-direction:column; gap:15px;}
.history_list .years_con dd p {position:relative; color:#333; line-height:30px;;}

.start .years_tit {position:fixed;}
.history_list.end .years_tit {position:absolute; bottom:0; top:auto;}

/* 회사소개 */
.companyArea {position:relative; overflow: hidden;}
.companyArea dl.introduction{position:relative; overflow: hidden; margin-bottom: 30px;}
.companyArea dl.introduction dt { width:38%; color:#fff;   padding: 50px 20px;  ;float: left; }
.companyArea dl.introduction dt img {height: 100%; width: 100%;}
.companyArea dl.introduction dd {float: left; width:62%; padding: 60px 30px 50px; }
.companyArea dl.introduction dd > p {font-size: 2.5rem; font-weight: 500; margin-bottom: 15px;}
.companyArea dl.com_info { position:relative; overflow: hidden; width:48%; float: left; border-bottom:1px solid #ededed; margin-bottom: 25px;}
.companyArea dl.com_info:nth-child(odd) { margin-left: 4%;}
.companyArea dl.com_info dt{color:#1D62EC; font-size: 1.5rem;}
.companyArea dl.com_info dd {padding: 8px 0;}

.vision {position:relative; overflow: hidden; margin-top: 50px;}
.vision ul li { width:24%; margin:0 0.5%; background: #F3EEE5; border-radius: 8px ; float: left; padding:60px 30px; font-size: 2.5rem;  font-family: 'onemobiletitle'; text-align: center;}
.vision ul li>p {color:#1D62EC; font-size: 1.8rem; margin-bottom:20px;}


.logobox01{padding-top: 20px; display: inline-block; position: relative; width: 100%; }
.logo01{background: url(../images/sub/grid.png); width: 49%; height: 234px; float: left; text-align: center; margin-right: 2%; line-height: 230px; margin-top: 30px;}
.logo01:last-child{margin-right: 0px;}

.logo01 img{text-align: center; vertical-align: middle;position: relative }

.logobox02{padding-top: 20px; display: inline-block; position: relative; width: 100%;margin-top: 30px;}
.logobox02>div{float: left;  width:49%; margin-right: 2%; }
.logobox02>div:last-child{margin-right: 0px;}


.logo02{border: 1px solid #dfdfdf; width: 100%; height: 230px; float: left; text-align: center;  line-height: 230px; box-sizing: border-box; margin-top: 30px;}
.logo02 img{text-align: center; vertical-align: middle;position: relative }


.down_btn{width: 580px; position: relative; padding-top: 20px;}
.down_btn button{ cursor:pointer}
.down_btn div{float: left;}
.down_btn div button{border-style: solid; border-color: #c1c1c1; border-width: 1px 0px 1px 1px; background-color: #eeeeee; width: 290px; box-sizing: border-box; padding: 10px;}
.down_btn div:nth-child(2) button{border-right: 1px solid #c1c1c1;}

.down_btn div button::after{content: url(../img/sub/ico_down.png); clear: both; padding-left: 10px; vertical-align: middle;}


.color_wrap{padding: 20px 0px;; display: inline-block; position: relative; width: 100%;}
.colorbox{ width: 49%; height: 230px; float: left;box-sizing: border-box;float: left; margin-right: 2%; margin-top: 30px;}
.colorbox:last-child{margin-right: 0px;}

.colorbox p{padding: 12px 12px 0px; font-weight: bold;}

.c_box{width: 50%; float: left;}
.c_box div {padding: 16px 12px 0px; position:relative}
.c_box div dl{ margin-top: 60px;}
.c_box div dl dt{color: #000; font-size: 1.3rem;}
.c_box div dl dd{padding-bottom: 5px;font-size: 1.3rem; color:#555}

.mcolor01::before{content: ''; width: 80%; height: 45px; background-color: #593f37; clear: both; position: absolute;}
.mcolor02::before{content: '';width: 80%; height: 45px; background-color: #221815;clear: both; position: absolute;}
.scolor01::before{content: '';width: 80%; height: 45px; background-color: #f3eee5;clear: both; position: absolute;}
.scolor02::before{content: '';width: 80%; height: 45px; background-color: #9a775a;clear: both; position: absolute;}


.cont01{ position: relative; width: 100%;padding-bottom: 50px;}

/* 오시는길 */
.directions {position:relative; background: #F5F5F5; overflow: hidden; }
.directions .map {width:820px; height: 470px; background-color: #fff; border:1px solid #F5F5F5; overflow: hidden;}
.directions .address { position:absolute; width: 420px; height: 300px; right:110px; top: 100px;}
.directions .address h3{font-size: 2.5rem; font-weight: bold;}
.directions .address p {margin-top: 20px; font-size: 1.8rem;}
.directions .address p i {color:#7B7B7B; vertical-align: middle; font-size: 2rem;}
.directions .address ul {margin-top: 20px; color:#777777}
.directions .address ul li em {padding-left: 30px;}



@media (max-width:1600px){
    .consulting h3 {top:18%; transition:all .25s ease;}
}


@media (max-width:1400px){

    .location-dep3 .loca_dep3_nav {width:100%}
    .Txt_area img{width:100%}
    #Inbox {width:100%; padding: 50px 10px;}
    .directions .map {}
    .directions .address {position:relative; right:0; top:0; margin: 30px; height: auto;}

    }
    
    @media (max-width:1280px){

        .incruitBox ul {width:100%}
        .consulting .consult_box {margin:0 auto; width:90%; right:5%}
        .consulting .consult_box >.inbox {width:33.3%; padding: 40px 20px;}
        .consulting .consult_box >.inbox h4 {font-size: 2rem;}
        .consulting .consult_box >.inbox ul > li {font-size: 1.6rem;}
        .start .years_tit {position:absolute; width:100%; height: 150px; max-height: 150px; top:50px; left:0}
        .history_list .years_tit ul {display: inline-block; width:100%; margin-top: -130px; background:#f2f2f2; border-radius: 15px; padding: 20px 0;}
        .start .years_tit li { display: inline-block; float: left; width: 100%;}
        .history_list .years_tit li {font-size: 3.5rem; line-height: 50px;}
        .history_list{padding-left: 0; padding-top: 80px;}
        .history_list .years_con {margin:100px 10px 40px 10px; padding: 0 15px ;}
        .companyArea dl.introduction dt { width:100%;   padding: 10px 20px;  ;float: none; }
        .companyArea dl.introduction dd {width:100%; padding: 30px 15px 50px;}
        .vision ul li {font-size: 2rem; padding: 60px 20px;}

        .logo01 { width:100%; margin-right:0; margin-bottom: 15px; border-right:1px solid #ccc}
	.logobox02>div {float:none ; margin-right: 0; width:100%} .logo02 {width:100%; float:none} 
	.down_btn {width: 100%;}.down_btn div button {width:100%;} .down_btn div {width:50%;}
	.colorbox {width:100%; margin-right: 0; margin-bottom: 15px;}
  .mcolor01::before, .mcolor02::before, .scolor01::before, .scolor02::before {left:0.5%; width:99%}

  .directions .map {width:100%;}
  
       

     
    }
    
    @media (max-width:960px){
        .incruitBox li {width:49.5%}
        .incruitBox li:nth-child(3),  .incruitBox li:nth-child(4) {margin-top: 20px;}

        

    }
    
    @media (max-width:768px){
    
        .location {height: 40px; }
        .location-dep3 .loca_dep3_nav>ul>li.home {width:40px;line-height: 40px;} .location-dep3 .loca_dep3_nav>ul>li>a {line-height: 40px;}
        .location-dep3 .loca_dep3_nav>ul>li {width:auto; min-width: auto; padding:0 35px 0 15px; line-height: 40px; }
        .location-dep3 .loca_dep3_nav>ul>li.select {min-width:auto; } .custom button {line-height: 40px; height: 40px;}
        .custom button span:after {right:0} 
        .intro {margin-top:50px}
        .intro .text01 {margin-top:30px}
        .base .inner {top:250px}
        .Txt_area {padding:50px 5%}
        .intro {font-size: 2.5rem;}
        .vision ul li {width:49%; margin-bottom: 1%;}
    
    }

    @media (max-width:640px){
        .subVisual {height: 160px;}
        .subVisual h1 {padding-top:50px}

        .consulting {height: 500px;}
        .consulting h3 {top:14%}
        .consulting .consult_box {display: block; top:0; margin-top: 160px;}
        .consulting .consult_box >.inbox {height: auto; margin-bottom: 15px; padding: 20px 20px ;width:100%}
     
    
    }


    @media (max-width:480px){
         .location-dep3 .loca_dep3_nav>ul>li, .custom button {font-size: 1.5rem;}
        
         .incruitBox li {width:49%}
         .incruitBox li > div {width:150px; height: 150px;}
         .incruitBox li > div > span {width:100px; height: 100px;}
         .icon01,  .icon02,  .icon03,  .icon04 {background-size: 50%;}
         

    }