/*****************************************************
common
*****************************************************/
@keyframes rotateAni {
    0%{transform: rotate(0);}
    100%{transform: rotate(360deg);}
}

.no-data{padding:32px 60px;}
a{color: inherit;}
a:hover, a:focus{color: inherit;}

/* main-wrap */
.main-wrap{background: url(/common/images/hmpg/main-bg.png) no-repeat top center/cover;padding-top: 20px}
@media(min-width: 992px){
}
@media(min-width: 1400px){
}
@media(min-width: 1800px){
}

/* control */
.control{display: flex;column-gap: 16px;align-items: center;}
.control button{padding: 0;text-transform: uppercase;border: 0;background-color: transparent;font-size: 14px;}
.control .play-btn{background: var(--point-color01) no-repeat center;background-size: 8px;border-radius: var(--circle);width: 32px;height: 32px;transition: .3s;border:1px solid var(--point-color01);}
.control .play-btn.stop{background-image: url(/common/images/hmpg/stop-icon.svg);}
.control .play-btn.play{background-image: url(/common/images/hmpg/play-icon.svg);}
.control .line{width: 1px;height: 16px;background-color: #2D2F33;opacity: .4;}
.control .prev-btn::before, 
.control .next-btn::after{display: inline-block; content: '';width: 16px;height: 16px;background: no-repeat left center/contain;vertical-align: text-top;}
.control .prev-btn::before{margin-right: 12px;background-image: url(/common/images/hmpg/prev-icon.svg);}
.control .next-btn::after{background-image: url(/common/images/hmpg/next-icon.svg);margin-left: 12px;}
@media(min-width: 992px){
    .control button{font-size: 20px;}
    .control .play-btn{width: 50px;height: 50px;background-size: 10px 14px;}
    .control .play-btn:hover, .control .play-btn:focus{background-color: var(--point-color02);border-color: var(--point-color02);}
    .control .line{height: 24px;}
    .control .prev-btn::before, 
    .control .next-btn::after{vertical-align: baseline;}
    .control .prev-btn:hover:before, 
    .control .prev-btn:focus:before, 
    .control .next-btn:hover:after, 
    .control .next-btn:focus:after{transform: rotateX(360deg);transition: 1s;}
}

/* tit */
.main-tit{font-family: var(--font-type02);position: relative;font-size: 30px;display: inline-block;margin-bottom: 0;}
.main-tit .deco{display: block;width: 24px;height: 24px;border-radius: var(--circle);position: absolute;left: 0;top: 0;overflow: hidden;box-shadow: 0 4px 8px rgba(72, 103, 225, .3);z-index: 1;top: -18px;left: -14px;}
.main-tit .deco::before{content: '';display: inline-block;background: linear-gradient(130deg, var(--main-color01), var(--point-color02));width: 100%;height: 100%;position: absolute;left: 0;top: 0;z-index: -1;opacity: .9;}
.main-tit .deco::after{display: block;content: '';background: url(/common/images/hmpg/emblem.svg) no-repeat center;width: 100%;height: 100%;background-size: 12px;}
@media(min-width: 992px){
    .main-tit{font-size: 42px;}
    .main-tit .deco{width: 36px;height: 36px;left: -20px; top: -20px;}
    .main-tit .deco::after{background-size: 16px;}
}
@media(min-width: 1800px){
    .main-tit{font-size: 56px;}
    .main-tit .deco{width: 42px;height: 42px;left: -30px;top: -26px;}
    .main-tit .deco::after{background-size: 20px;}
}

/* more-btn */
.more-btn {display: flex;align-items: center;column-gap: 12px;margin: 0 12px;}
.more-btn .line{width: 20px;height: 1px;background: #767676;display: inline-block;}
.more-btn .btn{width:28px;height: 28px;line-height: 28px;display: inline-block;text-align: center;transition: transform .3s, color .3s;color: #555;padding: 0;border: 1px dashed #767676;border-radius: var(--radius-sm);margin: 0;}
@media(min-width: 992px){
    .more-btn{column-gap: 20px;margin: 0 20px;}
    .more-btn .line{width: 40px;}
    .more-btn .btn{width:32px;height: 32px;line-height: 32px;}
    .more-btn .btn:hover,
    .more-btn .btn:focus{transform: rotate(45deg);border-color: var(--main-color01); color:var(--main-color01);}
}
@media(min-width: 1800px){
    .more-btn .line{width: 60px;}
    .more-btn .btn{width:36px;height: 36px;line-height: 36px;}
}

/*****************************************************
visual
*****************************************************/
.visual{height: 100dvh;width: 100%;position: relative;}
/* swiper */
.visual .visual-swiper{height: 100%;}
.visual .visual-swiper .visual-img{height: 100%;background-size: cover;background-position: center;background-repeat: no-repeat;border-bottom-right-radius: 80px;}
.visual .visual-mask{width: 100%;height: 100%;background: linear-gradient(to right, rgba(0,0,0,.5), rgba(0,0,0,.1));position: absolute;left: 0;top: 0;border-bottom-right-radius: 80px;}

/* visual-wrap */
.visual-wrap{position: absolute;left: 0;bottom: 20px;z-index: 1;color: #fff;}
.visual-head{margin-bottom: 24px;text-shadow: 0 3px 6px rgba(0,0,0,.16);}
.visual-head .deco {width: 80px;height: 80px;margin-bottom: 20px;opacity: .5;}
.visual-head .deco img {width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: left bottom;}
    
.visual-wrap .slogan{font-size: 18px;}
.visual-wrap .major{font-family: var(--font-type02);font-size: 28px;}
.visual-info{backdrop-filter:blur(10px) brightness(83%);border-radius: var(--radius);padding:12px 20px;display: flex;align-items: center;flex-wrap: wrap;gap:8px 12px;margin-bottom: 30px;}
.visual-info p{margin-bottom: 0;}
.visual-info .tit{font-weight: 600;font-size: 17px;width: 100%;}
.visual-info .tit::before{display: none}
.visual-info .line{display: none;width: 24px;height: 2px;border-radius: var(--oval);background-color: #fff;opacity: .4;}
.visual-info p::before{display:inline-block;content: '';background: url(/common/images/hmpg/location-icon.svg) no-repeat left center/contain; width: 16px;height: 16px;margin-right: 10px;vertical-align: middle;}
.visual-info .call::before{background-image: url(/common/images/hmpg/call-icon.svg)}

/* control */
.visual-ctl{color: #fff;}
.visual-ctl button{color: #fff;}
.visual-ctl .line{background-color: #fff;}
.visual-ctl .prev-btn::before,
.visual-ctl .next-btn::after{filter: invert(100%) sepia(11%) saturate(414%) hue-rotate(244deg) brightness(120%) contrast(100%);}

@media(min-width: 768px){
    .visual-wrap{bottom: 10%;left: 50%;transform: translateX(-50%);}
    .visual-wrap .slogan{font-size: 20px;}
    .visual-wrap .major{font-size: 40px;}
    .visual-info .tit{width: auto;}
}
@media(min-width: 992px){
    .visual{height: 100vh;width: 100%;}
    .visual-head{margin-bottom:60px;}
    .visual-foot{display: flex;align-items: center;justify-content: flex-end;column-gap: 20px;}
    .visual-info{border-radius: var(--oval);padding:16px 32px;column-gap: 24px;margin-bottom: 0;}
    .visual-info .tit{font-size: 20px;}
    .visual-info .line{display: inline-block;}
    .visual-ctl .play-btn:hover, .visual-ctl .play-btn:focus{border-color: #fff;background-color: transparent;}
    .visual .visual-swiper .visual-img{border-bottom-right-radius: 150px;}
    .visual .visual-mask{border-bottom-right-radius: 150px;}
}
@media(min-width: 1800px){
    .visual-wrap{bottom: 100px;}
    .visual-head{margin-bottom:100px;}
    .visual-head .deco {width: 120px;height: 120px;margin-bottom: 40px;
    .visual-wrap .major{font-size: 50px;}
    .visual-info{padding:20px 40px;}
    .visual-info .tit{font-size: 24px;}
    .visual-info p{font-size: 20px;}
    .visual-info p::before{margin-right: 12px;width: 20px;height: 20px;}
    .visual .visual-swiper .visual-img{border-bottom-right-radius: 200px;}
    .visual .visual-mask{border-bottom-right-radius: 200px;}
}
}

/*****************************************************
quick
*****************************************************/
.quick{}
.quick .quick-con {padding: 20px;background: linear-gradient(to right, var(--main-color01), var(--point-color02));margin-top: 20px;border-radius: var(--radius);}

/* control */
.quick-ctl{color: #fff;justify-content: center;margin-bottom: 16px;}
.quick-ctl button{color: #fff;font-size: 14px;}
.quick-ctl .play-btn{background-color: transparent;border-color: #fff;background-size:auto 10px;}
.quick-ctl .line{background-color: #fff;}
.quick-ctl .prev-btn::before,
.quick-ctl .next-btn::after{filter: invert(100%) sepia(11%) saturate(414%) hue-rotate(244deg) brightness(120%) contrast(100%);}

/* swiper */
.quick .unit{display: flex;color: #fff;gap: 12px;align-items: center;justify-content: center;}
.quick .icon{width: 20px;height: 20px;}
.quick .icon img{width: 100%;height: 100%;object-fit: contain;vertical-align: top;}
.quick .txt{margin-bottom: 0; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 2;line-clamp: 2;max-width: calc(100% - 32px);position: relative;word-break: break-all;}
.quick .swiper-wrapper{align-items: center}

@media(min-width: 768px){
    .quick .quick-con {border-radius:100px}
}
@media(min-width: 992px){
    .quick-con{display: flex;align-items: center;justify-content: space-between;align-items: center;}
    .quick-ctl{margin-bottom: 0;}
    .quick-ctl button{font-size: 16px;}
    .quick-ctl .play-btn{width: 32px;height: 32px;}
    .quick-ctl .prev-btn::before, .quick-ctl .next-btn::after{vertical-align: text-top;}
    .quick-swiper{width: calc(100% - 300px);}
    .quick .unit{column-gap: 16px;}
    .quick .icon{width: 30px;height: 30px;}
    .quick .txt{max-width: calc(100% - 46px);}
    .quick .txt::after{display: block; content: '';width: 0;height: 1px;border-radius: var(--oval); background-color: #fff;position: absolute;left: 0;bottom: 0;transition: width .3s;}
    .quick .unit:hover .txt::after,
    .quick .unit:focus .txt::after{width: 100%;}
}
@media(min-width: 1400px){
    .quick .quick-con {padding:34px 0}
    .quick-swiper{width: calc(100% - 150px);}
    .quick .unit{column-gap: 20px;}
    .quick .icon{width: 34px;height: 32px;}
    .quick .txt{max-width: calc(100% - 54px);font-size: 18px;}
    .quick .control .play-btn.stop, .quick .control .line {display:none;}
}
@media(min-width: 1800px){
    .quick .txt{font-size: 20px;}
}

/*****************************************************
notice
*****************************************************/
.notice{margin-top: 40px;}
.notice-head{display: flex;align-items: center;gap: 20px;}
.notice-body{position: relative;margin-top: 24px;}

/* notice-char */
.notice:has(.no-data) .notice-char{display: none;}
.notice-char{position: absolute;width: 100px;height:100px;z-index: 1;right: 0;top: -80px;}
.notice-char img{width: 100%;height: 100%;object-fit: contain;object-position: left bottom;}
.notice-char::before, .notice-char::after{display: block; content: '';background: no-repeat center/contain; position: absolute; animation: rotateAni linear infinite;}
.notice-char::before{background-image: url(/common/images/hmpg/notice-img02.svg);animation-duration: 4s;width: 12px;height: 12px;right: -8px;top: 20px;} 
.notice-char::after{background-image: url(/common/images/hmpg/notice-img03.svg);animation-duration: 8s;width: 18px;height: 18px;right: 0; top: 0;}

/* notice-tab */
.notice .tab-default {background-color: transparent;margin-bottom: 0;gap: 0;}
.notice .tab-default .nav-item { width: auto; }
.notice .tab-default .nav-item .nav-link {padding: 15px 10px;background-color: transparent;border: none;display: inline-flex;justify-content: space-between;transition: all .3s;}
.notice .tab-default .nav-item:not(:first-child) .nav-link::before {left:0;}
.notice .tab-default .nav-item .nav-link.active { background-color: transparent; box-shadow: none; color: var(--main-color01); border: none; }
.notice .tab-default .nav-item .nav-link .sub-tit {display:inline-block;margin: 0;}
.notice .tab-default .nav-item .nav-link .more-btn {display:none;margin: 0;margin-left: 12px;}
.notice .tab-default .nav-item .nav-link.active .more-btn {display: inline-flex;}
.notice .tab-default .nav-item .nav-link:hover, .notice .tab-default .nav-item .nav-link:focus {background-color: transparent;border:none; box-shadow: none;}
.notice .tab-default .nav-item .nav-link.active:hover, .notice .tab-default .nav-item .nav-link.active:focus {color:var(--main-color01)}


/* notice-list */
.notice-list{display: flex; row-gap: 10px;flex-direction: column;flex-wrap: wrap;}
.notice-list .unit{display: block; background: #fff url(/common/images/hmpg/active-icon.svg) no-repeat left bottom; box-shadow: 0 0 120px rgba(0,0,0,.02);border-radius: var(--radius);height: 100%;padding: 26px 26px 14px;transition: all .3s;position: relative;}
.notice-list .tit{display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 2;line-clamp: 2;font-weight: 700;line-height: 1.5;font-size: 18px;}
.notice-list .txt{display: -webkit-box;-webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 1;line-clamp: 1;color: #555;font-weight: 500;transition: color .3s;  word-break: break-word;}
.notice-list .date{color: #767676; font-size: 14px;position: relative;padding-left: 12px;}
.notice-list .date::before, .notice-list .date::after{display: block; content: '';width: 4px;height: 4px;background-color: #767676;border-radius: var(--oval);position: absolute;left: 0;top: 50%;transform: translateY(-50%);}

@media(min-width: 992px){
    .notice{margin-top: 100px;}
    .notice-list{gap: 16px;flex-direction: row;}
    .notice-list .item{flex:0 1 calc(50% - 8px);}
    .notice-list .unit{padding: 40px 30px 20px;}
    .notice-list .tit{height: 3em;font-size: 20px;}
    .notice-list .txt{-webkit-line-clamp: 3;line-clamp: 3;height: 4.5em;margin: 20px 0 32px;}
    .notice-list .date{font-size: 16px;padding-left: 16px;transition: padding .3s;}
    .notice-list .date::before, .notice-list .date::after{width: 6px;height: 6px;}
    
    /* hover */
    .notice-list .unit:hover,
    .notice-list .unit:focus{background-color: var(--main-color01);background-position-x: right;color: #fff;box-shadow: 0 10px 30px rgba(0,0,0,.2);}
    .notice-list .unit:hover .txt,
    .notice-list .unit:focus .txt{color: #fff;}
    .notice-list .unit:hover .date,
    .notice-list .unit:focus .date{color: #fff;padding-left: 20px;}
    .notice-list .unit:hover .date::before,
    .notice-list .unit:focus .date::before{background-color: #fff;width: 12px;height: 2px;}
    .notice-list .unit:hover .date::after,
    .notice-list .unit:focus .date::after{background-color: #fff;width: 2px;height: 12px;left: 5px;}
}
@media(min-width: 1200px){
    .notice{margin-top: 115px;}
    .notice-body{margin-top: 36px;}
    .notice-char{width: 160px;height: 142px;padding-right: 30px;padding-top: 34px;top: -120px;}
    .notice-char::before{width: 16px;height: 16px;right: 0;top: 40px;}
    .notice-char::after{width: 32px;height: 32px;right: 20px;top: 0;}
    .notice-list{display: flex;}
    .notice-list .item{flex: 0 1 calc(25% - 12px);}
    .notice .tab-default .nav-item .nav-link {padding: 15px 20px}
}
@media(min-width: 1800px){
    .notice-body{margin-top: 50px;}
    .notice-char{width: 210px;height: 185px;padding-right: 30px;padding-top: 34px;top: -160px;}
    .notice-char::before{width: 16px;height: 16px;right: 0;top: 40px;}
    .notice-char::after{width: 32px;height: 32px;right: 20px;top: 0;}
    .notice-list{column-gap: 20px;}
    .notice-list .item{flex: 0 1 calc(25% - 15px);}
    .notice-list .unit{padding: 50px 40px 30px;}
    .notice-list .tit{font-size: 24px;}
    .notice-list .txt{margin: 25px 0 55px;}
    .notice .tab-default .nav-item .nav-link {padding: 15px 38px}
    
}

/*****************************************************
gallery
*****************************************************/
.gallery{margin-top: 40px;}
.gallery-head{text-align: center;z-index: 2;position: relative;}

/* gallery-body */
.gallery-body{position: relative;z-index: 1;padding: 26px 0 16px;}
.gallery-body:after{height:100%;background: var(--bg-color01) url(/common/images/hmpg/gallery-bg.svg) no-repeat center bottom/contain;border-radius: var(--radius-lg);width: calc(100% - 3rem);display: block;content: '';position: absolute;left: 50%; top: -22px;height:calc(100% + 22px);transform: translateX(-50%);z-index: -1}
.gallery-foot{display: flex;justify-content: center;align-items: center;margin-top: 16px;}

/* swiper */
.gallery .swiper-slide{perspective: 1000px}
.gallery .unit{transition: transform .3s;}
.gallery .swiper-slide-first .unit,
.gallery .swiper-slide-prev .unit{display: block;transform: rotateY(6deg);}
.gallery .swiper-slide-last .unit,
.gallery .swiper-slide-next .unit{display: block;transform: rotateY(-6deg);}
.gallery .swiper-slide-active .unit{transform: none;}
.gallery .txt-box{display: flex;align-items: center;column-gap: 16px;border-top: 1px solid #C4C4C4;padding-top:16px;margin-bottom: 20px;}
.gallery .txt-box .date{display: flex;flex-direction: column;}
.gallery .txt-box .day{font-family: var(--font-type02);color: var(--main-color02);font-size: 22px;line-height: 1;}
.gallery .txt-box .year{color: #767676;font-size: 14px;letter-spacing: -0.5px;}
.gallery .txt-box .tit{font-weight: 600;  display: -webkit-box;   -webkit-box-orient: vertical;overflow: hidden;-webkit-line-clamp: 1;line-clamp: 1;word-break: break-all;margin-bottom: 0;}
.gallery .img-box{aspect-ratio: 4/3;transition: box-shadow .3s;border-radius: var(--radius);background: var(--bg-color02) url(/common/images/hmpg/logo.svg) no-repeat center; background-size: auto 20%;}
.gallery .img-box img{width: 100%;height: 100%;object-fit: cover;border-radius: var(--radius);}
@media(min-width: 576px){
    .gallery-body:after{width: calc(540px - 3rem)}
}
@media(min-width: 768px){
    .gallery-body:after{width: calc(720px - 3rem)}
}
@media(min-width: 992px){
    .gallery{margin-top: 100px;}
    .gallery-body{padding: 40px 0 24px;}
    .gallery-body:after{top: -30px;height:calc(100% + 30px);width: calc(960px - 3rem);}
    .gallery .swiper-slide-first .unit,
    .gallery .swiper-slide-prev .unit{display: block;transform: rotateY(10deg);}
    .gallery .swiper-slide-last .unit,
    .gallery .swiper-slide-next .unit{display: block;transform: rotateY(-10deg);}
    .gallery .swiper-slide-active .unit{transform: none;}
    .gallery .txt-box{column-gap: 24px;padding-top: 20px;margin-bottom: 30px;}
    .gallery .txt-box .day{font-size: 28px;}
    .gallery .txt-box .year{font-size: 16px;}
    .gallery .txt-box .tit{font-size: 20px;}
    .gallery .unit:hover .img-box,
    .gallery .unit:focus .img-box{box-shadow: 0 10px 20px rgba(0,0,0,.2);}
    .gallery .img-box{aspect-ratio: 4/3;position: relative;background-size: auto;}
    .gallery .img-box::after{display: block; content: '';width: 0;height: 0;background: #2D2F33 url(/common/images/hmpg/plus-icon.svg) no-repeat center; border-radius: var(--circle);border: 6px solid var(--bg-color01);position: absolute;right: 0;bottom: 0;opacity: 0;transition: all .3s;}
    .gallery .unit:hover .img-box::after,
    .gallery .unit:focus .img-box::after{width: 48px;height: 48px;opacity: 1;right: -24px;bottom: -24px;}
    .gallery-foot{margin-top: 30px;}
    .gallery .swiper-slide-last .unit .img-box::after, 
    .gallery .swiper-slide-next .unit .img-box::after{right: initial;left: 0;}
    .gallery .swiper-slide-last .unit:hover .img-box::after, 
    .gallery .swiper-slide-next .unit:hover .img-box::after{left:-24px}
}
@media(min-width: 1200px){
    .gallery-body:after{max-width: 	1140px;width: 100%;}
}
@media(min-width: 1400px){
    .gallery{margin-top: 150px;}
    .gallery-body:after{max-width: 	1320px;}
    .gallery .txt-box{margin-bottom: 30px;}
    .gallery .txt-box{column-gap: 30px;}
    .gallery .txt-box .day{font-size: 32px;}
    .gallery .unit{padding: 20px 0;}
    .gallery .unit:hover .img-box::after,
    .gallery .unit:focus .img-box::after{width: 64px;height: 64px;opacity: 1;right: -32px;bottom: -32px;}
    .gallery .swiper-slide-last .unit:hover .img-box::after,
    .gallery .swiper-slide-next .unit:hover .img-box::after{left:-32px}
}
@media(min-width: 1800px){
    .gallery-body{padding: 90px 0 70px;}
    .gallery-body:after{max-width: 1640px;}
    .gallery .txt-box{margin-bottom: 40px;}
}

/*****************************************************
explain
*****************************************************/
.explain{position: relative;z-index: 1;margin-top: 40px;}
.explain-body{background:url(/common/images/hmpg/major-bg.jpg) no-repeat center/cover;border-radius: var(--radius);color: #fff;padding: 24px 30px;position: relative;}
.explain-body .txt-box{font-weight: 600;font-size: 17px;text-shadow: 0 0 30px rgba(0,0,0,.1);margin-bottom: 24px;}
.explain-body .txt-box br{display: none;}
.explain-link{display: flex;gap: 4px;flex-direction: column;align-items: flex-start;=: 0;}
.explain-link .item {width:100%}
.explain-link .unit{backdrop-filter:blur(5px) brightness(80%);border-radius: var(--radius);display: flex;align-items: center;padding: 10px 18px;gap: 12px;border: 2px solid transparent;min-height: 73px;}
.explain-link .icon{width: 20px;height: 20px;}
.explain-link .icon img{width: 100%;height: 100%;object-fit: contain;object-position: left center;vertical-align: initial;}
.explain-link .txt{margin-bottom: 0;font-weight: 500;flex: 1 1 10%;overflow: hidden;line-height: 1.2;word-break: keep-all;}
.explain-link .sub-txt {margin-bottom:0;font-size: 19px;line-height: 1.2;}
.explain-link .num {margin-bottom: 0;font-family: var(--font-type02);font-size:19px}
.explain-link .num span {font-size: 15px;}
.explain-link .num span.date {display:block;font-size:14px;}
.explain .explain-char{position: absolute;right: 0;bottom: -32px;width: 80px;height: 80px}
.explain .explain-char img{width: 100%;height: 100%;object-fit: contain;object-position: right bottom;}

@media(min-width: 768px){
    .explain-body{padding: 24px 30px 24px 30px;}
    .explain-link{display: grid;grid-template-columns: repeat(3, 1fr);width: 100%;gap: 10px;}
    .explain-link .unit{width: 100%;height: 100%;padding: 10px 30px;text-align: center;flex-direction: column;}
    .explain-link .item{height: 100%; min-width: calc(100% / 4 - 12px);}
    .explain-link .txt {display: flex;align-items: flex-start;max-height: 60px;}
    .explain .explain-char{width: 100px;height: 100px;bottom: -32px;}
}
@media(min-width: 992px){
    .explain{margin-top: 100px;padding-bottom: 45px;} 
    .explain::after{display: block; content: '';background: linear-gradient(to right, var(--main-color01), var(--point-color02));width: 100%;height: 60%;position: absolute;left: 0;bottom: 0;z-index: -1;}
    .explain-body {padding:40px 160px 40px 60px;}
    .explain-body .txt-box{font-size: 22px;margin-bottom: 30px;}
    .explain-link{gap: 16px;}
    .explain-link .unit{flex-direction: column;justify-content: flex-start;transition: all .3s;min-width:170px;padding: 24px 70px;row-gap: 16px;}
    .explain-link .unit:hover,
    .explain-link .unit:focus{border-color: #fff;}
    .explain-link .icon{width: 42px;height: 42px;}
    .explain-link .icon img{object-position: center;}
    .explain-link .num {font-size:30px}
    .explain .explain-char{width: 120px;height: 120px;right: 30px;bottom: 0;}   
}
@media(min-width: 1200px){    
    .explain-body .txt-box br{display: block;}
}
@media(min-width: 1400px){
    .explain{margin-top: 150px;padding-bottom: 90px;} 
    .explain-body {padding: 60px 60px;}
    .explain-body .txt-box{font-size: 24px;margin-bottom: 40px;}
    .explain-link{ grid-template-columns: repeat(5, 1fr);}
    .explain-link .unit{row-gap: 22px;padding: 32px 20px;min-width: 240px;max-width: 240px;}
    .explain-link .icon{width: 50px;height: 50px;}
    .explain-link .txt{font-size: 20px;}
    .explain-link .num {}
    .explain .explain-char{width: 160px;height: 160px;right: 60px;}
   
}
@media(min-width: 1800px){
    .explain-body{min-height: 480px;padding: 80px 120px;}
    .explain .explain-char{width: 200px;height: 200px;right: 100px;}
    .explain-body .txt-box{font-size: 32px;}
    .explain-link .unit{min-width: 260px;max-width: 260px;}
}


/*****************************************************
schedule
*****************************************************/
.schedule{margin-top: 40px;}
.schedule-head{display: flex;flex-wrap: wrap;row-gap: 8px;justify-content: center;}
.schedule .main-tit{margin-right: 16px;}
.schedule .control button{color: #767676;transition: color .3s;}
.schedule .control .day{color: #555;}
.schedule .control .day .month{color: var(--main-color01);font-weight: 600;}
.schedule-body{position: relative;margin-top: 24px;padding: 0 50px;}

/* swiper */
.schedule .unit{background: #fff;box-shadow: 0 0 20px rgba(0,0,0,.02);border-radius: var(--radius);display:block;height: 100%;border: 2px solid #fff;transition: border-color .3s;padding: 16px 20px;}
.schedule .unit .day{font-weight: 700;font-size: 18px;margin-bottom: 10px;}
.schedule .unit .txt{font-weight: 500;color: #555;display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; -webkit-line-clamp: 1;line-clamp: 1;word-break: break-all;margin-bottom: 0;}
.schedule .swiper-wrapper{max-height: 310px}
.schedule .swiper-slide{height: auto;}
.schedule .swiper-pagination-vertical.swiper-pagination-bullets, 
.schedule .swiper-vertical>.swiper-pagination-bullets,
.schedule .swiper-horizontal>.swiper-pagination-bullets, 
.schedule .swiper-pagination-bullets.swiper-pagination-horizontal, 
.schedule .swiper-pagination-custom, 
.schedule .swiper-pagination-fraction{width: 10px;background-color: #fff;right: 0;left: initial;border-radius: var(--oval);display: flex;height: 100%;flex-direction: column;top: 0;transform: none;}
.schedule .swiper-pagination-bullet{width: 100%;flex: 1 1 10%;border-radius: var(--oval);background-color: #fff;}
.schedule .swiper-pagination-vertical.swiper-pagination-bullets .swiper-pagination-bullet, 
.schedule .swiper-vertical>.swiper-pagination-bullets .swiper-pagination-bullet,
.schedule .swiper-horizontal>.swiper-pagination-bullets .swiper-pagination-bullet, 
.schedule .swiper-pagination-horizontal.swiper-pagination-bullets .swiper-pagination-bullet{margin: 0;}
.schedule .swiper-pagination-bullet-active{background-color: #2D2F33;}
.schedule .sche-ctl.control button {width: 44px;height: 44px;background-color: #2D2F33;border: 6px solid #F2F5FF;border-radius:50px;color:#fff;display: flex;justify-content: center;align-items: center;position: absolute;top: 50%;transform: translateY(-50%);z-index: 10;}
.schedule .sche-ctl.control button:before, .schedule .sche-ctl.control button:after {background-image: none;font-family: var(--font-icon);margin: 0;line-height: 1;display: inline-block;}
.schedule .sche-ctl.control .play-btn {top: calc(50% - 44px);right:0;background-color: #c5cbda;}
.schedule .sche-ctl.control .prev-btn {left:0;}
.schedule .sche-ctl.control .prev-btn::before {content:'\F284';}
.schedule .sche-ctl.control .next-btn {right:0}
.schedule .sche-ctl.control .next-btn::after {content:'\F285';}
.schedule .sche-ctl.control button:hover, .schedule .sche-ctl.control button:hover,
.schedule .sche-ctl.control button:focus, .schedule .sche-ctl.control button:focus {background-color:#767676}
.schedule .sche-ctl.control .play-btn:hover, .schedule .sche-ctl.control .play-btn:focus {background-color: #99a0b0;}
.schedule .sche-ctl.control button:hover:before, .schedule .sche-ctl.control button:hover:after,
.schedule .sche-ctl.control button:focus:before, .schedule .sche-ctl.control button:focus:after {color:#fff;}


@media(min-width: 768px){
    .schedule-head{justify-content: flex-start;}
    .schedule .main-tit{margin-right: 20px;}
    .schedule-body{margin-top: 32px;}
    .schedule .swiper-wrapper{height: auto;}
}

@media(min-width: 992px){
    .schedule{margin-top: 60px;}
    .schedule .control button:hover,
    .schedule .control button:focus{color:var(--main-color02);}
    .schedule .unit{padding: 20px 30px;}
    .schedule .unit:hover, .schedule .unit:focus{border-color: var(--main-color01);color: var(--main-color01);}
    .schedule .unit .day{font-size: 20px;margin-bottom: 1rem;}
    .schedule .sche-ctl.control button:before, .schedule .sche-ctl.control button:after {font-size: 17px;}
    .schedule .sche-ctl.control button {width: 56px;height: 56px;}
    .schedule .sche-ctl.control .play-btn {top: calc(50% - 56px);}
    
}
@media(min-width: 1400px){
    .schedule{margin-top: 150px;}
    .schedule .main-tit{margin-right: 30px;}
    .schedule .control .day .month{font-size: 24px;margin-left: 10px;}
    .schedule-body{margin-top: 40px;}
    .schedule .unit{padding: 36px 32px}
}
    
@media(min-width: 1800px){
    .schedule .unit{padding: 42px 40px;}
    .schedule .unit .day{font-size: 24px;margin-bottom: 30px;}
    .schedule .sche-ctl.control button {width: 64px;height: 64px;}
    .schedule .sche-ctl.control .play-btn {top: calc(50% - 64px);}
}

/*****************************************************
promote
*****************************************************/
.promote{margin-top: 40px;position: relative;z-index: 1;}
.promote::before{display: block;content: '';width: 100%;height: 50%;position: absolute;left: 0;bottom: 0;background-color: #fff;z-index: -1;}

/* video */
.video{padding-right: 0;height: 100%;}
.video-head{display: flex;align-items: center;}
.video .tit{font-family: var(--font-type02);}
.video .tit::after{display: inline-block;content: '';width: 24px;height: 1px;background-color: #767676;margin:0 12px 7px}
.video-body{position: relative;}
.video iframe{width: 100%;aspect-ratio: 16/9;border-radius: var(--radius);}
.video .video-char{position: absolute;width: 80px;height: 80px;right: 0;top: -50px;z-index: -1;}
.video .video-char img{width: 100%;height: 100%;object-fit: contain;object-position: right 0;}
.video .more { margin-bottom: .5rem; padding: 5px 4px; padding-left: 45px; background: url(/common/images/hmpg/youtube-icon.svg) no-repeat left center; font-weight: 600; }
.video .more:hover, .video .more:focus { padding-left: 50px; }

@media(min-width: 992px){
    .promote {margin-top:60px}
    .video .video-char{width: 120px;height:120px;top: -80px;}
}

@media(min-width: 1400px){
    .promote {margin-top:170px}
    .video .video-head {padding-top: 14px;}
    .video .video-char{width: 160px;height:160px;top: -100px;}
}

@media(min-width: 1800px){
    .video .video-head {padding-top: 48px;margin-bottom: 10px;}
    .video .video-char { width: 212px; height: 212px; top: -140px; }
}

/* popup */
.popup{border: 6px solid #F7F7F7;background-color: #fff;border-radius: var(--radius);position:relative;margin-top: 40px;padding: 16px 40px 16px 16px;}
.popup-body{}
.popup .unit{width: 100%;aspect-ratio: 1/1;border: 1px solid #E8E8E8;display: block;border-radius: var(--radius);overflow: hidden;}
.popup .unit img{width: 100%;height: 100%;object-fit: cover;border-radius: var(--radius);transition: all .3s;object-position: center;}

.popup-foot{display: flex;flex-direction: column;align-items: center;justify-content: space-between;height: calc(100% - 32px);position: absolute;right: 10px;top:20px}
.popup .tit{text-transform: uppercase;font-family: var(--font-type02);writing-mode:vertical-rl;margin: 0;font-size: 18px;}
.popup-ctl{flex-direction: column;gap: 6px;}
.popup-ctl .play-btn{transform: rotate(90deg);background-color: #767676;background-size: auto 10px;border-color: #767676;width: 26px;height: 26px;}
.popup-ctl button{writing-mode:vertical-rl;color: #767676;font-size: 14px;}
.popup-ctl .prev-btn::before, 
.popup-ctl .next-btn::after{transform: rotate(90deg);width: 10px;height: 10px;vertical-align: initial}
.popup-ctl .prev-btn::before{margin-right: 0;margin-bottom: 6px;}
.popup-ctl .next-btn::after{margin-left: 0;margin-top: 6px;}
.popup-ctl .line{width: 10px;height: 1px;}

@media(min-width: 992px){
    .popup{border-width: 10px;margin-top: 30px;padding: 36px 50px 36px 30px;}
    .popup .unit:hover img, .popup .unit:focus img{width: 110%;height: 110%;}
    .popup-ctl{gap: 10px;}
    .popup-ctl button{font-size: 16px;}
    .popup-ctl .play-btn{width: 32px;height: 32px;}
    .popup-ctl .prev-btn::before, 
    .popup-ctl .next-btn::after{width: 16px;height: 16px;}
    .popup-ctl .prev-btn::before{margin-bottom: 10px;}
    .popup-ctl .next-btn::after{margin-top: 10px;}
    .popup-ctl .line{width: 16px;}
}
@media(min-width: 1400px){
    .popup {margin-top:0;}
}
@media(min-width: 1800px){
    .video{padding-right: 32px;}
    .video .tit{font-size: 32px;}
    .video .tit::after{width: 40px;margin: 0 20px;}
    
    .popup{padding: 47px 100px 47px 40px}
    .popup-foot{height: calc(100% - 80px);top: 40px;right: 40px}
    .popup .tit{font-size: 24px;}
}