/* main */
/* header */
#header .logo {position:fixed;top:2.5rem;left:calc((100% - 300px - 600px) - 100px - 2rem - 1.5rem);width:100px;aspect-ratio:1 / 1;transform-origin:center;z-index:5;transition:0.2s;}
#header .logo a {display:block;width:100%;height:100%;background:url(../images/logo.svg) no-repeat center center / contain;}
#header .logo:hover {animation:logoShake 0.4s ease-in forwards;}

@keyframes logoShake{
	0%{
		transform:rotate(0deg);
	}
	12%{
		transform:rotate(4deg);
	}
	36%{
		transform:rotate(-4deg);
	}
	62%{
		transform:rotate(2deg);
	}
	86%{
		transform:rotate(-2deg);
	}
	100%{
		transform:rotate(0deg);
	}
}

/* footer */
#footer {position:fixed;opacity:0;pointer-events:none;}

/* cover */
#cover {position:fixed;top:1rem;left:1rem;width:calc((100% - 1rem * 3) - 300px - 600px);height:calc(100vh - 1rem * 2);border-radius:8px;background:no-repeat center center / cover;transition:0.2s;z-index:1;}
#cover .inner {position:relative;width:100%;height:100%;overflow:hidden;}
#cover .inner .phrase {position:absolute;bottom:5rem;left:3.75rem;width:calc(100% - 3.75rem * 2);}
#cover .inner .phrase .main {color:#fff;font-size:6.25rem;font-family:'MoviePoster',sans-serif;line-height:1;}
#cover .inner .phrase .calligraphy {position:absolute;top:50%;left:-3.75rem;display:block;color:var(--color1);font-size:6.25rem;font-family:'AntroVectra',sans-serif;line-height:1;transform:translateY(-50%);transition:0.2s;}
#cover .inner .phrase .desc {display:block;color:#fff;}
#cover .inner .bg-change {position:absolute;bottom:1.25rem;right:1.25rem;}
#cover .inner .bg-change a {display:flex;flex-flow:row wrap;justify-content:center;align-items:center;}

/* bg type */
#cover.type1 {background-image:url(../images/img-hero-image-1.jpg);}
#cover.type2 {background-image:url(../images/img-hero-image-2.jpg);}

#cover.type1 .inner .phrase .calligraphy {color:var(--color1);}
#cover.type2 .inner .phrase .calligraphy {color:var(--color2);}

/* banner-list */
#cover .banner-list {display:none;}

/* container */
#container {width:100%;}
#container .inner {width:100%;padding:1rem calc(300px + 2rem) 1rem calc((100% - 1rem * 3) - 300px - 600px + 2rem);box-sizing:border-box;}
#container .inner .page {width:100%;min-height:calc(100vh - 1rem * 2);border-radius:8px;background-color:#fff;}
#container .inner .page .title-wrap {position:relative;width:100%;aspect-ratio:3 / 1;border:4px solid #fff;border-radius:8px 8px 0 0;background:linear-gradient(180deg, rgba(43,41,63,1) 0%, rgba(20,26,125,1) 100%);box-sizing:border-box;}
#container .inner .page .title-wrap::before {content:"";position:absolute;top:0;left:0;display:block;width:100%;height:100%;background:url(../images/img-sub-title-1.png) no-repeat center center / cover;}
#container .inner .page .title-wrap .title {position:absolute;top:50%;left:0;width:100%;color:#fff;font-size:1.5rem;font-weight:400;text-align:center;transform:translateY(-50%);}
#container .inner .page .content-wrap {position:relative;width:100%;padding:1.75rem;box-sizing:border-box;}

/* aside */
#aside {position:fixed;top:1rem;right:1rem;width:300px;height:calc(100vh - 1rem * 2);}
#aside .inner {justify-content:space-between;gap:1rem;width:100%;height:100%;}
#aside .inner .nav-box {width:100%;height:208px;color:var(--mono1);padding:1.25rem;border-radius:8px;background-color:#fff;box-sizing:border-box;overflow:hidden;}
#aside .inner .nav-box .title-wrap {width:100%;margin-bottom:0.875rem;}
#aside .inner .nav-box .title-wrap .title {color:var(--mono1);font-size:1rem;font-weight:700;}
#aside .inner .nav-box .nav-list {width:100%;}
#aside .inner .nav-box .nav-list .menu-item {width:100%;}
#aside .inner .nav-box .nav-list .menu-item + .menu-item {margin-top:0.75rem;}
#aside .inner .nav-box .nav-list .menu-item a {position:relative;display:inline-flex;flex-flow:row wrap;justify-content:flex-start;align-items:center;gap:0.75rem;color:var(--mono1);font-size:1rem;transition:0.2s;}
#aside .inner .nav-box .nav-list .menu-item a * {position:relative;z-index:1;}
#aside .inner .nav-box .nav-list .menu-item a:hover {color:var(--color1);}
#aside .inner .nav-box .nav-list .menu-item.current-menu-item a {color:var(--color1);}
#aside .inner .nav-box .nav-list .menu-item.current-menu-item a::before {content:"";position:absolute;bottom:0;left:-0.375rem;display:block;width:calc(100% + 0.75rem);height:0.75rem;background-color:var(--color3);}
#aside .inner .banner-box {display:flex;flex-flow:row wrap;justify-content:space-between;align-items:center;width:100%;height:40px;color:var(--mono1);box-sizing:border-box;}
#aside .inner .banner-box .banner {width:200px;height:100%;}
#aside .inner .banner-box .banner img {display:block;width:100%;}
#aside .inner .banner-box .banner-copy {width:calc(100% - 200px - 0.75rem);height:100%;}
#aside .inner .banner-box .banner-copy a {display:flex;flex-flow:row wrap;justify-content:center;align-items:center;width:100%;height:100%;font-size:0.875rem;}
#aside .inner .swiper-box {position:relative;width:100%;aspect-ratio:1 / 1;color:var(--mono1);border-radius:8px;background-color:#fff;box-sizing:border-box;overflow:hidden;}
#aside .inner .swiper-box .swiper-wrapper .swiper-slide {position:relative;width:100%;height:100%;}
#aside .inner .swiper-box .swiper-wrapper .swiper-slide .img-wrap {width:100%;height:100%;background:no-repeat center center / cover;}
#aside .inner .swiper-box .swiper-wrapper .swiper-slide .img-wrap.no1 {background-image:url(../images/img-swiper-1.jpg);}
#aside .inner .swiper-box .swiper-wrapper .swiper-slide .img-wrap.no2 {background-image:url(../images/img-swiper-2.jpg);}
#aside .inner .swiper-box .swiper-wrapper .swiper-slide .img-wrap.no3 {background-image:url(../images/img-swiper-3.jpg);}
#aside .inner .swiper-box .swiper-wrapper .swiper-slide .img-wrap.no4 {background-image:url(../images/img-swiper-4.jpg);}
#aside .inner .swiper-box .swiper-wrapper .swiper-slide .img-wrap.no5 {background-image:url(../images/img-swiper-5.jpg);}
#aside .inner .swiper-box .swiper-wrapper .swiper-slide .img-wrap.no6 {background-image:url(../images/img-swiper-6.jpg);}
#aside .inner .swiper-box .pagination {position:absolute;bottom:0.5rem;left:0;justify-content:center;align-items:center;gap:0.5rem;width:100%;z-index:1;}
#aside .inner .swiper-box .pagination .swiper-pagination-bullet {width:10px;height:10px;margin:0;border-radius:50px;background-color:var(--mono1);opacity:0.75;transition:0.2s;}
#aside .inner .swiper-box .pagination .swiper-pagination-bullet.swiper-pagination-bullet-active {width:25px;background-color:var(--color2);opacity:1;}
#aside .inner .variable-box {position:relative;width:100%;height:calc(100% - 1rem * 3 - 208px - 40px - 300px);color:var(--mono1);border:4px solid #fff;border-radius:8px;background-color:var(--color2);box-sizing:border-box;overflow:hidden;}
#aside .inner .variable-box .tyrant-tokki {position:absolute;top:calc(50% + 1.25rem);left:50%;width:120px;aspect-ratio:1 / 1;background:url(../images/icon-rake-1.png) no-repeat center center / contain;transform:translate(-50%,-50%);cursor:pointer;}
#aside .inner .variable-box .tyrant-tokki:hover {background-image:url(../images/icon-rake-2.png);}
#aside .inner .variable-box .text-bubble {position:absolute;top:1.25rem;left:50%;color:var(--mono1);font-size:1rem;text-align:center;white-space:nowrap;padding:0.5rem 1.25rem;border:4px solid #fff;border-radius:4px;background-color:#fff;box-sizing:border-box;transform:translateX(-50%);}
#aside .inner .variable-box .text-bubble::after {content:"";position:absolute;top:0;left:0;display:block;width:100%;height:100%;border:2px solid var(--mono1);box-sizing:border-box;}

/* popup-message */
.popup-message {position:fixed;top:50%;left:50%;color:#fff;font-size:1rem;text-align:center;padding:0.75rem 1.5rem;border:5px solid #fff;border-radius:4px;background-color:var(--color1);box-sizing:border-box;pointer-events:none;opacity:0;transform:translate(-50%,-50%);transition:0.2s;z-index:10;}
.popup-message::after {content:"";position:absolute;top:-5px;left:-5px;display:block;width:calc(100% + 10px);height:calc(100% + 10px);border:2px solid var(--mono1);border-radius:4px;box-sizing:border-box;}
.popup-message.show {opacity:1;}

/* tokki */
.ttouch-tokki {font-size:10rem;padding:3.75rem 7.5rem;transition:unset;}
.ttouch-tokki.show {animation:tokkiShake 0.15s ease-in infinite;}

@keyframes tokkiShake{
	0%{
		transform:translate(-50%,-50%) rotate(0deg);
	}
	12%{
		transform:translate(-50%,-50%) rotate(2deg);
	}
	36%{
		transform:translate(-50%,-50%) rotate(-2deg);
	}
	62%{
		transform:translate(-50%,-50%) rotate(1deg);
	}
	86%{
		transform:translate(-50%,-50%) rotate(-1deg);
	}
	100%{
		transform:translate(-50%,-50%) rotate(0deg);
	}
}

/* 안내문 확인하기 */
#noticement {position:fixed;top:0;left:0;width:100%;height:100vh;padding:2.5rem 0;background-color:#2b293fad;box-sizing:border-box;overflow-y:auto;z-index:15;opacity:0;pointer-events:none;transition:0.2s;}
#noticement.show {opacity:1;pointer-events:initial;}
#noticement .inner {position:relative;justify-content:space-between;gap:2.5rem;width:1000px;padding:1.75rem;margin:0 auto;border:2px solid var(--mono1);border-radius:8px;background-color:#fff;box-sizing:border-box;}
#noticement .inner .notice-close {position:absolute;bottom:1rem;right:1rem;width:64px;height:40px;}
#noticement .inner .notice-close a {display:flex;flex-flow:row wrap;justify-content:center;align-items:center;width:100%;height:100%;color:var(--mono1);font-size:0.875rem;border:2px solid var(--mono1);border-radius:4px;box-sizing:border-box;transition:0.2s;}
#noticement .inner .notice-close a:hover {background-color:var(--mono8);}
#noticement .inner .subject {width:100%;color:var(--color4);font-size:1.5rem;font-weight:700;margin-bottom:1rem;}
#noticement .inner .subject .point {color:var(--color1);}
#noticement .inner .profile {width:300px;}
#noticement .inner .profile .img-box {width:100%;aspect-ratio:1 / 1;margin-bottom:0.75rem;border-radius:8px;background:url(../images/img-profile.png) no-repeat center center / cover;}
#noticement .inner .profile .table-box {width:100%;border:1px solid var(--color4);border-radius:8px;overflow:hidden;}
#noticement .inner .profile .table-box .item {justify-content:space-between;align-items:center;width:100%;background-color:var(--mono8);}
#noticement .inner .profile .table-box .item .label {display:block;width:88px;font-size:0.875rem;text-align:center;padding:0.625rem;box-sizing:border-box;}
#noticement .inner .profile .table-box .item .text {display:block;width:calc(100% - 88px);font-size:0.875rem;padding:0.625rem;background-color:#fff;box-sizing:border-box;}
#noticement .inner .genre {width:calc(100% - 300px - 2.5rem);}
#noticement .inner .genre .img-list {justify-content:space-between;gap:2.5rem 1.25rem;width:100%;}
#noticement .inner .genre .img-list .item {display:flex;flex-flow:row wrap;justify-content:center;width:calc(50% - 1.25rem / 2);}
#noticement .inner .genre .img-list .item .img {width:100%;aspect-ratio:3 / 2;margin-bottom:0.75rem;border-radius:8px;background:var(--mono9) no-repeat center center / cover;}
#noticement .inner .genre .img-list .item .desc {display:block;color:#fff;font-size:0.875rem;padding:0.375rem 1.5rem;border-radius:50px;}
#noticement .inner .genre .img-list .item.full {width:100%;}
#noticement .inner .genre .img-list .item.full .img {aspect-ratio:3 / 1;}
#noticement .inner .genre .img-list .item:nth-child(1) .img {background-image:url(../images/img-notice-genre-1.jpg);}
#noticement .inner .genre .img-list .item:nth-child(2) .img {background-image:url(../images/img-notice-genre-2.jpg);}
#noticement .inner .genre .img-list .item:nth-child(3) .img {background-image:url(../images/img-notice-genre-3.jpg);}
#noticement .inner .genre .img-list .item:nth-child(1) .desc {background:linear-gradient(90deg, rgba(24,115,170,1) 0%, rgba(219,11,92,1) 100%);}
#noticement .inner .genre .img-list .item:nth-child(2) .desc {background-color:#263558;}
#noticement .inner .genre .img-list .item:nth-child(3) .desc {background-color:#29292c;}
#noticement .inner .etc {width:calc(100% - 64px - 1.75rem);}
#noticement .inner .etc .text-list li + li {margin-top:0.5rem;}

/* responsive */
@media screen and (max-height:800px) and (min-width:1400px){
    #aside .inner .variable-box .tyrant-tokki {top:auto;bottom:0;left:auto;right:0.75rem;width:80px;transform:translate(0,0);}
    #aside .inner .variable-box .text-bubble {top:0.5rem;left:0.5rem;transform:translateX(0);}
}

@media screen and (max-width:1650px){
    #cover .inner .phrase {left:2.5rem;width:calc(100% - 2.5rem);}
    #cover .inner .phrase .main {font-size:4.25rem;}
    #cover .inner .phrase .calligraphy {left:-2.5rem;font-size:4.25rem;}
    #cover .inner .phrase .desc {font-size:0.875rem;}
}

@media screen and (max-width:1400px){
    #header .logo {left:calc((100% - 600px) - 100px - 2rem - 1.5rem);}

    #cover {width:calc((100% - 1rem * 3)  - 600px);}

    #container .inner {padding:1rem 1rem 1rem calc((100% - 1rem * 3) - 600px + 2rem);}
    #container .inner .page {min-height:unset;}

    #aside {position:static;top:auto;right:auto;width:100%;height:auto;}
    #aside .inner {flex-flow:row wrap;padding:0 1rem 1rem calc((100% - 1rem * 3) - 600px + 2rem);box-sizing:border-box;}
    #aside .inner .nav-box {height:auto;}
    #aside .inner .banner-box {justify-content:center;gap:1rem;width:200px;height:calc(40px * 2 + 1rem);}
    #aside .inner .banner-box .banner {height:40px;}
    #aside .inner .banner-box .banner-copy {width:100%;height:40px;}
    #aside .inner .swiper-box {order:1;}
    #aside .inner .variable-box {width:calc(100% - 200px - 1rem);height:calc(40px * 2 + 1rem);}
    #aside .inner .variable-box .tyrant-tokki {top:50%;left:auto;right:1rem;width:80px;transform:translateY(-50%);}
    #aside .inner .variable-box .text-bubble {top:50%;left:0.75rem;font-size:0.875rem;border-width:2px;transform:translate(0,-50%);}
}

@media screen and (max-width:1280px){
    #cover .inner .phrase {bottom:-7.25rem;left:1.75rem;width:calc(100vh - 1rem * 2 - 15rem);transform:rotate(-90deg);transform-origin:left top;}
}

@media screen and (max-width:1024px){
    #header .logo {top:2rem;left:2rem;width:68px;}

    #cover {width:calc((100% - 1rem * 3)  - 375px);}

    #container .inner {padding:1rem 1rem 1rem calc((100% - 1rem * 3) - 375px + 2rem);}
    #container .inner .page .content-wrap {padding:1.25rem;}

    #aside .inner {flex-flow:row wrap;padding:0 1rem 1rem calc((100% - 1rem * 3) - 375px + 2rem);}
    #aside .inner .variable-box .text-bubble {display:none;}
    #aside .inner .variable-box .tyrant-tokki {left:50%;right:auto;transform:translate(-50%,-50%);}

    #noticement {padding:1rem;}
    #noticement .inner {width:100%;padding:1.25rem;}
    #noticement .inner .subject {font-size:1.25rem;}
    #noticement .inner .profile {width:245px;}
    #noticement .inner .genre {width:calc(100% - 245px - 2.5rem);}
    #noticement .inner .genre .img-list {gap:1.75rem 1rem;}
    #noticement .inner .genre .img-list .item {width:calc(50% - 1rem / 2);}
}

@media screen and (max-width:768px){
    #header .logo {position:absolute;top:1.375rem;left:auto;right:1.375rem;}
    #footer {position:static;color:#fff;font-size:0.875rem;text-align:center;padding-bottom:0.625rem;opacity:1;pointer-events:initial;}

    #cover {position:static;top:auto;left:auto;width:calc(100% - 0.625rem * 2);height:auto;aspect-ratio:3 / 2;margin:0.625rem auto 0;}
    #cover .inner .phrase {top:2rem;bottom:auto;left:1.5rem;width:calc(100% - 1.5rem * 2);transform:rotate(0deg);}
    #cover .inner .phrase .main {font-size:3.75rem;}
    #cover .inner .phrase .calligraphy {left:-1.5rem;font-size:3.75rem;}
    #cover .inner .bg-change {bottom:1rem;right:1rem;}

    #container .inner {padding:0.625rem;}

    #aside .inner {gap:0.625rem;padding:0 0.625rem 0.625rem;}
    #aside .inner .banner-box {gap:0.625rem;height:calc(40px * 2 + 0.625rem);}

    .ttouch-tokki {font-size:5rem;padding:2.5rem 5rem;}

    #noticement .inner .profile {width:100%;}
    #noticement .inner .genre {width:100%;}
    #noticement .inner .genre .img-list .item.full .img {aspect-ratio:3 / 2;}
    #noticement .inner .etc {width:100%;padding-bottom:calc(40px + 1rem);}
}

@media screen and (max-width:480px){
    #header .logo {width:48px;}

    #cover {aspect-ratio:6 / 5;}
    #cover .inner .phrase .main {font-size:2.5rem;}
    #cover .inner .phrase .calligraphy {font-size:2.5rem;}
    #cover .inner .phrase .desc {font-size:0.75rem;}

    #noticement .inner {padding:0.875rem;margin:0.25rem 0 1rem;}
    #noticement .inner .notice-close {bottom:0.875rem;right:0.875rem;}
    #noticement .inner .genre .img-list {gap:1.25rem 0.5rem;}
    #noticement .inner .genre .img-list .item {width:calc(50% - 0.5rem / 2);}
    #noticement .inner .genre .img-list .item .desc {font-size:0.75rem;padding:0.25rem 1.125rem;}
}