@charset "utf-8";

.fontsmall{ font-size: 14px !important;}
.fontmedium{ font-size: 15px !important;}

/*---------------------------- contents_all ---------------------------*/
html {height: 100%;}
body {width: 100%; height: 100%;}
#wrap {width:100%; position: relative;}
.footer-info {display: none;}
.footer-pop {display: none;}

/*------- section01 -------*/
#section-01 {
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    padding-bottom: 50.25%;
}

.full-btn {width: 120px; border-radius: 4px; text-align: center; position: absolute; transform: translateX(50%); right: 15%; top: 88%; padding: 10px 0; background-color: rgba(78, 78, 78, 0.4); z-index: 5;}
.full-btn a{font-size: 14px; color: #ddd; font-family: nenu; vertical-align: top;}
.full-btn span {font-size: 10px;}

/*------- section02 -------*/
#section-02 {
    background-color: #f3ede6;
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 200px 0;
}
#section-02 .left-con {width: 50%; height: 100%; float: left; position: relative;}
#section-02 .img-area { margin: 140px 0; position: absolute; width: 100%;}
#section-02 .img-area img{width: 80%;}
#section-02 .left-con-sub {width: 25%; position: absolute; right: 8%; transform: translateY(150%);}
#section-02 .left-con-sub img{width: 100%; display: block;}

#section-02 .right-con {width: 50%; float: right;}
#section-02 .text-area {width: 85%; transform: translateX(10%); margin-top: 45%;}
#section-02 .text-area .line-grey {width: 70%; height: 1px; background-color: #b1886f; display: block; opacity: 0.25; margin-bottom: 25px;}


/*------- section02~05 공통부분 -------*/
#section-02 .text-area h2, #section-03 .text-area h2, #section-04 .text-area h2, #section-05 .text-area h2{
    font-family: 'neue'; 
    color: #b1886f; 
    font-size: 40px; 
    margin-bottom: 25px; 
    line-height: 45px; 
    font-weight: 300; 
    letter-spacing: -0.5px;
}
#section-02 .text-area h3, #section-03 .text-area h3, #section-04 .text-area h3, #section-05 .text-area h3{
    color: #000; 
    font-size: 26px; 
    line-height: 38px; 
    margin-bottom: 35px; 
    letter-spacing: -1.25px; 
    font-weight: 300;
}
#section-02 .text-area p, #section-03 .text-area p, #section-04 .text-area p, #section-05 .text-area p{
    color: #000; 
    font-size: 17px; 
    line-height: 28px; 
    letter-spacing: -1.5px; 
    font-weight: 100;
}

/*------- section03 -------*/
.section-03-mobile {display: none;}
.section-03-tablet {display: none;}

#section-03 {
    background-color: #f3ede6;
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 200px 0;
}
.section-03-pc {background-color: #f3ede6;
    width: 100%;
    height: 100%;
}
#section-03 .left-con {width: 40%; height: 100%; float: left;}
#section-03 .img-area { margin: 140px 0;}
#section-03 .img-area img{ width: 100%;}

.right-con-all {position: absolute;
    width: 100%;
}
#section-03 .right-con {width: 55%;  height: 100%;  position: relative; float: right;}
#section-03 .right-con-sub { width: 25%; position: absolute; left: -12.5%; transform: translateY(215%);}
#section-03 .right-con-sub .img-area-sub img{ width: 100%; display: block;}
.right-con-img {position: relative; right: 0; width: 100%; }
#section-03 .right-con-01 {width: 33.3%; float: right;}
#section-03 .right-con-01 .img-area-01 img{margin-top: 100px; width: 100%;}
#section-03 .right-con-02 {width: 33.3%; float: right;}
#section-03 .right-con-02 .img-area-02 img{margin-top: 280px; width: 100%;}
#section-03 .right-con-03 {width: 33.3%; float: right;}
#section-03 .right-con-03 .img-area-03 img{margin-top:150px; width: 100%;}
#section-03 .text-area {transform: translateX(20%); margin-top: 55%; width: 80%;}
#section-03 .text-area .line-grey {width: 55%; height: 1px; background-color: #b1886f; display: block; opacity: 0.25; margin-bottom: 25px;}

/*------- section04 -------*/
#section-04 {
    background-color: #f3ede6;
    width: 100%;
    overflow: hidden;
    position: relative;
    padding: 200px 0;
}
#section-04 .left-con {width: 50%; height: 100%; float: left;}
#section-04 .img-area { margin: 115px 0;}
#section-04 .left-con img{width: 90%;}
#section-04 .right-con {width: 50%; float: right;}
#section-04 .text-area {width: 85%; transform: translateX(10%); margin-top: 50%;}
#section-04 .text-area .line-grey {width: 50%; height: 1px; background-color: #b1886f; display: block; opacity: 0.25; margin-bottom: 25px;}

/*------- section05 -------*/
#section-05 {
    background-color: #e6e6e6;
    width: 100%;
    height: 937px;
    overflow: hidden;
    position: relative;
}
#section-05 .left-con-tablet {display: none;}
#section-05 .left-con {display: inline-block;}
#section-05 .text-area {transform: translateX(clamp(5rem, -0.3684rem + 8.3799vw, 9.6875rem)); margin-top: 365px; width: auto;}
#section-05 .text-area .line-grey {width: 58%; height: 1px; background-color: #b1886f; display: block; opacity: 0.25; margin-bottom: 25px;}
#section-05 .right-con {position: absolute; top: 170px; left: 38%; width: 66%;}
 #section-05 .text-area h3{ width: 60%;}
.slider-list {width: 100%;}
.slick-initialized .slick-slide {width: 450px !important; margin-right: 25px; display: inline-block; overflow: hidden !important;}
.slider-wrap { width: 100% !important; display: inline-block !important; }
.slider-wrap .cont a {overflow: hidden !important; display: block;}
.slider-wrap .cont a img { width: 100%; height: 300px; overflow: hidden; transition: 0.2s all ease;  margin-bottom: 24px;}
.slider-wrap .cont a .img-area{ height: 300px; overflow: hidden; margin-bottom: 35px;}
.slider-wrap .cont a .img-area img { width: 100%;}
.slider-wrap .cont a:hover .img-area img{ transform: scale(1.1); }
.slider-wrap .cont h3 {color: #000; font-size: 26px; line-height: 29px; margin-bottom: 33px; font-family: 'neue'; font-weight: 300;}
.slider-wrap .cont p {color: #000; font-size: 16px; line-height: 25px; letter-spacing: -0.4px; font-weight: 200;}
.slider-wrap .cont span {color: #b1886f; font-size: 16px; line-height: 25px; font-weight: 200; letter-spacing: -0.4px;}
.slick-dots{position:absolute;bottom:-90px;width:420px;height: 2px;display:flex;flex-direction: row;flex-wrap: nowrap;align-items: center;align-content: flex-end;background: #b7c5c9; }
.slick-dots li{width:100%; height: 2px; background: #b7c5c9; transition:0.5s all;}
.slick-dots li.slick-active{width:100% !important; background: #b1886f; transition:0.5s all;}
.slick-dots li button{font-size:0;}