body {padding-top:120px;}
@media(max-width:1280px) {
    body {padding-top: 0;}
}

/*결제*/
#contents .payRadio label {margin-bottom:5px; box-shadow:none;}
.paymentArea table.basicTb2.pay_basicTb2 tr:not(.settle_bank) td {padding-left:20px;}

/*상담예약팝업*/
.reserve_popup {display: none;width: 100%;max-width: 650px;}
.reserve_popup .popup_contents { width: 520px; max-width: 100%; padding:35px 40px 28px; background:#fff; border:2px solid #3b93ef; /*border-radius:8px;*/}
.reserve_popup .reserve_form li {display:flex;}
.reserve_popup .reserve_form li + li {margin-top:12px;}
.reserve_popup .reserve_form .form_title {width:84px; flex-shrink:0; font-size:20px; color:#1e1e1e; font-weight:bold;}
.reserve_popup .reserve_form .form_input_box {flex-grow:1;}
.reserve_popup .reserve_form .form_input_box input[type=text] {width:100%; height:33px; padding: 0 16px; font-size:20px; color:#1e1e1e; font-size:14px; font-weight:500; border:1px solid #a4a4a4; border-radius:4px;}
.reserve_popup .reserve_form .form_input_box input[type=text]::placeholder {color:#a4a4a4;}
.reserve_popup .reserve_form .form_input_box.phone_number {display:flex; align-items:center; gap:7px;}
.reserve_popup .reserve_form .form_input_box.phone_number input {width:35%;}
.reserve_popup .reserve_form .form_input_box.phone_number input:first-child {width:30%;}
.reserve_popup .reserve_form .form_input_box.phone_number .hyphen {font-size:20px; font-weight:bold;}
.reserve_popup .agree_box {display:flex; margin-top:30px; flex-wrap:wrap; gap:8px 15px;}
.reserve_popup .agree_box .agree_text {flex-grow:1; font-size:16px; color:#1e1e1e;}
.reserve_popup .agree_box .agree_text input[type=checkbox] {display:none; visibility:hidden;}
.reserve_popup .agree_box .check_box {display:inline-block; width:18px; height:18px; margin-top: -2px; margin-left:9px; border:1px solid #3b93ef; border-radius:4px; vertical-align:middle;}
.reserve_popup .agree_box .agree_text input[type=checkbox]:checked ~ .check_box {background:rgba(59, 147, 239, 0.15) url(/USER_SKIN/smartfriends/images/common/icon_check.png) center no-repeat; background-size:13px 10px;}
.reserve_popup .agree_box .popview {margin-left:auto; font-size:14px; font-weight:500; color:#3b93ef;}
.reserve_popup .popup_btn_area {display:flex; flex-wrap:wrap; justify-content:space-between; margin-top:32px;}
.reserve_popup .popup_btn_area .btn {display:flex; justify-content:center; align-items:center; width:100%; height:48px; font-size:24px; font-weight:bold; color:#fff; background-color:#3b93ef; border-radius:8px;}

/* 마이페이지 수강후기 안내 팝업 */
.review_pop { text-align: center; padding: 30px 10px; min-width: 400px; } 
.review_pop p { font-size: 16px; } 
.review_pop .msg_cont { font-size: 16px; margin: 30px 0; } 
.review_pop .pop_btn { margin-top: 30px; } 
.review_pop .pop_btn .sampleB { width: 45%; display: inline-block; } 

.viewThumbnail img {max-width:800px; width:100%;}
.viewThumbnail {margin-bottom:30px;}

/*똑똑한 상담신청*/
.counsel_area .counsel_banner_box {display:flex; gap:15px; margin-top:25px;}
.counsel_area .counsel_banner_box img {max-width:100%; vertical-align:top;}
.counsel_area .counsel_text {margin-top:25px;}

/*강의상세 배너*/
.viewBuyBanner {margin-top:12px;}
.viewBuyBanner img {width:100%;}
#contents .viewTabs li a {justify-content: center;}

@media(max-width: 1180px) {
	.viewThumbnail img {max-width:800px; width:100%;}
	.viewThumbnail {margin-bottom:30px;}
}

@media(max-width: 767px) {
	/*상담예약*/
	.reserve_popup .popup_contents {padding:3.7313rem 4.4776rem 2.9851rem;}
	.reserve_popup .reserve_form .form_title {width:76px; font-size:16px;}
	.reserve_popup .agree_box {margin-top:3.7313rem;}
	.reserve_popup .agree_box .agree_text {font-size:15px;}
	.reserve_popup .agree_box .check_box {width:16px; height:16px;}
	.reserve_popup .agree_box .agree_text input[type=checkbox]:checked ~ .check_box {background-size:11px 8px;}
	.reserve_popup .popup_btn_area {margin-top:4.0299rem;}
	.reserve_popup .popup_btn_area .btn {height:5.9701rem; font-size:2.9851rem;}
    /* 마이페이지 수강후기 안내 팝업 ~767px */
    .review_pop { text-align: center; padding:15px 5px; min-width:280px; } 
    .review_pop p { font-size: 13px; } 
    .review_pop .msg_cont { font-size: 13px; margin: 15px 0; } 
    .review_pop .pop_btn { margin-top: 15px; } 
    /*똑똑한 상담신청*/
    .counsel_area .counsel_banner_box {flex-wrap:wrap;}
}
/*강좌목록 지원옵션 추가 by kang 240816*/
.class_list > li span.cate {padding: 19px 0 0;font-size: 14px;font-weight: 500;color: rgb(143, 15, 246);}

/* 계리직공무원 랜딩페이지 CSS 시작 */
.road_img { overflow: hidden; width: 100%; } 
.road_img .pc { display: block; position: relative; left: 50%; width: 1920px; transform: translate(-50%,0); } 
.road_img .mo { display: none; } 
.road_shop .mo_br { display: none; } 
#wrap .road_shop * { font-family: "Pretendard"; letter-spacing: normal; }

.road_roadmap { padding: 93px 0 100px; background-color: #beffd5; } 
.road_roadmap .tit { font-size: 48px; font-weight: 700; line-height: 1.2; color: #1c1c1c; text-align: center; } 
.road_roadmap .txt { margin-top: 13px; font-size: 24px; font-weight: 400; line-height: 1.25; color: #1c1c1c; text-align: center; } 
.road_roadmap .txt.mo { display: none; }
.road_roadmap .img { display: block; margin: 46px auto 0; max-width: 1220px; } 
.road_roadmap .img.pc { display: block; }
.road_roadmap .img.mo { display: none; } 

.road_teacher2 { padding: 93px 0 100px; background: #2b2b2b; } 
.road_teacher2 .tit { font-size: 48px; font-weight: 700; line-height: 1.2; color:#ffffff; text-align: center; } 
.road_teacher2 .tit.mo { display: none; }
.road_teacher2_tab { max-width: 1100px; margin: 45px auto 0; } 
.road_teacher2_tab .tit_list { display: grid; gap:20px; grid-template-columns: repeat(2, 1fr); } 
.road_teacher2_tab .tit_list > li a { display: flex; justify-content: center; align-items: center; height: 56px; background-color: #434343; border-radius: 28px; font-size: 20px; font-weight: 700; color: #b0b0b0; } 
.road_teacher2_tab .tit_list > li.active a { background: #5062ef; color: #fff; } 
.road_teacher2_tab .tab_con { margin-top: 43px; box-shadow: 0px 0px 24px 0px #262727; } 
.road_teacher2_tab .tab_list { display: none; position: relative; } 
.road_teacher2_tab .tab_list .img { overflow: hidden; position: relative; aspect-ratio: 1100 / 521; background-color: #fff; border-radius: 16px; box-shadow: 0px 0px 70px 0px #1a1d24; } 
.road_teacher2_tab .tab_list .img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } 
.road_teacher2_tab .tab_list .img .img_mo { display: none; } 
.road_teacher2_tab .tab_list .view_free { display: flex; justify-content: center; align-items: center; position: absolute; right: 36px; bottom: 36px; width: 200px; height: 52px; background-color: rgb(0, 0, 0, 0.902); border-radius: 8px; font-size: 16px; font-weight: 700; color: rgb(255, 255, 255); animation: freeFloat 0.8s ease infinite, pulse 0.8s ease-in-out infinite; } 
.road_teacher2_tab .tab_list .view_free::after { content:''; width: 21px; height: 21px; margin-left: 14px; background:url('/USER_SKIN/road/images/road_teacher2-free.png') center/contain no-repeat; } 
.road_teacher2_tab .tab_list .free_video { display: none; position: absolute; top: 34px; left: 34px; width: 680px; height: 456px; } 
.road_teacher2_tab .tab_list .free_video iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 

@keyframes freeFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-10px);
    }
    100% {
        transform: translateY(0);
    }
}

.road_smart { padding: 93px 0 100px; background-color: #f8f8f8; } 
.road_smart .tit { font-family: "Pretendard" !important; font-size: 48px; font-weight: 700; line-height: 1.2; color: rgb(28, 28, 28); text-align: center; } 
.road_smart .txt { margin-top: 13px; font-size: 24px; font-weight: 400; line-height: 1.25; color: rgb(28, 28, 28); text-align: center; } 
.road_smart_tab { max-width: 1100px; margin: 47px auto 0; } 
.road_smart_tab .tit_list { display: flex; justify-content: center; gap:20px; } 
.road_smart_tab .tit_list > li { flex: 1; } 
.road_smart_tab .tit_list > li a { display: flex; text-align: center; justify-content: center; align-items: center; height: 76px; background-color: rgb(255, 255, 255); border: 2px solid rgb(255, 255, 255); border-radius: 8px; flex-direction: column; } 
.road_smart_tab .tit_list > li .info { font-size: 16px; line-height: 1.25; color: #aebbad; } 
.road_smart_tab .tit_list > li .tit2 { margin-top: 7px; font-size: 20px; font-weight: 700; line-height: 1; color: #aebbad; } 
.road_smart_tab .tit_list > li.active a { background: #eeffed; border-color: #059800; } 
.road_smart_tab .tit_list > li.active .info { color: #000000; } 
.road_smart_tab .tit_list > li.active .tit2 { color: #059800; } 
.road_smart_tab .tab_con { overflow: hidden; margin-top: 32px; background-color: #fff; border: 4px solid #059800; border-radius: 16px; box-shadow: 0px 0px 70px 0px rgba(5, 152, 0, 0.16); } 
.road_smart_tab .tab_list .img { position: relative; padding-bottom: 50.55%; } 
.road_smart_tab .tab_list .img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } 
.road_smart_tab .tab_list .img .img_mo { display: none; } 

.road_pass { padding: 89px 0 100px; background: #202020; } 
.road_pass h2 .img_pc { display: block; margin: 0 auto; } 
.road_pass h2 .img_mo { display: none; } 
.road_pass_list { display: grid; gap:20px; max-width: 1100px; margin: 72px auto 0; grid-template-columns: repeat(3, 1fr); } 
.road_pass_list > li { overflow: hidden; display: flex; padding: 24px; background-color: rgb(255, 255, 255); border-radius: 12px; flex-direction: column; } 
.road_pass_list > li .pass_tit { position: relative; font-size: 32px; font-weight: 700; line-height: 38px; color: rgb(5, 5, 5); align-self: baseline; z-index: 2; } 
.road_pass_list > li .pass_tit span { font-size: 28px; color: #4ddc47; font-weight: 700; }
.road_pass_list > li .member_price_wrap {  margin-top: 20px; } 
.road_pass_list > li .member_price_wrap .tit { font-size: 20px; font-weight: 700; line-height: 1.2; color: rgb(0, 0, 0); } 
.road_pass_list > li .member_price_wrap .con { display: flex; justify-content: space-between; align-items: flex-end; } 
.road_pass_list > li .member_price_wrap .original_price { display: block; text-align: right; font-size: 16px; line-height: 1.2; color: rgb(160, 160, 160); } 
.road_pass_list > li .member_price_wrap .member_price { display: block; margin-top: 4px; font-size: 20px; font-weight: 700; line-height: 1.2; color: rgb(252, 100, 88); } 
.road_pass_list > li .discount_list { margin-top: 11px; } 
.road_pass_list > li .discount_list > li { display: flex; justify-content: space-between; align-items: center; } 
.road_pass_list > li .discount_list > li .txt { font-size: 16px; line-height: 1.5; color: rgb(68, 68, 68); } 
.road_pass_list > li .discount_price { display: flex; justify-content: space-between; align-items: baseline; margin-top: 20px; padding-top: 7px; border-top: 1px solid #e5e5e5; } 
.road_pass_list > li .discount_price .tit { font-size: 18px; font-weight: 700; letter-spacing:-0.025em !important; color: rgb(0, 0, 0); } 
.road_pass_list > li .discount_price .price { position: relative; top:3px; font-size: 20px; font-weight: 700; color: rgb(0, 0, 0); } 
.road_pass_list > li .discount_price .price strong { margin-right: 4px; font-size: 36px; font-weight: 700; color: rgb(18, 222, 90); } 
.road_pass_list > li .info_list { margin-top: 19px; padding: 20px 16px 17px; background-color: rgb(238, 238, 238); border-radius: 8px; flex-grow:1; } 
.road_pass_list > li .info_list > li { display: flex; flex-wrap:wrap; justify-content: space-between; align-items: center; margin-top: 7px; } 
.road_pass_list > li .info_list > li:first-child { margin-top: 0 !important; } 
.road_pass_list > li .info_list > li:has(.tag),
.road_pass_list > li .info_list > li:has(.tag) + li { margin-top: 16px; } 
.road_pass_list > li .info_list > li:has(.info_detail) + li { margin-top: 12px; } 
.road_pass_list > li .info_list > li .tit_wrap { display: inline-flex; align-items: center; position: relative; } 
.road_pass_list > li .info_list > li .tit_wrap .tit { font-size: 14px; font-weight: 600; color: rgb(0, 0, 0); } 
.road_pass_list > li .info_list > li .tit_wrap .tooltip2_icon { position: relative; top:-1px; width: 16px; height: 16px; margin-left: 8px; background:url('/USER_SKIN/road/images/road_pass_tooltip.png') center/contain no-repeat; border-radius:50%; font-size: 0; } 
.road_pass_list > li .info_list > li .tit_wrap .tooltip2_icon:hover + .tooltip2 { display: block; } 
.road_pass_list > li .info_list > li .tit_wrap .tooltip2 { display: none; position: absolute; right: 25px; bottom: 34px; width: 200px; padding: 9px 10px; background-color: rgb(0, 0, 0); border-radius:4px; font-size: 12px; line-height: 1.5; color: rgb(255, 255, 255); z-index: 2; transform: translate(100%, 0); word-break: keep-all; } 
.road_pass_list > li .info_list > li .tit_wrap .tooltip2::after { content:''; position: absolute; bottom: -8px; left:11px; width: 0; height: 0; border-top: 8px solid #000000; border-right: 6.5px solid transparent; border-left: 6.5px solid transparent; } 
.road_pass_list > li .info_list > li .info_detail { width: 100%; margin-top: 3px; } 
.road_pass_list > li .info_list > li .info_detail > li { display: flex; justify-content: space-between; align-items: center; } 
.road_pass_list > li .info_list > li .info_detail > li .txt2 { padding-right: 12px; font-size: 14px; line-height: 1.571; color: rgb(102, 102, 102); } 
.road_pass_list > li .info_list > li .tag { display: inline-flex; align-items: center; height: 21px; padding: 0 12px; border-radius:21px; font-size: 14px; line-height: 1; color: rgb(0, 0, 0); } 
.road_pass_list > li .info_list > li .tag_yellow { background: #fef6dc; } 
.road_pass_list > li .info_list > li .tag_red { background: #fc6458; } 
.road_pass_list > li .info_list > li .tag_blue { background: #d5d4ff; } 
.road_pass_list > li .info_list > li .txt { padding: 0 12px 0 0; font-size: 14px; color: rgb(0, 0, 0); } 

.road_faq_wrap { padding: 100px 0; background: #202020; }
.road_faq { max-width: 1100px; margin:0 auto; padding: 34px 40px 38px; background-color: #2b2b2b; border-radius: 20px; } 
.road_faq h2 { font-family: "Pretendard" !important; font-size: 48px; font-weight: 700; color: rgb(255, 255, 255); text-align: center; } 
.road_faq h2 span { font-size: 24px; font-weight: 300; } 
.road_faq_list { margin-top: -2px; } 
.road_faq_list > li { display: flex; align-items: flex-start; gap:31px; padding: 40px 60px 35px; } 
.road_faq_list > li + li { border-top: 1px solid #414141; } 
.road_faq_list > li .con { overflow: hidden; width: calc(100% - 48px); } 
.road_faq_list > li .num { display: flex; justify-content: center; align-items: center; width: 48px; height: 48px; background-color: #4ddc47; border-radius: 50%; font-size: 24px; font-weight: 700; color: #050505; } 
.road_faq_list > li .tit { word-break: keep-all; display: block; margin-top: 11px; font-size: 24px; font-weight: 600; line-height: 1.25; color: #4ddc47; } 
.road_faq_list > li .txt { word-break: keep-all; margin-top: 17px; font-size: 16px; font-weight: 400; line-height: 1.5; color: rgb(255, 255, 255); } 

.road_start { padding: 92px 0 80px; background:url('/USER_SKIN/road/images/road_start_bg.png') center/cover no-repeat; text-align: center; } 
.road_start .tit { font-family: "Pretendard" !important; font-size: 48px; font-weight: 700; line-height: 1.2; color: #fff; } 
.road_start .txt { margin-top: 13px; font-size: 24px; line-height: 1.25; color: #fff; } 
.road_start .link { display: inline-flex; justify-content: center; align-items: center; width: 400px; height: 80px; margin-top: 35px; background-color: rgb(0, 0, 0); border-radius:40px; font-size: 20px; font-weight: 700; color: rgb(255, 255, 255); } 

.road_pass2 { padding: 20px 0; background: #202020; } 
.road_pass2 .inner { max-width: 1280px; margin: 0 auto; }
.road_pass2_list { display: grid; gap:25px; grid-template-columns: repeat(3, 1fr); } 
.road_pass2_list > li { position: relative; padding: 19px 26px 33px; background-color: #333333; border-radius: 8px; } 
.road_pass2_list > li::after { content:''; position: absolute; top: 20px; right: 18px; background-position: center center; background-size: contain; background-repeat: no-repeat; } 
.road_pass2_list > li.basic::after { width: 91px; height: 43px; background-image: url('/USER_SKIN/road/images/road_pass2_ico1.png'); } 
.road_pass2_list > li.plus::after { width: 47px; height: 45px; background-image: url('/USER_SKIN/road/images/road_pass2_ico2.png'); } 
.road_pass2_list > li.max::after { width: 52px; height: 43px; background-image: url('/USER_SKIN/road/images/road_pass2_ico3.png'); } 
.road_pass2_list > li .tit { font-size: 28px; font-weight: 700; color: rgb(255, 255, 255); } 
.road_pass2_list > li .tit span { color: #ff3b96; } 
.road_pass2_list > li .txt { margin-top: 12px; } 
.road_pass2_list > li .txt > li { position: relative; padding-left: 25px; font-size: 20px; line-height: 1.2; color: rgb(255, 255, 255); } 
.road_pass2_list > li .txt > li::before { content:''; position: absolute; top: 4px; left: 0; width: 17px; height: 17px; background:url('/USER_SKIN/road/images/road_pass2_list.png') center/contain no-repeat; } 
.road_pass2_list > li .txt > li + li { margin-top: 6px; } 
.road_pass2 .noti { margin-top: 18px; font-size: 14px; font-weight: 300; color: rgba(255, 255, 255, 0.6); line-height: 1.2; }

.free_cs { padding:92px 0 100px; background: url('/USER_SKIN/road/images/free_cs_bg.png') center bottom/cover no-repeat; } 
.free_cs .mt0 {margin-top: 0 !important;}
.free_cs form { display: block; max-width: 1000px; margin: 0 auto; } 
.free_cs .cs_tit { margin-top: 0; font-size: 48px; font-weight: 700; line-height: 1.2; color: #000000; text-align: center; } 
.free_cs .cs_form { display: grid; gap:60px; margin-top: 45px; padding:40px; background: #fff; grid-template-columns: repeat(2, 1fr); } 
.free_cs .cs_form .list_tit { display: flex; align-items: center; gap:9px; font-size: 20px; font-weight: 700; line-height: 1; color: rgb(51, 51, 51); } 
.free_cs .cs_form .list_tit::before { content:''; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-left: 10px solid #e5ad4c; } 
.free_cs .cs_form .list { display: flex; gap:20px; flex-direction: column; } 
.free_cs .cs_form .list > li { display: flex; align-items: flex-start; } 
.free_cs .cs_form .list > li .list_tit { min-width: 101px; margin-top: 10px; white-space: nowrap; } 
.free_cs .cs_form .list > li .input_wrap { display: flex; flex-wrap:wrap; align-items: center; gap:10px 3px; font-size: 20px; color: #333333; flex-grow: 1; } 
.free_cs .cs_form .list > li input[type="text"] { width: 28%; height: 41px; padding: 0 10px; border: 1px solid #cdcdcd; border-radius:0; font-size: 16px; font-weight: 400; color: #666; flex-grow: 1; } 
.free_cs .cs_form .list > li input::placeholder { color: #a4a4a4; }
.free_cs .cs_form .list > li select { height: 41px; padding-left: 10px; background: #fff; border: 1px solid #cdcdcd; font-size: 16px; color: #666; -webkit-appearance: auto; -moz-appearance: auto; appearance: auto; } 
.free_cs .cs_form .list > li .email_select { width: 100%; } 
.free_cs .cs_form .list > li.phone select { width: 28%; flex-grow: 1; }
.free_cs .cs_form .right .noti { height: 146px; margin-top: 11px; padding: 20px; border: 1px solid #cdcdcd; font-size: 12px; line-height: 1.5; color: rgb(102, 102, 102); overflow-y: auto; } 
.free_cs .agree { display: flex; align-items: center; gap:10px; margin-top: 10px; } 
.free_cs .agree::before { content:''; width: 27px; height: 27px; background:url('/USER_SKIN/road/images/cs_check.png') center/contain no-repeat; } 
.free_cs .agree:has(input[type="checkbox"]:checked)::before { background-image: url('/USER_SKIN/road/images/cs_check_on.png'); } 
.free_cs .agree input[type="checkbox"] { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; font-size: initial; clip: rect(0 0 0 0); } 
.free_cs .agree .txt { font-size: 16px; font-weight: 700; color: rgb(102, 102, 102); } 
.free_cs .cstype { display: flex; align-items: center; gap:10px; margin-top: 10px; } 
.free_cs .cstype::before { content:''; width: 27px; height: 27px; background:url('/USER_SKIN/road/images/cs_check.png') center/contain no-repeat; } 
.free_cs .cstype:has(input[type="radio"]:checked)::before { background-image: url('/USER_SKIN/road/images/cs_check_on.png'); } 
.free_cs .cstype input[type="radio"] { overflow: hidden; position: absolute; width: 1px; height: 1px; margin: -1px; font-size: initial; clip: rect(0 0 0 0); } 
.free_cs .cstype .txt { font-size: 16px; font-weight: 700; color: rgb(102, 102, 102); } 
.free_cs .submit { display: flex; justify-content: center; align-items: center; width: 300px; height: 60px; margin: 52px auto 0; background: #000000; border-radius: 8px; font-size: 24px; font-weight: 700; color: rgb(255, 255, 255); } 

.road_need { padding: 93px 0 100px; background: #f4f4f4; } 
.road_need .tit { font-size: 48px; font-weight: 700; line-height: 1.2; color: #1c1c1c; text-align: center; } 
.road_need .txt { margin-top: 13px; font-size: 24px; font-weight: 400; line-height: 1.25; color: #1c1c1c; text-align: center; } 
.road_need .img { display: block; max-width: 1100px; max-width: 100%; margin: 50px auto 0; } 
.road_need .img.mo { display: none; } 

.road_benefit { position: relative; padding: 96px 0 100px; } 
.road_benefit .bg { position: absolute; top: 50%; left: 50%; width: 1920px; z-index: -1; transform: translate(-50%,-50%); } 
.road_benefit .txt { font-size: 24px; line-height: 1.25; color: rgb(255, 255, 255); text-align: center; } 
.road_benefit .tit { margin-top: 11px; font-size: 48px; font-weight: 700; line-height: 1.2; color: #fff; text-align: center; } 
.road_benefit .list { display: grid; gap:20px 33px; max-width: 1100px; margin: 96px auto 0; grid-template-columns: repeat(4, 1fr); } 
.road_benefit .list > li { overflow: hidden; padding:18px 0 30px; background-color: rgb(255, 255, 255); border-radius: 20px; } 
.road_benefit .list > li .img { display: block; width: 176px; margin: 0 auto; font-size: 0; } 
.road_benefit .list > li .img img { width: 100%; transition: transform 0.3s ease;  } 
.road_benefit .list > li:hover .img img { transform: scale(1.5); }
.road_benefit .list > li .list_txt { position: relative; z-index: 1; display: block; margin-top: 9px; font-size: 18px; line-height: 1.2; color: rgba(28, 28, 28, 0.6); text-align: center; } 
.road_benefit .list > li .list_tit { position: relative; z-index: 1; display: block; margin-top: 7px; font-size: 24px; font-weight: 700; line-height: 1.2; color: rgb(28, 28, 28); text-align: center; } 

.road_book { padding: 152px 0 141px; } 
.road_book .tit { font-family: "Pretendard" !important; font-size: 48px; font-weight: 700; line-height: 1.2; color: rgb(28, 28, 28); text-align: center; } 
.road_book .txt { margin-top: 14px; font-size: 24px; line-height: 1.25; color: rgb(28, 28, 28); text-align: center; } 
.road_book_slide { overflow: hidden; position: relative; max-width: 1722px; margin: 47px auto 0; } 
.road_book_slide .inner { max-width: 1280px; margin: 0 auto; } 
.road_book_list { justify-content: center; } 
.road_book_slide.on .road_book_list { justify-content: start; } 
.road_book_list > li { width: 256px; } 
.road_book_list > li .img { display: block; position: relative; aspect-ratio: 186 / 257; margin: 0 35px; } 
.road_book_list > li .img img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } 
.road_book_list > li .book_tit { display: flex; justify-content: center; align-items: center; min-height:56px; margin-top: 18px; font-size: 20px; font-weight: 600; line-height: 1.4; color: rgb(28, 28, 28); text-align: center; } 
.road_book .btn_arr { display: flex; justify-content: center; align-items: center; position: absolute; top: calc(50% - 37px); width: 40px; height: 40px; background-color: rgba(101, 128, 136,0.6); border-radius:50%; z-index: 1; transform: translate(0,-50%); } 
.road_book .btn_arr img { width: 7px; height: 11px; }
.road_book .btn_arr.btn_prev { left: 50%; margin-left: -660px; } 
.road_book .btn_arr.btn_next { right:50%; margin-right: -660px; } 
.road_book .btn_arr.btn_next img { transform: scaleX(-1); } 

@media(max-width: 1350px) {
    .road_book .btn_arr.btn_prev { left: 15px; margin-left: 0; } 
    .road_book .btn_arr.btn_next { right:15px; margin-right: 0; } 
}

/* 태블릿 */
@media(max-width: 1280px) {
    .road_img .pc {width:146.564%;} 

    .road_roadmap { padding: 7.266vw 0; } 
    .road_roadmap .tit { font-size: 3.75vw; } 
    .road_roadmap .txt { margin-top: 1.016vw; font-size: 1.875vw; } 
    .road_roadmap .img { margin-top: 3.594vw; max-width: 95.938vw; }

    .road_teacher2 { padding: 7.219vw 0 7.812vw; } 
    .road_teacher2 .tit { font-size: 3.75vw; } 
    .road_teacher2_tab { max-width: 85.938vw; margin-top: 3.516vw; } 
    .road_teacher2_tab .tit_list { gap: 1.563vw; } 
    .road_teacher2_tab .tit_list > li a { height: 4.375vw; border-radius: 2.188vw; font-size: 1.563vw; } 
    .road_teacher2_tab .tab_con { margin-top: 3.359vw; box-shadow: 0px 0px 1.875vw 0px #262727; } 
    .road_teacher2_tab .tab_list .img { border-radius: 1.250vw; box-shadow: 0px 0px 5.469vw 0px #1a1d24; } 
    .road_teacher2_tab .tab_list .view_free { right: 2.813vw; bottom: 2.813vw; width: 15.625vw; height: 4.063vw; border-radius: 0.625vw; font-size: 1.250vw; } 
    .road_teacher2_tab .tab_list .view_free::after { width: 1.641vw; height: 1.641vw; margin-left: 1.094vw; } 
    .road_teacher2_tab .tab_list .free_video { top: 2.656vw; left: 2.656vw; width: 53.125vw; height: 35.625vw; }

    .road_smart { padding: 7.219vw 0 7.812vw; } 
    .road_smart .tit { font-size: 3.75vw; } 
    .road_smart .txt { margin-top: 1.016vw; font-size: 1.875vw; } 
    .road_smart_tab { max-width: 85.938vw; margin-top: 3.672vw; } 
    .road_smart_tab .tit_list { gap: 1.562vw; } 
    .road_smart_tab .tit_list > li a { height: 5.938vw; border-radius: 0.625vw; } 
    .road_smart_tab .tit_list > li .info { font-size: 1.25vw; } 
    .road_smart_tab .tit_list > li .tit2 { margin-top: 0.547vw; font-size: 1.562vw; } 
    .road_smart_tab .tab_con { margin-top: 2.5vw; border-radius: 1.25vw; box-shadow: 0px 0px 5.469vw 0px rgba(5, 152, 0, 0.16); }

    .road_pass { padding: 6.953vw 0 7.812vw; } 
    .road_pass h2 .img_pc { width: 65.469vw; } 
    .road_pass_list { gap: 1.562vw; max-width: 85.938vw; margin-top: 5.625vw; } 
    .road_pass_list > li { padding: 1.875vw; border-radius: 0.938vw; } 
    .road_pass_list > li .pass_tit { font-size: 2.500vw; line-height: 2.969vw; } 
    .road_pass_list > li .pass_tit span { font-size: 2.188vw; } 
    .road_pass_list > li .member_price_wrap { margin-top: 1.562vw; } 
    .road_pass_list > li .member_price_wrap .tit { font-size: 1.562vw; } 
    .road_pass_list > li .member_price_wrap .original_price { font-size: 1.250vw; } 
    .road_pass_list > li .member_price_wrap .member_price { margin-top: 0.313vw; font-size: 1.562vw; } 
    .road_pass_list > li .discount_list { margin-top: 0.859vw; } 
    .road_pass_list > li .discount_list > li .txt { font-size: 1.250vw; } 
    .road_pass_list > li .discount_price { margin-top: 1.562vw; padding-top: 0.547vw; } 
    .road_pass_list > li .discount_price .tit { font-size: 1.406vw; } 
    .road_pass_list > li .discount_price .price { top: 0.234vw; font-size: 1.562vw; } 
    .road_pass_list > li .discount_price .price strong { margin-right: 0.313vw; font-size: 2.812vw; } 
    .road_pass_list > li .info_list { margin-top: 1.484vw; padding: 1.562vw 1.250vw 1.328vw; border-radius: 0.625vw; } 
    .road_pass_list > li .info_list > li { margin-top: 0.547vw; } 
    .road_pass_list > li .info_list > li:has(.tag),
    .road_pass_list > li .info_list > li:has(.tag) + li { margin-top: 1.250vw; } 
    .road_pass_list > li .info_list > li:has(.info_detail) + li { margin-top: 0.938vw; } 
    .road_pass_list > li .info_list > li .tit_wrap .tit { font-size: 1.094vw; } 
    .road_pass_list > li .info_list > li .tit_wrap .tooltip2_icon { top: -0.078vw; width: 1.250vw; height: 1.250vw; margin-left: 0.625vw; font-size: 0; } 
    .road_pass_list > li .info_list > li .tit_wrap .tooltip2 { right: 1.953vw; bottom: 2.656vw; width: 15.625vw; padding: 0.703vw 0.781vw; border-radius: 0.312vw; font-size: 0.938vw; } 
    .road_pass_list > li .info_list > li .tit_wrap .tooltip2::after { bottom: -0.5vw; left: 0.859vw; border-width: 0.625vw; border-right-width: 0.500vw; border-left-width: 0.500vw; } 
    .road_pass_list > li .info_list > li .info_detail { margin-top: 0.234vw; } 
    .road_pass_list > li .info_list > li .info_detail > li .txt2 { padding-right: 0.938vw; font-size: 1.094vw; } 
    .road_pass_list > li .info_list > li .tag { height: 1.641vw; padding: 0 0.938vw; border-radius: 1.641vw; font-size: 1.094vw; } 
    .road_pass_list > li .info_list > li .txt { padding: 0 0.938vw 0 0; font-size: 1.094vw; }

    .road_faq_wrap { padding: 7.812vw 0; }
    .road_faq { max-width: 85.938vw; padding: 2.656vw 3.125vw 2.969vw; border-radius: 1.563vw; } 
    .road_faq h2 { font-size: 3.750vw; } 
    .road_faq h2 span { font-size: 1.875vw; } 
    .road_faq_list { margin-top: -0.156vw; } 
    .road_faq_list > li { gap: 2.422vw; padding: 3.125vw 4.688vw 2.734vw; } 
    .road_faq_list > li .con { width: calc(100% - 3.750vw); } 
    .road_faq_list > li .num { width: 3.750vw; height: 3.750vw; font-size: 1.875vw; } 
    .road_faq_list > li .tit { margin-top: 0.859vw; font-size: 1.875vw; } 
    .road_faq_list > li .txt { margin-top: 1.328vw; font-size: 1.250vw; }

    .road_start { padding: 7.023vw 0 6.107vw; } 
    .road_start .tit { font-size: 3.664vw; } 
    .road_start .txt { margin-top: 0.992vw; font-size: 1.832vw; } 
    .road_start .link { width: 30.534vw; height: 6.107vw; margin-top: 2.672vw; border-radius: 3.053vw; font-size: 1.527vw; }

    .road_pass2 { padding: 1.527vw 0 1.328vw; } 
    .road_pass2 .inner { max-width: 97.710vw; }
    .road_pass2_list { gap: 1.908vw; } 
    .road_pass2_list > li { padding: 1.450vw 1.985vw 2.519vw; border-radius: 0.611vw; } 
    .road_pass2_list > li::after { top: 1.563vw; right: 1.406vw; } 
    .road_pass2_list > li.basic::after { width: 7.109vw; height: 3.359vw; } 
    .road_pass2_list > li.plus::after { width: 3.672vw; height: 3.516vw; } 
    .road_pass2_list > li.max::after { width: 4.062vw; height: 3.359vw; }

    .road_pass2_list > li .tit { font-size: 2.137vw; } 
    .road_pass2_list > li .txt { margin-top: 0.916vw; } 
    .road_pass2_list > li .txt > li { padding-left: 1.908vw; font-size: 1.527vw; } 
    .road_pass2_list > li .txt > li::before { top: 0.305vw; width: 1.298vw; height: 1.298vw; } 
    .road_pass2_list > li .txt > li + li { margin-top: 0.458vw; }
    .road_pass2 .noti { margin-top: 1.406vw; font-size: clamp(12px, 1.094vw, 14px); }

    .free_cs { padding: 7.188vw 0 7.812vw; }
    .free_cs form { max-width: 78.125vw; } 
    .free_cs .cs_tit { font-size: 3.75vw; } 
    .free_cs .cs_form { gap: 4.688vw; margin-top: 3.516vw; padding: 3.125vw; } 
    .free_cs .cs_form .list_tit { gap: 0.703vw; font-size: 1.562vw; } 
    .free_cs .cs_form .list_tit::before { border-top-width: 0.469vw; border-bottom-width: 0.469vw; border-left-width: 0.781vw; } 
    .free_cs .cs_form .list { gap: 1.562vw; } 
    .free_cs .cs_form .list > li .list_tit { min-width: 7.890vw; margin-top: 0.781vw; } 
    .free_cs .cs_form .list > li .input_wrap { gap: 0.781vw 0.234vw; font-size: 1.563vw; } 
    .free_cs .cs_form .list > li input[type="text"] { height: 3.203vw; padding: 0 0.781vw; font-size: 1.25vw; } 
    .free_cs .cs_form .list > li select { height: 3.203vw; padding-left: 0.781vw; font-size: 1.25vw; } 
    .free_cs .cs_form .right .noti { height: 11.406vw; margin-top: 0.859vw; padding: 1.562vw; } 
    .free_cs .agree { gap: 0.781vw; margin-top: 0.781vw; } 
    .free_cs .agree::before { width: 2.109vw; height: 2.109vw; }  
    .free_cs .agree .txt { font-size: 1.25vw; } 
    .free_cs .cstype { gap: 0.781vw; margin-top: 0.781vw; } 
    .free_cs .cstype::before { width: 2.109vw; height: 2.109vw; }  
    .free_cs .cstype .txt { font-size: 1.25vw; } 
    .free_cs .submit { width: 23.438vw; height: 4.688vw; margin-top: 4.062vw; border-radius: 0.625vw; font-size: 1.875vw; }

    .road_need { padding: 7.266vw 0 7.812vw; } 
    .road_need .tit { font-size: 3.750vw; } 
    .road_need .txt { margin-top: 1.016vw; font-size: 1.875vw; } 
    .road_need .img { max-width: 85.938vw; margin-top: 3.906vw; }
    
    .road_benefit .bg { width: 146.564%; }
    .road_benefit { padding: 7.323vw 0 7.634vw; } 
    .road_benefit .txt { font-size: 1.832vw; } 
    .road_benefit .tit { margin-top: 0.840vw; font-size: 3.659vw; } 
    .road_benefit .list { gap: 1.527vw 2.519vw; max-width: 83.974vw; margin-top: 7.323vw; } 
    .road_benefit .list > li { padding: 1.382vw 0 2.287vw; border-radius: 1.527vw; } 
    .road_benefit .list > li .img { width: 13.427vw; } 
    .road_benefit .list > li .list_txt { margin-top: 0.688vw; font-size: 1.376vw; } 
    .road_benefit .list > li .list_tit { margin-top: 0.535vw; font-size: 1.832vw; }

    .road_book { padding: 11.875vw 0 11.016vw; } 
    .road_book .tit { font-size: 3.750vw; } 
    .road_book .txt { margin-top: 1.094vw; font-size: 1.875vw; } 
    .road_book_slide { max-width: 134.063vw; margin-top: 3.516vw; } 
    .road_book_slide .inner { max-width: 100vw; }  
    .road_book_list > li { width: 20.000vw; } 
    .road_book_list > li .img { margin: 0 2.734vw; }  
    .road_book_list > li .book_tit { min-height: 4.375vw; margin-top: 1.406vw; font-size: 1.563vw; } 
    .road_book .btn_arr { top: calc(50% - 2.891vw); width: 3.125vw; height: 3.125vw; } 
    .road_book .btn_arr img { width: 0.547vw; height: 0.859vw; }
    .road_book .btn_arr.btn_prev { left: 1.14vw; } 
    .road_book .btn_arr.btn_next { right: 1.14vw; }
}


@media(max-width: 1023px) {
    .road_shop .mo_br { display: block; } 
    .road_shop .pc_br { display: none; } 

    .road_roadmap { padding: 111px 0 120px; } 
    .road_roadmap .tit { font-size: 56px; } 
    .road_roadmap .txt { margin-top: 18px; font-size: 32px; } 
    .road_roadmap .txt.pc { display: none; }
    .road_roadmap .txt.mo { display: block; }
    .road_roadmap .img { margin-top: 59px; max-width: 656px; } 
    .road_roadmap .img.pc { display: none; } 
    .road_roadmap .img.mo { display: block; } 

    .road_teacher2 { padding: 111px 0 120px; } 
    .road_teacher2 .tit { font-size: 56px; } 
    .road_teacher2 .tit.pc { display: none; }
    .road_teacher2 .tit.mo { display: block; }
    .road_teacher2_tab { max-width: 656px; margin-top: 72px; } 
    .road_teacher2_tab .tit_list { gap: 20px; } 
    .road_teacher2_tab .tit_list > li a { height: 56px; border-radius: 28px; font-size: 24px; } 
    .road_teacher2_tab .tab_con { margin-top: 40px; box-shadow: none; } 
    .road_teacher2_tab .tab_list .img { aspect-ratio: 656 / 521; border-radius: 16px; box-shadow: 0px 0px 70px 0px #1a1d24; } 
    .road_teacher2_tab .tab_list .img .img_pc { display: none; } 
    .road_teacher2_tab .tab_list .img .img_mo { display: block; }
    .road_teacher2_tab .tab_list .view_free { position: static; display: flex; width: 270px; height: 56px; margin: 40px auto 0; border-radius: 8px; font-size: 20px; animation:none; } 
    .road_teacher2_tab .tab_list .view_free::after { width: 33px; height: 33px; margin-left: 15px; } 
    .road_teacher2_tab .tab_list .free_video { top: 19px; left: 19px; width: 619px; height: 483px; } 

    .road_smart { padding: 111px 0 120px; } 
    .road_smart .tit { font-size: 56px; } 
    .road_smart .txt { margin-top: 18px; font-size: 32px; }
    .road_smart_tab { max-width: 656px; margin-top: 75px; } 
    .road_smart_tab .tit_list { gap: 16px; } 
    .road_smart_tab .tit_list > li a { height: 120px; border-radius: 8px; } 
    .road_smart_tab .tit_list > li .info { font-size: 20px; } 
    .road_smart_tab .tit_list > li .tit2 { margin-top: 10px; font-size: 26px; letter-spacing:-0.025em !important; } 
    .road_smart_tab .tab_con { margin-top: 32px; border-radius: 16px; box-shadow: 0px 0px 58px 0px rgba(5, 152, 0, 0.16); } 
    .road_smart_tab .tab_list .img { padding-bottom: 117.13%; } 
    .road_smart_tab .tab_list .img .img_pc { display: none; } 
    .road_smart_tab .tab_list .img .img_mo { display: block; } 

    .road_pass { padding: 99px 0 100px; } 
    .road_pass h2 .img_pc { display: none; } 
    .road_pass h2 .img_mo { display: block; width: 720px; margin: 0 auto; } 
    .road_pass_list { gap:40px; max-width: 656px; margin-top: 80px; grid-template-columns: repeat(1, 1fr); } 
    .road_pass_list > li { padding:33px 32px 32px; border-radius: 12px; } 
    .road_pass_list > li .pass_tit { line-height: 1.2; font-size: 48px; } 
    .road_pass_list > li .pass_tit span { font-size: 48px; }
    .road_pass_list > li.plus .pass_tit::after { top: 0; right: -16px; width: 34px; height: 34px; } 
    .road_pass_list > li.max .pass_tit::after { top: 4px; right: -56px; width: 63px; height: 27px; } 
    .road_pass_list > li .member_price_wrap { display: flex; justify-content: space-between; align-items: center; margin-top: 13px; } 
    .road_pass_list > li .member_price_wrap .con { align-items: center; gap:25px; } 
    .road_pass_list > li .member_price_wrap .tit { font-size: 24px; } 
    .road_pass_list > li .member_price_wrap .original_price { font-size: 24px; } 
    .road_pass_list > li .member_price_wrap .member_price { margin-top: 0; font-size: 32px; } 
    .road_pass_list > li .discount_list { margin-top:9px; } 
    .road_pass_list > li .discount_list > li .txt { font-size: 24px; line-height: 1.333; } 
    .road_pass_list > li .discount_price { margin-top:16px; padding-top:2px; border-width: 1px; } 
    .road_pass_list > li .discount_price .tit { font-size: 28px; } 
    .road_pass_list > li .discount_price .price { top:0; font-size: 24px; } 
    .road_pass_list > li .discount_price .price strong { margin-right: 9px; font-size: 48px; } 
    .road_pass_list > li .info_list { display: flex; flex-wrap:wrap; gap:16px 0; margin-top: 33px; padding: 20px 0; border-radius: 8px; } 
    .road_pass_list > li .info_list > li { margin-top: 0; padding: 0 20px; } 
    .road_pass_list > li .info_list > li:first-child { margin-top: 0 !important; } 
    .road_pass_list > li .info_list > li.w100 { width: 100%; } 
    .road_pass_list > li .info_list > li.w50 { width: 50%; } 
    .road_pass_list > li .info_list > li.order2 { order: 2; } 
    .road_pass_list > li .info_list > li.order3 { order: 3; } 
    .road_pass_list > li .info_list > li.order4 { order: 4; } 
    .road_pass_list > li .info_list > li.order5 { order: 5; } 
    .road_pass_list > li .info_list > li.order6 { order: 6; } 
    .road_pass_list > li .info_list > li.order7 { order: 7; } 
    .road_pass_list > li .info_list > li:has(.tag),
    .road_pass_list > li .info_list > li:has(.tag) + li { margin-top: 0; } 
    .road_pass_list > li .info_list > li:has(.info_detail) + li { margin-top: -6px; } 
    .road_pass_list > li .info_list > li .tit_wrap .tit { font-size: 20px; } 
    .road_pass_list > li .info_list > li .tit_wrap .tooltip2_icon { top:0; width: 32px; height: 32px; margin-left: 9px; } 
    .road_pass_list > li .info_list > li .tit_wrap .tooltip2 { right:34px; bottom: 50px; width: 315px; padding:13px 10px; border-radius:4px; font-size: 20px; line-height: 1.2; } 
    .road_pass_list > li .info_list > li .tit_wrap .tooltip2.right { right:180px; } 
    .road_pass_list > li .info_list > li .tit_wrap .tooltip2::after { bottom: -8px; left:11px; border-top-width: 8px; border-right-width: 6.5px; border-left-width: 6.5px; } 
    .road_pass_list > li .info_list > li .info_detail { margin-top: 4px; } 
    .road_pass_list > li .info_list > li .info_detail > li { gap:4px; } 
    .road_pass_list > li .info_list > li .info_detail > li .txt2 { padding-right: 0; font-size: 20px; line-height: 1.6; } 
    .road_pass_list > li .info_list > li .tag { height: 32px; padding: 0 16px; border-radius:16px; font-size: 20px; font-weight: 600; } 
    .road_pass_list > li .info_list > li .txt { padding:0 16px 0 0; font-size: 20px; font-weight: 600; } 
    .road_pass_list > li .rec_img_pc { display: none; }
    .road_pass_list > li .rec_img_mo { display: block; margin: -98px -32px 0; width: calc(100% + 64px); }

    .road_faq_wrap { padding: 100px 0; }
    .road_faq { max-width: 656px; padding:38px 24px 41px; border-radius: 20px; } 
    .road_faq h2 { font-size: 56px; } 
    .road_faq h2 span { font-size: 32px; } 
    .road_faq_list { margin-top: 3px; } 
    .road_faq_list > li { gap:0; padding:40px 0 33px 16px; flex-direction: column; } 
    .road_faq_list > li + li { border-top-width: 1px; } 
    .road_faq_list > li .num { width: 48px; height: 48px; font-size: 24px; } 
    .road_faq_list > li .tit { margin-top: 15px; font-size: 32px; } 
    .road_faq_list > li .txt { margin-top: 25px; font-size: 24px; line-height: 1.333; letter-spacing: -0.01em !important; } 
    .road_faq_list > li .con { width: 100%; } 

    .road_start { padding: 90px 0 109px; background-image: url('/USER_SKIN/road/images/road_start_bg_mo.png'); } 
    .road_start .tit { font-size: 52px; } 
    .road_start .txt { margin-top: 21px; font-size: 32px; } 
    .road_start .link { width: 560px; height: 100px; margin-top: 43px; border-radius:50px; font-size: 32px; } 

    .road_pass2 { padding: 40px 32px; } 
    .road .inner { max-width: 656px; }
    .road_pass2_list { gap:16px; grid-template-columns: repeat(1, 1fr) } 
    .road_pass2_list > li { padding:29px 28px 38px; border-radius: 8px; } 
    .road_pass2_list > li::after { top: 40px; right: 38px; } 
    .road_pass2_list > li.basic::after { width: 132px; height: 63px; background-image: url('/USER_SKIN/road/images/road_pass2_ico1_mo.png'); } 
    .road_pass2_list > li.plus::after { width: 75px; height: 62px; background-image: url('/USER_SKIN/road/images/road_pass2_ico2_mo.png'); } 
    .road_pass2_list > li.max::after { width: 76px; height: 62px; background-image: url('/USER_SKIN/road/images/road_pass2_ico3_mo.png'); } 
    .road_pass2_list > li .tit { font-size: 36px; } 
    .road_pass2_list > li .txt { margin-top: 21px; } 
    .road_pass2_list > li .txt > li { padding-left: 38px; font-size: 28px; } 
    .road_pass2_list > li .txt > li::before { top: 3px; width: 26px; height: 26px; } 
    .road_pass2_list > li .txt > li + li { margin-top: 12px; } 
    .road_pass2 .noti { margin-top: 21px; font-size: 18px; }

    .free_cs { padding: 91px 0 100px; background-image: url('/USER_SKIN/road/images/free_cs_bg_mo.png'); } 
    .free_cs form { max-width: 656px; } 
    .free_cs .cs_txt { font-size: 32px; } 
    .free_cs .cs_tit { font-size: 56px; } 
    .free_cs .cs_form { gap: 0; margin-top: 53px; padding: 32px; border-radius: 10px; grid-template-columns: repeat(1, 1fr); } 
    .free_cs .cs_form .list_tit { gap: 9px; font-size: 20px; } 
    .free_cs .cs_form .list_tit::before { border-top-width: 6px; border-bottom-width: 6px; border-left-width: 10px; } 
    .free_cs .cs_form .list { flex-wrap: wrap; gap: 20px; flex-direction: row; } 
    .free_cs .cs_form .list > li.name { width: 44%; } 
    .free_cs .cs_form .list > li.phone { width: 50%; flex-grow: 1; } 
    .free_cs .cs_form .list > li.email { grid-column: span 2; } 
    .free_cs .cs_form .list > li .list_tit { min-width: 91px; margin-top: 10px; } 
    .free_cs .cs_form .list > li .input_wrap { gap: 10px 3px; font-size: 20px; } 
    .free_cs .cs_form .list > li input[type="text"] { height: 41px; padding: 0 10px; font-size: 16px; } 
    .free_cs .cs_form .list > li.email input[type="text"] { width: 26%; flex-grow: 0; } 
    .free_cs .cs_form .list > li select { height: 41px; padding-left: 10px; font-size: 16px; } 
    .free_cs .cs_form .list > li .email_select { width: 30%; margin-left: 7px; flex-grow: 1; } 
    .free_cs .cs_form .right { margin-top: 28px; } 
    .free_cs .cs_form .right .noti { height: 146px; margin-top: 11px; padding: 20px; } 
    .free_cs .agree { gap: 9px; margin-top: 10px; } 
    .free_cs .agree::before { width: 27px; height: 27px; } 
    .free_cs .agree .txt { font-size: 16px; } 
    .free_cs .cstype { gap: 9px; margin-top: 10px; } 
    .free_cs .cstype::before { width: 27px; height: 27px; } 
    .free_cs .cstype .txt { font-size: 16px; } 
    .free_cs .submit { margin-top: 40px; width: 300px; height: 60px; border-radius: 8px; font-size: 24px; } 

    .road_need { padding: 111px 0 120px; } 
    .road_need .tit { font-size: 56px; } 
    .road_need .txt { margin-top: 18px; font-size: 32px; } 
    .road_need .img { max-width: 694px; margin-top: 77px; } 
    .road_need .img.pc { display: none; } 
    .road_need .img.mo { display: block; } 

    .road_benefit { padding: 113px 0 120px; background:url('/USER_SKIN/road/images/road_benefit_bg_mo.jpg') center/cover no-repeat; } 
    .road_benefit .bg { display: none; } 
    .road_benefit .txt { font-size: 32px; } 
    .road_benefit .tit { margin-top: 17px; font-size: 56px; } 
    .road_benefit .list { display: flex; flex-wrap: wrap; gap: 10px; max-width: 656px; margin-top: 72px; } 
    .road_benefit .list > li { width: 212px; padding: 18px 0 32px; border-radius: 20px; flex-grow: 1; } 
    .road_benefit .list > li .img { width: 176px; } 
    .road_benefit .list > li:hover .img img { transform: scale(1); } 
    .road_benefit .list > li .list_txt { margin-top: 9px; font-size: 18px; } 
    .road_benefit .list > li .list_tit { margin-top: 6px; font-size: 24px; } 

    .road_book { padding: 111px 0 108px; } 
    .road_book .tit { font-size: 56px; } 
    .road_book .txt { margin-top: 17px; font-size: 32px; } 
    .road_book_slide { max-width: 100%; margin-top: 75px; } 
    .road_book_slide .inner { max-width: 660px; } 
    .road_book_list > li { width: 220px; } 
    .road_book_list > li .img {margin: 0 17px;}
    .road_book_list > li .book_tit { align-items: flex-start; margin-top: 28px; font-size: 24px; word-break: keep-all; } 
    .road_book .btn_arr { display: none; }
}



/* 모바일 */
@media(max-width: 720px) {
    .road_img .pc { display: none; } 
    .road_img .mo { display: block; width: 100%; } 

    .road_roadmap { padding: 15.417vw 0 16.667vw; } 
    .road_roadmap .tit { font-size: 7.778vw; } 
    .road_roadmap .txt { margin-top: 2.500vw; font-size: 4.444vw; } 
    .road_roadmap .img { margin-top: 8.194vw; max-width: 91.389vw; }

    .road_teacher2 { padding: 15.417vw 0 16.667vw; } 
    .road_teacher2 .tit { font-size: 7.778vw; } 
    .road_teacher2_tab { max-width: 91.667vw; margin-top: 10.000vw; } 
    .road_teacher2_tab .tit_list { gap: 2.778vw; } 
    .road_teacher2_tab .tit_list > li a { height: 7.778vw; border-radius: 3.889vw; font-size: 3.333vw; } 
    .road_teacher2_tab .tab_con { margin-top: 5.556vw; } 
    .road_teacher2_tab .tab_list .img { border-radius: 2.222vw; box-shadow: 0px 0px 9.722vw 0px #1a1d24; } 
    .road_teacher2_tab .tab_list .view_free { width: 37.500vw; height: 7.778vw; margin-top: 5.556vw; border-radius: 1.111vw; font-size: 2.778vw; } 
    .road_teacher2_tab .tab_list .view_free::after { width: 4.583vw; height: 4.583vw; margin-left: 2.083vw; } 
    .road_teacher2_tab .tab_list .free_video { top: 2.639vw; left: 2.639vw; width: 86.042vw; height: 67.5vw; }

    .road_smart { padding: 15.417vw 0 16.667vw; } 
    .road_smart .tit { font-size: 7.778vw; } 
    .road_smart .txt { margin-top: 2.5vw; font-size: 4.444vw; }
    .road_smart_tab { max-width: 91.111vw; margin-top: 10.417vw; } 
    .road_smart_tab .tit_list { gap: 2.222vw; } 
    .road_smart_tab .tit_list > li a { height: 16.667vw; border-radius: 1.111vw; } 
    .road_smart_tab .tit_list > li .info { font-size: 2.778vw; } 
    .road_smart_tab .tit_list > li .tit2 { margin-top: 1.389vw; font-size: 3.611vw; letter-spacing:-0.025em !important; } 
    .road_smart_tab .tab_con { margin-top: 4.444vw; border-radius: 2.222vw; box-shadow: 0px 0px 8.056vw 0px rgba(5, 152, 0, 0.16); } 
    .road_smart_tab .tab_list .img { padding-bottom: 117.13%; } 
    .road_smart_tab .tab_list .img .img_pc { display: none; } 
    .road_smart_tab .tab_list .img .img_mo { display: block; }

    .road_pass { padding: 13.75vw 0 13.889vw; } 
    .road_pass h2 .img_mo { width: 100vw; } 
    .road_pass_list { gap: 5.556vw; max-width: 91.111vw; margin-top: 11.111vw; } 
    .road_pass_list > li { padding: 4.583vw 4.444vw 4.444vw; border-radius: 1.667vw; } 
    .road_pass_list > li .pass_tit { font-size: 6.667vw; } 
    .road_pass_list > li .pass_tit span { font-size: 6.667vw; }
    .road_pass_list > li.plus .pass_tit::after { right: -2.222vw; width: 4.722vw; height: 4.722vw; } 
    .road_pass_list > li.max .pass_tit::after { top: 0.556vw; right: -7.778vw; width: 8.750vw; height: 3.750vw; } 
    .road_pass_list > li .member_price_wrap { margin-top: 1.806vw; } 
    .road_pass_list > li .member_price_wrap .con { gap: 3.472vw; } 
    .road_pass_list > li .member_price_wrap .tit { font-size: 3.333vw; } 
    .road_pass_list > li .member_price_wrap .original_price { font-size: 3.333vw; } 
    .road_pass_list > li .member_price_wrap .member_price { font-size: 4.444vw; } 
    .road_pass_list > li .discount_list { margin-top: 1.250vw; } 
    .road_pass_list > li .discount_list > li .txt { font-size: 3.333vw; } 
    .road_pass_list > li .discount_price { margin-top: 2.222vw; padding-top: 0.278vw; border-width: 0.139vw; } 
    .road_pass_list > li .discount_price .tit { font-size: 3.889vw; } 
    .road_pass_list > li .discount_price .price { font-size: 3.333vw; } 
    .road_pass_list > li .discount_price .price strong { margin-right: 1.250vw; font-size: 6.667vw; } 
    .road_pass_list > li .info_list { gap: 2.222vw 0; margin-top: 4.583vw; padding: 2.778vw 0; border-radius: 1.111vw; } 
    .road_pass_list > li .info_list > li { padding: 0 2.222vw; } 
    .road_pass_list > li .info_list > li:has(.info_detail) + li { margin-top: -0.833vw; } 
    .road_pass_list > li .info_list > li .tit_wrap .tit { font-size: 2.778vw; } 
    .road_pass_list > li .info_list > li .tit_wrap .tooltip2_icon { width: 4.444vw; height: 4.444vw; margin-left: 1.250vw; } 
    .road_pass_list > li .info_list > li .tit_wrap .tooltip2 { right: 4.722vw; bottom: 6.944vw; width: 43.750vw; padding: 1.806vw 1.389vw; border-radius: 0.556vw; font-size: 2.778vw; } 
    .road_pass_list > li .info_list > li .tit_wrap .tooltip2.right { right: 25.000vw; }  
    .road_pass_list > li .info_list > li .tit_wrap .tooltip2::after { bottom: -1.111vw; left: 1.528vw; border-top-width: 1.2vw; border-right-width: 0.903vw; border-left-width: 0.903vw; }
    .road_pass_list > li .info_list > li .info_detail { margin-top: 0.556vw; } 
    .road_pass_list > li .info_list > li .info_detail > li { gap: 0.556vw; } 
    .road_pass_list > li .info_list > li .info_detail > li .txt2 { font-size: 2.778vw; } 
    .road_pass_list > li .info_list > li .tag { height: 4.444vw; padding: 0 2.222vw; border-radius: 2.222vw; font-size: 2.778vw; } 
    .road_pass_list > li .info_list > li .txt { padding: 0 2.222vw 0 0; font-size: 2.778vw; } 
    .road_pass_list > li .rec_img_mo { margin: -13.611vw -4.444vw 0; width: calc(100vw + 8.889vw); }

    .road_faq_wrap { padding: 13.889vw 0; }
    .road_faq { max-width: 91.111vw; padding:5.278vw 3.333vw 5.694vw; border-radius: 2.778vw; } 
    .road_faq h2 { font-size: 7.778vw; } 
    .road_faq h2 span { font-size: 4.444vw; } 
    .road_faq_list { margin-top: 0.417vw; } 
    .road_faq_list > li { padding:5.556vw 0 4.583vw 2.222vw; } 
    .road_faq_list > li + li { border-top-width: 0.139vw; } 
    .road_faq_list > li .num { width: 6.667vw; height: 6.667vw; font-size: 3.333vw; } 
    .road_faq_list > li .tit { margin-top: 2.083vw; font-size: 4.444vw; } 
    .road_faq_list > li .txt { margin-top: 3.472vw; font-size: 3.333vw; }

    .road_start { padding: 12.5vw 0 15.139vw; background-image: url('/USER_SKIN/road/images/road_start_bg_mo.png'); } 
    .road_start .tit { font-size: 7.222vw; } 
    .road_start .txt { margin-top: 2.917vw; font-size: 4.444vw; } 
    .road_start .link { width: 77.778vw; height: 13.889vw; margin-top: 5.972vw; border-radius: 6.944vw; font-size: 4.444vw; }

    .road_pass2 { padding: 5.556vw 4.444vw 3.056vw; } 
    .road_pass2 .inner { max-width: 91.111vw; }
    .road_pass2_list { gap: 2.222vw; grid-template-columns: repeat(1, 1fr); } 
    .road_pass2_list > li { padding: 4.028vw 3.889vw 5.278vw; border-radius: 1.111vw; } 
    .road_pass2_list > li::after { top: 5.556vw; right: 5.278vw; } 
    .road_pass2_list > li.basic::after { width: 18.333vw; height: 8.75vw; } 
    .road_pass2_list > li.plus::after { width: 10.417vw; height: 8.611vw; } 
    .road_pass2_list > li.max::after { width: 10.583vw; height: 8.611vw; }


    .road_pass2_list > li .tit { font-size: 5.000vw; } 
    .road_pass2_list > li .txt { margin-top: 2.917vw; } 
    .road_pass2_list > li .txt > li { padding-left: 5.278vw; font-size: 3.889vw; } 
    .road_pass2_list > li .txt > li::before { top: 0.417vw; width: 3.611vw; height: 3.611vw; } 
    .road_pass2_list > li .txt > li + li { margin-top: 1.667vw; }
    .road_pass2 .noti { margin-top: 2.917vw; font-size: 2.5vw; }

    .free_cs { padding: 12.639vw 0 13.889vw; }  
    .free_cs form { max-width: 91.667vw; } 
    .free_cs .cs_tit { font-size: 7.778vw; } 
    .free_cs .cs_form { margin-top: 7.361vw; padding:clamp(26px, 4.444vw, 32px); border-radius: clamp(8px, 1.389vw, 10px); } 
    .free_cs .cs_form .list_tit { gap: clamp(7px, 2.778vw, 9px); font-size: clamp(15px, 2.778vw, 20px); } 
    .free_cs .cs_form .list_tit::before { border-top-width: clamp(5px, 0.833vw, 6px); border-bottom-width: clamp(5px, 0.833vw, 6px); border-left-width: clamp(8px, 1.389vw, 10px); } 
    .free_cs .cs_form .list { gap: clamp(16px, 2.778vw, 20px); } 
    .free_cs .cs_form .list > li.name { min-width: 195px; flex-grow: 1; } 
    .free_cs .cs_form .list > li.phone { min-width:320px; } 
    .free_cs .cs_form .list > li .list_tit { min-width: clamp(73px, 12.500vw, 91px); margin-top: clamp(8px, 1.389vw, 10px); } 
    .free_cs .cs_form .list > li .input_wrap { gap: clamp(8px, 1.389vw, 10px) clamp(2px, 0.417vw, 3px); font-size: clamp(16px, 2.778vw, 20px); } 
    .free_cs .cs_form .list > li input[type="text"] { height: clamp(33px, 5.694vw, 41px); padding: 0 clamp(8px, 1.389vw, 10px); font-size: clamp(13px, 2.222vw, 16px); } 
    .free_cs .cs_form .list > li select { height: clamp(33px, 5.694vw, 41px); padding-left: clamp(8px, 1.389vw, 10px); font-size: clamp(13px, 2.222vw, 16px); } 
    .free_cs .cs_form .list > li .email_select { margin-left: clamp(6px, 0.972vw, 7px); } 
    .free_cs .cs_form .right { margin-top: clamp(22px, 3.889vw, 28px); } 
    .free_cs .cs_form .right .noti { height: clamp(117px, 20.333vw, 146px); margin-top: clamp(9px, 1.528vw, 11px); padding: clamp(16px, 2.778vw, 20px); } 
    .free_cs .agree { gap: clamp(7px, 1.250vw, 9px); margin-top: clamp(8px, 1.389vw, 10px); } 
    .free_cs .agree::before { width: clamp(22px, 3.750vw, 27px); height: clamp(22px, 3.750vw, 27px); } 
    .free_cs .agree .txt { font-size: clamp(13px, 2.222vw, 16px); } 
    .free_cs .cstype { gap: clamp(7px, 1.250vw, 9px); margin-top: clamp(8px, 1.389vw, 10px); } 
    .free_cs .cstype::before { width: clamp(22px, 3.750vw, 27px); height: clamp(22px, 3.750vw, 27px); } 
    .free_cs .cstype .txt { font-size: clamp(13px, 2.222vw, 16px); } 
    .free_cs .submit { margin-top: 5.556vw; width: 41.667vw; height: 8.333vw; border-radius: 1.111vw; font-size: 3.333vw; }

    .road_need { padding: 15.417vw 0 16.667vw; } 
    .road_need .tit { font-size: 7.778vw; } 
    .road_need .txt { margin-top: 2.500vw; font-size: 4.444vw; } 
    .road_need .img { max-width: 96.389vw; margin-top: 10.694vw; }

    .road_benefit { padding: 15.694vw 0 16.667vw; } 
    .road_benefit .txt { font-size: 4.444vw; } 
    .road_benefit .tit { margin-top: 2.361vw; font-size: 7.778vw; } 
    .road_benefit .list { gap: 1.389vw; max-width: 91.667vw; margin-top: 10vw; } 
    .road_benefit .list > li { width: 29.444vw; padding: 2.5vw 0 4.444vw; border-radius: 2.778vw; } 
    .road_benefit .list > li .img { width: 24.444vw; } 
    .road_benefit .list > li .list_txt { margin-top: 1.25vw; font-size: 2.5vw; } 
    .road_benefit .list > li .list_tit { margin-top: 0.833vw; font-size: 3.333vw; }

    .road_book { padding: 15.417vw 0 15vw; } 
    .road_book .tit { font-size: 7.778vw; } 
    .road_book .txt { margin-top: 2.361vw; font-size: 4.444vw; } 
    .road_book_slide { max-width: 100%; margin-top: 10.417vw; } 
    .road_book_slide .inner { max-width: 91.667vw; } 
    .road_book_list > li { width: 30.556vw; } 
    .road_book_list > li .img { margin: 0 2.361vw; } 
    .road_book_list > li .book_tit { margin-top: 3.889vw; font-size: 3.333vw; }
    
}

@media(max-width: 540px) {
    .free_cs .cs_form .list > li.email input[type="text"] { flex-grow: 1; }
    .free_cs .cs_form .list > li .email_select { width: 100%; margin-left: 0; }
    .free_cs .cs_form .list > li.phone { min-width:100%; }
}

/* 계리직공무원 랜딩페이지 CSS 끝 */