@charset "utf-8";

/* **************************************** *
 * SUB global root
 * **************************************** */
 :root {
	--font-18:18rem;  
    --font-21:21rem;
    --font-23:23rem;  
}

@media (max-width: 1023px){
    :root {
        --font-18:16rem;  
    }
}

/* **************************************** *
 * SUB common
 * **************************************** */
#sub-content{position:relative; height: var(--height-full); padding:200rem 0 50rem; box-sizing: border-box; overflow: hidden;}
#sub-content:has(.wrap-wide){padding: 10rem 0;}
.sub-content h3 {line-height:1.3; font-size:51rem; color:var(--b-01);}
#sub-content:has(.play-list-wrap) {height: auto; padding: 0 0 50rem;}
#sub-content:has(.play-list-wrap) .main-header h2 {position: absolute; left: 50%; top: 50%; margin-top: 10rem; font-size: 62rem; color: var(--b-01); transform: translate(-50%, -50%);}

body:has(.sub-content--bg) {background: #F9F7E8;}
body:has(.sub-content--bg)::before {position: absolute; left:0; top:0; content:''; width:100%; height: 100%; background: url(../images/content/content-bg.png) no-repeat center / cover;}

.sub-content__inr {height: 100%;}
.sub-column-wrap {display: grid; grid-template-columns: 65% 1fr; gap: 20rem; height: 100%;}
.sub-box {display: block; padding: 15rem; border-radius: 50rem; background: #fff; box-shadow: var(--inner-shadow-top), var(--inner-shadow-bottom); box-sizing: border-box;}
.sub-box__inr {width: 100%; height: 100%; border-radius: 36rem; background: #f5f5f5;}
[data-grid] .sub-box {height: 100%;}

[data-txt="left"] {text-align: left;}
[data-txt="center"] {text-align: center;}

/* fonts */
#sub-content h4 {font-size: 40rem;}
#sub-content h5 {font-size: 35rem;}

/* sub-colum__list */
.sub-colum__list {display: grid; gap: 30rem; height: 100%;}
.sub-colum__list li a {display: flex; align-items: center; justify-content: center; height: 100%;}
/* .sub-colum__list li a {opacity: 0; visibility: hidden; position: absolute; left:50%; top:50%; content:''; width: 120rem; height: 100rem; background: url(../images/layout/ic-circle.svg) no-repeat center / contain; transform: translate(-50%, -50%); transition: .3s;}
.sub-colum__list li a h4 {opacity: 0; visibility: hidden; position: absolute; left:50%; top:50%; content:''; width: 120rem; height: 100rem; background: url(../images/layout/ic-circle.svg) no-repeat center / contain; transform: translate(-50%, -50%); transition: .3s;} */

/* sub-list__img */
.sub-list__img {height: 80%; margin: 0 0 25rem; border-radius: 40rem;}

/* play */
.play-box {position: relative;}
.play-box .btn-play {position: absolute; left:50%; bottom: 60rem; transform: translateX(-50%);} 
.play-wrap__list label {position: relative; left:30rem; top: 50%; padding: 0 30rem; padding-left: 100rem; font-size: 35rem; transform: translate(0, -50%);}
.play-wrap__list label::before {position: absolute; left:30rem; top:50%; content:''; width: 42rem; height: 42rem; border-radius: 10rem; background: #eee; transform: translateY(-50%);}
.play-wrap__list label::after {opacity: 0; visibility: hidden; position: absolute; left:30rem; top:50%; content:''; width: 50rem; height: 50rem; border-radius: 10rem; background: #eee; transform: translateY(-50%); background: url(../images/layout/ic-check.png) no-repeat right 15%/ 36rem;}
.play-wrap__list label p {position: relative; display: inline-block; padding-top: 5rem;}
.play-wrap__list label p::after {opacity: 0; visibility: hidden; position: absolute; left:50%; top:50%; content:''; width: 120rem; height: 100rem; background: url(../images/layout/ic-circle.svg) no-repeat center / contain; transform: translate(-50%, -50%); transition: .3s;}
.play-wrap__list label span {z-index: 1; position: relative;}
.play-wrap__list label:has(input[type="radio"]:checked)::after {opacity: 1; visibility: visible;}
.play-wrap__list input[type="radio"] {position: absolute; opacity: 0; visibility: hidden;}
.play-wrap__list .correct:has(input[type="radio"]:checked) p::after {opacity: 1; visibility: visible;}

.play-popup .popup-layer-inner {min-width: 520rem;}
.playLayer {margin: 40rem 0; text-align: center;}
.playLayer h2 {margin-top: 20rem; margin-bottom: 0;}
.playLayer img {display: inline-block;}
#correctLayer .playLayer {margin: 50rem 0;}
#correctLayer h2 {color: #2291F4;}
#wrongLayer h2 span {display: block; color: #E7463C;}

/* drawing */
.drawing-wrap,
.drawing-wrap .wrap-wide,
.drawing-slider,
.drawing-slider-container,
.drawing-slider-wrapper,
.drawing-slider .swiper-slide {height: 100% !important;}
.drawing-slider .swiper-slide {display: block; padding: 10rem; border-radius: 15rem; box-shadow: var(--inner-shadow-top), var(--inner-shadow-bottom);}
.drawing-slider .swiper-slider__inr {width: 100%; height: 100%; background: #fafafa; box-shadow: inset 3rem 3rem 10rem rgba(0, 0, 0, .05); border-radius: 10rem;}
.drawing-slider__controls {position: absolute; width: 100%; bottom: 50rem; z-index: 1; text-align: center;}
.drawing-slider__controls .swiper-pagination {position: relative; display: inline;}
.drawing-slider__controls .swiper-pagination-bullet {width: 18rem; height: 18rem; margin: 0 5rem; background: var(--gr-gray); border-radius: 100%; box-shadow:var(--inner-shadow-top), var(--inner-shadow-bottom);}
.drawing-slider__controls .swiper-pagination-bullet-active {background: var(--gr-yellow);}
.drawing-slider__btn {position: absolute; bottom: -10rem; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 100rem; height: 100rem; font-family: var(--font-basic); font-weight: 600; color: #fff; background: var(--gr-black); box-shadow:var(--inner-shadow-top), var(--inner-shadow-bottom); border-radius: 100%; transition: .3s;}
.drawing-slider__btn i {display: block; width: 100%; height: 30rem; margin: 2rem 0 8rem; background: url(../images/layout/arrow-next-w.svg) no-repeat center / 30rem;}
.drawing-slider__btn.swiper-button-disabled {opacity: 0; visibility: hidden;}
.drawing-slider__btn.button-prev {left: 40rem;}
.drawing-slider__btn.button-prev i {transform: scaleX(-1);}
.drawing-slider__btn.button-next {right: 40rem;}
.drawing-slider__btn.button-save {opacity: 0; visibility: hidden; right: 155rem; background:var(--gr-green); transition: .3s;}
.drawing-slider__btn.button-save i {height: 35rem; margin: 2rem 0 5rem; background: url(../images/layout/ic-save.svg) no-repeat center / 32rem;}
.drawing-slider__btn.button-finish {opacity: 0; visibility: hidden; right: 40rem; background:radial-gradient(110.31% 110.31% at 25.38% 17.56%, #FF5752 0%, #D72D22 100%); transition: .3s;}
.drawing-slider__btn.button-finish i {height: 35rem; margin: 2rem 0 5rem; background: url(../images/content/ic-check.svg) no-repeat center / 42rem;}
.drawing-slider__controls:has(.button-next.swiper-button-disabled) .drawing-slider__btn:is(.button-save, .button-finish) {opacity: 1; visibility: visible;}

.palette-list-wrap {z-index: 1; opacity: 0; visibility: hidden; position: fixed; left: 0; bottom: 40rem; width: 100%; height: 78%; transition: .3s;}
.palette-list__close {position: absolute; left: 0; top: 0; width: 100%; height: 100%; font-size: 0;}
.palette-list {opacity: 0; visibility: hidden; position: absolute; right: 0; bottom: 0; display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 0 30rem; border-radius: 30rem; background: var(--gr-blue); box-shadow: var(--inner-shadow-top), var(--inner-shadow-bottom); transition: .3s ease-in .1s;}
.palette-list__item {position: relative; margin: 10rem 0; text-align: center;}
.palette-list__item > a {font-family: var(--font-basic); font-weight: 600; font-size: 20rem; color: #fff;}
.palette-list__item > a i {position: relative; overflow: hidden; display: block; width: 80rem; height: 80rem; margin: 0 auto 8rem; padding: 8rem; border-radius: 100%; background: #fff; box-shadow: var(--inner-shadow-top), var(--inner-shadow-bottom); box-sizing: border-box;}
.palette-list__item > a i::after {position: absolute; left: 50%; top: 50%; content: ''; width: 80%; height: 80%; transform: translate(-50%, -50%); background-color: #f0f0f0; background-position: center; background-repeat: no-repeat; background-size: cover; border-radius: 100%;}
.palette-item__opacity {margin-top: 40rem; text-align: left;}
.palette-item__opacity p {color: #fff; font-family: var(--font-basic); font-size: 20rem; font-weight: 600;}
.palette-item__opacity-bar {margin-top: 15rem; color: #fff; font-family: var(--font-basic); font-weight: 600;}
.palette-item__opacity-bar em {display: inline-block; margin-right: 20rem;}
.palette-item__opacity-bar em:last-child {margin-right: 0; margin-left: 20rem;}
.palette-item__opacity-bar p {position: relative; width: 100%; height: 12rem; border-radius: 15rem; background: rgba(255, 255, 255, .1);}
.palette-item__opacity-bar p span {position: absolute; left:0; width: 0; height: 100%; padding-left: 10rem; background: #fff; border-radius: 15rem;}
.palette-item__opacity-bar p span::after {position: absolute; right: 0; top: 50%; content:''; width: 20rem; height: 20rem; border-radius: 100%; border: 4rem solid #eee; background: #aaa; transform: translate(0, -50%);} 


[data-palette="color"] > a div {overflow: hidden; width: 100%; height: 100%; border-radius: 100%; transform: rotate(-45deg);}
[data-palette="color"] > a span {display: block; width: 100%; height: 34%;}
[data-palette="color"] > a span:nth-child(1) {background: #FF4A58;}
[data-palette="color"] > a span:nth-child(2) {background: #FF9900;}
[data-palette="color"] > a span:nth-child(3) {background: #43A904;}
[data-palette="color"] > a i::after {display: none;}
[data-palette="size"] > a span {z-index: 1; position: absolute; left:50%; top: 50%; display: block; width:30rem; height: 30rem; border-radius: 100%; border: 7rem solid #fff; background: var(--g-01); box-shadow: var(--shadow); transform: translate(-50%, -50%);} 
[data-palette="pen"] > a i::after {background-image: url(../images/content/ic-pen.svg);}
[data-palette="eraser"] > a i::after {background-image: url(../images/content/ic-eraser.svg);}
[data-palette="delete"] > a i::after {background-image: url(../images/content/ic-delete.svg);}

.palette-item__inr {opacity: 0; visibility: hidden; z-index: 1; position: absolute; right: 80rem; top: 50%; min-width: 250rem; margin-top: -27rem; padding: 40rem; border-radius: 15rem; background: #212121; box-shadow: var(--shadow); transform: translateY(-50%); transition: .3s ease-in;}
.palette-item__inr::before {position: absolute; right: -10rem; top: 50%; content:''; width: 25rem; height: 25rem; border-radius: 0 0 3rem 0; background: #212121; transform: rotate(-45deg);}
.palette-item__inr ul {gap: 20rem 30rem;}
.palette-item__inr a {position: relative; display: block; width: 70rem; height: 70rem; border-radius: 100%; border: 7rem solid #fff; background: var(--gr-gray2);}
.palette-item__inr a img {width: 100%; transform: rotate(-45deg);}
.palette-item__inr a span {position: absolute; left: 50%; top: 50%; display: block; border-radius: 100%; border: 7rem solid #fff; background: var(--g-01); box-shadow: 1rem 1rem 5rem rgba(0, 0, 0, .1); transform:translate(-50%, -50%);}
.colorpicker-wrap {display: block; width: 70rem; height: 70rem; border-radius: 100%; border: 7rem solid #fff; background: url(../images/content/ic-gradation.jpg) no-repeat center / cover;}
.colorpicker {opacity: 0; width: 100%; height: 100%; border-radius: 100%; border: none;}
.palette-list__item.active > .palette-item__inr {opacity: 1; visibility: visible; right: 115rem;}
.palette-list-wrap.active {opacity: 1; visibility: visible;}
.palette-list-wrap.active .palette-list {opacity: 1; visibility: visible; right: 40rem;}

/* video */
.video-wrap,
.video__inr {height: 100% !important;}
.video-wrap {display: block; padding: 10rem; background: #fff; border-radius: 15rem; box-shadow: var(--inner-shadow-top), var(--inner-shadow-bottom);}
.video__inr {overflow: hidden; position: relative; width: 100%; height: 100%; background: #fafafa; box-shadow: inset 3rem 3rem 10rem rgba(0, 0, 0, .05); border-radius: 10rem;}
.video__inr video {width: 100%; height: 100%; object-fit: contain; object-position: center;}
.video-wrap .btn-next {position: absolute; right: 40rem; bottom: 40rem;}
.video__bar {position: absolute; left:50%; bottom: 10rem; width: 98%; height: 10rem; transform: translateX(-50%); border-radius: 5rem; background: #eee; box-shadow: inset 2rem 2rem 5rem rgba(0, 0, 0, .08);}
.video__bar span {position: absolute; left:0; top: 0; width: 0%; height: 100%; background: var(--gr-blue); border-radius: 5rem; box-shadow: var(--inner-shadow-top), var(--inner-shadow-bottom);}

.btn-video {position: absolute; left:0; top:0; width: 100%; height: 100%;} 
#videoLayer .popup-layer-inner {min-width: auto; padding: 0; border-radius: 0; background: transparent; box-shadow: none;}
#videoLayer ul {transform: scale(1.5);}
#videoLayer a {position: relative; display: block; width: 60rem; height: 60rem; background: #fff; box-shadow: var(--inner-shadow-top), var(--inner-shadow-bottom), var(--shadow); border-radius: 100%;}
#videoLayer a::after {position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background-image: url(../images/layout/ic-next.svg); background-repeat: no-repeat; background-size: 47rem; background-position: 70% 60%;}
#videoLayer a.btn-paus {width: 100rem; height: 100rem; margin: 0 50rem; background:var(--gr-black);}
#videoLayer a.btn-paus::after {background-image: url(../images/layout/ic-pause.svg); background-position: 55% 55%;}
#videoLayer a.btn-paus.play{background:radial-gradient(110.31% 110.31% at 25.38% 17.56%, #FF5752 0%, #D72D22 100%);}
#videoLayer a.btn-paus.play::after {background-image: url(../images/content/ic-sound.svg); background-position: 57% 55%;}

#videoLayer .popup-layer-close {display: none;}
#videoList .popup-layer-inner {left: auto; top: 20rem; right:20rem; width: 700rem; height: calc(100% - 40rem); overflow: auto; min-width: auto; max-height: none; text-align: left; transform: none; border-radius: 20rem; background: linear-gradient(0deg, #efefef 0%, #fff 100%);}
#videoList .popup-layer-inner h2 {line-height: 1.4; font-size: 35rem !important;}
#videoList .popup-layer-close {top: 38rem; right: 95rem;}
#videoList ul {margin-top: 50rem;}
#videoList ul li {margin: 10rem 0;}
#videoList ul a {padding: 40rem; font-size: 25rem; border-radius: 30rem;}
#videoList ul a span {position: relative; padding-top: 4rem; padding-left: 42rem;}
#videoList ul a span::before {position: absolute; left:0; top: 50%; content:''; width: 30rem; height: 20rem; background: url(../images/layout/ic-jump.svg) no-repeat center / contain; transform: translateY(-50%);}

/* sub-content__list */
.sub-content__list {height: 100%;}
.sub-content__list a {position: relative; height: 100%; text-align: center; color: #fff;}
.sub-content__list a svg {position: absolute; left:50%; top: 50%; width: 100%; margin-top: 10rem; transform: translate(-50%, -50%);}
.sub-content__txt {position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center;}
.sub-content__img {max-height: 360rem; margin: -20rem 0 30rem;}
.sub-content__img img {max-width: 100%; max-height: 100%; vertical-align: middle;}

/* play-list-wrap */
.play-list-wrap {margin-top: 200rem; padding-bottom: 30rem;}
.play-list .sub-box {height: 380rem;}
.play-list img {width: 100%; height: 100%; object-fit: cover; border-radius: 40rem;}
.play-list video {width: 100%; height: 100%; object-fit: cover; border-radius: 40rem;}