﻿@keyframes move {
    from {
        transform: translateX(100px) scale(1.2);
        animation-timing-function: cubic-bezier(.2,0,.8,1);
    }

    to {
        transform: translateX(0px) scale(1);
    }
}

@-webkit-keyframes updown {
    0% {
        bottom: 0;
    }

    100% {
        bottom: 30px;
    }
}

/* common */
.slider .move-btn {display: none;}
a{text-decoration:none!important;color:inherit;}
#main-slider{padding: 115px 0 0;}
#main-slider{position:relative;}
.nav-tabs {border-bottom:none;}
.plus { position:absolute; top:0; right:0;}
.plus:hover { opacity:0.8; transition:0.3s all ease;}
.slider .move-btn{top:50%!important;}
.slider .slider-wrapper .slide p{display: flex;}
.slider .slider-wrapper .slide img{width: 100%;}
.box{display:inline-block; position:relative; opacity:0; top:50px; }
.flexBox{display: inline-flex;flex-direction: column;flex-wrap: wrap;align-content: center;justify-content: center;align-items: center;text-align:center;}
.black{color:#000!important;text-decoration:none;}
.white{color:#fff!important;text-decoration:none;}
#main-1{padding:70px 0 0;}
#main-1 .main1T{display: inline-flex;flex-direction: row;flex-wrap: wrap;justify-content: space-evenly;width: 100%;padding: 0 0 70px;}
#main-1 .main1T .main1hf{display: inline-flex;flex-direction: column;justify-content: space-between;align-items: center;text-decoration:none;color:inherit;}
#main-1 .main1T .main1hf:hover{position:relative;
animation-name: updown;animation-duration:1s;animation-duration: leaner;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode: forwards;}
#main-1 .main1T .main1hf .circle{padding:60px;position:relative; border-radius:50%;margin-bottom:35px;}
#main-1 .main1T .main1hf .circle img{position:absolute;top: 50%;transform: translate(-50%, -50%);}
#main-1 .main1T .main1hf h4{font-size: 20px;font-weight: bold;margin: 0;line-height: 1.5; color: #000;}
#main-1 .main1T .main1hf h5{font-size: 20px;font-weight: bold;margin: 0;line-height: 1.5; color: #3D537A;}
#main-1 .main1BT{float:right;}
#main-1 .main1BT .onlineBT{display: inline-flex;flex-direction: row;align-items: center;}
#main-1 .main1BT .onlineBT .onlineT{display: inline-flex;float: left;padding: 0 40px;flex-direction: row;justify-content: center;align-items: center;}
#main-1 .main1BT .onlineBT .onlineT h1{margin: 0;font-size: 30px;display: inline-block;color: #000;font-weight: bold;word-spacing: 10px;word-break: keep-all;}
#main-1 .main1BT .onlineBT .onlineT .onplay{padding:16px; background-repeat: no-repeat;background-position: center;background-size: contain;display: inline-block;margin: 30px;}
#main-1 .main1BT .onlineBT .onlineBOX{display: inline-block;position: relative;}
#main-1 .main1BT .onlineBT .onlineBOX h1{margin: 0;position: absolute;top: 0%;text-align: center;width: 100%;
height: 100%;display: inline-flex;transform: translate(-50%,0);justify-content: center;align-items: center;background-color: #B0082D;color: #fff;}

#main-2{padding: 100px 0; background-color:#001B3F;position:relative;}
#main-2 .main2B {display: flex; grid-gap: 5%;}
#main-2 .main2L{width: 50%; color: #fff;}
#main-2 .main2L h2{margin: 0; font-size: 24px;margin-bottom:25px;}
#main-2 .main2L h1{margin: 0;font-size: 40px;font-weight: bold;letter-spacing: .5px;
white-space: normal;word-wrap: break-word;display: -webkit-box;word-break: keep-all;-webkit-line-clamp: 2;
overflow: hidden;-webkit-box-orient: vertical;margin-bottom:20px;}
#main-2 .main2L h3{margin: 0;font-size: 24px;margin-bottom:40px;}
#main-2 .main2L h5{margin: 0;font-size: 18px;}
#main-2 .main2R{position:relative; width: 50%; aspect-ratio: 1920 / 1080;}
#main-2 .main2R .background {width: 100%; height: 100%; background-position: 50% 50%; background-size: cover; border: 0px;}
#main-2 .main2R .smplay{position: absolute;right: 0;bottom: 0;transform: translate(0,50%);width:100px;height:100px;}
#main-2 .main2R .smplay .on{position: absolute;background-size: contain;height: 100%;width: 100%;background-position: center;background-repeat: no-repeat;opacity:0;transition:0.3s all ease;}
#main-2 .main2R .smplay .off{position: absolute;background-size: contain;height: 100%;width: 100%;background-position: center;background-repeat: no-repeat;opacity:1;transition:0.3s all ease;}
#main-2 a:hover .smplay .on{opacity:1; transition:0.3s all ease;}
#main-2 a:hover .smplay .off{opacity:0; transition:0.3s all ease;}
#main-3 {padding: 100px 0;}
#main-3 .main3CT {margin-bottom: 30px;}
#main-3 .main3CT h1 {display: flex; grid-gap: 25px; font-weight: bold;  color: #132E5B; margin: 0px; }
#main-3 .main3CT h1 span {font-weight: normal; color: #6B88B2;}
#main-3 .main3T{padding: 100px 0 30px;color:#fff;display: inline-flex;align-items: flex-end;gap: 25px;}
#main-3 .main3T h1{margin: 0;font-size: 41px;display:inline-block;font-weight:bold; color: #132E5B; }
#main-3 .main3T h2{margin: 0;font-size: 34px;display:inline-block;  color: #6D88B3;}
#main-3 .main3M{height:480px;display: grid;grid-template-columns: 34fr 40fr 26fr;width:100%;margin-top: 50px; }
#main-3 .main3M .main3L{display: inline-flex;flex-direction: column;}
#main-3 .main3M .main3L .main3LT,
#main-3 .main3M .main3L .main3LB{height:50%;box-shadow: 5px 5px 5px #000;}
#main-3 .main3M .main3L .main3LT:hover,
#main-3 .main3M .main3L .main3LB:hover{position:relative;
animation-name: updown;animation-duration:1s;animation-duration: leaner;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode: forwards;}
#main-3 .main3M .main3C{display: inline-flex;}
#main-3 .main3M .main3C .main3CL,
#main-3 .main3M .main3C .main3CR{width: calc(100%/2);height: 100%;box-shadow: 5px 5px 5px #000;}
#main-3 .main3M .main3C .main3CL:hover,
#main-3 .main3M .main3C .main3CR:hover{position:relative;
animation-name: updown;animation-duration:1s;animation-duration: leaner;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode: forwards;}
#main-3 .main3M .main3R{display: inline-flex;flex-direction: column;}
#main-3 .main3M .main3R .main3RT,
#main-3 .main3M .main3R .main3RB{box-shadow: 5px 5px 5px #000;}
#main-3 .main3M .main3R .main3RT{height:65%;}
#main-3 .main3M .main3R .main3RB{height:35%;}
#main-3 .main3M .main3R .main3RT:hover,
#main-3 .main3M .main3R .main3RB:hover{position:relative;
animation-name: updown;animation-duration:1s;animation-duration: leaner;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode: forwards;}
#main-3 .main3M h1{margin: 0;font-size: 31px;font-weight: bold;letter-spacing: .5px;line-height: 2;}
#main-3 .main3M h5{margin: 0;font-size: 21px;line-height: 1.5;}
#main-4{position:relative; padding: 100px 0;}
#main-4 .main4C h1 {margin: 0px; padding-bottom: 50px; text-align:center; font-size: 35px; font-weight: bold; letter-spacing: 1px; text-decoration: none; color: #2A3C52;}
#main-4 .main4L{ width: 33%;display:inline-block;}
#main-4 .main4L .main4LT{display:inline-block;text-decoration:none;color:#000;}
#main-4 .main4L .main4LT h1{margin: 0;font-size: 35px;font-weight: bold;letter-spacing: 1px; color: #2B3E4F;}
#main-4 .main4L .main4LM{overflow:hidden;}
#main-4 .main4L .main4LM .newsM{display:inline-flex;width:100%;gap:70px; padding: 105px 0 0;}
#main-4 .main4L .main4LM .newsM .newsL{width: 15%;}
#main-4 .main4L .main4LM .newsM .newsL h1{margin: 0;font-size: 25px;font-weight: bold;letter-spacing: .5px;display: inline-block;text-decoration:none;color:#283D50;}
#main-4 .main4L .main4LM .newsM .newsL hr{width: 100%;border-color: #000;margin: 20px 0;}
#main-4 .main4L .main4LM .newsM .newsR{margin-bottom:40px;overflow:hidden;}
#main-4 .main4L .main4LM .newsM .newsR .contentSlideWrapper{height:165px;}
#main-4 .main4L .main4LM .newsM .newsR ul a li h5{margin: 0;font-size: 18px;
letter-spacing: .5px;width: 100%;color: #888283;text-overflow: ellipsis;white-space: nowrap;overflow: hidden;}
#main-4 .main4L .main4LM .newsM .newsR ul a li h5 .bar {margin: 0 5px;}
.newsBTNM{width: 100%;display: inline-block;}
.newsBTNM .newsBTN{float: right;}
.newsBTNM .newsBTN .newsPTN{padding: 10px 40px;display: inline-block;margin: 20px 0;background-position:center;background-repeat:no-repeat;float:left;}
.newsBTNM .newsBTN .newsNTN{padding: 10px 40px;display: inline-block;margin: 20px 0;background-position:center;background-repeat:no-repeat;float:left;border-left:.5px solid #C2C2C2;}

#main-4 .main4R{display:inline-block;width : 33%; overflow:hidden;}
#main-4 .main4L .subject {display: flex;}
#main-4 .main4R .subject {display: flex;}
#main-4 .main4T .subject {display: flex;}
#main-4 .main4R .main4RT h1{margin: 0;font-size: 35px;font-weight: bold;letter-spacing: 1px;text-decoration:none;color:#2A3C52;}
#main-4 .main4R .main4RM{position:relative;padding: 70px 0 0;overflow:hidden;}
#main-4 .main4RM .main4S .contentSlide{height:225px;}
/* 애니메이션 이름 */
#main-4 .main4RM .main4S .contentSlide:hover .galleryIMG{position:relative;
animation-name: updown;animation-duration:1s;animation-duration: leaner;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode: forwards;
}
#main-4 .main4RM .main4S .contentSlide a{color: rgba(0,1,1,.5);text-decoration:none;}
#main-4 .main4RM .main4S .galleryIMG{display: block;position: relative;scale:.9;box-shadow: 5px 5px 5px;height:100%;
overflow: hidden;background-color: #000;margin: 0 auto;background-size: cover;background-position: 50% 50%;
background-origin: border-box;background-repeat: no-repeat;}
#main-4 .main4RM .main4S .contentSlide:hover .galleryT{opacity:1;transition:0.3s all ease;}
#main-4 .main4RM .main4S .galleryT{position: absolute;height: 100%;width: 100%;opacity:0;
background: rgba(0,0,0,.3);z-index: 3;top: 0;left: 0;}
#main-4 .main4RM .main4S .galleryT h2{font-size: 20px;margin: 0;color: #fff;position: absolute;
top: 45%;text-align: center;left: 0%;width: 100%;border: none;display: block;transform: translate(0,-50%);}
#main-4 .main4RM .main4S .galleryT h5{font-size: 20px;color: #fff;margin: 0;position: absolute;
top:65%;text-align: center;left: 0%;width: 100%;border: none;display: block;transform: translate(0,-50%);}
.galleryBTNM{margin: 15px 0 0;}
.galleryBTNM .galleryBTN{display:inline-block;float:right;}
.galleryBTNM .galleryBTN .galleryPTN{padding: 10px 40px;display: inline-block;margin: 20px 0;background-position:center;background-repeat:no-repeat;float:left;}
.galleryBTNM .galleryBTN .galleryNTN{padding: 10px 40px;display: inline-block;margin: 20px 0;background-position:center;background-repeat:no-repeat;float:left;border-left:.5px solid #C2C2C2;}




#main-4 .main4T{ display:inline-block; width: 33%; overflow:hidden;}
#main-4 .main4T .main4TT h1{margin: 0;font-size: 35px;font-weight: bold;letter-spacing: 1px;text-decoration:none;color:#2A3C52;}
#main-4 .main4T .main4TM{position:relative;padding: 70px 0 0;overflow:hidden;}
#main-4 .main4TM .main4TR .contentSlide{height:225px;}
/* 애니메이션 이름 */
#main-4 .main4TM .main4TR .contentSlide:hover .galleryIMG{position:relative;
animation-name: updown;animation-duration:1s;animation-duration: leaner;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode: forwards;
}
#main-4 .main4TM .main4TR .contentSlide a{color: rgba(0,1,1,.5);text-decoration:none;}
#main-4 .main4TM .main4TR .galleryIMG{display: block;position: relative;scale:.9;box-shadow: 5px 5px 5px;height:100%;
overflow: hidden;background-color: #000;margin: 0 auto;background-size: cover;background-position: 50% 50%;
background-origin: border-box;background-repeat: no-repeat;}
#main-4 .main4TM .main4TR .contentSlide:hover .galleryT{opacity:1;transition:0.3s all ease;}
#main-4 .main4TM .main4TR .galleryT{position: absolute;height: 100%;width: 100%;opacity:0;
background: rgba(0,0,0,.3);z-index: 3;top: 0;left: 0;}
#main-4 .main4TM .main4TR .galleryT h2{font-size: 20px;margin: 0;color: #fff;position: absolute;
top: 45%;text-align: center;left: 0%;width: 100%;border: none;display: block;transform: translate(0,-50%);}
#main-4 .main4TM .main4TR .galleryT h5{font-size: 20px;color: #fff;margin: 0;position: absolute;
top: 57%;text-align: center;left: 0%;width: 100%;border: none;display: block;transform: translate(0,-50%);}

#main4T .contentSlide{height:225px;}
/* 애니메이션 이름 */
#main4T .contentSlide:hover .galleryIMG{position:relative;
animation-name: updown;animation-duration:1s;animation-duration: leaner;animation-iteration-count:infinite;animation-direction:alternate;animation-fill-mode: forwards;
}
#main4T .contentSlide a{color: rgba(0,1,1,.5);text-decoration:none;}
#main4T .galleryIMG{display: block;position: relative;scale:.9;box-shadow: 5px 5px 5px;height:100%;
overflow: hidden;background-color: #000;margin: 0 auto;background-size: cover;background-position: 50% 50%;
background-origin: border-box;background-repeat: no-repeat;}
#main4T .contentSlide:hover .galleryT{opacity:1;transition:0.3s all ease;}
#main4T .galleryT{position: absolute;height: 100%;width: 100%;opacity:0;
background: rgba(0,0,0,.3);z-index: 3;top: 0;left: 0;}
#main4T .galleryT h2{font-size: 20px;margin: 0;color: #fff;position: absolute;
top: 45%;text-align: center;left: 0%;width: 100%;border: none;display: block;transform: translate(0,-50%);}
#main4T .galleryT h5{font-size: 20px;color: #fff;margin: 0;position: absolute;
top: 57%;text-align: center;left: 0%;width: 100%;border: none;display: block;transform: translate(0,-50%);}

.newfamilyBTNM{margin: 15px 0 0;}
.newfamilyBTNM .newfamilyBTN{display:inline-block;float:right;}
.newfamilyBTNM .newfamilyBTN .newfamilyPTN{padding: 10px 40px;display: inline-block;margin: 20px 0;background-position:center;background-repeat:no-repeat;float:left;}
.newfamilyBTNM .newfamilyBTN .newfamilyNTN{padding: 10px 40px;display: inline-block;margin: 20px 0;background-position:center;background-repeat:no-repeat;float:left;border-left:.5px solid #c2c2c2;}



@media(min-width:1670px) {
    #main-4 .container {
        width: 1670px;
    }
}

@media(min-width:1500px) {
    .container {
        width: 1500px;
    }
}

@media (max-width:1699px) {
}
@media (max-width:1499px) {
    #main-4 {padding: 50px 0;}
    #main-3 {padding: 50px 0;}
    #main-4 .main4T { padding: 50px 50px 0 0;}
    #main-1 .main1BT{width:50%;}
    #main-2 .main2R{width:50%;}
    #main-2 .main2L{padding:25px 0;position:relative;}
    #main-3 .main3M h5{word-break:keep-all;}
    #main-4 .main4L .main4LM .newsM{gap:30px;}
    #main-4 .main4R {padding: 50px 50px 0 0;}
    #main-2 .main2R .smplay{width: 100px;height: 100px;}
}
@media (max-width:1199px) {
    #main-4 .main4L .main4LM .newsM {padding: 70px 0 0;}
    #main-3 .main3M {margin-top: 25px;}
    #main-3 {padding: 25px 0;}
    #main-4 {padding: 25px 0;}
    #main-4 .main4R .main4RT h1 {font-size: 35px;}
    #main-4 .main4T .main4TT h1{font-size: 35px;}
    #main-4 .main4L .main4LT h1 {font-size: 35px;}
    #main-2{height:inherit;}
    #main-2 .main2L h1{font-size:30px;}
    #main-3 .main3T {padding: 40px 0 20px;}
    #main-3 .main3M h1{font-size:24px;}
    #main-3 .main3M h5{font-size:20px;}
    #main-4 .main4R .main4RM {padding: 50px 0 0;}
    #main-4 .main4R {padding: 45px 0px 0 0;}
    #main-4 .main4T .main4TM {padding: 50px 0 0;}
    #main-4 .main4T {padding: 45px 0px 0 0;}
    #main-4 .main4L .main4LM .newsM{flex-direction: column;}
    #main-4 .main4L .main4LM .newsM .newsR .contentSlideWrapper {height: 80px;}
}

@media (max-width:992px) {
    #main-4 .main4L .main4LM .newsM {padding: 50px 0 0;}
    #main-2 .main2L h3 {font-size: 20px;}
    .galleryBTNM .galleryBTN .galleryPTN {margin: 5px 0;}
    .galleryBTNM .galleryBTN .galleryNTN {margin: 5px 0;}
    #main-4 .main4T {padding: 0px;}
    #main-4 .main4R {padding: 0px;}
    .newsBTNM .newsBTN .newsPTN {margin: 5px 0;}
    .newsBTNM .newsBTN .newsNTN {margin: 5px 0;}
    #main-4 .main4L .main4LM .newsM .newsR {margin-bottom: 0px;}
    #main-2 {padding: 25px 0;}
    #main-3 .main3M {margin-top: 25px;}
    .flexBox{flex-wrap: nowrap;}
    #main-1 .main1BT{width:70%;}
    #main-1 .main1T .main1hf .circle{padding:55px;}
    #main-2 a{display: inline-flex;flex-direction: column;width: 100%;align-items: center;}
    #main-2 .main2R{width: 100%;margin:0;}
    #main-2 .main2B {flex-direction: column;}
    #main-2 .main2L{width: 100%;}
    #main-3 .main3M{grid-template-columns:1fr;height:inherit;}
    #main-3 .main3M .main3L .main3LT, 
    #main-3 .main3M .main3L .main3LB,
    #main-3 .main3M .main3C .main3CL, 
    #main-3 .main3M .main3C .main3CR,
    #main-3 .main3M .main3R .main3RT, 
    #main-3 .main3M .main3R .main3RB{height:inherit;padding: 15px 0;}
    #main-4 .main4L{width:100%;}
    #main-4 .main4R{position:relative;width:100%; right: 0%;}
    #main-4 .main4T{position:relative;width:100%;}
}

@media (max-width:767px) {
    #main-4 .main4L .main4LM .newsM {padding: 20px 0 0;}
    #main-3 .main3CT h1 {font-size: 24px;}
    .row{margin:0!important;}
    #main-slider {padding: 90px 0 0;}
    #main-1 {padding: 20px 0 0;}
    #main-1 .main1T{padding: 0 0 10px;}
    #main-1 .main1T .main1hf{width:50%;padding-bottom: 10px;}
    #main-1 .main1T .main1hf h5{font-size:17px;}
    #main-1 .main1T .main1hf .circle{padding:40px;margin-bottom: 15px;}
    #main-1 .main1T .main1hf .circle img{width:60px;}
    #main-1 .main1BT .onlineBT .onlineT {padding: 0 15px;}
    #main-1 .main1BT .onlineBT .onlineT h1{font-size:17px;}
    #main-1 .main1BT .onlineBT .onlineT .onplay{margin:15px;}
    #main-2 .main2R{width:100%;}
    #main-2 .main2R .smplay{width:50px;height:50px;}
    #main-2 .main2L h2{font-size: 17px;margin-bottom: 15px;}
    #main-2 .main2L h1{font-size:20px;}
    #main-2 .main2L h3 {font-size: 17px;margin-bottom: 20px;}
    #main-2 .main2L h5 {font-size: 15px;}
    #main-3 .main3T h1{font-size:24px;}
    #main-3 .main3T h2{font-size:20px;}
    #main-3 .main3M h1{font-size:20px;}
    #main-3 .main3M h5{font-size:17px;}
    #main-4 .main4L{padding: 0px 0 0;}
    #main-4 .main4L .main4LT {padding: 0 0 20px;}
    #main-4 .main4L .main4LT h1{font-size:24px;}
    #main-4 .main4L .main4LM .newsM{gap:15px;}
    #main-4 .main4L .main4LM .newsM .newsL h1{font-size:20px;}
    #main-4 .main4L .main4LM .newsM .newsL hr{margin:10px 0;}
    #main-4 .main4R .main4RT h1{font-size:24px;}
    #main-4 .main4T .main4TT h1{font-size:24px;}
    #main-4 .main4R .main4RM {padding: 20px 0 0;}
    #main-4 .main4T .main4TM {padding: 20px 0 0;}
}

@media (max-width:320px) {
}
