@charset "UTF-8";
#home #contents {
    padding-bottom: 200px;
}
#homeAbout {
    background: #fff;
    background: rgba(255,255,255,0.8);
    background: rgb(255 255 255 / 0.8);
}
#homeAbout .slider {
    width: 100%;
    padding-left: calc((100% - 1020px) / 2);
    box-sizing: border-box;
}
@media screen and (max-width:1080px){
    #homeAbout .slider {
        padding-left: 0;
    }
}
#homeAbout .slider .slick-track {
    display: flex;
}
#homeAbout .slider .slick-list a,
#homeAbout .slider .slick-list li {
    display: flex;
    width: 100%;
    height: auto;
    line-height: 1.8;
    justify-content: space-between;
}
#homeAbout .slider .slick-list .cont {
    width: 60%;
    padding: 40px 30px 80px 0;
    box-sizing: border-box;
    min-width: 390px;
    transition: .5s;
}
@media screen and (max-width:1280px){
#homeAbout .slider .slick-list .cont {
    padding: 40px 30px 80px 30px;
}
}
#homeAbout .slider .slick-list figure {
    width: 40%;
    position: relative;
    overflow: hidden;
}
#homeAbout .slider .slick-list img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    transition: ease-out .8s;
}
#homeAbout .slider .slick-list h3 {
    font-size: 15px;
    color: #b7a486;
    letter-spacing: 0.2em;
    margin-bottom: 40px;
}
#homeAbout .slider .slick-list h2 {
    font-size: 21px;
    letter-spacing: .2em;
    margin: 20px 0;
}
#homeAbout .slider .slick-list p {
    font-size: 15px;
    letter-spacing: .1em;
    line-height: 1.6;
    font-weight: 300;
}
.slick-dots {
    left: 0;
    width: calc((100% - 1080px)/ 2 + 390px);
    min-width: 390px;
    bottom: -40px;
    box-sizing: border-box;
    padding-left: calc((100% - 1080px) / 2);
}
.slick-dots li button::before{
    content:"";
    background: #000;
    width: 10px;
    height: 10px;
    transition: .5s;
    opacity: .15;
}
.slick-dots li.slick-active button:before{
    opacity: .5;
}
#homeAbout .slider .slick-list a:hover .cont{
    opacity:.8;
}
#homeAbout .slider .slick-list a:hover img{
    width: 105%;
    height:auto;
}
@media screen and (orientation:portrait) , (max-width:1280px){
#homeAbout .slider .slick-list img {
    height: 100%;
    width: auto;
}
#homeAbout .slider .slick-list a:hover img{
    height: 105%;
    width: auto;
}
}