@charset "utf-8";

#wrap{margin:0;}
.main_wrap{ overflow: hidden; }

/* Main Visual */
.mv_sec{position: relative;}
.mv_sec .item {position: relative;overflow: hidden; display: flex; justify-content: center; align-items: center;}
.mv_sec .item img {width: 100%; min-width: 970px; transform:scale(1); transition:all 5s; display: block;}
.mv_sec .active .item img{transform:scale(1.1) rotate(.001deg); }
.mv_sec .active .mv1 img{transform:scale(1.1) rotate(.001deg);}
.mv_sec .txt_wrap {position: absolute; top: 50%; left: 0%; width: 100%; transform: translateY(-50%);}
.mv_sec .txt_wrap h2 {font-size: 70px; line-height: 75px; color: #fff; font-weight: 700; text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3); text-align: center; position: relative; top:50px; opacity: 0; transition:.8s;}
.mv_sec .txt_wrap p {font-size: 28px; line-height: 1; font-weight: 500; color: #fff; text-shadow: 1px 2px 5px rgba(0, 0, 0, 0.3); margin-top: 35px; text-align: center; position: relative; top:50px; opacity: 0; transition:.8s;}
.mv_sec .active .txt_wrap p,
.mv_sec .active .txt_wrap h2 {opacity: 1; top:0;}
.mv_sec .play_bx {position: absolute; bottom: 80px; left: 100px; z-index: 3;}
.mv_sec .play_bx .play {display: none;}
.mv_sec .scroll_wrap {width: auto; position: absolute; bottom: 80px; right: 100px; z-index: 3; cursor: pointer;
    animation: motion 1.5s linear 0s infinite alternate;
}

@keyframes motion {
    0% {bottom: 90px;}
    100% {bottom: 70px;}
}
.mv_sec .owl-dots {position: absolute; bottom: 80px; left: 50%; transform: translateX(-50%);}
.mv_sec .owl-dots .owl-dot {background: none; margin-right: 31px; width: 39px; height: 38px; text-align: center;}
.mv_sec .owl-dots .owl-dot:last-child {margin-right: 0;}
.mv_sec .owl-dots .owl-dot span {width: 8px; height: 8px; margin: 0 auto; background: #fff; border-radius: 50%;}
.mv_sec .owl-theme .owl-dots .owl-dot.active, 
.mv_sec .owl-theme .owl-dots .owl-dot:hover {background: url(../../images/main/dot_bg.png) no-repeat center center;}
.mv_sec .owl-theme .owl-dots .owl-dot.active span, 
.mv_sec .owl-theme .owl-dots .owl-dot:hover span {background-color: #f7aa15;}


/* mct 공용 */
.mct .inner {max-width: 1320px; margin: 0 auto;}
.mct .mct_tit {font-size: 50px; line-height: 1; font-weight: 700; color: #333; text-align: center;}
.mct .mct_stit {font-size: 18px; line-height: 30px; color: #333; text-align: center; margin-top: 15px;}

/* mct01 */
.mct01 {margin: 120px auto 0;}
.mct01 .intro_bx {width: 100%; margin-top: 50px; position: relative; padding-top: 130px; display: flex; flex-flow: column wrap; justify-content: flex-end; align-items: center; overflow: hidden; box-shadow: 8px 13px 25px 0px rgba(0, 0, 0, 0.1); border-radius: 20px; border-bottom-right-radius: 0;}
.mct01 .intro_bx h3 {font-size: 23px; line-height: 1; font-weight: 500; color: #fff; text-align: center;}
.mct01 .intro_bx ul {display: flex; flex-flow: row wrap; margin-top: 30px; width: 100%; max-height: 445px;}
.mct01 .intro_bx ul li {width: 50%; color: #fff; font-size: 18px; line-height: 30px;}
.mct01 .intro_bx ul li:first-child {padding: 0 30px 0 90px; border-right: 1px solid rgba(255, 255, 255, 0.3);}
.mct01 .intro_bx ul li:last-child {padding: 0 70px 0 50px;}
.mct01 .intro_bx .btn_bx {margin-top: 72px; align-self: flex-end; width: 70px; height: 70px; position: relative;}
.mct01 .intro_bx .btn_bx > img {position: absolute; top: 0; left: 0;}
.mct01 .intro_bx .btn_bx > img.hover_img {display: none;}
.mct01 .intro_bx > img {width: 100%; position: absolute; top: 0; left: 0; z-index: -1; transition: all 0.3s;}

.mct01 .intro_bx:hover > img {transform: scale(1.5);}
.mct01 .intro_bx:hover .btn_bx > img.hover_no {display: none;}
.mct01 .intro_bx:hover .btn_bx > img.hover_img {display: block;}

/* mct02 */
.mct02 {margin-top: 130px;}
.mct02 ul {display: flex; flex-flow: row wrap;}
.mct02 ul li {position: relative; width: 20%; overflow: hidden;}
.mct02 ul li > img {position: absolute; top: 0; left: 0; z-index: -1; transition: all 0.3s; width: 100%;}
.mct02 ul li a {padding: 130px 0 70px; width: 100%; }
.mct02 ul li h6 {font-size: 14px; font-weight: 700; line-height: 1; color:#fff; text-align: center;}
.mct02 ul li h4 {font-size: 35px; font-weight: 500; line-height: 1; color:#fff; text-align: center; margin-top: 15px;}
.mct02 ul li h5 {font-size: 23px; font-weight: 700; line-height: 1; color:#fff; text-align: center; margin-top: 65px; position: relative;}
.mct02 ul li h5::before {content: ""; width: 15px; height: 3px; background-color: #00206c; position: absolute; top: -15px; left: 50%;}
.mct02 ul li h5::after {content: ""; width: 15px; height: 3px; background-color: #f7aa15; position: absolute; top: -15px; right: 50%;}
.mct02 ul li .btn_bx {margin: 227px auto 0; width: 65px; height: 65px; position: relative;}
.mct02 ul li .btn_bx > img {position: absolute; top: 0; left: 0;}
.mct02 ul li .btn_bx > img.hover_img {display: none;}

.mct02 ul li:hover > img {transform: scale(1.5);}
.mct02 ul li:hover .btn_bx > img.hover_no {display: none;}
.mct02 ul li:hover .btn_bx > img.hover_img {display: block;}

/* mct03 */
.mct03 {padding: 130px 0; background: linear-gradient(-90deg, rgba(61,86,111,0.1) 0%, rgba(247,170,21,0.1) 100%);}
.mct03 .tab_btn {display: flex; flex-flow: row wrap; margin-top: 60px; border-top: 1px solid #fff;}
.mct03 .tab_btn button {width: 50%; text-align: center; font-size: 18px; font-weight: 500; color: #333; padding-top: 20px; border-top: 1px solid #ddd; position: relative; top: -2px; transition: all 0.3s; background:none; cursor: pointer;}
.mct03 .tab_btn button a {display: block; width: 15px; height: 15px; position: absolute; top: 27.5px; right: 40px;}
.mct03 .tab_btn button a .btn_off {display: block; position:absolute; top:0; left:0; transition: all 0.3; opacity: 1;}
.mct03 .tab_btn button a .btn_on {display: block; position:absolute; top:0; left:0; transition: all 0.3; opacity: 0;}
/* .mct03 .tab_btn button::before {content: ""; background: url(../../images/main/mct03_btn2.png) no-repeat center center; }
.mct03 .tab_btn button::after {content: ""; background: url(../../images/main/mct03_btn1.png) no-repeat center center; display: block; width: 15px; height: 15px; position: absolute; top: 27.5px; right: 40px; } */
.mct03 .view_bx {margin-top: 70px; position: relative; height: 335px;}
.mct03 .view_bx > ul {position: absolute; top: 0; left: 0; display: flex; flex-flow: row wrap;}
.mct03 .view_bx > ul li {width: 307px; margin-right: 30px; background-color: #fff; border-radius: 25px; box-shadow: 8px 13px 25px 0px rgba(0, 0, 0, 0.05); transition: all 0.3s; height: 334px;}
.mct03 .view_bx > ul li:nth-child(4n) {margin-right: 0;}
.mct03 .view_bx > ul li a { padding: 50px 35px;}
.mct03 .view_bx > ul li h4 {font-size: 23px; font-weight: 500; color: #333; line-height: 33px; height: 66px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}
.mct03 .view_bx > ul li p {margin-top: 20px;  height: 78px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; white-space: normal; text-align: left; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;}
.mct03 .view_bx > ul li h6 {font-size: 14px; font-weight: 700; line-height: 1; color: #333; margin-top: 45px;}
.mct03 .view_bx > ul li h6 .nothic_new {color: #d90051; margin-left: 10px;}

.mct03 .tab_btn button.on,
.mct03 .tab_btn button:hover {color: #f7aa15; border-color: #f7aa15;}
.mct03 .tab_btn button.on a .btn_off,
.mct03 .tab_btn button:hover a .btn_off {opacity: 0;}
.mct03 .tab_btn button.on a .btn_on,
.mct03 .tab_btn button:hover a .btn_on {opacity: 1;}
.mct03 .view_bx > ul li:hover {background: none; margin-top:-20px; border: 1px solid #f7aa15;}