﻿/* slide delet */
.slider .move-btn {display: none;}

/* MAIN S */
.sec01 {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 35px 0 50px;
    box-sizing: border-box;
    background-color: #1A3659;
    /*background: url(../../../Layouts/mplns_Layout/Images/box_bg.png) no-repeat;
    background-position: center;
    background-size: cover;*/
}

.sec01-contentsWrap {display: flex; flex-wrap: wrap; align-items: center;}
.sec01-contentsWrap .cont { margin-bottom: 10px; width: 25%;}
.sec01-contentsWrap .cont a {display: block; width: 100%; height: 100%; position: relative;}
.sec01-contentsWrap .cont a::before {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0, 0, 0, .5); opacity: 0; transition: all .5s ease-in-out 0s; }
.sec01-contentsWrap .cont a:hover::before { opacity: 1; }
.sec01-contentsWrap .cont p {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); 
                             color: white; font-size: 1.4vw; font-weight: bold; white-space: nowrap; }


.sec02 {
    position: relative;
    width: 100%;
    margin: 0 auto;
    padding: 50px 0;
    box-sizing: border-box;
    background: url(../../../Layouts/mplns_Layout/Images/bottom_bg.png) no-repeat;
    background-position: center;
    background-size: cover;
    text-align: center;
}

.sec02-introTxt {font-size: 3rem; font-weight: bold;}
.sec02-contentsWrap {display: flex; justify-content: space-around; align-items: center; padding: 50px 0 0;}
.sec02-contentsWrap .square {display: block; cursor: pointer; width: 165px; height: 165px; background: #E39E36; border-radius: 50%; flex-direction: column; padding: 25px 0; box-sizing: border-box; transition: all .2s ease 0s;}
.sec02-contentsWrap .square:hover {transform: translateY(-10px);}
.sec02-contentsWrap .square-title {color: white; font-family:'NanumSquareRound';}

.addClip h2.clipTitle {
    color: white;
    font-weight: bold;
    letter-spacing: 1px;
    margin-bottom: 0;
    /*text-shadow: 0 4px 3px #c4b59d, 0 0px 3px #fff;*/
}
.clipTop .clipCont {overflow: hidden; padding: 30px 0 60px;}
/*.clipCont .swiper-wrapper .swiper-slide {width: auto!important;}*/
.clipCont .swiper-wrapper a {display: inline-block; width: 100%; /*height: 190px;*/ overflow: hidden;}
.clipCont .swiper-wrapper p {font-size: 17px; color: white; margin: 0;}
.addClip .title { color: white; font-size: 1.7rem;}
.addClip .clipBtm ul {display: flex; align-items: flex-start;}
.addClip .clipBtm ul li {padding: 30px 10px 0; box-sizing: border-box;}
.addClip .clipBtm ul li a {display: block; height: 100%; box-shadow: rgb(0 0 0 / 24%) 0px 3px 8px;}
 


#main-5{padding:0 0 75px; background: #1a3659;}
#main-5 .main5T{padding:55px 0}
#main-5 .main5T h1{font-size: 35px;margin: 0;line-height: 1.3; color:#fff; text-align:center;}
#main-5 .main5T h2{margin: 0;font-size: 42px;font-weight: bold;letter-spacing: 0;color: #99A4B0;}
#main-5 #main5{position:relative;}
#main-5 #main5 .PhotoM{overflow:hidden;}
#main-5 #main5 .PhotoM .PhotoIMG{display: block;
position: relative;height: 300px;overflow: hidden;background-color: #000;
margin: 0 auto;background-size: cover;background-position: 50% 50%;
background-origin: border-box;background-repeat: no-repeat;}
#main-5 #main5 .PhotoM .PhotoIMG .PhotoIMT{position: absolute;
height: 100%;width: 100%;background: rgba(0,0,0,0.7);
z-index: 3;top: 0;left: 0;display:none;}
#main-5 #main5 .PhotoM .PhotoIMG .PhotoIMT h1{font-size: 22px;
margin: 0;color: #fff;position: absolute;top: 45%;text-align: center;
left: 0%;width: 100%;border: none;display: block;transform: translate(0,-50%);}
#main-5 #main5 .PhotoM .PhotoIMG .PhotoIMT h5{font-size: 22px;
color: #fff;margin: 0;position: absolute;top: 60%;text-align: center;
left: 0%;width: 100%;border: none;display: block;transform: translate(0,-50%);}
#main-5 #main5 .PhotoP{position: absolute;z-index:2;
top: 50%;text-align: center;left: -6%;border: none;
display: block;transform: translate(0,-50%);}
#main-5 #main5 .PhotoN{position: absolute;z-index:2;
top: 50%;text-align: center;right: -6%;border: none;
display: block;transform: translate(0,-50%);}
#main-5 #main5 .PhotoM .PhotoIMG .PhotoIMT{position: absolute;
height: 100%;width: 100%;background: rgba(0,0,0,0.7);
z-index: 3;top: 0;left: 0;display:none;}
#main-5 #main5 .PhotoM .contentSlideWrapper .contentSlide:hover .PhotoIMG,
#main-5 #main5 .PhotoM .contentSlideWrapper .contentSlide:focus .PhotoIMG
{-webkit-transform: translate(0px,-10px);
transform: translate(0px,-10px);transition: all 0.5s;}
#main-5 .story_pagenation {position: absolute; bottom: -60px;}
#main-5 .story_pagenation .swiper-pagination-bullet { width: 12px; height: 12px; background: #B4CCE8;}
#main-5 .story_pagenation .swiper-pagination-bullet-active {
        background: #000;
    }
.swiper-pagination-fraction, .swiper-pagination-custom, .swiper-container-horizontal > .swiper-pagination-bullets {
    text-align: center;
    bottom: -60px !important;
}
/* responsive */

@media (max-width: 1499px) {
    #main-5 #main5 .PhotoM .PhotoIMG {
        height: 210px;
    }

    #main-5 #main5 .PhotoN img {
        width: 70%;
    }
    #main-5 #main5 .PhotoP img {
        width: 70%;
    }

}
@media (max-width: 1199px) {
    #main-5 .main5T { padding: 35px  0;}
    #main-5 #main5 .PhotoN {
        right: 0%;
    }
    #main-5 #main5 .PhotoP {
        left: 0%;
    }

}
    @media (max-width: 414px) {
.addClip .title { display: none; }
.clipCont .swiper-wrapper p { display: none;}
.sec01-contentsWrap .cont { width: 45% !important; }
}

    @media (max-width: 768px) {
#main-5 #main5 .PhotoN img { width: 50%;}
#main-5 #main5 .PhotoP img { width: 70%;}
#main-5 .main5T { padding: 20px  0;}
#main-5 #main5 .PhotoM .PhotoIMG { height: 178px;}
#main-5 .main5T h1 { font-size: 20px;}
#main-5 #main5 .PhotoM .PhotoIMG { width: 50%; }
.slider .slider-dots { display: none; }
/*.clipTop .clipCont .swiper-wrapper .swiper-slide {width: 100%!important;}*/
.addClip .clipBtm ul li:last-child { display: none; }
.addClip .clipBtm ul li { padding: 15px 0 !important; }
.sec02-contentsWrap { flex-wrap: wrap; align-items: stretch; }
.sec02-contentsWrap .square { padding: 0; display: flex; flex-direction: column; justify-content: center; margin-bottom: 10px; }

}


    @media (max-width: 992px) {

        .sec01 {
            padding: 0 0 30px;
        }

        .sec02 {
            background-position: 40%;
        }

        .sec02-introTxt {
            word-break: keep-all;
        }

        .sec02-contentsWrap { /*flex-wrap: wrap;*/
            padding: 20px 0;
        }
        /* .sec02-contentsWrap .square {margin-bottom: 15px;} */
        .sec01-contentsWrap .cont {
            margin-right: 10px;
        }
        /* .sec01-contentsWrap .cont p,*/ .addClip h2.clipTitle {
            font-size: 2rem !important;
        }

        .clipCont .swiper-wrapper p {
            font-size: 15px;
        }
    }

    @media (max-width: 1199px) {
        .sec02-introTxt {
            font-size: 2rem;
        }

        .addClip h2.clipTitle {
            font-size: 2.4rem;
        }

        .clipTop .clipCont {
            padding: 15px 0 40px;
        }

        .addClip .clipBtm ul li {
            padding: 15px 15px 0;
        }

        .sec02-contentsWrap {
            justify-content: center;
        }

            .sec02-contentsWrap .square {
                margin-right: 10px;
            }
    }

    @media (max-width: 1499px) {
        .sec01-contentsWrap {
            justify-content: center;
        }

            .sec01-contentsWrap .cont {
                margin-right: 10px;
                margin-bottom: 15px;
            }
    }