.section{height: 100vh;}
.main_bd{padding:0 60px;}
.section >div{height: 100%;}
.section >div >div{height: 100%;}


.page_but {border-radius: 30px; padding:12px 50px 12px 20px;position: absolute;text-align: left;font-size: 1.125rem;;position: relative;transition-duration: 0.3s;}
.page_but::before{content:'';display: block;width: 7px;background: url(../img/main/but.png) no-repeat center/cover;position: absolute;    padding-bottom:10%;right:20px;top:50%;transform: translateY(-50%);transition-duration:1s;}

/*풀페이지 네비*/
#fp-nav { margin-top: 0; width: 80px;height: 100%;top: 0;transform: none; right: auto !important;left:0;display: flex; align-items: flex-end;   position: relative; }
#fp-nav::before{content:'';display: block;width: 100%;height: 110vh;background: #026eb8;transition-duration: 0.3s;position: absolute;left:0;top: 0;;}

#fp-nav ul li:first-child,
#fp-nav ul li:last-child{display: none;      }

#fp-nav ul{    display: flex;justify-content:space-around;height: calc(100% - 200px);       width: 100%;    margin-bottom: 50px !important;    flex-direction: column;transition-duration: 0.3s; }
#fp-nav ul li{transform: rotate(-90deg);    width: auto !important;margin: 0 !important;height: auto!important;}
#fp-nav ul li span{display:none;}
#fp-nav ul li a{color:#fff;transition-duration: 0.3s;}
#fp-nav ul li a::after{position: absolute;    top: -11px;left: 0;    font-weight: 400;opacity: 0.8;}
#fp-nav ul li:nth-child(2) a:after{content:'Introduction'; display: block;}
#fp-nav ul li:nth-child(3) a:after{content:'Service'; display: block;}
#fp-nav ul li:nth-child(4) a:after{content:'Product'; display: block;}
#fp-nav ul li:nth-child(5) a:after{content:'Contact Us'; display: block;}


#fp-nav ul li a.active::after{font-weight: 600;opacity: 1;}


.fp-viewing-1 #fp-nav::before,
.fp-viewing-3 #fp-nav::before{background: #ddd;}
.fp-viewing-1 .mo_navi .close_but span::before,
.fp-viewing-3 .mo_navi .close_but span::before{background: #333;}
.fp-viewing-1 #fp-nav ul li a,
.fp-viewing-3 #fp-nav ul li a {color: #333;}


.fp-viewing-5 #main header h1 a,
.fp-viewing-4 #main header h1 a,
.fp-viewing-1 #main header h1 a{background: url(../img/main/logo3.png)no-repeat center/cover;}

.fp-viewing-5 #fp-nav {z-index: -1;}
.fp-viewing-5 #fp-nav ul {height: calc(100% - 310px); margin-bottom: 210px !important;}

#main .mo_navi .close_but.on::before{display: none;}



/*.section01*/
.section01 .main_slide_mySwiper{height: 100%;}
.section01 .main_slide_mySwiper .swiper-slide{ height: 100%;;}
.section01 .main_slide_mySwiper .swiper-slide .logo{background: url(../img/main/logo.png)no-repeat center/cover;width: 300px;padding-bottom: 13.5%;    display: block;;margin-bottom:20px;}
.section01 .main_slide_mySwiper .swiper-slide .text_box{position: absolute;left:60px;bottom:100px;color:#fff;text-align: left;font-size: 1.5rem;font-weight: 300;}


/*.section02*/
.section02 > div,
.section03 > div,
.section05 > div{display: flex;    flex-direction: column;   justify-content: center;}

.section02 .main_bd,
.section03 .main_bd,
.section05 .main_bd{display: flex;    flex-direction: column;   justify-content: center;}

.section02 ul{display: flex;flex-direction: column;justify-content: space-around;height: 80%;font-size: 1.25rem;position: relative;}
.section02 ul::before{content:'';display: block;background: url(../img/main/sec02_01.png)no-repeat center/cover;position: absolute;top:0;right:-80px;width: 50%;padding-bottom:30%;z-index: -1;;}
.section02 ul::after{content:'';display: block;background: url(../img/main/sec02_02.png)no-repeat center/cover;position: absolute;top:0;left:0;width: 70%;padding-bottom:8.85%;z-index: -1;opacity: 0.1;top:-20px;}
.section02 h2{font-size: 2rem;font-weight: 900;margin-bottom:15px;transition-duration: 0.3s;}

.section02 ul li{cursor: default;}
.section02 ul li p{color:#888;transition-duration: 0.3s;}
.section02 ul li{width: fit-content;}



.section02 ul li:nth-child(2){margin:0 auto;padding:25px 60px;background: #ddd;transition-duration: 0.3s;}
.section02 ul li:nth-child(3){margin-left:auto;}

.section02 ul li:hover h2{color:#026eb8}
.section02 ul li:hover p{color:#333}

.section02 ul li:hover:nth-child(2){background: #026eb8;}
.section02 ul li:hover:nth-child(2) h2{color:#fff}
.section02 ul li:hover:nth-child(2) p{color:#fff}


.section02 ul li.page_but_li{position: absolute;left:0;bottom:50px;}
.section02 .page_but {width: 130px;color:#888;border:1px solid #ddd;}
.section02 .page_but:hover{color:#026eb8;border-color: #026eb8;}
.section02 .page_but:hover::before{background: url(../img/main/but2.png) no-repeat center/cover;}




/*.section03*/
.section03{background: url(../img/main/sec03_bg.png)no-repeat center/cover;color: #fff;}
.section03 .sec03_tit{font-size: 1.125rem;;}
.section03 .page_but{position: relative;width: 130px;;color:#fff;border:1px solid #fff;margin:30px auto 80px;}
.section03 .page_but::before{background: url(../img/main/but3.png) no-repeat center/cover;}

.section03 .page_but:hover{background: #026eb8;border:1px solid #026eb8;}

.section03 ul {display: flex;margin:0 auto;width: 60%;    justify-content: center;}
.section03 ul li{width: 30%;}
.section03 ul li > div{background: rgba(0,0,0,0.5);border-radius: 50%;display: flex;    flex-direction: column;justify-content: center;align-items: center;}
.section03 ul li:first-child{transform: translateX(30px);}
.section03 ul li:last-child{transform: translateX(-30px);}
.section03 ul li i{display: block;width: 70px;height: 70px;;margin:0 auto;}
.section03 ul li P{text-align: center;font-weight: 600;margin-top:10px;font-size: 1.125rem;}



/*.section04*/
.section04> div{height: 100%;}
.section04 ul{display: flex;height: 100%;}
.section04 ul li{width: 25%;position: relative;transition-duration: 0.3s;}
.section04 ul li p{font-size:2rem; font-weight: 900;color:#fff;transform: translateY(60px);transition-duration: 0.3s;}
.section04 ul li > div{position: absolute;bottom:80px;left:40px;transition-duration: 0.3s;}

.section04 .page_but{position: relative;width: 130px;;color:#333;border:1px solid #fff;background: #fff;margin-top:20px;transform: translateY(100px);
    opacity: 0;transition-duration: 0.3s;}
.section04 .page_but::before{background: url(../img/main/but4.png) no-repeat center/cover;}


.section04 ul li::before{content:'';display: block;width: 0%;height: 100%;background: rgba(0,0,0,0.5);position: absolute;left:0;top:0;transition-duration: 0.6s;opacity: 0;}
.section04 ul li:hover{width:40%;}
.section04 ul li:hover::before{width: 50%;opacity: 1;}
.section04 ul li:hover p{transform: translateY(0); font-size: 2.5rem;; }
.section04 ul li:hover .page_but{transform: translateY(0);    opacity: 1;}


.section04 .page_but:hover{color:#fff;background: #026eb8;border-color: #026eb8;}
.section04 .page_but:hover::before{background: url(../img/main/but3.png) no-repeat center/cover;}



/*.section05*/
.section05{position: relative;}
.section05::before{content:'';display: block;width: 100%;height: 100%;background: url(../img/main/sec05_01.png)no-repeat center/cover;z-index: -1;position: absolute;left:0;top:0; opacity: 0.2;}
.section05 .main_bd{padding-right:0;}
.section05 .depth01{display: flex;}
.section05 .depth01 > li{width: 50%;position: relative;}
.section05 .depth01 > li:last-child{margin-left:30px;}
.section05 .depth01 > li:first-child{padding-top:100px;}
.section05 .depth01 > li:first-child::before{content:'';display: block;width: 108%;background: url(../img/main/sec05_bg.png) no-repeat center/cover;padding-bottom:19.3%;opacity: 0.1;position: absolute;left:0;top:0;}

.section05 .map{border-radius: 10px 0 0 10px;overflow: hidden;height: 70vh;}
.section05 .map iframe{width: 100%;height: 100%;}


.section05 .page_but{color:#fff;background: #026eb8;border-color: #026eb8;position: absolute;bottom: 10%;left:-10%;;}
.section05 .page_but::before{background: url(../img/main/but3.png) no-repeat center/cover;padding-bottom: 5.8%;}

.section05 .page_but:hover{color:#026eb8;background: #fff;border-color: #026eb8;}
.section05 .page_but:hover::before{background: url(../img/main/but2.png) no-repeat center/cover;}
.section05 h3{font-size: 2rem;font-weight: 900;margin-bottom:40px;}

.section05 .depth02_info{font-size: 1.25rem;;}
.section05 .depth02_info li{margin:10px 0;;}



/* ********************************************* *
 * 1600px
 * ********************************************* */
 @media screen and (max-width: 1660px){
   
    
}

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

    .section03 ul { width: 80%;}

    .section05 h3 {font-size: 1.5rem;}


 
}

/* ********************************************* *
* 1200px
* ********************************************* */
@media screen and (max-width: 1200px){
  
}

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

#fullpage{padding:0 !important ;}
.section{height: auto !important;}
.page_but { padding: 9px 40px 9px 17px; font-size: 1rem;}
.section04 .page_but {width: 100px;}


.section02 h2 {font-size: 1.7rem;}
.section02 ul {font-size: 1.125rem;}
  

.section03 ul li i { width: 60px;height: 60px;}
.section03 ul li P { font-size: 1rem;}

.section04 ul li p br{display: none;}
.section04 ul { flex-wrap: wrap;}
.section04 ul li:hover p {font-size: 1.5rem;transform: none;}
.section04 ul li p{transform: none;}
.section04 ul li::before {width: 100%; opacity: 1;}
.section04 ul li:hover::before{width: 100%;;}
.section04 .page_but {transform: none;opacity: 1;}
.section04 ul li{width: 50%;}
.section04 ul li:hover {width: 50%;}

.section04 .page_but:hover {color: #333;   background: #fff;   border-color: #fff;}
.section04 .page_but:hover::before {background: url(../img/main/but4.png) no-repeat center/cover;}

.section05{padding:100px 0;}
.section05 .depth01 {flex-direction: column-reverse;}
.section05 .depth01 > li:last-child {margin-left: 0;width: 100%;}
.section05 .map {height: 60vh}
.section05 .page_but {left: -2%;}
.section05 .page_but:hover {color: #fff;background: #026eb8;border-color: #026eb8;}
.section05 .page_but:hover::before {background: url(../img/main/but3.png) no-repeat center/cover;}

.section05 .depth01 > li:first-child::before{display: none;}
.section05 .depth01 > li:first-child {padding-top: 50px;    width: 100%;}


#main header h1 a{background: url(../img/main/logo3.png)no-repeat center/cover;}
.mo_navi .close_but span::before{background: #666;}

}



/* ********************************************* *
* 960px
* ********************************************* */
@media screen and (max-width: 960px){
    .main_bd {padding: 0 30px;}


    .section01 .main_slide_mySwiper .swiper-slide .text_box { left: 30px;}
.section01 .main_slide_mySwiper .swiper-slide .logo {width: 240px;padding-bottom:9.5%;}
.section01 .main_slide_mySwiper .swiper-slide .text_box {font-size: 1.25rem;}


.section03 ul { width: 90%;}
}


/* ********************************************* *
* 768px
* ********************************************* */
@media screen and (min-width: 769px){
 

 
}
@media screen and (max-width: 768px){
    .section03 ul { width: 100%;}
    .section03 ul li {width: 33%;}

    .section04 ul li p { font-size: 1.5rem;}
    .section04 ul li > div {bottom: 30px;left: 30px;}


    .section02 ul li:hover h2 {color: initial;}
    .section02 ul li:hover p {color: initial;}
    .section02 ul li.page_but_li { bottom: -20px;}
}


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

    .section05{padding:0 0;}
    .section02 > div, .section03 > div, .section05 > div{height: auto !important;padding:80px 0;}


    .section02 ul li p br{display: none;}
    .section02 h2 {font-size: 1.5rem;}
    .section02 ul::before{display: none;}
    .section02 ul::after {width: 90%; padding-bottom: 11.15%; top: -40px;}
    .section02 ul li{margin-bottom:40px !important;}
    .section02 ul li:last-child{margin-bottom:0px !important;}
    .section02 ul li.page_but_li {width: 100%;position: inherit;bottom: 0;}
    .section02 .page_but {  width: 100px;}
    .section02 ul li:nth-child(2) { padding:0;background: transparent;}
    .section02 ul li:hover:nth-child(2) {background: initial;background: transparent;}
    .section02 ul li:hover:nth-child(2) h2 {color: #333;}
    .section02 ul li:nth-child(2) h2 {color: #333;}
    .section02 ul li:hover:nth-child(2) p {color: #888;}
    .section02 ul li:nth-child(2) p {color: #888;}
    .section02 .page_but:hover {color: #888;border-color: #ddd;}
    .section02 .page_but:hover::before {background: url(../img/main/but.png) no-repeat center/cover;}

    .section03 ul {display: block;}
    .section03 ul li{transform: none !important;    width: 100%;margin-bottom:20px;}
    .section03 ul li:last-child{margin-bottom:0;}
    .section03 ul li > div {border-radius: 10px;height: auto !important; padding:20px 30px;flex-direction: row;    justify-content: flex-start;}
    .section03 ul li > div i{    margin: 0;margin-right:40px;width: 50px;height: 50px;}
    .section03 ul li P {font-size: 1.125rem;margin-top:0;}

    .section05 .map {height: 350px;}


}


/* ********************************************* *
* 500px
* ********************************************* */
@media screen and (max-width: 500px){
    .main_bd {padding: 0 15px;   }
    .section >div {height: auto !important;}
    .section01 >div  {height: 500px !important;}
    .section04 >div {height: 100vh !important;}
    .section01 .main_slide_mySwiper .swiper-slide .text_box {font-size: 1rem;left: 20px;bottom: 50px;}
    .section01 .main_slide_mySwiper .swiper-slide .logo {padding-bottom: 0;
        height: 33px;    width: 180px;}


    .section02 > div, .section03 > div, .section05 > div{height: auto !important;padding:80px 0;}
    .section02 ul::after { top: -20px;}
    .section02 h2 {font-size: 1.25rem;    margin-bottom: 5px;}
    .section02 ul {font-size: 0.9rem;}
    .section02 ul li{text-align: left !important;    margin-bottom: 20px !important;}



    .section03 .sec03_tit {font-size: 1rem;}
    .section03 .sec03_tit br{display: none;}
    .section03 .page_but:hover {background: transparent;border: 1px solid #fff;}
    .section03 .page_but {width: 100px; margin: 10px auto 40px;}
    .section03 ul li > div {padding: 10px 20px;}
    .section03 ul li { margin-bottom: 10px;}

    .section04 ul li:hover {width: 100%;}
    .section04 ul li {width: 100%;}


    .section05 h3 {font-size: 1.25rem;    margin-bottom: 20px;}
    .section05 .depth02_info {font-size: 1rem;}
    .section05 .depth01 > li:first-child {padding-top: 20px;}
    .section05 .depth02_info li {margin: 5px 0;}


}

/* ********************************************* *
* 400px
* ********************************************* */
@media screen and (max-width: 400px){

    .section05 h3 {font-size: 1.125rem;}

    
    .section05 .map {height: 270px;}
}