@charset "utf-8";

/* 
 * content CSS Document
 *
 */

 /* button */
.btn-new{display: flex; align-items: center; justify-content: center; width: 220rem; height: 62rem; background-color:var(--white); border: 1rem solid #888; color: var(--black); font-size: var(--font18); transition: .3s;}
.btn-new:hover{background: #232529; border-color: #232529; color: var(--white);}
@media (max-width:767px){
	.btn-new{width:160rem;}
}
@media (max-width:480px){
	.btn-new{width:140rem; height:auto; padding:15rem 0;}
}


 /* sub-visual */
.area-subVisual {width: 100%; height: 400rem; border-top: 1rem solid #e8e8e8; background-position: 50% 50%; background-repeat: no-repeat; background-size: cover;} 
.area-subVisual .inr {position: relative;height: 100%; display: flex; align-items: center;}
.area-subVisual .visual-navi {position: absolute; top: 40rem; right:0; display: flex; align-items: center; justify-content: center; gap: 8rem; font-size: 15rem; font-weight: 300; color: var(--white);}
.area-subVisual .visual-navi i {opacity: 0.5;}
.area-subVisual .visual-title {color: var(--white);}
.area-subVisual .visual-title h2 {font-size: 45rem; font-weight: 700;}
.area-subVisual .visual-title p {font-size: 18rem; margin-top:25rem;}
.area-subVisual[data-subLayout="about"] {background-image:url('/images/content/sub_visual01.jpg')}
.area-subVisual[data-subLayout="education"] {background-image:url('/images/content/sub_visual02.jpg')}
.area-subVisual[data-subLayout="tools"] {background-image:url('/images/content/sub_visual03.jpg')}
.area-subVisual[data-subLayout="customer"] {background-image:url('/images/content/sub_visual04.jpg')}

/* lnb */
.area-lnb {margin-top: -40rem;}
.area-lnb .inr {background: var(--white); border-radius: 8rem; box-shadow: 0 5rem 10rem rgba(10, 4, 4, 0.05);}
.area-lnb .lnb ul {display: flex; justify-content: center; }
.area-lnb .lnb li {height:80rem;}
.area-lnb .lnb a {display: flex;align-items: center; width: 100%; height: 100%; padding: 0 30rem; box-sizing: border-box; font-size: 18rem; font-weight: 500; color: #b7b7b7}
.area-lnb .lnb a.on {color: var(--point);}
.area-lnb .depth03 {display: none;}

/* dep03_menu */
.dep03_menu {display: inline-flex; align-items: center; justify-content: center; gap: 2rem; padding: 8rem; border-radius: 40rem; border: 1rem solid #e7e7e7; box-sizing: border-box; margin: 40rem auto 0 auto;}
.dep03_menu li a {display: flex; align-items: center; justify-content: center; padding: 0 35rem; height: 55rem; border-radius: 40rem; color: #b5b5b5; font-size: var(--font16); font-weight: 500; letter-spacing: -0.015em; transition: .3s;}
.dep03_menu li.active a {background: #0599d9; color: var(--white); }
.dep03_menu li:not(.active):hover a {background: #f1f2f4;}

@media (max-width:1080px){
    .dep03_menu li a {padding: 0 25rem;}
}

@media (max-width:767px){
    .area-subVisual {height: 300rem; background-position-x: 55%; background-position-y: 50%;}
    .area-subVisual[data-subLayout="about"] {background-position-x: 25%;}
    .area-subVisual .visual-navi {top: 30rem;}
    .area-subVisual .visual-title {margin-top: 30rem;}
    .area-subVisual .visual-title h2 {font-size: 35rem;}
    .area-subVisual .visual-title p {margin-top: 20rem;}
    .area-lnb {margin-top: 0; border-bottom: 1rem solid #e8e8e8;}
    .area-lnb .inr {max-width: 100%; border-radius: 0; box-shadow: none; overflow-x: auto; justify-content: flex-start;}
    .area-lnb .lnb li {height: 60rem;}
    .area-lnb .lnb a {font-size: 15rem; padding: 0 20rem; white-space: nowrap;}
    .dep03_box {overflow-x: scroll; padding-bottom: 10rem;}
    .dep03_menu {padding: 0; border: 0; border-radius: 0; gap: 10rem; margin: 30rem auto 0 auto; width: 768rem; justify-content: flex-start;}
    .dep03_menu li a {background: #f1f2f4; height: 50rem; padding: 0 22rem; min-width: 110rem; white-space: nowrap;}
}
@media (max-width:480px){
    .area-subVisual {position: relative; height: 250rem;}
    .area-subVisual::before { content: ''; position: absolute; top: 0;left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.035);}
    .area-subVisual .visual-navi {font-size: 14rem; gap: 6rem}
    .area-subVisual .visual-title h2 {font-size: 28rem;}
    .area-subVisual .visual-title p {display: none;}
    .dep03_menu {gap: 5rem;}
    .dep03_menu li a {height: 45rem; padding: 0 20rem; min-width: 80rem}
}

/****** 공통부분 ******/
 #content {padding: 120rem 0; overflow: hidden; letter-spacing: -0.01em;}
.tit-box {position: relative; padding-bottom: 60rem; text-align: center;}
.tit-box::before {content: ''; position: absolute; inset: 0 -30vw 0; height:auto; border-bottom: 2px solid #f1f2f4; z-index: -1;}
.sub_title h2 {font-size: 40rem; text-align: center;}
.sub_title p {font-size: var(--font17); text-align: center; color: #666; margin-top: 30rem;}
.emo_h5 {display: flex; align-items: center; font-size: var(--font28); font-weight: 700;}
.emo_h5 .emoji {margin-left: 10rem;}


/****** 교육 커리큘럼 ******/
.curriculum h3 {font-size: var(--font25); margin-bottom: 30rem;}
.curriculum h3.flex {display: flex; flex-wrap: wrap; gap: 20rem; justify-content: space-between; align-items: center;}
.curriculum h3.flex .more {font-size: var(--font15); font-weight: 400; display: block; padding: 10rem 15rem; box-sizing: border-box; background: #f1f2f4; color: #a9a9a9; border-radius: 30rem;}
.curriculum .text p {font-size: var(--font17); line-height: 1.7;}
.curriculum b {font-weight: 600; display: block; margin-bottom: 10rem;}
.curriculum .bbsPager {padding-top: 5rem; margin-top: 60rem; padding-bottom: 0; background: url(/images/common/slash.png) repeat-x; background-position: top;}
.curriculum .bbsPager .inr_pager{padding-top:40rem;}
.curriculum .curri-btn {display: block; padding: 25rem 40rem; border: 1rem solid #888; opacity: 0.6; font-size: var(--font17); }
.curriculum .curri-btn:hover {border-color: #232529; background: #232529; opacity: 1; color: var(--white);}
[data-sub="curriculum"] .ko_board_noData{margin-top:0 !important;}

/* list */
.curriculum .list {display: grid; grid-template-columns: repeat(4,1fr); gap: 20rem;}
.curriculum .list li {display: flex; flex-direction: column; align-items: center; justify-content: center; box-sizing: border-box; border-radius: 6rem; border: 1rem solid #e5e5e5; text-align: center;}
.curriculum .list li span.img img {width: 100%; height: 100%; max-width: 100%; object-fit: contain;}
.curriculum .list li p {font-weight: 500; margin-top: 20rem; line-height: 1.5;}
.curriculum .list.v1 li {padding: 40rem 10rem;}
.curriculum .list.v1 li span.img {display: inline-block; width: 100rem; height: 100rem; aspect-ratio: 10 / 10; border-radius: 50%; background-color: #f1f2f4; overflow: hidden;}
.curriculum .list.v1 li span.img img {object-fit: cover;}
.curriculum .list.v2 {grid-template-columns: repeat(3,1fr)}
.curriculum .list.v2 li {padding: 60rem 30rem;}
.curriculum .list.v2 li span.img {display: block; height: 75rem;}
.curriculum .list.v3 li {padding: 40rem 10rem;}
.curriculum .list.v3 li span.img {display: inline-block; height: 62rem;}
.curriculum .list.v4 {grid-template-columns: repeat(5,1fr); }
.curriculum .list.v4 li {border-radius: 0; border: 0; justify-content:flex-start;}
.curriculum .list.v4 li a {display: block; width: 100%;}
.curriculum .list.v4 li span.img {display: block; aspect-ratio: 24 / 27; border: 1rem solid #e5e5e5;}
.curriculum .list.v4 li span.img img {object-fit: cover;}

/* 커리큘럼 */
.curriculum .accordion .btn {margin-top: 15rem; display: flex; align-items: center; justify-content: space-between; font-size: var(--font17); font-weight: 600; border: 1rem solid #e5e5e5;  border-radius: 6rem; padding: 22rem 40rem; box-sizing: border-box; cursor: pointer;}
.curriculum .accordion .cont {display: none; overflow: hidden; padding: 40rem; border-radius: 10rem; background: #f1f2f4; box-sizing: border-box; margin-top: 15rem;  transition: 0.2s ease-out;}
.curriculum .accordion .cont dl + dl {margin-top: 30rem; padding-top: 30rem; border-top: 1rem dashed #c9c9c9;}
.curriculum .accordion .cont dt {display: flex; align-items: center; gap: 12rem; font-size: var(--font18); font-weight: 600; margin-bottom: 20rem;}
.curriculum .accordion .cont dt span {display: inline-block; padding: 8rem 15rem; box-sizing: border-box; background: var(--white); border-radius: 30rem; color: #0599d9; font-size: var(--font15); font-weight: 500;}
.curriculum .accordion .cont dd b {font-weight: 600; display: block; margin-bottom: 10rem;}
.curriculum .accordion .btn.open  {color: var(--white); background: #0599d9; border-color: #0599d9;}
.curriculum .accordion .btn.open i {transform: rotate(180deg);}

/* 실습도구 */
.curriculum .curri__text {font-size: var(--font17); line-height: 1.5; padding: 40rem 30rem; box-sizing: border-box; border: 1rem solid #e5e5e5; border-radius: 6rem;} 

/* 강사소개 */
.curriculum .teacher__info {letter-spacing: -0.01em; margin-top: 25rem;}
.curriculum .teacher__info strong {font-size: var(--font18); font-weight: 600;}
.curriculum .teacher__info p {color: #666; margin-top: 15rem !important; font-weight: 400 !important;}
.curriculum .teacher__info span.more {font-size: 15rem; color: #888; display: inline-block; padding: 9rem 28rem; border-radius: 30rem; border: 1rem solid #e5e5e5; margin-top: 25rem; transition: 0.3s ease-out 0s}
.curri__teacher a:hover span.more {background: #0599d9; color: var(--white); border-color: #0599d9;}

/* layer */
.teachLayer .popBox {padding: 30rem; box-sizing: border-box; }
.teachLayer .popBox .popConts {display: flex; gap: 50rem; max-height: 610rem; padding: 0;}
.teachLayer .popConts-img {flex:1; aspect-ratio: 44 / 55; border: 1rem solid #e5e5e5;}
.teachLayer .popConts-img img {width: 100%; height: 100%; max-width: 100%; object-fit: cover;}
.teachLayer .popConts-txt {flex: 1.1; }
.teachLayer .tit {margin-bottom: 20rem; padding-bottom: 20rem; border-bottom: 1rem solid #ddd;}
.teachLayer .tit span {display: inline-block; padding: 10rem 20rem; background: #f0f7e7; color: #8ec33c; font-weight: 500; border-radius: 4rem; margin-bottom: 5px; margin-right:5px}
.teachLayer .tit h2 {font-size: var(--font30); font-weight: 700; display: flex; justify-content: space-between; align-items: center;}
.teachLayer .tit h2 em {font-size: var(--font16); font-weight: 400; color: #888;}
.teachLayer .career dt {font-size: var(--font18); font-weight: 600; margin-bottom:15rem;}
.teachLayer .career dd {font-weight: 400; color: #666;}
.teachLayer .career dd + dd {margin-top: 8rem;}

.preLayer .popBox {height: auto;}
.preLayer .popBox .popConts {padding: 0; width: 100%; height: auto; aspect-ratio: 16 / 9; overflow-y: initial;}
.preLayer .popBox .popTitle {padding: 25rem; box-sizing: border-box; font-size: var(--font22);}
.preLayer .popBox .btn_close {background: #0599d9;}

.reviewLayer .popBox .popTitle {font-size: var(--font25); font-weight: 700; padding: 10rem 30rem; background: #f1f2f4; }
.reviewLayer .popBox .popConts {padding: 30rem; }
.reviewLayer .popBox {height: auto;}
.reviewLayer [data-form="write"] {gap: 30rem 20rem;}
.reviewLayer [data-form="write"] li label {margin-bottom: 15rem;}
.reviewLayer [data-form="write"] input[type="text"], .reviewLayer [data-form="write"] select {height: 55rem; padding: 5rem 10rem; }
.reviewLayer [data-form="write"] textarea {padding: 20rem;}
.reviewLayer [data-formwrite="spam"] .spam {height: 55rem;}
.reviewLayer .submit {background: #0599d9; color: var(--white); display: inline-flex; justify-content: center; font-size: var(--font16); padding: 20rem 40rem;}

/* 교육후기 */
.curriculum .reviewBox {padding-bottom: 40rem; position: relative;}
.review-cont {display: block; padding: 50rem 40rem; box-sizing: border-box; background: var(--white); border-radius: 8rem; border: 1rem solid #e5e5e5; transition: .3s;}
.review-cont .name {display: inline-block; font-size: 15rem; font-weight: 600; padding: 10rem 15rem; border-radius: 4rem; color: #8ec33c; background: #f0f7e7;}
.review-cont dt{font-size: 20rem; letter-spacing: 0.01em; font-weight: 700; margin-top: 25rem;}
.review-cont dd {color: #5d5d5d; margin-top: 20rem; line-height: 1.5;}
.review-control div {position: absolute; top: 45%; transform: translateY(-50%); width: 60rem; height: 60rem; border-radius: 50%; background: var(--white); display: flex; align-items: center;z-index: 20; transition: .3s; justify-content: center; cursor: pointer; box-shadow: 0 0 10rem rgba(0, 0, 0, 0.08);}
.review-control i {font-size: 15rem;}
.review-control div.prev {left:-85rem;}
.review-control div.next {right:-85rem;}
.curriculum .review-progress {position: relative; bottom:0 !important; height: 3rem !important; background: rgba(0, 0, 0, 0.12);  z-index: 10;}
.swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background: #8ec33c !important;}
.review-cont .btn_area {padding-bottom: 0;}

/* 교육 미리보기 */
.curri__preview {display: grid; grid-template-columns: repeat(3,1fr); gap: 20rem;}
.curri__preview .pre-cont {display: block; overflow: hidden;}
.curri__preview .pre-cont .img {position: relative; background-color: var(--black); aspect-ratio: 42 / 23; overflow: hidden;}
.curri__preview .pre-cont .img img {width: 100%; height: 100%; object-fit: cover; opacity: 0.5;  transition: all 0.3s ease-out 0s;}
.curri__preview .pre-cont .img i {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index:10; font-size: 80rem; color: rgba(255, 255, 255, 0.7);}
.curri__preview .pre-cont p {margin-top: 20rem; font-weight: 500; letter-spacing: -0.01em;}
.curri__preview .pre-cont:hover .img img {transform: scale(1.08);}
.curri__preview .pre-cont:hover .img i {color: var(--white);}

@media (hover: hover) {
    .review-cont:hover {box-shadow: 0 0 10rem rgba(0, 0, 0, 0.15); border-color: #8ec33c;}
    .review-control div:hover {background: #8ec33c;}
    .review-control div:hover i {color:var(--white);}
}

/***** 교육도구 *****/
.box-wrap {padding-top: 80rem;}
.box-wrap .box + .box { margin-top: 60rem; padding-top: 60rem; border-top: 2rem solid #f1f2f4;}
.box-wrap .tit {margin-bottom: 40rem}
.box-wrap .box.b1 .emo_h5 .emoji {margin-right: 10rem;}
.box-wrap .tit h5 {font-size: var(--font28); font-weight: 700;}
.box-wrap .tit p {font-size: var(--font17); line-height: 1.7; margin-top: 30rem;}
.box-wrap .cont.img {display: grid; grid-template-columns: repeat(2,1fr); gap: 20rem;}
.box-wrap .cont.img img {width: 100%; max-width: 100%; height: 100%; object-fit: cover;}
.box-wrap .cont.list {display: grid; grid-template-columns: repeat(2,1fr); gap: 25rem;}
.box-wrap .cont.list > div {display: flex; justify-content: space-between; align-items: center; border: 1rem solid #e5e5e5; height: 220rem; padding: 40rem; box-sizing: border-box;}
.box-wrap .cont.list dl {width: calc(100% - 100rem)}
.box-wrap .cont.list dt {font-size: var(--font20); font-weight: 600;}
.box-wrap .cont.list dd {color: #666; line-height: 1.5; margin-top: 25rem;}
.box-wrap .cont.list span.icon {display: block; width: 70rem;}
.box-wrap .cont.list span.icon img {width: 100%; max-width: 100%; object-fit: contain;}
.box-wrap .cont.video .video-conts {position: relative; cursor: pointer; width: 100%;}
.box-wrap .cont.video .video-conts img {width: 100%; max-width: 100%;}
.box-wrap .cont.video .video-conts .play {font-size: 150rem; color: rgba(255, 255, 255, 0.5); position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: 1; transition: .3s;}
.box-wrap .cont.video .video-conts:hover .play {color: rgba(255, 255, 255, 1);}
.box-wrap .cont.video .video-popup {display: none; opacity: 0; position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; height: 100%; background: rgba(0,0,0,0.6); transition: .4s;}
.box-wrap .cont.video .video-popup.open {display: block; opacity: 1;}
.box-wrap .cont.video .video-popup-box {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; max-width: 1200rem;}
.box-wrap .cont.video .video-popup-box iframe {width: 100%; max-height: 90vh; aspect-ratio: 16/9;}
.box-wrap .cont.video .btn_close {display: flex; align-items: center; justify-content: center; width: 55rem; height: 55rem; background:var(--second);  position: absolute; top: 0;right: -55rem;}
.box-wrap .cont.video .btn_close span {font-size: 0;}
.box-wrap .cont.video .btn_close i {font-size: var(--font25); color: var(--white);}

/* 교육도구 > SecurityGround */
[data-sub="toolSecurity"] *{box-sizing:border-box; word-break:keep-all;}
[data-sub="toolSecurity"] .tit h5{display:block; text-align:center;}
[data-sub="toolSecurity"] .tit p{text-align:center;}
[data-sub="toolSecurity"] .b1 img{display:block; margin:0 auto 30rem; width:234rem;}
[data-sub="toolSecurity"] .b1 p{font-size:var(--font17); line-height:1.7; text-align:center; word-break:keep-all;}
[data-sub="toolSecurity"] .curriculumList{display:grid; grid-template-columns:1fr 1fr 1fr; gap:20rem;}
[data-sub="toolSecurity"] .curriculumList > li{padding:10rem; border-radius:6rem; border:1rem solid #e5e5e5; box-sizing:border-box;}
[data-sub="toolSecurity"] .curriculumList_tit{padding:20rem 10rem; box-sizing:border-box; border-radius:3rem;}
[data-sub="toolSecurity"] .curriculumList_tit span{display:block; margin:auto; padding:6rem 0; width:100rem; box-sizing:border-box; background:var(--white); border-radius:30rem; font-size:var(--font15); font-weight:500; text-align:center;}
[data-sub="toolSecurity"] .curriculumList_tit em{display:block; margin-top:15rem; font-size:var(--font20); font-weight:600; line-height:1; color:#fff; text-align:center;}
[data-sub="toolSecurity"] .curriculumList_tit.c1{background:#dec3ff;}
[data-sub="toolSecurity"] .curriculumList_tit.c1 span{color:#dec3ff;}
[data-sub="toolSecurity"] .curriculumList_tit.c2{background:#6e3cff;}
[data-sub="toolSecurity"] .curriculumList_tit.c2 span{color:#6e3cff;}
[data-sub="toolSecurity"] .curriculumList_tit.c3{background:#422499;}
[data-sub="toolSecurity"] .curriculumList_tit.c3 span{color:#422499;}
[data-sub="toolSecurity"] .curriculumList_cnt{text-align:center;}
[data-sub="toolSecurity"] .curriculumList_cnt p{margin:30rem 0; padding:0 20rem; font-size:var(--font17); line-height:1.7; box-sizing:border-box; word-break:keep-all;}
[data-sub="toolSecurity"] .curriculumList_cnt ul{display:flex; flex-direction:column; gap:8rem;}
[data-sub="toolSecurity"] .curriculumList_cnt li{padding:8rem 10rem; font-size:var(--font17); line-height:1.6; word-break:keep-all; background:#f5f5f5; border-radius:3rem;}
[data-sub="toolSecurity"] .b3 .swiper{overflow:visible; max-width:1000rem; width:85%;}
[data-sub="toolSecurity"] .b3 h3{margin-bottom:10rem; font-size: var(--font20); font-weight: 600; text-align:center;}
[data-sub="toolSecurity"] .b3 h3 em{display:flex; align-items:center; justify-content:center; margin:0 auto 12rem; font-size:var(--font15); font-weight:600; color:#fff; background:#6e3cff; width:100rem; height:32rem; border-radius:16rem;}
[data-sub="toolSecurity"] .b3 .img img{display:block; width:100%;}
[data-sub="toolSecurity"] .b3 .navBtn{margin-top:0; width:60rem; height:auto; aspect-ratio:1/1; border-radius:50%; background:#fff; box-shadow:0 0 20rem rgba(110,60,255,.3);}
[data-sub="toolSecurity"] .b3 .navBtn:after{font-size:25rem; font-weight:900; color:#6e3cff;}
[data-sub="toolSecurity"] .b3 .swiper-button-next{right:0;}
[data-sub="toolSecurity"] .b3 .swiper-button-next:after{margin-right:-4rem;}
[data-sub="toolSecurity"] .b3 .swiper-button-prev{left:0;}
[data-sub="toolSecurity"] .b3 .swiper-button-prev:after{margin-left:-4rem;}
[data-sub="toolSecurity"] .b3 .swiper-pagination{display:none; position:relative; margin-top:18rem;}
[data-sub="toolSecurity"] .b3 .swiper-pagination-bullet-active{background:#6e3cff;}
[data-sub="toolSecurity"] .reference{display:grid; grid-template-columns:repeat(5,1fr); gap:15rem;}
[data-sub="toolSecurity"] .reference li{padding:30rem 20rem 20rem; text-align:center; border-radius:6rem; border:1px solid #e5e5e5;}
[data-sub="toolSecurity"] .reference .siteLogo{display:block; max-width:200px; width:100%;}
[data-sub="toolSecurity"] .reference .siteLogo img{display:block; width:100%;}
[data-sub="toolSecurity"] .reference em{display:flex; align-items:center; justify-content:center; gap:5rem; margin-top:30rem; margin-bottom:10rem; padding-top:20rem; font-size:var(--font15); font-weight:500; border-top:1px dashed #ddd;}
[data-sub="toolSecurity"] .reference em img{display:block; width:18rem; border-radius:50%; border:1px solid #ccc;}
[data-sub="toolSecurity"] .reference h3{font-size:var(--font18); font-weight:600;}


@media (min-width:1025px){
    [data-sub="toolSecurity"] .b1 p > br.show1024{display:none;}
}
@media (min-width:481px){
    [data-sub="toolSecurity"] br.show480{display:none;}
}
@media (max-width:1080px){
    #content {padding: 90rem 0;}
    .box-wrap .cont.img {gap: 10rem;}
    .box-wrap .cont.list {gap: 20rem;}
    .box-wrap .cont.list > div {height: auto; padding: 30rem;}
	.box-wrap .cont.video .btn_close{top:-55rem; right:0;}

    .curriculum .list.v1 {grid-template-columns: repeat(3,1fr);}
    .curriculum .list.v4 {grid-template-columns: repeat(4,1fr);}
    .curri__preview {grid-template-columns: repeat(2,1fr);}
    .teachLayer .popBox {top: 50% !important; left: 50% !important; width: 90% !important; height: auto !important; transform: translate(-50%, -50%) !important;}
    .reviewLayer .popBox .popConts {max-height: 500rem;}

}
@media (max-width:767px){
    .sub_title h2 {font-size: 35rem;}
    .box-wrap {padding-top: 50rem;}
    .box-wrap .box + .box {margin-top: 40rem; padding-top: 40rem;}
    .box-wrap .cont.list {grid-template-columns: repeat(1,1fr); gap: 15rem;}
    .box-wrap .cont.list > div {height: auto; padding: 40rem 30rem;}

    .curriculum h3 {margin-bottom: 20rem;}
    .curriculum .text p {line-height: 1.5;}
    .curriculum .list {gap: 15rem !important;}
    .curriculum .list.v1 li {padding: 25rem 10rem;}
    .curriculum .list.v1 li span.img {width: 80rem; height: 80rem;}
    .curriculum .list.v2 li {padding: 35rem 20rem;}
    .curriculum .list.v2 li span.img {height: 60rem;}
    .curriculum .list li p {margin-top: 15rem;}
    .curriculum .list.v3 {grid-template-columns: repeat(2,1fr);}
    .curriculum .list.v3 li {padding: 35rem 10rem;}
    .curriculum .list.v4 {grid-template-columns: repeat(3,1fr);}
    .curriculum .list.v4 li span.img {aspect-ratio: 24 / 28;}
    .curriculum .teacher__info span.more {padding: 8rem 20rem; font-size: 14rem; margin-top: 15rem;}
    .curriculum .teacher__info {margin-top: 20rem;}
    .curriculum .teacher__info p {margin-top: 10rem !important;}
    .curriculum .accordion .cont {padding: 25rem; margin-top: 8rem; border-radius: 5rem;}
    .curriculum .accordion .btn {padding: 15rem; margin-top: 8rem;}
    .curriculum .curri__text {padding: 22rem;}
    .review-cont {padding: 35rem 25rem;}

    .teachLayer .popBox {padding: 20rem}
    .teachLayer .popBox .popConts {gap:30rem;}
    .reviewLayer .popBox .popConts {padding: 15rem 15rem 30rem 15rem;}

    .preLayer .popBox .popTitle {padding: 15rem}
    
    [data-sub="toolSecurity"] .curriculumList{grid-template-columns:1fr;}
    [data-sub="toolSecurity"] .curriculumList_cnt ul{flex-direction:row; flex-wrap:wrap;}
    [data-sub="toolSecurity"] .curriculumList_cnt ul li{width:calc(50% - 4rem);}
    [data-sub="toolSecurity"] .b3 .navBtn{width:50rem;}
    [data-sub="toolSecurity"] .b3 .navBtn:after{font-size:20rem;}
    [data-sub="toolSecurity"] .b3 .swiper-button-next{right:-8rem;}
    [data-sub="toolSecurity"] .b3 .swiper-button-prev{left:-8rem;}
    [data-sub="toolSecurity"] .reference{grid-template-columns:repeat(3,1fr);}
}
@media (max-width:480px){
    #content {padding: 55rem 0;}
    .tit-box {padding-bottom: 35rem;}
    .sub_title h2 {font-size: 25rem;}
    .box-wrap .tit {margin-bottom: 20rem;}
    .box-wrap .cont.img {grid-template-columns: repeat(1,1fr);}
    .box-wrap .cont.list > div {padding: 30rem; flex-direction: column-reverse; gap: 30rem;}
    .box-wrap .cont.list dl {width: 100%;}
    .box-wrap .cont.list dd {margin-top: 15rem;}
    .box-wrap .cont.list span.icon {width: 60rem; align-self: flex-start;}
    .box-wrap .cont.video .video-conts .play {font-size: 70rem;}
    .curriculum .list {grid-template-columns: repeat(2,1fr); gap: 10rem !important;}
    .curriculum .list li {border-radius: 3rem;}
    .curriculum .list.v1 {grid-template-columns: repeat(2,1fr);}
    .curriculum .list.v1 li {padding: 20rem 10rem;}
    .curriculum .list.v1 li span.img {width: 50rem; height: 50rem;}
    .curriculum .list li p {margin-top: 12rem; line-height: 1.3;}
    .curriculum .list.v2 {grid-template-columns: repeat(2,1fr);} 
    .curriculum .list.v2 li {padding: 25rem 15rem;}
    .curriculum .list.v2 li span.img {height: 45rem;}
    .curriculum .list.v3 li {padding: 25rem 10rem;}
    .curriculum .list.v3 li span.img {height: 40rem;}
    .curriculum .list.v4 {grid-template-columns: repeat(2,1fr);}
    .curriculum .accordion .cont dt {margin-bottom: 15rem; gap: 10rem;}
    .curriculum .accordion .cont dt span {padding: 8rem 12rem;}
    .curriculum .accordion .cont {padding: 22rem;}
    .curriculum .accordion .cont dl + dl {margin-top: 25rem; padding-top: 25rem;}
    .curriculum .curri__text {padding: 18rem;}
    .curri__preview {grid-template-columns: repeat(1,1fr);}
    .curri__preview .pre-cont p {margin-top: 15rem;}
    .teachLayer .popBox {padding: 10rem;}
    .teachLayer .popBox .popConts {flex-direction: column; gap: 20rem; height: 500rem;}
    .teachLayer .popConts-txt {flex: 1;}
    .teachLayer .popConts-img {height: 330rem;}
    .teachLayer .tit span {margin-bottom: 10rem; padding: 8rem 12rem}
    .teachLayer .tit h2 {font-size: 20rem;}
    .teachLayer .career dt {margin-bottom: 10rem;}
    .teachLayer .career dd {font-size: 13rem;}
    [data-pop-layer="layer"] .popBox .btn_close {width: 50rem; height: 50rem; line-height: 50rem;}

    .review-cont dt {margin-top: 15rem;}
    .review-cont dd {margin-top: 15rem;}

    .reviewLayer .popBox .popTitle {min-height: auto; padding: 15rem 15rem; font-size: 18rem;}
    .reviewLayer [data-form="write"] {gap: 15rem;}
    .reviewLayer [data-form="write"] li { grid-column: 1 / 3;}
    .reviewLayer [data-form="write"] li label {margin-bottom: 10rem; font-size: 15rem;}
    .reviewLayer [data-form="write"] input[type="text"], .reviewLayer [data-form="write"] select {height: 45rem; padding: 0 10rem; }
    .reviewLayer [data-form="write"] textarea {padding: 15rem;}
    .reviewLayer [data-formwrite="spam"] input[type="text"] {width: calc(100% - 80rem);}
    .reviewLayer [data-formwrite="spam"] .spam {height: 45rem; min-width: auto; padding: 0 12rem; font-size: 15rem; font-weight: 400;}
    .reviewLayer .submit {padding: 15rem 30rem}
    .reviewLayer .btn_area { margin-top: 20rem; padding-bottom: 0;}
    
    [data-sub="toolSecurity"] .b1 p > br.hide480{display:none;}
    [data-sub="toolSecurity"] .curriculumList_tit{padding:15rem 10rem;}
    [data-sub="toolSecurity"] .curriculumList_tit span{padding:5rem 0; width:90rem;}
    [data-sub="toolSecurity"] .curriculumList_tit em{margin-top:10rem;}
    [data-sub="toolSecurity"] .curriculumList_cnt p{margin:20rem 0; padding:0 15rem;}
    [data-sub="toolSecurity"] .curriculumList_cnt ul{flex-direction:column;}
    [data-sub="toolSecurity"] .curriculumList_cnt ul li{padding:6rem 10rem; width:100%;}
    [data-sub="toolSecurity"] .b3 .swiper{width:100%;}
    [data-sub="toolSecurity"] .b3 .navBtn{display:none;}
    [data-sub="toolSecurity"] .b3 .swiper-pagination{display:block;}
    [data-sub="toolSecurity"] .reference{grid-template-columns:repeat(2,1fr); gap:10rem;}
    [data-sub="toolSecurity"] .reference li{padding:20rem 10rem;}
    [data-sub="toolSecurity"] .reference em{margin-top:20rem;}
}