@charset "utf-8";


/* [S] NOTICE */
.notice-wrap{background: url(../images/bg-notice.jpg) no-repeat center center / cover; padding: 16rem 0 0;}
.notice-wrap .frame{max-width: 174rem; margin: 0 auto; padding: 0 2rem; position: relative;}
.notice-wrap .notice-header{display: flex; flex-wrap: wrap; justify-content: space-between; align-items: start;}
.notice-wrap .notice-header > .notice-more{display: none;}
.notice-wrap .notice-title h1{font-size: 5rem; color: #ffffff; font-family: "sm"; line-height: 1;}
.notice-wrap .notice-title p{font-size: 1.8rem; color: white; font-family: "sl"; margin-top: .8rem;}
.notice-wrap .notice-category{display: flex; flex-wrap: wrap; align-items: center;}
.notice-wrap .notice-category .notice-mobile-categoery{display: none;}
.notice-wrap .notice-category ul{display: flex; flex-wrap: wrap; align-items: center;}
.notice-wrap .notice-category li a{font-size: 2rem; color: #aabac0; font-family: "sl"; display: block; border-radius: 2rem; padding: .8rem 2.1rem .4rem; position: relative;}
.notice-wrap .notice-category li a:hover{color: #00abe6;}
.notice-wrap .notice-category li a::after{content:""; display: block; position: absolute; right: 0; top: 50%; margin-top: -.15rem; width: .3rem; height: .3rem; background-color: #aabac0;}
.notice-wrap .notice-category li a.active{color: white; background-color: #00abe6;}
.notice-wrap .notice-category li a.prev::after,
.notice-wrap .notice-category li a.active::after,
.notice-wrap .notice-category li:last-child a::after{display: none;}
.notice-wrap .notice-category .notice-more{display: block; text-indent: -9999rem; width: 2.8rem; height: 2.8rem; border: .1rem solid white; background: transparent; margin-left: 3rem; position: relative;}
.notice-wrap .notice-category .notice-more::after{content:""; display: block; position: absolute; left: 50%; top: 50%; margin: -.75rem 0 0 -.75rem; width: 1.5rem; height: 1.5rem; background: url(../images/ic-notice-more.png) no-repeat center center / cover; transition: all .5s;}
.notice-wrap .notice-category .notice-more:hover::after{transform: rotate(180deg);}
.notice-wrap .notice-content{margin-top: 5.6rem;}
.notice-wrap .notice-content ul{display:none; flex-wrap: wrap; margin: -3rem -1.65rem 0; justify-content: stretch;}
.notice-wrap .notice-content ul.active{display: flex;}
.notice-wrap .notice-content li{width: 25%; padding: 0 1.65rem; margin-top: 3rem;}
.notice-wrap .notice-content li a{display: block;}
.notice-wrap .notice-content li .notice-box{background-color: rgba(255,255,255,.8); border-radius: 2rem; overflow: hidden; padding: 2.6rem 3rem 3.2rem; transition: all .5s; position: relative;}
.notice-wrap .notice-content li .notice-box-categery{font-size: 1.4rem; color: #666666; font-family: "sl";}
.notice-wrap .notice-content li .notice-box-title{font-size: 2rem; line-height: 3rem; color: #000000; font-family: "sm"; margin: 1rem 0 1.7rem; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 6rem;}
.notice-wrap .notice-content li .notice-box-title span{background :linear-gradient(to bottom, transparent 94%, rgba(0,0,0,1) 0) left center no-repeat; background-size: 0; transition: background-size .5s;}
.notice-wrap .notice-content li .notice-box-content{font-size: 1.8rem; line-height: 2.8rem; color: #707070; letter-spacing: -.025em; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 5.6rem}
/* .notice-wrap .notice-content li .notice-box-content span{background :linear-gradient(to bottom, transparent 94%, rgba(112,112,112,1) 0) left center no-repeat; background-size: 0; transition: background-size .5s;} */
.notice-wrap .notice-content li .notice-box:hover .notice-box-title span{background-size: 100% auto;}
.notice-wrap .notice-content li .notice-box:hover .notice-box-content span{background-size: 100% auto;}
.notice-wrap .notice-content li .notice-box-date{margin-top: 3.2rem; display: flex; flex-wrap: wrap;}
.notice-wrap .notice-content li .notice-box-date p{color: #333333; font-size: 1.4rem; font-family: "suiteM"}
.notice-wrap .notice-content li .notice-box-date .notice-new{text-indent: -9999rem; display: inline-block; width: 4.3rem; height: 1.7rem; background: url(../images/ic-notice-new.png) no-repeat center center / cover; position: relative; top: -.1rem; margin-left: 1rem;}
.notice-wrap .notice-content li a:hover .notice-box{background-color: rgba(255,255,255,1);}
.notice-wrap .notice-content li a:hover .notice-box::after{content:""; display: block; position: absolute; right: 0; bottom: 0; width: 6.8rem; height: 6.8rem; background: url(../images/ic-notice-more2.png) no-repeat center center / cover;}

.disable .notice-wrap{padding: 16rem 0 8rem;}

@media screen and (max-width: 1550px) {
    .notice-wrap .notice-header{flex-direction: column;}
    .notice-wrap .notice-category{margin-top: 2rem;}
}

@media screen and (max-width: 1200px) {
    .disable .notice-wrap,
    .notice-wrap{padding: 10rem 0 6rem;}
    .notice-wrap .notice-title h1{font-size: 4rem;}
    .notice-wrap .notice-title p{font-size: 1.6rem;}
    .notice-wrap .notice-category li a{font-size: 1.6rem; padding: .6rem 1.5rem .4rem;}
    .notice-wrap .notice-category .notice-more{margin-left: 2rem;}
    .notice-wrap .notice-content ul{margin: -2rem -1rem 0;}
    .notice-wrap .notice-content li{padding: 0 1rem; margin-top: 2rem;}
    .notice-wrap .notice-content li .notice-box-title{font-size: 1.8rem; line-height: 2.6rem; min-height: 5.2rem;}
    .notice-wrap .notice-content li .notice-box-content{font-size: 1.6rem; line-height: 2.4rem; min-height: 4.8rem;}
}

@media screen and (max-width: 768px) {
    .disable .notice-wrap,
    .notice-wrap{padding: 6rem 0;}
    .notice-wrap .notice-header{position: relative;}
    .notice-wrap .notice-header > .notice-more{display: block; position: absolute; right: 0; top: 0; width: 2.5rem; height: 2.5rem; border: .1rem solid white; text-indent: -9999rem;}
    .notice-wrap .notice-header > .notice-more::after{content:""; display: block; position: absolute; left: 50%; top: 50%; margin: -.75rem 0 0 -.75rem; width: 1.5rem; height: 1.5rem; background: url(../images/ic-notice-more.png) no-repeat center center / cover; transition: all .5s;}
    .notice-wrap .notice-header > .notice-more:hover::after{transform: rotate(180deg);}
    .notice-wrap .notice-title h1{font-size: 3rem;}
    .notice-wrap .notice-title p{font-size: 1.4rem;}
    .notice-wrap .notice-category{margin-top: 2.7rem; position: relative; width: 100%; z-index: 2;}
    .notice-wrap .notice-category .notice-mobile-categoery{display: block; width: 100%; background-color: #00abe6; text-align: left; border-radius: 1rem; font-family: "sl"; font-size: 1.8rem; color: white; padding: 1.6rem 2rem 1.3rem; position: relative;}
    .notice-wrap .notice-category .notice-mobile-categoery::after{content:""; display: block; position: absolute; right: 2rem; top: 50%; margin-top: -.6rem; width: 1.5rem; height: 1.2rem; background: url(../images/ic-notice-arrow.png) no-repeat center center / cover; transition: all .5s; transform: rotate(0deg);}
    .notice-wrap .notice-category .notice-mobile-categoery.active::after{transform: rotate(180deg);}
    .notice-wrap .notice-category .notice-category-list-box{height: 0; overflow: hidden; position: absolute; left: 0; top: calc(100% - .1rem); width: 100%; z-index: 2; transition: all .5s; border-radius: 1rem; border-top-left-radius: 0; border-top-right-radius: 0;}
    .notice-wrap .notice-category .notice-category-list-box.active{height: 20rem;}
    .notice-wrap .notice-category .notice-category-list-box .mCSB_scrollTools{right: 1rem; height: calc(100% - 4rem); top: 2rem;}
    .notice-wrap .notice-category ul{width: 100%; background-color: white; display: block;}
    .notice-wrap .notice-category li{width: 100%;}
    .notice-wrap .notice-category li a{border-radius: 0; padding: 1.2rem 2rem .8rem;}
    .notice-wrap .notice-category li a::after{display: none;}
    .notice-wrap .notice-category .notice-more{display: none;}
    .notice-wrap .notice-content{margin-top: 3.8rem;}
    .notice-wrap .notice-content li{width: 100%; display: none;}
    .notice-wrap .notice-content li:nth-child(-n+4){display: block;}
    .notice-wrap .notice-content li .notice-box{padding: 2rem 2rem 1.5rem;}
    .notice-wrap .notice-content li .notice-box-categery{font-size: 1.2rem;}
    .notice-wrap .notice-content li .notice-box-title{-webkit-line-clamp: 1; font-size: 1.8rem; line-height: 2.6rem; min-height: 2.6rem; margin: .2rem 0;}
    .notice-wrap .notice-content li .notice-box-content{display: none;}
    .notice-wrap .notice-content li .notice-box-date{margin-top: 1.5rem;}
    .notice-wrap .notice-content li a:hover .notice-box::after{width: 4.8rem; height: 4.8rem;}
}
/* [E] NOTICE */