/* section1 */
.section1 {
    width: 100%;
    height: 300px;
    background-color: #fff;
}

.contentWrap {
    display: flex;
    justify-content: center;
    height: 200px;
}


.newTab {
    text-align: center;
    position: relative;
}

.newTab:hover {
    text-decoration: underline;
}

.newTab p {
    color: #bbb;
}

.newTab img {
    position: absolute;
    top: 5%;
    left: 52%;
    width: 15px;
    height: 15px;
    opacity: 0.4;
}


/* section2 */
.section2 {
    width: 100%;
    padding-top: 70px;
    height: 1500px;
    background-color: #fff;
}

.contentWrap2 {
    display: flex;
    flex-direction: column;
    text-align: center;
}

.View {
    display: inline-block;
    width: 90%;
    height: 350px;
    margin-bottom: 100px;
    box-shadow: none;
    border-radius: 15px;
    color: #fff;
    text-align: left;
    transition: transform 0.15s ease-in-out;
}

.View:hover {
    transform: translateY(-5%);
}

.ViewWrap {
    width: 30%;
    height: 100%;
    position: relative;
}

.ViewWrap h1 img {
    width: 25px;
    height: 25px;
    position: absolute;
    top: 32%;
}

.contentWrap2 h1 {
    font-size: 36px;
    position: absolute;
    top: 40%;
    padding-left: 30px;

}

.contentWrap2 p {
    position: absolute;
    top: 55%;
    padding-left: 30px;

}


.img1 {
    background: url('../img/01.jpg');
    background-size: cover;
    background-position: center;
}

.img2 {
    background: url('../img/02.jpg');
    background-size: cover;
    background-position: center;
}

.img3 {
    background: url('../img/03.jpg');
    background-size: cover;
    background-position: center;
}

.img4 {
    background: url('../img/04.jpg');
    background-size: cover;
    background-position: center;
}



/* section3 */
.section3 {
    width: 100%;
    height: 300px;
    background-color: #fff;
    position: relative;
    margin: 0 auto;
}

.scrollBarWrap {
    margin: 0 auto;
    width: 90%;
    height: 300px;
}

.scrollBarWrap h1 {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 32px;
    font-weight: bold;
    padding-bottom: 80px;
}

.sliderWrap {
    margin: 0 auto;
    width: 100%;
    height: 250px;
}

.sliderWrap a .con {
    width: 400px;
    height: 200px;
    border-radius: 5% / 10%;
}


.sliderWrap a .con:hover {
    /* background-image: linear-gradient(rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.7)); */
    animation: rotate_img 0.1s ease-in 3;
    transform-origin: 50% 50%;
}

@keyframes rotate_img {
    100% {
        transform: rotate(5deg);
    }
}

.sliderWrap .c1 {
    background: url('../img/s1.jpg');
    background-size: cover;
    background-position: center;
}

.sliderWrap .c2 {
    background: url('../img/s2.jpg');
    background-size: cover;
    background-position: center;
}

.sliderWrap .c3 {
    background: url('../img/s3.jpg');
    background-size: cover;
    background-position: center;
}

.sliderWrap .c4 {
    background: url('../img/s4.jpg');
    background-size: cover;
    background-position: center;
}

.sliderWrap .c5 {
    background: url('../img/s5.jpg');
    background-size: cover;
    background-position: center;
}

.sliderWrap .c6 {
    background: url('../img/s6.jpg');
    background-size: cover;
    background-position: center;
}

.sliderWrap .c7 {
    background: url('../img/s7.jpg');
    background-size: cover;
    background-position: center;
}

.sliderWrap .c8 {
    background: url('../img/s8.jpg');
    background-size: cover;
    background-position: center;
}

.sliderWrap .c9 {
    background: url('../img/s9.jpg');
    background-size: cover;
    background-position: center;
}

.sliderWrap .c10 {
    background: url('../img/s10.jpg');
    background-size: cover;
    background-position: center;
}

.sliderWrap .c11 {
    background: url('../img/s11.jpg');
    background-size: cover;
    background-position: center;
}

.sliderWrap .c12 {
    background: url('../img/s12.jpg');
    background-size: cover;
    background-position: center;
}

.sliderWrap .c13 {
    background: url('../img/s13.jpg');
    background-size: cover;
    background-position: center;
}

.sliderWrap .c14 {
    background: url('../img/s14.jpg');
    background-size: cover;
    background-position: center;
}

.sliderWrap .c15 {
    background: url('../img/s15.jpg');
    background-size: cover;
    background-position: center;
}

.sliderWrap .c16 {
    background: url('../img/s16.jpg');
    background-size: cover;
    background-position: center;
}

/* Slick Settings */
.slick-next {
    position: absolute;
    top: 35%;
    right: -3%;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border: none;
}

.slick-prev {
    position: absolute;
    top: 35%;
    left: -4%;
    width: 40px;
    height: 40px;
    background-color: #fff;
    border: none;
}

.slick-next:before {
    content: url('../img/arrow_black_01.svg');
}

.slick-prev:before {
    content: url('../img/arrow_black_02.svg');
}