@CHARSET "UTF-8"; /* 공통 */ :root{ --red: #EE2E4B; --red_bg: #FFEFF2; --blue: #455CD0; --black: #222; --gray_bg: #F8F8F8; } * {margin:0; padding:0; -webkit-tap-highlight-color:transparent; box-sizing:border-box; -webkit-print-color-adjust: exact !important; color-adjust: exact !important; word-break:keep-all;} html, body {width:100%; -webkit-font-smoothing:antialiased; font-weight:300; font-size:16px; line-height:1.4; font-family:"Pretendard", sans-serif; color:#333;} td *, div *, li *, span *, p * {vertical-align: baseline;} ul, ol, li {list-style:none; margin:0px 0px 0px 0px;} img, hr {border:none;} img {vertical-align: middle; border:0px ; /* for IE imge margin */} strong {font-weight:bold;} b {font-weight:bold;} sup {vertical-align:super;} .new_2025 .t_red {color: var(--red) !important;} /* Link Style */ a:link, a:visited, a:hover, a:active {text-decoration:none;} /* align */ .l {text-align:left;} .c {text-align:center;} .r {text-align:right;} /* float */ .overflow {overflow:hidden;} .f_l {float:left;} .f_r {float:right;} .clear_both {clear:both;} /*input, textarea 아이폰에서 둥근테두리 제거 하고 그림자 삭제하기*/ input {-webkit-appearance: none; border-radius: 0; -webkit-border-radius: 0;} textarea {-webkit-appearance: none; } /* Table Style */ table {border-collapse:collapse;} table caption {position:absolute; width:1px !important; height:1px !important; padding:0 !important; margin:-1px !important; overflow:hidden !important; clip:rect(0, 0, 0, 0) !important; white-space:nowrap !important; border:0 !important} /* From Style */ /* select {line-height:1; font-weight:400; height: 40px; color:#555; border: 1px solid #ddd; padding:0 25px 0 7px; font-size:16px; font-family:"Pretendard"; background: #fff url('/kpc/_img/comn/sel_arrow.svg')no-repeat right 7px top 50% !important; outline:none; -moz-appearance:none; -webkit-appearance:none; appearance:none; -webkit-appearance: none;} */ select::-ms-expand {display:none;} input {outline:none; -webkit-appearance: none; -moz-appearance: none; appearance: none;} input::-webkit-input-placeholder {color: #666; opacity: 1 !important; /* for chrome */ } input:-moz-placeholder { /* Firefox 18- */ color: #666;} input::-moz-placeholder { /* Firefox 19+ */ color: #666;} input:-ms-input-placeholder { /* Internet Explorer 10+ */ color: #666;} .new_2025 input[type='radio'] + label {vertical-align: 4px; padding-left: 3px; margin-right: 10px;} /* Margin Set */ .ml0 {margin-left:0px !important;} .ml5 {margin-left:5px;} .ml10 {margin-left:10px;} .ml15 {margin-left:15px;} .ml20 {margin-left:20px;} .ml25 {margin-left:25px;} .ml30 {margin-left:30px;} .ml35 {margin-left:35px;} .ml40 {margin-left:40px;} .ml45 {margin-left:45px;} .ml50 {margin-left:50px;} .mr0 {margin-right:0px !important;} .mr5 {margin-right:5px;} .mr10 {margin-right:10px;} .mr15 {margin-right:15px;} .mr20 {margin-right:20px;} .mr25 {margin-right:25px;} .mr30 {margin-right:30px;} .mr35 {margin-right:35px;} .mr40 {margin-right:40px;} .mr45 {margin-right:45px;} .mr50 {margin-right:50px;} .mb0 {margin-bottom:0px !important;} .mb5 {margin-bottom:5px;} .mb10 {margin-bottom:10px;} .mb15 {margin-bottom:15px;} .mb20 {margin-bottom:20px;} .mb25 {margin-bottom:25px;} .mb30 {margin-bottom:30px;} .mb35 {margin-bottom:35px;} .mb40 {margin-bottom:40px;} .mb45 {margin-bottom:45px;} .mb50 {margin-bottom:50px;} .mt0 {margin-top:0px !important;} .mt5 {margin-top:5px;} .mt10 {margin-top:10px;} .mt15 {margin-top:15px;} .mt20 {margin-top:20px;} .mt25 {margin-top:25px;} .mt27 {margin-top:27px;} .mt30 {margin-top:30px;} .mt35 {margin-top:35px;} .mt40 {margin-top:40px;} .mt45 {margin-top:45px;} .mt50 {margin-top:50px;} /* Padding Set */ .pl0 {padding-left:0px !important;} .pl5 {padding-left:5px;} .pl10 {padding-left:10px;} .pl15 {padding-left:15px;} .pl20 {padding-left:20px;} .pl25 {padding-left:25px;} .pl30 {padding-left:30px;} .pl35 {padding-left:35px;} .pl40 {padding-left:40px;} .pl45 {padding-left:45px;} .pl50 {padding-left:50px;} .pr0 {padding-right:0px !important;} .pr5 {padding-right:5px;} .pr10 {padding-right:10px;} .pr15 {padding-right:15px;} .pr20 {padding-right:20px;} .pr25 {padding-right:25px;} .pr30 {padding-right:30px;} .pr35 {padding-right:35px;} .pr40 {padding-right:40px;} .pr45 {padding-right:45px;} .pr50 {padding-right:50px;} .pb0 {padding-bottom:0px !important;} .pb5 {padding-bottom:5px;} .pb10 {padding-bottom:10px;} .pb15 {padding-bottom:15px;} .pb20 {padding-bottom:20px;} .pb25 {padding-bottom:25px;} .pb30 {padding-bottom:30px;} .pb35 {padding-bottom:35px;} .pb40 {padding-bottom:40px;} .pb45 {padding-bottom:45px;} .pb50 {padding-bottom:50px;} .pt0 {padding-top:0px !important;} .pt5 {padding-top:5px;} .pt10 {padding-top:10px;} .pt12 {padding-top:12px;} .pt15 {padding-top:15px;} .pt20 {padding-top:20px;} .pt25 {padding-top:25px;} .pt30 {padding-top:30px;} .pt35 {padding-top:35px;} .pt40 {padding-top:40px;} .pt45 {padding-top:45px;} .pt50 {padding-top:50px;} .w_content {max-width: 1360px; margin: 0 auto; padding: 0px 30px; width: 100%;} .content {max-width: 1360px; margin: 0 auto; padding: 80px 30px; width: 100%;} .sub_content .content {padding: 60px 30px 140px;} .new_2025 #content {margin-bottom: 0;} .sub_content h2 {font-size: 42px; font-weight: 600; color: #222; text-align: center; margin-bottom: 20px;} .no_scroll {overflow: hidden; height: 100vh;} /* Tablet */ @media only screen and (max-width: 1024px) { .new_2025 div, .new_2025 span, .new_2025 object, .new_2025 iframe, .new_2025 h1, .new_2025 h2, .new_2025 h3, .new_2025 h4, .new_2025 h5, .new_2025 h6, .new_2025 p, .new_2025 blockquote, .new_2025 pre, .new_2025 abbr, .new_2025 address, .new_2025 cite, .new_2025 code, .new_2025 del, .new_2025 dfn, .new_2025 em, .new_2025 img, .new_2025 ins, .new_2025 kbd, .new_2025 q, .new_2025 samp, .new_2025 small, .new_2025 strong, .new_2025 sub, .new_2025 sup, .new_2025 var, .new_2025 b, .new_2025 i, .new_2025 button, .new_2025 dl, .new_2025 dt, .new_2025 dd, .new_2025 ol, .new_2025 ul, .new_2025 li, .new_2025 fieldset, .new_2025 form, .new_2025 label, .new_2025 legend, .new_2025 table, .new_2025 caption, .new_2025 tbody, .new_2025 tfoot, .new_2025 thead, .new_2025 tr, .new_2025 th, .new_2025 td, .new_2025 article, .new_2025 aside, .new_2025 canvas, .new_2025 details, .new_2025 figcaption, .new_2025 figure, .new_2025 footer, .new_2025 header, .new_2025 hgroup, .new_2025 menu, .new_2025 nav, .new_2025 section, .new_2025 summary, .new_2025 time, .new_2025 mark, .new_2025 audio, .new_2025 video {font-size: inherit;} .w_content {padding: 0px 20px;} .content {padding: 60px 20px;} .sub_content .content {padding: 50px 20px 100px;} .new_2025 .sub_content h2, .new_2025 .sp_main_title strong {font-size: 38px;} .new_2025 .sp_main_title {margin-bottom: 30px; text-align: center;} } /* Mobile */ @media only screen and (max-width: 720px) { .w_content {padding: 0px 15px;} .content {padding: 40px 15px;} .sub_content .content {padding: 40px 15px 60px;} .new_2025 .sub_content h2, .new_2025 .sp_main_title strong {font-size: 32px;} .new_2025 .sp_main_title {margin-bottom: 20px;} } /* ----------------------------------------------------------------- header ----------------------------------------------------------------- */ #head25 {position: relative; border-bottom: 1px solid #ddd; background: #fff; z-index: 301;} #head25 .top {background: #F9F9F9; width: 100%;} #head25 .top ul {display: flex; gap: 30px; height: 44px;} #head25 .top ul li a {height: 44px; color: #666; font-size: 15px; font-weight: 500; display: flex; align-items: center; transition: all .2s;} #head25 .top ul li a:after {content: ''; width: 7px; height: 100%; margin-left: 4px; background: url(../img/new25/h_link_icon.svg) no-repeat left 50% top 13px / 7px; transition: all .2s;} #head25 .top ul li a:hover {color: var(--red);} #head25 .top ul li a:hover:after {background: url(../img/new25/h_link_icon_on.svg) no-repeat left 50% top 13px / 7px;} /* #head25 > .w_content {position: relative;} */ #head25 > .w_content .m {padding: 30px 0 10px; display: flex; align-items: center; justify-content: space-between; gap: 20px;} #head25 .m h1 a {display: block; font-size: 0; width: 191px; height: 40px; background: url(../img/new25/tt_logo.svg) no-repeat 50% 50% / 191px;} #head25 .m .header_search {max-width: 530px; width: 100%; display: flex; gap: 10px; margin-left: 80px; position: relative;} #head25 .m .header_search input[type="text"] {border: 1px solid #ddd; border-radius: 50px; width: 100%; height: 50px; font-size: 18px; font-weight: 500; padding: 0 25px;} #head25 .m .header_search input::-webkit-input-placeholder {color: #ccc;} #head25 .m .header_search input:-moz-placeholder {color: #ccc;} #head25 .m .header_search input::-moz-placeholder {color: #ccc;} #head25 .m .header_search input:-ms-input-placeholder {color: #ccc;} #head25 .m .header_search .btn_search {min-width: 50px; height: 50px; border-radius: 50px; background: var(--red) url(../img/new25/h_search_w.svg) no-repeat 50% 50% / 21px; font-size: 0; transition: all .2s;} #head25 .m .header_search .btn_search:hover {background: var(--black) url(../img/new25/h_search_w.svg) no-repeat 50% 50% / 21px;} #head25 .right {display: flex; gap: 30px;} #head25 .right .icon_btn {display: flex; gap: 20px;} #head25 .right .icon_btn li a {font-size: 12px; color: #222; font-weight: 600; display: block; text-align: center;} #head25 .right .icon_btn li a:before {content: ''; width: 100%; height: 22px; padding-bottom: 8px; display: block;} #head25 .right .icon_btn li.my a:before {background: url(../img/new25/h_mypage_icon.svg) no-repeat 50% 0% / 21px;} #head25 .right .icon_btn li.logout a:before {background: url(../img/new25/h_logout_icon.svg) no-repeat 50% 0% / 21px;} #head25 .right .icon_btn li.counsel a:before{background: url(../img/new25/h_counsel_icon.svg) no-repeat 50% 0% / 24px;} #head25 .right .icon_btn li.kpc a {width: 52px;} #head25 .right .icon_btn li.kpc a:before {background: url(../img/new25/h_kpc_icon.svg) no-repeat 50% 0% / 22px;} #head25 .right .icon_btn li.kpc a:after {content: ''; display: inline-block; width: 6px; height: 9px; padding-right: 3px; background: url('../img/new25/h_menu_link_bk.svg') no-repeat right 0% top 0px / 6px;} #head25 .right .icon_btn li.search {display: none;} #head25 .right .ai_chat button {font-size: 12px; font-weight: 500; width: 46px; height: 46px; border-radius: 10px; color: #fff; text-align: center; padding-right: 1px; background: linear-gradient(to bottom, #7431FA, #6AADFF); display: flex; align-items: center; justify-content: center; align-content: center; flex-wrap: wrap; background-size: 100% 100%; background-position: 0 0; transition: background-position 2s ease-in-out, background-size 2s ease-in-out;} #head25 .right .ai_chat button:hover {background-size: 100% 200%; background-position: 0 100%; } #head25 .right .ai_chat button b {font-size: 16px; font-weight: 600; width: 100%;} #chatbot-wrapper {position: fixed; bottom: 20px; right: 20px; z-index: 9999; display: none;} #chatbot-container {width: 400px; height: 600px; border-radius: 16px; overflow: hidden;} #chatbot-frame {width: 100%; height: 100%; border: none;} #close-button {position: absolute; top: -12px; right: -12px; background-color: #000; color: #fff; border: none; border-radius: 50%; width: 24px; height: 24px; font-size: 16px; line-height: 24px; text-align: center; cursor: pointer; z-index: 10000;} #head25 .bottom {padding: 20px 0; display: flex; align-items: center; justify-content: space-between; gap: 20px;} #head25 .bottom .l_menu {display: flex; gap: 30px; align-items: center;} #head25 .bottom .all_menu {width: 20px; height: 22px; display: block; background: url(../img/new25/all_menu.svg) no-repeat 50% 50% / 20px; font-size: 0;} #head25 .bottom .all_menu.on {background: url(../img/new25/all_menu_x.svg) no-repeat 50% 50% / 18px;} #head25 .bottom .edu_menu {display: flex; align-items: center; gap: 30px;} #head25 .bottom .edu_menu li a {font-size: 19px; color: #222; font-weight: 500; transition: all .2s; white-space: nowrap;} #head25 .bottom .edu_menu li a:hover {color: var(--red);} #head25 .bottom .edu_menu li.red_menu a {position: relative; color: var(--red); font-weight: 600;} #head25 .bottom .edu_menu li.red_menu a .red_tag {position: absolute; left: -2px; bottom: 24px; font-size: 13px; background: var(--red); color: #fff; padding: 2px 4px; border-radius: 3px; font-weight: 400; z-index: 2; letter-spacing: -.05px;} #head25 .bottom .l_menu .edu_menu li.new a {background: url(../img/new25/h_new_icon.png) no-repeat 0% 50% / 20px; padding-left: 25px;} #head25 .bottom .l_menu .edu_menu li.open a {background: url(../img/new25/h_open_icon.png) no-repeat 0% 50% / 20px; padding-left: 25px;} #head25 .bottom .l_menu .edu_menu li.pick a {background: url(../img/new25/h_pick_icon.png) no-repeat 0% 50% / 19px; padding-left: 24px;} #head25 .bottom .l_menu .edu_menu li.best a {background: url(../img/new25/h_best_icon.png) no-repeat 0% 50% / 15px; padding-left: 20px;} #head25 .bottom .edu_menu .link a {padding-right: 11px; background: url('../img/new25/h_menu_link_bk.svg') no-repeat left 100% top 3px / 8px;} #head25 .bottom .edu_menu .link a:hover {background: url('../img/new25/h_menu_link_red.svg') no-repeat left 100% top 3px / 8px;} #head25 .pt_header_search_keyword {top: 60px; padding: 20px 20px 40px; border-radius: 10px; border: 1px solid #ddd; box-shadow: 0 0px 12px rgba(0, 0, 0, .1); background: #fff;} #head25 .pt_header_search_keyword .keyword_row {flex-direction: column;} #head25 .pt_header_search_keyword .keyword_row > div {padding: 12px 0px; width: 100%; border: none; box-shadow: none; border-radius: 0; border-top: 1px solid #eee;} #head25 .pt_header_search_keyword .keyword_row .keyword_list {border-top: 0; padding-top: 0;} #head25 .pt_header_search_keyword .keyword_foot {right: 50%; transform: translateX(50%);} #head25 .pt_header_search_keyword_close {right: 50%; bottom: -51px; transform: translateX(50%); width: 40px; height: 40px; background: #ddd; border-radius: 50px; font-size: 0; transition: all .2s;} #head25 .pt_header_search_keyword_close:before, #head25 .pt_header_search_keyword_close:after {content: ''; width: 20px; height: 2px; background: #fff; display: block; position: absolute; left: 10px; top: 19px; transform: rotate(45deg);} #head25 .pt_header_search_keyword_close:after {transform: rotate(-45deg);} #head25 .pt_header_search_keyword_close:hover {background: #222;} #head25 .pt_header_search_keyword_close:hover:before, #head25 .pt_header_search_keyword_close:hover:after {background: #fff;} #head25 .pt_header_search_keyword .keyword_tit, #head25 .pt_header_search_keyword .keyword_hot .keyword_tit {margin-bottom: 10px;} #head25 .pt_header_search_keyword .keyword_auto {padding-bottom: 6px; border-bottom: 1px solid #eee; margin-bottom: 12px;} #head25 .pt_header_search_keyword .keyword_auto ul {max-height: 120px; overflow-y: auto;} #head25 .pt_header_search_keyword .keyword_auto li a {font-size: 15px; font-weight: 500;} #head25 .pt_header_search_keyword .keyword_auto li a span {color: var(--red);} #head25 .pt_header_search_keyword .keyword_recent {padding-bottom: 15px;} #head25 .pt_header_search_keyword #keyword_recent_list, #head25 .pt_header_search_keyword #keyword_word_list {max-height: 120px; overflow-y: auto;} #head25 .pt_header_search_keyword #keyword_hot_list {display: flex; gap: 10px 2%; flex-wrap: wrap;} #head25 .pt_header_search_keyword #keyword_hot_list li {width: 49%; padding: 0;} #head25 #keyword_word_list {display: flex; flex-wrap: wrap; gap: 6px;} #head25 #keyword_word_list li a {display: flex; font-size: 13px; color: #666; font-weight: 500; padding: 0px 12px; border-radius: 50px; background: #f5f5f5; height: 26px; align-items: center; justify-content: center;} /* Tablet */ @media only screen and (max-width: 1024px) { #head25 .w_content .m {padding: 20px 0 0px;} #head25 .m h1 a {width: 171px; height: 38px; background: url(../img/new25/tt_logo.svg) no-repeat 50% 50% / 171px;} #head25 .m .header_search {display: none; max-width: 100%; position: absolute; left: 0; top: 115px; height: 300px; padding: 0px 20px 20px; background: #fff; z-index: 12; align-items: center; justify-content: center;} #head25 .m .header_search.on {display: flex; margin-left: 0px;} #head25 .m .header_search input[type="text"] {font-size: 17px; border: 0; border-bottom: 2px solid #222; border-radius: 0; padding: 0 50px 0 10px;} #head25 .m .header_search .btn_search {position: absolute; right: 20px; background: url(../img/new25/h_search_bk.svg) no-repeat 50% 50% / 21px;} #head25 .m .header_search .btn_search:hover {background: url(../img/new25/h_search_bk.svg) no-repeat 50% 50% / 21px;} #head25 .m .search_bg {display: none; position: fixed; left: 0; top: 170px; width: 100%; height: calc(100% - 170px); background: #000; opacity: .7; z-index: 11;} #head25 .m .search_bg.on {display: block;} #head25 .right {gap: 15px;} #head25 .right .icon_btn {gap: 20px;} #head25 .right .icon_btn li a {font-size: 11px; display: block;} #head25 .right .icon_btn li a:before {height: 22px; padding-bottom: 8px; width: 40px;} #head25 .right .icon_btn li.my a:before {background: url(../img/new25/h_mypage_icon.svg) no-repeat 50% 0% / 21px;} #head25 .right .icon_btn li.logout a:before {background: url(../img/new25/h_logout_icon.svg) no-repeat 50% 0% / 21px;} #head25 .right .icon_btn li.counsel a:before{background: url(../img/new25/h_counsel_icon.svg) no-repeat 50% 0% / 24px;} #head25 .right .icon_btn li.kpc a:before {background: url(../img/new25/h_kpc_icon.svg) no-repeat 50% 0% / 22px;} /* #head25 .right .icon_btn li.counsel {display: none;} #head25 .right .icon_btn li.kpc {display: none;} */ #head25 .right .icon_btn li.search {display: block;} #head25 .right .icon_btn li.search a:before {background: url(../img/new25/h_search_bk.svg) no-repeat 50% 20% / 22px;} #head25 .right .icon_btn li.search.on a:before {background: url(../img/new25/h_x.svg) no-repeat 50% 50% / 21px;} #head25 .bottom {padding: 25px 0 15px; justify-content: flex-start; overflow-y: hidden; overflow-x: auto; max-width: 1100px; width: 100%; margin-left: 35px; width: calc(100% - 35px);} #head25 .bottom .l_menu {gap: 25px;} #head25 .bottom .all_menu {position: absolute; left: 15px;} #head25 .bottom .edu_menu {gap: 25px;} #head25 .bottom .edu_menu li a {font-size: 18px;} #head25 .bottom .l_menu .edu_menu li.new a {background: url(../img/new25/h_new_icon.png) no-repeat 0% 50% / 18px; padding-left: 23px;} #head25 .bottom .l_menu .edu_menu li.open a {background: url(../img/new25/h_open_icon.png) no-repeat 0% 50% / 18px; padding-left: 23px;} #head25 .bottom .l_menu .edu_menu li.pick a {background: url(../img/new25/h_pick_icon.png) no-repeat 0% 50% / 17px; padding-left: 22px;} #head25 .bottom .l_menu .edu_menu li.best a {background: url(../img/new25/h_best_icon.png) no-repeat 0% 50% / 13px; padding-left: 18px;} #head25 .bottom .r_menu {position: relative; padding-left: 20px;} #head25 .bottom .r_menu:before {content: ''; width: 2px; height: 14px; background: #ddd; display: block; position: absolute; left: 0; top: 5px;} } /* Mobile */ @media only screen and (max-width: 720px) { #head25{display:block !important; visibility: visible !important; opacity: 1 !important; } #head25 .top ul {gap: 20px; height: 40px;} #head25 .top ul li a {height: 40px; font-size: 14px;} #head25 .top ul li a:after {width: 6px; margin-left: 4px; background: url(../img/new25/h_link_icon.svg) no-repeat left 50% top 11px / 6px;} #head25 .top ul li a:hover:after {background: url(../img/new25/h_link_icon_on.svg) no-repeat left 50% top 11px / 6px;} #head25 .w_content .m {padding: 12px 0 0;} #head25 .m h1 a {width: 130px; height: 38px; background: url(../img/new25/tt_logo.svg) no-repeat 50% 50% / 130px;} #head25 .m .header_search {top: 95px; height: 200px; padding: 0px 15px 20px;} #head25 .m .header_search input[type="text"] {font-size: 15px;} #head25 .m .header_search .btn_search {right: 15px;} #head25 .right {gap: 8px;} #head25 .right .icon_btn {gap: 5px;} #head25 .right .icon_btn li a {font-size: 0;} #head25 .right .icon_btn li a:before {height: 22px; padding-bottom: 0; width: 30px; height: 40px;} #head25 .right .icon_btn li.my a:before {background: url(../img/new25/h_mypage_icon.svg) no-repeat 50% 50% / 18px;} #head25 .right .icon_btn li.logout {display: none;} #head25 .right .icon_btn li.counsel {display: none;} #head25 .right .icon_btn li.kpc {display: none;} #head25 .right .icon_btn li.search {display: block;} #head25 .right .icon_btn li.search a:before {background: url(../img/new25/h_search_bk.svg) no-repeat 50% 50% / 19px;} #head25 .right .icon_btn li.search.on a:before {background: url(../img/new25/h_x.svg) no-repeat 50% 50% / 17px;} #head25 .right .ai_chat button {font-size: 11px; width: 40px; height: 40px;} #head25 .right .ai_chat button b {font-size: 15px;} #head25 .bottom {padding: 20px 0 10px; gap: 16px; margin-left: 0; width: 100%;} #head25 .bottom .l_menu {gap: 20px;} #head25 .bottom .all_menu {display: none;} #head25 .bottom .edu_menu {gap: 20px;} #head25 .bottom .edu_menu li a {font-size: 15px;} #head25 .bottom .edu_menu li.red_menu a .red_tag {bottom: 20px; font-size: 12px; padding: 1px 4px;} #head25 .bottom .l_menu .edu_menu li.new a {background: url(../img/new25/h_new_icon.png) no-repeat 0% 50% / 15px; padding-left: 20px;} #head25 .bottom .l_menu .edu_menu li.open a {background: url(../img/new25/h_open_icon.png) no-repeat 0% 50% / 15px; padding-left: 20px;} #head25 .bottom .l_menu .edu_menu li.pick a {background: url(../img/new25/h_pick_icon.png) no-repeat 0% 50% / 14px; padding-left: 19px;} #head25 .bottom .l_menu .edu_menu li.best a {background: url(../img/new25/h_best_icon.png) no-repeat 0% 50% / 10px; padding-left: 15px;} #head25 .bottom .edu_menu .link a {padding-right: 9px; background: url('../img/new25/h_menu_link_bk.svg') no-repeat left 100% top 3px / 6px;} #head25 .bottom .edu_menu .link a:hover {background: url('../img/new25/h_menu_link_red.svg') no-repeat left 100% top 3px / 6px;} #head25 .bottom .r_menu {position: relative; padding-left: 18px;} #head25 .bottom .r_menu:before {content: ''; width: 2px; height: 14px; background: #ddd; display: block; position: absolute; left: 0; top: 4px;} #chatbot-wrapper {right: 7px;} } /* ----------------------------------------------------------------- 교육 카테고리 ----------------------------------------------------------------- */ body.no-scroll {overflow-y: hidden !important;} .all_menu_on {display: none; height: calc(100vh - 202px); padding: 50px 0 60px; position: fixed; left: 0; /* top: -100%; opacity: 0; */ background: #fff; width: 100%; z-index: 300; overflow-y: auto; transition: all 0.8s;} .all_menu_on.on {display: block; /* top: 202px; opacity: 1; */} .all_menu_on .menu_top {display: none;} .all_menu_on #eduMenuList {display: flex; flex-wrap: wrap; gap: 50px 4%;} .all_menu_on #eduMenuList > li {width: 22%;} .all_menu_on #eduMenuList > li > span {font-size: 17px; font-weight: 600; color: #222; padding-bottom: 10px; margin-bottom: 20px; border-bottom: 1px solid #eee; display: block;} .all_menu_on #eduMenuList > li > ul {flex-direction: column;} .all_menu_on #eduMenuList > li > ul > li > a {font-size: 15px; color: #222; font-weight: 500; display: block; transition: all .2s;} .all_menu_on #eduMenuList > li > ul > li:hover > a {color: var(--red);} .all_menu_on #eduMenuList > li > ul > li > ul {padding: 12px; margin: 5px 0 15px; border-radius: 5px; background: #f8f8f8; box-sizing: border-box;} .all_menu_on #eduMenuList > li > ul > li:last-child > ul {margin-bottom: 0;} .all_menu_on #eduMenuList > li > ul > li > ul > li + li {margin-top: 6px;} .all_menu_on #eduMenuList > li > ul > li > ul > li > a {font-size: 14px; color: #777; display: block; font-weight: 500; transition: all .2s;} .all_menu_on #eduMenuList > li > ul > li > ul > li > a:before {content: ''; width: 3px; height: 3px; margin-right: 6px; vertical-align: 4px; display: inline-block; border-radius: 5px; background: #777; transition: all .2s;} .all_menu_on #eduMenuList > li > ul > li > ul > li > a:hover {color: var(--red);} .all_menu_on #eduMenuList > li > ul > li > ul > li > a:hover:before {background: var(--red);} .all_menu_on::-webkit-scrollbar {-webkit-appearance: none; } .all_menu_on::-webkit-scrollbar:vertical {width: 4px;} .all_menu_on::-webkit-scrollbar:horizontal {height: 4px;} .all_menu_on::-webkit-scrollbar-thumb {background-color: #ddd; border-radius: 10px; } .all_menu_on::-webkit-scrollbar-track {border-radius: 10px; background-color: #fff; } /* Tablet */ @media only screen and (max-width: 1024px) { .all_menu_on {height: calc(100vh - 171px); padding: 40px 0 50px; top: calc(100vh + 100px); transition: none;} .all_menu_on.on {top: 166px;} .all_menu_on #eduMenuList {gap: 40px 3.5%;} .all_menu_on #eduMenuList > li {width: 31%;} } /* Mobile */ @media only screen and (max-width: 720px) { .all_menu_on {padding: 0; z-index: 301; height: 100vh; overflow-y: inherit;} .all_menu_on.on {top: 0;} .all_menu_on .menu_top {padding: 0 15px; height: 65px; display: flex; justify-content: space-between; align-items: center; border-bottom: 1px solid #ddd; background: #fff;} .all_menu_on .menu_top .top_logo a {width: 130px; height: 38px; background: url(../img/new25/tt_logo.svg) no-repeat 50% 50% / 130px; display: block; font-size: 0;} .all_menu_on .menu_top .right {display: flex; align-items: center; gap: 15px;} .all_menu_on .menu_top .right .x {display: block; width: 24px; height: 24px; background: url(../img/new25/all_menu_x.svg) no-repeat 50% 50% / 18px; font-size: 0;} .all_menu_on #eduMenuList {padding: 20px 15px; gap: 0; overflow-y: auto; max-height: calc(100vh - 65px);} .all_menu_on #eduMenuList > li {width: 100%; border-bottom: 1px solid #eee;} .all_menu_on #eduMenuList > li:last-child {padding-bottom: 0; border-bottom: none;} .all_menu_on #eduMenuList > li > span {font-size: 16px; padding: 16px 0; font-weight: 500; margin-bottom: 0px; border-bottom: none; cursor: pointer; position: relative; display: flex; align-items: center;} .all_menu_on #eduMenuList > li > span:after {content: ''; width: 8px; height: 8px; border: 2px solid #222; border-radius: 1px; border-right: none; border-top: none; display: block; position: absolute; right: 10px; top: 20px; transform: rotate(-45deg);} .all_menu_on #eduMenuList > li.on > span {color: var(--red);} .all_menu_on #eduMenuList > li.on > span:after {transform: rotate(-225deg); top: 25px;} .all_menu_on #eduMenuList > li > ul {} .all_menu_on #eduMenuList > li.on > ul {margin-bottom: 20px;} .all_menu_on #eduMenuList > li > ul {display: flex; gap: 6px; flex-direction: column;} .all_menu_on #eduMenuList > li > ul > li {padding: 0 15px; border-radius: 5px; background: #f8f8f8; box-sizing: border-box;} .all_menu_on #eduMenuList > li > ul > li > a {height: 50px; display: flex; align-items: center; justify-content: space-between; position: relative;} .all_menu_on #eduMenuList > li > ul > li > a:after {content: ''; width: 8px; height: 8px; border: 2px solid #bbb; border-radius: 1px; border-right: none; border-top: none; display: block; position: absolute; right: 0; top: 18px; transform: rotate(-45deg);} .all_menu_on #eduMenuList > li > ul > li.on > a:after{transform: rotate(-225deg); top: 22px;} .all_menu_on #eduMenuList > li > ul > li > ul {margin: -5px 0 15px; background: none; padding: 0 0 0 10px; border-radius: 0;} .all_menu_on #eduMenuList > li > ul > li.on > ul {} .all_menu_on #eduMenuList > li > ul > li > ul > li + li {margin-top: 0;} .all_menu_on #eduMenuList > li > ul > li > ul > li > a {height: 32px; display: flex; align-items: center; font-size: 15px;} #eduMenuList::-webkit-scrollbar {-webkit-appearance: none; } #eduMenuList::-webkit-scrollbar:vertical {width: 4px; } #eduMenuList::-webkit-scrollbar:horizontal {height: 4px; } #eduMenuList::-webkit-scrollbar-thumb {background-color: #ddd; border-radius: 10px; } #eduMenuList::-webkit-scrollbar-track {border-radius: 10px; background-color: #fff; } } /* ----------------------------------------------------------------- 전체메뉴 ----------------------------------------------------------------- */ #head25 .pt_menu_btn {display:none;} #head25 .mobile_all_menu {display:none; flex-direction:column;position:fixed;top:0;right:0;width:100%;height:100%;background-color:#fff;z-index:110;overflow-y:auto;min-width: 290px;} #head25 .mobile_all_menu.on {display:flex;} #head25 .mobile_all_menu .mam_top {background-color:#fff; padding: 15px; border-bottom: 2px solid #222;} #head25 .mobile_all_menu .mam_top .flex_box {display: flex; justify-content: space-between;} #head25 .mobile_all_menu .mam_top .left {display: flex; align-items: center;} #head25 .mobile_all_menu .mam_home {font-size: 14px; font-weight: 500; color: #888;} #head25 .mobile_all_menu .mam_user {display: flex; align-items: flex-end; gap: 15px; font-size: 14px; font-weight: 500; color: #888;} #head25 .mobile_all_menu .mam_user > p {display: flex; align-items: flex-end; font-size: 14px; font-weight: 500; color: #222;} #head25 .mobile_all_menu .mam_user .name{display: inline-block; font-size: 22px; font-weight: 600; margin-right: 4px;} #head25 .mobile_all_menu .mam_user a {font-size: 14px; font-weight: 500; color: #888;} #head25 .mobile_all_menu .mam_user a + a:before{content: ''; width: 1px; height: 10px; background: #ddd; display: inline-block; margin-right: 15px; vertical-align: 0px;} #head25 .mobile_all_menu .mam_user .logout:after {content: ''; width: 5px; height: 5px; display: inline-block; border: 2px solid #bbb; border-left: 0; border-bottom: 0; border-radius: 2px; margin-left: 4px; transform: rotate(45deg); vertical-align: 1px;} #head25 .mobile_all_menu .mam_close {display: block; width: 24px; height: 24px; background: url(../img/new25/all_menu_x.svg) no-repeat 50% 50% / 18px; font-size: 0; text-indent:-50000000px; overflow:hidden; cursor: pointer;} #head25 .mobile_all_menu .mam_qm_list {display: flex; justify-content: space-between; gap: 2%; margin-top: 30px;} #head25 .mobile_all_menu .mam_qm_list li {width: 100%; position: relative;} #head25 .mobile_all_menu .mam_qm_list li:after {content: ''; width: 2px; height: 16px; background: #eee; display: block; position: absolute; right: 0; top: calc(50% - 8px);} #head25 .mobile_all_menu .mam_qm_list li:last-child:after {display: none;} #head25 .mobile_all_menu .mam_qm_list li a {display:block; text-align:center; color: #222; font-size: 13px; font-weight: 500;} #head25 .mobile_all_menu .mam_qm_list li a:before {content:''; display:block; height: 25px; margin-bottom: 8px; background-repeat:no-repeat; background-position: center; background-size: 38px;} #head25 .mobile_all_menu .mam_qm_list li:nth-child(1) a:before {background-image: url(../img/main/icon_menu01.svg);} #head25 .mobile_all_menu .mam_qm_list li:nth-child(2) a:before {background-image: url(../img/main/icon_menu02.svg);} #head25 .mobile_all_menu .mam_qm_list li:nth-child(3) a:before {background-image: url(../img/main/icon_menu03.svg);} #head25 .mobile_all_menu .mam_qm_list li:nth-child(4) a:before {background-image: url(../img/main/icon_menu04.svg);} #head25 .mobile_all_menu .mam_menu_area {display:flex;justify-content:space-between;flex:1;} #head25 .mobile_all_menu .mam_menu_area .pt_com_tab {margin:0;width:25%; background-color:#ebebeb;display:block;padding-bottom:3rem; border-right:0;} #head25 .mobile_all_menu .mam_menu_area .pt_com_tab li {display:block;float:none;background-color:#ebebeb;border:none;width:100% !important;min-height:0 !important;margin:0;} #head25 .mobile_all_menu .mam_menu_area .pt_com_tab li a {font-size: 15px !important; text-align: left; justify-content: flex-start; font-weight:500;color:#888;background-color:rgba(0,0,0,0); padding:1rem 10px;} #head25 .mobile_all_menu .mam_menu_area .pt_com_tab li.on {background-color:#fff; border:0 !important;} #head25 .mobile_all_menu .mam_menu_area .pt_com_tab li.on a {color:#222; font-weight: 600;} #head25 .mobile_all_menu .mam_menu_area .pt_com_tabboxs {width:70%;padding:0;height:100%;padding-bottom: 3rem; padding-right: 15px;} #head25 .mobile_all_menu .mam_menu_area .pt_com_tabboxs .mam_menu_title {padding: 15px 0; font-size: 18px; font-weight: 600; color: #222;} #head25 .mobile_all_menu .mam_menu_area .pt_com_tabboxs .mam_menu_list {border-top:1px solid #eee;} #head25 .mobile_all_menu .mam_menu_area .pt_com_tabboxs .mam_menu_list li {width:100% !important; float:none;display:block;} #head25 .mobile_all_menu .mam_menu_area .pt_com_tabboxs .mam_menu_list>li>span {display:block;position:relative;padding: 15px 35px 15px 10px; font-weight: 500; border-bottom:1px solid #eee; border-top:none; background-color:#fff;font-size: 15px;cursor: pointer;} #head25 .mobile_all_menu .mam_menu_area .pt_com_tabboxs .mam_menu_list>li>span:before {display:block; content:''; width:2px; height:12px; background:#222; position:absolute; top: 50%; right:22px; transform:translateY(-50%); transition: all .2s;} #head25 .mobile_all_menu .mam_menu_area .pt_com_tabboxs .mam_menu_list>li>span:after {display:block; content:''; width:2px; height:12px; background:#222; position:absolute; top: 50%; right:22px; transform:translateY(-50%) rotate(-90deg);} #head25 .mobile_all_menu .mam_menu_area .pt_com_tabboxs .mam_menu_list>li>.openList:before {transform: translateY(-50%) rotate(-90deg);} #head25 .mobile_all_menu .mam_menu_area .pt_com_tabboxs .mam_menu_list>li>a {display:block;padding: 15px 35px 15px 10px; font-weight: 500; border-bottom:1px solid #eee; border-top:none; background-color:#fff;font-size: 15px;cursor: pointer;} #head25 .mobile_all_menu .mam_menu_area .pt_com_tabboxs .mam_menu_list li.link a:after {content: ''; display: inline-block; width: 6px; height: 9px; padding-right: 4px; background: url('../img/new25/h_menu_link_bk.svg') no-repeat right 0% top 0px / 6px; vertical-align: 2px;} #head25 .mobile_all_menu .mam_menu_area .pt_com_tabboxs .mam_menu_list li ul {display:none; box-sizing:border-box;border-bottom: 1px solid #eee;border-top:none;padding:10px 0; background: #f8f8f8;} #head25 .mobile_all_menu .mam_menu_area .pt_com_tabboxs .mam_menu_list li ul.openul {display:block;} #head25 .mobile_all_menu .mam_menu_area .pt_com_tabboxs .mam_menu_list li ul li {display:block;width:100%;padding: 0px; font-size: 15px;border: none; background-image:none;cursor: pointer;} #head25 .mobile_all_menu .mam_menu_area .pt_com_tabboxs .mam_menu_list li ul li a {display:block; color: #999;padding: 6px 15px; font-size: 14px; font-weight: 500;} #head25 .mobile_all_menu .mam_menu_area .pt_com_tabboxs .mam_menu_list li ul li a:before {content:'';display: inline-block;width:5px; height:1px; margin:0px 8px 5px 0;background-color:#bbb;} #head25 .mobile_all_menu .mam_menu_area .pt_com_tabboxs .mam_menu_list li ul li.on a, #head25 .mobile_all_menu .mam_menu_area .pt_com_tabboxs .mam_menu_list li ul li a.on {color:#ee2c49;} #head25 .mobile_all_menu .mam_menu_area .pt_com_tabboxs .mam_menu_list li ul li.on a:before, #head25 .mobile_all_menu .mam_menu_area .pt_com_tabboxs .mam_menu_list li ul li a.on:before {background-color:#ee2c49;} /* Tablet */ @media only screen and (max-width: 1024px) { } /* Mobile */ @media only screen and (max-width: 720px) { #head25 .pt_menu_btn {display: flex; width: 40px; height: 40px; border-radius: 10px; font-size: 0; background: #222 url('../img/new25/pt_menu_btn_x.svg') no-repeat 50% 50% / 18px;} } /* ----------------------------------------------------------------- footer ----------------------------------------------------------------- */ #foot25 {background: #222; padding-top: 60px; height: auto;} #foot25 .top {display: flex; justify-content: space-between; align-items: flex-start;} #foot25 .info {display: flex; gap: 10px; flex-wrap: wrap;} #foot25 .info p {width: 100%; display: flex; gap: 15px; font-size: 16px; font-weight: 500; color: #fff;} #foot25 .info p span {font-weight: 400; color: rgba(250,248,248,.8);} #foot25 .family_site {display: flex; gap: 8px;} #foot25 .family_site > div {position: relative;} #foot25 .family_site p a {width: 220px; height: 48px; padding: 0 45px 0 25px; background: #333; color: #fff; font-size: 16px; display: flex; align-items: center; border-radius: 50px; position: relative;} #foot25 .family_site p a:after {content: ''; width: 11px; height: 6px; display: block; background: url('../img/new25/f_sel_btn_w.svg') no-repeat 50% 50% / 11px; position: absolute; right: 25px; top: calc(50% - 3px); transition: all .2s;} #foot25 .family_site ul {height: 0; opacity: 0; padding: 10px 0; position: absolute; top: 53px; left: 0; background: #333; border-radius: 10px; width: 100%; max-height: 130px; overflow-y: auto; transition: all .2s;} #foot25 .family_site ul li a {display: block; color: rgba(255,255,255,.6); font-weight: 500; font-size: 15px; padding: 5px 20px; transition: all .05s;} #foot25 .family_site ul li a:hover {color: #fff;} #foot25 .family_site .on ul {height: auto; opacity: 1;} #foot25 .family_site .on p a:after {transform: rotate(180deg);} #foot25 .family_site ul::-webkit-scrollbar {background-color: transparent; width: 4px; border-radius: 8px} #foot25 .family_site ul::-webkit-scrollbar-thumb {background-color: #666; border-radius: 8px; transition: all .05s;} #foot25 .family_site ul::-webkit-scrollbar-thumb:hover {background-color: #888;} #foot25 .copy_box {margin-top: 50px; display: flex; align-items: flex-end; justify-content: space-between;} #foot25 .copy_box .img {max-width: 231px;} #foot25 .copy_box .img img {display: block; width: 100%;} #foot25 .copy_box .right {display: flex; flex-direction: column; align-items: flex-end; gap: 20px;} #foot25 .copy_box .sns {display: flex; align-items: center; gap: 20px;} #foot25 .copy_box .copy {color: rgba(250,248,248,.8); font-size: 16px; font-weight: 300;} #foot25 .bottom {border-top: 1px solid rgba(255,255,255,.15); padding: 30px 0 40px; margin-top: 40px; display: flex; gap: 40px;} #foot25 .bottom li a {display: block; color: rgba(250,248,248,.8); font-size: 16px; font-weight: 300;} #foot25 .bottom li a.bold {color: var(--red); font-weight: 400;} #foot25 .bottom li a.link {display: flex;} #foot25 .bottom li a.link svg {stroke: rgba(250,248,248,.8); width: 8px; height: 8px; margin-left: 6px; margin-top: 4px;} /* Tablet */ @media only screen and (max-width: 1024px) { #foot25 {padding-top: 50px;} #foot25 .top {flex-wrap: wrap;} #foot25 .family_site {margin-top: 30px;} #foot25 .family_site > div {position: relative;} #foot25 .family_site p a {width: 220px;} #foot25 .copy_box {margin-top: 40px;} #foot25 .copy_box .img {max-width: 231px;} #foot25 .bottom {padding: 20px 0 100px; margin-top: 30px; gap: 30px;} } /* Mobile */ @media only screen and (max-width: 720px) { #foot25 {padding-top: 40px;} #foot25 .top {flex-wrap: wrap;} #foot25 .info {gap: 6px} #foot25 .info p {font-size: 14px; gap: 12px;} #foot25 .info span {font-size: 14px;} #foot25 .family_site {margin-top: 30px; width: 100%;} #foot25 .family_site > div {position: relative; width: 100%;} #foot25 .family_site p a {width: 100%; font-size: 14px; height: 46px;} #foot25 .family_site ul li a {font-size: 14px;} #foot25 .copy_box {margin-top: 40px; flex-wrap: wrap; gap: 20px;} #foot25 .copy_box .img {display: none;} #foot25 .copy_box .right {align-items: flex-start;} #foot25 .copy_box .copy {width: 100%; font-size: 14px;} #foot25 .bottom {padding: 20px 0 90px; margin-top: 30px; gap: 8px 20px; flex-wrap: wrap;} #foot25 .bottom li a {font-size: 14px;} } /* ----------------------------------------------------------------- quick ----------------------------------------------------------------- */ .quick {position: fixed; right: 0; top: 22%; padding: 20px 10px; max-width: 100px; background: #fff; border-radius: 20px 0 0 20px; box-shadow: 0 0px 12px rgba(0, 0, 0, .1); text-align: center; display: flex; flex-wrap: wrap; justify-content: center; box-sizing: border-box; z-index: 301;} .quick > * {width: 100%;} .quick .mykpc {margin-bottom: 15px; position: relative;} .quick .mykpc:after {content: ''; width: 20px; height: 1px; background: #ddd; display: block; position: absolute; left: calc(50% - 10px); bottom: 0;} .quick .mykpc a {display: block; margin: 0 auto 15px; width: 60px; height: 22px; background: url('../img/new25/q_mykpc.svg') no-repeat 50% 0% / 60px; font-size: 0;} .quick ul li {margin-top: 16px;} .quick ul li:nth-child(1) {margin-top: 0;} .quick ul li a {display: block; font-size: 13px; font-weight: 500; color: #222; transition: all .2s;} .quick ul li a .icon {width: 44px; height: 44px; border-radius: 44px; background: var(--gray_bg); margin: 0 auto 6px; transition: all .2s;} .quick ul li a .icon svg {width:100%; height: 20px; stroke: #222; transition: all .2s;} .quick ul li a:hover {color: var(--red);} .quick ul li a:hover .icon {background: var(--red);} .quick ul li a:hover .icon svg {stroke: #fff;} .quick_btn {display: none; z-index: 300;} /* Tablet */ @media only screen and (max-width: 1024px) { .quick {display: none; right: 20px; border-radius: 20px; top: auto; bottom: 155px;} .quick_btn {position: fixed; right: 20px; bottom: 90px; width: 55px; height: 55px; border-radius: 55px; background: var(--red); display: block; font-size: 0 !important; transition: all .2s;} .quick_btn svg {width: 18px; height: 18px; stroke: #fff; transform: rotate(45deg); transition: all .2s;} .quick_btn.active {background: #444;} .quick_btn.active svg {transform: rotate(0deg);} } /* Mobile */ @media only screen and (max-width: 720px) { .quick {right: 15px; bottom: 125px;} .quick .mykpc a {width: auto;} .quick_btn {bottom: 70px; right: 15px; width: 45px; height: 45px;} .quick_btn svg {width: 14px; height: 14px;} } /* ----------------------------------------------------------------- dockbar ----------------------------------------------------------------- */ .dockbar {display: none;} /* Tablet */ @media only screen and (max-width: 1024px) { .dockbar {height: 70px; display: block; box-shadow: 0 0px 12px rgba(0, 0, 0, .1); z-index: 9; padding: 5px 10px; box-sizing: border-box;} .dockbar ul {display: flex; align-items: center; justify-content: space-evenly; gap: 10px; height: 100%;} .dockbar ul li {width: 100%; height: 100%;} .dockbar ul li a {height: 100%; gap: 4px; display: flex; align-items: center; justify-content: center; align-content: center; flex-wrap: wrap;} .dockbar ul li a:before {content: ''; width: 30px; height: 30px; display: block;} .dockbar ul li a.category:before {background: url('../img/new25/b_cate.svg') no-repeat 50% 50% / 28px;} .dockbar ul li a.search:before {background: url('../img/new25/b_search.svg') no-repeat 50% 50% / 28px;} .dockbar ul li a.home:before {background: url('../img/new25/b_home.svg') no-repeat 50% 50% / 28px;} .dockbar ul li a.mypage:before {background: url('../img/new25/b_my.svg') no-repeat 50% 50% / 28px;} .dockbar ul li a.recently:before {background: url('../img/new25/b_edu.svg') no-repeat 50% 50% / 28px;} .dockbar ul li a span {width: 100%; font-size: 13px; color: #222; font-weight: 500; text-align: center;} } /* Mobile */ @media only screen and (max-width: 720px) { .dockbar {height: 60px;} .dockbar ul li a {gap: 2px;} .dockbar ul li a:before {width: 28px; height: 28px;} .dockbar ul li a.category:before {background: url('../img/new25/b_cate.svg') no-repeat 50% 50% / 24px;} .dockbar ul li a.search:before {background: url('../img/new25/b_search.svg') no-repeat 50% 50% / 24px;} .dockbar ul li a.home:before {background: url('../img/new25/b_home.svg') no-repeat 50% 50% / 23px;} .dockbar ul li a.mypage:before {background: url('../img/new25/b_my.svg') no-repeat 50% 50% / 23px;} .dockbar ul li a.recently:before {background: url('../img/new25/b_edu.svg') no-repeat 50% 50% / 23px;} .dockbar ul li a span {font-size: 12px;} } /* ----------------------------------------------------------------- 메인 ----------------------------------------------------------------- */ .visual_area .edu_list_box {z-index: 1;} .visual_area .edu_list_box .edu_list {position: absolute; top: 10px; width: 260px; height: 430px; padding: 11px 0; z-index: 0;} .visual_area .edu_list_box .edu_list:before {content: ''; width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; background-color:rgba(0,0,0,.15); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 10px; transition: all .2s; overflow: hidden; z-index: -1;} .visual_area .edu_list_box .edu_list > li {width: 100%;} .visual_area .edu_list_box .edu_list:has(> li:hover):before{background-color:rgba(0,0,0,.25); border-radius: 10px 0 0 10px; overflow: none;} .visual_area .edu_list_box .edu_list li a {color: #fff; height: 34px; display: flex; align-items: center;} .visual_area .edu_list_box .edu_list > li > a {font-size: 15px; padding: 0 15px;} .visual_area .edu_list_box .edu_list li:hover > a {background: var(--red);} .visual_area .edu_list_box .edu_list > li ul {display: none; position: absolute; left: 100%; top: 0; width: 200px; height: 430px; padding: 11px 0; z-index: 0;} .visual_area .edu_list_box .edu_list > li ul:before {content: ''; width: 100%; height: 100%; display: block; position: absolute; left: 0; top: 0; background: rgba(68,68,68,.5); border-radius: 0 10px 10px 0; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); overflow: hidden; z-index: -1; transition: all .2s;} .visual_area .edu_list_box .edu_list > li > ul:has(> li:hover):before {border-radius: 0; overflow: none;} .visual_area .edu_list_box .edu_list > li ul li a {font-size: 15px; padding: 0 10px;} .visual_area .edu_list_box .edu_list > li > ul > li > ul:after {content: ''; width: 1px; height: 100%; display: block; position: absolute; left: 0; top: 0; background: rgba(255,255,255,.1);} .visual_area .edu_list_box .edu_list .depth3 {width: 250px;} .vsl_slider_num_wrap {position: absolute; bottom: 15px; width: 100%; left: 50%; transform: translateX(-50%); padding-left: 340px;} .vsl_slider_num_wrap .wrap {width: 115px; height: 30px; background: rgba(0,0,0,.05); border-radius: 50px; display: flex; align-items: center; justify-content: center; gap: 12px; padding: 1px 0 0;} .vsl_slider_num_wrap .arrow {background: none; width: auto; height: auto;} .vsl_slider_num_wrap .arrow a {display: block; font-size: 0; width: 6px; height: 10px; background: url('/img/new25/vsl_btn.svg')no-repeat 50% 50% / 6px;} .vsl_slider_num_wrap .next a {transform: rotate(180deg);} .vsl_slider_num_wrap .vsl_slider_num {display: flex; align-items: center; justify-content: center; gap: 5px;} .vsl_slider_num_wrap .vsl_slider_num span {font-size: 15px; font-weight: 500;} .vsl_slider_num_wrap .current_value {color: #fff;} .vsl_slider_num_wrap .current_value:after {content: ''; width: 2px; height: 4px; display: inline-block; border-radius: 10px; background: #fff; margin-left: 5px; vertical-align: 3px;} .vsl_slider_num_wrap .total_value {color: rgba(255,255,255,.4);} .new_2025 .main {padding-bottom: 140px; background: url('/img/new25/main_bg.svg')no-repeat 100% 101% / contain;} .new_2025 .main h2 {margin-bottom: 25px; font-size: 32px; font-weight: 600; color: #222; display: flex; align-items: center; justify-content: space-between;} .new_2025 .main h2 .more {font-size: 0; width: 45px; height: 45px; border-radius: 50px; border: 1px solid #ddd; background: #fff; position: relative; transition: all .2s;} .new_2025 .main h2 .more:before {content: ''; width: 2px; height: 12px; border-radius: 10px; background: #222; display: block; position: absolute; left: calc(50% - 1px); top: calc(50% - 6px); transition: all .2s;} .new_2025 .main h2 .more:after {content: ''; width: 2px; height: 12px; border-radius: 10px; background: #222; display: block; position: absolute; left: calc(50% - 1px); top: calc(50% - 6px); transform: rotate(90deg); transition: all .2s;} .new_2025 .main h2 .more:hover {background: #222; border: 1px solid #222; color: #fff;} .new_2025 .main h2 .more:hover:before, .new_2025 .main h2 .more:hover:after {background: #fff;} .main .section_all {display: flex; flex-direction: column; gap: 100px;} .main .section1 {margin-bottom: 80px; height: 190px; background: #f9f9f9;} .main .section1 ul {display: flex; align-items: center; justify-content: center; height: 100%; gap: 2%;} .main .section1 ul li {width: 15%;} .main .section1 ul li a {font-size: 16px; color: #222; font-weight: 500; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;} .main .section1 ul li a img {max-width: 71px; width: 100%; display: block; position: relative; top: 0; transition: all .2s;} .main .section1 ul li a:hover img {top: -10px;} .main .section2 h2 {padding-left: 38px; background: url('/img/new25/h2_best.svg')no-repeat 0% 50% / 28px;} .main .section3 {display: flex; gap: 3%;} .main .section3 .service_box {padding: 60px 40px 40px; max-width: 500px; width: 100%; min-height: 350px; background: #1c1c1c url('/img/new25/service_bg.png')no-repeat 100% 100% / cover; border-radius: 10px; display: flex; flex-direction: column; justify-content: space-between;} .main .section3 .service_box h2 {color: #fff; justify-content: flex-start; align-items: flex-start; margin-bottom: 10px;} .main .section3 .service_box .h_stt {font-size: 17px; font-weight: 500; color: rgba(255,255,255,.7);} .main .section3 .service_box h2 a {display: block; font-size: 0; margin-left: 20px; width: 12px; height: 12px; margin-top: 8px; background: url('/img/new25/main_h2_link.svg')no-repeat 50% 50% / 12px;} .main .section3 .service_box ul li + li {margin-top: 8px;} .main .section3 .service_box ul li a {max-width: 200px; width: 100%; height: 48px; padding: 0 25px; font-size: 16px; color: #fff; font-weight: 500; display: flex; align-items: center; background: rgba(255,255,255,.1) url('/img/new25/main_s_vtn.svg')no-repeat top 50% right 25px; border: 1px solid rgba(255,255,255,.2); border-radius: 50px; transition: all .2s;} .main .section3 .service_box ul li a:hover {border: 1px solid rgba(255,255,255,.6); background: rgba(255,255,255,.1) url('/img/new25/main_s_vtn.svg')no-repeat top 50% right 20px;} .main .section3 .notice_box {width: 100%;} .main .section3 .notice_box ul {display: flex; flex-wrap: wrap; gap: 12px;} .main .section3 .notice_box li {width: 100%;} .main .section3 .notice_box li a {height: 80px; padding: 0 30px; border-radius: 10px; background: #f8f8f8; display: flex; gap: 15px; align-items: center; justify-content: space-between; transition: all .2s; position: relative;} .main .section3 .notice_box li a:before {opacity: 0; content: ''; width: 34px; height: 34px; display: block; border-radius: 50px; background: var(--red) url('/img/new25/main_noti_plus.svg')no-repeat 50% 50% / 14px; position: absolute; right: -17px; top: calc(50% - 17px); transition: all .2s;} .main .section3 .notice_box li a .tit {font-size: 18px; font-weight: 500; color: #222; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; word-break: break-all;} .main .section3 .notice_box li a .date {font-size: 15px; color: #888; font-weight: 500; min-width: 75px; opacity: 1; transition: all .2s; overflow: hidden; text-align: right} .main .section3 .notice_box li a:hover {background: var(--red_bg);} .main .section3 .notice_box li a:hover .date {min-width: 0; opacity: 0;} .main .section3 .notice_box li a:hover:before {opacity: 1;} .main .section4 {padding: 30px 40px; display: flex; gap: 5%; align-items: flex-start; border-radius: 10px; background: #f8f8f8;} .main .section4 h2 {font-size: 25px; line-height: 1.2; padding: 10px 0 0; min-width: 120px;} .main .section4 ul {display: flex; gap: 10px; width: 100%;} .main .section4 ul li {width: 100%;} .main .section4 ul li a {background: #fff; border-radius: 10px; width: 100%; height: 182px; text-align: center; padding: 10px; gap: 15px; display: flex; align-items: center; justify-content: center; flex-direction: column; transition: all .2s;} .main .section4 ul li a span {background-image: url('/img/new25/main_map.svg'); transition: all .2s;} .main .section4 ul li a span img{opacity: 0; transition: all .2s;} .main .section4 ul li a p {font-size: 18px; font-weight: 500; color: #222; height: 50px; line-height: 1.2; transition: all .2s;} .main .section4 ul li a:hover {background: var(--blue);} .main .section4 ul li a:hover span {background-image: none;} .main .section4 ul li a:hover span img {opacity: 1;} .main .section4 ul li a:hover p {color: #fff;} /* Tablet */ @media only screen and (max-width: 1024px) { .visual_area .edu_list_box {display: none;} .vsl_slider_num_wrap {left: 50%; transform: translateX(-50%); padding-left: 0px; width: auto;} .new_2025 .main {padding-bottom: 100px; background: url(/img/new25/main_bg.svg) no-repeat 100% 101% / 100%;} .new_2025 .main h2 {margin-bottom: 20px; font-size: 28px;} .main .section1 {margin-bottom: 70px; height: 170px;} .main .section1 ul li a {gap: 8px;} .main .section1 ul li a img {max-width: 65px;} .main .section2 .edu_list li:nth-child(n+7) {display: none;} .main .section3 .service_box {width: 45%; padding: 50px 30px 30px;} .main .section3 .service_box .h_stt {font-size: 16px;} .main .section3 .service_box h2 {margin-bottom: 8px;} .main .section3 .service_box h2 a {margin-left: 15px; margin-top: 8px; background: url('/img/new25/main_h2_link.svg')no-repeat 50% 50% / 12px;} .main .section3 .service_box ul li + li {margin-top: 8px;} .main .section3 .service_box ul li a {max-width: 200px; width: 100%; height: 48px; padding: 0 25px; font-size: 16px; color: #fff; font-weight: 500; display: flex; align-items: center; background: rgba(255,255,255,.1) url('/img/new25/main_s_vtn.svg')no-repeat top 50% right 25px; border: 1px solid rgba(255,255,255,.2); border-radius: 50px; transition: all .2s;} .main .section3 .notice_box {width: 55%;} .main .section3 .notice_box ul {gap: 10px;} .main .section3 .notice_box li a {height: 70px; padding: 0 20px;} .main .section3 .notice_box li a:before {right: 15px;} .main .section3 .notice_box li a .tit {font-size: 17px;} .main .section3 .notice_box li a .date {font-size: 15px;} .main .section3 .notice_box li a:hover .date {min-width: 35px; width: 35px;} .main .section4 {padding: 20px 30px; gap: 3%;} .main .section4 h2 {font-size: 22px; min-width: 100px;} .main .section4 ul {flex-wrap: wrap; gap: 10px 2%;} .main .section4 ul li {width: 32%;} .main .section4 ul li a {height: 150px;} .main .section4 ul li a span {max-height: 55px; background-image: url('/img/new25/main_map.svg'); background-size: contain;} .main .section4 ul li a span img{height: 100%;} .main .section4 ul li a p {font-size: 17px; height: 40px;} } /* Mobile */ @media only screen and (max-width: 720px) { .vsl_slider_num_wrap .vsl_slider_num span {font-size: 14px;} .new_2025 .main {padding-bottom: 60px; background: none; /* background: url(/img/new25/main_bg.svg) no-repeat 100% 101% / 100%; */} .new_2025 .main h2 {margin-bottom: 15px; font-size: 22px;} .new_2025 .main h2 .more {width: 40px; height: 40px;} .main .section_all {gap: 40px;} .main .section1 {margin-bottom: 40px; height: auto; padding: 20px 0;} .main .section1 ul {gap: 20px 2%; flex-wrap: wrap; align-items: flex-start; } .main .section1 ul li {width: 32%;} .main .section1 ul li a {gap: 8px; font-size: 14px;} .main .section1 ul li a img {max-width: 45px;} .main .section2 h2 {padding-left: 30px; background: url('/img/new25/h2_best.svg')no-repeat 0% 50% / 22px;} .main .section3 {flex-wrap: wrap; gap: 40px;} .main .section3 .service_box {width: 100%; padding: 40px 20px 30px; min-height: 260px;} .main .section3 .service_box .h_stt {font-size: 15px;} .main .section3 .service_box h2 {margin-bottom: 6px;} .main .section3 .service_box h2 a {margin-left: 10px; margin-top: 5px; background: url('/img/new25/main_h2_link.svg')no-repeat 50% 50% / 10px;} .main .section3 .service_box ul li + li {margin-top: 8px;} .main .section3 .service_box ul li a {max-width: 100%; width: 100%; height: 45px; padding: 0 20px; font-size: 15px; background: rgba(255,255,255,.1) url('/img/new25/main_s_vtn.svg')no-repeat top 50% right 25px;} .main .section3 .notice_box {width: 100%;} .main .section3 .notice_box ul {gap: 6px;} .main .section3 .notice_box li a {height: 60px; padding: 0 15px; gap: 10px} .main .section3 .notice_box li a .tit {font-size: 15px;} .main .section3 .notice_box li a .date {font-size: 14px;} .main .section4 {flex-wrap: wrap; padding: 20px 15px; gap: 0;} .main .section4 h2 {font-size: 22px;} .main .section4 ul {flex-wrap: wrap; gap: 10px 2%;} .main .section4 ul li {width: 49%;} .main .section4 ul li a {height: 120px; gap: 8px;} .main .section4 ul li a span {max-height: 45px;} .main .section4 ul li a p {font-size: 15px; height: auto;} } /* ----------------------------------------------------------------- 리스트 ----------------------------------------------------------------- */ .top_Cate {display: flex; align-items: center; justify-content: center; flex-wrap: wrap; max-width: 1100px; width: 100%; gap: 6px; margin: 0 auto;} .top_Cate li a {height: 36px; padding: 1px 16px 0; font-size: 15px; font-weight: 500; display: flex; align-items: center; justify-content: center; border: 1px solid #ddd; background: #fff; color: #888; border-radius: 50px; transition: all .2s;} .top_Cate li a:hover {color: var(--red); border: 1px solid var(--red);} .top_Cate li.on a {background: var(--red_bg); border: 1px solid var(--red_bg); color: var(--red);} .top_Cate li.reset a {font-size: 0; width: 36px; padding: 0 0 0 1px;} .top_Cate li.reset a svg{stroke: #888; transition: all .2s; width: 13px; height: 12px;} .top_Cate li.reset a:hover svg {stroke: var(--red);} .flex_just {display: flex; align-items: center; justify-content: space-between;} .total_box {margin: 60px 0 40px; padding-bottom: 10px; border-bottom: 2px solid #222;} .total_box .total {font-size: 16px; color: #222; font-weight: 500;} .total_box .total span {font-size: 16px; color: var(--red); font-weight: 600;} .new_2025 .pt_com_tabboxs .total_box {margin: 40px 0 10px; border-bottom: 0;} .li_group_btn {display: flex; align-items: center; gap: 10px;} .li_group_btn a {padding: 0 22px 0 8px; background: #fff; font-size: 15px; color: #888; font-weight: 500; position: relative; display: flex; align-items: center; transition: all .2s;} .li_group_btn a:hover {color: #222;} .li_group_btn a:before {content: ''; width: 8px; height: 6px; display: block; background: url('../img/new25/li_group_icon.svg') no-repeat 50% 50% / 8px; position: absolute; right: 8px; top: calc(50% - 4px);} .li_group_btn a.on {color: #222;} .li_group_btn a.on:before {background: url('../img/new25/li_group_bk_icon.svg') no-repeat 50% 50% / 8px;} .li_group_btn a.down:before {transform: rotate(180deg);} .edu_wrap .edu_list {display: flex; flex-wrap: wrap; gap: 20px 1.33%;} .edu_wrap .edu_list.edu_3 {gap: 20px 2%;} .edu_wrap .edu_list li {width: 24%;} .edu_wrap .edu_list.edu_3 li {width: 32%;} .edu_wrap .edu_list li a {border: 1px solid #ddd; border-radius: 10px; display: block; width: 100%; height: 100%; overflow: hidden; background: #fff; transition: all .2s;} .edu_wrap .edu_list li:hover a {border: 1px solid #222; box-shadow: 0 0px 12px rgba(0, 0, 0, .1);} .edu_wrap .edu_list li .img {border-radius: 10px; overflow: hidden;} .edu_wrap .edu_list li .img img {display: block; width: 100%; aspect-ratio: 1 / 0.658;} .edu_wrap .edu_list li .txt_box {padding: 25px 20px;} .edu_wrap .edu_list li .small_top {font-size: 15px; font-weight: 600; margin-bottom: 2px;} .edu_wrap .edu_list li .small_top.red {color: var(--red);} .edu_wrap .edu_list li .tit {font-size: 20px; color: #222; font-weight: 600; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; word-break: break-all;} .edu_wrap .edu_list li .date {font-size: 15px; color: #888; font-weight: 400; margin-top: 8px;} .edu_wrap .edu_list li .tag_box {margin-top: 30px;} .edu_wrap .edu_list li .icon_box {margin-top: 10px; display: flex; flex-wrap: wrap; gap: 15px;} .edu_wrap .edu_list li .icon_box span {font-size: 15px; color: #888; font-weight: 400;} .edu_wrap .edu_list li .icon_box .best {padding-left: 20px; background: url('../img/new25/edu_best_icon.svg') no-repeat 0% 50% / 15px;} .edu_wrap .edu_list li .icon_box .luv {padding-left: 21px; background: url('../img/new25/edu_luv_icon.svg') no-repeat 0% 50% / 16px;} .edu_wrap .edu_list li .icon_box .re {padding-left: 19px; background: url('../img/new25/edu_re_icon.svg') no-repeat 0% 50% / 14px;} .edu_wrap .edu_list li.nodata {color: #777; font-size: 16px; font-weight: 400; width: 100%; border-bottom: 1px solid #ddd; text-align: center; padding: 40px 20px 80px 20px;} .edu_wrap .edu_list li.nodata p {font-size: 16px; font-weight: 400;} .ed_tabboxs .edu_wrap .edu_list li.nodata {padding: 80px 20px; border-top: 2px solid #222;} .tag_box {display: flex; flex-wrap: wrap; gap: 6px;} .tag_box span {height: 28px; font-size: 13px; padding: 1px 8px 0; font-weight: 500; color: #888; border-radius: 4px; background: #eee; display: flex; align-items: center; justify-content: center;} .tag_box .red {color: var(--red); background: rgba(238,46,75,0.07);} .tag_box .blue {color: #455cd0; background: rgba(69,92,208,0.1);} /* Tablet */ @media only screen and (max-width: 1024px) { .top_Cate li a {height: 34px; padding: 1px 14px 0;} .top_Cate li.reset a {width: 34px;} .total_box {margin: 50px 0 30px;} .total_box .total {font-size: 15px;} .total_box .total span {font-size: 15px;} .edu_wrap .edu_list {gap: 20px 2%;} .edu_wrap .edu_list li {width: 32%;} .edu_wrap .edu_list li .txt_box {padding: 20px 20px;} .edu_wrap .edu_list li .tit {font-size: 18px;} .edu_wrap .edu_list li .small_top {font-size: 14px;margin-bottom: 1px;} .edu_wrap .edu_list li .date {font-size: 14px; margin-top: 6px;} .edu_wrap .edu_list li .tag_box {margin-top: 25px;} .edu_wrap .edu_list li .icon_box {gap: 13px;} .edu_wrap .edu_list li .icon_box span {font-size: 14px;} .edu_wrap .edu_list li .icon_box .best {padding-left: 18px; background: url('../img/new25/edu_best_icon.svg') no-repeat 0% 50% / 14px;} .edu_wrap .edu_list li .icon_box .luv {padding-left: 19px; background: url('../img/new25/edu_luv_icon.svg') no-repeat 0% 50% / 15px;} .edu_wrap .edu_list li .icon_box .re {padding-left: 17px; background: url('../img/new25/edu_re_icon.svg') no-repeat 0% 50% / 13px;} } /* Mobile */ @media only screen and (max-width: 720px) { .top_Cate li a {height: 30px; padding: 1px 10px 0; font-size: 13px;} .top_Cate li.reset a {width: 30px;} .top_Cate li.reset a svg{width: 12px;} .total_box {margin: 40px 0 20px; flex-wrap: wrap; gap: 10px} .total_box .total {font-size: 14px;} .total_box .total span {font-size: 14px;} .li_group_btn {gap: 6px;} .li_group_btn a {padding: 0 16px 0 0; font-size: 14px;} .li_group_btn a:before {right: 4px; top: calc(50% - 3px);} .edu_wrap .edu_list {gap: 10px 2%;} .edu_wrap .edu_list.edu_3 {gap: 10px 2%;} .edu_wrap .edu_list li {width: 49%;} .edu_wrap .edu_list.edu_3 li {width: 49%;} .edu_wrap .edu_list li .txt_box {padding: 15px 10px;} .edu_wrap .edu_list li .tit {font-size: 15px;} .edu_wrap .edu_list li .small_top {font-size: 13px;margin-bottom: 0px;} .edu_wrap .edu_list li .date {font-size: 13px; margin-top: 4px;} .edu_wrap .edu_list li .tag_box {margin-top: 15px;} .edu_wrap .edu_list li .icon_box {margin-top: 10px; gap: 8px;} .edu_wrap .edu_list li .icon_box span {font-size: 13px;} .edu_wrap .edu_list li .icon_box .best {padding-left: 17px; background: url('../img/new25/edu_best_icon.svg') no-repeat 0% 50% / 13px;} .edu_wrap .edu_list li .icon_box .luv {padding-left: 18px; background: url('../img/new25/edu_luv_icon.svg') no-repeat 0% 50% / 14px;} .edu_wrap .edu_list li .icon_box .re {padding-left: 16px; background: url('../img/new25/edu_re_icon.svg') no-repeat 0% 50% / 12px;} .edu_wrap .edu_list li.nodata {font-size: 14px; padding: 30px 10px 50px 10px; width: 100%;} .edu_wrap .edu_list li.nodata p {font-size: 14px;} .ed_tabboxs .edu_wrap .edu_list li.nodata {padding: 50px 20px;} .tag_box span {height: 26px; padding: 1px 6px 0;} } /* ----------------------------------------------------------------- 페이징 ----------------------------------------------------------------- */ .paging {margin-top: 60px; display: flex; align-items: center; justify-content: center; gap: 30px; width: 100%;} .paging p {display: flex; align-items: center; justify-content: center; gap: 8px;} .paging p a {width: 35px; height: 35px; display: flex; align-items: center; justify-content: center; color: #888; transition: .2s; font-size: 0;} .paging p a:hover {color: var(--red);} .paging p.num a {font-size: 17px;} .paging p a.on {background: var(--red); color: #fff; border-radius: 35px; font-weight: 500;} .paging .btn_first {background: url('/img/new25/btn_first.svg')no-repeat 50% 50% / 24px;} .paging .btn_prev {background: url('/img/new25/btn_prev.svg')no-repeat 50% 50% / 24px;} .paging .btn_next {background: url('/img/new25/btn_prev.svg')no-repeat 50% 50% / 24px; transform: rotate(180deg);} .paging .btn_last {background: url('/img/new25/btn_first.svg')no-repeat 50% 50% / 24px; transform: rotate(180deg);} /* Tablet */ @media only screen and (max-width: 1024px) { .paging {margin-top: 40px;} } /* Mobile */ @media only screen and (max-width: 720px) { .paging {margin-top: 30px; gap: 8px;} .paging p {gap: 2px;} .paging p.num a {font-size: 15px;} .paging .btn_first {background: url('/img/new25/btn_first.svg')no-repeat 50% 50% / 22px;} .paging .btn_prev {background: url('/img/new25/btn_prev.svg')no-repeat 50% 50% / 22px;} .paging .btn_next {background: url('/img/new25/btn_prev.svg')no-repeat 50% 50% / 22px;} .paging .btn_last {background: url('/img/new25/btn_first.svg')no-repeat 50% 50% / 22px;} } /* ----------------------------------------------------------------- 마이페이지 - 틀 ----------------------------------------------------------------- */ .new_2025 .center {max-width: 1360px; margin: 0 auto; padding: 60px 30px 140px; width: 100%; display: flex;} .new_2025 .center .menu_con_flex {display: flex; width: 100%;} .new_2025 .sp_title_area {margin-right: 45px; min-width: 220px; padding-top: 0;} .new_2025 .sp_contents_body {width: 100%; padding: 0; margin-bottom: 0;} .navi_box {width: 100%; height: 44px; background: #f9f9f9; display: flex; align-items: center;} .navi_box ul {display: flex; align-items: center; justify-content: flex-end; gap: 20px;} .navi_box li {position: relative;} .navi_box li, .navi_box li a, .navi_box li span {color: rgb(136, 136, 136); font-size: 14px; font-weight: 500; line-height: 20px;} .navi_box li::before {content: ""; width: 4px; height: 4px; display: block; position: absolute; left: -12px; top: 8px; border-radius: 5px; background: rgb(221, 221, 221);} .navi_box li:nth-child(1)::before {display: none;} .navi_box li:nth-child(1) a {display: block; width: 15px; height: 16px; font-size: 0px; background: url(/img/new25/nav_home.svg) 50% 50% / 15px no-repeat;} .new_2025 .center h2 {font-size: 34px; font-weight: 600; color: #222; margin-bottom: 40px;} .new_2025 h3 {font-size: 22px; font-weight: 600; color: #222; margin-bottom: 12px; margin-top: 60px;} .new_2025 h3.top {margin-top: 0;} /* Tablet */ @media only screen and (max-width: 1024px) { .new_2025 .center {padding: 50px 20px 100px;} .new_2025 .center h2 {font-size: 38px; text-align: center; margin-bottom: 20px;} } /* Mobile */ @media only screen and (max-width: 720px) { .new_2025 .center {padding: 40px 15px 60px;} .new_2025 .center h2 {font-size: 26px;} .new_2025 h3 {font-size: 19px; margin-top: 40px; margin-bottom: 10px;} .navi_box {height: 40px;} } /* ----------------------------------------------------------------- 마이페이지 - 수강신청현황 ----------------------------------------------------------------- */ .top_my_box {padding-right: 10px; margin-bottom: 10px; display: flex; align-items: center; justify-content: space-between;} .my_edu_tt {display: flex; align-items: center; justify-content: flex-end; gap: 6px; margin-bottom: 10px; font-size: 15px; color: #777; padding-right: 20px;} .my_edu_tt:before {content: ''; display: inline-block; background: url('/img/new25/my_edu_edit_icon.svg')no-repeat 0% 50% / 14px; width: 14px; height: 13px;} .my_name_wrap {font-size: 22px; color: #222; display: flex; align-items: center;} .my_name_wrap .img {width: 50px; height: 50px; border-radius: 50px; margin-right: 14px; display: inline-block;} .my_name_wrap .name {font-size: 22px; font-weight: 600;} .my_edu_box .my_edu_li {width: 100%; display: flex; gap: 25px; flex-direction: column;} .my_edu_box .my_edu_li > li > div {padding: 30px 40px; border: 2px solid #222; width: 100%; border-radius: 10px;} .my_edu_box .my_edu_li .top {display: flex; align-items: center; justify-content: space-between; gap: 10px 30px; flex-wrap: wrap; margin-bottom: 14px;} .my_edu_box .my_edu_li .s_btn_box a {padding-left: 27px; background-repeat: no-repeat; background-position: left 8px top 50%; transition: all .2s;} .my_edu_box .my_edu_li .s_btn_box a:hover {border: 1px solid #222;} .my_edu_box .my_edu_li .s_btn_box .my_btn_icon01 {background-image: url('/img/new25/my_edu_sbtn_icon01.svg');} .my_edu_box .my_edu_li .s_btn_box .my_btn_icon02 {background-image: url('/img/new25/my_edu_sbtn_icon02.svg');} .my_edu_box .my_edu_li .s_btn_box .my_btn_icon03 {background-image: url('/img/new25/my_edu_sbtn_icon03.svg');} .my_edu_box .my_edu_li .s_btn_box .my_btn_icon04 {background-image: url('/img/new25/my_edu_sbtn_icon04.svg');} .my_edu_box .my_edu_li .s_btn_box .my_btn_icon05 {background-image: url('/img/new25/my_edu_sbtn_icon05.svg');} .my_edu_box .my_edu_li .s_btn_box .my_btn_icon06 {background-image: url('/img/new25/my_edu_sbtn_icon06.svg');} .s_btn_box {display: flex; flex-wrap: wrap; gap: 6px;} .s_btn_box a {height: 28px; font-size: 13px; padding: 1px 8px 0; font-weight: 500; color: #222; border-radius: 4px; background: #fff; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center;} .my_edu_box .my_edu_li .tit {font-size: 22px; color: #222; font-weight: 600;} .my_edu_box .my_edu_li .bottom {margin-top: 30px; display: flex; justify-content: space-between; align-items: flex-end; gap: 30px;} .my_edu_box .my_edu_li .bottom ul li {display: flex; gap: 12px; margin-bottom: 5px;} .my_edu_box .my_edu_li .bottom ul li:last-child {margin-bottom: 0;} .my_edu_box .my_edu_li .bottom ul li .tit {min-width: 80px; color: #888; font-size: 15px; font-weight: 400; position: relative;} .my_edu_box .my_edu_li .bottom ul li .tit:after {content: ''; width: 1px; height: 10px; display: inline-block; background: #ddd; position: absolute; right: 0; top: 5px;} .my_edu_box .my_edu_li .bottom ul li .tt {font-size: 15px; color: #444;} .my_edu_box .my_edu_li .bottom .btn {display: flex; gap: 8px; max-width: 400px; width: 50%; justify-content: end;} .my_edu_box .my_edu_li .bottom .btn a {font-size: 17px; width: 220px; height: 55px; border-radius: 5px; background: var(--red); color: #fff; font-weight: 600; display: flex; align-items: center; justify-content: center; transition: all .2s;} .my_edu_box .my_edu_li .bottom .btn a.gray {background: #eee; color: #999;} .my_edu_box .my_edu_li .bottom .btn a:hover {background: #222; color: #fff;} .my_edu_box .t_gray {padding-left: 10px; margin-top: 6px; font-size: 15px;} .my_edu_box .t_gray:nth-of-type(1) {margin-top: 20px;} .my_edu_box .t_gray .s_link {margin-left: 4px;} .my_edu_box .t_gray b {font-weight: 600; font-size: 15px;} .new_2025 .t_gray {font-size: 15px;} a.s_link {color: var(--red); text-decoration: underline !important; font-weight: 500;} a.s_link:hover {color: var(--red);} .edumy_btn_box {display: flex; flex-wrap: wrap; gap: 15px 1.5%; margin-top: 60px;} .edumy_btn_box li {width: 32.33%; padding: 40px 30px 80px; border: 2px solid #eee; border-radius: 10px;} .edumy_btn_box li:nth-child(1) {background: url('/img/new25/edumy_btn_icon01.svg')no-repeat bottom 30px right 30px / 35px;} .edumy_btn_box li:nth-child(2) {background: url('/img/new25/edumy_btn_icon02.svg')no-repeat bottom 30px right 30px / 34px;} .edumy_btn_box li:nth-child(3) {background: url('/img/new25/edumy_btn_icon03.svg')no-repeat bottom 30px right 30px / 52px;} .edumy_btn_box li:nth-child(4) {background: url('/img/new25/edumy_btn_icon04.svg')no-repeat bottom 30px right 30px / 45px;} .edumy_btn_box li:nth-child(5) {background: url('/img/new25/edumy_btn_icon05.svg')no-repeat bottom 30px right 30px / 48px;} .edumy_btn_box li .tit, .edumy_btn_box li .tit a {font-size: 20px; font-weight: 500; color: #222;} .edumy_btn_box li .tit {display: flex; align-items: center; justify-content: space-between;} .edumy_btn_box li .tit a {padding-right: 15px; background: url('/img/new25/edumy_btn_tit.svg')no-repeat 100% 50% / 7px; transition: all .2s;} .edumy_btn_box li .tit a:hover {padding-right: 20px;} .edumy_btn_box li .tit .num {color: var(--red); font-size: 15px;} .edumy_btn_box li .tit .num b {font-size: 28px; font-weight: 600; margin-right: 4px; vertical-align: -1px;} .edumy_btn_box li .gray_tt {margin-top: 10px; font-size: 15px; color: #777;} .edumy_btn_box li .gray_tt a, .edumy_btn_box li .gray_tt span {font-size: 15px; color: #777; display: block; margin-bottom: 6px;} .edumy_btn_box li .gray_tt a {padding-left: 20px; background: url('/img/new25/edumy_a.svg')no-repeat 0% 50% / 14px;} .edumy_btn_box li .gray_tt a:Hover {text-decoration: underline;} .edumy_btn_box li .gray_tt span {padding-left: 23px;} .edumy_btn_box li .gray_tt .mail{background: url('/img/new25/edumy_mail.svg')no-repeat 0% 50% / 15px;} .edumy_btn_box li .gray_tt .tel {background: url('/img/new25/edumy_tel.svg')no-repeat 0% 50% / 15px;} /* Tablet */ @media only screen and (max-width: 1024px) { .new_2025 .my_edu_tt {font-size: 14px;} .new_2025 .my_name_wrap {font-size: 20px;} .my_name_wrap .img {width: 45px; height: 45px; margin-right: 14px;} .my_name_wrap .name {font-size: 20px;} .my_edu_box .my_edu_li > li > div {padding: 30px 30px;} .my_edu_box .my_edu_li .top {gap: 10px 20px; margin-bottom: 10px;} .my_edu_box .my_edu_li .tit {font-size: 20px;} .my_edu_box .my_edu_li .bottom {gap: 20px;} .my_edu_box .my_edu_li .bottom .btn a {font-size: 16px; width: 200px; height: 50px;} .my_edu_box .t_gray {padding-left: 10px;} .my_edu_box .t_gray:nth-of-type(1) {margin-top: 15px;} .edumy_btn_box {margin-top: 50px; gap: 10px 1.5%;} .edumy_btn_box li {padding: 20px 20px 60px;} .edumy_btn_box li:nth-child(1) {background: url('/img/new25/edumy_btn_icon01.svg')no-repeat bottom 20px right 20px / 30px;} .edumy_btn_box li:nth-child(2) {background: url('/img/new25/edumy_btn_icon02.svg')no-repeat bottom 20px right 20px / 29px;} .edumy_btn_box li:nth-child(3) {background: url('/img/new25/edumy_btn_icon03.svg')no-repeat bottom 20px right 20px / 47px;} .edumy_btn_box li:nth-child(4) {background: url('/img/new25/edumy_btn_icon04.svg')no-repeat bottom 20px right 20px / 40px;} .edumy_btn_box li:nth-child(5) {background: url('/img/new25/edumy_btn_icon05.svg')no-repeat bottom 20px right 20px / 43px;} .edumy_btn_box li .tit, .edumy_btn_box li .tit a {font-size: 19px;} .edumy_btn_box li .tit a {background: url('/img/new25/edumy_btn_tit.svg')no-repeat 100% 45% / 7px;} .edumy_btn_box li .tit .num {font-size: 14px;} .edumy_btn_box li .tit .num b {font-size: 23px;margin-right: 3px; vertical-align: -1px;} .edumy_btn_box li .gray_tt {margin-top: 8px; font-size: 14px;} .edumy_btn_box li .gray_tt a, .edumy_btn_box li .gray_tt span {font-size: 14px;} } /* Mobile */ @media only screen and (max-width: 720px) { .top_my_box {margin-bottom: 10px; flex-wrap: wrap; gap: 5px; flex-direction: column;} .my_edu_tt {margin-left: auto; padding-right: 10px;} .my_name_wrap {font-size: 17px; margin: 0 auto;} .my_name_wrap .img {width: 40px; height: 40px; margin-right: 10px;} .my_name_wrap .name {font-size: 17px;} .my_edu_box .my_edu_li > li > div {padding: 20px 15px;} .my_edu_box .my_edu_li .top {gap: 10px; margin-bottom: 15px;} .my_edu_box .my_edu_li .tit {font-size: 16px;} .my_edu_box .my_edu_li .bottom {gap: 20px; flex-wrap: wrap; margin-top: 20px;} .my_edu_box .my_edu_li .bottom .btn {width: 100%; max-width: 100%; gap: 6px;} .my_edu_box .my_edu_li .bottom .btn a {font-size: 15px; width: 100%; height: 45px;} .my_edu_box .my_edu_li .bottom ul li .tit {min-width: 70px; font-size: 14px;} .my_edu_box .my_edu_li .bottom ul li .tit:after {top: 4px;} .my_edu_box .my_edu_li .bottom ul li .tt {font-size: 14px;} .my_edu_box .t_gray {padding-left: 0px; font-size: 14px;} .my_edu_box .t_gray:nth-of-type(1) {margin-top: 10px;} .my_edu_box .t_gray .s_link {display: block; margin-left: 0; margin-top: 2px;} .my_edu_box .t_gray b {font-size: 14px;} .new_2025 .t_gray {font-size: 14px;} .new_2025 .t_gray .s_link {display: block;} .edumy_btn_box {margin-top: 40px; gap: 10px;} .edumy_btn_box li {padding: 15px 15px 40px; width: 100%;} .edumy_btn_box li:nth-child(1) {background: url('/img/new25/edumy_btn_icon01.svg')no-repeat bottom 15px right 15px / 30px;} .edumy_btn_box li:nth-child(2) {background: url('/img/new25/edumy_btn_icon02.svg')no-repeat bottom 15px right 15px / 29px;} .edumy_btn_box li:nth-child(3) {background: url('/img/new25/edumy_btn_icon03.svg')no-repeat bottom 15px right 15px / 47px;} .edumy_btn_box li:nth-child(4) {background: url('/img/new25/edumy_btn_icon04.svg')no-repeat bottom 15px right 15px / 40px;} .edumy_btn_box li:nth-child(5) {background: url('/img/new25/edumy_btn_icon05.svg')no-repeat bottom 15px right 15px / 43px;} .edumy_btn_box li .tit, .edumy_btn_box li .tit a {font-size: 17px;} .edumy_btn_box li .tit a {background: url('/img/new25/edumy_btn_tit.svg')no-repeat 100% 40% / 6px;} .edumy_btn_box li .tit .num {font-size: 13px;} .edumy_btn_box li .tit .num b {font-size: 22px; margin-right: 2px;} .edumy_btn_box li .gray_tt {margin-top: 8px; font-size: 14px;} .edumy_btn_box li .gray_tt a, .edumy_btn_box li .gray_tt span {font-size: 14px; background: url(/img/new25/edumy_a.svg) no-repeat 0% 40% / 14px;} } /* ----------------------------------------------------------------- 팝업 ----------------------------------------------------------------- */ .new_2025 #PTWCN001_002_form_area {max-width: 900px; width: 100% !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); height: auto;} .new_2025 #PTWCN001_002_form_area .com_layer {box-shadow: none;} .new_2025 #PTWCN001_002_form_area .com_layer_con {border: none; padding: 20px 30px 40px !important;} .new_2025 #PTWCN001_002_form_area .Pop_layer {width: 100%; border-radius: 10px; overflow: hidden; height: 100%;} .new_2025 #PTWCN001_002_form_area .Pop_tit {font-size: 20px; padding: 0 30px; width: 100%; height: 56px; display: flex; align-items: center; justify-content: space-between; background: #222; color: #fff; position: inherit;} .new_2025 #PTWCN001_002_form_area .Pop_tit .com_layer_close {width: 18px; height: 18px; position: inherit; background: url(../img/pop_close.svg) no-repeat 0 0;} .new_2025 #PTWCN001_002_form_area .com_layer_con.layer_sizeL{width: 100%; max-height: 600px;} .new_2025 .active_layer2 {max-width: 900px; width: 100% !important; left: 50% !important; top: 50% !important; transform: translate(-50%, -50%); height: auto;} .new_2025 .active_layer2 .Pop_layer {max-width: 800px; width: 100%; border-radius: 10px; overflow: hidden; height: 100%;} .new_2025 .active_layer2 .Pop_tit {font-size: 20px; padding: 0 30px; width: 100%; height: 56px; display: flex; align-items: center; justify-content: space-between; background: #222; color: #fff;} .new_2025 .active_layer2 .Pop_tit .com_layer_close {width: 18px; height: 18px; position: inherit; background: url(../img/pop_close.svg) no-repeat 0 0;} .new_2025 .active_layer2 .Pop_layer.maxW900 {max-width: 900px;} .new_2025 .active_layer2 .com_layer_con {padding: 40px 30px !important; width: 100%; max-width: 100%; border: none; max-height: 600px; overflow: auto;} .new_2025 .active_layer2 .com_layer_con .gray_box {font-size: 16px; color: #666; background: #f8f8f8; border-radius: 5px; padding: 30px 20px;} .new_2025 .active_layer2 .com_layer_con .gray_box b {font-size: 16px; color: #222; font-weight: 500;} .new_2025 .active_layer2 .com_layer_con .gray_box .red {font-size: 16px; color: var(--red);} .new_2025 .tt_gray_box {padding: 20px; width: 100%; font-size: 16px; color: #666; background: #f8f8f8; border-radius: 5px;} .new_2025 h2 + .tt_gray_box {margin: 20px 0;} .new_2025 .right_img {padding: 20px 110px 20px 20px; position: relative; margin-bottom: 20px;} .new_2025 .right_img .img {position: absolute; right: 10px; bottom: 10px;} .new_2025 .right_img .img img {display: block; width: 100%;} .new_2025 .dot_li li {font-size: 16px; color: #666; font-weight: 500; position: relative; padding-left: 12px;} .new_2025 .dot_li li:before {content: ''; width: 4px; height: 4px; background: #999; border-radius: 5px; display: block; position: absolute; left: 0; top: 9px;} .new_2025 .dot_li li + li {margin-top: 4px;} .new_2025 .btn_wrap .com_layer_close {position: inherit; text-indent: 0;} .new_2025 .layer_bottom_block {display: none;} .new_2025 .warning_box {margin-top: 40px;} .new_2025 .tt_gray_box .tit {font-size: 18px; font-weight: 600; color: #222; margin-bottom: 10px; margin-top: 0; display: flex; align-items: center; gap: 8px;} .new_2025 .warning_box .tit span {font-size: 14px; display: inline-block; width: 20px; height: 20px; border-radius: 20px; background: #222; font-weight: 600; color: #fff; display: flex; align-items: center; justify-content: center;} /* Tablet */ @media only screen and (max-width: 1024px) { .new_2025 .active_layer2 .Pop_tit {padding: 0 20px;} .new_2025 .active_layer2 .com_layer_con {padding: 30px 20px !important; max-height: 500px;} .new_2025 #PTWCN001_002_form_area .pt_com_pop h2 {font-size: 22px; padding-bottom: 15px;} .new_2025 .warning_box {margin-top: 30px;} } /* Mobile */ @media only screen and (max-width: 720px) { .new_2025 #PTWCN001_002_form_area {left: 0% !important; top: 0% !important; transform: translate(0%, 0%); padding: 0 !important; min-height: 100%;} .new_2025 #PTWCN001_002_form_area .Pop_layer {border-radius: 0; max-height: 100%; min-height: 100vh;} .new_2025 #PTWCN001_002_form_area .Pop_tit {font-size: 18px; padding: 0 15px; height: 54px;} .new_2025 #PTWCN001_002_form_area .Pop_tit .com_layer_close {width: 16px; height: 16px; background: url(../img/pop_close.svg) no-repeat 0 0;} .new_2025 #PTWCN001_002_form_area .com_layer_con {padding: 20px 15px !important; max-height: calc(100vh - 54px); min-height: calc(100vh - 54px) !important;} .new_2025 #PTWCN001_002_form_area .pt_com_pop h2 {font-size: 17px; padding-bottom: 10px;} .new_2025 .active_layer2 {left: 0% !important; top: 0% !important; transform: translate(0%, 0%); padding: 0 !important; min-height: 100%;} .new_2025 .active_layer2 .Pop_layer {border-radius: 0; max-height: 100%; min-height: 100vh;} .new_2025 .active_layer2 .Pop_tit {font-size: 18px; padding: 0 15px; height: 54px;} .new_2025 .active_layer2 .Pop_tit .com_layer_close {width: 16px; height: 16px; background: url(../img/pop_close.svg) no-repeat 0 0;} .new_2025 .active_layer2 .com_layer_con {padding: 20px 15px !important; max-height: calc(100vh - 54px); min-height: calc(100vh - 54px) !important;} .new_2025 .active_layer2 .com_layer_con .gray_box {font-size: 14px; padding: 20px 15x;} .new_2025 .active_layer2 .com_layer_con .gray_box b {font-size: 14px;} .new_2025 .active_layer2 .com_layer_con .gray_box .red {font-size: 14px;} .new_2025 .right_img {padding: 15px 100px 15px 15px; margin-bottom: 15px;} .new_2025 .right_img .img {max-width: 70px;} .new_2025 .dot_li li {font-size: 14px; padding-left: 10px;} .new_2025 .dot_li li:before {top: 7px;} .new_2025 .warning_box {margin-top: 20px;} .new_2025 .tt_gray_box .tit {font-size: 17px; gap: 6px; margin-bottom: 8px;} .new_2025 .warning_box .tit span {font-size: 13px; width: 19px; height: 19px; margin-top: -2px;} } /* ----------------------------------------------------------------- 버튼 ----------------------------------------------------------------- */ .new_2025 .btn_wrap {margin-top: 30px; display: flex; align-items: center; justify-content: center; gap: 6px;} .new_2025 .btn_wrap * {font-size: 16px; min-width: 160px; background: #fff; color: #222; border: 1px solid #222; font-weight: 600; height: 55px; padding: 0 30px; display: flex; align-items: center; justify-content: center; border-radius: 5px; transition: all .2s;} .new_2025 .btn_wrap .gray {background: #666; border: 1px solid #666; color: #fff;} .new_2025 .btn_wrap .red {border: 1px solid var(--red); color: #fff; background: var(--red);} .new_2025 .btn_wrap .red_line {border: 1px solid var(--red); color: var(--red); background: #fff;} .new_2025 .btn_wrap *:hover {background: #222; border: 1px solid #222; color: #fff;} /* Tablet */ @media only screen and (max-width: 1024px) { .new_2025 .btn_wrap * {padding: 0 20px;} } /* Mobile */ @media only screen and (max-width: 720px) { .new_2025 .btn_wrap * {font-size: 15px; min-width: auto; width: 100%; max-width: 100%; height: 50px; padding: 0 15px;} } /* ----------------------------------------------------------------- 테이블 ----------------------------------------------------------------- */ .new_table table {width: 100%; border-top: 2px solid #222;} .new_table table tr {border-bottom: 1px solid #ddd;} .new_table table th {font-size: 16px; height: 55px; color: #222; font-weight: 500; padding: 10px 15px; background: #f8f8f8; /* border-right: 1px solid #ddd; */ vertical-align: middle;} .new_table table th:last-child {border-right: 0;} .new_table table td {font-size: 16px; height: 55px; color: #666; font-weight: 500; padding: 10px; /* border-right: 1px solid #ddd; */ vertical-align: middle;} .new_table table td:last-child {border-right: 0;} .new_table table td label {font-size: 16px; color: #666;} .new_table table p {font-size: 16px; color: #666; font-weight: 500;} .new_table table .gray {color: #aaa;} .new_table table .red {color: var(--red);} .new_table table .nodata {color: #777; font-size: 16px; /* width: 100%; */ padding: 80px 20px; border-bottom: 1px solid #ddd; text-align: center;} .new_table table .tit, .new_table table .tit a {font-size: 16px; color: #222; font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; word-break: break-all;} .new_table table .tit a:hover {text-decoration: underline;} .new_table table .edu_date {font-size: 14px; color: #888; margin-top: 4px; padding-left: 18px; display: block; background: url('/img/new25/edu_date_icon.svg') no-repeat 0 30% / 12px;} .new_table table .pay_box p {font-size: 14px; color: #222;} .new_table table .pay_box .money {font-size: 13px;} .new_table table .pay_box .money b {font-size: 18px; font-weight: 600; margin-right: 4px;} .new_table table .pay_box .gray_stt {font-size: 13px; font-weight: 500; color: #aaa;} .new_table table .pay_box .tag_box {margin-top: 6px; justify-content: center;} .new_table table .check label {padding-left: 0; height: 0;} .new_2025 input[type="text"], .new_2025 input[type="password"], .new_2025 input[type="date"], .new_2025 select {height: 50px; font-size: 16px; border-radius: 5px; border: 1px solid #ddd; padding: 8px 15px; color: #222;} .new_2025 textarea {height: 150px; width: 100%; font-size: 16px; padding: 10px 15px; display: block; border-radius: 5px; border: 1px solid #ddd; color: #222; resize: none;} .new_table table p + .min-btn-wrap {margin-top: 4px;} .new_table table .min-btn-wrap {display: flex; gap: 4px; flex-wrap: wrap; align-items: center; justify-content: center;} .new_table table .min-btn-wrap a {font-size: 14px; height: 27px; padding: 1px 10px 0; border-radius: 5px; color: #666; font-weight: 500; border: 1px solid #ddd; display: flex; align-items: center; justify-content: center; transition: all .2s;} .new_table table .min-btn-wrap a:hover {border: 1px solid #666;} .new_table table .min-btn-wrap a.down {padding-right: 25px; background: url('/img/new25/new_down.svg') no-repeat right 10px top 50% / 11px;} .new_table table .min-btn-wrap a.red_line {color: var(--red); border: 1px solid var(--red);} .new_table table .min-btn-wrap a.red_line:hover {background: var(--red); color: #fff;} .new_table table .edu_btn_flex {display: flex; align-items: center; gap: 10px; margin-top: 4px;} .new_table + .t_gray {margin-top: 10px;} /* Mobile */ @media only screen and (max-width: 720px) { .new_table[data-board-type="table"] table colgroup {display: none;} .new_table[data-board-type="table"] tr td:before {font-size: 14px; color: #222; margin-bottom: 5px; font-weight: 500; content: attr(data-column); display: flex; flex-direction: column;} .new_table table thead, .new_table table th {display: none;} .new_table table tr {display: flex; flex-direction: column; text-align: left; padding: 10px 0;} .edu_table table tr {/* padding: 20px 0; */} .new_table table td {font-size: 14px; padding: 5px 0; height: auto; border-right: none;} .new_table table td label {font-size: 14px;} .new_table table p {font-size: 14px;} .new_table table .nodata {font-size: 14px; padding: 50px 10px; border-bottom: none;} .new_table table td.mo_no {display: none;} .new_table table .tit, .new_table table .tit a {font-weight: 600;} .new_table table .edu_date {margin-top: 2px; background: url('/img/new25/edu_date_icon.svg') no-repeat 0 30% / 12px;} .new_table table .pay_box .tag_box {justify-content: flex-start;} .new_table table .check {padding-top: 0;} .new_table[data-board-type="table"] tr td.tit_box {padding: 0 0 8px;} .new_table[data-board-type="table"] tr td.tit_box:before {display: none;} .new_table[data-board-type="table"] tr td.dot_tit {display: flex; align-items: flex-start; padding: 0 0 8px;} .new_table[data-board-type="table"] tr td.dot_tit:nth-of-type(1) {margin-top: 10px;} .new_table[data-board-type="table"] tr td.dot_tit:last-of-type {padding-bottom: 0;} .new_table[data-board-type="table"] tr td.dot_tit:before {width: 80px; min-width: 80px; margin-bottom: 0;} .new_table[data-board-type="table"] tr td > div {width: 100%;} .new_2025 input[type="text"], .new_2025 input[type="password"], .new_2025 input[type="date"], .new_2025 select, .new_2025 textarea {font-size: 14px; padding: 10px;} .new_table table p + .min-btn-wrap {margin-top: 6px;} .new_table table .min-btn-wrap {width: 100%;} .new_table table .min-btn-wrap a {width: 100%; height: 36px;} .new_table table .edu_btn_flex {flex-wrap: wrap; gap: 6px;} } /* ----------------------------------------------------------------- 마이페이지 - 신청관리/결제/취소/증명서 출력 ----------------------------------------------------------------- */ .new_2025 .pink_line_box {font-size: 18px; color: #444; font-weight: 500; text-align: center; padding: 20px 30px; width: 100%; background: #fff8f9; border: 1px solid #f4d7db; border-radius: 10px; margin-bottom: 20px;} .new_2025 .pink_line_box .red {font-size: 18px; font-weight: 500; color: var(--red);} .new_2025 select {width: 200px; height: 42px; background-size: 22px !important; padding: 6px 35px 6px 15px; background: #fff url('/kpc/_img/comn/sel_arrow.svg')no-repeat right 7px top 50% !important;} .new_2025 .input_flex {display: flex; gap: 6px;} .new_2025 .pt_com_tabbox .search_box {margin-top: 40px;} .new_2025 .search_box {gap: 15px; padding: 30px 60px; background: #fff; width: 100%; margin-bottom: 60px; border-radius: 10px; display: flex; align-items: center; justify-content: center; box-shadow: 0 0px 12px rgba(0, 0, 0, .1);} .new_2025 .search_box > div {width: 100%; max-width: 460px; position: relative;} .new_2025 .search_box input {width: 100%; height: 42px;} .new_2025 .search_box button {width: 18px; height: 18px; position: absolute; right: 15px; top: calc(50% - 10px); background: url('/img/new25/search_icon.svg') no-repeat 50% 50% / 18px; font-size: 0;} .new_2025 .edu_myPay .table_top_btn {justify-content: flex-end; margin-bottom: 20px; flex-wrap: wrap;} .new_2025 .edu_myPay .table_top_btn input {font-size: 15px; font-weight: 500; padding: 0 15px; height: 42px; border: 1px solid #ddd; border-radius: 5px; color: #222; transition: all .2s; box-sizing: border-box; cursor: pointer;} .new_2025 .edu_myPay .table_top_btn .red_line {border: 1px solid var(--red); color: var(--red);} .new_2025 .edu_myPay .table_top_btn :hover {background: #222; color: #fff; border: 1px solid #222;} .new_2025 .search_box .search_tab_box {display: flex; gap: 6px; width: auto;} .new_2025 .search_box .search_tab_box label {display: flex; flex-direction: row;} .new_2025 .search_box .search_tab_box label [type="radio"] {display: none;} .new_2025 .search_box .search_tab_box label span {padding: 0 20px; font-size: 15px; border-radius: 5px; text-align: center; height:42px; color: #888; font-weight: 500; display: flex; align-items: center; justify-content: center; border:1px solid #ddd; box-sizing: border-box; cursor: pointer;} .new_2025 .search_box .search_tab_box label [type="radio"]:disabled + span {background-color: #f8f8f8;} .new_2025 .search_box .search_tab_box label [type="radio"]:checked + span {border:1px solid #FFEFF2; background: #FFEFF2; color:#EE2C49;} /* Tablet */ @media only screen and (max-width: 1024px) { .new_2025 .search_box {padding: 20px; gap: 10px} .new_2025 .search_box > div {max-width: 100%;} .new_2025 .search_box input {height: 40px;} .new_2025 select {width: 20%;} .new_2025 .search_box .search_tab_box label span{padding: 0 10px;} .new_2025 .edu_myPay .table_top_btn input {padding: 0 10px; height: 40px;} } /* Mobile */ @media only screen and (max-width: 720px) { .new_2025 .pink_line_box {font-size: 15px; padding: 20px 10px;} .new_2025 .pink_line_box .red {font-size: 16px;} .new_2025 select {min-width: 100%;} .new_2025 .input_flex {flex-wrap: wrap;} .new_2025 .pt_com_tabbox .search_box {margin-top: 20px;} .new_2025 .search_box {padding: 20px 15px; margin-bottom: 40px; flex-wrap: wrap; gap: 6px} .new_2025 .search_box .search_tab_box {width: 100%;} .new_2025 .search_box .search_tab_box label {width: 100%;} .new_2025 .search_box .search_tab_box label span {width: 100%; font-size: 14px;} .new_2025 .edu_myPay .table_top_btn {margin-bottom: 15px; justify-content: flex-start;} .new_2025 .edu_myPay .table_top_btn input {font-size: 14px; height: 36px; width: auto;} } /* ----------------------------------------------------------------- 교육 탭 ----------------------------------------------------------------- */ .new_2025 .pt_com_tab li a {display: flex; align-items: center; justify-content: center;} .new_2025 .pt_com_tab li a span {display: inline-block; width: 30px; height: 25px; background: #ddd;} .new_2025 .pt_com_tab li.year span {background: url('/img/new25/new2025_year.svg') no-repeat 50% 45% / 30px;} .new_2025 .pt_com_tab li.thum span {background: url('/img/new25/new2025_thum.svg') no-repeat 50% 45% / 30px;} .new_2025 .pt_com_tab li.month span {background: url('/img/new25/new2025_month.svg') no-repeat 50% 45% / 30px;} .new_2025 .pt_com_tab li.year.on span {background: url('/img/new25/new2025_yearOn.svg') no-repeat 50% 45% / 30px;} .new_2025 .pt_com_tab li.thum.on span {background: url('/img/new25/new2025_thumOn.svg') no-repeat 50% 45% / 30px;} .new_2025 .pt_com_tab li.month.on span {background: url('/img/new25/new2025_monthOn.svg') no-repeat 50% 45% / 30px;} .new_2025 .pt_com_tab + .top_Cate {margin-top: 40px;} .new_2025 .tab_flex {display: flex; align-items: flex-end; justify-content: space-between;} .new_2025 .mini_tab {width: auto; display: flex; margin: 0;} .new_2025 .mini_tab li {border: 2px solid #ddd; position: relative; width: 200px;} .new_2025 .mini_tab li.on {border-bottom: 2px solid #3a3a3a !important;} .new_2025 .mini_tab li + li {border-left: none !important;} .new_2025 .mini_tab li + li.on:before {content: ''; width: 2px; height: calc(100% + 4px); background: #3a3a3a; display: block; position: absolute; left: -2px; top: -2px;} .new_2025 .mini_tab li a {padding: 14px 15px 14px 10px; white-space: nowrap;} .new_2025 .roadmap_btn a {height: 42px; width: 100px; font-size: 15px; font-weight: 500; color: #999; border: 2px solid #ddd; background: #fff; display: flex; align-items: center; justify-content: center; border-radius: 5px; transition: all .2s;} .new_2025 .roadmap_btn a.on {background: #fff; color: #222; border: 2px solid #222;} /* Tablet */ @media only screen and (max-width: 1024px) { .new_2025 .mini_tab li {min-height: auto; width: 200px;} .new_2025 .pt_com_tab li {min-height: auto !important;} .new_2025 .pt_com_tab li a {font-size: 16px !important;} .new_2025 .pt_com_tab li a span {margin-top: -2px;} .new_2025 .pt_com_tab.tab_w100 {flex-wrap: nowrap;} .new_2025 .pt_com_tab.tab_w100 li {width: 100%;} .new_2025 .pt_com_tab + .top_Cate {margin-top: 30px;} } /* Mobile */ @media only screen and (max-width: 720px) { .new_2025 .tab_flex {flex-wrap: wrap;} .new_2025 .mini_tab {flex-wrap: nowrap; width: 100%;} .new_2025 .mini_tab li {width: 100%;} .new_2025 .pt_com_tab li a {font-size: 15px !important; padding: 10px 5px;} .new_2025 .pt_com_tab li a span {width: 26px; height: 26px; display: none;} .new_2025 .pt_com_tab li.year span {background: url('/img/new25/new2025_year.svg') no-repeat 50% 45% / 26px;} .new_2025 .pt_com_tab li.thum span {background: url('/img/new25/new2025_thum.svg') no-repeat 50% 45% / 26px;} .new_2025 .pt_com_tab li.month span {background: url('/img/new25/new2025_month.svg') no-repeat 50% 45% / 26px;} .new_2025 .pt_com_tab li.year.on span {background: url('/img/new25/new2025_yearOn.svg') no-repeat 50% 45% / 26px;} .new_2025 .pt_com_tab li.thum.on span {background: url('/img/new25/new2025_thumOn.svg') no-repeat 50% 45% / 26px;} .new_2025 .pt_com_tab li.month.on span {background: url('/img/new25/new2025_monthOn.svg') no-repeat 50% 45% / 26px;} .new_2025 .roadmap_btn {margin-top: 10px; margin-left: auto; width: 100%;} .new_2025 .roadmap_btn a {font-size: 14px; width: 100%;} } /* ----------------------------------------------------------------- 교육 연간 ----------------------------------------------------------------- */ .new_2025 .text_seoul {font-size: 15px;} .new_2025 .sp_table_area .sp_table tr th {font-size: 15px;} .new_2025 .sp_table_area .sp_table thead th {border-bottom: 1px solid #ddd;} /* Tablet */ @media only screen and (max-width: 1024px) { .new_2025 .text_seoul {font-size: 15px;} .new_2025 .sp_table_area .sp_table tr th {font-size: 15px !important;} .new_2025 .sp_table_area .sp_table tr td {font-size: 14px !important;} } @media screen and (max-width: 767px) { .new_2025 .sp_scr {padding-top: 0;} .new_2025 .sp_scr:before{display: none;} } /* Mobile */ @media only screen and (max-width: 720px) { .new_2025 .text_seoul {font-size: 14px;} .new_2025 .sp_table_area .sp_table tr th {font-size: 14px !important;} } /* ----------------------------------------------------------------- 게시글 - 상세 ----------------------------------------------------------------- */ .new_2025 .board_view .view_top {padding: 30px 15px; border-top: 2px solid #222; border-bottom: 1px solid #ddd;} .new_2025 .board_view .view_top .tit {font-size: 22px; font-weight: 600; color: #222;} .new_2025 .board_view .view_top .gray_tt {margin-top: 8px; display: flex; gap: 10px;} .new_2025 .board_view .view_top .gray_tt span {font-size: 15px; color: #666;} .new_2025 .board_view .view_top .gray_tt span:after {content: ''; width: 1px; height: 12px; background: #ddd; display: inline-block; margin-left: 10px;} .new_2025 .board_view .view_top .gray_tt span:last-child:after {display: none;} .new_2025 .board_view .view_body {padding: 40px 15px; font-size: 16px;} .new_2025 .board_view .view_body p {font-size: 16px;} .new_2025 .board_view .filewrap {background: #f8f8f8; padding: 20px 15px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; display: flex; flex-wrap: wrap; gap: 12px; margin-top: -1px;} .new_2025 .board_view .filewrap p {display: flex; gap: 20px; width: 100%;} .new_2025 .board_view .filewrap span {color: #222; font-weight: 500; font-size: 16px; display: block;} .new_2025 .board_view .filewrap span:after {content: ''; width: 1px; height: 12px; background: #ddd; display: inline-block; margin-left: 20px; vertical-align: -1px;} .new_2025 .board_view .filewrap a {color: #222; font-weight: 300; font-size: 16px; color: #222;} .new_2025 .board_view .filewrap a:hover {text-decoration: underline;} .new_2025 .controls {border-top: 1px solid #ddd; margin-top: 40px;} .new_2025 .controls > div {padding: 20px 15px; display: flex; align-items: center; gap: 30px; border-bottom: 1px solid #ddd; color: #222; position: relative;} .new_2025 .controls .sub {font-size: 16px; font-weight: 500; color: #999; min-width: 100px; display: flex; align-items: center; justify-content: space-between;} .new_2025 .controls .sub:after {content: ''; width: 6px; height: 6px; display: inline-block; border-top: 3px solid #ccc; border-left: 3px solid #ccc; transform: rotate(45deg); border-radius: 2px;} .new_2025 .controls .ctrol_prev .sub:after {transform: rotate(225deg);} .new_2025 .controls .tit {color: #999; font-size: 16px; font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; text-overflow: ellipsis; word-break: break-all;} .new_2025 .controls a .tit {color: #222; font-size: 16px;} .new_2025 .controls a:hover .tit{text-decoration: underline;} /* Tablet */ @media only screen and (max-width: 1024px) { } /* Mobile */ @media only screen and (max-width: 720px) { .new_2025 .board_view .view_top {padding: 15px 10px;} .new_2025 .board_view .view_top .tit {font-size: 17px;} .new_2025 .board_view .view_top .gray_tt {margin-top: 6px;} .new_2025 .board_view .view_top .gray_tt span {font-size: 14px;} .new_2025 .board_view .view_top .gray_tt span:after {height: 10px; vertical-align: 0px;} .new_2025 .board_view .view_body {padding: 30px 10px; font-size: 15px;} .new_2025 .board_view .view_body p {font-size: 15px;} .new_2025 .board_view .filewrap {padding: 15px 10px; gap: 12px;} .new_2025 .board_view .filewrap p {gap: 5px; flex-wrap: wrap;} .new_2025 .board_view .filewrap span {font-size: 14px;} .new_2025 .board_view .filewrap span:after {display: none;} .new_2025 .board_view .filewrap a {font-size: 14px;} .new_2025 .controls {margin-top: 30px;} .new_2025 .controls > div {padding: 15px 10px; gap: 15px;} .new_2025 .controls .sub {font-size: 14px; min-width: 55px;} .new_2025 .controls .sub:after {width: 6px; height: 6px; border-top: 2px solid #ccc; border-left: 2px solid #ccc;} .new_2025 .controls .tit {font-size: 14px;} .new_2025 .controls a .tit {font-size: 14px;} } /* ----------------------------------------------------------------- 교육신청안내 ----------------------------------------------------------------- */ .new_2025 .edu-method-head {color: #666;} .new_2025 .step_box {margin-top: 30px;} .new_2025 .step_box ul {display: flex; flex-wrap: wrap; gap: 30px 8%; justify-content: center;} .new_2025 .step_box ul li {max-width: 170px; width: 19%; text-align: center;} .new_2025 .step_box ul li > div {background: #fff; border-radius: 100%; aspect-ratio: 1 / 1; box-shadow: 0 4px 12px rgba(0, 0, 0, .1); position: relative; display: flex; align-items: center; flex-direction: column; justify-content: center; gap: 10px;} .new_2025 .step_box ul li > div:before {content: ''; width: calc(100% + 20px); height: calc(100% + 20px); background: #f8f8f8; display: block; border-radius: 100%; position: absolute; left: -10px; top: -10px; z-index: -1;} .new_2025 .step_box ul li > div:after {content: ''; width: 10px; height: 12px; displya: block; background: url("../img/new25/edu_step_next.svg") no-repeat 50% 50% / 10px; position: absolute; right: -27%;} .new_2025 .step_box ul li:nth-child(4) > div:after, .new_2025 .step_box ul li:last-child > div:after {display: none;} .new_2025 .step_box ul li .num {font-size: 14px; color: #999; font-weight: 600;} .new_2025 .step_box ul li .icon img {display: block; width: auto;} .new_2025 .step_box ul li .tit {margin-top: 20px; font-size: 16px; color: #222; font-weight: 500;} .new_2025 .sp_img {width: 100%; margin-top: 20px; position: relative;} .new_2025 .sp_img:before{content: ''; width: calc(100% - 2px); height: calc(100% - 2px); border: 1px solid #ddd; border-radius: 10px; position: absolute; left: 0; top: 0;} .new_2025 .sp_img img {display: block; width: 100%; border-radius: 10px; overflow: hidden; max-width: 1034px;} .new_2025 h4.h4_tit {font-size: 19px; font-weight: 500; color: #222; margin: 30px 0 10px;} .new_2025 .process-container {margin-top: 40px;} .new_2025 .process-container ul li {font-size: 16px; color: #666; font-weight: 500;} /* Tablet */ @media only screen and (max-width: 1024px) { } /* Mobile */ @media only screen and (max-width: 720px) { .new_2025 .edu-method-head {font-size: 14px;} .new_2025 .step_box {margin-top: 20px;} .new_2025 .step_box ul {gap: 40px 15%;} .new_2025 .step_box ul li {width: 40%;} .new_2025 .step_box ul li:nth-child(1) {order: 0;} .new_2025 .step_box ul li:nth-child(2) {order: 1;} .new_2025 .step_box ul li:nth-child(3) {order: 3;} .new_2025 .step_box ul li:nth-child(4) {order: 2;} .new_2025 .step_box ul li:nth-child(5) {order: 4;} .new_2025 .step_box ul li:nth-child(6) {order: 5;} .new_2025 .step_box ul li:nth-child(7) {order: 6;} .new_2025 .step_box ul li > div {gap: 8px;} .new_2025 .step_box ul li > div:after {width: 8px; right: -22%; background: url("../img/new25/edu_step_next.svg") no-repeat 50% 50% / 8px;} .new_2025 .step_box ul li:nth-child(2) > div:after {transform: rotate(90deg); right: calc(50% - 4px); top: calc(100% + 66px);} .new_2025 .step_box ul li:nth-child(3) > div:after {display: none;} .new_2025 .step_box ul li:nth-child(4) > div:after {display: block; transform: rotate(-180deg);} .new_2025 .step_box ul li:nth-child(5) > div:after {transform: rotate(90deg); right: calc(50% - 4px); top: -30px;} .new_2025 .step_box ul li:nth-child(6) > div:after {left: -22%;} .new_2025 .step_box ul li:nth-child(7) > div:after {display: block; transform: rotate(135deg); top: -25px; right: 5px;} .new_2025 .step_box ul li .num {font-size: 13px;} .new_2025 .step_box ul li .tit {margin-top: 20px; font-size: 14px;} .new_2025 h4.h4_tit {font-size: 16px; margin: 20px 0 10px;} .new_2025 .process-container {margin-top: 20px;} .new_2025 .process-container ul li {font-size: 14px;} } /* ----------------------------------------------------------------- 교육상세 탭 ----------------------------------------------------------------- */ .edu_detail_tab {/* background: #f9f9f9; */ width: 100%; margin-top: 85px;} .edu_detail_tab .pt_com_tab {width: 100%; max-width: 1360px; padding: 0 30px; flex-wrap: nowrap;} .edu_detail_tab .pt_com_tab li {border: none; background: #f6f6f6; transition: all .2s;} .edu_detail_tab .pt_com_tab li:hover {background: #eee;} .edu_detail_tab .pt_com_tab li.on {border: none !important; background: #222;} .edu_detail_tab .pt_com_tab li a {background: none; padding: 14px 5px; font-size: 18px;} .edu_detail_tab .pt_com_tab li.on a {color: #fff;} /* Tablet */ @media only screen and (max-width: 1024px) { .edu_detail_tab {margin-top: 20px;} .edu_detail_tab .pt_com_tab {padding: 0 20px;} .edu_detail_tab .pt_com_tab li {width: 100%; height: 55px !important; min-height: auto !important;} .edu_detail_tab .pt_com_tab li a{padding: 0 5px; font-size: 17px;} } /* Mobile */ @media only screen and (max-width: 720px) { .edu_detail_tab .pt_com_tab {padding: 0 15px;} .edu_detail_tab .pt_com_tab li {height: 50px !important;} .edu_detail_tab .pt_com_tab li a{font-size: 15px !important;} } /* ----------------------------------------------------------------- 연간일정 월별 탭 ----------------------------------------------------------------- */ #monthArea {display: flex; gap: 6px 1%; background: #f6f6f6; border-radius: 5px; padding: 8px;} #monthArea li {width: 100%;} #monthArea li a {font-size: 18px; color: #888; height: 55px; background: #f6f6f6; border-radius: 5px; display: flex; justify-content: center; align-items: center; transition: all .2s; position: relative;} #monthArea li a:hover {color: #222; font-weight: 500;} #monthArea li a.lecture {/* background: #fff; */ color: #222; font-weight: 500;} #monthArea li a.lecture:before {content: ''; width: 6px; height: 6px; position: absolute; left: calc(50% - 3px); top: 6px; display: block; background: #222; border-radius: 10px;} #monthArea li a.on {color: #fff; background: #222; font-weight: 500;} /* #monthArea li a.on:before {content: ''; width: 26px; height: 3px; position: absolute; left: calc(50% - 13px); bottom: 0; display: block; background: #fff; border-radius: 2px 2px 0 0;} */ /* Tablet */ @media only screen and (max-width: 1024px) { #monthArea {flex-wrap: wrap;} #monthArea li {width: 15.833%} #monthArea li a {font-size: 17px;} } /* Mobile */ @media only screen and (max-width: 720px) { #monthArea li a {font-size: 15px; height: 50px;} #monthArea li a.lecture:before {width: 4px; height: 4px; left: calc(50% - 2px);} } /* ----------------------------------------------------------------- 유료법인회원제도 안내 ----------------------------------------------------------------- */ .bank_logo {width: 30px; height:30px; font-size: 0 !important; display: inline-block; vertical-align:middle; margin-right: 5px;} .bank_logo.kb {background: url('/kpc/_img/cont/kb_ico.svg')no-repeat 50% 50% / contain;} .bank_logo.ibk {background: url('/kpc/_img/cont/ibk_ico.svg')no-repeat 50% 50% / contain;} .bank_logo.woori {background: url('/kpc/_img/cont/woori_ico.svg')no-repeat 50% 50% / contain;} .bank_logo.keb {background: url('/kpc/_img/cont/keb_ico.svg')no-repeat 50% 50% / contain;} .bank_logo.shinh {background: url('/kpc/_img/cont/shinh_ico.svg')no-repeat 50% 50% / contain;} .bank_logo.post {background: url('/kpc/_img/cont/post_ico.svg')no-repeat 50% 50% / contain;} .bank_logo.hana {background: url('/kpc/_img/cont/hana_ico.svg')no-repeat 50% 50% / contain;} .bank_logo.nh {background: url('/kpc/_img/cont/nh_ico.svg')no-repeat 50% 50% / contain;} .membership .cont_info {margin-top: 30px;} .membership .cont_info span {font-size: 16px; font-weight: 600; color:#fff; padding: 5px 15px; background: #222; border-radius: 50px; margin-right: 20px;} .membership .cont_info p {display: inline-block; font-size: 16px; color:#444; position: relative; padding-left: 10px;} .membership .cont_info p > strong {color: #222; padding-right: 8px;} .membership .cont_info p:before {position: absolute; content:''; width: 4px; height: 4px; background: var(--red); border-radius:50%; top: 9px; left: 0; } .membership .cont_info p:not(:last-child) {margin-right: 20px;} .membership .tab_box {margin: 0 auto; padding: 0; max-width:1020px; display: flex; flex-wrap:wrap; gap: 20px; justify-content: center; background: none; border: none;} .membership .tab_box li {width: calc((100% - 60px) / 3); border-radius: 20px;} .membership .tab_box li a {display: block; padding: 30px 15px; height: auto; border: 1px solid #eee; font-weight: 600; font-size: 16px; border-radius: 20px; transition: all .2s; text-align:center;} .membership .tab_box li a > span {color: #999; font-weight: 600;} .membership .tab_box li a > p {font-weight: 600; font-size: 24px; color:#222; margin-top: 5px;} .membership .tab_box li a:hover {border: 1px solid var(--red); box-shadow: none; /* box-shadow: 6px 8px 16px rgba(0,0,0,.1); */} .membership .tab_box li a:hover span {color: var(--red);} .membership .tab_box li a:hover > em {text-decoration:underline;} .membership .tab_box li.on a {background: none; border: 1px solid var(--red); box-shadow: none; /* box-shadow: 6px 8px 16px rgba(0,0,0,.1); */} .membership .tab_box li.on a > span {color: var(--red);} .process_li {max-width: 1350px; width: 100%; display: flex; justify-content: center; gap: 20px; margin: 40px auto 0;} .process_li li {width: 100%; text-align: center; display: flex; align-items: center; flex-wrap: wrap; justify-content: center; align-content: flex-start; position: relative;} .process_li li:after {content: ''; width: 30px; height: 12px; display: block; position: absolute; top: 70px; left: -25px; background-image: url('/kpc/_img/cont/process_next.svg'); background-repeat: no-repeat; background-position: 50% 50%; background-size: 28px; opacity: 1; transition: opacity .5s ease, background .5s ease;} .process_li li:nth-child(1):after {display: none;} .process_li li:before {content: ''; width: 100%; height: 50px; margin-bottom: 10px; display: block; background-repeat: no-repeat; background-position-x: 50%; background-size: 50px;} .process_li li:nth-child(1):before {background-image: url('/kpc/_img/cont/process_01.svg');} .process_li li:nth-child(2):before {background-image: url('/kpc/_img/cont/process_02.svg');} .process_li li:nth-child(3):before {background-image: url('/kpc/_img/cont/process_03.svg');} .process_li li:nth-child(4):before {background-image: url('/kpc/_img/cont/process_04.svg');} .process_li li:nth-child(5):before {background-image: url('/kpc/_img/cont/process_05.svg');} .process_li li:nth-child(6):before {background-image: url('/kpc/_img/cont/process_06.svg');} .process_li li:nth-child(7):before {background-image: url('/kpc/_img/cont/process_07.svg');} .process_li li .step_p {width: 94px; height: 32px; font-size: 16px; font-weight: 100; background: #555; color: #fff; border-radius: 50px; display: flex; align-items: center; justify-content: center; transition: background-color .5s ease;} .process_li li .step_p span {font-weight: 600; margin-left: 4px;} .process_li li .tit {margin-top: 12px; width: 100%; color: #222; font-size: 18px; font-weight: 600;} .process_li li .tit span {font-size: 16px; color: #999; font-weight: 400; line-height: 22px; display: block;} .process_li li.on:after {background-image: url('/kpc/_img/cont/process_next_on.svg'); opacity: 1;} .process_li li.on .step_p {background: var(--red); color: #fff;} .membership .process_li li:nth-child(1):before {background-image: url('/kpc/_img/cont/st01_ico.svg');} .membership .process_li li:nth-child(2):before {background-image: url('/kpc/_img/cont/st02_ico.svg');} .membership .process_li li:nth-child(3):before {background-image: url('/kpc/_img/cont/st03_ico.svg'); background-size: contain;} .membership .process_li li:nth-child(4):before {background-image: url('/kpc/_img/cont/st04_ico.svg');} .membership .down_list {display: flex; gap: 20px; margin-top:40px;} .membership .down_list li {width: 100%;} .membership .down_list li .down_o_btn a:before {right: 20px; left: auto;} .membership .down_list li a {display: block; width:100%; padding: 30px; border-radius: 5px; border: 1px solid #ddd; font-size: 18px; color:#222; font-weight: 500; transition: .5s;} .membership .down_list li a:hover {border: 1px solid #222; color:#222; text-decoration: underline;} .down_o_btn {display:flex; align-items: center; gap:20px;} .down_o_btn.c {justify-content: center;} .down_o_btn.w a {color:#fff} .down_o_btn a {display:inline-block; font-size:18px; color:#333; padding-left:50px; position:relative; transition:0.2s;} .down_o_btn a:before{position:absolute; content:''; left:0; top:50%; margin-top:-20px; width:40px; height:40px; border-radius:50%; background:#222 url('/kpc/_img/cont/download_w.svg') no-repeat 50% 50%; transition:0.2s;} .down_o_btn a.g:before{background:#f6f6f6 url('/kpc/_img/cont/download.svg') no-repeat 50% 50%;} .down_o_btn a:not(:last-child) {margin-right:30px;} .down_o_btn a:not(:last-child):after {position:absolute; content:''; width:1px; height:15px; background:#DDDDDD; right:-30px; top:50%; margin-top:-7px;} .down_o_btn.w a:not(:last-child):after {background:rgba(255,255,255,0.2)} .down_o_btn:not(.w) a:hover {color:var(--red)} .down_o_btn a:hover:before {background:var(--red) url('/kpc/_img/cont/download_w.svg') no-repeat 50% 50%} .membership .basic_li {border-top: 2px solid #222; margin-top: 60px;} .membership .basic_li li {border-bottom: 1px solid #ddd; padding: 8px 10px; display: flex; flex-wrap:wrap; text-align:center;} .membership .basic_li li span {font-size:15px; color:#888;} .membership .basic_li li:nth-child(1) .bas_tit {width: 33.33333%;} .membership .basic_li li:nth-child(1) .bas_tit p {font-size: 17px; color:#222; font-weight: 600;} .membership .basic_li li:nth-child(2) {padding: 8px 10px;} .membership .basic_li li:nth-child(2) .bas_sub {width: 33.33333%;} .membership .basic_li li:nth-child(2) .bas_sub strong {font-size: 30px; color: var(--red); font-weight: 700;} .membership .mobile {display:none} /* Tablet */ @media only screen and (max-width: 1024px) { .membership_text_p {font-size: 15px !important;} .bank_logo {width: 24px; height:24px; font-size: 0 !important; display: inline-block; vertical-align:middle; margin-right: 3px;} .membership .tab_box {} .membership .tab_box {margin: 40px auto 0; max-width:100%; gap: 15px;} .membership .tab_box li {width: calc((100% - 30px) / 3); border-radius: 10px;} .membership .tab_box li a {display: block; padding: 20px 10px; font-size: 14px; border-radius: 20px;} .membership .tab_box li a > p {font-weight: 700; font-size: 20px; color:#222; margin-top: 3px;} .process_li {flex-wrap: wrap; gap: 20px 10px; margin: 40px auto 0;} .process_li li {width: 22%;} .process_li li:after {top: 80px; left: -20px;} .process_li li:before {height: 50px; background-size: 50px;} .process_li li .step_p {font-size: 15px;} .process_li li .tit span {line-height: 26px;} .membership .down_list {flex-wrap:wrap; gap: 20px;} .membership .down_list li {width: calc((100% - 20px) / 2);} .membership .down_list li .down_o_btn {margin-top:0; font-size:16px;} } /* Mobile */ @media only screen and (max-width: 720px) { .membership_text_p {font-size: 15px !important;} .bank_logo {width: 30px; height:30px; font-size: 0 !important; display: inline-block; vertical-align:middle; margin-right: 5px;} .bank_logo.kb {background: url('/kpc/_img/cont/kb_ico.svg')no-repeat 50% 50% / contain;} .bank_logo.ibk {background: url('/kpc/_img/cont/ibk_ico.svg')no-repeat 50% 50% / contain;} .bank_logo.woori {background: url('/kpc/_img/cont/woori_ico.svg')no-repeat 50% 50% / contain;} .bank_logo.keb {background: url('/kpc/_img/cont/keb_ico.svg')no-repeat 50% 50% / contain;} .bank_logo.shinh {background: url('/kpc/_img/cont/shinh_ico.svg')no-repeat 50% 50% / contain;} .bank_logo.post {background: url('/kpc/_img/cont/post_ico.svg')no-repeat 50% 50% / contain;} .bank_logo.hana {background: url('/kpc/_img/cont/hana_ico.svg')no-repeat 50% 50% / contain;} .bank_logo.nh {background: url('/kpc/_img/cont/nh_ico.svg')no-repeat 50% 50% / contain;} .membership .cont_info {margin-top: 20px;} .membership .cont_info span {font-size: 15px; padding: 5px 15px; margin-right: 0;} .membership .cont_info p {display: block; font-size: 15px; padding-left: 10px;} .membership .cont_info p:nth-child(2) {margin-top:10px;} .membership .cont_info p > strong {padding-right: 5px;} .membership .cont_info p:before {top: 9px; left: 0; } .membership .cont_info p:not(:last-child) {margin-right: 0;} .membership .tab_box {} .membership .tab_box {margin: 30px auto 0; max-width:100%; gap: 5px;} .membership .tab_box li {width: calc((100% - 10px) / 3); border-radius: 10px;} .membership .tab_box li a {display: block; padding: 20px 10px; font-size: 13px; border-radius: 20px;} .membership .tab_box li a > p {font-weight: 700; font-size: 16px; color:#222; margin-top: 3px;} .process_li {gap: 50px 10px; margin: 30px auto 0;} .process_li li {width: 48%;} .process_li li:after {top: 68px; background-size: 24px;} .process_li li:nth-child(1) {order: 0} .process_li li:nth-child(2) {order: 1} .process_li li:nth-child(3) {order: 3} .process_li li:nth-child(4) {order: 2} .process_li li:nth-child(5) {order: 4} .process_li li:nth-child(6) {order: 5} .process_li li:nth-child(7) {order: 6} .process_li li:nth-child(3):after, .process_li li:nth-child(5):after {top: -31px; left: calc(50% - 15px); transform: rotate(90deg);} .process_li li:nth-child(4):after {left: calc(100% - 20px); transform: rotate(180deg);} .process_li li:nth-child(7):after {top: -31px; left: calc(100% - 60px); transform: rotate(135deg);} .process_li li:before {height: 40px; background-size: 40px;} .process_li li .step_p {font-weight: 300; width: 80px; height: 28px; font-size: 13px;} .process_li li .tit {margin-top: 10px; font-size: 17px;} .process_li li .tit span {font-size: 15px; line-height: 22px;} .membership .down_list {display: flex; flex-wrap:wrap; gap: 10px;} .membership .down_list li {width: 100%;} .membership .down_list li a {padding: 15px; font-size: 16px;} .membership .down_list li a:before {margin-top: -15px;} .membership .down_list li .down_o_btn {margin-top:0;} .membership .down_list li .down_o_btn .down_o_btn a {font-size:15px; padding-left:40px;} .membership .down_list li .down_o_btn a:before {right: 15px; left: auto; background-size: 18px; width:34px; height:34px; background-size:18px;} .membership .down_list li .down_o_btn a:after {display:none;} .membership .basic_li {margin-top: 40px;} .membership .basic_li li {padding: 10px 5px;} .membership .basic_li li span {font-size:13px;} .membership .basic_li li:nth-child(1) .bas_tit {} .membership .basic_li li:nth-child(1) .bas_tit p {font-size: 15px;} .membership .basic_li li:nth-child(1) .bas_tit span {display: inline-block; line-height: 1.2;} .membership .basic_li li:nth-child(2) {padding: 15px 0;} .membership .basic_li li:nth-child(2) .bas_sub strong {font-size: 16px;} } /* 담당자 연락처 */ .manage .mobile {display:none} .manage .round_btn {margin-top:2px;} .manage .round_btn.l {justify-content: flex-start;} .manage .round_btn button, .manage .round_btn a {cursor:pointer; display:inline-block; border:0; position:relative; padding:5px 15px; border-radius:50px; background:#333; color:#fff; font-size:14px; font-weight:400; min-width:150px; text-align:center; transition:0.2s;} .manage .round_btn a.link {padding-right: 34px;} .manage .round_btn a.link:after {right: 10px;} .manage .cont_info {display: flex; justify-content: space-between; align-items: flex-end;} .manage .cont_info span {font-size: 15px; font-weight: 400; color:#fff; padding: 8px 15px; background: #777; border-radius: 50px; margin-bottom: 15px; height: 35px; display: inline-block;} .manage .tab_box.tab_5 {border: 1px solid #ccc; display: grid; grid-template-columns: repeat(4, 1fr);} .manage .tab_box.tab_5 li {display: flex; align-items: center; justify-content: center; line-height: 120%; border: none; border-right: 1px solid #ccc;} .manage .tab_box.tab_5 li:nth-child(4n) {border-right: none;} .manage .tab_box.tab_5 li:nth-child(n+5) {border-top: 1px solid #ccc;} /* 버튼 */ .round_btn {margin-top:60px; display:flex; flex-wrap:wrap; justify-content: center; gap:10px;} .round_btn.l {justify-content: flex-start;} .round_btn button, .round_btn a {cursor:pointer; display:inline-block; border:0; position:relative; padding:15px 30px; border-radius:50px; background:#333; color:#fff; font-size:20px; font-weight:400; min-width:240px; text-align:center; transition:0.2s;} .round_btn a.d {background:#222; color:#fff;} .round_btn a.w {background:#fff; color:#222;} .round_btn a.pink {background:var(--red); color:#fff;} .round_btn button:hover, .round_btn a:hover {background:var(--red);} .round_btn a.line {border:solid 1px #ddd; background:transparent; color:#222;} .round_btn a.down {padding-right:60px;} .round_btn a.down:after {position:absolute;display: inline-block;content:'';width:20px;height:20px;top:50%;margin-top:-12px;margin-left: 10px;background:url('/kpc/_img/cont/download.svg') no-repeat 50% 50%/100%; transition:0.2s;} .round_btn a.down:hover {background:#f5f5f5} .round_btn a.link {padding-right:60px;} .round_btn a.link:after {position:absolute; display: inline-block;content:'';width:20px; height:20px; top:50%; right: 30px; margin-top:-10px; margin-left: 10px; background:url('/kpc/_img/cont/btn_link_w.svg') no-repeat 50% 50%/100%; transition:0.2s;} .round_btn a.w.link:after{background-image:url('/kpc/_img/cont/btn_link.svg')} .round_btn a.w.link:hover:after{background-image:url('/kpc/_img/cont/btn_link_w.svg')} .round_btn a.link:hover {background:var(--red); color:#fff} /* Tablet */ @media only screen and (max-width: 1024px) { .manage .cont_info span {height: 30px; padding: 5px 15px} .manage .tab_box.tab_5 {grid-template-columns: repeat(3, 1fr);} .manage .tab_box.tab_5 li {width: 100%;} .manage .tab_box.tab_5 li:nth-child(3n) {border-right: none;} .manage .tab_box.tab_5 li:nth-child(3n+1) {border-left: 1px solid #ccc;} .manage .tab_box.tab_5 li:nth-child(4n) {border-right: 1px solid #ccc;} .manage .tab_box.tab_5 li:nth-child(n+4) {border-top: 1px solid #ccc;} .manage .tab_box.tab_5 li:nth-child(6) {border-bottom: 1px solid #ccc;} .manage .tab_box.tab_5 li.no {border: none; border-top: 1px solid #ccc;} } /* Mobile */ @media only screen and (max-width: 720px) { .manage .round_btn a.link {font-size: 14px; padding: 5px; min-width:100%; border-radius: 10px; line-height: 17px;} .manage .round_btn a.link:after {display:none;} .manage .tab_box.tab_5 {grid-template-columns: repeat(2, 1fr);} .manage .tab_box.tab_5 li:nth-child(odd) {border-right: 1px solid #ccc;} .manage .tab_box.tab_5 li:nth-child(2n) {border-right: none; border-left: none;} .manage .tab_box.tab_5 li:nth-child(2n+1) {border-left: 1px solid #ccc;} .manage .tab_box.tab_5 li:nth-child(n+3) {border-top: 1px solid #ccc;} .manage .tab_box.tab_5 li.no {border-top: 1px solid #ccc; border-left: none;} }