/* ---------- 공통 -------- */
/* 스와이퍼 */
.swiper { width: 100%; height: 100%;}
.swiper-slide { text-align: center; font-size: 18px; background: #fff;
/* Center slide text vertically */ display: -webkit-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; -webkit-align-items: center; align-items: center;}
.swiper-slide img { display: block; width: 100%; height: 100%; object-fit: cover;}
.m2-txt{}
.m2-txt span{font-size: 25px; font-weight: 600;}
.m2-txt p{font-size: 32px; font-weight: 600;}

/* main01 */
.main01 .swiper{position:relative;}
.main01 .swiper-wrapper{height:937px;}
.main01 .swiper-slide i{display: block;    height: 100%; width: 100%; background-position: center !important; background-size: cover !important;}
.main01 .m1{background:url(../img/banner.jpg) no-repeat;}
.main01 .m2{background:url(../img/banner-2.jpg) no-repeat;}
.main01 .main-txt{color: #fff;  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); text-align: center; z-index:9;}
.main01 .main-txt h1{font-size: 55px; font-weight: 800;}
.main01 .main-txt p{font-size: 25px; width: 430px; line-height: 1.7; margin-top: 10px;}

/* main02 */
.main02{}
.main02 > div{background:url(../img/m02.jpg) no-repeat; height:410px; padding: 80px; background-size: cover; background-position: center;}
.main02 .m2-txt{}
.main02 .m2-txt span{color: #fff;}
.main02 .m2-txt p{ color:#f5f5f5; }
.main02 ul{display: flex; background: #fff; position: relative; top: 25%; height: 250px; box-shadow: 0 0 10px 1px rgb(0 0 0 / 14%);}
.main02 ul li{position:relative; width:25%; padding:30px; border:1px solid #ececec; transition:all 0.3s; cursor:pointer;}
.main02 ul li:hover{background:#2a2a2a; border:1px solid #2a2a2a;}
.main02 ul li:nth-child(1),.main02 ul li:nth-child(2),.main02 ul li:nth-child(3){border-right:0px;}
.main02 ul div{}
.main02 ul div h3{font-size: 25px;}
.main02 ul li:hover div{color:#fff;}
.main02 ul div p{padding-top:15px;font-size: 16px;}
.main02 ul div i{    display: block; width: 34px; position: absolute; right: 30px; bottom: 30px;}
.main02 ul li:hover i{    filter: invert(1);}

/* main02 */
.main03{background:url(../img//m03.jpg) no-repeat; background-size: cover; background-position: center;}
.main03 > div{padding:100px 0px; }
.main03 .m2-txt{text-align: center;}
.main03 .m-product{position:relative; margin-top:70px;}
.main03 .swiper{overflow:hidden;}
.m-product .swiper-slide{display: flex;    padding: 30px 25px; flex-direction: column; align-items: center; height:375px;}
.m-product .swiper-slide i{display:block;width:80%;}
.m-product .swiper-slide p{padding-top:20px; font-weight: 600;}
.m-product .swiper-slide p span{display: block;}
.m-product .btn-wrap{}
.m-product .btn-wrap li{cursor:pointer; width:70px; height:70px; top: 50%; transform: translateY(-50%);   position: absolute; z-index: 9;}
.m-product .btn-wrap li.btn-next{background:#fff; right:-30px; border:1px solid #f1f1f1f1}
.m-product .btn-wrap li.btn-prev{background:#2a2a2a;left: -30px;}
.m-product .btn-wrap li i{width: 20px; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.m-product .click{position:absolute; width: 100%; height: 100%; background: rgb(0 0 0 / 45%);top:0; left:0;opacity:0; transition:all 0.2s;}
.m-product .click .in-click{position:absolute; top:50%; left:50%; transform:translate(-50%,-50%)}
.m-product .click span{display: block; margin: 0 auto; width: 34px; background: #fff; padding: 10px; border-radius: 50%;}
.m-product .click p{padding-bottom: 20px; color: #fff; font-weight: 500;}
.m-product .swiper-slide:hover .click{opacity:1;}
.btn-view{margin-top:60px;    text-align: center;    position: relative;
    left: 50%;
    transform: translateX(-50%);}
.btn-view{background: #fff; padding: 16px 30px; border-radius: 7px; box-shadow: 0 0 7px 3px rgb(96 96 96 / 57%);}
.btn-view span{display: inline-block; width: 10px; margin-left: 20px;}

/* main04 */
.main04{}
.main04 > div{display: flex;}
.main04 > div > div{width:50%;}
.main04 > div > div h2{font-size: 35px; font-weight: 600; margin-bottom: 20px;}
/* .main04 > div > div >p{margin-bottom: 60px; font-size: 20px;} */
.main04 .m04-left{margin-right:30px;}
.main04 .m04-left ul{}
.main04 .m04-left ul li{display: flex;    margin-bottom: 50px;}
.main04 .m04-left ul li div{width:50%;}
.main04 .m04-left ul li.w50 div:last-child{padding-left: 30px;}
.main04 .m04-left ul li input{width:100%; padding:10px; border: 0px; border-bottom: 1px solid #b5b5b5;}
.main04 .m04-left ul li input:focus{outline:none}
.main04 .m04-left ul li textarea{width:100%; height:150px; border:1px solid #b5b5b5; padding:10px;}
.main04 .m04-left ul li textarea:focus{outline:none;}
.main04 .m04-right{}
.main04 .m04-right div{display:block;height:395px !important}
.main04 .m04-right div iframe {width:100% !important; }
.main04 .m04-right div iframe {height:100% !important}

.main04 .check-wrap{display: flex;justify-content: space-between;}
.main04 .check-wrap input[type=checkbox] {display:none;}
.main04 .check-wrap input[type=checkbox] + label {  cursor: pointer;  padding-left: 23px; background: url(../img/check1.png) no-repeat;       background-position: 0px 2px;  background-size: 15px;}
.main04 .check-wrap input[type=checkbox]:checked + label {background: url(../img/check2.png) no-repeat;     background-size: 15px;     background-position: 0px 2px;}
.main04 .check-wrap p{cursor:pointer}


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

    
}

/* ********************************************* *
* 1500px
* ********************************************* */
@media screen and (max-width: 1500px){
    .m-product .btn-wrap li{width:60px; height:60px;}
    .m-product .btn-wrap li.btn-prev{left:0px;}
    .m-product .btn-wrap li.btn-next{right:0px;}

}





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

 
}


/* ********************************************* *
* 1300px
* ********************************************* */
@media screen and (max-width: 1300px){
    .m-product .swiper-slide{height:auto;}
}





/* ********************************************* *
* 1200px
* ********************************************* */
@media screen and (max-width: 1200px){
    .main04 > div > div h2{font-size: 30px;}
    .main04 > div > div >p{font-size: 18px;}
  
}

/* ********************************************* *
* 1024px
* ********************************************* */
@media screen and (max-width: 1024px){
    .main02 > div{ height: 390px;   padding: 40px 50px;}
    .main02 ul{top:8%; height:230px} 
    .main02 ul li{padding:18px;}
    .main02 ul div h3{font-size: 20px;}
    .m2-txt span{font-size: 20px;}
    .m2-txt p{font-size: 26px;    padding-top: 5px;}

    .main04 .m04-left ul li{margin-bottom: 30px;}
    .main04 > div > div >p{margin-bottom: 40px;}
    .main04 .m04-left ul li.w50 div:last-child{padding-left:20px;}
    .main04 .m04-right div a .root_daum_roughmap{height: 335px !important;}
}


/* ********************************************* *
* 860px
* ********************************************* */
@media screen and (max-width: 860px){
    section.mt130{margin-top:100px;}
    .main01 .main-txt h1{font-size: 40px;}
    .main01 .main-txt p{font-size: 19px;}
    .main01 .swiper-wrapper{    height: 700px;}

    .m-product .click p{font-size: 14px;}

    .main03 .m-product{margin-top: 40px;}
    .m-product .swiper-slide{padding: 30px 20px;}
    .m-product .swiper-slide p{font-size: 16px;}
    .m-product .btn-wrap li{width: 40px; height: 40px;}
    
    .main03 > div{padding:70px 0px;}

    .main04 > div{flex-direction: column;}
    .main04 .m04-left{margin-right: 0px;}
    .main04 > div > div{width:100%;}
    .main04 .m04-right{margin-top:70px;}
    .main04 > div > div >p{margin-bottom: 20px;}
    .main04 .m04-right div{height: 270px !important;}
    .main04 > div > div h2{font-size: 25px;}
    .main04 > div > div >p{font-size: 16px;}
    .main04 .m04-right {margin-top: 40px;}



}


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

 
}
@media screen and (max-width: 768px){
    .m2-txt span {font-size: 16px;}
    .m2-txt p{    font-size: 22px;}
    .main02 ul{top:6%;  height: 250px;    flex-wrap: wrap;}
    .main02 ul li{width:50%;}
    .main02 ul div i{width: 28px; right: 16px; bottom: 20px;}
    .main02 ul div h3{font-size: 17px;}
    .main02 ul div p{    padding-top: 7px; padding-right:20px;}


}


/* ********************************************* *
* 640px
* ********************************************* */
@media screen and (max-width: 640px){
    section.mt130 { margin-top: 60px; }
    .m-product .swiper-slide i{    width: 60%;}
    .main03 > div{padding:50px 0px;}
    .btn-view a{padding: 13px 25px;}
    .main04 .m04-right{margin-top: 60px;}
    .main04 .m04-right div a .root_daum_roughmap {height: 235px !important;}

}


/* ********************************************* *
* 580px
* ********************************************* */
@media screen and (max-width: 580px){
    :lang(en) .main02 ul li{background:#fff;}
    :lang(en) .main02 ul div i{width:22px;}
  
}


/* ********************************************* *
* 500px
* ********************************************* */
@media screen and (max-width: 500px){
    .m2-txt p { font-size: 18px;}
    .main02 > div{padding: 30px 20px; height:370px}
    .main02 ul li{padding:10px;}
    .main02 ul div h3{font-size: 16px;}
    .main02 ul div p{font-size: 14px;}
    .main02 ul div i{bottom:10px; width: 23px;}
    .m-product .swiper-slide p{font-size: 15px;}

    .btn-view a span{    margin-left: 10px;}
    .main01 .main-txt p{width: 350px; max-width:100%; margin:0px 10px; font-size: 16px;}

    .main04 .m04-left ul li{flex-direction: column; margin-bottom: 10px;}
    .main04 .m04-left ul li div{width:100%; margin-bottom: 10px;}
    .main04 .m04-left ul li.w50 div:last-child{padding-left:0px;}
    .main04 .check-wrap{flex-direction: column;}
    .main04 .check-wrap p{    margin-top: 10px;}

    .main04 > div > div h2{font-size: 18px; margin-bottom: 7px;}
    .main04 .m04-right div a .root_daum_roughmap {height: 205px !important; }
    

  
}

/* ********************************************* *
* 400px
* ********************************************* */
@media screen and (max-width: 400px){
    .main01 .main-txt p{width: 300px;}
    .main02 > div{height: auto;}
    .main04 .m04-left ul li div
    .main02 ul div p{font-size: 12px;}
    .m-product .swiper-slide {padding: 20px 10px;}
    .m2-txt p {font-size: 16px;}

    .m-product .swiper-slide p{font-size: 14px;}

    .main02 ul{height: auto; flex-wrap: wrap;    margin-top: 20px;}
    .main02 ul li { width: 100%;}

    :lang(en) .main02 ul div p{margin-right:30px}

}