/* header */
.header .gnb_wrap .edutech { border-top: 2px solid transparent; border-bottom: 2px solid #121214; } 

/* sect01 */
.sect01 .bg-img { background-image: url(/image/banner/edutech_banner01.png); } 

/* sect02 */
.sect02 { padding: 16rem 4rem 12rem; } 
.sect02 .guide { display: flex; align-items: center; gap: 12rem; } 
.sect02 .cont-wrap { width: 100%; display: flex; } 
.sect02 .cont-wrap li { width: 32rem; aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: #FFF; box-shadow: 0 0.4rem 4rem 0 rgba(0, 0, 0, 0.08); padding: 4rem; } 
.sect02 .cont-wrap li:not(:last-child) { margin-right: -4.8rem; } 
.sect02 .cont-wrap li p { font-size: 1.8rem; font-weight: 500; margin-top: 1.2rem; text-align: center; word-break: keep-all; } 

@media all and (max-width:768px){
 .sect02 { padding: 8rem 2rem 6rem; } 
 .sect02 .guide { flex-direction: column; gap: 4.8rem; } 
 }

@media all and (max-width:500px){
 .sect02 .cont-wrap { flex-direction: column; align-items: center; } 
 .sect02 .cont-wrap li:not(:last-child) { margin-right: 0; margin-bottom: -4.8rem; } 
 }
 
/* sect03 */
.sect03 { padding: 12rem 4rem; } 
.sect03 .sect_title { text-align: center; } 
.sect03 .cont-wrap { margin-top: 8rem; display: flex; gap: 6rem; align-items: center; } 
.sect03 .cont-wrap .img { width: 100%; max-width: 28rem; } 
.sect03 .edu-card-wrap { width: 100%; display: flex; gap: 3.2rem; align-items: stretch; } 
.sect03 .edu-card-wrap .card { width: 100%; } 
.sect03 .edu-card-wrap .card h2 { height: 6.4rem; font-size: 2rem; border-radius: 2rem; display: flex; align-items: center; justify-content: center; background: #3392FF; color: #fff; font-size: 600; padding: 1.6rem 2.4rem; } 
.sect03 .edu-card-wrap .card .list-wrap { border-radius: 2rem; background:#EBF1FF; padding: 3.2rem; font-size: 1.8rem; font-weight: 500; height: calc(100% - 6.4rem); display: flex; flex-direction: column; justify-content: center; } 
.sect03 .edu-card-wrap .card .list-wrap li { display: flex; align-items: center; } 
.sect03 .edu-card-wrap .card .list-wrap li:not(:first-child) { margin-top: 0.8rem; } 
.sect03 .edu-card-wrap .card .list-wrap li::before { content: ''; display: inline-block; width: 0.4rem; height: 0.4rem; background: #121214; border-radius: 50%; margin: 1.2rem 0.8rem 1.2rem 0; } 

@media all and (max-width:768px){
 .sect03 { padding: 6rem 2rem; } 
 .sect03 .cont-wrap { flex-direction: column; margin-top: 4.8rem; gap: 3.2rem; } 
 .sect03 .edu-card-wrap { gap: 2rem; } 
 }
 
@media all and (max-width:500px){
 .sect03 .edu-card-wrap { flex-direction: column; } 
 }

 /* sect04 */
.sect04 { padding: 12rem 4rem; overflow: hidden; position: relative; } 
.sect04 .sect_title { text-align: center; } 
.sect04 .cont-wrap { margin-top: 8rem; } 

/* sect05, sect06 */
.sect05 { padding: 12rem 4rem; } 
.sect05 .sect_title { text-align: center; } 
.sect05 .cont-wrap, .sect06 .cont-wrap { display: flex; flex-direction: column; gap: 6rem; margin-top: 8rem; } 
.sect05 .diagram .card .element-wrap { width: 100%; display: flex; flex-wrap: wrap; gap: 3.2rem; } 
.sect05 .diagram .card .element { width: calc(25% - 9.6rem/4); } 
.sect05 .diagram .card .element .sub-tit { white-space: nowrap; } 
.sect05 .diagram .card .element > ul { display: flex; flex-direction: column; gap: 1.2rem; border-radius: 2.4rem; background: #EBF1FF; padding: 4.8rem 3.2rem 3.2rem 3.2rem; margin-top: 2.4rem; } 
.sect05 .diagram .card .arrows { width: 102rem; height: 4.4rem; position: relative; } 
.sect05 .diagram .card .arrows .arrow01 { width: 32rem; position: absolute; bottom: 0; left: 0; } 
.sect05 .diagram .card .arrows .arrow02 { width: 64rem; position: absolute; bottom: 0; right: 0; } 
.sect05 .diagram .card .arrows .tablet, .sect05 .diagram .card .arrows .mobile { display: none; } 
.sect05 .diagram .card .bottom-element-wrap { display: flex; gap: 2rem; margin-top: 3.2rem; } 
.sect05 .diagram .card .bottom-element-wrap li { width: 24rem; height: 5.6rem; display: flex; align-items: center; justify-content: center; border-radius: 1.2rem; background: #3392FF; color: #fff; font-weight: 600; } 
.sect05 .diagram01 .card { padding: 8rem 6rem 6rem 6rem; } 
.sect05 .diagram02 .card, .sect05 .diagram03 .card, .sect06 .diagram01 .card { flex-direction: row; align-items: flex-end; gap: 12rem; margin-top: 0; } 
.sect05 .card .img, .sect06 .card .img { width: 100%; max-width: 28.8rem; } 
.sect05 .sub-sect-title, .sect06 .sub-sect-title { text-align: left !important; } 
.sect05 .sub-sect-title .main_title, .sect06 .sub-sect-title .main_title { font-size: 4rem; } 
.sect05 .diagram02 .card, .sect05 .diagram03 .card { margin-top: 0; } 

@media all and (max-width:768px){
 .sect05 { padding: 6rem 2rem; } 
 .sect05 .cont-wrap, .sect06 .cont-wrap { margin-top: 4.8rem; } 
 .sect05 .diagram01 .card { padding: 6rem 4rem 4rem 4rem; } 
 .sect05 .diagram .main-tit { width: 80%; } 
 .sect05 .diagram .card .element { width: calc(50% - 3.2rem / 2); } 
 .sect05 .diagram .card .element-wrap { row-gap: 3.2rem; } 
 .sect05 .diagram .card .arrows { width: 50%; position: absolute; } 
 .sect05 .diagram .card .arrows .pc { display: none; } 
 .sect05 .diagram .card .arrows .tablet { display: block; position: absolute; } 
 .sect05 .diagram .card .arrows li:nth-child(1) .tablet { width: 16rem; top: 24rem; right: 0; } 
 .sect05 .diagram .card .arrows li:nth-child(2) .tablet { width: 30rem; top: 36rem; left: 0; } 
 .sect05 .diagram .card .bottom-element-wrap { flex-direction: column; } 
 .sect05 .diagram02 .card, .sect05 .diagram03 .card { flex-direction: column; } 
 .sect05 .diagram02 .card, .sect05 .diagram03 .card, .sect06 .diagram01 .card { gap: 3.2rem; padding: 4rem; } 
 .sect05 .sub-sect-title .main_title, .sect06 .sub-sect-title .main_title { font-size: 3.2rem; } 
 }

@media all and (max-width:500px){
 .sect05 .diagram .card .element-wrap { row-gap: 6rem; } 
 .sect05 .diagram .card .element { width: 100% } 
 .sect05 .diagram .card .arrows .pc, .sect05 .diagram .card .arrows .tablet { display: none; } 
 .sect05 .diagram .card .arrows .mobile { display: block; } 
 .sect05 .diagram .card .arrows li:nth-child(1) .mobile { height: 4.4rem; top: 24rem; right: 0; } 
 .sect05 .diagram .card .arrows li:nth-child(2) .mobile { width: 1.8rem; top: 53rem; left: -40%; } 
 }

/* sect06 */
.sect06 { padding: 12rem 4rem 16rem; } 
.sect06 .sect_title { text-align: center; } 
/* .sect06 .diagram .main-tit { width: 28rem; } */
.sect06 .wide-diagram .card { flex-direction: row; gap: 4rem; } 
.sect06 .wide-diagram .card .center-icon { position: absolute; } 
.sect06 .center-circle { display: flex; align-items: center; gap: 4rem; } 
.sect06 .center-circle .pd01 { width: 18rem; height: 18rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; background:#3392FF; text-align: center; font-size: 2rem; padding: 4rem; color: #fff; font-weight: 600; } 
.sect06 .center-circle .pd02 { border-radius: 50%; background: rgba(51, 146, 255, 0.40); padding: 2.4rem; } 
.sect06 .center-circle .pd03 { border-radius: 50%; background: rgba(51, 146, 255, 0.20); padding: 2.4rem; } 
.sect06 .center-circle .arrows { width: 6rem; } 
.sect06 .column { width: 100%; display: flex; flex-direction: column; gap: 3.2rem; } 
.sect06 .diagram .item { display: flex; flex-direction: column; gap: 1.2rem; } 
.sect06 .diagram .right .item { text-align: right; } 
.sect06 .diagram .item h3 { font-size: 2.4rem; } 
.sect06 .diagram .item p { font-size: 1.8rem; color: #71727D; font-weight: 500; } 
.sect06 .diagram03 .card { flex-direction: column; } 
.sect06 .diagram03 .top { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4rem; } 
.sect06 .diagram03 .top div { max-width: 24rem; width: 100%; height: 6.4rem; border-radius: 3.2rem; } 
.sect06 .diagram03 .top ul { width: 100%; display: flex; gap: 2rem; } 
.sect06 .diagram03 .top ul li { width: 100%; } 
.sect06 .diagram03 .bottom { width: 100%; display: flex; gap: 3.2rem; } 
.sect06 .diagram03 .bottom .inner-diagram { width: 100%; position: relative; padding-top: 2.4rem; align-items: center; display: flex; align-items: center; } 
.sect06 .diagram03 .bottom .inner-diagram .main-tit { height: 4.8rem; font-size: 1.8rem; } 
.sect06 .diagram03 .bottom .inner-diagram .card { border-radius: 2.4rem; background: #EBF1FF; margin-top: 0; padding: 4.8rem 4rem 4rem 4rem; } 
.sect06 .diagram03 .bottom .inner-diagram .card .element { width: 100%; } 
.sect06 .diagram03 .bottom .inner-diagram .list-wrap { display: flex; flex-direction: column; gap: 1.2rem; } 
.sect06 .diagram03 .bottom .inner-diagram .list-wrap li { display: flex; gap: 0.8rem; font-weight: 500; } 
.sect06 .diagram03 .bottom .inner-diagram01 .list-wrap li::before { content: ''; display: inline-block; width: 0.4rem; height: 0.4rem; background: #121214; border-radius: 50%; margin: 1.2rem 0.8rem 1.2rem 0; } 
.sect06 .diagram03 .bottom .inner-diagram01 .list-wrap li .highlight { color: #3392FF; font-weight: 600; display: contents; } 

@media all and (max-width:768px){
 .sect06 { padding: 6rem 2rem 8rem; } 
 .sect06 .wide-diagram .card { flex-direction: column; padding: 6rem 4rem 4rem 4rem; } 
 .sect06 .column { flex-direction: row; gap: 4.8rem; } 
 .sect06 .diagram .item { width: 100%; } 
 .sect06 .diagram .item:first-child { text-align: left; } 
 .sect06 .diagram .item:last-child { text-align: right; } 
 .sect06 .diagram03 .top ul { flex-wrap: wrap; justify-content: center; } 
 .sect06 .diagram03 .top ul li { width: calc(100%/3 - 4rem/3); } 
 .sect06 .diagram03 .bottom { flex-direction: column; } 
 }

@media all and (max-width:500px){
 .sect06 .column { flex-direction: column; gap: 4.8rem; } 
 .sect06 .diagram .item:last-child { text-align: left; } 
 .sect06 .center-circle { flex-direction: column; } 
 .sect06 .center-circle .arrow-left { transform: rotate(90deg); } 
 .sect06 .center-circle .arrow-right { transform: rotate(90deg); } 
 .sect06 .diagram03 .top ul li { width: calc(100%/2 - 2rem/2); } 
 }

/* sect07 */
.sect07 .bg-img { background-image: url(/image/banner/edutech_banner02.png); } 

/* sect08 */
.sect08 { padding: 16rem 4rem 12rem; } 
.sect08 .sect_title { text-align: center; } 
.sect08 .cont-wrap { display: flex; flex-direction: column; gap: 6rem; margin-top: 8rem; } 
.sect08 .cont-wrap .product-wrap { display: flex; gap: 3.2rem; } 
.sect08 .cont-wrap .product-wrap .card { width: 100%; display: flex; flex-direction: column; gap: 2rem; align-items: center; justify-content: space-between; border-radius: 3.2rem; background: #F7F7FC; padding: 4rem 6rem; } 
.sect08 .wide-diagram .card { padding: 6rem 4rem 4rem 4rem; } 
.sect08 .wide-diagram table th { background: #f1f1f7; } 
.sect08 .wide-diagram table td { background: #fff; } 
.sect08 .wide-diagram table th, td { height: 6.4rem; line-height: 6.4rem; text-align: center; padding: 0 1.2rem; border-bottom: 1px solid #D5D5DE; } 
.sect08 .wide-diagram table th:not(:last-child), td:not(:last-child) { border-right: 1px solid #D5D5DE;; } 
.sect08 .wide-diagram p { font-size: 1.6rem; color: #71727D; margin-top: 3.2rem; text-align: center; } 
.sect08 .cont-wrap .edu-card-wrap { display: flex; gap: 3.2rem; } 
.sect08 .cont-wrap .edu-card-wrap li { width: 100%; border-radius: 2.4rem; border: 1px solid var(--mode-gray-100, #F1F1F7); background: var(--white-white-100, #FFF); box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.04); padding: 4rem; text-align: left; } 
.sect08 .cont-wrap .edu-card-wrap .tit { font-size: 2rem; color:#3392FF; } 
.sect08 .cont-wrap .edu-card-wrap .sub-tit { margin-top: 1.2rem; } 
.sect08 .cont-wrap .edu-card-wrap .sub-tit .amount { font-size: 4.8rem; } 
.sect08 .cont-wrap .edu-card-wrap .sub-tit .percent { font-size: 3.2rem; } 
.sect08 .cont-wrap .edu-card-wrap .sub-tit .status { font-size: 2rem; } 
.sect08 .cont-wrap .edu-card-wrap .desc { font-size: 1.8rem; color: #71727D; font-weight: 500; margin-top: 1.6rem; } 
.sect08 .cont-wrap .edu-card-wrap button { font-size: 1.8rem; color: #71727D; margin-top: 3.2rem; } 
.sect08 .cont-wrap .edu-card-wrap button img { width: 2rem; } 

@media all and (max-width:768px){
 .sect08 { padding: 8rem 2rem 6rem; } 
 .sect08 .cont-wrap .edu-card-wrap { flex-direction: column; gap: 2rem; } 
 .sect08 .diagram .main-tit { width: 80%; } 
 }

@media all and (max-width:500px){
 .sect08 .cont-wrap .product-wrap { flex-direction: column; } 
 }

/* sect09, sect10, sect11 */
.sect09 ,.sect10 ,.sect11 { padding: 12rem 4rem; } 
.sect09 .guide, .sect10 .guide, .sect11 .guide { display: flex; gap: 12rem; align-items: center; } 
.sect09 .img, .sect10 .img, .sect11 .img { width: 100%; max-width: 64rem; } 

@media all and (max-width:768px){
 .sect09 ,.sect10 ,.sect11 { padding: 6rem 2rem; } 
 .sect09 .guide, .sect10 .guide, .sect11 .guide { flex-direction: column; gap: 4.8rem; } 
 .sect10 .guide { flex-direction: column-reverse; } 
 }

/* sect12 */
.sect12 { padding: 12rem 4rem 16rem; } 
.sect12 .sect_title { text-align: center; } 
.sect12 .cont-wrap { position: relative; margin-top: 8rem; } 
.sect12 .cont-wrap .img { width: 100%; max-width: 36rem; position: absolute; top: 50%; left: 12rem; transform: translateY(-50%); } 
.sect12 .cont-wrap .check-list { margin-top: 0; gap: 3.2rem; padding: 8rem 12rem 8rem 58rem; border-radius: 3.2rem; background: #F7F7FC; } 
.sect12 .cont-wrap .check-list .keyword { white-space: nowrap; font-weight: 600; } 
.sect12 .cont-wrap .check-list .desc { color: #71727D; font-weight: 500; margin-left: 0.8rem; } 

@media all and (max-width:768px){
 .sect12 { padding: 6rem 2rem 8rem; } 
 .sect12 .cont-wrap { margin-top: 4.8rem; } 
 .sect12 .cont-wrap .img { position: relative; top: 0; left: 50%; transform: translateX(-50%); max-width: 28rem; } 
 .sect12 .cont-wrap .check-list { padding: 4rem; margin-top: 2.4rem; } 
 .sect12 .cont-wrap .check-list .txt { display: flex; flex-direction: column; gap: 0.8rem; } 
 }