@charset "utf-8";

/*
* File       : layout.css
* Author     : B-WORKER
* Dependency : css/reset.css
*      
 * SUMMARY:
 * 01) GLOBAL
 * 02) HEADER
 * 03) FOOTER
 * 04) SCROLL TOP
 * 07) SEARCH
 * 08) PRIVACY
 * 09) 404        
*/

/* **************************************** *
 * global root
 * **************************************** */
:root {
	--c-01:#1172d2;
	--b-01: #222;
	--f-01: #fff;
	--g-01: #666;
	--g-02: #aaa;

	--inner-shadow-top: inset 4rem 4rem 8rem rgba(255, 255, 255, .4);
	--inner-shadow-bottom: inset -2rem -3rem 8rem rgba(0, 0, 0, .23);
	--shadow: 3rem 3rem 8rem rgba(0, 0, 0, .05);

	--gr-red:radial-gradient(110.31% 110.31% at 25.38% 17.56%, #FF7866 0%, #FB452C 100%);
	--gr-yellow:radial-gradient(110.31% 110.31% at 25.38% 17.56%, rgba(255,182,41,1) 0%, rgba(255,138,0,1) 100%);
	--gr-gray:radial-gradient(110.31% 110.31% at 25.38% 17.56%, #CBCBCB 0%, #9A9A9A 100%);
	--gr-gray2:linear-gradient(125deg, #F0F0F0 0%, #ddd 100%);
	--gr-black:radial-gradient(110.31% 110.31% at 25.38% 17.56%, #444 0%, #222 100%);
	--gr-green:radial-gradient(110.31% 110.31% at 25.38% 17.56%, #A8E525 0%, #7DB409 100%);
	--gr-purple:radial-gradient(110.31% 110.31% at 25.38% 17.56%, #AE88FF 0%, #8355E5 100%);
	--gr-blue:radial-gradient(110.31% 110.31% at 25.38% 17.56%, #77BEFF 0%, #4398E7 100%);
	
    --trans-01:all 0.5s cubic-bezier(0.215, 0.61, 0.355, 1);
	--trans-02:all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	--trans-03:all 1s cubic-bezier(0.215, 0.61, 0.355, 1);
	--trans-04:all 0.5s ease;

	--font-basic:'Pretendard';

	--font-18:18rem;  
    --font-21:21rem;
    --font-23:23rem;  
}

/* **************************************** *
 * GLOBAL
 * **************************************** */
body{font-size:17rem;overflow-x:hidden;overflow-y:overlay;word-break: keep-all; background: url(../images/layout/bg.jpg) no-repeat center / cover;}
body.scroll-hide{overflow-y:hidden;}
body.scroll-hide #header{position: fixed;}
p{line-height:1.6;}

/* scroll set */
::selection{background: #1172d2c7;color:#fff;}

/* 스크롤바 커스텀 */
/* *::-webkit-scrollbar{width:12rem;}
::-webkit-scrollbar-thumb{background-color:var(--c-01);} */


/* **************************************** *
 * wrapper
 * **************************************** */
 *[class^="wrap"]{overflow: hidden; position:relative; height: 100%;}

 .wrap{margin:0 50rem;}
 .wrap-wide {margin:0 10rem;}
 
/* **************************************** *
 * HEADER
 * **************************************** */
 /* main-header */
 .main-header {position: absolute; left:0; top: 30rem; width: 100%; height: 100rem; display: flex; justify-content: space-between;}
 .main-header .logo img {width: 218rem;}
 .main-header > .month {position: absolute; left: 50%; top: 30rem; transform: translate(-50%, 0); height: 100%;}
 .main-header > .month button {position: relative; display: block; width: 80rem; height: 80rem; margin: 0 30rem; background: transparent;}
 .main-header > .month button::after {position: absolute; left:0; top:0; content:''; width: 100%; height: 100%; background-repeat: no-repeat; background-position: center; background-size: 74rem;background-image: url(../images/layout/main-btn-next.png);}
 .main-header .calendar-prev::after {transform: scaleX(-1);}
 .main-header .main-month {position: relative;}
 .main-header h2 {color: var(--b-01); position: absolute; top: 25%; width: 100%; text-align: center;}
 .main-header .manage {display: flex; gap: 2px;}
 .main-header .manage .child-select{border-radius: 100%; width: 80px; height: 80px;}
 .main-contain {height: 100%; padding: 200rem 0 50rem; box-sizing: border-box;}

 /* sub-header */ 
 #header {position: absolute; top: 28rem !important; width: 100%; z-index: 51;}
 .header-title .btn-logo {position: absolute; left:0; top:0;}
.header-title {position: relative; /*width: calc(100% - 120rem);*/ width: 100%; height: 100rem; font-size: 32rem; color: var(--b-01); transition: .4s ease-in; border-radius: 100rem; background: #fff; box-shadow: var(--inner-shadow-top), var(--inner-shadow-bottom);}
.header-title__inr {opacity: 1; visibility: visible; transition: .5s; transition-delay: .3s;}
.header-title .btn-title {opacity: 1; visibility: visible; padding-left: 140rem; transition: .3s;}
.header-title .btn-title i {position: relative; display: block; width: 30rem; height: 23rem; margin-right:20rem; margin-top: -5rem;}
.header-title .btn-title i span {position: absolute; display: block; width: 100%; height: 3px; border-radius: 3px; background: #ccc;}
.header-title .btn-title i span:first-child {top: 0;}
.header-title .btn-title i span:nth-child(2) {top: 50%; transform: translateY(-50%);}
.header-title .btn-title i span:last-child {bottom: 0;}
.header-title__sound {opacity: 1; visibility: visible; position: absolute; right:20rem; top: 50%; width: 70rem; height: 70rem; font-size: 0; border-radius: 100%; background: url(../images/layout/ic-play.svg) no-repeat center / contain; transform:translateY(-50%); transition: .5s; transition-delay: .3s;}

/* site-custome.js에서 시간 조절*/
/* .header-title.hide {width: 0;} */
.header-title.hide .header-title__inr,
.header-title.hide .header-title__inr .btn-title,
/* .header-title.hide .header-title__sound {opacity: 0; visibility: hidden;} */

/* .header-title.on {width: calc(100% - 120rem);} */
.header-title.on .header-title__inr,
.header-title.on .header-title__inr .btn-title,
.header-title.on .header-title__sound {opacity: 1; visibility: visible;}

body:has(.drawing-wrap) #header {top: 50rem;}

/* header-popup */
#header-layer ul a {display: flex; align-items: center; justify-content: center; min-width: 320rem; height: 90rem; margin: 0 8rem; color: #fff; font-size: 29rem; border-radius: 20rem; box-shadow: var(--inner-shadow-top), var(--inner-shadow-bottom); text-shadow: var(--shadow); background: var(--gr-black);}
#header-layer ul img {display: block; margin-right: 10rem;}
#header-layer ul li:first-child a {background: var(--gr-red);}

/* header-info */
#header-info .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;}
#header-info .popup-layer-inner h2 {line-height: 1.4; font-size: 35rem !important; color: var(--g-02);}
#header-info .popup-layer-inner h2 strong {display: block; color: var(--b-01);}
#header-info .popup-layer-close {top: 60rem; right: 95rem;}
.header-info__box {margin: 20rem 0 80rem; padding: 60rem 30rem 50rem; text-align: center; background: var(--gr-purple); box-shadow: var(--inner-shadow-top), var(--inner-shadow-bottom); border-radius: 40rem;}
.header-info__box i {display: block; width: 60rem; height: 60rem; margin: 0 auto 20rem; border-radius: 60rem; background: #4B17BD url(../images/layout/ic-star.svg) no-repeat 60% 60% / 40rem;}
.header-info__box h3 {line-height: 1.4; font-size: 35rem; color:#fff; text-shadow: var(--shadow);}
.header-info__list h4 {position: relative; margin-bottom: 25rem; padding-left: 32rem; font-size: 27rem; color: var(--b-01);}
.header-info__list h4::before {position: absolute; left: 0; top: 11rem; content:''; width: 18rem; height: 5rem; background: #8C60EA; border-radius: 5rem;}
.header-info__list ul {gap: 15rem; mix-blend-mode:multiply}
.header-info__list a {display: block; padding: 35rem 30rem; color: var(--g-01); font-family: var(--font-basic); font-weight: 600; font-size: 24rem; border-radius: 10rem; background: #F1F1F6;}
.header-info__list a span {padding-left: 40rem; background: url(../images/layout/ic-list.svg) no-repeat left center / 25rem;}


/* **************************************** *
 * SITE COSTOM
 * **************************************** */
/* button */
.btn-logo {position: relative; display: block; width: 92rem; height: 151rem;}
.btn-logo::after {position: absolute; left:0; top:-27px; content:''; width: 100%; height: 100%; background: url(../images/layout/ic-home-act.svg) no-repeat center / 85rem;}
.btn-logo span{position: absolute; bottom: 40px; left: 13px; color: #fff; z-index: 2;}

.btn-logo-act {position: relative; background: url(../images/layout/ic-home-act.svg) no-repeat center / 60rem;}

.btn-prev {position: relative; display: block; width: 100rem; height: 100rem; border-radius: 100%; background: #fff; box-shadow: var(--inner-shadow-top), var(--inner-shadow-bottom);}
.btn-prev::after {position: absolute; left: 0; top: 0; content:''; width: 100%; height: 100%; background-image: url(../images/layout/arrow-next.svg); background-repeat: no-repeat; background-position: center; background-size: 45rem; transform: scaleX(-1);}

.btn-palette {z-index: 1; opacity: 1; visibility: visible; position: absolute; top: 50%; right: 0; width: 100rem; height: 170rem; font-size: 0; border-radius: 85rem 0 0 85rem; transform: translateY(-50%); box-shadow: var(--inner-shadow-top), var(--inner-shadow-bottom); background: var(--gr-blue); transition: .3s ease-in;}
.btn-palette::after {position: absolute; left: 24rem; top: 50%; content:''; width: 65rem; height: 65rem; background: url(../images/layout/ic-palette.svg) no-repeat center / contain; transform: translate(0, -50%);}
.btn-palette.hide {opacity: 0; visibility: hidden; right: -50rem;}

.btn-next {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: #80D959; box-shadow:var(--inner-shadow-top), var(--inner-shadow-bottom); border-radius: 100%; transition: .3s;}
.btn-next i {display: block; width: 100%; height: 30rem; margin: 2rem 0 8rem; background: url(../images/layout/arrow-next-w.svg) no-repeat center / 30rem;}
.btn-save {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: #FF5053; box-shadow:var(--inner-shadow-top), var(--inner-shadow-bottom); border-radius: 100%; transition: .3s;}
.btn-save i {display: block; width: 100%; height: 30rem; margin: 2rem 0 8rem; background: url(../images/layout/arrow-next-w.svg) no-repeat center / 30rem;}

.btn-play {position: relative; display: inline-flex; align-items: center; width: 230rem; padding: 15rem; font-size: 29rem; color: #444; border-radius: 80rem; background: var(--gr-gray2); box-shadow: var(--inner-shadow-top), var(--inner-shadow-bottom);}
.btn-play audio {opacity: 0; position: absolute; left:0; top:0; width: 100%; height: 100%;}
.btn-play i {position: relative; display: block; width: 60rem; height: 60rem; margin-right: 20rem; border-radius: 100%; background: var(--gr-blue); box-shadow: var(--inner-shadow-top), var(--inner-shadow-bottom);}
.btn-play i::after {position: absolute; left:0; top: 0; content:''; width: 100%; height: 100%; background: url(../images/content/ic-sound.svg) no-repeat 60% center / 32rem;}
.btn-play span {padding-top: 4rem;}