/* reset, common */
body{overflow-x: hidden;}
#container:after{display: none;}
#container{padding: 0; min-width: 1200px; max-width:1920px; margin: 0 auto; text-align: unset;}
#container .innerBox{width: 1100px; margin: 0 auto; position: relative;}
#container *{font-family: 'Pretendard', sans-serif;}
#container img{vertical-align:top;}
button{padding: 0; margin: 0;}

article{color: #222; letter-spacing: -0.025em; line-height: 1.2;}
.txt-hide {overflow: hidden; border: 0; position: absolute; z-index:-1; width:1px; height:1px; clip: rect(1px, 1px, 1px, 1px); clip-path:inset(50%);}

:root {
	--color-basic: #222;
	--color-1: #23c1ff;
	--color-2: #602ce2;
	--color-gray-1: #666;
}
.txc-basic{color: var(--color-basic) !important;}
.txc-1{color: var(--color-1) !important;}
.txc-2{color: var(--color-2) !important;}
.txc-g1{color: var(--color-gray-1);}
.txt-em{background: linear-gradient(193deg, var(--color-1) 0%, var(--color-2) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;}
.cont-tit{color: #222; font-size: 44px; font-weight: 700; line-height: 1.2; margin-bottom: 45px;}


/* button */
.btn-apply{display: flex; align-items: center; justify-content: center; min-width: 360px; height: 76px; padding: 0 25px; font-size: 24px; font-weight: 500; line-height: 1; white-space: nowrap; border-radius: 12px; box-shadow: 0 5px 20px rgba(0, 0, 0, .1); transition: box-shadow 0.4s; z-index: 1;}
.btn-apply.btn-type01{color: #fff; background: linear-gradient(193deg, #333 0%, #000 100%);}
.btn-apply.btn-type02{color: #fff; background: linear-gradient(193deg, var(--color-1) 0%, #6009ba 100%);}
.btn-apply .ico-arrow{width: 15px; height: 15px; stroke-width: 1px; stroke: #ebebec; fill: none; margin-left: 30px; margin-right: -15px;}
.btn-apply.btn-link::after{display: block; width: 20px; height: 20px; margin-left: 20px; background: url('/mobile/event/2026/0327/img/ico_link.png') center / 100% no-repeat; content: '';}
.btn-apply:hover{box-shadow: 0 10px 30px rgba(0, 0, 0, .5);}


/* bg */
.visual_wrap{background: url('img/bg_visual.jpg') center top no-repeat; position: relative;}
.visual_wrap_btm{background: url('img/bg_visual_btm.jpg?v2') center top no-repeat;}
.cont01{background: url('img/bg_01.jpg') center top no-repeat; border-radius: 0 0 70px 70px;}
.cont03{background-color: #ececec;}
.cont05{background-color: #222;}
.cont07{background: url('img/bg_07.jpg') center top no-repeat;}
.cont08{background-color: #f1f2f8;}
.cont09{background-color: #e5e5e5;}


/* visual */
.visual_wrap .bg_on{position: absolute; top: 0; left: 50%; transform: translateX(-50%); opacity: 0; z-index: 1; animation: blink-1 1.2s infinite alternate;}
.visual_wrap .tit-wrap{position: absolute; top: 115px; left: 0; z-index: 2;}
.visual_wrap .tit-wrap .tit-2{display: block; margin-left: -67px; margin-top: 40px;}
.visual_wrap .tit-wrap .tit-3{display: block; margin-left: -62px; margin-top: -60px;}
@keyframes blink-1 {
	100% {
		opacity: 1;
	}
}


/* cont */
.benefit-list {
	list-style: none;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(6, 1fr);
	gap: 20px;
}
.benefit-list li {
	position: relative;
	background: #fff;
	border-radius: 16px;
	padding: 32px 28px 28px 30px;
	box-shadow: 0 4px 20px rgba(0, 0, 0, 0.07);
	display: flex;
	flex-direction: column;
}
.benefit-text {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.benefit-list li:nth-child(1),
.benefit-list li:nth-child(2) {
	grid-column: span 3;
}
.benefit-list li:nth-child(3),
.benefit-list li:nth-child(4),
.benefit-list li:nth-child(5) {
	grid-column: span 2;
}
.benefit-badge {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 60px;
	height: 60px;
	border-radius: 50%;
	background: var(--color-1);
	color: #fff;
	font-size: 24px;
	font-weight: 600;
	display: flex;
	align-items: center;
	justify-content: center;
}
.benefit-title {
	font-size: 30px;
	font-weight: 700;
	color: #111;
	margin: 0 50px 30px 0;
	line-height: 1.3;
}
.benefit-title strong {
	color: var(--color-1);
}
.benefit-desc {
	font-size: 20px;
	color: #555;
	line-height: 1.6;
	margin: 0;
	letter-spacing: -0.025em;
}
.benefit-desc strong {
	color: #111;
}
.cont02 .box-wrap{display: flex; gap: 12px;}
.cont02 .box-wrap li{flex-grow: 1; flex-basis: 0; padding: 40px 0 30px; border-radius: 16px; box-shadow: 0 10px 50px rgba(0, 0, 0, 0.15);}
.cont03 .txt-box{display: flex; align-items: center; padding: 18px 40px; line-height: 1.5; background-color: #fff; border: 2px solid #000; border-radius: 16px;}
.cont03 .txt-box:not(:first-child){margin-top: 17px;}
.cont03 .txt-box.box-1{border-color: var(--color-1);}
.cont03 .txt-box.box-2{border-color: var(--color-2);}
.cont03 .txt-box.box-3{border-color: #ff2eb2;}
.cont03 .txt-box .tit{width: 310px; flex-shrink: 0;}
.cont03 .txt-box .txt{color: #555; padding-left: 55px;}
.cont03 .txt-box .divide{width: 1px; height: 125px; background-color: #dadada;}


/* course-card */
.course-cards-wrap{display: flex; gap: 20px;}
.course-card{flex: 1; overflow: hidden; border-radius: 16px; box-shadow: 0 8px 40px rgba(0,0,0,.12);}
.course-card .course-header{padding: 28px 30px;}
.course-card .course-header-top{display: flex; align-items: flex-start; margin-bottom: 16px;}
.course-card .course-header-title{display: flex; align-items: flex-start; gap: 10px;}
.course-card .month-badge{background: #000; color: #fff; font-size: 20px; font-weight: 500; padding: 5px 15px; border-radius: 6px; white-space: nowrap; margin-top: 5px;}
.course-card .course-name{color: #fff; font-size: 30px; font-weight: 600; line-height: 1.3; word-break: keep-all;}
.course-card .course-fit-label{color: #fff; font-size: 14px; font-weight: 600; margin-bottom: 8px;}
.course-card .course-fit-list{list-style: none; padding: 0; display: flex; flex-direction: column; gap: 5px;}
.course-card .course-fit-list li{color: rgba(255,255,255,.85); font-size: 15px; display: flex; align-items: flex-start; gap: 8px; line-height: 1.5;}
.course-card .course-fit-list li::before{content: ''; display: inline-block; width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline points='2,9 6,13 14,4' fill='none' stroke='%2323c1ff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-size: contain; background-repeat: no-repeat;}
.course-card .course-body{background-color: #fff; height: 100%;}
.course-card .course-section{padding: 24px 30px; position: relative;}
.course-card .course-section::after{content: ''; display: block; position: absolute; bottom: 0; left: 30px; right: 30px; height: 1px; background: #f0f0f0;}
.course-card .course-section:last-child::after{display: none;}
.course-card .section-header{display: flex; align-items: center; gap: 10px; margin-bottom: 10px;}
.course-card .section-icon{width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background-size: 100%; background-repeat: no-repeat; background-position: center;}
.course-card .section-icon.point{background-image: url('/mobile/event/2026/0327/img/ico_point_01.png');}
.course-card .section-icon.what{background-image: url('/mobile/event/2026/0327/img/ico_point_02.png');}
.course-card .section-title{font-size: 18px; font-weight: 700; color: #111; letter-spacing: 0.03em;}
.course-card .section-body{font-size: 16px; color: #444; line-height: 1.65; padding-left: 28px; word-break: keep-all;}
.course-card .section-body p{margin-bottom: 14px;}
.course-card .section-body p:last-child{margin-bottom: 0;}
.course-card .section-body strong{display: block; color: #111; font-weight: 700;}
.course-card .course-tags{padding: 20px 80px 30px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px;}
.course-card .tag{background-color: #f1f1f1; color: #222; font-size: 14px; font-weight: 600; padding: 6px 16px; border-radius: 20px;}
#courseCard-1 .course-header{background-color: var(--color-2);}
#courseCard-1 .section-icon{background-color: var(--color-2);}
#courseCard-2 .course-header{background-color: var(--color-1);}
#courseCard-2 .section-icon{background-color: var(--color-1);}
#courseCard-2 .course-fit-list li::before{background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpolyline points='2,9 6,13 14,4' fill='none' stroke='%23602ce2' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");}
.course-card.single{display: flex;}
.course-card.single .course-header{width: 350px; box-sizing: border-box;}
.course-card.single .course-body{flex-grow: 1;}


/* slide */
.curri-slide{position: relative;}
.curri-slide .swiper{overflow: visible;}
.curri-slide .swiper-slide{width: 343px; opacity: 0.2; transition: opacity 1s;}
.curri-slide .swiper-slide-active,
.curri-slide .swiper-slide-active + .swiper-slide,
.curri-slide .swiper-slide-active + .swiper-slide + .swiper-slide{opacity: 1;}
.curri-slide .swiper-button-next,
.curri-slide .swiper-button-prev{width: 70px; height: 70px; background: #fff; border-radius: 50%; box-shadow: 0 4px 16px rgba(0,0,0,.15);}
.curri-slide .swiper-button-next .ico,
.curri-slide .swiper-button-prev .ico{display: block; width: 36px; height: 36px; fill: none; stroke: #222; stroke-width: 1.5;}
.curri-slide .swiper-button-next.swiper-button-disabled,
.curri-slide .swiper-button-prev.swiper-button-disabled{opacity: 0;}
.curri-slide .swiper-button-next{right: -100px;}
.curri-slide .swiper-button-prev{left: -120px;}
.pofol-slide{position: relative; width: 720px; margin: 0 auto;}
.pofol-slide .swiper{overflow: hidden; border: 2px solid transparent; border-radius: 16px; background: linear-gradient(#fff, #fff) padding-box, linear-gradient(315deg, var(--color-1) 0%, #a346f9 100%) border-box; box-shadow: 0 8px 40px rgba(0,0,0,.1);}
.pofol-slide .swiper-slide{background: #fff; padding: 45px 85px; box-sizing: border-box;}
.pofol-slide .thmb{display: block; width: 546px; margin: 0 auto 20px; border: 1px solid #b1b1b1; border-radius: 10px;}
.pofol-slide .pofol-title{font-size: 26px; font-weight: 700; color: #111; line-height: 1.3; text-align: center; margin-bottom: 20px;}
.pofol-slide .pofol-desc{font-size: 20px; font-weight: 500; color: #111; line-height: 1.6; margin-bottom: 24px;}
.pofol-slide .pofol-review{font-size: 18px; color: #0e0e0e; line-height: 1.6; word-break: keep-all; border-top: 1px solid #adadad; padding-top: 30px; margin-top: 30px;}
.pofol-slide .swiper-button-next,
.pofol-slide .swiper-button-prev{width: 70px; height: 70px;}
.pofol-slide .swiper-button-next .ico,
.pofol-slide .swiper-button-prev .ico{display: block; width: 100%; height: 100%; fill: none; stroke: #222; stroke-width: 1.5;}
.pofol-slide .swiper-button-next{right: -120px;}
.pofol-slide .swiper-button-prev{left: -120px;}
.pofol-slide .swiper-pagination{position: static; margin-top: 20px;}
.pofol-slide .swiper-pagination-bullet{width: 12px; height: 12px;}
.pofol-slide .swiper-pagination-bullet-active{background-color: var(--color-1);}


/* with-itbank */
.with-itbank .box-wrap{display: flex; align-items: center; justify-content: space-between; position: relative;}
.with-itbank .box-wrap p{color: #333; font-size: 30px; font-weight: 500; white-space: nowrap;}
.with-itbank .box-wrap .box{overflow: hidden; width: 320px; padding: 140px 0 30px; color: #333; text-align: center; background: no-repeat;}
.with-itbank .box-wrap .box01{background-image: url('./img/sub/withitbank_card_01.png');}
.with-itbank .box-wrap .box02{background-image: url('./img/sub/withitbank_card_02.png');}
.with-itbank .box-wrap .box03{background-image: url('./img/sub/withitbank_card_03.png');}
.with-itbank .box-wrap .box04{background-image: url('./img/sub/withitbank_card_04.png');}
.with-itbank .box-wrap .box05{background-image: url('./img/sub/withitbank_card_05.png');}
.with-itbank .box-wrap .box06{background-image: url('./img/sub/withitbank_card_06.png');}
.with-itbank .box-wrap .box .tit{font-size: 24px; font-weight: 600; margin-bottom: 5px;}
.with-itbank .box-wrap .box .txt{font-size: 16px; font-weight: 300;}
.with-itbank .box-wrap::before{display: block; position: absolute; width: 0; height: 3px; background-color: #fff; transition: width 0.4s; content: '';}
.with-itbank .box-wrap.wrap01::before{top: 123px; left: 2px; transform: translateX(-100%); transition-delay: 0.5s;}
.with-itbank .box-wrap.wrap02{margin-top: 18px;}
.with-itbank .box-wrap.wrap02::before{top: 118.5px; right: 4.5px; transform: translateX(100%); transition-delay: 0.5s;}
.with-itbank .m-act .box-wrap::before{width: 50%;}


/* faq */
.faq-wrap{list-style: none; padding: 0;}
.faq-wrap .faq-box{margin-bottom: 20px; background-color: #fff; border-radius: 16px;}
.faq-wrap .q-box{display: block; cursor: pointer;}
.faq-wrap .q-box .inner{display: flex; position: relative; align-items: center; padding: 22px 30px;}
.faq-wrap .q-box .inner::before{content: 'Q'; width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 12px; background: var(--color-1); color: #fff; font-size: 20px; font-weight: 500; margin-right: 20px; flex-shrink: 0;}
.faq-wrap .q-box .inner::after{content: ''; display: block; position: absolute; right: 30px; width: 20px; height: 20px; background: url('/mobile/event/2026/0327/img/ico_arrow.png') center / 100% no-repeat; transition: transform 0.4s;}
.faq-wrap .q-box.act .inner::after{transform: rotate(180deg);}
.faq-wrap .q-box .tit{color: #666; font-size: 22px; font-weight: 500; padding-right: 40px; word-break: keep-all;}
.faq-wrap .a-box{display: none;}
.faq-wrap .a-box .inner{display: flex; align-items: flex-start; padding: 20px 30px; border-top: 1px solid #e8e8e8;}
.faq-wrap .a-box .inner::before{content: 'A'; width: 36px; height: 36px; line-height: 36px; text-align: center; border-radius: 12px; background: var(--color-2); color: #fff; font-size: 20px; font-weight: 500; margin-right: 20px; flex-shrink: 0;}
.faq-wrap .a-box .txt-area{color: #222; font-size: 22px; line-height: 1.5; word-break: keep-all;}


/* floating */
.flt-banr{position: fixed; width: 100%; bottom: 0; left: 0; background: url('./img/bg_floating.jpg') center top no-repeat; z-index: 10; transform: translateY(100%); box-shadow: 0 -5px 30px rgba(0,0,0,.2); transition: transform 1s;}
.flt-banr .btn-flt{overflow: hidden; position: absolute; bottom: 0; right: 0; width: 545px; height: 100%; text-indent: -999em;}
.flt-banr.act{transform: translateY(0);}


/* modal-pop */
.modal-pop-wrap{display: none; position: fixed; top: 0; left: 0; bottom: 0; right: 0; background-color: rgba(0,0,0,.7); z-index: 999;}
.modal-pop-wrap .modal-container{display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;}
.modal-pop-wrap .modal-box{display: none; position: relative; width: 380px; padding: 40px; color: #000; background-color: #fff; border-radius: 20px; box-sizing: border-box;}
.modal-pop-wrap .modal-box.modal-slide-up{animation: modalSlideUp 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;}
@keyframes modalSlideUp{from{opacity:0; transform:translateY(60px);}to{opacity:1; transform:translateY(0);}}
.modal-pop-wrap .modal-box .btn-x{display: block; position: absolute; top: 20px; right: 20px; width: 25px; height: 25px; background: url('./img/ico_close.png') center no-repeat;}
.modal-pop-wrap .modal-box .tit{color: var(--color-1); font-size: 24px; text-align: center; font-weight: 700; white-space: nowrap;}
.modal-pop-wrap .modal-box p.sub{font-size: 14px; text-align: center; margin-top: 10px;}
.modal-pop-wrap .modal-box .agree-area .mid{padding: 8px 10px; color: #353535; font-size: 12px; margin-bottom: 8px; background-color: #c2c2c2;}
.modal-pop-wrap .modal-box .btn-submit{width: 100%; height: 54px; color: #fff; font-size: 24px; font-weight: 700; background-color: var(--color-2); text-align: center; border-radius: 10px;}


/* input */
.input-area{margin: 20px 0;}
.input-area > label{display: block; font-size: 14px; margin-bottom: 8px;}
.input-area > label .red{color: #ff6a6a;}
.input-area input[type="text"]{width: 100%; height: 44px; padding-left: 15px; font-size: 14px; border: 1px solid #e4e4e4; border-radius: 8px; box-sizing: border-box;}
.check-list-wrap{display: flex; flex-wrap:wrap; gap: 10px;}
.check-list-wrap .check-area{padding-right: 15px;}
.check-area{display: flex; gap: 7px;}
.check-area input[type="checkbox"]{width: 16px; height: 16px; margin: 0;}
.check-area > label{font-size: 14px;}
.check-area > label small{color: #c2c2c2; font-size: 12px;}
.radio-area {display: flex; gap: 7px; margin: 10px 0;}
.radio-area input[type="radio"]{width: 16px; height: 16px; margin: 0;}
.radio-area > label{font-size: 14px;}