/* 서브 공통 */
.w1300 {
    width: 1300px;
    margin: 0 auto;
}
.sub-top-inner {
    display: flex;
    position: relative;
    min-height: 550px;
}
.sub-top-inner .back {
    width: 64%;
    background: #006bfb;
    transform: skewX(-20deg);
    transform-origin: top;
    position: absolute;
    left: 0;
    height: 100%;
    overflow: hidden;
    /* padding: 120px 0; */
    box-sizing: border-box;
}
.sub-top-inner .left {
    width: 48%;
    position: absolute;
    top: 120px;
    z-index: 1;
}
.ser .left {
    top: 200px;
}
.optionalE .left {
    top: 140px;
}
.film .left {
    top: 200px;
}
.cus .left {
    top: 200px;
}
.contact .left {
    top: 200px;
}
.sub-top-inner .back_ {
    transform: skewX(-20deg);
    width: 100%;
    overflow: hidden;
    position: absolute;
    top: 0;
    left: 50%;
    height: 100%;
}
.sub-top-inner .right {
    transform: skewX(20deg);
    background: url(../img/sub/sub-bg01.png) no-repeat center/cover;
    height: 100%;
    width: 66%;
    transform-origin: bottom;
}
.signiture .right {
    background: url(../img/sub/sub-bg02.png) no-repeat center/cover;
}
.custom .right {
    background: url(../img/sub/sub-bg03.png) no-repeat center/cover;
}
.smart .right {
    background: url(../img/sub/sub-bg04.png) no-repeat center/cover;
}
.padline .right {
    background: url(../img/sub/sub-bg05.png) no-repeat center/cover;
}
.mailW .right {
    background: url(../img/sub/sub-bg06.png) no-repeat center/cover;
}
.booklet .right {
    background: url(../img/sub/sub-bg07.png) no-repeat center/cover;
}
.optionalE .right {
    background: url(../img/sub/sub-bg08.jpg) no-repeat center/cover;
}
.ser .right {
    background: url(../img/sub/sub-bg09.png) no-repeat center/cover;
}
.film .right {
    background: url(../img/sub/sub-bg10.png) no-repeat center/cover;
}
.cus .right {
    background: url(../img/sub/sub-bg11.png) no-repeat center/cover;
}
.contact1 .right {
    background: url(../img/sub/sub-bg12.jpg) no-repeat center/cover;
}
.sample .right {
    background: url(../img/sub/sub-bg13.png) no-repeat center/cover;
}
.sub-content {
    padding: 100px 0 0;
    box-sizing: border-box;
}
.sub-title {
    font-size: 50px;
    line-height: 65px;
    letter-spacing: -0.5px;
    font-weight: 700;
    color: #fff;
    margin-bottom: 22px;
}
.sub-text {
    font-size: 18px;
    line-height: 35px;
    letter-spacing: -0.5px;
    font-weight: 400;
    color: #fff;
}
.view-btn {
    color: #006bfb;
    background-color: #fff;
    text-align: center;
    display: block;
    width: 180px;
    line-height: 58px;
    height: 60px;
    font-weight: 700;
    border-radius: 50px;
    box-sizing: border-box;
    margin-top: 31px;
    transition: all .3s;
}
/* 서브 공통 */

/* collators1 */
.cont-in-top {
    font-size: 0;
    margin-bottom: 85px;
}
.cont-in-top h4 {
    font-size: 25px;
    color: #222;
    letter-spacing: -0.5px;
    font-weight: 700;
    line-height: 35px;
    margin-bottom: 14px;
}
.col-list {
    display: inline-block;
    vertical-align: top;
    width: 50%;
}
.col-list li {
    font-size: 16px;
    color: #333;
    font-weight: 400;
    letter-spacing: -0.5px;
    line-height: 40px;
    position: relative;
    margin-left: 10px;
}
.col-list li::before {
    content: '·';
    display: block;
    position: absolute;
    margin-left: -10px;
    color: #006bfb;
    font-size: 20px;
}
.col-text {
    font-size: 16px;
    color: #333;
    font-weight: 400;
    letter-spacing: -0.5px;
    line-height: 35px;
    margin-top: 33px;
}
.col-text.mt0 {
    margin-top: 0;
}
.col-text.mb33{
    margin-bottom: 33px;
}
.col-text.mb58 {
    margin-bottom: 58px;
}
.col-text.mb45 {
    margin-bottom: 45px;
}
.service-top h4 {
    margin-bottom: 9px;
}
.cont-in-bot {
    background-color: #f7f7f7;
    padding: 100px 0;
    box-sizing: border-box;
}
.gallery-list {
    position: relative;
    font-size: 0;
}
.gallery-list .slick-arrow {
    position: absolute;
    top: 32%;
    z-index: 1;
    display: block;
    border-radius: 50%;
    width: 52px;
    height: 52px;
    box-shadow: 0 0 7px rgb(0 0 0 / 20%);
    transition: all .3s;
    border: none;
    outline: none;
    text-indent: -9999px;
    cursor: pointer;
    transform: translateY(-50%);
    top: 50%;
}
.gallery-list .slick-prev {
    background: url(../img/sub/prev-btn.png) no-repeat center/cover;
    left: -26px;
}
.gallery-list .slick-next {
    background: url(../img/sub/next-btn.png) no-repeat center/cover;
    right: -26px;
}
.gallery-list .gal-img a {
    display: block;
    margin: 0 25px;
    border-radius: 10px;
    overflow: hidden;
}
.gallery-list .gal-img img {
    width: 100%;
}
.gallery-list .slick-list {
    margin: 0 -25px;
}
.bot-text {
    font-size: 18px;
    color: #222;
    font-weight: 500;
    letter-spacing: -0.5px;
    text-align: center;
    margin-top: 33px;
}
.lightboxOverlay {
    opacity: 0.5 !important;
}


.option-list {
    display: flex;
    flex-wrap: wrap;
    border-top: 2px solid #333;
    border-bottom: 1px solid #333;
}
.cont-box {
    display: inline-block;
    vertical-align: top;
    width: 50%;
    padding: 40px 0;
    box-sizing: border-box;
    padding-left: 40px;
    border-bottom: 1px solid #ddd;
}
.cont-box.left {
    padding-left: 0;
    padding-right: 40px;
    border-right: 1px solid #ddd;
    box-sizing: border-box;
}
.option-list .cont-box:nth-child(25),
.option-list .cont-box:nth-child(26) {
    border-bottom: 0;
}

.film-cont {
    padding: 100px 0;
    box-sizing: border-box;
    background-color: #eceef1;
}
.film-box {
    display: flex;
    height: 660px;
}
.video-box {
    width: 855px;
    margin-right: 20px;
    background-color: #fff;
}
.video-box .video {
    height: 500px;
}
.video-txt {
    padding: 36px 48px;
    box-sizing: border-box;
    background-color: #4583f1;
    margin: 0 10px;
    min-height: 150px;
}
.video-txt p {
    color: #fff;
    font-size: 25px;
    letter-spacing: -0.5px;
    font-weight: 500;
    margin-bottom: 18px;
}
.video-txt span {
    font-size: 16px;
    font-weight: 400;
    color: #fff;
    letter-spacing: -0.5px;
    line-height: 1.3;
}
.video-list {
    width: 425px;
    background-color: #fff;
    padding: 45px 42px;
    box-sizing: border-box;
    font-size: 0;
    overflow-y: scroll;
}
.video-list > h4 {
    font-size: 30px;
    color: #4583f1;
    font-weight: 800;
    margin-bottom: 9px;
}
.video-list > p {
    font-size: 20px;
    color: #333;
    font-weight: 700;
    margin-bottom: 36px;
}
.video-thumbs a {
    display: block;
    width: 100%;
    border: 1px solid #333;
    box-sizing: border-box;
}
.video-thumbs a img {
    width: 100%;
}
.video-thumbs span {
    font-size: 18px;
    color: #333;
    letter-spacing: -0.5px;
    font-weight: 400;
    margin: 17px 0 36px;
    display: inline-block;
}
.video-list::-webkit-scrollbar {
    width: 10px;
}
.video-list::-webkit-scrollbar-thumb {
    background: #4583f1;
}
.video-list::-webkit-scrollbar-track {
    background: #ddd;
}

.contact-cont {
    background-color: #f7f7f7;
    padding-bottom: 100px;
}
.location-box {
    font-size: 0;
}
.contact-box {
    display: inline-block;
    vertical-align: top;
    width: calc(100% - 650px);
}
.location-box.mb85 {
    margin-bottom: 85px;
}
.contact-box h2 {
    font-size: 35px;
    color: #006bfb;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin-bottom: 49px;
}
.contact-box h3 {
    font-size: 25px;
    color: #333;
    letter-spacing: -0.5px;
    font-weight: 700;
    margin-bottom: 30px;
}
.address {
    position: relative;
    padding-left: 40px;
    margin-bottom: 17px;
}
.address > img {
    position: absolute;
    left: 0;
    padding-top: 7px;
}
.address > span {
    font-size: 18px;
    color: #333;
    font-weight: 400;
    letter-spacing: -0.5px;
    line-height: 30px;
}
.map-box {
    display: inline-block;
    vertical-align: top;
    width: 650px;
    height: 400px;
}
.contact-cont2 {
    width: 100%;
    height: 900px;
    padding: 0;
}

@media only screen and (max-width : 1720px) {
    .sub-top-inner {
        min-height: 650px;
    }
    .sub-top-inner .left .txt {
    }
    .contact-cont2 > img {
        width: 100%;
    }
    .contact-cont2 {
        height: 52.3256vw;
    }
}

@media only screen and (max-width : 1300px) {
    .w1300 {
        width: 100%;
        padding: 0 40px;
        box-sizing: border-box;
    }
    .gallery-list .slick-next {
        right: 0;
    }
    .gallery-list .slick-prev {
        left: 0;
    }

}

@media only screen and (max-width : 1000px) {
    .sub-top-inner {
        display: block;
        min-height: auto;
        background: #006bfb;
    }
    .sub-top-inner .back_ {
        display: none;
    }
    .sub-top-inner .back {
        width: 100%;
        transform: none;
        position: relative;
    }
    .sub-top-inner .left {
        position: static;
        width: 100%;
        padding: 100px 0;
        box-sizing: border-box;
    }
    .sub-top-inner .left .txt{
        width: 100%;
        padding: 0;
    }
    .film-box {
        height: auto;
        flex-wrap: wrap;
    }
    .video-box {
        width: 100%;
        margin-right: 0;
    }
    .video-list {
        width: 100%;
        height: 700px;
    }
    .contact-box {
        width: 100%;
    }
    .map-box {
        width: 100%;
    }
}

@media only screen and (min-width :760px) {
    
    .view-btn:hover {
        box-shadow: 0 0 20px 10px rgb(0 0 0 / 20%);
    }
}

@media only screen and (max-width: 760px) {
    
    .w1300 {
        padding: 0 5.2632vw;
    }
    .sub-content {
        padding: 13.1579vw 0 0;
    }
    .sub-top-inner .left{
        padding: 13.1579vw 0;

    }
    .cont-in-bot {
        padding: 13.1579vw 0;
    }

    .sub-title {
        font-size: 7.2368vw;
        line-height: 8.5526vw;
        margin-bottom: 2.8947vw;
    }
    .sub-text {
        font-size: 2.8947vw;
        line-height: 5.2632vw;
    }
    .view-btn{
        width: 23.6842vw;
        line-height: 7.8947vw;
        height: 7.8947vw;
        font-size: 1.9737vw;
        margin-top: 4.0789vw;
    }
    .col-list {
        width: 100%;
    }
    .col-list li {
        font-size: 2.6316vw;
        line-height: 5.9211vw;
    }
    .col-text {
        font-size: 2.6316vw;
        line-height: 5.2632vw;
        margin-top: 4.3421vw;
    }
    .col-text.mb33{
        margin-bottom: 4.3421vw;
    }
    .cont-in-top{
        margin-bottom: 11.1842vw;
    }
    .cont-in-top h4 {
        font-size: 3.9474vw;
        line-height: 5.2632vw;
        margin-bottom: 1.8421vw;
    }
    .col-text.mb58{
        margin-bottom: 7.6316vw;
    }

    .bot-text {
        font-size: 2.8947vw;
        margin-top: 4.3421vw;
    }
    .gallery-list .slick-arrow{
        display: none !important;
    }

    .cont-box {
        width: 100%;
        padding: 5.2632vw 0;
        padding-left: 0;
    }
    .cont-box.left {
        padding-right: 0;
        border-right: 0;
    }
    
    .option-list .cont-box:nth-child(26){
        display: none;
    }

    .film-cont {
        padding: 13.1579vw 0;
    }
    .video-box .video{
        height: 65.7895vw;
    }
    .video-txt{
        min-height: auto;
        margin: 0;
        padding: 4.7368vw 6.3158vw;
    }
    .video-txt p{
        font-size: 3.9474vw;
        margin-bottom: 2.3684vw;
    }
    .video-txt span{
        font-size: 3.0263vw;
    }
    .video-box {
        margin-bottom: 2.6316vw;
    }
    .video-list {
        padding: 5.9211vw 9.2105vw;
    }
    .video-list > h4 {
        font-size: 5.2632vw;
        margin-bottom: 1.1842vw;
    }
    .video-list > p {
        font-size: 3.2895vw;
        margin-bottom: 4.7368vw;
    }
    .video-thumbs span{
        font-size: 3.2895vw;
        margin: 2.2368vw 0 4.7368vw;
    }

    .contact-cont {
        padding-bottom: 13.1579vw ;
    }
    .contact-box h2 {
        font-size: 5.9211vw;
        margin-bottom: 6.4474vw;
    }
    .contact-box h3{
        font-size: 3.9474vw;
        margin-bottom: 3.9474vw;
    }
    .address{
        margin-bottom: 2.2368vw;
        padding-left: 5.2632vw;
    }
    .address > img{
        padding-top: 0.9211vw;
        width: 3.2895vw;
    }
    .address > span {
        font-size: 3.2895vw;
        line-height: 4.6053vw;
    }
    .location-box.mb85{
        margin-bottom: 11.1842vw;
    }
    .map-box{
        height: 52.6316vw;
    }

}