﻿@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 */
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; display: none;}
.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:1px solid #7d889d;border-radius:50%;margin-bottom:40px;}
#main-1 .main1T .main1hf .circle img{position:absolute;top: 50%;transform: translate(-50%, -50%);}
#main-1 .main1T .main1hf h5{font-size: 19.5px;font-weight: bold;margin: 0;line-height: 1.5;color:#2f2f2f;}
#main-1 .main1T .main1hf h5:nth-child(3){color:#3d5378;}
.slider .slider-dots {display: none;}
#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;padding:80px;}
#main-1 .main1BT .onlineBT .onlineBOX h1{margin: 0;position: absolute;top: 0%;text-align: center;width: 100%;font-size:30px;
height: 100%;display: inline-flex;transform: translate(-50%,0);justify-content: center;align-items: center;background-color: #B0082D;color: #fff;}

#main-2{height:440px;background-color:#192F58;position:relative;}
#main-2 .main2L{width: 50%;float: right;display: inline-block;padding: 90px 110px;color:#fff;position:absolute;right:0;top: 0;}
#main-2 .main2L h2{margin: 0; font-size: 24px;margin-bottom:25px;color:#fff;}
#main-2 .main2L h1{margin: 0;font-size: 30px;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:15px;}
#main-2 .main2L h3{margin: 0;font-size: 18px;margin-bottom:35px;}
#main-2 .main2L h5{margin: 0;font-size: 18px;}
#main-2 .main2R{position:relative;margin-top: -130px;display:inline-block;}
#main-2 .main2R .smplay{position: absolute;right: 0;bottom: 0;transform: translate(0,50%);padding: 80px;background-color: #dae6ee;}
#main-2 .main2R .smplay .on{position: absolute;background-size: auto;height: 100%;width: 100%;background-position: center;background-repeat: no-repeat;opacity:0;transition:0.3s all ease;right: 0;top: 0;}
#main-2 .main2R .smplay .off{position: absolute;background-size: auto;height: 100%;width: 100%;background-position: center;background-repeat: no-repeat;opacity:1;transition:0.3s all ease;right: 0;top: 0;}
#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 .main3T{padding: 100px 0 30px;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:#142e5a;}
#main-3 .main3T h2{margin: 0;font-size: 34px;display:inline-block;color:#6d88b4;}
#main-3 .main3M{height:480px;display: grid;grid-template-columns: 34fr 40fr 26fr;width:100%;margin: 0 0 120px; }
#main-3 .main3M .main3L{display: inline-flex;flex-direction: column;}
#main-3 .main3M .main3L .main3LT,
#main-3 .main3M .main3L .main3LB{height:50%;box-shadow: 0px 4px 6px #D7D7D7;}
#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: 0px 4px 6px #D7D7D7;}
#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: 0px 4px 6px #D7D7D7;}
#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;color:#293d51;}
#main-3 .main3M h5{margin: 0;font-size: 18px;line-height: 1.5;color: rgba(41, 61, 81, .8);}
#main-3 .main3M .main3CL h1,
#main-3 .main3M .main3RT h1{color: #fff;}
#main-3 .main3M .main3CL h5,
#main-3 .main3M .main3RT h5{color: rgba(255, 255, 255, .8);}
#main-4{position:relative;}
#main-4 .main4L{padding: 85px 0 0;width: 45%;display:inline-block;}
#main-4 .main4L .main4LT{padding: 0 0 100px;display:inline-block;text-decoration:none;color:#000;}
#main-4 .main4L .main4LT h1{margin: 0;font-size: 58px;font-weight: bold;letter-spacing: 1px;}
#main-4 .main4L .main4LM{overflow:hidden;}
#main-4 .main4L .main4LM .newsM{display:inline-flex;width:100%;gap:70px;}
#main-4 .main4L .main4LM .newsM .newsL{}
#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:#000;}
#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;}
.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;border-right:.5px solid #000;}
.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 #000;}

#main-4 .main4R{padding: 85px 125px 0 0;display:inline-block;position: absolute;top: 0;right: 0;width: 55%; overflow:hidden;}
#main-4 .main4R .main4RT h1{margin: 0;font-size: 63px;font-weight: bold;letter-spacing: 1px;text-decoration:none;color:#000;}
#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: 57%;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;border-right:.5px solid #000;}
.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 #000;}

@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-1 .main1BT{width:50%;}
    #main-2{height:400px;}
    #main-2 .main2R{width:50%;}
    #main-2 .main2L{padding:50px;position:relative;}
    #main-3 .main3M h5{word-break:keep-all;}
    #main-4 .main4L .main4LM .newsM{gap:30px;}
    #main-4 .main4R {padding: 85px 85px 0 0;}
}
@media (max-width:1199px) {
    #main-2{height:inherit;}
    #main-2 .main2L h1{font-size:40px;}
    #main-3 .main3T {padding: 40px 0 20px;}
    #main-3 .main3M{margin: 0 0 80px;}
    #main-3 .main3M h1{font-size:24px;}
    #main-3 .main3M h5{font-size:20px;}
    #main-4 .main4L {padding: 45px 0 0;}
    #main-4 .main4L .main4LT {padding: 0 0 50px;}
    #main-4 .main4L .main4LM .newsM .newsL hr{display:none;}
    #main-4 .main4R .main4RM {padding: 50px 0 0;}
    #main-4 .main4R {padding: 45px 45px 0 0;}
    #main-4 .main4L .main4LM .newsM{flex-direction: column;}
    #main-4 .main4L .main4LM .newsM .newsR .contentSlideWrapper {height: 80px;}
}

@media (max-width:992px) {
    .flexBox{flex-wrap: nowrap;}
    #main-1 .main1BT{width:80%;}
    #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: 75%;margin:0;}
    #main-2 .main2R .smplay{padding:60px;}
    #main-2 .main2R .smplay .on,
    #main-2 .main2R .smplay .off{background-size:auto;}
    #main-2 .main2L{width: 100%;}
    #main-3 .main3T {width: 100%;justify-content: center;}
    #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%;}
}

@media (max-width:767px) {
    .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:nth-child(1),
    #main-1 .main1T .main1hf:nth-child(2),
    #main-1 .main1T .main1hf:nth-child(3){width:33%;}
    #main-1 .main1T .main1hf h5{font-size:13px;}
    #main-1 .main1T .main1hf .circle{padding:40px;margin-bottom: 11px;}
    #main-1 .main1T .main1hf .circle img{width:60px;}
    #main-1 .main1BT{width:100%;}
    #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-1 .main1BT .onlineBT .onlineBOX{padding:40px;}
    #main-1 .main1BT .onlineBT .onlineBOX h1{font-size:17px;}
    #main-2 .main2R{width:100%;}
    #main-2 .main2R .smplay{padding:35px;}
    #main-2 .main2R .smplay .on, 
    #main-2 .main2R .smplay .off {background-size: 45%;}
    #main-2 .main2L{padding:15px;}
    #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: 20px 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 .main4L .main4LM .newsM .newsR{margin:0;}
    #main-4 .main4L .main4LM .newsM .newsR .contentSlideWrapper {height: 60px;}
    #main-4 .main4R{padding:15px;}
    #main-4 .main4R .main4RT h1{font-size:24px;}
    #main-4 .main4R .main4RM {padding: 20px 0 0;}
}

@media (max-width:320px) {
}
