﻿@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;
    }
}

@keyframes blink {
  0% { opacity: 1; }
  50% { opacity: 0; }
  100% { opacity: 1; }
}

/* common */
a{text-decoration:none!important;color:inherit;}
#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;}


#main1{padding: 3vw 0 0;}
#main1 .main1M{display: grid;grid-template-columns: 1fr 1fr 1fr;gap: 1.3vw;}
/*
#main1 .main1M .main1BT {display: flex;justify-content: center;align-items: center;flex-direction: column;gap: 1.8vw;padding: 5vw 0 3.7vw;background-repeat:no-repeat;background-position:center;background-size:cover;color:#fff;border-radius: 15px;}
#main1 .main1M .main1BT h2{margin: 0;font-size: 1.3rem;}
*/
#main1 .main1M .main1BT {background-repeat: no-repeat;background-position: center;background-size: cover;color: #fff;border-radius: 15px;aspect-ratio: 4 / 3;}
#main1 .main1M .main1BT h2{margin: 0;font-size: 1.8rem;letter-spacing: 3px;position: absolute;top: 50%;text-align: center;width: 100%;transform: translate(0, -50%);}
#main1 .main1M .main1BT .main1BG{position: absolute;width:100%;height:100%;top:0;right:0;background-repeat: no-repeat;background-position: center;background-size: cover;z-index: -1;border-radius: 15px;}
#main1 .main1M .main1BT h1{margin: 0;font-size: 1.9rem;width:90%;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;overflow: hidden;}
#main1 .main1M .main1BT .main1PT{text-align:center;}
#main1 .main1M .main1BT .main1PT h5{margin: 0;font-size: .9rem;line-height:1.5;display: flex;justify-content: center;align-items: center;gap: .5vw;color:rgba(255,255,255,.75);}
#main1 .main1M .main1BT .main1PT h5 span{font-size:1rem;line-height:1.5;}
#main1 .main1M .main1BT .more{display: flex;align-items: center;gap: .3vw;}
#main1 .main1M .main1BT .more h6{margin:0;font-size:1rem;}

#main2{padding: 2.5vw 0;}
#main2 .main2M{display: grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr;gap:2vw;}
#main2 .main2M .main2BT{display: inline-block;padding: 4.5vw;position:relative;}
#main2 .main2M .main2BT:before{content:'';position: absolute;transform: translate(-50%, -50%);top: 50%;left: 50%;padding: 4.3vw;border-radius: 50%;background-color: #1a2a53;opacity: 0;transition:0.3s all ease;}
#main2 .main2M .main2BT:hover:before{opacity:1;transition:0.3s all ease;}
#main2 .main2M .main2BT .circle{padding: 1.75vw;position: absolute;transform: translate(-50%, -50%);left: 50%;top: 35%;border-radius: 50%;}
#main2 .main2M .main2BT .circle .on,
#main2 .main2M .main2BT .circle .off{position:absolute;width:100%;height:100%;top:0;left:0;transition:0.3s all ease;background-repeat:no-repeat;background-position:center;background-size:contain;}
#main2 .main2M .main2BT .circle .on{opacity:0;}
#main2 .main2M .main2BT .circle .off{opacity:1;}
#main2 .main2M .main2BT:hover .circle .on{opacity:1;}
#main2 .main2M .main2BT:hover .circle .off{opacity:0;}
#main2 .main2M .main2BT h1{margin:0;font-size:1rem;width:100%;position:absolute;transform: translate(-50%, -50%);left: 50%;top: 70%;text-align:center;color:#000;transition:0.3s all ease;}
#main2 .main2M .main2BT:hover h1{color:#fff;font-family: 'notosans-bold';}

#main3{}
#main3 .main3M{display: grid;grid-template-columns: 0.44fr 1px 0.56fr;padding:2.2vw 4.4vw;}
#main3 .main3M .main3L{}
#main3 .main3M .main3L .calendarM{cursor:pointer;}
#main3 .main3M .main3L .calendarM .calendarD{display: grid;grid-template-columns: 1fr;gap: 1.7vw;}
#main3 .main3M .main3L .calendarM .calendarD h1{margin: 0;font-size: 4.4vw;}
#main3 .main3M .main3L .calendarM .calendarD h2{margin: 0;font-size: 1.3rem;}
#main3 .main3M .main3L .calendarM h3{margin:0 0 3vw;font-size:1.6rem;font-weight:bold;}
#main3 .main3M .main3L .more{display: flex;align-items: center;gap: .3vw;}
#main3 .main3M .main3L .more h6{margin:0;font-size:1rem;}
#main3 .main3M .main3C{background-color:#000;}
#main3 .main3M .main3R{}
#main3 .main3M .main3R .documents{}
#main3 .main3M .main3R .documents .tab-content{}
#main3 .main3M .main3R .documents .tab-content .calendar{}
#main3 .main3M .main3R .documents .tab-content .calendar .monthM{display: grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;align-items: end;justify-items: center;padding: 0 0 1.5vw;}
#main3 .main3M .main3R .documents .tab-content .calendar .monthM h1{margin: 0;font-size: 2.5rem;font-weight: bold;}
#main3 .main3M .main3R .documents .tab-content .calendar .monthM h2{margin: 0;font-size: 1.6rem;grid-column: span 2;}
#main3 .main3M .main3R .documents .tab-content .calendar .head{display: grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}
#main3 .main3M .main3R .documents .tab-content .calendar .head .each{font-size:1.15rem;font-weight:bold;}
#main3 .main3M .main3R .documents .tab-content .calendar .body{display: grid;grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;}
#main3 .main3M .main3R .documents .tab-content .calendar .body .each{font-size:1.15rem;padding: .3vw;}
#main3 .main3M .main3R .documents .tab-content .calendar .body .each .day{transition:0.3s all ease;}
#main3 .main3M .main3R .documents .tab-content .calendar .body .each .day h1{margin:0; font-size:1.15rem;}
#main3 .main3M .main3R .documents .tab-content .calendar .body .each .day:before{content: '';position: absolute;transform: translate(-50%, -50%);left: 50%;top: 50%;background-color: rgba(0, 0, 0, .6);border-radius: 50%;padding: 1vw;opacity:0;transition:0.3s all ease;z-index:1;}
#main3 .main3M .main3R .documents .tab-content .calendar .body .selected .day h1{color:#fff;position:relative;z-index:1;}
#main3 .main3M .main3R .documents .tab-content .calendar .body .selected .day:before{opacity:1;}
#main3 .main3M .main3R .documents .tab-content .calendar .bottom{display:none;}

#main4{padding: 4vw 0 4.5vw;}
#main4 .main4M{display: grid;grid-template-columns: 1fr 1fr;gap:3.9vw;}
#main4 .main4M .main4T{}
#main4 .main4M .main4T > h1{margin:0;font-size: 1.3rem;}
#main4 .main4M .main4T{display: flex;justify-content: space-between;align-items: center;}
#main4 .main4M .main4T .main4BT{display: flex; align-items: center; gap: 8px; }
#main4 .main4M .main4T .main4BT h1{margin:0;font-size:1rem;}
#main4 .main4M .main4T .main4BT .dots {display: grid;grid-template-columns: 1fr 1fr;gap: .3vw;}
#main4 .main4M .main4T .main4BT .dot { width: 6px; height: 6px; border-radius: 50%; background-color: black; opacity: 1; animation: blink 1s infinite; }
#main4 .main4M .main4T .main4BT .dot:nth-child(1) { animation-delay: 0s; }
#main4 .main4M .main4T .main4BT .dot:nth-child(2) { animation-delay: 0.4s; }
#main4 .main4M .main4T .main4BT .dot:nth-child(3) { animation-delay: 0.8s; }
#main4 .main4M .main4T .main4BT .dot:nth-child(4) { animation-delay: 1.2s; }
#main4 .main4M .main4L{}
#main4 .main4M .main4L .juboM{}
#main4 .main4M .main4L .juboM .juboSD{overflow: hidden; height: 26vw;}
#main4 .main4M .main4R{}
#main4 .main4M .main4R .memberM{}
#main4 .main4M .main4R .memberM .memberSD{overflow: hidden; height: 26vw;}
#main4 .main4M .contentSlideWrapper{}
#main4 .main4M .contentSlideWrapper .contentSlide{border-bottom: 1px solid rgba(0, 0, 0, .2);}
#main4 .main4M .contentSlideWrapper .swiper-slide-prev{border:none;}
#main4 .main4M .contentSlideWrapper .contentSlide li{height: 100%;display: flex;align-items: center;justify-content: space-between;}
#main4 .main4M .contentSlideWrapper .contentSlide li h1{margin: 0;font-size: 1.3rem;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;white-space: normal;overflow: hidden;width: 95%;transition:0.3s all ease;}
#main4 .main4M .contentSlideWrapper .contentSlide:hover li h1{font-family: 'notosans-bold';}
#main4 .main4M .contentSlideWrapper .contentSlide li h5{margin:0;font-size: 1rem;}
#main4 .main4M .contentSlideWrapper .contentSlide:hover li h5{font-family: 'notosans-bold';}

#main5{padding: 0 0 7vw;}
#main5 .main5M{}
#main5 .main5M .GallerySD{overflow:hidden;}
#main5 .main5M .GallerySD .contentSlideWrapper{}
#main5 .main5M .GallerySD .contentSlideWrapper .contentSlide{border-radius:30px;overflow: hidden;}
#main5 .main5M .GallerySD .contentSlideWrapper .contentSlide a{position:relative;}
#main5 .main5M .GallerySD .contentSlideWrapper .contentSlide a .galleryIMG{aspect-ratio:1/1;background-repeat: no-repeat;background-position: center;background-size: cover;}
#main5 .main5M .GallerySD .contentSlideWrapper .contentSlide a .galleryIMG .galleryT{position: absolute;width: 100%;padding: 1vw;bottom: 0;color: #fff;background: rgba(0, 0, 0, 0.5);backdrop-filter: blur(12px);opacity:0;}
#main5 .main5M .GallerySD .contentSlideWrapper .contentSlide:hover a .galleryIMG .galleryT{opacity:1;transition:0.3s all ease;}
#main5 .main5M .GallerySD .contentSlideWrapper .contentSlide a .galleryIMG .galleryT h2{margin:0;font-size:1.2rem;word-wrap: break-word;display: -webkit-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;white-space: normal;overflow: hidden;}
#main5 .main5M .GallerySD .contentSlideWrapper .contentSlide a .galleryIMG .galleryT h5{margin:0;font-size:1rem;line-height:2;}

@media(min-width:1670px) {
}

@media(min-width:1375px) {
    .container {
        width: 1375px;
    }
}

@media (max-width:1699px) {
}
@media (max-width:1499px) {
    #main4 .main4M .contentSlideWrapper .contentSlide li h1{font-size:1rem;}
}
@media (max-width:1199px) {
    #main2 .main2M .main2BT{padding: 6.5vw;}
    #main2 .main2M .main2BT:before{padding: 6.5vw;}
    #main2 .main2M .main2BT .circle{padding:2.8vw;}
}

@media (max-width:992px) {
    #main2 .main2M .main2BT{padding: 7.5vw;}
    #main2 .main2M .main2BT:before{padding: 7.5vw;}
    #main2 .main2M{grid-template-columns: 1fr 1fr 1fr 1fr;}
    #main3 .main3M .main3R .documents .tab-content .calendar .monthM h2{grid-column: span 3;}
}

@media (max-width:767px) {
    .row{margin:0!important;}
    #main1 .main1M{grid-template-columns: 1fr 1fr;}
    #main1 .main1M .main1BT:first-child{grid-column: span 2;aspect-ratio: 8 / 3;}
    #main1 .main1M .main1BT h2{font-size:1.5rem;}
    #main2 .main2M{grid-template-columns: 1fr 1fr;}
    #main2 .main2M .main2BT{padding: 15vw;}
    #main2 .main2M .main2BT:before{padding: 15vw;}
    #main2 .main2M .main2BT .circle{padding:6vw;}
    #main3 .main3M{grid-template-columns: 1fr;}
    #main3 .main3M .main3L .calendarM .calendarD h1{font-size:2rem;}
    #main3 .main3M .main3R .documents .tab-content .calendar .body .each .day:before{padding:3vw;}
}

@media (max-width:320px) {
}
