@charset "utf-8";

section h5 { color: #333; font-size: 32px; line-height: 2; font-weight: 500; text-align: center; }
section h3 { font-size: 50px; line-height: 1.2; font-weight: 300; text-align: center; }
section h3 span { display: inline-block; color: #1A73E8; font-weight: 800; box-shadow: inset 0 -12px 0 #1A73E833 } 
.subtitle { position: relative; width: fit-content; margin: 0 auto 24px; padding: 14px 28px; background: #fff; font-size: 22px; line-height: 1.2; box-shadow: 0px 4px 15px 0px #00000026; border-radius: 100px; }
.subtitle:after { position: absolute; bottom: -13px; left: 50%; display: block; content:''; clear: both; width: 0; height: 0; border-left: 9px solid transparent; border-right: 9px solid transparent; border-top: 18px solid #fff; transform: translateX(-50%); }
.subtitle span { color: #1A73E8; font-weight: 700; }

.elem-slide-prev { top: calc(50% - 70px); left: 22px;  width: 44px; height: 44px; border: 1px solid #ccc; border-radius: 100%; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="15" fill="none"><path fill="%23222" fill-rule="evenodd" d="M9.414 13.586 8 15 2.343 9.343.93 7.93l1.414-1.414L8 .858l1.414 1.414L3.757 7.93l5.657 5.657Z" clip-rule="evenodd"/></svg>')no-repeat center / auto 14px; background-color: #fff; }
.elem-slide-next { top: calc(50% - 70px); right: 22px; width: 44px; height: 44px; border: 1px solid #ccc; border-radius: 100%; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="15" fill="none"><path fill="%23222" fill-rule="evenodd" d="M.586 13.586 2 15l5.657-5.657L9.07 7.93 7.657 6.515 2 .858.586 2.272 6.243 7.93.586 13.586Z" clip-rule="evenodd"/></svg>')no-repeat center / auto 14px; background-color: #fff; }


/* visual */
.elem-visual { margin-top: 96px; padding: 224px 0; position: relative; background: url('../images/web/sub/elem/elem_visual-bg.png')no-repeat center; }
.elem-visual h4 { width: fit-content; margin: 0 auto 24px; color: #aaa; font-size: 50px; font-family: 'GmarketSans'; font-weight: 700; line-height: 1.15; letter-spacing: -0.08em; }
.elem-visual h2 { width: fit-content; margin: 0 auto; color: #4183FE; font-size: 120px; font-family: 'GmarketSans'; font-weight: 700; line-height: 1; letter-spacing: -0.08em; text-align: center; }
.elem-visual > p { margin: 24px auto 28px; color: #fff; font-size: 28px; font-weight: 500; text-align: center; }
.elem-visual b { display: block; width: fit-content; margin: 0 auto; padding: 0 22px; background: #4183FE; color: #fff; font-size: 20px; font-weight: 800; line-height: 44px; box-shadow: 0px 6px 15px 0px rgba(0,0,0,0.15); border-radius: 100px; } 


/* concern */
.concern { position: relative; padding-top: 120px; background: #4183FE; }
.concern h3 { position: relative; margin-bottom: 38px; color: #fff; font-weight: 300; z-index: 1; }
.concern h3 span { color: #FFEB00; font-weight: 800; box-shadow: inset 0 -12px 0 rgba(255,255,255,0.1) }
.concern h5:before { display: block; content:''; clear: both; width: 6px; height: 38px; margin: 0 auto 20px; background: url('../images/web/sub/elem/dot.png')no-repeat center; } 
.concern h5 { position: relative; margin-bottom: 90px; color: #fff; font-size: 30px; font-weight: 400; line-height: 1.2; z-index: 2; }
.concern h5 span { color: #FFEB00; font-weight: 600; }
.concern h5 b { font-weight: 600; }
.concern:before { position: absolute; left: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #F5F5F5; border-radius: 0 100px 0 0; z-index: 2; }
.concern:after { position: absolute; right: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #F5F5F5; border-radius: 0 100px 0 0; transform: scaleX(-1); z-index: 2; }  
.concern .bg { position: relative; width: fit-content; margin: 0 auto; text-align: center; z-index: 1; }
.concern .bg:before { position: absolute; bottom: 0; left: calc(50% - 82px); transform: translateX(-50%); display: block; content:''; clear: both; width: 998px; height: 720px; background: url('../images/web/sub/elem/concern_bg-shadow.png')no-repeat bottom center; z-index: 0; }
.concern .bg img { position: relative; left: calc(50% - 187px);  transform: translateX(-50%); z-index: 1; }
.concern .bg p { position: absolute; width: fit-content; margin: 0 auto; padding: 16px 28px; font-size: 24px; font-weight: 700; line-height: 1.2; box-shadow: 0px 7.78px 18.68px 0px rgba(0,0,0,0.15); border-radius: 100px; } 
.concern .bg p:nth-of-type(1) { left: -53px; bottom: calc(50% + 143px); background: #222; color: #fff; transform: translateY(-50%); z-index: 2; }
.concern .bg p:nth-of-type(1):after { position: absolute; bottom: -12px; right: 48px; display: block; content:''; clear: both; width: 0; height: 0; border-top: 7px solid #222; border-right: 7px solid #222; border-bottom: 7px solid transparent; border-left: 7px solid transparent; } 
.concern .bg p:nth-of-type(2) { left: -173px; bottom: calc(50% - 5px); background: #fff; color: #333; transform: translateY(-50%); z-index: 2; }
.concern .bg p:nth-of-type(2):after { position: absolute; bottom: -12px; right: 168px; display: block; content:''; clear: both; width: 0; height: 0; border-top: 7px solid #fff; border-right: 7px solid #fff; border-bottom: 7px solid transparent; border-left: 7px solid transparent; } 
.concern .bg p:nth-of-type(3) { right: -200px; bottom: calc(50% - 5px); background: #222; color: #fff; transform: translateY(-50%); z-index: 2; }
.concern .bg p:nth-of-type(3):after { position: absolute; bottom: -12px; right: 112px; display: block; content:''; clear: both; width: 0; height: 0; border-top: 7px solid #222; border-right: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 7px solid #222; } 
.concern .bg p:nth-of-type(4) { right: -210px; bottom: calc(50% + 143px); background: #fff; color: #333; transform: translateY(-50%); z-index: 2; }
.concern .bg p:nth-of-type(4):after { position: absolute; bottom: -12px; right: 44px; display: block; content:''; clear: both; width: 0; height: 0; border-top: 7px solid #fff; border-right: 7px solid transparent; border-bottom: 7px solid transparent; border-left: 7px solid #fff; } 


/* habit */
.habit { position: relative; padding: 80px 0 128px; background: #F5F5F5; }
.habit:before { position: absolute; left: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #fff; border-radius: 0 100px 0 0; z-index: 2; }
.habit:after { position: absolute; right: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #fff; border-radius: 0 100px 0 0; transform: scaleX(-1); z-index: 2; }  
.habit h5 { line-height: 2; font-weight: 700; } 
.habit h3 span { font-weight: 700; margin-bottom: 52px; }

.habit .instance { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 20px; width: 100%; max-width: 1196px; margin: 0 auto; }
.habit .instance li { display: flex; justify-content: center; align-items: center; padding: 48px 0; background: #fff; border-radius: 24px; border: 1px solid #ddd; } 
.habit .instance li b { display: block; width: fit-content; margin: 0 auto; padding: 4px 20px; background: #1A73E8; color: #fff; font-size: 18px; line-height: 1.7778; border-radius: 100px; }
.habit .instance li em { display: block; width: fit-content; margin: 14px auto 8px; color: #292B3B; font-size: 30px; line-height: 1.2; font-weight: 700; } 
.habit .instance li p { margin: 0 auto 26px; color: #777; font-size: 20px; line-height: 1.5; text-align: center; }


/* learning */
.learning { position: relative; padding: 80px 0 128px; background: #fff; }
.learning:before { position: absolute; left: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #EFF6FE; border-radius: 0 100px 0 0; z-index: 2; }
.learning:after { position: absolute; right: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #EFF6FE; border-radius: 0 100px 0 0; transform: scaleX(-1); z-index: 2; }  
.learning h5 { line-height: 2; font-weight: 700; } 
.learning h3 span { font-weight: 700; margin-bottom: 52px; }

.learning .instance { display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 20px; width: 100%; max-width: 1196px; margin: 0 auto; }
.learning .instance li { display: flex; justify-content: center; align-items: center; padding: 48px 0; background: #F5F5F5; border-radius: 24px; border: 1px solid #ddd; } 
.learning .instance li b { display: block; width: fit-content; margin: 0 auto; padding: 4px 20px; background: #1A73E8; color: #fff; font-size: 18px; line-height: 1.7778; border-radius: 100px; }
.learning .instance li em { display: block; width: fit-content; margin: 14px auto 8px; color: #292B3B; font-size: 30px; line-height: 1.2; font-weight: 700; } 
.learning .instance li p { margin: 0 auto 24px; color: #777; font-size: 20px; line-height: 1.5; text-align: center; }


/* program common */
.tab-box-wrap { display: flex; justify-content: center; width: 100%; margin: 0 auto; }
.tab-inner { width: 100%; max-width: 1196px; margin: 52px auto 0; }
.tab-box { display: grid; grid-template-columns: repeat(3, 1fr); justify-content: center; align-items: flex-end; width: 100%; border-radius: 8px 8px 0 0; }
.tab-box li .tab-btn {  position: relative; display: flex; justify-content: center; align-items: center; width: 100%; background: #36384D; color: #fff; font-size: 24px; line-height: 3; }
.tab-box li:first-child .tab-btn { border-radius: 8px 0 0 0; }
.tab-box li:last-child .tab-btn { border-radius: 0 8px 0 0; }
.tab-box li .tab-btn.on { position: relative; background: #1a73e8; color: #fff; line-height: 90px; border-radius: 12px 12px 0 0;}
.tab-box li .tab-btn.on:after { position: absolute; bottom: 0; right: -32px; display: block; content:''; clear: both; width: 32px; height: 32px; background: url('../images/web/sub/kids/tab_subtract.png')no-repeat center; }

.tab-content { padding: 60px 46px; background: #fff; border: 1px solid #ddd; border-top: none; border-radius: 0 0 16px 16px; }
.tab-content ul li p { margin: 0 auto; color: #777; font-size: 20px; line-height: 1.5; text-align: center; } 
.tab-content .contents-inner ul { display: grid; grid-column-gap: 20px; } 
.tab-content .contents-inner li { padding: 48px; border-radius: 16px; }
.tab-content h6 { display: block; width: fit-content; margin: 36px auto 16px; color: #1A73E8; font-size: 34px; line-height: 1.2; font-weight: 700; box-shadow: inset 0 -10px 0 #1A73E833 } 
.tab-content .tab-desc { margin: 0 auto; color: #777; font-size: 20px; line-height: 1.5; text-align: center; }
.tab-content .tab-desc b { color: #333; }
/* program-math */
.program-math { position: relative; padding: 80px 0 128px; background: #EFF6FE; }
.program-math:before { position: absolute; left: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #fff; border-radius: 0 100px 0 0; z-index: 2; }
.program-math:after { position: absolute; right: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #fff; border-radius: 0 100px 0 0; transform: scaleX(-1); z-index: 2; }  

.program-math .tab-box { grid-template-columns: repeat(4, 1fr); }
.program-math .tab-content { background: #fff; }
.program-math .tab-content .contents-inner ul { grid-template-columns: repeat(3, 1fr); } 
.program-math .tab-content ul li { display: flex; flex-direction: column; grid-row-gap: 24px; justify-content: space-between; align-items: center; background: #F5F5F5; }
.program-math .tab-content ul li .list-index { display: block; width: fit-content; margin: 0 auto; padding: 4px 20px; background: #1A73E8; color: #fff; font-size: 18px; line-height: 1.7778; border-radius: 100px; } 
.program-math .tab-content ul li .title { display: block; width: fit-content; margin: 14px auto 6px; color: #333; font-size: 30px; line-height: 1.2; font-weight: 700; } 
.program-math .tab-content ul li b { color: #333; font-size: 30px; line-height: 1.2; text-align: center; }
.program-math .tab-content ul li em { display: block; margin-bottom: 6px; color: #1A73E8; font-size: 22px; line-height: 1.363; font-weight: 700; } 
.program-math .tab-content ul li .item { border-radius: 12px; box-shadow: 0px 5.89px 14.13px 0px #00000026; }
.program-math .tab-content .contents-inner:nth-of-type(4) ul { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 20px; grid-row-gap: 20px; }
.program-math .tab-content .contents-inner:nth-of-type(4) ul li { flex-direction: row; justify-content: space-between; padding: 34px; background: #fff; border: 1px solid #ddd; }
.program-math .tab-content .contents-inner:nth-of-type(4) ul li .list-index { margin: 0 0 8px; }
.program-math .tab-content .contents-inner:nth-of-type(4) ul li b { line-height: 1.333; }


/* program-big */
.program-big { position: relative; padding: 80px 0 175px; background: #fff; }
.program-big:before { position: absolute; left: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #EFF6FE; border-radius: 0 100px 0 0; z-index: 2; }
.program-big:after { position: absolute; right: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #EFF6FE; border-radius: 0 100px 0 0; transform: scaleX(-1); z-index: 2; }  
.program-big .tab-box { grid-template-columns: repeat(4, 1fr); }
.program-big .tab-content { position: relative; background: #F5F5F5; overflow: hidden;  }
.program-big .tab-content .contents-inner ul { grid-template-columns: repeat(3, 1fr); }
.program-big .tab-content .contents-inner ul li { background: #fff; }

.program-big .tab-content .contents-inner .instance li { display: flex; flex-direction: row-reverse; flex-wrap: wrap; align-items: flex-start; grid-row-gap: 50px; justify-content: space-between; padding: 48px; }
.program-big .tab-content .contents-inner .instance .desc { width: 100%; }
.program-big .tab-content .contents-inner .instance li em { display: block; margin: 0 0 8px; color: #333; font-size: 30px; line-height: 1.333; font-weight: 700; } 
.program-big .tab-content .contents-inner .instance li p { margin: 0; text-align: left; }

.inner02-slide { position: relative; width: 100%; max-width: 1104px; overflow: hidden; }
.inner02-slide .swiper-slide { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; padding: 40px 0; background: #fff; border-radius: 16px; }
.inner02-slide .swiper-slide .list-index { display: block; width: fit-content; margin: 0 auto 12px; padding: 4px 20px; background: #1A73E8; color: #fff; font-size: 18px; line-height: 1.7778; border-radius: 100px; }
.inner02-slide .swiper-slide p { margin: 0 auto 24px; color: #777; font-size: 20px; line-height: 1.5; text-align: center; } 

.program-big .tab-content .contents-inner .purpose { display: grid; grid-template-columns: repeat(2, 1fr); grid-column-gap: 20px; grid-row-gap: 20px; }
.program-big .tab-content .contents-inner .purpose li { display: flex; flex-direction: row; justify-content: space-between; align-items: center; padding: 34px; }
.program-big .tab-content .contents-inner .purpose li .list-index { display: block; width: fit-content; padding: 4px 20px; background: #999; color: #fff; font-size: 18px; line-height: 1.7778; border-radius: 100px; }
.program-big .tab-content .contents-inner .purpose li em { display: block; margin: 8px 0; color: #333; font-size: 30px; line-height: 1.3333; font-weight: 700; }
.program-big .tab-content .contents-inner .purpose img { width: 96px; height: 96px; }

.program-big .tab-content .contents-inner .pros li .list-index { display: block; width: fit-content; margin: 0 auto; padding: 4px 20px; background: #1A73E8; color: #fff; font-size: 18px; line-height: 1.7778; border-radius: 100px; } 
.program-big .tab-content .contents-inner .pros li .title { display: block; width: fit-content; margin: 14px auto 6px; color: #333; font-size: 30px; line-height: 1.2; font-weight: 700; }
.program-big .tab-content .contents-inner .pros li p { margin: 0 auto 26px; }


/* program-elem */
.program-elem { position: relative; padding: 80px 0 128px; background: #EFF6FE; }
.program-elem:before { position: absolute; left: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #36384C; border-radius: 0 100px 0 0; z-index: 2; }
.program-elem:after { position: absolute; right: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #36384C; border-radius: 0 100px 0 0; transform: scaleX(-1); z-index: 2; } 
.program-elem .tab-box { grid-template-columns: repeat(3, 1fr); }
.program-elem .tab-content { position: relative; background: #fff; overflow: hidden;  }


.elem-smartall { position: relative; width: 100%; max-width: 1104px; overflow: hidden; }
.elem-smartall .swiper-slide { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; padding: 48px 0; background: #f5f5f5; border-radius: 16px; }
.elem-smartall .swiper-slide .list-index { display: block; width: fit-content; margin: 0 auto; padding: 4px 20px; background: #1A73E8; color: #fff; font-size: 18px; line-height: 1.7778; border-radius: 100px; }
.elem-smartall .swiper-slide .title { display: block; width: fit-content; margin: 14px auto 6px; color: #333; font-size: 30px; line-height: 1.2; font-weight: 700;  }
.elem-smartall .swiper-slide p { margin: 0 auto 24px; color: #777; font-size: 20px; line-height: 1.5; text-align: center; } 

.program-elem .content { grid-template-columns: repeat(2, 1fr); align-items: center; }
.program-elem .content  li { display: flex; align-items: center; flex-wrap: wrap; flex-direction: column; grid-row-gap: 24px; padding: 48px 0 40px; background: #f5f5f5; }
.program-elem .content .title { display: block; width: fit-content; margin: 0 auto 18px; padding: 10px 32px; background: #1A73E8; color: #fff; font-size: 28px; line-height: 1.2; border-radius: 100px; } 

.elem-system { position: relative; width: 100%; max-width: 1104px; overflow: hidden; }
.elem-system .swiper-slide { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; padding-top: 48px; background: #f5f5f5; border-radius: 16px; }
.elem-system .swiper-slide .list-index { display: block; width: fit-content; margin: 0 auto; padding: 4px 20px; background: #1A73E8; color: #fff; font-size: 18px; line-height: 1.7778; border-radius: 100px; }
.elem-system .swiper-slide em { display: block; width: fit-content; margin: 14px auto 10px; color: #333; font-size: 30px; line-height: 1.2; font-weight: 700;  }
.elem-system .swiper-slide p { margin: 0 auto 12px; color: #777; font-size: 20px; line-height: 1.5; text-align: center; } 

/*
.learning { position: relative; padding: 80px 0 120px; background: #fff; }
.learning:before { position: absolute; left: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #fff; border-radius: 0 100px 0 0; z-index: 2; }
.learning:after { position: absolute; right: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #fff; border-radius: 0 100px 0 0; transform: scaleX(-1); z-index: 2; }  
.learning h5 { line-height: 2; font-weight: 300; } 
.learning h3 span { margin-bottom: 52px;  line-height: 1.28; }
.learning .instance { display: flex; grid-column-gap: 24px; width: 100%; max-width: 1196px; margin: 0 auto; }
.learning .instance li { width: calc(50% - 12px); background: #fff; border-radius: 16px; } 
.learning .instance li .type { display: flex; align-items: center; justify-content: center; padding: 30px 0; border-radius: 16px 16px 0 0; }
.learning .instance li .type p { display: flex; grid-column-gap: 8px; align-items: center; color: #fff; font-size: 24px; line-height: 1.333; font-weight: 700; }
.learning .instance li .content { position: relative; display: flex; align-items: center; justify-content: center; padding: 42px 0; border-radius: 0 0 16px 16px; }
.learning .instance li .content::after { position: absolute; top: 50%; left: 50%; display: block; content:''; clear: both; width: 376px; height: 376px; background: #f1f1f1; border-radius: 100%; transform: translate(-50%, -50%); }
.learning .instance li .content > li { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 160px; height: 160px; padding: 0 32px; color: #fff; font-size: 20px; letter-spacing: -0.05em; line-height: 1.2; text-align: center; border-radius: 100%; z-index: 2; }


.learning .instance li:nth-of-type(1) .type { background: #999; }
.learning .instance li:nth-of-type(1) .type p:after { display: inline-flex; justify-content: center; align-items: center; content:''; clear: both; width: 32px; height: 32px; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="none"><mask id="a" width="25.456" height="25.456" x="-4.615" y="-4.728" fill="%23000" maskUnits="userSpaceOnUse"><path fill="%23fff" d="M-4.615-4.728h25.456v25.456H-4.615z"/><path fill-rule="evenodd" d="M3.085 1.714 1.828 2.97 6.858 8l-5.03 5.03 1.257 1.256 5.03-5.03 5.027 5.028 1.257-1.257L9.37 8 14.4 2.972l-1.257-1.257-5.028 5.028-5.029-5.03Z" clip-rule="evenodd"/></mask><path fill="%23888" fill-rule="evenodd" d="M3.085 1.714 1.828 2.97 6.858 8l-5.03 5.03 1.257 1.256 5.03-5.03 5.027 5.028 1.257-1.257L9.37 8 14.4 2.972l-1.257-1.257-5.028 5.028-5.029-5.03Z" clip-rule="evenodd"/><path fill="%23888" d="m1.828 2.97-.707-.706-.707.707.707.707.707-.707Zm1.257-1.256.707-.707-.707-.708-.707.708.707.707ZM6.857 8l.707.707L8.271 8l-.707-.707L6.857 8Zm-5.03 5.03-.706-.708-.707.707.707.707.707-.707Zm1.258 1.256-.707.707.707.707.707-.707-.707-.707Zm5.03-5.03.706-.706-.707-.707-.707.707.707.707Zm5.027 5.028-.707.707.707.708.707-.707-.707-.708Zm1.257-1.257.707.707.707-.707-.707-.707-.707.707ZM9.37 8l-.707-.707L7.957 8l.707.707L9.371 8ZM14.4 2.972l.707.708.707-.708-.707-.707-.707.707Zm-1.257-1.257.707-.707-.707-.707-.707.707.707.707ZM8.114 6.743l-.707.707.707.707.707-.707-.707-.707ZM2.535 3.678 3.792 2.42 2.378 1.007 1.121 2.264l1.414 1.414Zm5.03 3.615-5.03-5.03-1.414 1.415 5.03 5.029 1.413-1.414Zm-5.03 6.443 5.03-5.03L6.15 7.294l-5.03 5.029 1.415 1.414Zm1.257-.157-1.257-1.257-1.414 1.414 1.257 1.257 1.414-1.414Zm3.615-5.03-5.03 5.03 1.415 1.414 5.03-5.03L7.406 8.55Zm6.442 5.028L8.82 8.55 7.407 9.964l5.028 5.027 1.414-1.414Zm-.157-1.257-1.257 1.257 1.414 1.415 1.257-1.258-1.414-1.414ZM8.664 8.707l5.028 5.027 1.414-1.414-5.028-5.027-1.414 1.414Zm5.028-6.442L8.664 7.293l1.414 1.414 5.028-5.027-1.414-1.415Zm-1.258.157 1.258 1.258 1.414-1.415-1.257-1.257-1.415 1.414ZM8.822 7.45l5.028-5.028-1.415-1.414-5.027 5.028L8.821 7.45ZM2.378 2.42l5.03 5.03L8.82 6.036l-5.029-5.03-1.414 1.415Z" mask="url(%23a)"/></svg>')no-repeat center,#fff; border-radius: 100%; }
.learning .instance li:nth-of-type(1) .content { border: 1px solid #999; border-top: 0; }
.learning .instance li:nth-of-type(1) .content:before { position: relative; top: 50%; left: calc(50% - 292px); display: block; content:''; clear: both; width: 408px; height: 408px; border: 1px dashed #aaa; border-radius: 100%; }
.learning .instance li:nth-of-type(1) .content > li { position: absolute; background: #999; }
.learning .instance li:nth-of-type(1) .content > li:nth-of-type(1) { top: 80px; left: 50%; transform: translateX(-50%); z-index: 3;} 
.learning .instance li:nth-of-type(1) .content > li:nth-of-type(1):before { position: absolute; bottom: -33px; display: block; content:''; clear: both; width: 56px; height: 56px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="13" fill="none"><path fill="%23AAA" fill-rule="evenodd" d="M20 0H0v4h20V0Zm0 9H0v4h20V9Z" clip-rule="evenodd"/></svg>')no-repeat center, #fff; border: 2px solid #ddd;  border-radius: 100px;} 
.learning .instance li:nth-of-type(1) .content > li:nth-of-type(2) { bottom: 120px; left: 138px; }
.learning .instance li:nth-of-type(1) .content > li:nth-of-type(3) { bottom: 120px; right: 139px;}

.learning .instance li:nth-of-type(2) .type { background: #1A73E8; }
.learning .instance li:nth-of-type(2) .type p:after { display: inline-flex; justify-content: center; align-items: center; content:''; clear: both; width: 32px; height: 32px; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="20" height="16" fill="none"><path fill="%231A73E8" stroke="%231A73E8" d="m3.642 7.38-.35-.344-.35.342L1.651 8.64l-.365.356.363.358 5.085 5.002.35.345.351-.345L18.351 3.618l.362-.356-.362-.357-1.283-1.261-.35-.345-.351.344-9.282 9.123L3.642 7.38Z"/></svg>')no-repeat center,#fff; border-radius: 100%; }
.learning .instance li:nth-of-type(2) .content { border: 1px solid #1A73E8; border-top: 0; }
.learning .instance li:nth-of-type(2) .content:before { position: relative; top: 50%; left: calc(50% - 292px); display: block; content:''; clear: both; width: 408px; height: 408px; border: 1px dashed #1A73E8; border-radius: 100%; }

.learning .instance li:nth-of-type(2) .content > li:nth-of-type(1) { left: 43px; background: #C9DBF2; color: #1A73E8; }
.learning .instance li:nth-of-type(2) .content > li:nth-of-type(2) { background: #87B3EE; color: #fff; z-index: 3; }
.learning .instance li:nth-of-type(2) .content > li:nth-of-type(2):before { position: absolute; left: -29px; display: block; content:''; clear: both; width: 48px; height: 48px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="22" fill="none"><path fill="%231A73E8" fill-rule="evenodd" d="M16.254 2.43 13.284.714l-2.968 5.143H.428v3.428h7.908l-1.98 3.429H.429v3.428h3.95l-2.236 3.872 2.97 1.714 3.224-5.586h9.235v-3.428h-7.255l1.98-3.429h5.275V5.858h-3.296l1.98-3.429Z" clip-rule="evenodd"/></svg>')no-repeat center, #fff; border: 2px solid #1A73E8;  border-radius: 100px; } 
.learning .instance li:nth-of-type(2) .content > li:nth-of-type(2):after { position: absolute; right: -29px; display: block; content:''; clear: both; width: 48px; height: 48px; background: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="18" height="22" fill="none"><path fill="%231A73E8" fill-rule="evenodd" d="M16.254 2.43 13.284.714l-2.968 5.143H.428v3.428h7.908l-1.98 3.429H.429v3.428h3.95l-2.236 3.872 2.97 1.714 3.224-5.586h9.235v-3.428h-7.255l1.98-3.429h5.275V5.858h-3.296l1.98-3.429Z" clip-rule="evenodd"/></svg>')no-repeat center, #fff; border: 2px solid #1A73E8;  border-radius: 100px; } 
.learning .instance li:nth-of-type(2) .content > li:nth-of-type(3) { right: 43px; background: #1A73E8; color: #fff; }
*/

.course01 { position: relative; padding: 80px 0 120px; background: #EFF6FE; }
.course01:before { position: absolute; left: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #fff; border-radius: 0 100px 0 0; z-index: 2; }
.course01:after { position: absolute; right: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #fff; border-radius: 0 100px 0 0; transform: scaleX(-1); z-index: 2; }  
.course01 .tab-content { width: 100%; padding: 60px 46px; background: #fff; border-radius: 0 0 8px 8px; border: 1px solid #ddd; border-top: none; }
.course01 .tab-content ul { display: flex; justify-content: center; grid-column-gap: 50px; width: 100%; margin-bottom: 42px; padding: 73px 0; background: #EFF6FE; border-radius: 16px; }


.contents-inner { display: none; width: 100%; }
.contents-inner.on { display: flex; flex-wrap: wrap; flex-direction: column;  }

.course02 { position: relative; padding: 80px 0 120px; background: #fff; }
.course02:before { position: absolute; left: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #36384C; border-radius: 0 100px 0 0; z-index: 2; }
.course02:after { position: absolute; right: 0; bottom: 0; display: block; content:''; clear: both; width: 50%; height: 48px; background: #36384C; border-radius: 0 100px 0 0; transform: scaleX(-1); z-index: 2; }  
.course02 .tab-content { width: 100%; padding: 60px 46px; background: #f5f5f5; border-radius: 0 0 8px 8px; border: 1px solid #ddd; border-top: none; }
.course02 .tab-content ul { display: flex; justify-content: center; grid-column-gap: 20px; width: 100%; margin-bottom: 42px; border-radius: 16px; }
.course02 .tab-content ul li { padding: 54px 62px 49px; background: #fff; border-radius: 16px; }

.academy { padding: 86px 0 120px; background: #36384C; }
.academy h5 { color: #fff; font-weight: 400; line-height: 2; }
.academy h3 span { position: relative; width: fit-content; margin: 0 auto; background: linear-gradient(45deg, #1A73E8 0%, #33D2BF 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.28; box-shadow: none; }
.academy h3 span:after { position: absolute; bottom: 4px; left: 0; display: block; content:''; clear: both; width: 100%;  height: 11px; background: linear-gradient(90deg, rgba(26, 115, 232, 0.2) 0%, rgba(51, 210, 191, 0.2) 100%);  }
.academy .academy-type { display: flex; justify-content: center; grid-column-gap: 28px; width: 100%; max-width: 1196px; margin: 52px auto 48px; }
.academy .academy-type > li { background: #fff; border-radius: 24px; box-shadow: 0px 7.78px 18.68px 0px #00000026; }
.academy .academy-type .type { display: flex; align-items: center; justify-content: center; padding: 28px 0; border-radius: 24px 24px 0 0; }
.academy .academy-type .type p { padding: 0 24px; font-size: 24px; line-height: 2.25; font-weight: 700; border-radius: 100px; }
.academy .academy-type > li:nth-of-type(1) .type { background: #05C3D5; }
.academy .academy-type > li:nth-of-type(1) .type p { background: #fff; color: #333; }
.academy .academy-type > li:nth-of-type(2) .type { background: #1A73E8; }
.academy .academy-type > li:nth-of-type(2) .type p { background: #0D4DA1; color: #fff; }
.academy .academy-type .content { display: flex; flex-direction: column; flex-wrap: wrap; padding: 50px 52px; }
.academy .academy-type .content p { margin: 38px auto 18px; color: #777; font-size: 22px; line-height: 1.4545; text-align: center; }
.academy .academy-type .content p b { color: #333; }
.academy .academy-type .content .tag { display: flex; justify-content: center; grid-column-gap: 8px; }
.academy .academy-type .content .tag li { padding: 0 18px; color: #777; font-size: 18px; line-height: 2.333; font-weight: 700; border: 1px solid #aaa; border-radius: 100px; } 
.academy a { display: flex; align-items: center; grid-column-gap: 12px; width: fit-content; margin: 0 auto; padding: 20px 64px; background: #777; color: #fff; font-size: 20px; line-height: 1.2; border-radius: 100px; }
.academy a:after { display: block; content:''; clear: both; width: 16px; height: 12px; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" fill="none"><path fill="%23fff" fill-rule="evenodd" d="M12.172 7 8.59 10.59 10 12l6-6-6-6-1.41 1.41L12.172 5H0v2h12.172Z" clip-rule="evenodd"/></svg>')no-repeat center; }

.trial { width: 100%; padding: 134px 0; background: url('../images/web/sub/kids/course_trial-bg.png')no-repeat center; }
.trial h6 { width: fit-content; margin: 0 auto 12px; color: #fff; font-size: 26px; line-height: 1.2; } 
.trial h2 { width: fit-content; margin: 0 auto 32px; color: #fff; font-size: 60px; line-height: 1.2; font-weight: 800; } 
.trial a { display: flex; align-items: center; grid-column-gap: 12px; width: fit-content; margin: 0 auto; padding: 20px 64px; background: #1A73E8; color: #fff; font-size: 20px; line-height: 1.2; border-radius: 100px; }
.trial a:after { display: block; content:''; clear: both; width: 16px; height: 12px; background:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="12" fill="none"><path fill="%23fff" fill-rule="evenodd" d="M12.172 7 8.59 10.59 10 12l6-6-6-6-1.41 1.41L12.172 5H0v2h12.172Z" clip-rule="evenodd"/></svg>')no-repeat center; }