@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */
.root_daum_roughmap {width:100% !important; height:420px !important;}
.root_daum_roughmap .wrap_map {height:420px !important;}
.roughmap_lebel_text {line-height:0 !important; font-size:0 !important;}
.roughmap_lebel_text:after {content:"위노베이트"; font-size:12px; line-height:15px;}

.bullet-item .bullet-list {position:relative; padding-left:11px; margin-top:8px; line-height:1.4; color: #000;}
.bullet-item .bullet-list:first-child {margin-top:0;}
.bullet-item .bullet-list::before {position:absolute; content:''; left:0; top:9px; width:3px; height:3px; border-radius: 50%; background:#000000;}
.bullet-item2 .bullet-list2 {position:relative; padding-left:11px; margin-top:2px; line-height:1.4; color: #505050;}
.bullet-item2 .bullet-list2:first-child {margin-top:0;}
.bullet-item2 .bullet-list2::before {position:absolute; content:''; left:0; top:9px; width:3px; height:3px; border-radius: 50%; background:var(--color-1);}

.bg-gray {background:#fafafa;}
.bg-color {background:#fcf3eb;}
.secpd {padding: clamp(50px, calc( 120 / var(--inner) * 100vw ), 120px) 0;}
.secpd2 {padding: clamp(40px, calc( 90 / var(--inner) * 100vw ), 90px) 0;}
.secpd.bg {background: #fcf3eb;}

.titletopbx {text-align: center;}
.titletopbx .boxtitle {font-size:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); font-weight: bold; line-height: 1.3;}
.titletopbx .boxtitle2 {font-size:clamp(17px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold; line-height: 1.3; color: #000;}
.titletopbx .subtitle {padding-top:clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: #454545;}
.titletopbx .subtitle2 {padding-top:clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: #000;}

.tabitem {display: flex; justify-content: center; margin: -7px;}
.tablist {padding: 7px;}
.tablist .link {display: flex; align-items:center; justify-content: center; padding: 0 20px; min-width: clamp(80px, calc( 120 / var(--inner) * 100vw ), 120px); height: clamp(40px, calc( 56 / var(--inner) * 100vw ), 56px); border-radius: 28px; border: 1px solid #ddd; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold; color: #333;}
.tablist .link.active {background:var(--color-1); border-color:var(--color-1); color: #fff;}

.checkitem {display: flex; align-items: center; flex-wrap: wrap;}
.checkitem .item {margin: 2px; margin-right: clamp(15px, calc( 38 / var(--inner) * 100vw ), 38px);}
.checkitem .item.width {margin-right:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px) ;}
.checkitem .textbox {width: clamp(120px, calc( 400 / var(--inner) * 100vw ), 400px);}
.checkitem .item:last-child {margin-right: 0;}
.checkitem .itemflx {display: flex; align-items: center;}
.checkitem .itemflx .checkbox {flex: 1 0 clamp(68px, calc( 78 / var(--inner) * 100vw ), 78px); width: clamp(68px, calc( 78 / var(--inner) * 100vw ), 78px);}
.checkitem .inputbx {flex:1 0 clamp(120px, calc( 420 / var(--inner) * 100vw ), 420px); max-width: clamp(120px, calc( 420 / var(--inner) * 100vw ), 420px);}
.checkitem .textflx {display: flex; align-items: center; margin-right:clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px);}
.checkitem .textflx:last-child {margin-right: 0;}
.checkitem .textflx .name {display: inline-block; padding-left:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px) ;}

/* 강사소개 */
.teaimgitem {display: flex; flex-wrap: wrap; padding-top: clamp(30px, calc( 55 / var(--inner) * 100vw ), 55px); margin: -12px; overflow: hidden;}
.teaimglist {flex: 1 0 33.33%; max-width: 33.33%; padding: 12px;}
.teaimglist .inner {border-radius: 16px; overflow: hidden; border: 1px solid #ddd; height: 100%;}
.teaimglist .textbx {padding:clamp(20px, calc( 45 / var(--inner) * 100vw ), 45px) 10px; text-align: center;  }
.teaimglist .tit {font-size: clamp(16px, calc( 22 / var(--inner) * 100vw ), 22px); font-weight: bold; line-height: 1.4;}

.teaicnitem {display: flex;justify-content: center; flex-wrap: wrap; padding-top: clamp(25px, calc( 40 / var(--inner) * 100vw ), 40px); }
.teaicnlist {padding: clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px);}
.teaicnlist .circle {display: flex; flex-direction: column; align-items: center; justify-content: center; width:clamp(120px, calc( 210 / var(--inner) * 100vw ), 210px); height: clamp(120px, calc( 210 / var(--inner) * 100vw ), 210px); border-radius: 50%; background: #fff;}
.teaicnlist .icn img {height: clamp(30px, calc( 59 / var(--inner) * 100vw ), 59px);}
.teaicnlist .name {display: flex; align-items: center; justify-content: center; padding-top: 5px; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600; height: clamp(50px, calc( 64 / var(--inner) * 100vw ), 64px); line-height: 1.5;text-align: center;} 

.iframeteacher .board-search {padding-top: clamp(30px, calc( 70 / var(--inner) * 100vw ), 70px);}
.iframeteacher .teachlist .tlink {border: 1px solid #ddd; cursor: default;}

.teabg {background:url(../images/sub/tea-bg.jpg) no-repeat 50% 50%; background-size: cover;}
.teabg .titletopbx {color: #fff;}
.teabg .titletopbx .subtitle {padding-top:clamp(10px, calc( 20 / var(--inner) * 100vw ), 20px); color: #fff;}
.teabg .mainslidebx {padding-top:clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}

/* 컨설팅 */
.consultop {padding-top: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.consultop .tit {display: inline-block; padding-top:12px; position: relative; font-size:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) ; font-weight: bold;}
.consultop .tit:after {position: absolute; content: ''; top: 0; left: 0; width:25px; height: 1px; background:var(--color-1);}
.consultop .subtit {padding-top: 10px; color: #505050;}

.slidebg.bg1 {background: url(../images/sub/consul-bg1.jpg) no-repeat 50% 50%; background-size:cover;}
.slidebg.bg2 {background: url(../images/sub/consul-bg2.jpg) no-repeat 50% 50%; background-size:cover;}
.slidebg.bg3 {background: url(../images/sub/consul-bg3.jpg) no-repeat 50% 50%; background-size:cover;}
.slidebg.bg4 {background: url(../images/sub/consul-bg4.jpg) no-repeat 50% 50%; background-size:cover;}
.slidebg.bg5 {background: url(../images/sub/consul-bg5.jpg) no-repeat 50% 50%; background-size:cover;}
.slidebg.bg6 {background: url(../images/sub/consul-bg6.jpg) no-repeat 50% 50%; background-size:cover;}
.slidebg.bg7 {background: url(../images/sub/consul-bg7.jpg) no-repeat 50% 50%; background-size:cover;}
.slidebg.bg8 {background: url(../images/sub/consul-bg8.jpg) no-repeat 50% 50%; background-size:cover;}
.slidebg.bg9 {background: url(../images/sub/consul-bg9.jpg) no-repeat 50% 50%; background-size:cover;}
.slidebg.bg1 .bigimg img {height: clamp(160px, calc( 597 / var(--inner) * 100vw ), 597px);}
.slidebg.bg2 .bigimg img {height: clamp(140px, calc( 572 / var(--inner) * 100vw ), 572px);}
.slidebg.bg3 .bigimg img {height: clamp(160px, calc( 622 / var(--inner) * 100vw ), 622px);}
.slidebg.bg4 .bigimg img {height: clamp(160px, calc( 624 / var(--inner) * 100vw ), 624px);}
.slidebg.bg5 .bigimg img {height: clamp(160px, calc( 623 / var(--inner) * 100vw ), 623px);}
.slidebg.bg6 .bigimg img {height: clamp(160px, calc( 628 / var(--inner) * 100vw ), 628px);}
.slidebg.bg7 .bigimg img {height: clamp(160px, calc( 633 / var(--inner) * 100vw ), 633px);}
.slidebg.bg8 .bigimg img {height: clamp(160px, calc( 653 / var(--inner) * 100vw ), 653px);}
.slidebg.bg9 .bigimg img {height: clamp(160px, calc( 627 / var(--inner) * 100vw ), 627px);}
.slidebg {height: clamp(390px, calc( 540 / var(--inner) * 100vw ), 540px);}

.consulbg .bigimg {position: absolute; bottom: 0; right: clamp(10px, calc( 110 / var(--inner) * 100vw ), 110px);}
.consulbg .swiper { overflow-y: visible;}
.consulbg .swiperinner {margin: 0 auto; padding: clamp(40px, calc( 90 / var(--inner) * 100vw ), 90px) clamp(16px, calc( 70 / var(--inner) * 100vw ), 70px); position: relative; max-width: 1400px; height: 100%; width: 100%; color: #fff;}
.consulbg .switit {font-size:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) ; font-weight: bold;}
.consulbg .badg {display: inline-flex; align-items: center; padding: 0 16px; margin-top:clamp(12px, calc( 32 / var(--inner) * 100vw ), 32px); height: 30px; background:var(--color-1); color: #fff; border-radius:15px;} 
.consulbg .textbx {padding-top: clamp(15px, calc( 80 / var(--inner) * 100vw ), 80px);}
.consulbg .icn img {width: clamp(10px, calc( 25 / var(--inner) * 100vw ), 25px);}
.consulbg .smalltt {display: inline-block; padding-top: 15px; font-size:clamp(17px, calc( 24 / var(--inner) * 100vw ), 24px); font-weight: 600;}
.consulbg .desc {padding-top: clamp(15px, calc( 20 / var(--inner) * 100vw ), 20px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); line-height: 1.5;}
.consul-img {padding-top: clamp(40px, calc( 100 / var(--inner) * 100vw ), 100px); text-align: center;}


/* 20250429 */
.parents .slidebg.bg1 .bigimg img{height: clamp(160px, calc(771 / var(--inner) * 100vw), 771px);}
.parents .slidebg {height: clamp(500px, calc( 675 / var(--inner) * 100vw ), 675px);}
.consulbg.parents .swiperinner {padding:clamp(40px, calc( 60 / var(--inner) * 100vw ), 60px) clamp(16px, calc( 70 / var(--inner) * 100vw ), 70px); padding-right:0;}
.consulbg.parents .textbx {padding-top:clamp(15px, calc( 50 / var(--inner) * 100vw ), 50px)}
.consulbg .badg-wrap {display: flex; align-items: center;}
.consulbg .badg-wrap a {margin-left:15px;}
.consulbg .badg-wrap a p {margin:0 15px 0 5px;}
.consulbg .desc .box {margin-top:20px;}
.consulbg .desc .box:first-child {margin-top:0;}

.process-step {margin: clamp(50px, calc( 70 / var(--inner) * 100vw ), 70px) -30px 0; display: flex;justify-content: center;}
.process-step .group {position: relative; display: flex; flex-direction: column; align-items: center; padding: 0 30px;}
.process-step .group:before {content:''; position: absolute; left: 10px; top: clamp(50px, calc( 110 / var(--inner) * 100vw ), 110px); background-image: url(/edu/images/sub/dots.png); width: 40px; height: 6px; background-repeat: no-repeat; background-size: contain;}
.process-step .group:first-child:before {display:none;}
.process-step .group:nth-child(3):before {left: -35px;}
.process-step .group:nth-child(4):before {left: -30px;}
.circle {width: clamp(100px, calc( 220 / var(--inner) * 100vw ), 220px); height: clamp(100px, calc( 220 / var(--inner) * 100vw ), 220px); background-color: #f69031; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center;margin-bottom: 10px;}
.circle img {height: clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px);}
.step-tit {margin-top:15px; font-size: clamp(14px, calc( 20 / var(--inner) * 100vw ), 20px); color: white; font-weight: bold; text-align: center;	letter-spacing: -.03em; line-height: 1.2em;}
.step-txt {text-align: center; font-size: clamp(14px, calc( 16 / var(--inner) * 100vw ), 16px); line-height: 1.4em; margin-top: 10px; width: 100%; color:#242424;}
.process-btn {text-align: center; }
.process-btn a {display: inline-flex; align-items: center; justify-content: center; width: clamp(100px, calc( 215 / var(--inner) * 100vw ), 215px); height: clamp(50px, calc( 70 / var(--inner) * 100vw ), 70px); border-radius: 35px; background: var(--color-1); color: #fff;  font-size: clamp(18px, calc( 25 / var(--inner) * 100vw ), 25px); font-weight: 700; letter-spacing: -.03em; margin-top: 55px;}

.parents-list-img {overflow: hidden; margin-top:clamp(40px, calc( 90 / var(--inner) * 100vw ), 90px);}
.parents-list-img .slick-list {margin:0 -127px;}
.parents-list-img .slick-slide {padding:0 15px;}
.parents-list-img .slick-arrow {position: absolute; background-repeat: no-repeat; background-size: contain; top: 50%; transform: translateY(-50%); border: 0; background-color: transparent; font-size: 0;width: 60px; height: 60px; z-index:1;}
.parents-list-img .slick-prev {background-image: url(/edu/images/sub/parents-list-arrow2.png);left: 2%;}
.parents-list-img .slick-next {background-image: url(/edu/images/sub/parents-list-arrow.png); right:2%;}

.tit-slide {text-align:center;}
.tit-slide .txtActive span { font-weight: 700;color: #242424; letter-spacing: -.03em; font-size:clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.tit-slide .txtActive em { font-weight: 600;  color: #0073ff;}
.tit-slide .txtInner { font-size: clamp(16px, calc( 32 / var(--inner) * 100vw ), 32px); color: #f8c699; font-weight: 600; letter-spacing: -.03em;}
.tit-slide .swiper-slide-next .txtInner { color: #f8c699; opacity: 0.4;}
.tit-slide .textSlider { height: 100px;overflow: hidden; margin-top: 30px;}
.tit-slide .teacherSlider { margin-top: 314px; position: relative;}


/* 학습관리시스템 */
.manabgtop {margin-top: 280px; position: relative;  background: url(../images/sub/mana-bg1.jpg) no-repeat 50% 50%; background-size: cover; height: 650px;} 
.manabgtop:after {position: absolute; content: ''; right: clamp(10px, calc( 50 / var(--inner) * 100vw ), 50px); bottom: -25px; width: clamp(232px, calc( 904 / var(--inner) * 100vw ), 904px); height: clamp(90px, calc( 351 / var(--inner) * 100vw ), 351px); background: url(../images/sub/mana-text1.png) no-repeat; background-size: contain;}

.inposition {position: relative; top: -150px;}
.arrowitem + .arrowitem {padding-top: clamp(10px, calc( 40 / var(--inner) * 100vw ), 40px);}
.arrowitem {display: flex; margin:0 -11px;}
.arrowlist {padding:0 11px;}
.arrowitem .inner {display: flex; flex-direction: column; justify-content: space-between; padding:clamp(20px, calc( 45 / var(--inner) * 100vw ), 45px) clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px) clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); background:#f69031 url(../images/sub/arrow1.png) no-repeat right bottom clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); background-size: clamp(20px, calc( 54 / var(--inner) * 100vw ), 54px) auto; border-radius: 16px; width: 300px; height: 280px;}
.arrowitem .text {color: #fff; font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600; line-height: 1.3;}
.arrowitem .icn img {height: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);}
.arrowitem.type2 .inner {align-items: flex-end; background: #ffd3aa url(../images/sub/arrow2.png) no-repeat left bottom clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); background-size: clamp(15px, calc( 54 / var(--inner) * 100vw ), 54px) auto;}
.arrowitem.type2 .text {color: #000; text-align: right;}

.mana-img {padding-top:clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); text-align: center;}

.systemitem {display: flex; flex-wrap: wrap; padding-top:clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px); margin: -20px;}
.systemlist {flex: 1 0 50%; max-width: 50%; padding: 20px;}
.systemlist .inbx {display: flex; flex-wrap: wrap; padding: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) clamp(15px, calc( 60 / var(--inner) * 100vw ), 60px); border-radius: 16px; background: #fff8f2; height: 100%;}
.systemlist .icn {flex: 1 0 clamp(40px, calc( 79 / var(--inner) * 100vw ), 79px); max-width: clamp(40px, calc( 79 / var(--inner) * 100vw ), 79px); margin-right: clamp(10px, calc( 30 / var(--inner) * 100vw ), 30px);}
.systemlist .icn img {width: clamp(40px, calc( 79 / var(--inner) * 100vw ), 79px);}
.systemlist .textbx {flex:1 0 auto; width: 1%;}
.systemlist .tit {font-size: clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold; color: #000;}
.systemlist .bullet-item {padding-top: 10px;}

.effectbg {margin-top: clamp(90px, calc( 140 / var(--inner) * 100vw ), 140px);  position: relative; background: url(../images/sub/mana-bg2.png) no-repeat; background-size: cover; height: clamp(250px, calc( 400 / var(--inner) * 100vw ), 400px); border-radius: 26px;}
.effectbg:after {position: absolute; content: ''; left: 50%; transform: translateX(-50%); bottom:-60px; width:clamp(60px, calc( 140 / var(--inner) * 100vw ), 140px); height: clamp(60px, calc( 140 / var(--inner) * 100vw ), 140px); background: url(../images/sub/icn-down.png) no-repeat ; background-size: cover;}
.effectbg .widmax {max-width: 1100px; width: 100%; margin: 0 auto; padding-right: 15px; padding-left: 15px;}
.effecitem {display: flex;  flex-wrap: wrap; margin: -6px; position: relative; top: -55px;}
.effeclist {flex: 1 0 33.33%; max-width: 33.33%; padding: 6px;}
.effeclist .inner {padding: clamp(20px, calc( 25 / var(--inner) * 100vw ), 25px) clamp(20px, calc( 35 / var(--inner) * 100vw ), 35px) clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px); border-radius: 16px; background: #ffead6; height: 100%; letter-spacing: -0.5px;}
.effeclist .badge {display: inline-flex; align-items: center; justify-content: center; width:clamp(60px, calc( 64 / var(--inner) * 100vw ), 64px); height: clamp(25px, calc( 29 / var(--inner) * 100vw ), 29px); border-radius: 14px; background:var(--color-1); color: #fff; font-weight: 600;}
.effeclist .text {padding-top: clamp(15px, calc( 28 / var(--inner) * 100vw ), 28px); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: 600; color: #000000;}
.effectbg+.titletopbx {padding-top: clamp(40px, calc( 80 / var(--inner) * 100vw ), 80px);}

.perioditem {display: flex; flex-wrap: wrap; padding-top: clamp(40px, calc( 75 / var(--inner) * 100vw ), 75px); margin:-15px ;}
.periodlist {flex: 1 0 50%; max-width: 50%; padding: 15px;}
.periodlist .inner {padding: 0 clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px) 20px; background: #fff8f2; border-radius: 16px; height: 100%;}
.periodlist .topbx {display: flex; align-items: flex-end; position: relative; top: -20px;}
.periodlist .topbx .icn {margin-right: clamp(16px, calc( 30 / var(--inner) * 100vw ), 30px);}
.periodlist .topbx .icn img {width: clamp(60px, calc( 160 / var(--inner) * 100vw ), 160px);}
.periodlist .topbx .name {display: inline-block; padding-bottom:clamp(10px, calc( 22 / var(--inner) * 100vw ), 22px); font-size: clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold; color: #000;}
.periodlist .bullet-item2 {margin-top: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); padding-left: clamp(4px, calc( 8 / var(--inner) * 100vw ), 8px);}

.boxwrap + .boxwrap {padding-top: clamp(80px, calc( 270 / var(--inner) * 100vw ), 270px);}
.boxwrap .flxWrap {justify-content: space-between; padding-top: clamp(30px, calc( 55 / var(--inner) * 100vw ), 55px);}
.boxwrap .shadow {border-radius:16px; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);}
.boxwrap .tblbx {flex: 1 0 760px; max-width: 760px; margin-right: clamp(10px, calc( 40 / var(--inner) * 100vw ), 40px);}
.boxwrap th {background: #f5f5f5; font-weight: bold; border-top: 0 !important;}
.boxwrap td {color: #505050;}
.boxwrap th,
.boxwrap td {padding: clamp(10px, calc( 15 / var(--inner) * 100vw ), 15px) clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px); border-left: 1px solid #ddd; border-top: 1px solid #ddd; text-align: center;}
.boxwrap td.text-left {padding:30px clamp(15px, calc( 27 / var(--inner) * 100vw ), 27px);}
.boxwrap th:first-child,
.boxwrap td:first-child {border-left: 0; border-top-left-radius: 16px; }
.boxwrap th:last-child {border-top-right-radius: 16px;}
.boxwrap .bullet-list2 + .bullet-list2 {margin-top: clamp(10px, calc( 22 / var(--inner) * 100vw ), 22px);}
.boxwrap .graphbx {flex: 1 0 auto; width: 1%; text-align: center;}
.boxwrap .graphbx .inner {padding: clamp(20px, calc( 60 / var(--inner) * 100vw ), 60px) clamp(10px, calc( 60 / var(--inner) * 100vw ), 60px);}
.boxwrap .graphbx .tit {padding-bottom: clamp(15px, calc( 45 / var(--inner) * 100vw ), 45px); font-size: clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold; color: #000;}

/* 학년,과목별 시스템 */
.subjectintro .titletopbx {padding-bottom:clamp(35px, calc( 75 / var(--inner) * 100vw ), 75px);}
.titletopbx + .steptitbx {padding-top: clamp(40px, calc( 135 / var(--inner) * 100vw ), 135px); padding-bottom: clamp(30px, calc( 60 / var(--inner) * 100vw ), 60px);}
.steptitbx {text-align: center;}
.steptitbx .step img {width: clamp(60px, calc( 160 / var(--inner) * 100vw ), 160px);}
.steptitbx .textbx {padding-top:clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px);}
.steptitbx .maintt {font-size: clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); }
.steptitbx .maintt .font1 {font-family:var(--font2); color:var(--color-1); font-weight: bold;}
.steptitbx .subtt {padding-top:2px; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: #454545;}

.introwrap {position: relative; padding-bottom: clamp(60px, calc( 190 / var(--inner) * 100vw ), 190px);}
.subjswiperbx {position: absolute; bottom:0; left: 50%; transform: translateX(-50%); width: 100%;}
.subjswiperbx .flxWrap {justify-content: flex-end; }
.subjswiperbx .imgbx {flex: 1 0 clamp(510px, calc( 651 / var(--inner) * 100vw ), 651px); max-width: clamp(510px, calc( 651 / var(--inner) * 100vw ), 651px);}
.subjswiperbx .textbx {flex: 1 0 auto; width: 1%; padding-right: clamp(20px, calc( 55 / var(--inner) * 100vw ), 55px); padding-top: clamp(50px, calc( 125 / var(--inner) * 100vw ), 125px);}
.subjswiperbx .titbx {max-width: 510px; margin-left: auto; color: #fff; letter-spacing: -0.5px; padding-left: clamp(32px, calc( 55 / var(--inner) * 100vw ), 55px); padding-top: clamp(12px, calc( 30 / var(--inner) * 100vw ), 30px); background: url(../images/sub/subjsw-icn1.png) no-repeat left top; background-size: clamp(35px, calc( 75 / var(--inner) * 100vw ), 75px) auto;}
.subjswiperbx .top {font-size: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); font-weight: bold;}
.subjswiperbx .bottom {padding-top: 12px; font-weight: bold;}
.subjswiperbx .imgbx .images {padding-bottom:30px;position:relative;background:url(../images/sub/phonebg.png) no-repeat; background-size:contain; background-position:right 45% bottom; text-align: center;}


.subjbg {background: url(../images/sub/subject-bg1.png) no-repeat bottom center; background-size: cover; overflow: hidden;}
.step1item {display: flex; flex-wrap: wrap;}
.step1list {flex: 1 0 25%; max-width: 25%; text-align: center; color: #fff;}
.step1list .text {padding-top: 10px; line-height: 1.5;}
.step1list .icn img {width: clamp(80px, calc( 160 / var(--inner) * 100vw ), 160px);}

.subjbg + .titletopbx {padding-top: clamp(18px, calc( 24 / var(--inner) * 100vw ), 24px);}
.titletopbx .boxtitle2 + .boxtitle2 {padding-top: 10px;}

.subjtblbx {padding-top: clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px);}
.subjtblbx th {background:var(--color-1); color: #fff; font-weight: bold;}
.subjtblbx td {color: #454545; background: #fff;}
.subjtblbx th,
.subjtblbx td {padding:clamp(12px, calc( 25 / var(--inner) * 100vw ), 25px) clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px); text-align: center; border-left: 1px solid #ddd; border-top: 1px solid #ddd;}
.subjtblbx th:first-child,
.subjtblbx td:first-child {border-left: 0;}

.tiptext {padding-top: clamp(25px, calc( 45 / var(--inner) * 100vw ), 45px);}
.tiptext .tipmid {padding: clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px) 0 clamp(20px, calc( 55 / var(--inner) * 100vw ), 55px); text-align: center;}
.tipmid .tip {display: inline-flex; align-items: center; justify-content: center; padding: 5px; height:24px; background: var(--color-1); color: #fff; font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold;}
.tipmid .subtip {padding-top:clamp(10px, calc( 18 / var(--inner) * 100vw ), 18px); font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: #454545;}

.bottomitem {display: flex; flex-wrap: wrap; margin: -20px;}
.bottomlist {flex: 1 0 50%; max-width: 50%; padding: 20px;}
.bottomlist .binner {padding: clamp(20px, calc( 50 / var(--inner) * 100vw ), 50px) clamp(15px, calc( 50 / var(--inner) * 100vw ), 50px); background:var(--color-1); border-radius: 16px; height: 100%;}
.bottomlist .flxWrap {align-items: center;}
.bottomlist .icnbx {flex: 1 0 clamp(50px, calc( 80 / var(--inner) * 100vw ), 80px); max-width: clamp(50px, calc( 80 / var(--inner) * 100vw ), 80px); margin-right:clamp(15px, calc( 35 / var(--inner) * 100vw ), 35px);}
.bottomlist .textbx {flex: 1 0 auto; width: 1%; color: #fff;}
.bottomlist .tit {display: block; font-size: clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold;}
.bottomlist .desc {padding-top: 12px; font-weight: 300; line-height: 1.5;}

.pointitem {padding-top: clamp(30px, calc( 65 / var(--inner) * 100vw ), 65px);}
.pointlist + .pointlist {padding-top: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px);}
.pointlist .pinner {border-radius: 16px; background: #fff; box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1);}
.pointlist .flxWrap {align-items: center;}
.pointlist .imgbx {flex: 1 0 450px; max-width: 450px;}
.pointlist .textbx {flex: 1 0 auto; width: 1%; padding:0 20px 0 clamp(20px, calc( 70 / var(--inner) * 100vw ), 70px);} 
.pointlist .name {font-size: clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold;}
.pointlist .dec {padding-top: 10px; font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600; line-height: 1.4;}
.pointlist .bullet-item2 {padding-top: clamp(15px, calc( 24 / var(--inner) * 100vw ), 24px);}
.pointlist .bullet-list2 {color: #555;} 
.pointlist .bullet-list2 + .bullet-list2 {margin-top: 7px;}
.pointitem + .titletopbx {padding-top: clamp(25px, calc( 55 / var(--inner) * 100vw ), 55px);}

.engtopwrap {padding:clamp(60px, calc( 160 / var(--inner) * 100vw ), 160px) 0; overflow: hidden;}
.engicnitem {display: flex; flex-wrap: wrap; margin: -12px;}
.engicnlist {flex: 1 0 33.33%; max-width: 33.33%; padding: 12px;} 
.engicnlist .einner {padding:clamp(60px, calc( 100 / var(--inner) * 100vw ), 100px) clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px) clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px) clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); position: relative; letter-spacing: -0.5px; border-radius: 16px; height: 100%;}
.engicnlist:nth-child(odd) .einner {background:#f69031; color: #fff;}
.engicnlist:nth-child(even) .einner {background:#ffd3aa; }
.engicnlist .icn {position: absolute; left: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); top: -50px; box-shadow: 0 0 25px rgba(0, 0, 0, 0.1); border-radius: 16px;}
.engicnlist .icn img {width: clamp(60px, calc( 120 / var(--inner) * 100vw ), 120px);}
.engicnlist .tit {font-size:clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold;}
.engicnlist .dec {padding: 5px 0 clamp(20px, calc( 30 / var(--inner) * 100vw ), 30px); line-height: 1.5;}
.engicnlist .que {font-family:var(--font1); font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold; line-height: 1.5;}
.engicnlist .etc {display: inline-block;}
.engicnlist .etc.type1 {padding-right:clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px);}
.engicnlist .etc.type2 {padding-left:clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px);}

.engbottombg {background:url(../images/sub/subj02-bg.jpg) no-repeat ; background-size: cover;}
.engbottombg .boxtitle {color: #fff;}
.engbtitem {display: flex; flex-wrap: wrap; padding-top:clamp(30px, calc( 55 / var(--inner) * 100vw ), 55px); margin:-10px -20px;}
.engbglist {flex: 1 0 50%; max-width: 50%; padding: 10px 20px;}
.engbglist .inbx {padding:clamp(25px, calc( 55 / var(--inner) * 100vw ), 55px) clamp(15px, calc( 70 / var(--inner) * 100vw ), 70px); background: #fff; border-radius:16px ; height: 100%;}
.engbglist .icnbx {flex: 1 0 clamp(45px, calc( 59 / var(--inner) * 100vw ), 59px); max-width: clamp(45px, calc( 59 / var(--inner) * 100vw ), 59px); margin-right:clamp(15px, calc( 37 / var(--inner) * 100vw ), 37px);}
.engbglist .icnbx img {width: 100%;}
.engbglist .textbx {flex: 1 0 auto; width: 1%;}
.engbglist .tit {font-size: clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold;}
.engbglist .dec {padding-top:8px; color: #454545; line-height: 1.5; font-weight: 300;} 

.mathbox {overflow: hidden;}
.mathbox + .mathbox {padding-top: clamp(50px, calc( 120 / var(--inner) * 100vw ), 120px);}
.mathbox .imgbx {flex: 1 0 654px; max-width: 654px; margin-right:clamp(10px, calc( 80 / var(--inner) * 100vw ), 80px); }
.mathbox .imgbx img {box-shadow: rgba(0, 0, 0, 0.1) 0 15px 30px; border-radius: 16px; overflow: hidden;}
.mathbox .textbx {flex: 1 0 auto; width: 1%;}
.mathbox .flxWrap {align-items: center;}
.mathbox .icnflx {display: flex; align-items: center;}
.mathbox .icn {flex: 1 0 clamp(60px, calc( 120 / var(--inner) * 100vw ), 120px); max-width: clamp(60px, calc( 120 / var(--inner) * 100vw ), 120px); margin-right: clamp(15px, calc( 23 / var(--inner) * 100vw ), 23px); box-shadow: rgba(0, 0, 0, 0.1) 0 0 25px; border-radius: 50%; overflow: hidden;}
.mathbox .icnflx span {display: block;}
.mathbox .icnflx .name {font-size: clamp(20px, calc( 40 / var(--inner) * 100vw ), 40px); font-weight: bold;}
.mathbox .icnflx .sub {padding-top: clamp(10px, calc( 18 / var(--inner) * 100vw ), 18px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600; color: #333;}
.mathbox .bullet-item2 {padding-top: clamp(15px, calc( 38 / var(--inner) * 100vw ), 38px); padding-left: clamp(5px, calc( 15 / var(--inner) * 100vw ), 15px);}
.mathbox .bullet-list2 + .bullet-list2 {margin-top: 8px;}
.mathbox .flxWrap.reverse {flex-direction: row-reverse;}
.mathbox .flxWrap.reverse .imgbx {margin-right: 0; margin-left: clamp(10px, calc( 80 / var(--inner) * 100vw ), 80px);}
.mathbox .flxWrap.reverse .textbx {padding-left: clamp(10px, calc( 60 / var(--inner) * 100vw ), 60px);}

.mathbg {padding: clamp(50px, calc( 190 / var(--inner) * 100vw ), 190px) 0; background: url(../images/sub/subj03-bg.jpg) no-repeat; background-size: cover;}
.mathbg .text {text-align: center; font-size: clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold; color: #fff;}

.icnlistbx {padding: clamp(60px, calc( 128 / var(--inner) * 100vw ), 128px) 0 clamp(50px, calc( 100 / var(--inner) * 100vw ), 100px); overflow: hidden;}
.way04item {display: flex; flex-wrap: wrap; margin: -13px;}
.way04list {flex: 1 0 33.33%; max-width: 33.33%; padding:13px;}
.way04list .inner {padding:0 10px; position: relative; height: 100%; border-radius: 16px;}
.way04list:nth-child(1) .inner {background: url(../images/sub/subj04-bg1.png) no-repeat; background-size: cover;}
.way04list:nth-child(2) .inner {background: url(../images/sub/subj04-bg2.png) no-repeat; background-size: cover;}
.way04list:nth-child(3) .inner {background: url(../images/sub/subj04-bg3.png) no-repeat; background-size: cover;}
.way04list .num {position: absolute; left: 50%; transform: translateX(-50%); top:-80px;}
.way04list .textbx {padding: clamp(70px, calc( 140 / var(--inner) * 100vw ), 140px) 0 clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px); text-align: center;}
.way04list .text {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold; color: #222222;}
.way04list .arrow {padding: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px) 0;}
.way04list .arrow img {height: clamp(18px, calc( 27 / var(--inner) * 100vw ), 27px);}
.way04list .icn img {height: clamp(55px, calc( 88 / var(--inner) * 100vw ), 88px);}
.way04list .last {padding-top: clamp(15px, calc( 25 / var(--inner) * 100vw ), 25px); font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); color: #454545; line-height: 1.5;}

.socialitem {padding-top: clamp(30px, calc( 55 / var(--inner) * 100vw ), 55px);}
.sociallist + .sociallist {margin-top: 20px;}
.sociallist .imgbx {flex: 1 0 270px; max-width: 270px; margin-right: 10px; position: relative; border-radius: 12px; overflow: hidden; background-size: cover;} 
.sociallist .imgbx .tit {position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); font-size: clamp(15px, calc( 22 / var(--inner) * 100vw ), 22px); font-weight:600; color: #fff;} 
.sociallist .textbx {flex:1 0 auto; width: 1%; padding: clamp(15px, calc( 26 / var(--inner) * 100vw ), 26px) clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px); border: 1px solid #ddd; border-radius: 12px; letter-spacing: -0.5px; min-height: 120px;}
.sociallist .item {display: flex;}
.sociallist .item + .item {margin-top: clamp(10px, calc( 16 / var(--inner) * 100vw ), 16px);}
.sociallist .name {flex: 1 0 clamp(90px, calc( 120 / var(--inner) * 100vw ), 120px); max-width: clamp(90px, calc( 120 / var(--inner) * 100vw ), 120px); font-size:clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: 600; color:#f69031;}
.sociallist .descbx {flex: 1 0 auto; width: 1%; line-height: 1.5;}

.way05item {display: flex; flex-wrap: wrap; margin: -13px;}
.way05list {flex: 1 0 33.33%; max-width: 33.33%; padding:13px;}
.way05list .inner {padding:0 10px; position: relative; height: 100%; border-radius: 16px;}
.way05list:nth-child(1) .inner {background: url(../images/sub/subj05-bg1.png) no-repeat; background-size: cover;}
.way05list:nth-child(2) .inner {background: url(../images/sub/subj05-bg2.png) no-repeat; background-size: cover;}
.way05list:nth-child(3) .inner {background: url(../images/sub/subj05-bg3.png) no-repeat; background-size: cover;}
.way05list .num {position: absolute; left: 50%; transform: translateX(-50%); top:-80px;}
.way05list .textbx {padding: clamp(70px, calc( 133 / var(--inner) * 100vw ), 133px) 0 clamp(25px, calc( 50 / var(--inner) * 100vw ), 50px); text-align: center;}
.way05list .text {font-size: clamp(16px, calc( 20 / var(--inner) * 100vw ), 20px); font-weight: bold; color: #222222;}
.way05list .arrow {padding: clamp(15px, calc( 30 / var(--inner) * 100vw ), 30px) 0;}
.way05list .arrow img {height: clamp(18px, calc( 27 / var(--inner) * 100vw ), 27px);}
.way05list .last {font-size: clamp(15px, calc( 18 / var(--inner) * 100vw ), 18px); color: #454545; line-height: 1.5;}

.checkpointwrap {padding-top:clamp(30px, calc( 50 / var(--inner) * 100vw ), 50px);}
.checkwrap + .checkwrap {padding-top: clamp(50px, calc( 120 / var(--inner) * 100vw ), 120px);}
.checkwrap .pointname {display:flex; align-items: center; justify-content: center; margin: 0 auto; height: clamp(36px, calc( 40 / var(--inner) * 100vw ), 40px); width: 156px; border: 2px solid var(--color-2); color:var(--color-2); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); font-weight: bold; border-radius: 20px;}  
.checkwrap .pointtext {padding-top: clamp(15px, calc( 26 / var(--inner) * 100vw ), 26px); text-align: center;}
.checkwrap .tt {font-size:clamp(18px, calc( 28 / var(--inner) * 100vw ), 28px); font-weight: bold;}
.checkwrap .subtt {padding-top: clamp(10px, calc( 22 / var(--inner) * 100vw ), 22px); font-size: clamp(14px, calc( 18 / var(--inner) * 100vw ), 18px); color: #454545;}
.checkwrap .tblbox {padding-top: clamp(20px, calc( 38 / var(--inner) * 100vw ), 38px);}
.checkwrap th {background:var(--color-2); color: #fff; }
.checkwrap td {color: #454545; background: #fff;}
.checkwrap th,
.checkwrap td {padding: clamp(12px, calc( 26 / var(--inner) * 100vw ), 26px) clamp(5px, calc( 10 / var(--inner) * 100vw ), 10px); font-weight: 400; text-align: center; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd;}
.checkwrap th:first-child,
.checkwrap td:first-child {border-left: 0;}
.checkwrap .tbltext {padding-top:18px; color: #999999; text-align: right;}