/* main panel css */


/* Dots */
.slick-dots {
    display:block;
    position:absolute;
    bottom:5vw;
    width:100%;
    padding:0;
    margin:0 auto;
    list-style:none;
    text-align:center;
    z-index:11;
}
.slick-dots li {
    display:inline-block;
    width:12px;
    height:12px;
    margin:0 3%;
    padding:0;
    cursor:pointer;
}
.slick-dots li button {
    display:block;
    position:relative;
    width:100%;
    height:100%;
    background:transparent;
    padding:5px;
    border:0;
    font-size:0;
    line-height:0;
    color:transparent;
    cursor:pointer;
    outline:none;
}
.slick-dots li button:hover,
.slick-dots li button:focus {
    outline:none;
}
.slick-dots li button:hover:before,
.slick-dots li button:focus:before {
    opacity:1;
}
.slick-dots li button:before {
    position:absolute;
    top:0;
    left:0;
    width:8px;
    height:8px;
    background-color:#969696;
    border-radius:100%;
    text-align:center;
    content:"";
    -webkit-font-smoothing:antialiased;
    -moz-osx-font-smoothing:grayscale;
}
.slick-dots li.slick-active button:before {
    background-color:#000000;
}

#main_wrap {
    height:1000px;
}
#main {
    overflow:hidden;
    position:relative;
}
#main .item {
    width:100%;
}
#main .item > div {
    display:block;
    width:100%;
    height:1000px;
    background-repeat:no-repeat;
    background-position:center top;
    background-size:cover;
}
#main .item01 > div {background-image:url("../images/main01_2000.jpg");}
#main .item02 > div {background-image:url("../images/main02_2000.jpg");}
#main .item03 > div {background-image:url("../images/main03_2000.jpg");}


@media only screen and (max-width: 950px) {
    .slick-dots {bottom:-30px;}
    #main_wrap {
        height:auto;
        min-height:500px;
    }
    #main .item > div {
        height:0;
        background-size:contain;
        padding-top:99.47%;
    }
    #main .item01 > div {background-image:url("../images/main01_950.jpg");}
    #main .item02 > div {background-image:url("../images/main02_950.jpg");}
    #main .item03 > div {background-image:url("../images/main03_950.jpg");}

    .slick-dots {
        bottom:5vw;
    }
}

@media only screen and (max-width: 750px) {
    #main .item > div {
        padding-top:141.333%;
    }
    #main .item01 > div {background-image:url("../images/main01_750.jpg");}
    #main .item02 > div {background-image:url("../images/main02_750.jpg");}
    #main .item03 > div {background-image:url("../images/main03_750.jpg");}

    .slick-dots {
        bottom:0;
    }
}

#main:before {
    display:block;
    position:absolute;
    left:-100vw;
    bottom:-14.5vw;
    width:250vw;
    height:20vw;
    background-color:#ffffff;
    transform-origin:center;
    transform:rotate(-9.3deg);
    z-index:2;
    content:"";
}

@media only screen and (max-width: 950px) {
    #main:before {
        bottom:-12.5vw;
        height:20vw;
    }
}

@media only screen and (max-width: 750px) {
    #main:before {
        bottom:-19.5vw;
        height:25vw;
    }
}

@media only screen and (max-width: 420px) {
    #main:before {
        bottom:-21.5vw;
        height:28vw;
    }
}