@charset "UTF-8";

/* ---------------- 01 비주얼 */
#home.sections.section_01{ background: var(--color-sub) url(../img/bg_01.png) no-repeat 50% 50% / cover;}
#home.sections.section_01:before{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%;  background: radial-gradient(at 9.2% 73.7%, var(--color-k) 0px, transparent 50%), radial-gradient(at 92.3% 7.6%, var(--color-k) 0px, transparent 50%);}
#home.sections.section_01:before{ background: url(../img/cover_dot.png) var(--color-k-050) repeat 0 0 / 4px;}
/* 비디오 컨테이너*/
/* #home.sections.section_01 .video_box{ position: relative; width: 100%; height: 100vh;}
#home.sections.section_01 .video_box:after{ display: inline-block; position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/cover_dot.png) var(--color-k-050) repeat 0 0 / 4px; opacity: .65;}
#local_video{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover;} */

#home.sections.section_01 .width_con{ padding-top: var(--mrgn-x16);}
#home.sections.section_01 .width_con ul.v_con li.cells.box{}
#home.sections.section_01 .width_con ul.v_con li.cells.box:nth-child(1){ background: var(--color-k) url(../img/bg_06.jpg) no-repeat 0 -120px / 1500px;}
#home.sections.section_01 .width_con ul.v_con li.cells.box:nth-child(2){ background: var(--color-k) url(../img/bg_06.jpg) no-repeat 20% 0px / 1500px; margin-top: -120px;}
#home.sections.section_01 .width_con ul.v_con li.cells.box:nth-child(3){ background: var(--color-k) url(../img/bg_06.jpg) no-repeat 36% -50px / 1500px; margin-top: -60px;}


/* ---------------- 02 레슨차트프로 */
#lessonchart.sections.section_02{ position: relative;}
#lessonchart.sections.section_02 > .fixed_bg{ background: var(--color-k) url(../img/bg_07.jpg) no-repeat 50% 50% / cover;  opacity: .5;}
/* #lessonchart.sections.section_02 > .fixed_bg:before{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: var(--color-point-01); opacity: .5; -webkit-mix-blend-mode: overlay; mix-blend-mode: overlay;} */

#lessonchart.sections.section_02 .width_con{}
#lessonchart.sections.section_02 .width_con .title_con{}
#lessonchart.sections.section_02 .width_con ul.v_con li.cells{}
#lessonchart.sections.section_02 .width_con ul.v_con li.cells span{ color: var(--color-w); font-size: 7em; font-weight: 700; margin-top: 20%;}
#lessonchart.sections.section_02 .width_con ul.v_con li.cells h4{ color: var(--color-w-075); font-weight: 700;}
#lessonchart.sections.section_02 .width_con .title_con h5{ padding: 0 200px;}


/* ---------------- 04 why */
#lesson.sections.section_04{ background: var(--color-g-f3);}
#lesson.sections.section_04 .width_con{}
#lesson.sections.section_04 .width_con .banner span{ color: var(--color-k-075);}
#lesson.sections.section_04 .width_con .title_con{}
#lesson.sections.section_04 .width_con .title_con h3{ position: relative; display: inline-flex; align-items: flex-end; font-weight: 600;}
#lesson.sections.section_04 .width_con .title_con h3 b{ position: relative; font-size: 2em; line-height: 1; display: inline-block; margin-bottom: -8px;}
#lesson.sections.section_04 .width_con .title_con h3 b:before{  position: absolute; content: ''; top: -15px; left: 40%; width: 8px; height: 8px; background: var(--color-point-01); border-radius: 50%; opacity: .6; transform: translateX(-50%); transition: all 250ms ease-out, left 0ms; animation: pingpong 1700ms ease-in-out infinite; animation-delay: 0s;}
@keyframes pingpong{
0%{   transform: translateY( 0%); opacity: .6; scale:   1;}
50%{  transform: translateY(35%); opacity:  1; scale: 0.9;}
100%{ transform: translateY( 0%); opacity: .6; scale:   1;}
}
#lesson.sections.section_04 .width_con .title_con h3 b:nth-child(1):before{ animation-delay: 0s;}
#lesson.sections.section_04 .width_con .title_con h3 b:nth-child(2):before{ animation-delay: 250ms;}
#lesson.sections.section_04 .width_con .title_con h3 b:nth-child(3):before{ animation-delay: 500ms;}


.hover_card{ position: relative; width: 100%; height: 100%; padding: var(--mrgn-x2); overflow: hidden;transition: all 300ms ease; color: var(--color-k);}
.hover_card:hover .sub_title{ opacity: 1; height: auto;}
.hover_card:hover .title{ padding-bottom: 30px; font-size: 2.5em;}
.hover_card:hover .body{ opacity: 1;}
.hover_card:hover .icon{ opacity: 0;  height: 0;}
.hover_card:hover .img_box{ filter: blur(15px);}

.hover_card > .img_box{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; transition: background 300ms, filter 300ms; overflow: hidden; z-index: -1; opacity: .85;}
.hover_card > .sub_title{ height: 0; overflow-y: hidden; opacity: 0; transition: opacity 300ms, height 300ms;}
.hover_card > .title{ margin: 0 0 20px; transition: font-size 300ms, line-height 300ms;}
.hover_card > .icon{ overflow-y: hidden; transition: height 300ms, opacity 300ms;}
.hover_card > .body{ margin: 0; opacity: 0; transition: opacity 300ms;}

.hover_card .img_box:before{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(270deg, transparent, var(--color-w-085)); pointer-events: none;}

.hover_card.card_01 .img_box{ background: url(../img/img_why_01.webp) no-repeat 50% 50% / cover;}
.hover_card.card_02 .img_box{ background: url(../img/img_why_02.webp) no-repeat 50% 50% / cover;}
.hover_card.card_03 .img_box{ background: url(../img/img_why_03.webp) no-repeat 50% 50% / cover;}
.hover_card.card_04 .img_box{ background: url(../img/img_why_04.webp) no-repeat 50% 50% / cover;}


/* ---------------- 03 배너_01 */
#banner_01.sections.section_03{ background: var(--color-sub);}
#banner_01.sections.section_03 .width_con{ padding: var(--mrgn-x4);}
#banner_01.sections.section_03 .width_con .banner{}
#banner_01.sections.section_03 .width_con .banner span{ font-size: 1.45em;}
#banner_01.sections.section_03 .width_con .banner b{}
/* ---------------- 05 배너_02 */
#banner_02.sections.section_05{ background: var(--color-sub);}
#banner_02.sections.section_05 .width_con{ padding: var(--mrgn-x4);}
#banner_02.sections.section_05 .width_con .banner{}
#banner_02.sections.section_05 .width_con .banner span{ font-size: 1.45em;}
#banner_02.sections.section_05 .width_con .banner b{}


/* ---------------- 06 올시즌 */
#olseason.sections.section_06{ background: var(--color-g-f3);}
#olseason.sections.section_06 .width_con{}
#olseason.sections.section_06 .width_con ul.v_con{}
#olseason.sections.section_06 .width_con ul.v_con > li.cells{}
#olseason.sections.section_06 .width_con ul.v_con > li.cells > .logo{ color: var(--color-k-075); font-size: 1.2em; font-weight: 500; line-height: 1.75em; text-align: right;}
#olseason.sections.section_06 .width_con ul.v_con > li.cells > .logo b{ color: var(--color-k); font-size: 2em; font-weight: 700;}
#olseason.sections.section_06 .width_con ul.v_con > li.cells > .logo p{ margin-right: 100px; color: var(--color-k-075);}
#olseason.sections.section_06 .width_con ul.v_con > li.cells > .title{ font-size: 2em; font-weight: 600; line-height: 1.25em;  color: var(--color-k); padding-bottom: var(--mrgn-x4);}

#olseason.sections.section_06 .hover_card{}
#olseason.sections.section_06 .hover_card > .body{ margin-top: 500px; opacity: 0; transition: opacity 300ms; line-height: 30px;}
#olseason.sections.section_06 .hover_card:hover > .body{ opacity: 1;}

#olseason.sections.section_06 .hover_card.card_01 .img_box{ background: url(../img/img_olseason_01.webp) no-repeat 50% 50% / cover;}
#olseason.sections.section_06 .hover_card.card_02 .img_box{ background: url(../img/img_olseason_02.webp) no-repeat 50% 50% / cover;}
#olseason.sections.section_06 .hover_card.card_03 .img_box{ background: url(../img/img_olseason_03.webp) no-repeat 50% 50% / cover;}

#olseason.sections.section_06 .width_con ul.v_con.three_con > li.cells { opacity: 1; filter: blur(0); transform: translateY(-40px);}
#olseason.sections.section_06.wait_scroll .width_con ul.v_con.three_con > li.cells { opacity: 0;  filter: blur(4px); transform: translateY(0); transition: opacity 900ms ease-out, transform 900ms ease-out;}
#olseason.sections.section_06.wait_scroll .width_con ul.v_con.three_con > li.cells:nth-child(1) { transition-delay: 500ms;} 
#olseason.sections.section_06.wait_scroll .width_con ul.v_con.three_con > li.cells:nth-child(2) { transition-delay: 700ms;}
#olseason.sections.section_06.wait_scroll .width_con ul.v_con.three_con > li.cells:nth-child(3) { transition-delay: 900ms;}


/* ---------------- 07 문의하기 */
#contact.sections.section_07{ background: var(--color-k) url(../img/bg_05.jpg) no-repeat 50% 50% / cover;}
#contact.sections.section_07:before{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(90deg, transparent 10%, var(--color-k-085) 80%); pointer-events: none;}
/* #contact.sections.section_07:after{ position: absolute; content: ''; top: 0; left: 0; width: 100%; height: 100%; background: url(../img/cover_dot.png) repeat 0 0 / 4px; opacity: .35; z-index: 1; pointer-events: none;} */
#contact.sections.section_07 ul.v_con .title_con{ position: relative; z-index: 10;}
#contact.sections.section_07 ul.v_con .title_con h3{ color: var(--color-w); font-size: 2em; font-weight: 600; line-height: 1.25em;}
#contact.sections.section_07 ul.v_con .title_con h3:before,
#contact.sections.section_07 ul.v_con .title_con h3:after{ position: absolute; content: ''; left: 0; width: var(--mrgn-x2); aspect-ratio: 1/1; background: url(../img/format_quote.svg) no-repeat 50% 50% / cover; }
#contact.sections.section_07 ul.v_con .title_con h3:before{ top: calc(var(--mrgn-x2) * -1);}
#contact.sections.section_07 ul.v_con .title_con h3:after{ bottom: calc(var(--mrgn-x2) * -1); transform: rotate(180deg);}

#contact.sections.section_07 ul.v_con .title_con h4{ color: var(--color-w-085); line-height: 1.25em; padding-top: var(--mrgn-x4);}