/* section 공통 */
body {overflow: hidden;}

.sec_inner{width: 100%; max-width: 1400px; margin: 0 auto;}
.sec{margin-bottom: 130px;}
.sec04{margin-bottom: 0;}
h4{font-size: 2rem; font-weight:400;}
p{font-size: 1.2rem; font-weight:400;}

/* sec01 */
.sec01{padding-bottom: 10px;padding:0;}
.sec01 > div{padding-left: 0;  padding-right: 0;}
.sec01 .mainSlide{width: 100%; height: auto; position: relative; overflow: hidden;     padding-bottom: 30px;}
.sec01 .swiper-slide{width: 100%;     padding-bottom: 50%; background: center / cover no-repeat;}
.sec01 .slide01{background-image: url(../img/main01.jpg);}
.sec01 .slide02{background-image: url(../img/main02.jpg);}
.sec01 .slide03{background-image: url(../img/main03.jpg);}
.sec01 .slide04{background-image: url(../img/main04.jpg);}
.sec01 .s-pagination{position: absolute; z-index: 4; text-align: center; top: 97%;}
.sec01 .swiper-pagination-bullet{width: 40px; height: 4px; background-color: #888; border-radius: 0;}
.sec01 .swiper-pagination-bullet-active{width: 70px; background-color: #242424;}



/* sec02 */
.sec02 {padding-bottom:0;}
.sec02 > div{display: flex;}
.sec02 .left{width:40%;display: flex;display: flex;flex-direction: column;justify-content: space-between;padding:30px 0;}
.sec02 .right{width:60%;margin-left:50px;;background: url(../img/main_sec02.jpg) center/cover;padding-bottom:33%;}
.sec02 h4{margin-bottom: 40px;}
.sec02 p{line-height: 2; color: #000; font-weight: 400;}
.sec02 button{color: #c6b6bf;display: flex;    align-items: center;font-size: 1rem;justify-content: flex-end;}
.sec02 button span{width: 25px;height: 25px;background: #c6b6bf;display: inline-block;border-radius: 20px; margin-right:5px;position: relative;display: flex;}
.sec02 button span::after{content:'✕';display: block;position: absolute;left:54%;top:47%;transform:translate(-50%,-50%) rotate(45deg);color:#fff;font-size:0.85rem;;}


/* sec03 */
.sec03 h4{text-align: center;margin-bottom:40px;}
.sec03 .swiper-slide i{display: block;width: 100%;background: url(../img/sec03_pro_01.png) center/cover;}
.sec03 .swiper-slide{position: relative;}
.sec03 .swiper-slide p{position: absolute;left:50%;transform: translateX(-50%);top:80%;text-align: center;z-index: 9;opacity: 0;width: 100%;}
.sec03 .swiper-slide:hover p{top:45%;opacity: 1;transition-duration: 0.5s;}

.sec03 .pro_con{cursor: pointer;}

.sec03 .swiper-slide p >span{font-size: 1.5rem;color: #fff;}
.sec03 button{color: #fff;display: flex;    align-items: center;font-size: 1rem;justify-content: flex-end;    margin: 0 auto;margin-top:30px;}
.sec03 button span{width: 25px;height: 25px;background: #fff;display: inline-block;border-radius: 20px; margin-right:5px;position: relative;display: flex;}
.sec03 button span::after{content:'✕';display: block;position: absolute;left:53%;top:49%;transform:translate(-50%,-50%) rotate(45deg);color:#666;font-size:0.85rem;;}

.sec03 i.hover_img{position: absolute;top:0;left:0;opacity: 0;transition-duration: 0.3s;}

.sec03 .swiper-slide:hover i.hover_img{opacity: 1;}

.sec03 .swiper-slide .pro_con::after{content:'';display: block;width: 100%;height: 100%;background: rgba(0,0,0,0.3);position: absolute;left:0;top:0;opacity: 0;}
.sec03 .swiper-slide .pro_con:hover::after{opacity: 1;}

.sec03 .swiper-slide{overflow:hidden;}
.sec03 .swiper-slide .pro_con::before{content:'';display: block;width: 120%;height: 120%;border:2px solid #fff;position: absolute;left:50%;top:50%;transform: translate(-50%,-50%);z-index: 99;transition-duration: 0.5s;}
.sec03 .swiper-slide .pro_con:hover::before{width: 90%;height: 90%;}

.sec03 .silde_button >div::after{color:#666;font-size: 1.4rem;z-index: 99;}
.sec03 .silde_button >div::before{content:'';display: block;background: rgba(255,255,255,0.8);;width: 60px;height: 60px;position: absolute;/* left: 50%;top:50%; */}



/* sec04 */

.sec04{position: relative;}
.sec04::before{content:'';display: block;width: 100%;height: 100%;background: url(../img/sec04.jpg)center/cover;position: absolute;left:0;top:0;}
.sec04::after{content:'';display: block;width: 100%;height: 100%;background: rgba(0,0,0,0.3);position: absolute;left:0;top:0;}


.sec04 >div{z-index: 9;}
.sec04 .tabSet .tabs{position: absolute;width: 600px;bottom: 50px;}


.sec04 .tabSet .tabs a{background: #555555;border-radius: 0;;border:none;color: #fff;font-weight: 200;    display: flex;flex-direction: column;justify-content: center;}
.sec04 .tabSet .tabs i{display: block;width: 50px;height: 50px;margin:0 auto;}
.sec04 .panel{width: 100%; display: flex;}
.sec04 .panel > div{width: 50%;}

.sec04 .left{color:#fff;padding:50px 0;}
.sec04 .left h4{margin-bottom:60px;font-size: 2.5rem ;}
.sec04 .left p{font-size: 1.4rem ;font-weight: 300;}
.sec04 .right{background: #fff;padding: 50px 60px;}
.sec04 .right > p{margin-bottom:20px;font-size: 1.125rem;}
.sec04 .right > div{margin-bottom:15px;}
.sec04 .right .textbox{width: 100%;}
.sec04 .right .textbox input,
.sec04 .right .textbox textarea{padding:20px;border:none;resize: none;background: #f3f3f3;width: 100%;font-size: 1.125rem;outline: none;}
.sec04 .right .textbox textarea{min-height: 200px;}

/* boundary */
.sec04{padding: 80px 0;}
.sec04 .inner{max-width: 1660px;width: 100%; margin-left:auto; position: relative;}

/* .sec04 .text_wrap{display: none; width: 100%; overflow: hidden;}
.sec04 .text_wrap .inner{width: 100%; overflow: hidden; height: 150px; overflow-y: scroll; background-color: #f5f5f5; padding: 24px; }
.sec04 .text_wrap .inner ul{font-size: 15px; font-weight: 500;} */
.sec04 .button{text-align: right;margin-top:20px;}
.sec04 button{border-bottom:1px solid #bbb;color:#666;padding:10px 70px 10px 10px;position: relative;font-size: 1.125rem;}
.sec04 button::after{content:'';display: block;width: 11px;padding-bottom: 15%;background: url(../img/arr01.svg)center/cover;position: absolute;right:10px;top:50%;transform: translateY(-50%);}



/*tabSet*/
.tabSet ul.tabs {overflow:hidden;width: 100%;margin:0 -10px;display: flex;margin-bottom:30px;}
.tabSet ul.tabs  li{list-style-type:none;margin:0 10px;width: calc(100% / 4);text-align: center;}
.tabSet ul.tabs li a{color:#000;border:1px solid #ddd;;padding:20px;width: 100%;;display:block;border-radius:10px;font-weight:bold;font-size:14px;text-decoration:none;}
.tabSet ul.tabs li a span{margin-top:5px;display: block; font-weight: 500;}
.tabSet ul.tabs li a .hover_i{opacity: 0;display:none;}
.tabSet ul.tabs li a.on{background:#fff;cursor:default;color:#333;box-shadow: 0 0 10px rgba(0,0,0,0.6);}
.tabSet ul.tabs li a.on .i{display: none;}
.tabSet ul.tabs li a.on .hover_i{opacity: 1;display: block;}
.panel{color:#4d4d4d; display:none;}



/* ********************************************* *
 * 1600px
 * ********************************************* */
 @media screen and (max-width: 1660px){
    .sec04 .inner{padding:0 20px;}
    .sec04 .left h4 { font-size: 2rem;    margin-bottom: 30px;}
    .sec04 .left p{font-size: 1.125rem;}
    .sec04 .panel > .right{transform: translateX(20px);}
}

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


 
}

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

  
    .sec02 .right {width: 50%;}
    .sec02 .left {width: 50%;padding: 0;}
    .sec02 h4 {margin-bottom: 20px;}

    
    .sec04 .panel > .left{width: 55%; padding: 30px 0;}
    .sec04 .panel > .right {width: 45%;padding: 30px;}
    .sec04 .right .textbox input, .sec04 .right .textbox textarea {padding: 12px;}
    .sec04 button {font-size: 1rem;}
    .sec04 .tabSet .tabs { bottom: 30px;}


}

/* ********************************************* *
* 1024px
* ********************************************* */
@media screen and (max-width: 1024px){
    h4 {font-size: 1.5rem;}
    p {font-size: 1rem;}

    .sec01 .s-pagination{top: 96%;}

    .sec02 p {line-height: 1.8;}
    .sec02 .right {margin-left: 40px;}
    .sec02 button{margin-top:20px;}


    .sec03 .swiper-slide p >span {color: #fff;}
    .sec03 .swiper-slide:hover p {top: 39%;}


}

/* ********************************************* *
* 960px
* ********************************************* */
@media screen and (max-width: 960px){
    .sec04::after {background: rgba(0,0,0,0.4);}
    .sec04 .left p {font-size: 1rem;}
    .sec04 .panel{display: block;}
    .sec04 .panel > .left {width: 100%;}
    .sec04 .panel > .right {width: 100%;transform: translateX(0px);padding: 0; background: transparent;color: #fff;;}

    .sec04 .right > p { font-size: 0.9rem;opacity: 0.9;}
    .sec04 .right .textbox input, .sec04 .right .textbox textarea {padding: 12px;background: rgba(0,0,0,0.2);border:1px solid #ddd;color: #fff; }
    .sec04 .right .textbox input::placeholder, .sec04 .right .textbox textarea::placeholder {color: #fff;}
    .sec04 .check-label{color:#fff;}

    .sec04 .tabSet .tabs {width: 100%;position: initial;margin:0;}
    
    .sec04 .tabSet .tabs li{width: calc(100% / 3);margin:0; margin-right:10px;}
    .sec04 .tabSet .tabs li:last-child{ margin-right:0px;}
    .sec04 .tabSet .tabs li a{height: auto !important;display: inline-flex;flex-direction: row;align-items: center;justify-content: flex-start;}
    .sec04 .tabSet .tabs i {margin: 0;margin-right:10px;width: 30px;height: 30px;}
    .sec04 button{color:#666;border-bottom:none;background: #fff;width: 100%;padding:20px 0;}
    .sec04 button::after{display: none;}
}

/* ********************************************* *
* 840px
* ********************************************* */
@media screen and (max-width: 840px){
    
    .sec02 p{font-size: 0.95rem; color: #000;}
    .sec02 p br{display: none;}
    .sec02 button {font-size: 0.9rem;}
    .sec02 button span {width: 20px;height: 20px;}
    .sec02 button span::after { font-size: 0.55rem;}

}


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

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

    .sec{margin-bottom: 100px;}
    .sec01{padding: 0;}
    .sec01 .swiper-slide{padding-bottom: 60%;}
    .sec04{margin-bottom: 0;}


}


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

    h4 {font-size: 1.3rem;}
    
    .sec01 .swiper-slide{padding-bottom: 80%;}
    .sec01 .tabSet ul.tabs li a { padding: 15px;}
    .sec04 .tabSet .tabs li a {flex-direction: column;}
    .sec04 .tabSet .tabs i{margin-right:0;}


    .sec02 {padding-bottom: 0;}

    

    .sec02 > div { flex-direction: column;}
    .sec02 .right{width: 100%;margin:0; padding-bottom: 50%;}
    .sec02 .left{width: 100%;margin-bottom:20px;}


}


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

    .sec01 {padding: 0;}
    .sec01 .s-pagination{top: 94%;}
    .sec02 {padding-bottom: 0;}
    
    .sec03 .silde_button >div::before{width: 40px; height: 40px;}
    .sec03 .silde_button >div::after{font-size: 1.2em;}

    .sec04 .tabSet .tabs li a { padding: 15px 5px;}
    .sec04 .tabSet ul.tabs li a span{font-size: 0.8rem;}
    .sec04 .tabSet .tabs i { width: 30px; height: 30px}

    .sec04 .left h4 {font-size: 1.5rem;margin-bottom: 20px;    }
    .sec04 .left p {font-size: 0.9rem;}
    .sec04 .left p br{display: none;}

    .sec04 .check-label .checkmark { top: 0;transform: none;}
    .sec04 .right .textbox textarea {min-height: 200px;}
    .sec04 button { padding: 15px 0;}

}

/* ********************************************* *
* 400px
* ********************************************* */
@media screen and (max-width: 400px){
    .sec01 {padding: 0;}
    .sec02 {padding-bottom: 0;}

    .sec02 h4 {  margin-bottom: 20px;}
    .sec03 h4 {  margin-bottom: 20px;}

    .sec04 .tabSet ul.tabs {flex-direction: column;}
    .sec04 .tabSet .tabs li {width: 100%;margin:0;margin-bottom:10px;}
    .sec04 .tabSet .tabs li:last-child {margin-bottom:0px;}
    .sec04 .tabSet .tabs li a { flex-direction: row;justify-content: center;padding: 8px 20px;}
    .sec04 .tabSet .tabs li a i{margin-right:10px;}
    .sec04 .tabSet .tabs li a span{width: calc(100% - 30px);}

}