@charset "utf-8";
@import url('slick.css');
@import url('aos.css');
@import url('fonts.css');
html,body,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,address,big,cite,code,del,dfn,em,font,img,ins,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,ul,ol,li,dl,dt,dd,table,caption,tbody,tfoot,thead,tr,th,td,fieldset,fo7m,label,legend,input,button,textarea,select{margin:0;padding:0}
header,footer,section,article,aside,nav,hgroup,details,menu,figure,figcaption{display:block;margin:0;padding:0}
legend{display:block;overflow:hidden;position:absolute;width:1px;height:1px;font-size:1px;line-height:0;text-indent:-999em;white-space:nowrap; }
fieldset,img,table,caption,tbody,tfoot,thead,tr,th,td,button,hr{border:0 none}
img{vertical-align:sub;}
body li{*vertical-align:top}
ul li{list-style:none; padding:0; margin:0;}
table{border-collapse:collapse}
caption{visibility:hidden;overflow:hidden;width:0;height:0;font-size:0;line-height:0;}
button{overflow:visible;border:0 none;cursor:pointer}
button::-moz-focus-inner,input[type="button"]::-moz-focus-inner,input[type="submit"]::-moz-focus-inner,input[type="reset"]::-moz-focus-inner {padding: 0;border: 0 none}
a { color:inherit; text-decoration:none; }
address,
em { font-style:normal }
body,input,select,textarea,button { font-family:var(--font-text); text-decoration: none; color: #333; font-size:14px; }
h1,h2,h3,h4,h5,h6 { font-family:var(--font-text); }
a:hover,a:link, a:visited{ text-decoration: none;}
/**************************************************************************************************************
공통
**************************************************************************************************************/
.mb0 { margin-bottom:0 !important }
.mb5 { margin-bottom:5px !important }
.mb10 { margin-bottom:10px !important }
.mb15 { margin-bottom:15px !important }
.mb20 { margin-bottom:20px !important }
.mb25 { margin-bottom:25px !important }
.mb30 { margin-bottom:30px !important }
.mb35 { margin-bottom:35px !important }
.mb40 { margin-bottom:40px !important }
.mb45 { margin-bottom:45px !important }
.mb50 { margin-bottom:50px !important }
.mb55 { margin-bottom:55px !important }
.mb60 { margin-bottom:60px !important }
.mb70 { margin-bottom:70px !important }
.mb75 { margin-bottom:75px !important }
.mb80 { margin-bottom:80px !important }
.mb90 { margin-bottom:90px !important }
.mb100 { margin-bottom:100px !important }
.mb200 { margin-bottom:200px !important }
.mb300 { margin-bottom:300px !important }
.mr30 { margin-right:30px !important; }
.mr40 { margin-right:40px !important; }
.mr100 { margin-right:100px !important; }
.blue { color:#3c73ce !important; }
.blue2 { color:#3f5cff !important; }
.white { color:#fff !important; }
.green { color:#049d42 !important; }
.red { color:#ff0000 !important; }
.red2 { color:#ff4545 !important; }
.gray { color:#8b8b8b !important; }
.black { color:#444 !important; }
.yellow { color:#ffe950 !important; }
.under { text-decoration:underline !important }
.f11 { font-size:11px !important }
.f14 { font-size:14px !important }
.f15 { font-size:15px !important }
.f16 { font-size:16px !important }
.f18 { font-size:16px !important }
.f20 { font-size:20px !important }
.f21 { font-size:21px !important }
.f24 { font-size:24px !important }
.f26 { font-size:26px !important }
.clear { clear:both; }
.fl { float:left !important }
.fr { float:right !important }
.w30 { width:30% !important }
.w35 { width:35% !important }
.w40 { width:40% !important }
.w45 { width:45% !important }
.w50 { width:50% !important }
.w53 { width:53% !important }
.w55 { width:55% !important }
.w60 { width:60% !important }
.w70 { width:70% !important }
.w65 { width:65% !important }
.pdt10 { padding-top:10px !important; }
.pdt15 { padding-top:15px !important; }
.pdt20 { padding-top:20px !important; }
.pdt25 { padding-top:25px !important; }
.pdt30 { padding-top:30px !important; }
.pdt40 { padding-top:40px !important; }
.pdt50 { padding-top:50px !important; }
.pdt60 { padding-top:60px !important; }
.pdt70 { padding-top:70px !important; }
.pdb10 { padding-bottom:10px !important; }
.pdb15 { padding-bottom:15px !important; }
.pdb20 { padding-bottom:20px !important; }
.pdb25 { padding-bottom:25px !important; }
.pdb30 { padding-bottom:30px !important; }
.pdb40 { padding-bottom:40px !important; }
.pdb50 { padding-bottom:50px !important; }
.pdb60 { padding-bottom:6#0px !important; }
.pdb70 { padding-bottom:70px !important; }
.pdb0 { padding-bottom:0 !important; }
.text-center { text-align: center !important; }
.text-right { text-align: right !important; }
.text-left { text-align:left !important; }
.clear:after { display: block; content: ''; clear: both; }
.fl { float:left; }
.fr { float:right; }
form { padding:0; margin:0; }
input[type="checkbox"], input[type="radio"],select { vertical-align:middle }
img { max-width:100%;}
.hidden { position: absolute; left: -9999px; }
bold, strong { font-weight: 600; }
* { box-sizing: border-box; -webkit-overflow-scrolling: touch; }
.block { display: block; width:100%;}
.ib { display: inline-block; vertical-align: middle; }
button:focus, a:focus, select:focus, input:focus, label:focus textarea:focus {
outline:none !important; outline-width: 0 !important; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; -webkit-tap-highlight-color: transparent !important; /* for removing the highlight */ }
:root{
--color-point-lv1 : #5ebfaf;
--color-point-lv2 : #45a6b4;
--color-point-lv3 : #298bb8;
--color-point-lv4 : #0e71b9;
--color-bg-lv1 : #ecf7f5;
--color-bg-lv2 : #e8f5f7;
--color-bg-lv3 : #e3f2f9;
--color-bg-lv4 : #dceffd;
--color-dark : #1d2331;
--color-light : #e9ecf2;
--color-line : #e8ecf0;
--font-text : 'pretendard', 'Noto Sans KR', 'AppleGothic', '맑은 고딕', 'Malgun Gothic', 돋움, Dotum, sans-serif;
--font-title : 'SBAggro', 'Spoqa Han Sans Neo', 'Noto Sans KR', sans-serif;
--font-icon : 'Font Awesome 6 free', 'xeicon', 'pretendard', sans-serif;
--transition-slow : all .3s ease-in-out;
--transition-fast : all .1s ease-in-out;
}
/***********************************************************************************************
MODAL
***********************************************************************************************/
.hidden { overflow:hidden; }
.modal-backdrop {position: fixed; top:0; right:0; bottom:0; left:0; background:#000; z-index:7500; opacity:.7; filter:alpha(opacity=70);}
.modal {display:none; position:fixed; top:0; right:0; bottom:0; left:0; z-index:8000; overflow:auto; -webkit-overflow-scrolling:touch; outline:0; }
.modal-dialog {position:relative; width:auto;margin:0 auto 15px; padding:0 15px; }
.modal-content {position:relative; background-color:#fff; outline:none; overflow:hidden; border-radius:8px; box-shadow:0 0 15px 0 rgba(0, 0, 0, 0.1); }
.modal-header { position: relative; ; }
.modal-header h4 { padding:25px 0; font-size:20px; text-align: center; line-height: 1; color: #fff; background: #ff4545; font-weight: 500; margin-bottom: 0;}
.modal-body { padding:20px; }
.modal-body .modal-txt { text-align: center; font-size:1em; line-height: 1.5; padding:32px 10px; }
.modal-bottom { text-align: center; padding-bottom: 15px; }
.modal-bottom a { }
.modal-bottom a + a { margin-left: 10px;}
.modal .inp { border: 1px solid var(--color-line); background: #fafafa; padding:0 15px;}
/***********************************************************************************************
Form
***********************************************************************************************/
.inp {height:40px; border:0; border-radius:0; font-size:1em; background: none; color: #454c59; -webkit-appearance:none; box-shadow:none; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; outline:none; }
.inp:disabled { background: #efefef; }
.select {height:40px;border:0; padding: 0 20px 0 0; font-size:1em; background: #fff url(../img/common/bu_select.png) no-repeat 100% 50%; color: #454c59; -webkit-appearance:none; box-shadow:none; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; outline:none; cursor: pointer; outline:none; position: relative; top:-2px; }
.select:invalid { color: #b9bcc6 !important;}
.select [disabled] { color: #b9bcc6;}
.select option { color: #2a3c60 !important;}
.textarea { border:1px solid #cfd8e2; border-radius:0; padding:6px 12px; font-size:1em; background: #fff; color: #31333f; -webkit-appearance:none; box-shadow:none; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; outline:none; resize:none; }
/*
::selection { color:#b9bcc6; }
select::-ms-expand { display: none; }
::-webkit-input-placeholder { color: #b9bcc6;}
:-ms-input-placeholder { color: #b9bcc6; }
::-ms-input-placeholder { color: #b9bcc6; }
::-ms-clear { display: none; }
*/
.radio { position: absolute; left: -9999px; }
.radio + em { display: inline-block; vertical-align: middle; width:16px; height:16px; border-radius:100%; position: relative; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; cursor: pointer; background: #ebebeb; }
.radio + em + span { display: inline-block; vertical-align: middle; font-size:16px; color: #bebebe; margin:-2px 0 0 9px;}
.radio + em:before { content: ''; position: absolute;left: 4px; top:4px; right:4px; bottom:4px; border-radius:100%; background: var(--color-dark); transition: all 0.3s ease; -webkit-transition: all 0.3s ease; transform: scale(0.2); -webkit-transform: scale(0.2); opacity:0;}
.radio:checked + em:before { transform: scale(1); -webkit-transform: scale(1); opacity:1; }
.radio:checked + em + span { color: #454c59; }
.checkbox { position: absolute; left: -9999px; }
.checkbox + em { display: inline-block; vertical-align: middle; width:18px; height: 18px; border-radius:3px; transition: all 0.3s ease; -webkit-transition: all 0.3s ease; cursor: pointer; border: 2px solid #8f9197; background-position: 50% 50%}
.checkbox + em + span {display: inline-block; vertical-align: middle; font-size:15px; margin:-2px 10px 0 5px; cursor: pointer; }
.checkbox:checked + em { border-color:#ff4545; background:#ff4545 url(../img/common/bu_checkbox.png) no-repeat 50% 50% !important;}
.checkbox:disabled + em { background-color:#f0f0f0; }
.checkbox:checked:disabled + em { background-color:#f0f0f0; border-color:#e1e1e1; background-image:url(../img/bu_checkbox2_disabled.png)}
/* form */
.form_custom { border:1px solid var(--color-line); background:#fff; padding:0.5rem; border-radius:3px; }
.form_custom::placeholder { color:var(--color-line); }
.form_custom:required,
.form_custom:invalid { border-color: var(--color-line); }
select.form_custom { background: #fff url(../img/main/bu_select.png) no-repeat calc(100% - 0.5rem) 50%; padding-right:1.5rem; }
input[type="checkbox"].form_custom,
input[type="radio"].form_custom { display:none; }
input[type="checkbox"].form_custom + label,
input[type="radio"].form_custom + label { cursor:pointer; }
input[type="checkbox"].form_custom + label:before,
input[type="radio"].form_custom + label:before { font-family:var(--font-icon); display:inline-block; margin-right:0.5em; }
input[type="checkbox"].form_custom + label:before { content:'\f0c8'; }
input[type="radio"].form_custom + label:before { content:'\f111'; }
input[type="checkbox"].form_custom:checked + label:before,
input[type="radio"].form_custom:checked + label:before { color:var(--color-main); }
input[type="checkbox"].form_custom:checked + label:before { content:'\f14a'; }
input[type="radio"].form_custom:checked + label:before { content:'\f192'; }
/***********************************************************************************************
Button
***********************************************************************************************/
.ico-arr { display: inline-block; vertical-align: middle; background: url(../img/common/bu_btn.png) no-repeat 0 0; width:10px; height: 4px; }
.btn .ico-arr { margin:-4px 0 0 10px;}
.btn-white .ico-arr { background-image: url(../img/common/bu_btn_black.png)}
.Bbtn { display: inline-block; vertical-align: middle; height:37px; line-height: 37px; border-radius:37px; padding:0 20px; background:var(--color-dark);
font-size:1em; color: #fff; font-weight: 500; text-align: center; transition:var(--transition-fast); -webkit-transition:var(--transition-fast); }
.Bbtn:hover { background:var(--color-point-lv1); color:#fff; }
.btn-white { background: #fff; color: #333; }
.btn-gray { background: var(--color-line); color: #fff; }
.btn-link{ display: inline-block; vertical-align: middle; height: 40px; line-height: 39px; font-size:16px; color: #fff; border-radius:40px; padding:0 20px; background:#333; border: 1px solid #333; transition: all 0.3s ease; }
.btn-link:after { content: ''; display: inline-block; vertical-align: middle; background: url(../img/common/bu_btn.png) no-repeat 0 0; width:10px; height: 4px; margin:-2px 0 0 10px; }
.btn-link:hover { color: #fff; border: 1px solid var(--color-point-lv1); background:var(--color-point-lv1); }
@media all and (max-width:1200px) {
.Bbtn { height:32px; line-height: 32px; border-radius:32px; padding:0 15px; }
.btn-link { font-size:1em; }
}
/* button */
.btn-box { display:flex; gap:4px; flex-wrap:wrap; }
.btn-box.right { position:absolute; top:0; right:0; }
.btn-box.bottom { margin-top:var(--mg-sec-md); }
.btn-box.center { justify-content:center; }
.btn_rect { display:inline-block; border:1px solid #333; padding:0 1.25em; height:41px; line-height:40px; border-radius: 3px;
font-size:1.125em; text-align:center; color:#333; background:#fff;
transition: var(--transition-fast); -webkit-transition: var(--transition-fast); position:relative; }
.btn_round { display:inline-block; border:1px solid #333; padding:0 1.25em; height:41px; line-height:40px; border-radius: 40px;
font-size:1.125em; text-align:center; color:#333; background:#fff;
transition: var(--transition-fast); -webkit-transition: var(--transition-fast); position:relative; }
.btn_rect:hover, .btn_round:hover { border-color:var(--color-dark); background:var(--color-dark); color:#fff; }
.btn_rect.wh, .btn_round.wh { border-color:var(--color-line); background:transparent; color:var(--color-line); }
.btn_rect.wh:hover, .btn_round.wh:hover { border-color:#fff; color:#fff; }
.btn_rect.bk, .btn_round.bk { background:#333; border-color:#333; color:#fff; }
.btn_rect.bk:hover, .btn_round.bk:hover { background:var(--color-point-lv1); border-color:var(--color-point-lv1); color:#fff; }
.btn_rect.color, .btn_round.color { background-image: linear-gradient(to right, var(--color-point-lv1) 0%, var(--color-point-lv3) 100%); border:none; color:#fff; }
.btn_rect.sm, .btn_round.sm { padding:0 0.75em; height:31px; line-height:30px; font-size:1em; }
.btn_rect.plus, .btn_round.plus { padding-right:2.5em; }
.btn_rect.sm.plus, .btn_round.sm.plus { padding-right:1.75em; }
.btn_rect.plus:after, .btn_round.plus:after { content:'\e913'; font-family:var(--font-icon); font-size:inherit; line-height:inherit; position:absolute; top:50%; transform:translateY(-47.5%); right:1em; }
.btn_rect.sm.plus:after, .btn_round.sm.plus:after { right:0.5em; }
.btn_rect.angle, .btn_round.angle { padding-right:2.5em; }
.btn_rect.sm.angle, .btn_round.sm.angle { padding-right:1.75em; }
.btn_rect.angle:after, .btn_round.angle:after { content:'\e93e'; font-family:var(--font-icon); font-size:inherit; line-height:inherit; position:absolute; top:50%; transform:translateY(-47.5%); right:1em; }
.btn_rect.sm.angle:after, .btn_round.sm.angle:after { right:0.5em; }
.btn_rect.icon { padding:0; width:41px; }
.btn_class { height:60px; line-height:59px; padding-left:70px; min-width:360px; text-align:left; }
.btn_class.teacher { background:var(--color-dark) url(../img/icon_teacher.png) no-repeat center left / contain; border-color:var(--color-dark); color:#fff;}
.btn_class.student { background:var(--color-dark) url(../img/icon_student.png) no-repeat center left / contain; border-color:var(--color-dark); color:#fff;}
.btn_class.teacher:hover { border-color:var(--color-point-lv3); background-color:var(--color-point-lv3); color:#fff; }
.btn_class.student:hover { border-color:var(--color-point-lv1); background-color:var(--color-point-lv1); color:#fff; }
@media all and (max-width:1200px) {
.btn-box,
.btn-box.bottom { position:relative; margin-top:var(--mg-sec-mo); }
.btn_rect,
.btn_round { font-size:1em; height:37px; line-height:36px; }
.btn_rect.sm,
.btn_round.sm { font-size:1em; padding:0 0.75em; }
.btn_rect.btn_adm { width:37px; }
.btn_class { height:50px; line-height:49px; padding-left:60px; }
}
@media all and (max-width:760px) {
.btn_menu { display: inline-block; }
}
.highlight { display:inline-block; padding:0 2px; color:var(--color-dark); font-weight:400; background-image: linear-gradient(to right, var(--color-bg-lv1), var(--color-bg-lv3));
background-repeat: no-repeat; background-size: 100% 30%; background-position: 0 90%; transition: background-size 0.2s ease-in; }
.highlight:hover { background-size: 100% 100%; }
/* list */
.flex-wrap { display:flex; flex-wrap:wrap; gap:30px; width:100%; padding:0; }
.flex-wrap.col2 > .flex-box { width: calc( (100% - 30px) / 2); }
.flex-wrap.col3 > .flex-box { width: calc( (100% - 60px) / 3); }
.flex-wrap.col4 > .flex-box { width: calc( (100% - 90px) / 4); }
.flex-wrap.col6 > .flex-box { width: calc( (100% - 60px) / 3); }
.flex-box.row { flex-direction:row; }
.flex-box.column { flex-direction:column; text-align:center; }
@media all and (max-width:1600px) {
.flex-wrap.col4 .flex-box { width: calc( (100% - 50px) / 2); }
.flex-wrap.col6 > .flex-box { width: calc( (100% - 50px) / 2); }
}
@media all and (max-width:1440px) {
.flex-wrap { gap:15px; }
.flex-wrap.col2 > .flex-box { width: calc( (100% - 15px) / 2); }
.flex-wrap.col3 > .flex-box { width: calc( (100% - 30px) / 3); }
.flex-wrap.col4 > .flex-box { width: calc( (100% - 15px) / 2); }
.flex-wrap.col6 > .flex-box { width: calc( (100% - 15px) / 2); }
}
@media all and (max-width:760px) {
.flex-wrap.col2,
.flex-wrap.col3 { flex-direction:column; }
.flex-wrap.col2 > .flex-box,
.flex-wrap.col3 > .flex-box { width:100%; }
}
@media all and (max-width:520px) {
.flex-wrap.col4,
.flex-wrap.col6 { flex-direction:column; }
.flex-wrap.col4 > .flex-box,
.flex-wrap.col6 > .flex-box { width:100%; }
}
.round-box { background:#fff; border-radius:1rem; border:1px solid var(--color-line); }
.round-box.padding { padding:2rem; }
.round-box .img,
.round-box .icon { max-width:auto; aspect-ratio:auto; border-radius:0; border:0 !important; background:transparent; }
@media all and (max-width:1200px) {
.round-box.padding { padding:15px; }
.round-box.card .text { padding:15px; }
}
/***********************************************************************************************
Common
***********************************************************************************************/
body { word-break: keep-all; word-wrap: break-word;}
.inner { max-width:1470px; padding:0 15px; margin: 0 auto; }
br.mo { display:none; }
#s-wrap { padding-top:60px; }
#s-header { position:fixed; width:100%; left: 0; right:0; top:0; z-index:120; margin:0 auto; background:#fff; border-bottom:1px solid var(--color-line); }
#s-header .inner { height:60px; position: relative; display:flex; align-items:center; justify-content:space-between; }
#s-header h1 { order:1; z-index:1000; }
#s-header h1 a { display: block; }
#s-header .bg-menu { position: absolute; left: 0; right:0; top:0; height:250px; display:none; background:var(--color-light); z-index:-1; }
#s-header.active:before { content: ''; position: absolute; left: 0; right:0; top:60px; height: 1px; background:#fff; z-index:100; }
/*
#s-gnb > ul > li { float:left; position: relative; padding:0 10px; text-align:center;}
#s-gnb .btn-dep1 { display: block; line-height: 60px; padding:0 30px; font-size:18px; font-weight:500; color: #585858; position: relative; }
#s-gnb .dep2 { display: none; position: absolute; left: 5px; right:5px; top:55px; border:1px solid var(--color-line); border-radius:5px; background: #fff; box-shadow:0 3px 3px rgba(0,0,0,0.2); padding:10px 0;}
#s-gnb .btn-dep2 { display: block; font-size:15px; line-height: 30px; color: #585858; text-align: center; }
#s-gnb .btn-dep2:hover { background:var(--color-light); }
#s-gnb > ul > li:hover .btn-dep1 { font-weight: 600; color: var(--color-dark); }
#s-gnb > ul > li:hover .dep2 { display: block; }
*/
#s-gnb { order:2; position: relative; z-index:120; }
#s-gnb > ul { display:flex; }
#s-gnb > ul:after { display: block; content: ''; clear: both; }
#s-gnb > ul > li { position: relative; padding:0 10px; transition: all 0.5s ease; }
#s-gnb .btn-dep1 { display: block; height:60px; line-height: 60px; font-size:18px; font-weight:500; color: #585858; padding:0 25px; position: relative; }
#s-gnb > ul > li:before { content: ''; position: absolute;left: 0; bottom:-1px; height: 3px; background: var(--color-point-lv1); transition: all 0.5s ease; width:0; opacity:0;}
#s-gnb > ul > li:hover:before { opacity:1; width:100%;}
#s-gnb .dep2 { display: none; position: absolute; left: 0; right:0; top:60px; height:calc(230px - 60px); z-index:10; padding: 10px; }
#s-gnb .btn-dep2 { display: block; font-size:15px; line-height: 28px; color: #585858; text-align:center; white-space: nowrap; transition:all 0.3s ease; -webkit-transition:all 0.3s ease;}
#s-gnb .btn-dep2:hover { color: var(--color-point-lv3); }
#s-header .menu { order:3; }
#s-header .menu a { float:left; line-height: 20px; font-size:1em; color: #777; padding:0 10px; position:relative; }
#s-header .menu a:not(:first-child):before { content:'|'; position:absolute; left:-2px; color: #777 !important; }
#s-header .menu a:hover { color: var(--color-dark); }
@media all and (max-width:1440px) {
#s-header h1 { width:240px; }
#s-gnb .btn-dep1 { font-size:17px; }
}
#s-footer { padding:40px 0; background: #252525; }
#s-footer .inner { text-align: center; }
#s-footer .inner > div { display: inline-block; position: relative; }
#s-footer .logo { }
#s-footer .addr { padding-top:20px; font-size:12px; color: #a3a3a3; line-height: 1.4;}
#s-footer .addr a { color:#fff; }
#s-footer .addr a:hover { color:var(--color-point-lv1); }
#s-footer .select { vertical-align: middle; padding: 0 35px 0 15px; height: 48px; border: 1px solid rgba(255,255,255,0.6); font-size: 13px; color: #bbb;
background: transparent url(../img/common/bu_select.png) no-repeat 100% 50%; background-position: right 12px center; }
.main-visual { position: relative; width:100%; }
/* .main-visual:before { content: ''; position: absolute; left: 50%; bottom:-70px; width:1px; height: 140px; background:#b4b4b4; opacity:0.4; z-index:100;} */
.main-visual .visual-box { height: 740px; width:inherit; }
.main-visual .slider:focus, .main-visual .article:focus {outline:none;}
.main-visual .article { width:inherit; height: 765px; position: relative; background: no-repeat 50% 50% / cover; /* transition: transform 10s ease; transform:scale(1.3); */ }
/*
.main-visual .article1 { background-color:#b3d1ff; background-position: 50% 50%; background-size:contain; }
.main-visual .article2 { background-color:#f0e3da; background-position: 80% 50%; background-size:auto 80%; }
.main-visual .article3 { background-color:#a9e2d7; background-position: 20% 50%; background-size:auto 80%; }
.main-visual .article1 .tb-box { position: absolute; left: 0; right:0; top:0; bottom:0; z-index:100; }
.main-visual .article2 .tb-box { position: absolute; left: 15%; top:0; bottom:0; z-index:100; }
.main-visual .article3 .tb-box { position: absolute; right:15%; top:0; bottom:0; z-index:100; }
*/
.main-visual .article .tb-box { position: absolute; left: 0; right:0; top:0; bottom:0; z-index:100; }
.main-visual .tb { display: table; width:100%; height: 100%; text-align: center; color: #333; }
.main-visual .tb .td { vertical-align: middle; display: table-cell; }
.main-visual .tb .td .t1 { font-family:var(--font-title); font-size:48px; line-height: 1.3; }
.main-visual .tb .td .t2 { font-size:48px; line-height: 1.3; font-weight: 300; margin-bottom: 30px; letter-spacing:-0.5px; }
.main-visual .tb .td .t3 { font-size:16px; line-height: 1.4; color: #b8b8b8; margin-bottom: 20px; }
.main-visual .slick-prev { position: absolute; left: 7%; top:50%; width:60px; height: 60px; border-left: 2px solid var(--color-light); border-bottom: 2px solid var(--color-light); z-index:10; background: transparent; /*text-indent: -9999px;*/ color:transparent; transform: rotate(45deg); margin-top:-60px; outline:none; transition: all 0.3s ease;}
.main-visual .slick-next { position: absolute; right: 7%; top:50%; width:60px; height: 60px; border-left: 2px solid var(--color-light); border-bottom: 2px solid var(--color-light); z-index:10; background: transparent; /*text-indent: -9999px;*/ color:transparent; transform: rotate(-135deg); margin-top:-60px;outline:none; transition: all 0.3s ease;}
.main-visual .slick-prev:hover, .main-visual .slick-next:hover { border-left: 2px solid var(--color-point-lv1); border-bottom: 2px solid var(--color-point-lv1); }
.main-visual .slick-dots { position: absolute;left: 0; right:0; bottom:50px; text-align: center; font-size:0; }
.main-visual .slick-dots li {display: inline-block; vertical-align: middle; margin:0 3px; }
.main-visual .slick-dots li button { width:14px; height: 14px; border-radius:7px; background: var(--color-light); text-indent: -9999px; text-align: left; transition: all 0.5s ease; }
.main-visual .slick-dots li.slick-active button { width:40px; background: var(--color-point-lv1); }
@media all and (max-width:1200px) {
.main-visual .visual-box,
.main-visual .article{ height: 400px; }
.main-visual .tb .td .t1 { font-size:24px; }
.main-visual .tb .td .t2 { font-size:24px; margin-bottom: 15px; }
.main-visual .tb .td .t3 { font-size:12px; }
.main-visual .slick-prev,
.main-visual .slick-next { display:none !important; }
.main-visual .slick-dots { bottom:15px; }
.main-visual .slider-nav { width:100%; padding:0 15px; }
.main-visual .slider-nav .visual-btn { padding: 10px 5px; font-size:1em; }
}
@media all and (max-width: 760px){
.main-visual .article1 { background-size:cover; }
}
.main-section { position: relative; padding: 90px 0; font-family:var(--font-text); font-size:1.25em; line-height:1.5; }
.main-section.dark,
.main-section .dark-box { color:#fff; }
.main-section .light-box { background:#fff; color:#333; }
.main-section hgroup { text-align:center; margin-bottom:50px; }
.main-section hgroup .desc { font-size:28px; margin-bottom:30px; }
.main-section hgroup em { color:var(--color-point-lv3); font-weight:700; }
.main-section.dark hgroup em { color:var(--color-point-lv1); }
.main-section h2, .main-section h3, .main-section h4, .main-section h5, .main-section h6 { font-family:var(--font-title); font-weight:500; }
.main-section h2 { font-size: 80px; line-height: 1.3; }
.main-section h3 { font-size: 60px; line-height: 1.3; }
.main-section h4 { font-size: 40px; line-height: 1.3; }
.main-section h5 { font-size: 30px; line-height: 1.3; }
/*.main-section mark { background:var(--color-point-lv3); color:#fff; padding:0 0.1em; font-weight:600; }*/
.main-section mark { background:transparent;
background-image: linear-gradient(to right, rgba(197,228,251,0.5) 0%, rgba(197,228,251,0.5) 100%);
background-repeat: no-repeat;
background-size: 100% 30%;
background-position: 0 100%;
color:var(--color-point-lv3); font-weight:700; }
.main-section .img { padding-bottom:50px; text-align:center; }
.main-section .img_circle img { border-radius:50%; overflow:hidden; background:var(--color-light); }
.main-section .text { font-size:24px; margin-bottom:50px; text-align:center; }
.main-section .flex-wrap.row { flex-direction:row; }
.main-section .flex-wrap.column { flex-direction:column; }
.main-section .flex-wrap > li { color:var(--color-dark); font-size:20px; }
.main-section .flex-wrap > li small { color:#555; }
.main-section .round-box { border-radius:1rem; padding:2rem; /*transition: var(--transition-slow);*/ }
.main-section .flex-box.imgs { flex-wrap:nowrap; justify-content:center; align-items:center; margin-top:-30px; }
.main-section .flex-box.imgs > li { flex:initial; }
.main-section .flex-box.imgs img { max-width:100%; }
.main-section .step-box li { position:relative; padding-top:50px; }
.main-section .step-box li strong { font-weight:700; }
.main-section .step-box li:after { position:absolute; top:0; left:50%; transform:translateX(-50%); width:70px; height:35px;
background:#fff; border-bottom-left-radius:35px; border-bottom-right-radius:35px; font-size:24px;
display:flex; justify-content:center; align-items:flex-start; line-height:1; font-family:var(--font-title); font-weight:600; }
.main-section .step-box li:nth-child(1):after { content:'1'; }
.main-section .step-box li:nth-child(2):after { content:'2'; }
.main-section .step-box li:nth-child(3):after { content:'3'; }
.main-section .step-box li:nth-child(4):after { content:'4'; }
.main-section .step-box li:nth-child(5):after { content:'5'; }
.main-section .text-box > li { display: flex; flex-direction:column; justify-content: center; align-items: center; gap: 1em; text-align:left; }
.main-section .text-box > li h4 { text-align:center; }
@media all and (max-width:1200px) {
.main-section { padding: 70px 0; font-size:1em; }
.main-section hgroup { margin-bottom:30px; }
.main-section hgroup .desc { font-size:20px; margin-bottom:15px; }
.main-section h2 { font-size: 48px; }
.main-section h3 { font-size: 36px; }
.main-section h4 { font-size: 24px; }
.main-section h5 { font-size: 20px; }
.main-section .text { font-size:18px; margin-bottom:30px; }
.main-section .img { padding-bottom:30px; }
.main-section .flex-wrap > li { padding:20px 15px; font-size:16px; }
.main-section .flex-box.imgs { margin-top:-15px; }
.main-section .round-box { padding:15px; }
.main-section .step-box li { padding-top:35px; }
.main-section .step-box li:after { width:50px; height:25px; font-size:18px; border-bottom-left-radius:15px; border-bottom-right-radius:15px; }
}
@media all and (max-width:760px) {
.main-section { padding: 50px 0; }
.main-section .flex-box.row { flex-direction:column; }
.main-section .flex-box.row.round-box > li:not(:last-child) { border-right:none; border-bottom:1px dashed var(--color-line); }
.main-section .flex-box.imgs { margin-bottom:10px; }
.main-section .flex-box.imgs > li { padding:5px; }
.main-section .flex-box.imgs.col4 { flex-wrap:wrap; }
.main-section .flex-box.imgs.col4 > li { flex:1 1 50%; }
}
@media all and (max-width:560px) {
.main-section hgroup .desc { font-size:18px; }
.main-section h2 { font-size: 32px; }
.main-section h3 { font-size: 28px; }
.main-section h4 { font-size: 20px; }
.main-section .step-box li { flex:1 1 100%; }
}
.main-section .list_form { display:flex; flex-wrap:wrap; margin:-0.5rem -1rem; font-size:1em; }
.main-section .list_form li { padding:0.75rem 1rem; display:flex; align-items:stratch; }
.main-section .list_form .col { width:100%; }
.main-section .list_form .col2 { width:50%; }
.main-section .list_form .label_tit { width:8em; padding:0.5rem; padding-left:0; font-weight:600; }
.main-section .list_form .label_tit.required { }
.main-section .list_form .label_tit + input,
.main-section .list_form .label_tit + select,
.main-section .list_form .label_tit + textarea,
.main-section .list_form .label_tit + .inp-box { width:calc(100% - 8em); }
.main-section .list_form .label_tit + .inp-box.col2 { display:flex; gap:1rem; }
.main-section .list_form .label_tit + .inp-box.col2 > * { flex:1; }
.main-section .btn_box { margin-top:60px; display:flex; justify-content:center }
.main-section .list_form ~ .btn_box { margin-top:1rem; }
.main-section .list_form ~ .btn_box .btn-form { font-size:24px; height:48px; width:100%; max-width:240px; justify-content:center; }
@media all and (max-width:1200px) {
.main-section .list_form li { padding:0.5rem 1rem; }
.main-section .list_form .col2 { width:100%; }
.main-section .btn_box { margin-top:30px; }
.main-section .list_form ~ .btn_box .btn-form { font-size:20px; height:40px; }
}
@media all and (max-width:560px) {
.main-section .list_form li { display:block; }
.main-section .list_form .label_tit { width:auto; display:inline-block; padding:0; padding-right:1em; }
.main-section .list_form .label_tit + input,
.main-section .list_form .label_tit + select,
.main-section .list_form .label_tit + textarea,
.main-section .list_form .label_tit + .inp-box { width:100%; }
.main-section .list_form ~ .btn_box .btn-form { max-width:100%; }
}
.main-section .list_check { margin-left: 1.25em; margin-top: 1em; }
.main-section .list_check > li:not(:last-child) { margin-bottom:0.25em; }
.main-section .list_check > li:before { content: '\2714'; color:var(--color-point-lv3); margin-left: -1.25em; padding-right: 0.45em; }
.main-section .btn-round { font-size:32px; height:60px; line-height:60px; }
.main-section .desc .btn-round { display:inline-block; }
.main-section.visual { padding:0; background: no-repeat 50% 50% / cover; background-attachment:fixed; }
.main-section.visual hgroup { text-align:left; margin-bottom:0; }
.main-section.visual mark { background:transparent; color:inherit; font-weight:700; border-bottom:0.15em solid var(--color-point-lv3); }
.main-section.visual .article .inner { display:flex; flex-direction:column; height:100%; align-items:center; justify-content:center; }
.main-section.visual .article .inner hgroup { text-align:center; }
.main-section.event { background-color:var(--color-dark); }
.main-section.event .btn-round { margin:0 auto 30px; padding-right:80px; display:inline-block; position:relative; }
.main-section.event .btn-round:after { content:'\e905'; font-family:var(--font-icon); position:absolute; top:50%; right:10px; transform:translateY(-50%); background:var(--color-dark); width:40px; height:40px; line-height:40px; border-radius:50%; }
.main-section.event .flex-box li { display:flex; flex-direction:row-reverse; justify-content:flex-end; align-items:center; gap:1em; text-align:left; }
.main-section.event .flex-box li .imgs { flex:none; }
.main-section.event .flex-box li .txt { flex:1; }
.main-section.study { background-color:var(--color-light); }
.main-section.college.head { padding-bottom:0; position:relative; background-color:var(--color-bg-lv3); border-bottom-left-radius:50px; border-bottom-right-radius:50px; }
.main-section.college.head:after { content:''; position:absolute; bottom:-50px; left:50%; transform:translateX(-50%);
border-top: 50px solid var(--color-bg-lv3); border-left: 50px solid transparent; border-right: 50px solid transparent; z-index:1; }
.main-section.college.head .text { font-family:'Cafe24Supermagic'; font-weight:700; font-size:1.75em; }
.main-section.college.body hgroup em { color:#ff6333; }
.main-section.college.body .light-box { border:1px solid var(--color-line); }
.main-section.college.body .step-box { grid-auto-rows: minmax(210px, auto); }
.main-section.college.body .step-box li:nth-child(4) { grid-row: 2 / 3; grid-column: 1 / 3; }
.main-section.college.body .step-box li:nth-child(1),
.main-section.college.body .step-box li:nth-child(4) { background-color:var(--color-point-lv1); }
.main-section.college.body .step-box li:nth-child(1):after,
.main-section.college.body .step-box li:nth-child(4):after { color:var(--color-point-lv1); }
.main-section.college.body .step-box li:nth-child(2),
.main-section.college.body .step-box li:nth-child(5) { background-color:var(--color-point-lv2); }
.main-section.college.body .step-box li:nth-child(2):after,
.main-section.college.body .step-box li:nth-child(5):after { color:var(--color-point-lv2); }
.main-section.college.body .step-box li:nth-child(3),
.main-section.college.body .step-box li:nth-child(6) { background-color:var(--color-point-lv3); }
.main-section.college.body .step-box li:nth-child(3):after,
.main-section.college.body .step-box li:nth-child(6):after { color:var(--color-point-lv3); }
.main-section.college.body .step-box li small { color:rgba(255,255,255,0.85); }
.main-section.college.body .text-box > li a { display:inline-block; text-align:center; }
.main-section.college.body .text-box > li a img { width:100%; max-width:528px; }
.main-section.college.body .flex-box .txt > .step-box li:after { width:140px; font-weight:500; }
.main-section.college.body .flex-box .txt > .step-box li:nth-child(1):after { content:'초급반'; }
.main-section.college.body .flex-box .txt > .step-box li:nth-child(2):after { content:'중·고급반'; }
.main-section.college.body .flex-box .txt > .step-box li:nth-child(3):after { content:'자격증반'; }
.main-section.work { background: no-repeat center top / cover; }
.main-section.work hgroup em { text-shadow: 0 0 15px rgba(255,255,255,0.9); }
.main-section.consult { background-color:var(--color-light); }
.main-section.benefit { background-color:var(--color-dark); }
.main-section.benefit .step-box li { text-align:center; padding:0; background:transparent; }
.main-section.benefit .step-box li:after { width:120px; background-color:var(--color-dark); color:#fff; font-weight:500; }
.main-section.benefit .step-box li:nth-child(1):after { content:'혜택 1'; }
.main-section.benefit .step-box li:nth-child(2):after { content:'혜택 2'; }
.main-section.benefit .step-box li:nth-child(3):after { content:'혜택 3'; }
.main-section.benefit .step-box li:nth-child(4):after { content:'혜택 4'; }
.main-section.benefit .step-box li:nth-child(5):after { content:'혜택 5'; }
.main-section.benefit .step-box li a { display:inline-block; width:100%; height:100%; background:#fff; padding: 30px; padding-top:50px; border-radius: 30px; transition:all 0.3s ease; }
.main-section.benefit .step-box li:hover a { color: #fff; background: var(--color-point-lv3); }
#benefit02 { background-color:var(--color-bg-lv1); }
#benefit03 { background-color:var(--color-bg-lv3); }
#benefit05 { background-color:var(--color-light); }
.main-section.curriculum .step-box li { border:1px solid var(--color-line); text-align:center; /*transition:var(--transition-slow);*/ }
/*.main-section.curriculum .step-box li:hover { transform:translateY(-0.5rem); box-shadow: 0 15px 30px rgba(0, 0, 0, 0.1); }*/
.main-section.curriculum .step-box li a { display:block; width:100%; height:100%; }
.main-section.curriculum .step-box li .imgs { margin:1rem 0 1.5rem; }
.main-section.curriculum .step-box li .imgs img { width:100%; max-width:400px; }
.main-section.curriculum .step-box .level1 { border-color:var(--color-point-lv1); }
.main-section.curriculum .step-box .level1:after { color:var(--color-point-lv1); top:-1px; }
.main-section.curriculum .step-box .level1 h4 { color:var(--color-point-lv1); }
.main-section.curriculum .step-box .level2 { border-color:var(--color-point-lv2); }
.main-section.curriculum .step-box .level2:after { color:var(--color-point-lv2); top:-1px; }
.main-section.curriculum .step-box .level2 h4 { color:var(--color-point-lv2); }
.main-section.curriculum .step-box .level3 { border-color:var(--color-point-lv3); }
.main-section.curriculum .step-box .level3:after { color:var(--color-point-lv3); top:-1px; }
.main-section.curriculum .step-box .level3 h4 { color:var(--color-point-lv3); }
.main-section.curriculum .step-box .level4 { border-color:var(--color-point-lv4); }
.main-section.curriculum .step-box .level4:after { color:var(--color-point-lv4); top:-1px; }
.main-section.curriculum .step-box .level4 h4 { color:var(--color-point-lv4); }
.main-section.curriculum .step-box li:after { width:140px; font-weight:500; }
.main-section.curriculum .step-box .level1:after { content:'STEP 1'; }
.main-section.curriculum .step-box .level2:after { content:'STEP 2'; }
.main-section.curriculum .step-box .level3:after { content:'STEP 3'; }
.main-section.curriculum .step-box .level4:after { content:'STEP 4'; }
.main-section.instructor { background-color:var(--color-light); }
.main-section.instructor .flex-wrap li { text-align:center; }
/*
.main-section.instructor .flex-wrap li:nth-child(1) { order:2; }
.main-section.instructor .flex-wrap li:nth-child(2) { order:1; }
.main-section.instructor .flex-wrap li:nth-child(3) { order:3; }
*/
.main-section.instructor .flex-wrap li .imgs { margin:0 auto 2rem; max-width:180px; }
.main-section.instructor .flex-wrap li h5 { margin-bottom:1rem; }
.main-section.instructor .flex-wrap li small { color: var(--color-point-lv1); }
.main-section.banner { background:var(--color-dark) no-repeat 50% 50% / cover; background-attachment:fixed; padding:0; }
.main-section.banner .inner a { display:flex; align-items:center; padding:1rem 0; }
.main-section.banner .imgs { flex:1; padding-right:1rem; }
.main-section.banner .txt { flex:1; text-align:left; }
.main-section.banner .txt p { font-size:20px; margin-top:1rem; }
.main-section.review ul li { border:1px solid var(--color-line); font-size:16px; }
.main-section.review ul li:hover { border-color:var(--color-dark); }
.main-section.review ul li .head { display:flex; margin-bottom:1.5rem; }
.main-section.review ul li .head .imgs { width:60px; margin-right:1.5rem; }
.main-section.review ul li .head .txt { /*width:calc(100% - 60px - 1.5rem);*/ width:100%; }
.main-section.review ul li .head .txt .tit { font-weight:600; font-size:20px; width:100%; overflow: hidden; word-break: break-word;
display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; margin-bottom: 0; }
.main-section.review ul li p { width:100%; overflow: hidden; word-break: break-word;
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; margin-bottom: 0; }
.main-section.review ul li .head small { color:#aaa; }
.main-section.shortcut { padding:0; background-color: var(--color-light); }
.main-section.shortcut .flex-wrap { justify-content:space-between; gap:0; }
.main-section.shortcut .flex-box { flex:1; padding:2rem 0; }
.main-section.shortcut .flex-box a { padding:0 1rem; width:100%; height:100%; display:inline-block; text-align:center; }
.main-section.shortcut .flex-box:not(:last-child) a { border-right: 1px dashed #fff; }
.main-section.shortcut .flex-box a i { font-size:2rem; transition:var(--transition-fast); }
.main-section.shortcut .flex-box a p:nth-child(2) { font-size:0.9em; word-break:keep-all; }
.main-section.shortcut .flex-box a:hover i { color: var(--color-point-lv1); }
@media all and (max-width:1200px) {
.main-section .btn-round { font-size:20px; height:40px; line-height:40px; }
.main-section.event .btn-round { padding-right:50px; margin-bottom:15px; }
.main-section.event .btn-round:after { width:32px; height:32px; line-height:32px; right:4px; }
.main-section.college.head:after { bottom:-30px; border-top: 30px solid var(--color-bg-lv3); border-left: 30px solid transparent; border-right: 30px solid transparent; }
.main-section.benefit .step-box li a { padding: 15px; padding-top:35px; border-radius: 15px; }
.main-section.banner .txt p { font-size:1em; }
.main-section.curriculum .step-box li .imgs { margin:1rem 0; }
.main-section.instructor .flex-wrap li .imgs { margin:0 auto 1rem; }
.main-section.instructor .flex-wrap li h5 { margin-bottom:0.5rem; }
.main-section.review ul li { font-size:1em; }
.main-section.review ul li .head { margin-bottom:0.5rem; }
.main-section.review ul li .head .imgs { margin-right:15px; }
.main-section.review ul li .head .txt .tit { font-size:18px; }
.main-section.review ul li .head small { font-size:13px; }
.main-section.shortcut .flex-box { flex:1; padding:1rem 0; }
.main-section.shortcut .flex-box a i { font-size:1.5rem; }
.main-section.shortcut .flex-box a p:nth-child(2) { font-size:12px; line-height:1.3; }
}
@media all and (max-width:760px) {
.main-section .grid-box { display: flex; flex-direction:column; }
.main-section.instructor .flex-wrap li:nth-child(1) { order:1; }
.main-section.instructor .flex-wrap li:nth-child(2) { order:2; }
.main-section.instructor .flex-wrap li:nth-child(3) { order:3; }
.main-section.shortcut .flex-box a { padding:0 3px; }
}
@media all and (max-width:560px) {
.main-section .btn-round { font-size:18px; height:32px; line-height:32px; }
.main-section.event .btn-round { padding-right:40px; }
.main-section.event .btn-round:after { width:24px; height:24px; line-height:24px; }
.main-section.event .flex-box li { flex-direction:column; align-items:flex-start; }
.main-section.event .flex-box li .imgs { width:100%; text-align:center; }
.main-section.banner .txt { flex:1.5; }
}
#widget { position:fixed; bottom:1rem; right:1rem; box-shadow: 0px 5px 10px rgba(29, 35, 49, 0.15); border-radius:3px; overflow:hidden; display:none; }
#widget li { background:rgba(255,255,255,0.9); }
#widget li:not(:last-child) a { border-bottom:1px dashed var(--color-line); }
#widget li a { display:block; padding:0.75rem 0.5rem; width:80px; font-size:13px; text-align:center; transition: all 0.2s ease; }
#widget li.title { background:rgba(0,0,0,0.9); }
#widget li.title a { color:#fff; }
#widget li a p:first-child { margin-bottom:2px; }
#widget li a i { font-size:2em; vertical-align:middle; }
#widget li a:hover { background:linear-gradient(to right, var(--color-point-lv1), var(--color-point-lv3)); color:#fff; }
@media all and (max-width:1440px) {
#widget li a { padding:0.5rem 0.25rem; width:70px; }
#widget li a i { font-size:1.75em; }
}
@media all and (max-width:1200px) {
#s-footer2 { padding-bottom:calc(4rem + 30px) !important; }
#widget { bottom:0; left:0; right:0; width:100%; box-shadow:none; border-top:1px solid var(--color-line); border-radius:0; box-sizing:border-box; z-index:100; }
#widget ul { display:flex; align-items:center; }
#widget li { flex:1; height:4rem; background:#fff; }
#widget li:not(:last-child) a { border:none; border-right:1px dashed var(--color-line); }
#widget li a { padding:0.5rem; width:100%; height:4rem; line-height:1; font-size:11px; }
#widget li a i { font-size:2em; }
}
@media all and (max-width:639px){
#widget { display:none !important; }
}
/* --- sub section ---*/
.sub-section .btn-round { color: #fff; background:linear-gradient(to right, var(--color-point-lv1), var(--color-point-lv3)); display:flex; align-items:center; border-radius:30px; padding:0 36px; }
.sub-section .btn-rect { color: #fff; background:linear-gradient(to right, var(--color-point-lv1), var(--color-point-lv3)); display:flex; align-items:center; border-radius:3px; padding:0 36px; }
.sub-section br.pc,
.sub-section br.mo { display:inline; }
@media all and (max-width:1000px) {
.sub-section .btn-round,
.sub-section .btn-rect { padding:0 20px; }
.sub-section br.pc { display:none; }
}
@media all and (max-width:770px) {
.sub-section br.mo { display:none; }
}
.sub-section { position: relative; padding: 120px 0 90px; font-family:var(--font-text); font-size:1.25em; line-height:1.5; }
.sub-section .inner { max-width:1230px; margin: 0 auto; padding:0 15px; }
.sub-section.dark,
.sub-section .dark-box { color:#fff; }
.sub-section .light-box { background:#fff; color:#333; }
.sub-section hgroup { text-align:center; margin-bottom:50px; }
.sub-section hgroup .desc { font-size:32px; margin-bottom:30px; }
.sub-section hgroup em { color:var(--color-point-lv3); font-weight:700; }
.sub-section.dark hgroup em { color:var(--color-point-lv1); }
.sub-section h2 { font-family:var(--font-title); font-weight: 500; font-size: 80px; line-height: 1.3; }
.sub-section h3 { font-family:var(--font-title); font-weight: 500; font-size: 60px; line-height: 1.3; }
.sub-section h4 { font-family:var(--font-title); font-weight: 500; font-size: 40px; line-height: 1.3; }
.sub-section p,
.sub-section li { word-break: keep-all; }
/*.main-section mark { background:var(--color-point-lv3); color:#fff; padding:0 0.1em; font-weight:600; }*/
.sub-section mark { background:transparent;
background-image: linear-gradient(to right, rgba(197,228,251,0.5) 0%, rgba(197,228,251,0.5) 100%);
background-repeat: no-repeat;
background-size: 100% 30%;
background-position: 0 100%;
color:var(--color-point-lv3); font-weight:700; }
.sub-section .img { padding-bottom:50px; text-align:center; }
.sub-section .text { font-size:24px; margin-bottom:50px; text-align:center; }
.sub-section .flex-box { display:flex; flex-wrap:wrap; }
.sub-section .flex-box.row { flex-direction:row; }
.sub-section .flex-box.column { flex-direction:column; text-align:center; }
.sub-section .flex-box > li { flex:1; padding:30px; font-size:28px; text-align:center; color:#000; }
.sub-section .flex-box > li small { color:#555; }
.sub-section .round-box { border-radius:30px; padding:30px; border:0 none; }
.sub-section .flex-box.row.round-box > li:not(:last-child) { border-right:1px dashed var(--color-line); }
.sub-section .flex-box.column.round-box > li:not(:last-child) { border-bottom:1px dashed var(--color-line); }
.sub-section .flex-box.imgs { flex-wrap:nowrap; justify-content:center; align-items:center; margin-top:-30px; }
.sub-section .flex-box.imgs > li { flex:initial; }
.sub-section .flex-box.imgs img { max-width:100%; }
.sub-section .grid-box { display: -ms-grid; display: grid; grid-gap: 1rem; gap: 1rem; margin-top:30px; }
.sub-section .grid-box.col2 { -ms-grid-columns: repeat(2, 1fr); grid-template-columns: repeat(2, 1fr); }
.sub-section .grid-box.col3 { -ms-grid-columns: repeat(3, 1fr); grid-template-columns: repeat(3, 1fr); }
.sub-section .grid-box.col4 { -ms-grid-columns: repeat(4, 1fr); grid-template-columns: repeat(4, 1fr); }
.sub-section .grid-box.col5 { -ms-grid-columns: repeat(5, 1fr); grid-template-columns: repeat(5, 1fr); }
.sub-section .step-box { justify-content:center; gap:1em; }
.sub-section .step-box:after { display:none; }
.sub-section .step-box li { position:relative; padding-top:50px; font-size:24px; }
.sub-section .step-box li strong { font-weight:700; }
.sub-section .step-box li:after { position:absolute; top:0; left:50%; transform:translateX(-50%); width:70px; height:35px;
background:#fff; border-bottom-left-radius:35px; border-bottom-right-radius:35px; font-size:24px;
display:flex; justify-content:center; align-items:flex-start; line-height:1; font-family:var(--font-title); font-weight:600; }
.sub-section .step-box li:nth-child(1):after { content:'1'; }
.sub-section .step-box li:nth-child(2):after { content:'2'; }
.sub-section .step-box li:nth-child(3):after { content:'3'; }
.sub-section .step-box li:nth-child(4):after { content:'4'; }
.sub-section .step-box li:nth-child(5):after { content:'5'; }
.sub-section .text-box > li { display: flex; flex-direction:column; justify-content: center; align-items: center; gap: 1em; text-align:left; }
.sub-section .text-box > li h4 { text-align:center; }
@media all and (max-width:1000px) {
.sub-section { padding: 80px 0 60px; font-size:1em; }
.sub-section hgroup { margin-bottom:30px; }
.sub-section hgroup .desc { font-size:20px; margin-bottom:15px; }
.sub-section h2 { font-size: 48px; }
.sub-section h3 { font-size: 36px; }
.sub-section h4 { font-size: 24px; }
.sub-section .text { font-size:18px; margin-bottom:30px; }
.sub-section .img { padding-bottom:30px; }
.sub-section .flex-box > li { padding:15px; font-size:18px; }
.sub-section .flex-box.imgs { margin-top:-15px; }
.sub-section .round-box { border-radius:15px; padding:15px; }
.sub-section .step-box { display:flex !important; flex-wrap:wrap; }
.sub-section .step-box li { padding-top:35px; font-size:18px; flex:1 1 45%; }
.sub-section .step-box li:after { width:50px; height:25px; font-size:20px; border-bottom-left-radius:15px; border-bottom-right-radius:15px; }
}
@media all and (max-width:770px) {
.sub-section .flex-box.row { flex-direction:column; }
.sub-section .flex-box.row.round-box > li:not(:last-child) { border-right:none; border-bottom:1px dashed var(--color-line); }
.sub-section .flex-box.imgs { margin-bottom:10px; }
.sub-section .flex-box.imgs > li { padding:5px; }
.sub-section .flex-box.imgs.col4 { flex-wrap:wrap; }
.sub-section .flex-box.imgs.col4 > li { flex:1 1 50%; }
}
@media all and (max-width:560px) {
.sub-section hgroup .desc { font-size:18px; }
.sub-section h2 { font-size: 32px; }
.sub-section h3 { font-size: 28px; }
.sub-section h4 { font-size: 20px; }
.sub-section .step-box li { flex:1 1 100%; }
}
.sub-section .list_check { margin-left: 1.25em; margin-top: 1em; }
.sub-section .list_check > li:not(:last-child) { margin-bottom:0.25em; }
.sub-section .list_check > li:before { content: '\2714'; color:var(--color-point-lv3); margin-left: -1.25em; padding-right: 0.45em; }
.sub-section .btn-round { font-size:32px; height:60px; line-height:60px; }
.sub-section .desc .btn-round { display:inline-block; }
.sub-section.study { background-color:var(--color-light); }
.sub-section.benefit { background-color:var(--color-dark); }
.sub-section.benefit .step-box li { text-align:center; padding:0; background:transparent; }
.sub-section.benefit .step-box li:after { width:120px; background-color:var(--color-dark); color:#fff; font-weight:500; }
.sub-section.benefit .step-box li:nth-child(1):after { content:'혜택 1'; }
.sub-section.benefit .step-box li:nth-child(2):after { content:'혜택 2'; }
.sub-section.benefit .step-box li:nth-child(3):after { content:'혜택 3'; }
.sub-section.benefit .step-box li:nth-child(4):after { content:'혜택 4'; }
.sub-section.benefit .step-box li:nth-child(5):after { content:'혜택 5'; }
.sub-section.benefit .step-box li a { display:inline-block; width:100%; height:100%; background:#fff; padding: 30px; padding-top:50px; border-radius: 30px; transition:var(--transition-slow); }
.sub-section.benefit .step-box li:hover a { color: #fff; background: var(--color-point-lv3); }
#benefit02 { background-color:var(--color-bg-lv1); }
#benefit03 { background-color:var(--color-bg-lv3); }
#benefit05 { background-color:var(--color-light); }
.sub-section.event { background-color:var(--color-dark); }
.sub-section.event .btn-round { margin:0 auto 30px; padding-right:80px; display:inline-block; position:relative; }
.sub-section.event .btn-round:after { content:'\e905'; font-family:var(--font-icon); position:absolute; top:50%; right:10px; transform:translateY(-50%); background:#000; width:40px; height:40px; line-height:40px; border-radius:50%; }
.sub-section.event .flex-box li { display:flex; flex-direction:row-reverse; justify-content:flex-end; align-items:center; gap:1em; text-align:left; }
.sub-section.event .flex-box li .imgs { flex:none; }
.sub-section.event .flex-box li .txt { flex:1; }
@media all and (max-width:1000px) {
.sub-section .btn-round { font-size:20px; height:40px; line-height:40px; }
.sub-section.benefit .step-box li a { padding: 15px; padding-top:35px; border-radius: 15px; }
.sub-section.event .btn-round { padding-right:50px; margin-bottom:15px; }
.sub-section.event .btn-round:after { width:32px; height:32px; line-height:32px; right:4px; }
}
@media all and (max-width:560px) {
.sub-section .btn-round { font-size:18px; height:32px; line-height:32px; }
.sub-section.event .btn-round { padding-right:40px; }
.sub-section.event .btn-round:after { width:24px; height:24px; line-height:24px; }
.sub-section.event .flex-box li { flex-direction:column; align-items:flex-start; }
.sub-section.event .flex-box li .imgs { width:100%; text-align:center; }
}
.test { padding: 100px 0; background: #efefef; }
.test ul { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:stretch; align-content:stretch; }
.test ul li { width:calc(25% - 10px); margin:5px; }
.test ul li a { display:block; background:rgba(255,255,255,0.7); padding:0 10px 20px; border-radius:15px; transition: all 0.3s ease; }
.test ul li a .tit { font-size:30px; margin-bottom:15px; }
.test ul li a .tit small { display:inline-block; font-size:16px; line-height:1.5; }
.test ul li a img { transform:translateY(-40px); }
.test ul li a:hover { background:#fff; transform: translateY(-5px); box-shadow: 0px 10px 20px rgba(0,0,0,0.2); }
.test ul li a:hover .Bbtn {background-color:var(--color-point-lv1);}
@media all and (max-width:1200px) {
.test ul li a img { transform:translateY(-20px); }
.test ul li a .tit { font-size:17px; }
.test ul li a .tit small { font-size:14px; }
}
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
.test ul li { width:calc(50% - 10px);}
.test ul li a { padding:5px 10px 20px; }
.test ul li a img { transform:translateY(0);}
.test ul li a .tit {margin-top:5px;}
}
.category { padding: 100px 0; background: #f0e3da; }
.category ul { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:stretch; align-content:stretch; }
.category ul li { width:calc(30% - 10px); margin:5px; }
.category ul li a { display:block; position:relative; background:rgba(255,255,255,0.7); padding:10px 30px; border-radius:15px; transition: all 0.3s ease; }
.category ul li a .tit { position:absolute; right:50px; top:50%; transform:translateY(-50%); text-align:right; font-size:24px; }
.category ul li a:hover { background:#fff; transform: translateY(-5px); box-shadow: 0px 10px 20px rgba(0,0,0,0.2); }
@media all and (max-width:1200px) {
.category ul li a { padding:10px; }
.category ul li a .tit { right:30px; font-size:16px; }
}
@media all and (max-width:1000px) {
.category ul li { width:calc(50% - 10px);}
.category ul li a { padding:0 10px 25px; text-align:center; }
.category ul li a .tit { position:static; transform:translateY(0); text-align:center; }
}
.contact { padding: 100px 0; background: #f0e3da; }
.contact .tel { width:inherit; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; align-content:stretch; }
.contact .tel li { width:calc(33.3333% - 10px); margin:5px; padding:0 10px 20px; background-color:#ffffff; border-radius:15px; transition: all 0.3s ease; text-align:center; }
.contact li img { max-width:50%; padding:10px 0; }
.contact li .txt .tit { font-size:24px; line-height:1.4; margin-bottom:5px; letter-spacing:-0.5px; }
.contact li .txt .tit i { color:var(--color-point-lv1); }
.contact li .txt .desc { font-size:16px; line-height:1.5; font-weight:300; margin-bottom:20px; }
.contact li .txt .desc b { font-weight:600; font-size:1.2em; }
.contact li .Bbtn { margin-bottom:5px; }
.contact li .Bbtn.on { background: #333; }
.contact li .Bbtn.on i { color:var(--color-point-lv1); transition: all 0.3s ease; }
.contact li .Bbtn.ing { background: #888; }
.contact li .Bbtn.off { background: #ddd; }
.contact li .Bbtn.on:hover { background: var(--color-point-lv1); }
.contact li .Bbtn.on:hover i { color:#fff; }
@media all and (max-width:1000px) {
.contact .tel li { width:calc(50% - 10px); }
.contact li .txt .tit { font-size:17px;}
.contact li .txt .desc { font-size:14px;}
}
.enter { padding: 30px 0 70px; background: #333; margin-bottom: 140px; }
.enter .inner { position: relative; max-width:800px; }
.enter .inner:after { display: block; content: ''; clear: both; }
.enter .inner .fl { width:388px; margin-top:-70px; box-shadow:10px 10px 10px rgba(0,0,0,0.15); }
.enter .inner .fr { float:left; color: #fff;}
.enter .inner .fr strong { display: block; font-size:40px; font-weight: 700; margin-bottom: 15px; }
.enter .inner .fr b { display: block; font-size:30px; margin-bottom: 15px; font-weight: 400;}
.enter .inner .fr p { font-size:17px; line-height: 1.5; color: #c8c8c8; margin-bottom: 15px; }
.intro { padding: 100px 0; background: var(--color-bg-lv1); }
.intro ul { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:stretch; align-content:stretch; }
.intro ul li { width:calc(25% - 60px); margin:30px; }
.intro ul li a { text-align:center; }
.intro ul li a img {display:block; margin:0 auto;}
.intro ul li a .tit { font-size:24px; }
@media all and (max-width:1200px) {
.intro ul li { width:calc(50% - 60px);}
.intro ul li a .tit { font-size:16px; }
}
@media all and (max-width:760px) {
.intro ul li { width:calc(100% - 10px); margin:5px 5px 20px;}
.intro ul li a img { max-width:60%; }
}
.sns { padding: 100px 0; background: #efefef; }
.sns ul { margin-bottom:30px; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-items:center; align-content:stretch; }
.sns ul li { width:calc(25% - 20px); margin:10px; }
.sns ul li a { width:100%; opacity:1; transition: all 0.3s ease; }
.sns ul li a .img { width:100%; overflow: hidden; }
.sns ul li a .img img { transform:scale(1); transition: all 0.3s ease; }
.sns ul li a:hover { opacity:0.6; }
.sns ul li a:hover .img img { transform:scale(1.1); }
@media all and (max-width:1000px) {
.sns ul { margin-bottom:20px; }
}
@media all and (max-width:760px) {
.sns ul li { width:calc(50% - 20px); }
}
/***********************************************************************************************
공통 사용
***********************************************************************************************/
.title1 { font-family:var(--font-title); text-align: center; font-size:40px; font-weight: 500; margin-bottom: 45px; }
.title2 { font-family:var(--font-title); text-align: center; font-size:40px; font-weight: 500; line-height:1.4;}
.description { text-align: center; margin: 10px 0 60px; font-size:20px; font-weight:300; line-height:1.5; word-break:keep-all; }
.mv-list { }
.mv-list ul { margin:0 -5px 30px; }
.mv-list ul:after { content: ''; display: block; clear: both; }
.mv-list ul li { float:left; width:25%; padding: 0 5px 20px; }
.mv-list ul li a { display: block; }
.mv-list ul li a .img { position: relative; text-align:center;}
.mv-list ul li a .img img { width:100%; height: 100%; object-fit: cover; vertical-align:middle; }
.mv-list ul li a .img:before { content: ''; position: absolute; left: 50%; top:50%; background: url(../img/common/ico_playu.png) no-repeat 0 0 ; width:63px; height: 63px; margin:-32px 0 0 -32px; transition:all 0.3s ease; opacity:0.6; }
.mv-list ul li a .info { padding:15px; border: 1px solid var(--color-line); border-top:0; }
.mv-list ul li a .info .tit { font-size:14px; line-height: 22px; height:44px; overflow: hidden; margin-bottom:8px; transition:all 0.3s ease; }
.mv-list ul li a .info .date { font-size:12px; color: #888; }
.mv-list ul li a:hover .info .tit { color:var(--color-point-lv1); }
.mv-list ul li a:hover .img:before { opacity:1; }
.bill-list { }
.bill-list ul { margin-bottom: 30px;}
.bill-list ul:after { content: ''; display: block; clear: both; }
.bill-list ul { margin:0 -5px; }
.bill-list ul li { float:left; width:25%; padding: 0 5px 20px; }
.bill-list ul li a { display: block; }
.bill-list ul li a .img { position: relative; border: 1px solid var(--color-line); border-bottom:0; transition:all 0.3s ease; padding:5px;}
.bill-list ul li a .img:before { content: ''; position: absolute; left: 50%; top:50%; width:63px; height: 63px; margin:-32px 0 0 -32px; transition:all 0.3s ease; opacity:0.6; }
.bill-list ul li a .info { padding:15px; border: 1px solid var(--color-line); transition:all 0.3s ease; }
.bill-list ul li a .info .tit { font-size:14px; line-height: 22px; height:44px; overflow: hidden; margin-bottom:8px; }
.bill-list ul li a .info .date { font-size:12px; color: #888; }
.bill-list ul li a:hover .info { border-color:#333; }
.bill-list ul li a:hover .img:before { opacity:1; }
.prd-list ul:after { display: block; content: ''; clear: both; }
.prd-list ul { margin-bottom: 30px;}
.prd-list ul li { float:left; width:25%; padding:0 5px 20px; }
.prd-list ul li a .labels { position: absolute; left: 0px; top:0px; }
.prd-list ul li a .labels span { margin-right:0px; }
.prd-list ul li a { display: block; border: 1px solid var(--color-line); position: relative; }
.prd-list ul li a .img img { width:100%; height: 100%; object-fit: cover; vertical-align:middle; }
.prd-list ul li a .info { padding:12px 10px; text-align: center; }
.prd-list ul li a .info .tit {font-size:15px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.prd-list ul li a .info .price { font-size:18px; color: var(--color-point-lv1); font-weight: 600; }
/*.sct_10 .sct_li{float:left; width:25%; padding:0 5px 20px;}*/
.prd-list2 ul:after { display: block; content: ''; clear: both; }
.prd-list2 ul { margin-bottom: 30px;}
.prd-list2 ul li { float:left; width:25%; padding:0 5px 20px; }
.prd-list2 ul li a .labels { position: absolute; left: 5px; top:-20px; }
.prd-list2 ul li a .labels span { margin-right:0px; }
.prd-list2 ul li a { display: block; background: #fff; border-radius:10px; position: relative; overflow: hidden; transition: all 0.3s ease;}
.prd-list2 ul li a .img img { width:100%; height: 100%; object-fit: cover; vertical-align:middle; }
.prd-list2 ul li a .info { padding:18px 10px; text-align: center; }
.prd-list2 ul li a .info .tit {font-size:15px; color: #333; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-bottom: 4px; }
.prd-list2 ul li a .info .price { font-size:18px; color: var(--color-point-lv1); font-weight: 600; }
.prd-list2 ul li a:hover { transform: translateY(-5px); box-shadow: 0px 10px 20px rgba(0,0,0,0.2); }
.m-gnb { display: none; position: fixed; left: 0; right:0; top:0; bottom:0; background: rgba(0,0,0,0.9); z-index:2000; padding-bottom: 50px; }
.m-gnb .btn-close { position: absolute; right:20px; top:20px; width:45px; height: 45px; border: 1px solid rgba(255,255,255,0.6); background: url(../img/common/ico_modal_close.png) no-repeat 50% 50%; background-size:20px auto; z-index:2; }
.m-gnb .langs { position: absolute; right:0; left:0; bottom:25px; text-align: center; }
.m-gnb .langs a { display: inline-block; vertical-align: middle; font-size:13px; color: rgba(255,255,255,1); margin:0 10px;}
.m-gnb .scroll { overflow: auto; text-align: center; position: absolute; left: 0; right:0; bottom:0; top:0; display: flex; justify-content: center; align-items: center; padding:20px 0;}
.m-gnb .scroll > ul > li:not(:last-child) { margin-bottom:10px; padding-bottom:10px; border-bottom:1px solid rgba(255,255,255,0.6); }
.m-gnb .dep2 { display: none; padding-top:10px;}
.m-gnb .dep3 { display: none;}
.m-gnb .btn-dep1 { display: block; font-size:20px;color: #fff; }
.m-gnb .btn-dep2 { display: block; font-size:14px;color: var(--color-bg-lv1); line-height: 1.5; }
.m-gnb .btn-dep3 { display: block; font-size:12px;color: var(--color-point-lv1); line-height: 1.5; }
#s-header .btn-m { display:none; position: absolute; right:10px; top:0; height:50px; width:40px; background:url(../img/common/ico_m.png) no-repeat 50% 50%; background-size:auto 16px; }
#s-header .btn-m i { font-size:36px; color:var(--color-dark); }
.sub-visual { padding:35px 0; text-align: center; /*background: url(../data/hih_images/last/bg_head.png) no-repeat 50% 50%;*/ background:var(--color-dark) no-repeat 50% 50% / cover; margin-bottom: 40px; }
.sub-visual .tit { font-family:var(--font-title); font-size:48px; font-weight: 500; color: #fff; }
.tabs { text-align: center; margin-bottom: 70px; }
.tabs:after { display: block; content: ''; clear: both; }
.tabs a { display: inline-block; vertical-align: middle; font-size:30px; color: #a8a8a8; font-weight: 200; position: relative; }
.tabs a { margin:0 35px; position: relative; }
.tabs a + a:after { content: ''; position: absolute;left: -35px; top:5px; bottom:5px; width:1px; background: var(--color-line); }
.tabs a.active { color: var(--color-point-lv3); font-weight: 700; }
.tabs a.active span { position: relative; z-index:2;}
.tabs a.active:before { content: ''; position: absolute; left: -3px; right:-3px; bottom:4px; height: 12px;
background-image: linear-gradient(to right, rgba(197,228,251,0.5) 0%, rgba(197,228,251,0.5) 100%); }
.tabs2 { text-align: center; margin-bottom: 70px; border-top:1px solid var(--color-line); border-bottom: 1px solid var(--color-line); margin-bottom: 70px; }
.tabs2:after { display: block; content: ''; clear: both; }
.tabs2 ul { font-size:0; }
.tabs2 ul li { display: inline-block; vertical-align: middle; }
.tabs2 ul li a { display: block; font-size:16px; color: #777; font-weight: 300; position: relative; padding:0 40px; line-height: 58px; height: 60px; position: relative; }
.tabs2 ul li + li { border-left: 1px solid var(--color-line); }
.tabs2 ul li a.active { background: var(--color-point-lv1); color: #fff;font-weight: 600;}
.tabs2 ul li a.active:before { content: ''; background:url(../img/common/bu_shop_tab.png) no-repeat 50% 100%; width:18px; height: 9px; position: absolute;left: 50%; margin-left: -9px; bottom:-1px; }
.bj { padding-bottom: 100px;}
.bj ul { display:flex; flex-direction:row; flex-wrap:wrap; justify-content:center; align-content:flex-start; align-items:flex-start; }
.bj ul li { width:50%; padding-bottom: 100px; }
.bj ul li .tb { /*display: table;*/ width:100%; display:block; overflow:hidden;}
.bj ul li .tb .td { /*display: table-cell;*/ vertical-align: top; float:left;}
.bj ul li .tb .td:nth-child(1) { width:40%; }
.bj ul li .tb .td:nth-child(2) { width:60%; padding:0 20px; }
.bj ul li .tb .td strong { display: block; font-size:18px; color: #333; font-weight: 700;padding-bottom: 10px; position: relative; margin-bottom: 30px; }
.bj ul li .tb .td strong:before { content: ''; position: absolute;left: 0; bottom:0; width:48px; height: 1px; background: #333; }
.bj ul li .tb .td b { display: block; font-size:36px; color: #333; font-weight: 400; line-height: 1.3; margin-bottom: 15px; }
.bj ul li .tb .td p { font-size:18px; color: #555; line-height: 1.6; word-break:keep-all; }
.bj ul li .tb .td p em { color: var(--color-point-lv1); font-weight: 600; }
@media all and (max-width:1200px) {
.bj ul { align-content:center; align-items:center; }
.bj ul li { width:100%; padding-bottom: 40px; }
.bj ul li .tb .td { vertical-align: middle; }
.bj ul li .tb .td:nth-child(1) { width:30%; }
.bj ul li .tb .td:nth-child(2) { width:70%; padding:0 10px 0 20px; }
.bj ul li .tb .td strong { margin-bottom: 10px; font-size:13px; }
.bj ul li .tb .td strong:before { width:34px; }
.bj ul li .tb .td b { font-size:20px; }
.bj ul li .tb .td p { font-size:14px; }
}
.pagenate { text-align: center; margin:50px 0 120px; }
.pagenate a { display: inline-block; vertical-align: middle; width:30px; height: 30px; border-radius:100%; border: 1px solid transparent; text-align: center; line-height: 28px; font-size:15px; color: #888; }
.pagenate a.active { color: #333; font-weight: 700; border-color:var(--color-point-lv1); }
.pagenate a.first { background:url(../img/common/ico_page_first.png) no-repeat 50% 50%; }
.pagenate a.prev { background:url(../img/common/ico_page_prev.png) no-repeat 50% 50%; }
.pagenate a.next { background:url(../img/common/ico_page_next.png) no-repeat 50% 50%; }
.pagenate a.last { background:url(../img/common/ico_page_last.png) no-repeat 50% 50%; }
.sub-visual-shop { background:var(--color-dark) url(../data/hih_images/last/bg_shop.png) no-repeat 50% 50%;}
.sub-visual-shop .inner { overflow: hidden; }
.sub-visual-shop .inner .fl { display:none; }
/*.sub-visual-shop .inner .fr { width:50%; text-align: left; }*/
.sub-visual-shop .inner div { padding:35px 0; text-align:center; color: #fff; }
.sub-visual-shop .inner strong { font-family:var(--font-title); display: block; font-size:48px; font-weight: 500; margin-bottom: 15px; }
.sub-visual-shop .inner p { font-size:18px; line-height: 1.4; font-weight:500; }
.sub-visual { padding:35px 0; text-align: center; /*background: url(../data/hih_images/last/bg_head.png) no-repeat 50% 50%;*/ background:var(--color-dark) no-repeat 50% 50% / cover; margin-bottom: 40px; }
.sub-visual .tit { font-family:var(--font-title); font-size:48px; font-weight: 500; color: #fff; }
.list-head { margin-bottom: 20px; position: relative; }
.list-head .result { font-size:13px; color: #777; }
.list-head .result strong { font-size:20px; color: #333; font-weight: 600; }
.list-head .sort { position: absolute; right:0; bottom:0; }
.list-head .sort a { display: inline-block; vertical-align: middle; padding:0 20px; height: 30px; border-radius:30px; font-size:15px; color: #777; margin-left: 3px; line-height: 30px; }
.list-head .sort a.active { background: #333; color: #fff; }
.gray-box { padding:50px 0; background:var(--color-light); }
.bill > .inner { max-width:1200px; }
.bill .sign { font-size:50px; font-family:'Cafe24Supermagic'; font-weight:700; }
.bill .tb { display: table; width:100%; }
.bill .tb .td { display: table-cell; vertical-align: bottom; }
.bill .tb .td:nth-child(1) { width:50%; height:auto; }
.bill .tb .td:nth-child(2) { padding-left: 50px; }
.bill dl { font-size:17px; line-height: 1.5; display:flex; }
.bill dl dt { color: #333; flex:none; width:170px; margin-bottom:10px; }
.bill dl dt i { color: #aaa; }
.bill dl dd { color: #333; margin-bottom:10px; font-weight:300; }
.bill dl:last-child dt,
.bill dl:last-child dd {margin-bottom:0;}
.bill .tb .td .t1 { padding-top:20px; margin-top:20px; border-top:1px solid var(--color-line); font-size:18px; color: #777; line-height: 1.4; }
.bill .tb .td .t2 { font-size:14px; color: var(--color-point-lv1); font-weight: 500; padding-top:5px; }
.bill .slider { position: relative;}
.bill .slider ul { width:600px; height: 360px;}
.bill .slider ul li { width:600px; height: 360px; }
.bill .slider .bx-prev { position: absolute; left: 0; top:50%; width:45px; height: 60px; margin-top:-30px; background:rgba(0,0,0,0.6) url(../img/common/slider_prev.png) no-repeat 50% 50%; text-indent: -9999px; }
.bill .slider .bx-next { position: absolute; right: 0; top:50%; width:45px; height: 60px; margin-top:-30px; background:rgba(0,0,0,0.6) url(../img/common/slider_next.png) no-repeat 50% 50%; text-indent: -9999px; }
.sub-box h1, .sub-box h2,
.sub-box h3, .sub-box h4,
.sub-box h5, .sub-box h6 { font-family:var(--font-title); word-break:keep-all; position: relative; }
.sub-box h2 { font-size:1.25em; font-weight:700; letter-spacing: 0.01em; text-transform:uppercase; margin-bottom:1rem; }
.sub-box h3 { font-size:2.5em; font-weight:800; line-height:1.3; letter-spacing:-0.04em; }
.sub-box h4 { font-size:1.75em; font-weight:500; line-height:1.3; letter-spacing:-0.01em; margin-bottom:1rem; }
.sub-box h5 { font-size:1.25em; font-weight:500; line-height:1.3; letter-spacing:-0.01em; margin-bottom:0.5rem; }
.sub-box hgroup { margin-bottom:var(--mg-sec-md); position:relative; text-align:center; }
.sub-box p,
.sub-box dt, .sub-box dd,
.sub-box li { word-break:keep-all; }
.sub-box dt { font-family:var(--font-title); }
.sub-box mark { background-image: linear-gradient(120deg, var(--color-bg-lv1) 0%, var(--color-bg-lv3) 100%);
background-repeat: no-repeat; background-size: 100% 30%; background-position: 0 90%; padding:0 0.1em; }
.sub-box hr { display: block; margin: 1rem 0; border:1px solid #eee; }
.sub-box blockquote { margin:0; }
.sub-box blockquote p { background:#fff; border-radius:1rem; overflow:hidden; padding:1rem; margin-bottom:1rem; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.025); }
.sub-box blockquote p::before { content: '\201C'; }
.sub-box blockquote p::after { content: '\201D'; }
.sub-box blockquote cite { display:inline-block; font-size: 1.125em; font-weight: 700; margin-bottom:1rem; }
.sub-box.half { display:flex; justify-content:center; align-items:center; }
.sub-box.threecol { display:flex; justify-content:space-between; align-items:flex-start; }
.sub-box.half .tit { flex:1; padding-right:50px; }
.sub-box.half .txt { flex:1; }
.sub-box.threecol .tit { width:25%; padding-right:50px; }
.sub-box.threecol .txt { width:75%; }
.sub-box .tit .img { text-align:center; }
.sub-box .tit .img img { width:100%; max-width:400px; }
.sub-box.level1 { background:var(--color-bg-lv1); padding:50px; }
.sub-box.level2 { background:var(--color-bg-lv2); padding:50px; }
.sub-box.level3 { background:var(--color-bg-lv3); padding:50px; }
.sub-box.level4 { background:var(--color-bg-lv4); padding:50px; }
.sub-box .img_circle img { border-radius:50%; overflow:hidden; background:var(--color-light); }
.sub-box.threecol .tit .imgs.img_circle { max-width:130px; }
.sub-box .p1 { font-size:24px; color: var(--color-dark); font-weight:700; line-height: 1.5; margin-bottom:20px; word-break:keep-all; }
.sub-box .p2 { font-size:18px; color: #333; font-weight:300; line-height: 1.7; margin-bottom:10px; word-break:keep-all; }
.sub-box .p2 strong { font-weight:500; }
.sub-box .p2 em { color: var(--color-dark); }
.sub-box .p3 { font-size:20px; color: #333; font-weight:600; line-height: 1.5; margin-bottom:10px; word-break:keep-all; }
.sub-box .p3 em { color: var(--color-dark); }
.sub-box .p1.level1,
.sub-box .p2.level1 em,
.sub-box .p3.level1 em { color: var(--color-point-lv1); }
.sub-box .p1.level2,
.sub-box .p2.level2 em,
.sub-box .p3.level2 em { color: var(--color-point-lv2); }
.sub-box .p1.level3,
.sub-box .p2.level3 em,
.sub-box .p3.level3 em { color: var(--color-point-lv3); }
.sub-box .p1.level4,
.sub-box .p2.level4 em,
.sub-box .p3.level4 em { color: var(--color-point-lv4); }
.sub-box .keyword { color: var(--color-point-lv1); font-weight:400; font-size:16px; }
.sub-box .desc { margin-top:1.5rem; font-size:1.125em; text-align:center; }
.sub-box .cate { font-size:14px; font-weight:600; font-family:var(--font-title); text-transform: uppercase; margin-bottom:0.25rem; color: var(--color-point-lv1); }
.sub-box .check { margin-bottom:10px; }
.sub-box .check > li { font-size:18px; color: #333; font-weight:400; line-height: 1.7; margin-left:17px; margin-bottom:5px; word-break:keep-all; }
.sub-box .check > li:before { content:'\2714'; color:#aaa; margin-left:-17px; padding-right:5px; }
.sub-box .check > li em { color: var(--color-dark); }
.sub-box .check.level1 > li:before,
.sub-box .check.level1 > li em { color: var(--color-point-lv1); }
.sub-box .check.level2 > li:before,
.sub-box .check.level2 > li em { color: var(--color-point-lv2); }
.sub-box .check.level3 > li:before,
.sub-box .check.level3 > li em { color: var(--color-point-lv3); }
.sub-box .check.level4 > li:before,
.sub-box .check.level4 > li em { color: var(--color-point-lv4); }
.sub-box .step { display:flex; flex-wrap:wrap; justify-content:space-between; align-items;flex-start; }
.sub-box .step > li { position:relative; width:calc(25% - 10px); margin:5px; box-sizing:border-box; border:2px solid #f0e3da; padding:15px;
font-size:18px; font-weight:400; color: var(--color-dark); line-height: 1.5; margin-bottom:15px; word-break:keep-all; }
.sub-box .step > li:before { position: absolute; right:4px; bottom:-12px; font-family:'Cafe24Supermagic'; font-weight:700; color:#fff; font-size:40px; text-align:right; z-index:1; }
.sub-box .step > li:nth-child(1):before { content:'1'; }
.sub-box .step > li:nth-child(2):before { content:'2'; }
.sub-box .step > li:nth-child(3):before { content:'3'; }
.sub-box .step > li:nth-child(4):before { content:'4'; }
.sub-box .step > li:after { content:''; position: absolute; right: 0; bottom:0; margin: 0 auto; width: 0; height: 0; border-bottom: 50px solid #f0e3da; border-left: 50px solid transparent; }
.sub-box .step > li strong { font-weight:600; color:var(--color-point-lv1); }
.sub-box .step > li > ul { margin-top:20px; }
.sub-box .step > li > ul > li { padding-left:10px; font-size:18px; color: #333; font-weight:300; line-height: 1.7; word-break:keep-all; margin-bottom:10px; }
.sub-box .step > li > ul > li:before { content:'- '; color:var(--color-dark); margin-left:-10px; }
.sub-box .list_ul { margin-bottom:5px; }
.sub-box .list_ul li { position:relative; text-align:left; word-break:keep-all; margin-left:0.5em; font-size:16px; color: #333; font-weight:400; line-height: 1.7; margin-bottom:5px; }
.sub-box .list_ul li:before { content:''; position:absolute; left:-0.5em; top:0.7em; width:3px; height:3px; background:#aaa; }
.sub-box .list_ul .point { color:var(--color-point-lv3); }
@media all and (max-width:1200px) {
.sub-box.half, .sub-box.threecol { display:block; }
.sub-box.half .txt, .sub-box.half .img,
.sub-box.threecol .tit, .sub-box.threecol .txt {width:100%; }
.sub-box.half .img,
.sub-box.threecol .tit { padding:0; padding-bottom:1rem; }
.sub-box.half .txt { padding-left:0; }
.sub-box.half .text-left { text-align:center !important; }
.sub-box .p1 { font-size:20px; line-height: 1.5; margin-bottom:5px; }
.sub-box .p2 { font-size:1em; line-height: 1.5; margin-bottom:5px; }
.sub-box .p3 { font-size:16px; line-height: 1.5; margin-bottom:5px; }
.sub-box .keyword { font-size:13px; }
.sub-box .check > li { font-size:1em; line-height: 1.5; margin-bottom:5px; }
.sub-box .step > li { width:calc(50% - 10px); font-size:16px; }
.sub-box .step > li > ul > li { font-size:1em; }
.sub-box .list_ul li { font-size:1em; margin-bottom:3px; }
.sub-box.level1,
.sub-box.level2,
.sub-box.level3,
.sub-box.level4 { padding:15px; }
}
@media all and (max-width:760px) {
.sub-box .step {display:block;}
.sub-box .step > li { width:100%; margin:5px 0; }
}
.price-box { display:flex; flex-direction:column; }
.price-box h4 { font-size:32px; text-align:center; }
.price-box small { color:#aaa; }
.price-box .price { font-size:18px; text-align:center; margin-bottom:0.5rem; line-height:1.4; }
.price-box .price strong { font-family:var(--font-title); font-size:32px; font-weight:600; }
.price-box .list_ul { min-height:4.5em; }
.price-box .btn-box { display:flex; gap: var(--gutter-mo); margin-top:auto; padding-top:0.5rem; }
.price-box .btn-box div { flex:1; }
.price-box .btn-box a { width:100%; font-size:20px; height:50px; line-height:50px; }
.price-box.level1:hover { border-color:var(--color-point-lv1); }
.price-box.level1 h4,
.price-box.level1 em { color:var(--color-point-lv1); }
.price-box.level1 .btn_rect.color { border-color:var(--color-point-lv1); background:var(--color-point-lv1); color:#fff; }
.price-box.level2:hover { border-color:var(--color-point-lv2); }
.price-box.level2 h4,
.price-box.level2 em { color:var(--color-point-lv2); }
.price-box.level2 .btn_rect.color { border-color:var(--color-point-lv2); background:var(--color-point-lv2); color:#fff; }
.price-box.level3:hover { border-color:var(--color-point-lv3); }
.price-box.level3 h4,
.price-box.level3 em { color:var(--color-point-lv3); }
.price-box.level3 .btn_rect.color { border-color:var(--color-point-lv3); background:var(--color-point-lv3); color:#fff; }
.price-box.level4:hover { border-color:var(--color-point-lv4); }
.price-box.level4 h4,
.price-box.level4 em { color:var(--color-point-lv4); }
.price-box.level4 .btn_rect.color { border-color:var(--color-point-lv4); background:var(--color-point-lv4); color:#fff; }
.price-box .btn_rect.color:hover { border-color:var(--color-dark); background:var(--color-dark); }
@media all and (max-width:1600px) {
.price-box .btn-box { flex-direction:column; }
}
@media all and (max-width:1200px) {
.price-box { margin-bottom:var(--mg-sec-mo); }
.price-box .btn-box { flex-direction:row; }
.price-box .list_ul,
.price-box .btn-box { min-height:auto; }
.price-box .list_ul li { font-size:1em; }
.price-box .btn-box a { font-size: 1.25em; height: 37px; line-height: 37px; }
}
.step-box { text-align: center; display: flex; }
.step-box .article { display: flex; width:300px; height: 300px; align-items: center; border-radius:100%; background: var(--color-point-lv1); margin:0 10px; position: relative; }
.step-box .article + .article:before { content: '+'; position: absolute;left: 0; top:50%; width:58px; height: 58px; margin: -29px 0 0 -39px; background:#fff; border-radius:50%; line-height:56px; font-size:3rem; font-weight:100; }
.step-box .article > div { flex: 1; }
.step-box .article strong { display: block; font-size:40px; font-weight: 700; color: #fff; font-style: italic; line-height: 1; }
.step-box .article div div { font-size:29px; line-height: 1.2; color: #fff; margin:10px 0; }
.step-box .article p { font-size:14px; line-height: 1.5; color:#fff; }
.step-box .article:nth-child(2) { background: #b3d1ff; }
.step-box .article:nth-child(2) strong { color: #fff; }
.step-box .article:nth-child(2) div div { color: #fff; }
.step-box .article:nth-child(2) p { color: #fff; }
.step-box .article:nth-child(3) { background: #a9e2d7; }
.step-box .article:nth-child(3) strong { color: #fff; }
.step-box .article:nth-child(3) div div { color: #fff; }
.step-box .article:nth-child(3) p { color: #fff; }
@media all and (max-width:1000px) {
.step-box .article { width:240px; height: 240px; }
.step-box .article strong { font-size:30px; }
.step-box .article div div { font-size:25px; }
.step-box .article p { font-size:12px; }
.step-box .article + .article:before { left:50%; top:0; margin:-28px 0 0 -28px; }
}
#map1 { width:100%; height: 400px; border: 1px solid var(--color-line); margin-bottom: 100px;}
.table,
.test_answer { width:100%; border-top: 2px solid #333; line-height: 1.3; word-break: keep-all; box-sizing:border-box; font-size:16px; }
.table-wrap { overflow-x: auto }
.table-wrap .table { min-width:560px; }
.table-scroll { display:none; }
.test_answer.answer2 th { padding:10px 15px; width:70%; }
.test_answer.answer2 td { padding:0; width:calc(30% / 2); text-align:center; border-left: 1px dashed var(--color-line); }
.test_answer.answer5 th { padding:10px 15px; width:50%; }
.test_answer.answer5 td { padding:0; width:calc(50% / 5); text-align:center; border-left: 1px dashed var(--color-line); }
.table th { padding:10px 15px; line-height:1.5; border-left: 1px dashed var(--color-line); }
.table td { padding:10px 15px; line-height:1.5; border-left: 1px dashed var(--color-line); font-weight: 300; }
.table th:nth-child(1) { border-left:none; }
.table .text-left { text-align:left; }
.table .text-right { text-align:right; }
.table.text-center,
.table.text-center th,
.table .text-center { text-align:center; }
.test_answer thead,
.table thead { background-color: var(--color-light); color: #333; }
.test_answer thead th,
.test_answer thead td,
.table thead th,
.table thead td { font-weight: 600; border-left:1px solid #fff; }
.test_answer thead tr,
.table thead tr { border-bottom: 1px solid #aaa; }
.test_answer tbody,
.table tbody { border-bottom: 1px solid #aaa; }
.test_answer tbody tr,
.table tbody tr { border-bottom: 1px solid var(--color-line); }
.test_answer tbody tr:last-child,
.table tbody tr:last-child { border-bottom:none; }
.test_answer tbody th { text-align:left; font-weight:300; }
.table tbody th { text-align:left; font-weight:500; }
.test_answer tbody td small { font-weight:300; letter-spacing:-1px; }
.table tbody .caption { font-weight:500; background-color: #fafafa; }
.table tbody em { color: var(--color-point-lv1); }
.table.level { border-top:none; }
.table.level th,
.table.level td { border-left: 1px solid var(--color-line); }
.table.level th:nth-child(1) { border-left:none; }
.table.level .lined { border-left: 2px solid var(--color-line); }
.table.level tbody { border-bottom: 1px solid var(--color-line); }
.table.level tbody tr { border-bottom: 1px dashed var(--color-line); }
.table.level tbody tr:last-child { border-bottom:none; }
.table.level thead th { border-left:2px solid #fff; border-right:2px solid #fff; font-size:1.5em; }
.table.level thead .level1 { background:var(--color-bg-lv1); }
.table.level thead th.level1,
.table.level .level1 em { color:var(--color-point-lv1); }
.table.level thead th.level1 { border-top:1px solid var(--color-point-lv1); border-bottom:1px solid var(--color-point-lv1); }
.table.level thead .level2 { background:var(--color-bg-lv2); }
.table.level thead th.level2,
.table.level .level2 em { color:var(--color-point-lv2); }
.table.level thead th.level2 { border-top:1px solid var(--color-point-lv2); border-bottom:1px solid var(--color-point-lv2); }
.table.level thead .level3 { background:var(--color-bg-lv3); }
.table.level thead th.level3,
.table.level .level3 em{ color:var(--color-point-lv3); }
.table.level thead th.level3 { border-top:1px solid var(--color-point-lv3); border-bottom:1px solid var(--color-point-lv3); }
.table.level thead .level4 { background:var(--color-bg-lv4); }
.table.level thead th.level4,
.table.level .level4 em{ color:var(--color-point-lv4); }
.table.level thead th.level4 { border-top:1px solid var(--color-point-lv4); border-bottom:1px solid var(--color-point-lv4); }
.table.table_mypage { font-size:15px; }
@media all and (max-width:1200px) {
.table th { padding:10px; }
.table thead th, .table thead td { font-size:14px; }
.table tbody th, .table tbody td { font-size:13px; }
.table.level thead th { font-size:1.25em; }
}
@media only screen and (max-width: 760px), (min-device-width: 768px) and (max-device-width: 1024px) {
.responsive_table th, .responsive_table td { display: block; }
.responsive_table thead tr { position: absolute; top: -9999px; left: -9999px; }
.table.responsive_table tbody tr { border-bottom:1px solid #aaa; }
.table.responsive_table tbody td { border-left:none; position:relative; text-align:left !important; padding-left:50%; }
.table.responsive_table tbody td::before { content: attr(data-label); position:absolute; top:0; left:0; height:100%; background-color: #f8f8f8; font-weight:500; width:calc(50% - 15px); }
.table.responsive_table tbody td:not(:last-child) { border-bottom:1px dashed var(--color-line); }
.table.table_mypage.responsive_table tbody td { padding:0.3em 1em; padding-left:35%; }
.table.table_mypage.responsive_table tbody td::before { padding:0.3em 1em; width:calc(35% - 1em); }
.test_answer tbody th {width:inherit; clear:both; background-color: var(--color-light); font-size:14px; padding:10px; }
.test_answer.answer2 th,
.test_answer.answer5 th {width:100%;}
.test_answer.answer2 tbody td {width:50%; height:80px; float:left; line-height:14px; }
.test_answer.answer5 tbody td {width:20%; height:80px; float:left; line-height:14px; }
.test_answer tbody td:nth-child(2) { border-left:none; }
.test_answer tbody td small { font-size:11px; }
}
@media all and (max-width:600px) {
.table-scroll { display:block; margin-bottom:10px; color:var(--color-point-lv1); }
}
.test_answer label { position: relative; display: inline-block; width:100%; height:100%; padding:10px 5px; overflow: hidden; cursor: pointer; }
.test_answer label input[type="radio"] { position: absolute; top: 0; left: -9999em; }
.test_answer label span { display: block; position:relative; width: 34px; height: 34px; margin: 0 auto; border: 1px solid transparent; border-radius: 50%; line-height: 32px; }
.test_answer label::focus { background:transparent; }
.test_answer label input[type="radio"]:checked + span { border-color:var(--color-point-lv1); color:var(--color-point-lv1); font-weight:700; }
/* form validation 후에만 :invalid 스타일 적용 */
form.was-validated .test_answer label input[type="radio"]:invalid + span { color:#eb4d4b; }
form.was-validated .test_answer label input[type="radio"]:invalid + span:before { content:'\2714 check'; position:absolute; display:inline-block; font-size:12px; left:-50%; top:-17px; transform:translateX(25%); }
@media all and (max-width:1200px) {
#s-wrap { padding-top:50px; }
#s-header { height: 50px; }
#s-header .inner { height: 50px; }
#s-header .btn-m { display:flex; align-items:center; justify-content:center; }
#s-header .menu { display: none; }
#s-gnb { display: none; }
.mb100 { margin-bottom: 70px !important;}
.mb200 { margin-bottom: 140px !important;}
.title1 { font-size:28px; margin-bottom: 25px;}
.title2 { font-size:28px; }
.description { font-size:15px; margin-bottom: 25px; }
.test, .category, .contact, .intro, .sns { padding: 50px 0; }
.mv-list ul { margin: 0 -5px 10px; }
.mv-list ul li { width:50%; }
.mv-list ul li a .info { padding:10px; }
.mv-list ul li a .info .tit { font-size:13px; line-height: 18px; height:36px; }
.mv-list ul li a .info .date { font-size:11px; }
.bill-list ul li { width:50%; }
.bill-list ul li a .info { padding:10px; }
.bill-list ul li a .info .tit { font-size:13px; line-height: 18px; height:36px; }
.bill-list ul li a .info .date { font-size:11px; }
.enter { margin-bottom: 70px; }
.enter .inner .fl { width:100%; text-align: center; margin:-70px auto 20px; padding:0 5%; box-shadow:none; }
.enter .inner .fr { float:none !important; text-align: center;width:auto; }
.enter .inner .fr strong { font-size:25px; }
.enter .inner .fr b { font-size:20px; margin-bottom: 10px; }
.enter .inner .fr p { font-size:13px; }
.prd-list ul {margin-bottom:10px; }
.prd-list ul li { width:50%; }
.prd-list ul li a .labels img { max-height:30px; max-width:30px; }
.prd-list ul li a .info { padding:12px 10px; }
.prd-list ul li a .info .tit { font-size:13px; }
.prd-list ul li a .info .price { font-size:12px; }
/* 기존스킨 그대로에서 반응형 추가 JJR 2020-03-26 */
/*.sct_10 .sct_li {width:50%;}*/
.prd-list2 ul li { width:50%; }
.prd-list2 ul li a .labels img { max-height:30px; max-width:30px; }
.prd-list2 ul li a .info { padding:12px 10px; }
.prd-list2 ul li a .info .tit { font-size:13px; }
.prd-list2 ul li a .info .price { font-size:12px; }
#s-footer { padding:20px 0 90px;;}
#s-footer .addr { font-size:10px; }
.sub-visual { padding:20px 0; margin-bottom: 20px; }
.sub-visual-shop .inner img,
.sub-visual img { height: 32px; }
.sub-visual-shop .inner strong,
.sub-visual .tit {font-size:32px; }
.tabs { margin-bottom: 35px;}
.tabs a { font-size:15px; margin:0 0.5em; }
.tabs a + a:after { left: -0.6em; }
.tabs a.active:before { height: 6px; bottom:0;}
.tabs2 ul li a { font-size:12px; padding:0 5px; height: 40px; line-height: 38px; }
.sub-visual-shop { background:url(../data/hih_images/last/bg_shop_mo.png) no-repeat 50% 50%; background-size:cover; }
/*
.sub-visual-shop .inner .fl { width:0; }
.sub-visual-shop .inner .fr { width:100%; float:none; text-align: center; padding:50px 0 0 0;;}
*/
.sub-visual-shop .inner div { padding:20px 0; }
.sub-visual-shop .inner strong { margin-bottom: 5px; }
.sub-visual-shop .inner p { font-size:12px; }
.list-head .sort { position: static; text-align: right; padding-bottom:10px; }
.list-head .sort a { height: 25px; line-height: 25px; padding:0 10px; font-size:11px; margin: 0; }
.gray-box { padding:30px 0;}
.bill .sign { font-size:32px;}
.bill .tb { display: block; }
.bill .tb .td { display: block !important; width:auto !important; margin-bottom: 15px; padding: 0 !important;}
.bill .slider ul li { text-align: center; }
.bill .slider ul,
.bill .slider ul li { width:auto; height: auto; }
.bill .tb .td dl { font-size:14px; }
.bill .tb .td dl dt { width:90px; }
.bill .tb .td .t1 { font-size:14px; }
br.pc {display:none;}
}
@media all and (max-width:760px) {
br.mo {display:inline;}
}
/* === board === */
.flex-wrap.board { margin:30px 0; }
.flex-wrap.board > li { padding:30px; }
@media all and (max-width:1200px) {
.flex-wrap.board.col3 > .flex-box { width: calc( (100% - 15px) / 2); }
}
@media all and (max-width:760px) {
.flex-wrap.board.col3 > .flex-box { width:100%; padding:15px; }
}
/*
.flex-wrap.board { margin: 15px 0 0; padding: 0 15px; display:flex; flex-wrap:wrap; gap: 15px; }
.flex-wrap.board > li { padding: 15px; }
.flex-wrap.board.col4 > li { width: calc( (100% - 45px) / 4); }
@media all and (max-width:969px) {
.flex-wrap.board.col4 > li { width: calc( (100% - 15px) / 2); }
}
@media all and (max-width:520px) {
.flex-wrap.board.col4 { gap:0; margin:0; }
.flex-wrap.board.col4 > li { width:100%; padding:15px 0; border:none; }
.flex-wrap.board.col4 > li:not(:last-child) { border-bottom:1px solid var(--color-line); }
}
*/
/* review */
.review-box ul li { border:1px solid var(--color-line); font-size:16px; border-radius: 3px; }
.review-box ul li:hover { background:#fafafa; border-color:#ccc; }
.review-box ul li .head { display:flex; margin-bottom:1.5rem; }
.review-box ul li .head .txt { width:100%; line-height:1.5; }
.review-box ul li .head .txt .tit { font-weight:600; font-size:20px; width:100%; display:flex; align-items:center; }
.review-box ul li .head .txt .tit a { overflow: hidden; word-break: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.review-box ul li .head .txt .tit a:hover { color:#000; }
.review-box ul li .head .txt .tit i { color:var(--color-point-lv1); padding-left:0.1em; }
.review-box ul li p { width:100%; overflow: hidden; word-break: break-word; font-size:16px; line-height:1.5;
display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; margin-bottom: 0; }
.review-box ul li .head small { color:#aaa; font-size:14px; }
.review-box ul li .head .bo_cate_link { font-size:14px !important; font-weight:500; }
@media all and (max-width:1200px) {
.review-box ul li { font-size:1em; }
.review-box ul li .head { margin-bottom:0.5rem; }
.review-box ul li .head .imgs { margin-right:15px; }
.review-box ul li .head .txt .tit { font-size:18px; }
.review-box ul li p { font-size:1em; -webkit-line-clamp: 3; }
.review-box ul li .head small { font-size:13px; }
}
@media all and (max-width:760px) {
.review-box ul li:hover { background:transparent; }
.review-box ul li .head .txt .tit { display:block; }
.review-box ul li .head .txt .tit a { display:inline; }
.review-box ul li p { -webkit-line-clamp: 2; }
}
.cmt_btn { color:var(--color-point-lv1) !important; }
.cmt_btn:before { background:var(--color-point-lv1) !important; }
.bo_cate_link,
.bo_v_cate { color:var(--color-point-lv1) !important; }
#sit_btn_buy { width:100% !important; float:none !important; }
#smb_my_wr section hgroup { display:flex; align-items:center; margin:0 0 10px; }
#smb_my_wr section hgroup a { margin-left:auto; }
@media all and (max-width:639px) {
#sit_ov_btn { margin-bottom:20px !important; }
}
/* dhtml table */
.board_table { border-collapse: collapse; width:100%; border-top: 2px solid #333; word-break: keep-all; box-sizing:border-box; font-family:'Noto Sans KR', Sans-serif; font-size:16px; line-height: 1.5; }
.board_table th { width: 9em; }
.board_table th, .board_table td { padding:10px 15px; }
.board_table td { border-left: 1px dashed var(--color-line); font-weight: 300; }
.board_table tr { border-bottom: 1px solid #aaa; }
.board_table thead { background-color: var(--color-light); color: #333; }
.board_table thead th, .board_table thead td { font-weight: 600; text-align:center; }
.board_table tbody { border-bottom: 1px solid #aaa; }
.board_table tbody tr { border-bottom: 1px solid var(--color-line); }
.board_table tbody tr:last-child { border-bottom:none; }
.board_table tbody th { text-align:left; font-weight:500; }
.board_table tbody .caption { font-weight:500; background-color: #fafafa; text-align:center; }
.board_table tbody em { font-style:normal; color: var(--color-point-lv1); }
@media all and (max-width:1200px) {
.board_table th, .board_table td { padding:10px; }
.board_table thead th, .board_table thead td { font-size:14px; }
.board_table tbody th, .board_table tbody td { font-size:13px; }
}
.pay_div { width:100%; margin: 0 auto; padding: 0 10px 100px 10px; }
.pay_div .title { position: relative; max-width:640px; vertical-align: middle; font-family:'noto'; font-size: 32px; letter-spacing: -2px; font-weight: 500; margin:0 auto; margin-bottom:20px; }
/* .pay_div .title:before { content: ''; position: absolute; left: 0; bottom:0; height: 1px; width:100%; background: #0056a3; } */
.pay_div table { width:100%; max-width:640px; margin:0 auto; border-top:3px solid #efefef; }
.pay_div table tbody tr { border-bottom:1px solid #efefef; }
.pay_div table tbody tr th, .pay_div table tbody tr td { height: 50px; padding:8px 10px; font-family:'noto'; }
.pay_div table tbody tr th { font-family:'noto'; font-weight: 500; color: var(--color-dark); letter-spacing: -0.5px; line-height: 1.5; text-align: left; font-size: 1rem; }
.pay_div table tbody tr td span { line-height:40px; vertical-align:middle; color: #636363; }
.pay_div table tbody .price { font-size: 0.9rem; }
.pay_div table tbody .price .priceview { color:#0056a3; }
.pay_div table mark { background-color: #fff; background-image: linear-gradient(to left, rgba(126,167,226,0.75) 0%, rgba(126,167,226,0.75) 100%); background-repeat: no-repeat; background-size: 100% 0.3em; background-position: 0 88%; }
.pay_div table tfoot tr { border-top:3px solid #efefef; }
.pay_div table tfoot td { text-align:center; padding:20px 0; }
.pay_div .btn { margin:0 auto; }
.pay_div input[type=text], .pay_div input[type=tel], .pay_div input[type=email] { display: inline-block; vertical-align: middle; box-sizing: border-box; width: auto; height: 40px; margin: 0; padding: 0 15px;
-webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; border: none; border-radius: 3px; background-color: #fff;
font-family:'noto'; font-size: 0.9rem; font-weight:300; color: #444; letter-spacing: 0px; line-height: 40px; text-align: left;
box-shadow: 0 10px 30px rgba(17, 20, 39, 0.1) !important; transition: 0.2s; -webkit-transition: 0.2s; }
.pay_div input[type=text].longlong {width:36em;}
.pay_div input[type=radio] {visibility: hidden; position: absolute; }
.pay_div input[type=radio] + label { display: inline-block; margin-right:15px; padding-left: 22px; height: 40px; font-family:'noto'; line-height:40px; font-size: 0.9rem; color: var(--color-dark);
background: url('/img/radio_off.png') left 12px no-repeat; background-size:18px 18px; cursor: pointer; }
.pay_div input[type=radio]:checked + label { background: url('/img/radio_on.png') left 12px no-repeat; background-size:18px 18px; }
.pay_div input[type=checkbox] {visibility: hidden; position: absolute; }
.pay_div input[type=checkbox] + label { display: inline-block; margin-right:15px; padding-left: 22px; height: 40px; line-height:40px; font-size: 0.9rem; color: #636363;
background: url('/img/checkbox_off.png') left 12px no-repeat; background-size:18px 18px; cursor: pointer; }
.pay_div input[type=checkbox]:checked + label { background: url('/img/checkbox_on.png') left 12px no-repeat; background-size:18px 18px; }
.pay_div select { display: block; vertical-align: middle; position: relative; box-sizing: border-box; width: auto; height: 40px; margin: 0; padding: 0 25px 0 15px;
-webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; border: none; border-radius: 3px;
background-color: #fff; background-image: url("/img/icon_arrow_select.png"); background-repeat: no-repeat; background-size: 7px 4px; background-position: right 15px center;
font-family:'noto'; font-weight: 300; font-size: 0.9rem; color: #444; letter-spacing: 0px; line-height: 40px; text-align: left; box-shadow: 0 10px 30px rgba(17, 20, 39, 0.1); -webkit-transition: 0.2s; }
.pay_div .textarea { display: block; box-sizing: border-box; width: 100%; max-width: 100%; min-width: 100%; min-height: 200px; margin:0; padding: 10px 15px; overflow-y: scroll;
-webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; border: none; border-radius: 3px; background-color: #fff; height:200px;
font-family:'noto'; font-weight: 300; font-size: 0.75rem; text-align: left; box-shadow: 0 10px 30px rgba(17, 20, 39, 0.1); transition: 0.2s; -webkit-transition: 0.2s; }
.pay_div .textarea .cont { width:100%; height:100%; }
.pay_div button { border:0 none; cursor:pointer; display: inline-block; vertical-align: middle; padding:0 30px; height: 40px; font-family:'noto'; line-height: 40px; font-size: 1rem; font-weight: 500; transition: all 0.2s ease; text-align:center; margin:0 10px; }
.pay_div button::-moz-focus-inner, input[type="button"]::-moz-focus-inner, input[type="submit"]::-moz-focus-inner, input[type="reset"]::-moz-focus-inner {padding: 0;border: 0 none;}
.pay_div button[type=reset] { background:#7ea7e2; color: #fff; }
.pay_div button[type=button] { background:#0056a3; color: #fff; }
.pay_div button:hover {background: #f39fc3; text-shadow:none; font-weight: 700; box-shadow: 0 7px 14px rgba(17, 20, 39, 0.09); }
@media all and (max-width:760px) {
.pay_div table tbody tr td span {display:block; line-height: 1; vertical-align:top;}
}
.mo_only { display:none; }
@media all and (max-width:1000px) {
.pc_only { display:none !important; }
.mo_only { display:block; }
}
/* 그누_댓글_파일첨부 */
.bo_w_flie {margin:10px 0;}
.bo_w_flie .file {display:none;}
.bo_w_flie .file_wr {margin-bottom:5px;}
.bo_w_flie .file_wr li {text-align: left;}
.bo_w_flie .file_wr li:first-child {margin-bottom:15px;}
.bo_w_flie .file_wr label {background:var(--color-point-lv1);padding:5px 10px;border-radius:5px;color:#fff;margin-right:10px;margin-bottom:5px;cursor: pointer;}
.bo_w_flie .file_wr .file-name {width:100%;max-width:300px;border:0 !important;}