@charset "utf-8";
@import url("../c_css/bootstrap-icons.css");
:root {
	--sit-keycolor: #f15c2f;
	--sit-subcolor: #333;
	--sit-red: #ea4f3d;
}
@font-face {
	font-family: 'NanumGothic';
	font-style: normal;
	font-weight: 100;
	src: url(../fonts/NanumGothicLight.woff2) format('woff2'),
	url(../fonts/NanumGothicLight.woff) format('woff'),
	url(../fonts/NanumGothicLight.otf) format('opentype');
}

@font-face {
	font-family: 'NanumGothic';
	font-style: normal;
	font-weight: 300;
	src: url(../fonts/NanumGothic.woff2) format('woff2'),
	url(../fonts/NanumGothic.woff) format('woff'),
	url(../fonts/NanumGothic.otf) format('opentype');
}


@font-face {
	font-family: 'NanumGothic';
	font-style: normal;
	font-weight: 600;
	src: url(../fonts/NanumGothicBold.woff2) format('woff2'),
	url(../fonts/NanumGothicBold.woff) format('woff'),
	url(../fonts/NanumGothicBold.otf) format('opentype');
}


@font-face {
	font-family: 'NanumGothic';
	font-style: normal;
	font-weight: 700;
	src: url(../fonts/NanumGothicExtraBold.woff2) format('woff2'),
	url(../fonts/NanumGothicExtraBold.woff) format('woff'),
	url(../fonts/NanumGothicExtraBold.otf) format('opentype');
}
@font-face {
    font-family: 'GmarketSansMedium';
    src: url('../fonts/GmarketSansMedium.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}
body, html { font-family: 'NanumGothic', sans-serif;   margin: 0; padding: 0; background:#fff !important; color: #333; font-size: 14px; scrollbar-face-color: #4d4d4d; scrollbar-3dlight-color : #f4f4f4; ; scrollbar-arrow-color: #000; scrollbar-track-color: #efefef; scrollbar-darkshadow-color : #efefef; scrollbar-highlight-color : #f4f4f4; scrollbar-shadow-color : #cccccc; }
th { font-weight: 600}
::-webkit-scrollbar {
width: 8px;
height: 8px;
border: 3px solid #fff;
}
::-webkit-scrollbar-button:start:decrement, ::-webkit-scrollbar-button:end:increment {
display: block;
height: 10px;
background: #efefef
}
::-webkit-scrollbar-track {
background: #efefef;
-webkit-border-radius: 10px;
border-radius:10px;
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.2)
}
::-webkit-scrollbar-thumb {
height: 50px;
width: 50px;
background: rgba(0,0,0,.2);
-webkit-border-radius: 8px;
border-radius: 8px;
-webkit-box-shadow: inset 0 0 4px rgba(0,0,0,.1)
}
::-webkit-input-placeholder {
 color:#bfbfbf
}
:-ms-input-placeholder {
 color:#bfbfbf
}
input:-ms-input-placeholder {
 color: #bfbfbf;
}
::-moz-placeholder {
 color:#bfbfbf;
opacity:1
}
:-moz-placeholder {
 color:#bfbfbf;
opacity:1
} 
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active {
 -webkit-transition: color 9999s ease-out, background-color 9999s ease-out;
 -webkit-transition-delay: 9999s;
 -webkit-box-shadow: 0 0 0px 1000px transparent inset;
}
textarea:focus, input:focus, input:-internal-autofill-selected, select:focus {
outline: 0;
outline: none;
}
input:focus::-webkit-input-placeholder {
color:transparent;
}
input:focus:-moz-placeholder {
color:transparent;
}
input:focus::-moz-placeholder {
color:transparent;
}
input:focus:-ms-input-placeholder {
color:transparent;
}
textarea:focus::-webkit-input-placeholder {
color:transparent;
}
textarea:focus:-moz-placeholder {
color:transparent;
}
textarea:focus::-moz-placeholder {
color:transparent;
}
textarea:focus:-ms-input-placeholder {
color:transparent;
}
 input::-webkit-input-placeholder {
color: #adadad;
}
input:-moz-placeholder {
color: #adadad;
}
input::-moz-placeholder {
color: #adadad;
}
input:-ms-input-placeholder {
color: #adadad;
}
textarea::-webkit-input-placeholder {
color: #adadad;
}
textarea:-moz-placeholder {
color: #adadad;
}
textarea::-moz-placeholder {
color: #adadad;
}
textarea:-ms-input-placeholder {
color: #adadad;
}
input:-webkit-autofill-selected {
-webkit-text-fill-color: transparent !important;
}
input[type="date"]::-webkit-calendar-picker-indicator {
  color: transparent;
  background: none;
  z-index: 1;
}
input[type="date"] {padding-right: 10px;}

textarea:focus, input:focus { outline: none; }
div, table, tr, th, td, form, fieldset, textares, p { margin: 0; padding: 0; }
h1, h2, h3, h4, h5, h6, address { margin: 0; padding: 0; }
ul, ol, li, dl, dt, dd { margin: 0; padding: 0; list-style: none }
li, dl, dt, dd { margin: 0; padding: 0; list-style: none }
img, fieldset, table { border: 0; }
hr, legend, caption { display: none; }
a:link, a:active, a:visited { text-decoration: none; }
a:hover { text-decoration: underline; }
button { cursor: pointer; }
/* for layout */
select, input { color: #333; border: 1px solid #cccccc; }
textarea { color: #333; border: 1px solid #cccccc; }
.txt_left { text-align: left !important; }
.txt_right { text-align: right !important; }
.txt_center { text-align: center !important; }
.text_normal { font-weight: normal !important; }
.txt_blue { color: #0076d9 !important; }
.txt_orange { color: #F30 !important; }
.txt_green { color: #10A73D !important; }
.txt_red { color: #DA304F !important; }
.txt_grey { color: #cccccc !important; }
.txt_gray { color: #999 !important; }
.txt_yellow { color: #ffcc33 !important; }
.txt_black { color: #000000 !important; }
.txt_white { color: #ffffff !important; }
.cursor { cursor: pointer; }
.bg_gray { background: #f0f0f0 }
.font_normal { font-weight: normal}
.font_12 { font-size: 12px; }
.font_14 { font-size: 14px; }
.font_16 { font-size: 16px; }
.font_18 { font-size: 18px; }
.font_21 { font-size:21px;}
.font_26 { font-size:26px;}
.font_29 { font-size:29px;}
table.cursor th { cursor: default; }
table.cursor td { cursor: pointer; }
.wid20 { width: 20px; }
.wid30 { width: 30px; }
.wid50 { width: 50px; }
.wid65 { width: 65px; }
.wid70 { width: 70px; }
.wid75 { width: 75px; }
.wid80 { width: 80px; }
.wid90 { width: 90px; }
.wid100 { width: 100px; }
.wid100p { width: 100%; display: block; }
.wid110 { width: 100px; }
.wid120 { width: 120px; }
.wid140 { width: 140px; }
.wid150 { width: 150px; }
.wid180 { width: 180px; }
.wid170 { width: 170px; }
.wid200 { width: 200px; }
.wid250 { width: 250px; }
.wid280 { width: 280px; }
.wid300 { width: 300px; }
.wid400 { width: 400px; }
.wid450 { width: 450px; }
.wid500 { width: 500px; }
.wid540 { width: 540px; }
.wid580 { width: 580px; }
.wid600 { width: 600px; }
.wid700 { width: 700px; }
.wid20, .wid30, .wid40, .wid50, .wid65, .wid70, .wid80, .wid90, .wid100, .wid110, .wid120, .wid140, .wid150, .wid170, .wid75, .wid180, .wid200, .wid250, .wid280, .wid300, .wid400, .wid450, .wid500, .wid540, .wid580, .wid600, .wid70 { display: inline-block !important; }
.gap_70 { height: 70px; }
.gap_55 { height: 55px; }
.gap_50 { height: 50px; }
.gap_40 { height: 40px; }
.gap_20 { height: 20px; }
.gap_25 { height: 25px; }
.gap_30 { height: 30px; }
.gap_15 { height: 15px; }
.gap_10 { height: 10px; font-size: 0; }
.gap_7 { height: 7px; font-size: 0; }
.gap_3 { height: 3px; font-size: 0; }
.mgb_0 { margin-bottom:0 !important}
.btns { text-align: center; margin: 15px; } 
.btns_wrap { margin: 15px; }
.clr { clear: both }
.valign_m { vertical-align: middle; }
.tooltop { cursor: pointer; vertical-align: middle; }
.mute { color: #999;}
.brd_r { border-right:1px solid #ddd}
.brd_t { border-top:1px solid #ddd}
.brd_t2 { border-top:2px solid #222}
.box_grey { background-color: #f4f4f4; padding:0 15px;  }
input[type="radio"], input[type="checkbox"] { margin: 0; line-height: normal; vertical-align: middle; }
label { cursor: pointer; font-weight: normal; margin-bottom: 0; }
a { text-decoration: none; color: #222;  cursor: pointer}
a:hover, a:active, a:focus { text-decoration: none;  color:#000;  }
.hidden { display: none; }
.inline-block { display:inline-block}
.form-control { vertical-align:middle;}
.pagination { }
.pagination ul { display: inline-block; *display:inline; *zoom:1; margin: 0 auto; }
.pagination ul>li { display: inline; }
.pagination ul>li>a, .pagination ul>li>span { float: left; padding: 5px 9px; text-decoration: none; background-color: #ffffff; border: 1px solid #dddddd; border-left-width: 0; font: 12px "����"; color: #777; line-height: 13px; }
.pagination ul>li>a:hover, .pagination ul>li>a:focus, .pagination ul>.active>a, .pagination ul>.active>span { color: #777; background-color: #f5f5f5; }
.pagination ul>.active>a, .pagination ul>.active>span { color: #1080ce; cursor: default; padding: 6px 9px; border-color: #a8acb6; border-left-width: 1px; margin-top: -1px; font-weight: bold; background-color: #fff; }
.pagination ul>.disabled>span, .pagination ul>.disabled>a, .pagination ul>.disabled>a:hover, .pagination ul>.disabled>a:focus { color: #999999; background-color: transparent; cursor: default; }
.pagination ul>li:first-child>a, .pagination ul>li:first-child>span { border-left-width: 1px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; border-bottom-left-radius: 4px; }
.pagination ul>li:last-child>a, .pagination ul>li:last-child>span { -webkit-border-top-right-radius: 4px; -moz-border-radius-topright: 4px; border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; border-bottom-right-radius: 4px; }
.pagination-centered { text-align: center; }
.pagination-right { text-align: right; }
.checkbox, .checkbox_sm { display: none; }
.checkbox + label, .checkbox_sm + label { color: #333; cursor: pointer; margin-bottom: 0; }
.checkbox + label span { display: inline-block; *display: inline;
vertical-align: middle; margin: 0; padding: 0; width: 22px; height: 22px; background: url(blue.png) no-repeat; border: none; cursor: pointer; }
.checkbox:checked + label span { background-position: -48px 0; }
.checkbox + label span { background-position: 0 0; }
/* .checkbox:hover + label span  { background-position: -24px 0; } */
.checkbox:disabled + label span { background-position: -72px 0; cursor: default; }
.checkbox:checked.disabled + label span { background-position: -96px 0; }
.radio, .radio_sm { display: none; }
.radio + label, .radio_sm + label { color: #333; cursor: pointer; }
.radio + label span { display: inline-block; *display: inline;
vertical-align: middle; margin: 0; padding: 0; width: 22px; height: 22px; background: url(blue.png) no-repeat; border: none; cursor: pointer; }
.radio:checked + label span { background-position: -168px 0; }
.radio + label span { background-position: -120px 0; }
/* .checkbox:hover + label span  { background-position: -24px 0; } */
.radio:disabled + label span { background-position: -192px 0; cursor: default; }
.radio:checked.disabled + label span { background-position: -214px 0; }
.checkbox_sm + label span { display: inline-block; *display: inline;
vertical-align: middle; margin: 0; padding: 0; width: 16px; height: 16px; background: url(blue_sm.png) no-repeat; border: none; cursor: pointer; }
.checkbox_sm:checked + label span { background-position: -36px 0; }
.checkbox_sm + label span { background-position: 0 0; }
/* .checkbox_sm.hover + label span  { background-position: -18px 0; }*/
.checkbox_sm:disabled + label span { background-position: -54px 0; cursor: default; }
.checkbox_sm:checked:disabled + label span { background-position: -72px 0; }
.radio_sm + label span { display: inline-block; *display: inline;
vertical-align: middle; margin: 0; padding: 0; width: 16px; height: 16px; background: url(blue_sm.png) no-repeat; border: none; cursor: pointer; }
.radio_sm:checked + label span { background-position: -126px 0; }
.radio_sm + label span { background-position: -90px 0; }
/* .checkbox_sm.hover + label span  { background-position: -108px 0; }*/
.radio_sm:disabled + label span { background-position: -144px 0; cursor: default; }
.radio_sm:checked:disabled + label span { background-position: -162px 0; }


/* HiDPI support */
@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi), (min-resolution: 1.25dppx) {
.checkbox + label span, .radio + label span {
 background-image: url(blue@2x.png);
 -webkit-background-size: 240px 24px;
 background-size: 240px 24px;
}
}
 
/* Preloader */
#preloader { background-color: rgba( 255, 255, 255, 0.7 ); bottom: 0; left: 0; position: fixed; right: 0; top: 0; z-index: 9999; display:}
#status { background-image: url(../image/loader.gif); background-position: center; background-repeat: no-repeat; height: 150px; width: 300px; left: 50%; margin: -100px 0 0 -150px; position: absolute; top: 50%; }
#status p { text-align: center; line-height: 1.5; color: #999; }
#status p strong { font-size: 19px; color: #000; }
#preloader.active { display: block; }
 
 
select.form-control { -webkit-appearance: none; -moz-appearance: none;  background: #fff url(../image/bullet_down.png) no-repeat right center; text-align: left; display: inline-block; padding-right:12px; vertical-align: middle; box-sizing: border-box; }
select.form-control::-ms-expand {display: none;}
.input_cal { padding-right: 25px; background:#fff url(../image/icon_calendar.gif) right center no-repeat; }
.input_select { padding-right: 20px; background: #fff url(../image/bullet_down.png) no-repeat right center;}


 
 

.mgt_5 { margin-top: 5px !important; }
.mgt_10 { margin-top: 10px !important; }
.mgt_20 { margin-top: 20px !important; }
.mgt_30 { margin-top: 30px !important; }
.mgb_20 { margin-bottom: 20px !important; }
.mgb_30 { margin-bottom: 30px !important; }
.mgb_10 { margin-bottom: 10px !important; }
.mgt_50 { margin-top: 50px !important; }
.mgt_52 { margin-top: 52px !important; }
.mgb_100 { margin-bottom: 100px !important; }
.mgb_50 { margin-bottom: 50px !important; }
.mgl_95 { margin-left: 95px !important; }
.mgb-50 { margin-bottom: -50px !important; }
.pdb_50 { padding-bottom: 50px !important; }
.mgt_100 { margin-top: 100px !important; }
.mgb-1 { margin-bottom: -1px !important; }
.pdt_0 { padding-top: 0 !important; }
.pdt_20 { padding-top: 20px !important; }
.pdt_80 { padding-top: 80px !important; }
.pdb_0 { padding-bottom: 0 !important; }
.pdr_5 { padding-right: 5px !important; }
.pdr_10 { padding-right: 10px !important; }
.pdl_5 { padding-left: 5px !important; }
.pdl_10 { padding-left: 10px !important; }
.pd_20 { padding:20px !important; }
.img_width { max-width:100%; height:auto}
.agree_wrap1 { border: 1px solid #CCC; border-radius: 2px; padding: 10px; height: 150px; overflow: auto; text-align: left; color: #666; }
.agree_wrap1 h3 { font-size: 14px; text-align: left; font-weight: bold; margin: 10px 0; } 

.filebox input[type="file"] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); border: 0; }
.filebox label { display: inline-block; padding: 4px 10px; color: #fff; font-size: inherit; line-height: normal; vertical-align: middle; background-color: #333; cursor: pointer; border: 1px solid #333; border-radius: 2px; }
/* named upload */
.filebox .upload-name { display: inline-block; padding: 4px 10px; font-size: inherit; font-family: inherit; line-height: normal; vertical-align: middle; background-color: #f5f5f5; border: 1px solid #ccc; border-radius: 2px; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
.filebox_design .upload-width { width:calc(100% - 80px); padding:10px 10px;}
.filebox_design label { padding:10px 10px;}


.pagination { text-align: center }
.pagination ul { display: inline-block; *display:inline; *zoom:1; margin: 0 auto; }
.pagination ul>li { display: inline; }
.pagination ul>li>a, .pagination ul>li>span { float: left; padding: 6px 11px; text-decoration: none; background-color: #ffffff; border: 1px solid #dddddd; border-left-width: 0; font-size: 14px; color: #777; line-height: 13px; }
.pagination ul>li>a:hover, .pagination ul>li>a:focus, .pagination ul>.active>a, .pagination ul>.active>span { color: #777; background-color: #f5f5f5; }
.pagination ul>.active>a, .pagination ul>.active>span { color: var(--sit-keycolor); cursor: default; padding: 6px 11px; border-color: #a8acb6; border-left-width: 1px; margin-top: -1px; font-weight: bold; background-color: #fff; }
.pagination ul>.disabled>span, .pagination ul>.disabled>a, .pagination ul>.disabled>a:hover, .pagination ul>.disabled>a:focus { color: #999999; background-color: transparent; cursor: default; }
.pagination ul>li:first-child>a, .pagination ul>li:first-child>span { border-left-width: 1px; -webkit-border-top-left-radius: 4px; -moz-border-radius-topleft: 4px; border-top-left-radius: 4px; -webkit-border-bottom-left-radius: 4px; -moz-border-radius-bottomleft: 4px; border-bottom-left-radius: 4px; }
.pagination ul>li:last-child>a, .pagination ul>li:last-child>span { -webkit-border-top-right-radius: 4px; -moz-border-radius-topright: 4px; border-top-right-radius: 4px; -webkit-border-bottom-right-radius: 4px; -moz-border-radius-bottomright: 4px; border-bottom-right-radius: 4px; }
.pagination-centered { text-align: center; }
.pagination-right { text-align: right; }


.head_section { width: 100%; z-index: 9; display: flex;flex-direction: column-reverse; position: fixed; top: 0;}
.head_glb_wrap {background-color: #000; width: 100%; height: 50px; overflow: hidden}  
.head_nav_wrap { width: 100%; height: 80px; z-index: 9; margin: 0 auto; top: 50px; left: 0; background-color: rgba(255,255,255,0.4); position: relative; top: 0;transition: 0.3s;}
.sub_wrap  {height: 130px;}
.sub_wrap .head_nav_wrap {background-color: rgba(255,255,255,1);}
.head_nav_wrap.float_on {background-color: rgba(255,255,255,1); transition: 0.3s;}
.head_nav_wrap  .head_h1 { font-size: 14px; display: block; width: 245px; height: 30px; background: url("../image/logo.png") center center no-repeat; text-indent: -999px; overflow: hidden; position: absolute; left: 10px; top: 20px;}
.head_h1 a { display: block; height: 30px;text-indent: -999px; font-size: 0}
.head_nav_wrap .head_ul { width: 1200px; height: 30px;position: absolute; left: 300px; top: 10px;}

.head_ul li { display: inline-block; height: 30px; line-height: 30px;  margin: 12px 35px; color: #111; position: relative; }
.head_ul li a { font-weight: 600; font-size: 19px; line-height: 30px; cursor: pointer}
.head_ul li.active { }
.head_ul li:before {
    content: " ";
    display: block;
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 3px;
    background-color: var(--sit-keycolor);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    transform: translateX(-50%);
    -webkit-transition: width 0.7s cubic-bezier(0.86, 0, 0.07, 1);
    transition: width 0.7s cubic-bezier(0.86, 0, 0.07, 1);
}
.head_ul li:hover:before {width: 100%;} 

.nav_sub_wrap { width: 100%; background-color: #fff; position: absolute; top: 80px;  opacity: 0; display:none; border-top: 1px solid #ccc; border-bottom: 1px solid #eee; z-index: -9; }
.nav_sub_wrap.open {opacity: 1; display: block;  height: 200px;transition: opacity 300ms cubic-bezier(0.38, 0.41, 0.27, 1), transform 300ms cubic-bezier(0.395, 0, 0.135, 1);
    transition-delay: 250ms; z-index: 9}
.nav_sub_in { width: 100%; min-width: 1400px; max-width: 1580px; padding:10px 100px 30px 320px; box-sizing: border-box; margin: auto; z-index: -9; } 
.nav_sub_wrap.open .nav_sub_in {z-index: 9; }

.nav_sub_dep1  { display: block; width: 160px; float: left;}
.nav_sub_dep1 li a { display: block;font-size: 15px; color: #444; font-weight:600; padding: 10px 0 0 0; text-align: left;cursor: pointer}
.nav_sub_dep1 li a:hover {color:var(--sit-keycolor);}


.container_body { width: 100%; min-width: 1400px; max-width: 1580px;margin: 0 auto; padding-right: 100px;  position: relative}


.head_btns { float: right; margin: 15px 5px 0 0; z-index: 2; }
.head_btns a { color: #fff; display: inline-block; margin: 0 10px; cursor: pointer}
.line_outer { width:  800px; margin: 0 auto; text-align: center; position: absolute; top: 0; left: calc( 50% - 400px); z-index: 1;  }
.ul_line {  width: 800px; text-align: center; height: 30px; margin:10px auto;}
.ul_line li { margin: 0 auto;display: block; height: 30px; overflow: hidden; color: #fff; text-align: center; line-height: 30px;}
.ul_line li { display: block; height: 30px; line-height: 30px;   color: #fff; position: relative; text-align: center}
.ul_line li.active { }
.ul_line li a { color: #fff; cursor: pointer}
.visual_section { width: 100%; height: 100vh; z-index: 1; position: relative; }
.visual_slider {width: 100%; height: 100vh;overflow: hidden}
.visual_slider .visual_item {width: 100%; height: 100vh; overflow: hidden; z-index: 1}
.visual_item img { width: 100%; height: 100%; object-fit: cover;}

.visual_item .visual_bg { width: 100%; height: 100%; background-position: center center; z-index: 1; position: relative}
.main_visual_txt1 { font-size: 60px; color: #fff; display: block; width: 1200px; left:calc(50% - 600px) ; top:45%; font-weight: 600 ;z-index: 2;position: absolute; text-align: center; line-height: 1.2;text-shadow: 0px 0px 20px #000;} 
.main_visual_txt2 { font-size:30px; }
.visual_video {
    position: absolute;
    z-index: 1;
    width: 100vw;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    -o-object-fit: cover;
    object-fit: cover;
    transition-delay: 1s;
}


.pagingInfo { z-index: 10; color: #fff; background-color:rgba(0,0,0,0.50); width: 80px; padding: 6px 7px 4px 7px; border-radius: 15px; display: block; bottom: 27px; left: calc( 50% + 40px); position: absolute; text-align: center; font-size: 16px; letter-spacing: 2px; line-height: 1.2;font-weight: 300}
.pagingInfo::first-letter { font-weight: 700}
.visual_bnts {z-index: 10; color: #fff;  width: 120px; height: 40px; display: block; bottom: 23px; right: calc( 50% - 40px); position: absolute; text-align: center; font-size: 16px; letter-spacing: 2px; line-height: 1.2}
 .visual_bnts .visual_prev, .visual_bnts .visual_next { display: block; width: 40px; height: 40px; position: absolute; bottom: 0; cursor: pointer; padding-left: 30px; overflow: hidden; text-indent: -999px; opacity: 0.5; border: 2px solid #fff; border-radius: 50%}
.visual_prev { background: url("../image/icon_chevron_right.svg") center center no-repeat; background-size: 10px; left: 12px;} 
.visual_next { background: url("../image/icon_chevron_left.svg") center center no-repeat; background-size: 10px; right: 12px;}
.visual_prev:hover, .visual_next:hover {opacity: 1; transition: 0.3s;}

.quick_section { width: 90px; height: 100vh; overflow: hidden; display: block; position: fixed; top: 0; right: 0; z-index: 29; background-color: #151515; color: #fff}
.ul_quick li { display:flex; width: 90px; height: 12.5vh; align-items: center; width: 100%; text-align: center}
.ul_quick li a { display:block;color: #fff; text-align: center; width: 100%; cursor: pointer}
.ul_quick .quick_01 { background-color: #f15c2f; font-size: 15px; }
.ul_quick .quick_02 { background-color: #151515; font-size: 15px;}
.ul_quick .quick_03, .ul_quick .quick_04, .ul_quick .quick_05, .ul_quick .quick_06, .ul_quick .quick_07 {font-size: 13px; border-bottom: 1px solid #555; background-color: #333} 
.ul_quick .quick_03 a, .ul_quick .quick_04 a, .ul_quick .quick_05 a, .ul_quick .quick_06 a, .ul_quick .quick_07 a { padding-top: 65px;font-size: 13px;}
.ul_quick .quick_03 a { background: #333 url("../image/quick_01.png") top 15px center no-repeat;}
.ul_quick .quick_04 a { background: #333 url("../image/quick_02.png") top 15px center no-repeat;}
.ul_quick .quick_05 a { background: #333 url("../image/quick_03.png") top 15px center no-repeat;}
.ul_quick .quick_06 a { background: #333 url("../image/quick_04.png") top 15px center no-repeat;}
.ul_quick .quick_07 a { background: #333 url("../image/quick_05.png") top 3px center no-repeat;}
.ul_quick .quick_08 { background-color: #151515; font-size: 16px;}
.quick_08 i { display: block; font-size: 22px;}
.main_float_section { width: 100px; height: 100vh; overflow: hidden; display: block; position:fixed; top: 150px; left: 20px; z-index: 29; }
@media (max-width: 1400px) {
	.main_float_section { display: none}
}
.ul_float { width: 100px;}
.ul_float li { display: block; width: 100px; height: 130px; margin-bottom: 10px;}
.ul_float li a { display: block;width: 100px; height: 130px; text-indent: -999px; cursor: pointer}	
.ul_float .float_01 { background: url("../image/main_qr_01.png") top center no-repeat;}
.ul_float .float_02 { background: url("../image/main_qr_02.png") top center no-repeat;}
.ul_float .float_03 { background: url("../image/main_qr_03.png") top center no-repeat;}
.ul_float .float_04 { background: url("../image/main_qr_04.png") top center no-repeat;}
.brd_b { border-bottom: 1px solid #ccc}
.main_bns { display: flex; height: 145px; width: 100%}
.main_bns .main_bn { height: 145px; flex-grow: 1; padding-top: 20px;}
.class_section { padding: 50px 0;}
.main_h3 { padding: 0 0 40px 0; text-align: center; margin: 0; font-size: 39px;font-weight: 600;}
.class_section .main_class01, .class_section .main_class02, .class_section .main_class03, .class_section .main_class04 {width: 100%; height: 400px; border-radius: 10px; overflow: hidden; cursor: pointer;}
.main_class01 {background: url("../image/main_class01.png") top center no-repeat; background-size: cover; display: flex;align-items: flex-end;}
.main_class02 {background: url("../image/main_class02.png") top center no-repeat; background-size: cover; display: flex;align-items: flex-end;}
.main_class03 {background: url("../image/main_class03.png") top center no-repeat; background-size: cover; display: flex;align-items: flex-end;}
.main_class04 {background: url("../image/main_class04.png") top center no-repeat; background-size: cover; display: flex;align-items: flex-end;}
.class_txt_wrap { padding: 15px; height: 135px; width: 100%; background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); color: #fff}
.class_txt_wrap span { display: block;color: #fff; line-height: 1.3; cursor: pointer;transition: 0.3s}
.class_txt_wrap .txt1 { font-size: 18px; font-weight: 600;padding-bottom: 15px }
.class_txt_wrap .txt2 { font-size: 14px; font-weight: 400; }
.class_txt_wrap:hover span { color: burlywood; transition: 0.3s}
.interview_section { padding: 50px 0; background-color: #f3f3f3}
.inter_head { border-bottom: 2px solid #797979; padding-bottom: 10px}
.inter_head .main_h3 { padding-bottom: 20px; padding-left: 10px; }
.inter_head .p_info { font-size: 16px; color: #666;}
.inter_head .btn_more {font-size: 16px; font-weight: 600; color: #333;}
.ul_interview li { width: 50%; float: left; margin-top: 50px; height: 200px; display: block; overflow: hidden}
.ul_interview:after { display: table; clear: both; content: '';}
.ul_interview .interview_thumb { width: 200px; height: 150px; overflow: hidden; border-radius: 10px; float: left; margin-right: 20px;}
.ul_interview .interview_thumb img { object-fit: cover; width: 100%; height: 100%;}
.ul_interview .txts_wrap { height: 90px; overflow: hidden}
.interview_txt1 { font-size: 16px; color: #ff642e; font-weight: 600; padding-top: 20px;} 
.interview_txt2 { font-size: 18px; color: #000; font-weight: 600; padding-right: 50px; line-height: 1.2 } 
.interview_txt3 { font-size: 14px; color: #666; font-weight: 400; padding-top: 10px;padding-right: 20px;} 

.portfolio_section { padding: 50px 0; background: url("../image/main_port_bg.png") center center no-repeat; background-size: cover;}
.portf_head { border-bottom: 2px solid #ccc; padding-bottom: 10px}
.portf_head .main_h3 { padding-bottom: 20px; padding-left: 10px;color: #fff;}
.portf_head .p_info { font-size: 16px; color: #9d9d9d;}
.portf_head .btn_more {font-size: 16px; font-weight: 600; color: #fff;}
.ul_port { margin-top: 50px;  width: 100%;}
.ul_port:after {display: table; clear: both; content: '';}
.ul_port li { width: calc(25% - 20px); margin: 0 10px;  height: 330px;aspect-ratio: 1 / 1;  position: relative; overflow: hidden; cursor: pointer; float: left; }
.main_port_thumb {widht:100%; height: 330px; border-radius: 10px; overflow: hidden;filter: grayscale(100%);transition: filter .3s;}
.main_port_thumb img { width: 100%; height: 100%; object-fit: cover}
.main_port_txt_wrap {width:100%; height: 100px; position: absolute; bottom: -100px;background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%);transition: 0.3s}
.main_port_txt_wrap span { display: block; padding: 0 20px; color:#fff;}
.main_port_txt_wrap .main_port_txt1 { font-weight: bold; font-size: 16px; padding-top: 30px}
.main_port_txt_wrap .main_port_txt2 { font-weight: 400; font-size: 14px; }
.ul_port li:hover .main_port_thumb {filter: grayscale(0);transition: filter .3s;}
.ul_port li:hover .main_port_txt_wrap  { bottom: 0; transition: 0.3s}
.ul_award { margin: 30px; width: 100%; overflow: hidden; text-align: center}
.ul_award li { display: inline-block; margin: 0 30px;}
.footer_section { background: #f4f4f4;}
.footer_btns { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding: 20px 0; height: 70px;}
.foot_select { border:1px solid #ccc; border-radius: 15px; padding: 0 10px 0 10px; height: 30px; background-color: transparent; font-size: 14px;}
.foot_icons a { display: inline-block; margin: 0 5px;}
.ul_footer { width: 800px;}
.ul_footer li { display: inline-block; margin: 5px 15px;}
.ul_footer li a { font-size: 14px; color: #666}
.foot_add { padding: 30px 0 30px 350px; background: url("../image/foot_logo.png") left 20px center no-repeat; font-size: 14px; color: #666; line-height: 1.6;}

.sub_body { min-height: calc( 100vh - 415px ); z-index: 1; padding-bottom: 50px;}
.container_sm { max-width: 520px; margin: 0 auto}
.container_xs { max-width: 400px; margin: 0 auto}
.container_main {width: 1280px; margin: 0 auto}
@media (min-width: 992px) and (max-width: 1400px) {
	.container_body { width: 100%; min-width: 1000px; max-width: 1300px;margin: 0 auto; padding-right: 100px;  position: relative}
	.head_nav_wrap .head_ul { width: 1000px; height: 30px;position: absolute; left: 250px; top: 10px;}
} 
@media (min-width: 767px) and (max-width: 991px) { 
	.container_body { width: 100%; min-width: 768px; max-width: 990px;margin: 0 auto; padding-right: 100px;  position: relative}
	.head_nav_wrap .head_ul { width: 800px; height: 30px;position: absolute; left: 160px; top: 10px;}
	.head_nav_wrap  .head_h1 { font-size: 14px; display: block; width: 150px; height: 30px; background: url("../image/logo.png") center center no-repeat; text-indent: -999px; overflow: hidden; position: absolute; left: 10px; top: 20px; background-size: 150px}
	.head_ul li { margin: 12px 15px;}
	.nav_sub_in {padding:10px 100px 30px 160px; }
	.nav_sub_dep1  { display: block; width: 140px; float: left;}
	.container_main {width: 900px; margin: 0 auto}
}
.tab_lg { border-color: #333; border-radius: 0}
.tab_lg .nav-link.active, .tab_lg .nav-item.show .nav-link { border-color: #333 #333 #fff;}
.tab_lg .nav-link { color: #333;border-radius: 0}
.tab_lg li { font-size: 18px;}
.tab_lg li button, .tab_lg li a { font-size: 18px; font-weight: 600}
.tab_col li { width: 50%;}
.tab_col li button, .tab_col li a { display: inline-block; width: 100%;}
.login_label { font-size: 16px; font-weight: bold}
.login_form { margin-bottom: 20px; border-bottom: 1px solid #111}
.login_form input { border:0; border:0; width: 100%; font-size: 16px; padding: 10px 5px;}
.login_btns { text-align: center; margin-bottom: 10px;}
.login_btns .btn { border-radius: 0;}
.login_btns .btn_dark { display: block; width: 100%; padding: 10px; text-align: center; background-color: var(--sit-keycolor); color: #fff; font-size: 18px; font-weight: 600px; cursor: pointer}
.login_links {text-align: right}
.login_links a { display: inline-block; color: #666; padding: 0 10px; line-height:1; }
.login_links a:hover {color: #000;}
.login_links a + a { border-left:1px solid #ccc;}

.login_div { width: 100%; height: 30px; position: relative; text-align: center}
.login_div span { font-size: 16px; color: #666; display: block; background-color: #fff;z-index: 2; position: absolute; width: 140px; text-align: center; left: 50%; margin-left: -70px;}
.login_div:before { content: ''; height: 1px; width: 100%; position: absolute; top: 12px; left: 0; background-color: #ccc; display: block; z-index: 1;}

.btn_facebook, .btn_google, .btn_naver, .btn_kakao {  display: block; width: 100%; padding: 10px; text-align: center; background-color: #111; color: #fff; font-size: 16px; font-weight: bold}

.btn_kakao { color:#111; background:#fae100 url(../image/icon_kakao_b.png) 20px center no-repeat; background-size:24px;border:1px solid #ddd;}
.btn_naver { color:#fff; background:#20bc03 url(../image/icon_naver.png) 20px center no-repeat; background-size:20px;border:1px solid #ddd;}
.btn_google { color: #4285f4; background:#f4f4f4 url(../image/icon_google.png) 20px center no-repeat; background-size:20px; border:1px solid #4285f4}
.btn_facebook { color:#111; background:#3b5998 url(../image/icon_facebook.png) 20px center no-repeat; background-size:22px;}  
.body_h3 {font-size: 36px; color: #333;  font-weight: 700; text-align: left; padding-bottom: 40px;}
.body_h3 i {font-size: 20px;  color: #999; display: inline-block; margin: 0 10px; vertical-align: 2px; } 
.body_h4 {font-size: 26px; color: #333;  font-weight: 600; text-align: left; padding-bottom: 20px;}
.h4_sub { font-size: 30px; color: #111; padding: 20px 0 10px 0; text-align: left; font-weight: 600; }
.h5_sub { font-size: 20px; color: #111; padding: 10px 0 10px 0; text-align: left; font-weight: 600; }

.join_progress { margin: 50px 0; text-align: center}
.join_progress span { font-size: 16px; color: #999; padding: 10px 30px; position: relative; border-bottom: 2px solid #ddd; width: 33%; display: inline-block}
.join_progress span + span::before {  content: "\F285";  font-family: bootstrap-icons!important;font-weight: 400; font-size: 12px; width:20px; height:20px; position: absolute; left: -15px; top: 10px; display: block}
.join_progress span.active { color: var(--sit-keycolor); font-weight: 700;border-bottom: 2px solid var(--sit-keycolor); }
.msg2 { padding: 30px 0; text-align: left; }
.msg2 strong {color: var(--sit-keycolor)}
.join_wrap label { display: inline-block; margin: 15px 0 0 0; padding: 5px 0; }
.join_wrap .input { border: none; height: 30px; background-image: none; border-bottom: 1px solid #ccc; color: #000; font-weight: 400; margin: 10px 0 0 0; padding: 0 0 3px; font-size: 16px; box-sizing: border-box; border-radius: 0; -moz-appearance: none; -webkit-appearance: none; -ms-appearance: none; -o-appearance: none; transition: 0.3s ease; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; }
.join_wrap .input:focus { outline: none !important; border-color: #000 !important; }
.links { text-align: center; }
.links a { color: #666; display: inline-block; padding: 0 10px; }
.icon_dash { position: relative; }
.icon_dash:after { content: "-"; font-size: 16px; display: inline-block; width: 10px; height: 16px;line-height: 16px; position: absolute; right: -7px; top: 7px; z-index: 10; color: #999 ;}
.form_title { font-size: 14px; padding: 0.375rem 0; display: inline-block; line-height: 1.5;font-weight: 600 }
.required::after {  content: '*'; color: #f15c2f; display: inline-block;  margin-left:5px;}

.agree_wrap_join { border: 1px solid #dee2e6; border-radius: 7px; padding: 10px; height: 150px; overflow: auto; text-align: left; color: #666; }
.agree_wrap_join h3 { font-size: 14px; text-align: left; font-weight: bold; margin: 10px 0; }

.ul_head { padding: 9px 0;}
.ul_tab01 li { display: inline-block; margin: 10px 15px;z-index: 2 }
.ul_tab01 li:first-child { margin-left: 0}
.ul_tab01 li a { display: inline-block; padding-bottom: 5px; border-bottom: 2px solid #fff; font-size: 16px; transition: 0.3s ease; -webkit-transition: 0.3s ease; -moz-transition: 0.3s ease; cursor: pointer }
.ul_tab01 li.active a { border-bottom: 2px solid #f15c2f; color: #f15c2f; font-weight: 600; }
.ul_tab01_line { position: relative;}
.ul_tab01_line:after { content: ''; font-size: 0; width: 100%; height: 1px; background-color: #ddd; bottom: 9px; left: 0; position: absolute; z-index: 1}

.intor_wrap { padding: 20px 0; text-align: left; font-size: 16px; color: #666}
.intor_wrap .intro_t01 {font-weight: 600; font-size: 32px; color: var(--sit-keycolor); padding: 20px 0; line-height: 1.2;}
.intor_wrap strong { font-size: 16px; font-weight: 600; color: #222}
.introbg1 { background: url("../image/about_img1.png") right bottom no-repeat; background-size: 600px; }

.ceo_txt1 { font-size: 32px; font-weight: bold; color: var(--sit-keycolor); line-height: 1.2 }
.ceo_txt2 { font-size: 20px; font-weight: bold ;color: #666; line-height: 1.2 }
.ceo_history { position: relative; padding-left: 50px;}
.ceo_history:before { content: ''; width: 1px; height: 100%; position: absolute; left: 20px; top: 0; background-color: #ccc;}
.ceo_history p {padding: 10px 0 ; position: relative;}
.ceo_history p:before { content: ''; width: 6px; height: 6px; border-radius: 50%; position: absolute; left: -33px; top: 20px; background-color: #999;}
.sch_result { text-align: left; font-size: 14px;}
.sch_result strong { color: var(--sit-keycolor)}
.sch_wrap { text-align: right;}
.sch_input {padding: 0.375rem 0.75rem; border: var(--bs-border-width) solid var(--bs-border-color); border-radius: var(--bs-border-radius); transition: border-color 0.15s ease-in; background-color: transparent; display: inline-block}
.sch_input input[type="text"] { border: 0; line-height: 1.5; padding: 0;}
.sch_input:focus { border-color: #666;}
.sch_input .btn_sch { padding: 0; border: 0; background-color: transparent; display: inline-block; cursor: pointer}
.table_head_line { border-top: 1px solid #666;}
.table_lg th, .table_lg td { font-size: 15px; padding:15px 7px; }
.table_lg .spec_th { font-size: 18px; font-weight: 700; text-align: left; padding-left: 30px;}
.spec_th img { vertical-align: middle; margin-right: 10px;}
.table_simple { border-collapse: collapse}
.table_simple th, .table_simple td { padding: 10px;}  
.table_simple2 { border-collapse: collapse}
.table_simple2 th, .table_simple2 td { padding: 5px; }
.no_data { text-align: center; padding: 100px 0 30px; background: url("../image/icon_info.png") center 20px no-repeat; background-size: 60px; font-size: 16px; color: #999;}
.no_result { text-align: center; padding: 140px 0 30px; background: url("../image/icon_warning.svg") center 20px no-repeat; background-size: 80px; font-size: 18px; color: #222;}
.no_review { text-align: center; padding: 120px 0 30px; background: url("../image/icon_noreview.svg") center 20px no-repeat; background-size: 100px; font-size: 18px; color: #222;}
.icon_list_att { display: inline-block}
.icon_list_att:hover {color: var(--sit-keycolor)}
.icon_list_att + .icon_list_att { margin-left: 10px;}
.board_title { font-size: 18px;}
.board_att_itme { color: #999}
.board_att_itme a { color: #333}
.board_att_itme + .board_att_itme { margin-top: 10px;}
.board_att_itme::before { content: "\f0c6";  font-family: "Font Awesome 6 Free";font-weight: 900; display: inline-block; margin-right: 5px;}
.board_view_wrap { padding: 20px; max-width: 100%; overflow: hidden;border-bottom: var(--bs-border-width) solid var(--bs-border-color);}
.board_view_wrap img { max-width: 100%; height: auto}
.history_bg { background: url("../image/img_history.png") left top no-repeat; padding-left: 300px;}
.ul_history { position: relative;}
.ul_history:before { content: ''; width: 2px; height: 100%; position: absolute; left: 150px; top: 0; background-color: var(--sit-keycolor);}
.ul_history li { font-size: 16px; color: #333; line-height: 1.4; padding: 5px 0 5px 200px;position: relative;}
.ul_history li.title { font-size:26px; font-weight: 600; color: var(--sit-keycolor); padding-left: 50px; margin-bottom: -40px; margin-top: 30px}  
.ul_history li.title:before { content: ''; width: 16px; height: 16px; border-radius: 50%; position: absolute; border:4px solid  var(--sit-keycolor); left: 143px; top: 10px; background-color:#fff}
.txt_head1 { font-size: 24px; font-weight: 400; color: #999;}

.garry_ul { margin:10px 0;}
.garry_ul li { display: block; width: 20%; float: left; padding: 10px; aspect-ratio: 4 / 3; box-sizing: border-box; border-radius: 70px;   }
.garry_ul li img { width: 100%; height: 100%; object-fit: cover; cursor: pointer;border-radius: 7px; }
.garry_ul li a { cursor: pointer; transition: 0.3s ease; -webkit-transition: 0.3s ease; }
.garry_ul li a:hover { opacity: 0.7; }
.garry_ul:after {content: ""; display: block; clear: both}
.gal_box2 { margin: 10px 0px; clear: both; z-index: 4; }
.gal_box2 .gal_li2 { display: block; width: 33.33%; height: 360px; padding: 20px 5px; background:#fff;  float: left; cursor: pointer; text-align: center; z-index: 100; box-sizing:border-box; }
.gal_li2 img { margin-top:10px; width: 300px; height: 225px;}
.gal_li2 .thumb_area {margin-top:10px; 300px; height: 225px; display:block; margin:0 auto 10px auto; background-color:#000; opacity:1; transition: 0.3s ease;
    -webkit-transition: 0.3s ease;
    -moz-transition: 0.3s ease;}
.gal_li2 .thumb_area:hover { opacity:0.5}
.gal_li2 .gal_li01 { font-size:14px;height: auto; margin-bottom:5px; padding: 0 10px;}
.gal_li02 { font-size: 12px; color: #999; text-align: right;padding: 0 10px;}
.gal_box a { position:relative;}
.gal_box2 a.gal_li2:hover { text-decoration:none}
.gal_box2 a.gal_li2:hover .gal_li01 { color:#F60}
.map_wrap { width: 100%; height: 550px;}
.map_wrap img { width: 100%; height: 100%; object-fit: cover}
.label_notice {font-size: 12px; line-height: 1.1; padding: 3px 5px 0px 5px; display: inline-block; margin-right: 5px; font-weight: 400; font-family: 'GmarketSansMedium'; vertical-align: middle; color: var(--mbs-red); border: 1px solid var(--sit-red); color: var(--sit-red); } 
.label_notice2 {font-size: 12px; line-height: 1.1; padding: 3px 5px 0px 5px; display: inline-block; margin-right: 5px; font-weight: 400; font-family: 'GmarketSansMedium'; vertical-align: middle; color: var(--mbs-red); border: 1px solid var(--sit-keycolor); color: var(--sit-keycolor); } 
.ul_thumb li { width: 33%; float: left;margin-bottom: 30px;}
.ul_thumb li .thumb_wrap { padding: 10px 20px;  width: 100%;aspect-ratio:4 / 3; box-sizing: border-box; position: relative}
.ul_thumb .thumb_wrap .thumb_img { width: 100%; aspect-ratio:4 / 3; overflow: hidden;border-radius: 7px; background-color: #000;}
.ul_thumb .thumb_wrap .thumb_img img {width: 100%; height: 100%; object-fit: cover;  border-radius: 7px; opacity: 0.7;}
.ul_thumb .thumb_wrap .thumb_lable1 { width: 100%; position: absolute; bottom:40px; left: 20px; height: 67px; font-size: 19px; font-weight: 600; color: #fff; padding: 0 50px 0 20px; letter-spacing: -1px; overflow: hidden } 
.ul_thumb .thumb_wrap .thumb_lable2 { width: 100%; position: absolute; top:30px; left: 40px; font-size: 14px; font-weight: 600; color: #fff; padding:3px 5px 1px 5px;line-height: 1; width: 80px; background: #fff; border-radius: 20px; color: #333; font-weight: 400; font-family: 'GmarketSansMedium'; text-align: center}
.ul_thumb li .thumb_txt1 { padding: 0 20px; font-size: 16px; font-weight: 600; text-align: left}
.ul_thumb li .thumb_txt2 { padding: 0 20px; font-size: 14px; font-weight: 400; text-align: right; color: #999;}
.ul_thumb:after {content: ""; display: block; clear: both}
.ul_thumb li:nth-child(4) {content: ""; display: block; clear: both}

.review_head { background-color: #888; padding: 10px 20px; color: #fff}
.review_head .review_class { font-size: 16px; font-weight: 600;}
.review_head .review_teacher {font-size: 14px; padding-top: 5px;}
.review_stars { width: 160px; margin-left: auto}
.review_stars .review_stars_txt1 { text-align: left; font-size: 12px;}
.review_stars .review_stars_point { padding: 5px 0 5px 110px; font-size: 20px; font-weight: 600; display: block; height: 30px;}
.review_stars .star_0 { background: url("../image/icon_star0.png") left center no-repeat}
.review_stars .star_1 { background: url("../image/icon_star1.png") left center no-repeat}
.review_stars .star_2 { background: url("../image/icon_star2.png") left center no-repeat}
.review_stars .star_3 { background: url("../image/icon_star3.png") left center no-repeat}
.review_stars .star_4 { background: url("../image/icon_star4.png") left center no-repeat}
.review_stars .star_5 { background: url("../image/icon_star5.png") left center no-repeat}


.ul_gall li { width: 33%; float: left;margin-bottom: 30px; padding: 10px;  }
.ul_gall li .gall_wrap { width: 100%; aspect-ratio:1 / 1; border-radius: 10px; overflow: hidden; box-sizing: border-box; position: relative; cursor: pointer}
.ul_gall li .gall_wrap.gall_brd { border: 1px solid #999;}
.gall_wrap .thumb_img { width: 100%;  aspect-ratio:1 / 1; overflow: hidden;border-radius: 7px;  z-index: 3; position: absolute; top:0; left: 0;}
.gall_wrap .thumb_img img {width: 100%; height: 100%; object-fit: cover;  border-radius: 7px;}
.gall_wrap .thumb_txt { width: 100%; height: 100%; position: absolute; top:0; left: 0; color: #fff; padding: 20px; background-color: rgba(0,0,0,0.7);z-index: 5; display: flex; align-items: center; flex-wrap: wrap; align-content: center; opacity: 0}   
.gall_wrap .thumb_txt:hover {opacity: 1; transition: 0.5s; }
.gall_wrap .thumb_txt .thumb_txt1, .gall_wrap .thumb_txt .thumb_txt2 { display: block; text-align: center; width: 100%;} 
.gall_wrap .thumb_txt .thumb_txt1 { font-size: 16px; font-weight: 600;}
.gall_wrap .thumb_txt .thumb_txt2 { font-size: 12px; text-align: right; margin-top: 10px;} 
.ul_gall:after {content: ""; display: block; clear: both}
.ul_gall li:nth-child(4) {content: ""; display: block; clear: both}

.commnet_section { margin: 30px}
.comment_head { padding: 20px 0;}
.comment_head i { font-size: 18px; margin-right: 10px;}
.comment_write { border-radius: 7px; padding: 15px; border:2px solid #ddd;}
.comment_write .comm_w_name { font-size: 13px; font-weight: bold;}
.comm_w_input textarea { border: 0; width: 100%; height: 40px;}
.comm_w_btns { text-align: right;}
.comment_item { border-top: 1px solid #ddd; padding: 20px 20px 20px 60px; background: url("../image/user_icon.png") left 10px top 20px no-repeat; background-size: 40px;}
.comm_item_content { padding: 5px 0; text-align: left; font-size: 16px;}
.comm_item_name { font-weight: bold; font-size: 14px;}
.comm_item_info .comm_item_date { font-size: 13px; color: #999;}
.comm_item_btn { display: inline-block; cursor: pointer; color: #999;}
.comm_item_btn + .comm_item_btn { margin-left: 10px;}

.sub_top_visual { width: 100%; height: 40vh;}
.sub_top_visual_2 { width: 100%; height: 250px;}
.sub_top_visual_2 img, .sub_top_visual img  {width: 100%; height: 100%; object-fit: cover; object-position: center center}

 
.ul_toon li { width: 33%; float: left;margin-bottom: 30px;}
.ul_toon li .thumb_wrap { padding: 10px 20px;  width: 100%;  aspect-ratio:4 / 3;box-sizing: border-box; position: relative}
.ul_toon .thumb_wrap .thumb_img { width: 100%; aspect-ratio:4 / 3;  overflow: hidden;border-radius: 7px; background-color: #fff;}
.ul_toon .thumb_wrap .thumb_img img {width: 100%; height: 100%; object-fit: cover;  border-radius: 7px; object-position: center center;transition: 0.3s ease;} 
.ul_toon .thumb_wrap .thumb_img img:hover { transform: scale(1.1);transition: 0.3s ease;}
.ul_toon .thumb_wrap .thumb_lable2 { width: 100%; position: absolute; top:30px; left: 40px; font-size: 14px; font-weight: 600; color: #fff; padding:3px 5px 1px 5px;line-height: 1; width: 50px; background: var(--sit-keycolor); border-radius: 20px; color: #fff; font-weight: 400; font-family: 'GmarketSansMedium'; text-align: center}
.ul_toon li .ul_txt1 { padding: 0 20px; font-size: 16px; font-weight: 600; text-align: left}
.ul_toon li .ul_txt2 { padding: 0 20px; font-size: 13px; font-weight: 600; text-align: left}
.ul_toon li .ul_txt3 { padding: 0 20px; margin-top: 10px; font-size: 14px; font-weight: 400; text-align: left; color: #666;}
.ul_toon li .tag_wrap {padding: 0 20px; margin-top: 10px;}  
.ul_toon li .tag_wrap span { display: inline-block; background-color: #eee; color: #666; padding: 2px 7px; margin: 1px 10px 1px 0;font-size: 12px; border-radius: 3px;}
.ul_toon li .tag_wrap span:before { content: '#'}
.ul_toon:after {content: ""; display: block; clear: both}
.ul_toon li:nth-child(4) {content: ""; display: block; clear: both}
 

.toon_summ { padding: 10px 0; text-align: left; font-size: 14px;border-bottom: 1px solid #ddd;}
.ul_toon_list { margin: 0; padding: 0; list-style: none;}
.ul_toon_list li { padding: 10px; border-bottom: 1px solid #ddd; height: 112px; box-sizing: border-box}
.ul_toon_list li .toon_thumb { width: 120px; height: 90px; float: left}
.ul_toon_list .toon_thumb img { width: 100%; height: 100%; border: 1px solid #eee; border-radius: 3px; display: inline-block}
.ul_toon_list li .toon_txt_wrap { float: left; margin-left: 20px;height: 90px;  }
.ul_toon_list .toon_li_txt1 { font-size: 16px;    font-size: 15px;font-weight: 600;width: 100%; margin: 15px 0 0 0}
.ul_toon_list .toon_li_txt1 a { color: #333; text-decoration: none}
.ul_toon_list .toon_li_txt2 { font-size: 13px; color: #666;width: 100%;margin: 5px 0 0 0}
.toon_ul:after { content: ''; display: table; clear: both}
.toon_count_wrap {height: 45px;float: right; width: 80px; margin-top: 35px }
.toon_count_wrap i { margin-right: 10px;}
.toon_list_main {width: 100%; aspect-ratio:4 / 3; border-radius: 10px; border:1px solid #ddd; overflow: hidden}
.toon_list_main img {width: 100%; height: 100%; object-fit: cover;}
.toon_list_head .ul_txt1 { padding: 0 20px; font-size: 16px; font-weight: 600; text-align: left}
.toon_list_head .ul_txt2 { padding: 0 20px; font-size: 13px; font-weight: 600; text-align: left}
.toon_list_head .ul_txt3 { padding: 0 20px; margin-top: 10px; font-size: 14px; font-weight: 400; text-align: left; color: #666;}
.toon_list_head .tag_wrap {padding: 0 20px; margin-top: 10px;}  
.toon_list_head .tag_wrap span { display: inline-block; background-color: #eee; color: #666; padding: 2px 7px; margin: 1px 10px 1px 0;font-size: 12px; border-radius: 3px;}
.toon_list_head .tag_wrap span:before { content: '#'}

.reply_write_box { border: 1px solid #ddd; border-radius: 7px; background-color: #fff}
.reply_write_box .reply_write_box_head { padding: 10px; text-align: left; border-bottom: 1px solid #eee;}
.reply_write_box .reply_write_box_foot {padding: 10px; text-align: right; border-top: 1px solid #eee; font-size: 14px;}
.reply_write_box textarea { padding: 10px; text-align: left; border: 0; width: 100%;}
 

.content_inner { padding:15px; min-height:150px;}
.content_inner img { max-width:100%; height:auto}
.reply_count { font-size:16px; font-weight:bold; text-align:left; padding:15px 0;}

.reply_wrap { margin:0 0; padding:5px 0 0px 40px; background: url(../image/icon_re.gif) 20px 0 no-repeat; }
.reply_wrap .reply_inner {padding:15px; background:#f9f9f9;  border:1px solid #dee2e6; position:relative;}
.reply_summ_r {position:absolute; right:15px; top:20px; width:150px; text-align:right}
.reply_comment { padding:0 0 0 45px;}
.inline_comment {padding:0 150px 0 15px; display: inline-block; }
.summ_line2 { height:40px; overflow:hidden; text-overflow: ellipsis;  margin-bottom:15px; box-sizing:border-box; width:100%;}

.rep_area { display: none}
.rep_wrap { padding:15px 15px 15px 30px; border-top:1px dashed #ddd; background:#f4f4f4;  position: relative} 
.reply_item + .reply_item { padding:15px 0; border-top:1px solid #ddd; }
.rep_wrap::before {  content: "\F132"; font-family: bootstrap-icons !important;font-weight: 400; font-size: 12px; width:20px; height:20px; position: absolute; left: 10px; top: 15px; display: block}

.reply_item .reply_padding {padding:5px 15px; }
.reply_item .bi-hand-thumbs-up, .reply_item .bi-hand-thumbs-down {color: var(--sit-keycolor);}
.rep_wrap .btn-outline-secondary { background-color: #fff;}

.reply_item .btn-outline-primary:hover .bi-hand-thumbs-up, .reply_item .btn-outline-primary:hover .bi-hand-thumbs-down {color: #fff}
.reply_item .btn-outline-secondary:hover .bi-hand-thumbs-up, .reply_item .btn-outline-secondary:hover .bi-hand-thumbs-down {color: #fff}
.rep_wrap .btn-outline-secondary:hover .bi-hand-thumbs-up, .rep_wrap .btn-outline-secondary:hover .bi-hand-thumbs-down { color: #000 !important} 
.rep_wrap .btn-outline-secondary:hover { color: #000 !important} 

.ul_inter {}
.ul_inter li { width: 33%; float: left;margin-bottom: 0;}
.ul_inter li .thumb_wrap { padding: 10px 20px;  width: 100%;aspect-ratio:4 / 3; box-sizing: border-box; position: relative}
.ul_inter .thumb_wrap .thumb_img { width: 100%; aspect-ratio:4 / 3; overflow: hidden;border-radius: 7px; background-color: #000;}
.ul_inter .thumb_wrap .thumb_img img {width: 100%; height: 100%; object-fit: cover;  border-radius: 7px; opacity: 0.7;}
.ul_inter .thumb_wrap .thumb_lable1 { width: 100%; position: absolute; top:30px; left: 40px; font-size: 14px; font-weight: 600;  padding:3px 5px 1px 5px;line-height: 1;  background: #fff; border-radius: 20px; color: #333; font-weight: 400; font-family: 'GmarketSansMedium'; text-align: center; width: 120px; } 
.ul_inter .thumb_wrap .thumb_lable2 {  width: 100%; position: absolute; top:30px; right: 40px;  text-align: right; width: 150px; } 
.ul_inter .thumb_wrap .thumb_lable2 span { display: inline-block; font-size: 14px; font-weight: 600;  padding:3px 10px 1px 10px; line-height: 1;  background: #fff; border-radius: 20px; color: #333; font-weight: 400; font-family: 'GmarketSansMedium';}
.ul_inter .thumb_wrap .thumb_lable3 { width: 120px; height: 40px;  position: absolute; bottom:80px; left: 40px;    padding:0; }
.ul_inter .thumb_wrap .thumb_lable3 img { width: 100%; height: 100%; object-fit: contain; object-position: bottom left;}
.ul_inter .thumb_wrap .thumb_lable4 { width: 100%; position: absolute; bottom:50px; left: 40px; font-size: 16px; font-weight: 600; color: #fff;line-height: 1; text-align: left; } 
.ul_inter li .txt_wrap { height: 120px; overflow: hidden}
.ul_inter li .inter_txt1 { padding: 0 20px; font-size: 16px; font-weight: 600; text-align: left}
.ul_inter li .inter_txt2 { padding: 10px 20px; font-size: 14px; font-weight: 400; text-align: right; color: #999;}
.ul_inter:after {content: ""; display: block; clear: both}
.ul_inter li:nth-child(4) {content: ""; display: block; clear: both}

.ul_portfolio {}
.ul_portfolio li { width: 33%; float: left;margin-bottom: 30px; padding: 10px;  }
.ul_portfolio li .thumb_wrap { width: 100%; aspect-ratio:1 / 1; border-radius: 10px; overflow: hidden; box-sizing: border-box; position: relative; cursor: pointer}
.ul_portfolio .thumb_img { width: 100%;  aspect-ratio:1 / 1; overflow: hidden;border-radius: 7px;  z-index: 3; position: absolute; top:0; left: 0; filter: grayscale(100%);
    transition: filter .3s;} 
.ul_portfolio .thumb_img img {width: 100%; height: 100%; object-fit: cover;  border-radius: 7px;}
.ul_portfolio li:hover .thumb_img {filter: grayscale(0);transition: filter .3s;}
.ul_portfolio .li_txts { margin: 10px 0}
.ul_portfolio .li_txts span { display: block}
.ul_portfolio .li_txts .li_txt1 { font-size: 16px; font-weight: 600;}
.ul_portfolio .li_txts .li_txt2 { font-size: 12px; text-align: right; margin-top: 10px;} 
.ul_portfolio:after {content: ""; display: block; clear: both}
.ul_portfolio li:nth-child(4) {content: ""; display: block; clear: both}

.portfolio_summ {   padding: 20px 50px; max-width: 1000px; margin: 0 auto}
.portfolio_summ .portfolio_subj { font-size: 22px; font-weight: 700; padding: 5px;}
.portfolio_summ .portfolio_name { font-size: 16px; font-weight: 700; padding: 5px;}
.portfolio_summ .portfolio_class {font-size: 16px; font-weight: 700; padding: 5px;}
.portfolio_summ .portfolio_copy { text-align: center; padding: 20px 0 20px 0; margin-top: 20px; border-top: 1px dashed #ccc;}
.portfolio_copy p { font-size: 16px;padding: 15px;}
.bg_kako {background:#3a1c1c url("../image/kakao_img1.png") center top 270px no-repeat; background-size: 500px; padding: 100px 0 200px;}
.bg_kako2 { background-color: #ffda45; padding: 100px 0}
.kakao_txt1 { text-align: center; color: #ffda45; font-size: 40px; font-weight: 700;line-height: 1.2; padding-bottom: 20px;}
.kakao_txt2 { text-align: center; color: #3a1c1c; font-size: 20px; padding:0; line-height: 1.2; }
.btn-kakao { background-color: #3a1c1c; color: #fff;  }
.btn-kakao:hover { background-color: #1d0c0c; color: #fff;  }

.partner_head { padding: 100px 0 100px 0; background:#3a1c1c url("../image/partner_02.png") bottom right no-repeat; background-size: cover}
.partner_head h3 { font-size: 40px;font-weight: 700;line-height: 1.2; color: #fff; padding-bottom: 30px;}
.partner_head p {font-size: 16px;font-weight: 300;line-height: 1.2; color: #fff}

.ul_eduindex { margin-left: -10px; margin-right: -10px; width: 100%;}
.ul_eduindex li { width: 20%; float: left; padding: 10px; display: block;}
.ul_eduindex li a {display: block; border-radius: 10px; border: 3px solid #333;  text-align: center; width: 100%;  aspect-ratio:1 / 1;  display: flex; align-items: center; justify-content: center;} 
.ul_eduindex li a.class00 {background: url("../image/main_class00.png") top center no-repeat; background-size: cover; }
.ul_eduindex li a.class01 {background: url("../image/main_class01.png") top center no-repeat; background-size: cover; }
.ul_eduindex li a.class02 {background: url("../image/main_class02.png") top center no-repeat; background-size: cover; }
.ul_eduindex li a.class03 {background: url("../image/main_class03.png") top center no-repeat; background-size: cover; }
.ul_eduindex li a.class04 {background: url("../image/main_class04.png") top center no-repeat; background-size: cover; }
.ul_eduindex li.active a { border-color:var(--sit-keycolor); filter: grayscale(0);transition: filter .3s;box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);}
.ul_eduindex li a span { font-size: 19px; font-weight: 600; color: #fff;width: 100%; height: 100%; background:rgba(0,0,0,0.35); padding: 15px; display: flex; align-items: center;justify-content: center; border-radius: 7px; }
.ul_eduindex:last-child { content: ''; display: table; clear: both}

.tab_target { display: none; transition: 0.5s; } 
.tab_target_view { display: block; transition: 0.5s;  }
 
.edu_index_thumb { width: 230px; height: 230px; border-radius: 10px; }
.edu_index_thumb img {width: 100%; height: 100%; object-fit: cover; border-radius: 10px;}
.edu_index_txt1 { font-size: 14px; font-weight: 600; color: #fff; background-color: #666; padding: 5px 15px; border-radius: 15px;}
.edu_index_txt2 { font-size: 19px; font-weight: 600}
.table_index td, .table_index th { padding: 3px 0 3px 0}
.table_index th { text-align: left; font-weight: 400; border-right: 1px solid #ddd;}
.table_index td { text-align: left; padding-left: 20px;}
.table_index strong { color: var(--sit-keycolor);}
.edu_left { width: 20%; background-color: #777; color: #fff; text-align: center;  align-items: center; justify-content: center;display: flex; border-bottom: 1px solid #ddd;}
.edu_right { width: 80%;  border-top: 1px solid #ddd; }
.edu_left .edu_left_head { font-size: 21px; font-weight: 600; padding: 20px 0;}
.edu_right_item { border-bottom: 1px solid #ddd; padding:15px 30px }
.edu_item_label span { display: inline-block; background-color: #ddd; border-radius: 15px; padding: 3px 12px 2px 12px; font-size: 12px;}
.edu_item_title { padding: 10px 0 5px 0; font-size: 19px; font-weight: 600}
.edu_item_badge { font-size: 16px; font-weight: 600 }

.class_top_bg { background-color:rgba(0,0,0,0.5);  padding: 50px 0;}
.class_top_bg1 {background:#4d4d94 url("../image/class_bg1.png") center right no-repeat; }
.class_top_bg2 {background:#302176 url("../image/class_bg2.png") center right no-repeat; }
.class_top_bg3 {background:#74c3b1 url("../image/class_bg3.png") center right no-repeat; }
.class_top_bg4 {background:#10143d url("../image/class_bg4.png") center right no-repeat; }

.class_dtl_name { font-size: 25px; font-weight: 600; padding: 10px 20px ;  color: #fff}
.class_dtl_summ { font-size: 16px;  padding: 10px 20px; color: #fff }
.class_dtl_box { background: #fff; border: 1px solid #ccc; border-radius: 10px; padding:40px 20px;}
.class_dtl_box_txt1 {  font-size: 18px; padding-bottom: 7px; font-weight: 600; text-align: center ; }
.class_dtl_box_txt2 {  font-size: 17px; padding-top: 7px; text-align: center ; }
.class_dtl_box_txt2 strong {font-size: 29px;  letter-spacing: -1px; }

.curr_txt1 { color: var(--sit-keycolor);}
.curr_txt2 { padding: 0 0 10px 0; margin-bottom: 10px; font-size: 16px; font-weight: 600;}
.curr_txt3 { padding-bottom: 5px;}
.curr_txt3 span {margin-right: 10px;}
.curr_txt3 span::before { content: "\F309";  font-family: bootstrap-icons!important;font-weight: 400;font-size: 12px;} 
.curr_txt4 span { display: inline-block; padding: 3px 10px; border: 1px solid #eee; background-color: #f4f4f4; font-size: 12px;margin-right: 5px;}
.curr_head { width: 30%; float: left; border-right: 1px solid #ddd;}
.curr_body { width: 70%; float: left; padding-left: 30px;}
.table_white { color: #fff}
.table_white th, .table_white td { padding:5px;}

.terms_wrap p { padding: 10px 0;}
.pwd_txt1 { background:url("../image/icon_pwlock.png") 30px center no-repeat; padding: 20px 0 20px 100px; font-size: 26px; margin-bottom: 10px }
.pwd_txt2 {  font-size: 16px;}
 

.row_section { display:block}
.side_section { width: 220px; float: left;}
.right_section { width:calc(100% - 360px); float: right; margin-right:100px; }
.row_section:after { content: " "; display: table; clear: both}

.side_wrap { padding-left: 20px;}
@media (max-width: 992px) {
  .side_wrap { padding-left: 0;}
}
.side_h3 { font-size: 26px; font-weight: 600; text-align: left;}
.side_ul { padding: 20px 0}
.side_ul li {display: block; }
.side_ul li a { display: block; padding: 3px 0;font-size: 16px; color: #222; font-weight: 700; cursor: pointer}
.side_ul li a:hover {  color: var(--mbs-keycolor)}
.side_ul ul {padding: 0; margin-top: 5px;margin-bottom: 20px;}
.side_ul ul li a { display: block; padding:3px 0;font-size: 14px; color: #222; font-weight: 400}
.side_ul ul li a:hover {  color: var(--mbs-subcolor)} 
.side_ul ul li.active a {  color: var(--mbs-keycolor) }
.right_h4 {font-size: 30px;  font-weight: 700; text-align: left; padding-bottom: 40px;}
.right_h4 i {font-size: 20px;  color: #999;   display: inline-block; margin: 0 10px; vertical-align: 2px; } 
.right_h4 .h4_record {font-size: 30px;  color: #333; font-weight: 400; }
.right_wrap { width: 100%;} 
.txt_info {   padding-top: 5px; color: #999; }
.point_view { font-size: 19px; text-align: right; padding: 10px;}
.box_info { padding:20px; background-color: #f4f4f4; border-radius: 10px;}

#main_popup_wrap.open {bottom: 0; transition: all .5s; visibility:visible; opacity: 1;transition: all .5s; }
#main_popup_wrap { width: 400px; height: 540px; position: fixed; bottom:-100%; right: 90px; z-index: 19; overflow: hidden;transition: all .5s; visibility:hidden; opacity: 0}
.main_popup_list {width: 400px; height: 540px;z-index:20; position:relative;} 
.main_pop_item { position: absolute; bottom: 0; right: 0}
.main_pop_body { width: 400px; height: 500px;  overflow: hidden}
.main_pop_body img { width: 100%; height: 100%; object-fit: cover; object-position: center center}
.main_pop_footer { width: 100%; height: 40px; text-align: left; padding: 10px 10px; box-sizing: border-box; background-color: #222}
.main_pop_footer .main_popup_btn { display: inline-block; color: #fff; padding: 0 10px; font-size: 14px; cursor: pointer; vertical-align: middle}
.main_popup_btn + .main_popup_btn:before { content: ''; width: 1px; background-color: #ccc; height: 15px; display: inline-block; vertical-align: middle; margin-right: 15px;} 

.edu_float_btn { position: fixed; z-index: 99; width: 200px; height: 50px; right: 120px;  bottom: -100px; opacity: 0;transition: bottom 0.6s ease-out, opacity 0.6s ease-out;}
.edu_float_btn a { display:block; width: 200px; height: 50px; border-radius: 25px; text-align: center; background-color: #f15c2f; color: #fff; font-size: 16px; line-height: 50px;  }
.edu_float_btn a:hover {background-color: #d3491f; }
.edu_float_btn.show {
  bottom: 20px; /* 최종 위치 */
  opacity: 1;
}

.thumb_200 {width: 200px; height: 200px; margin: auto}
.thumb_200 span { display: block; width: 200px; height: 200px }
.thumb_200 img { height: 100%; width: 100%; object-fit:contain;  }
.thumb_100 {width: 100px; height: 100px; margin: auto}
.thumb_100 span { display: block; width: 100px; height: 100px }
.thumb_100 img { height: 100%; width: 100%; object-fit:contain;  }

.thumb_80 {width: 80px; height: 80px; margin: auto}
.thumb_80 span { display: inline-block; width: 80px; max-height: 80px; }
.thumb_80 img { height: 100%; width: 100%; object-fit:contain;  }
.thumb_75 { width: 75px; height: 75px;}
.thumb_75 img {  height: 100%; width: 100%; object-fit:contain; }
.thumb_50 { width: 50px; height: 50px;}
.thumb_50 img {  height: 100%; width: 100%; object-fit:contain; }
.thumb_200_150{width: 200px; height:150px; margin: auto}
.thumb_200_150 span { display: block; width: 200px; height: 150px }
.thumb_200_150 img { height: 100%; width: 100%; object-fit:contain; }
.thumb_75_50 {width: 75px; height:50px; margin: auto} 
.thumb_75_50 img { height: 100%; width: 100%; object-fit:contain; }
.user_wrap SPAN { display: inline-block; padding: 0 10px;}

.rotat_90::after {
  transform: rotate(90deg);
}

.txt_line { text-decoration: line-through; margin-right: 20px;position: relative}
.txt_line::after { content: "\f135";  font-family: bootstrap-icons!important; font-weight: 400; right: -20px; position: absolute; display: inline-block} 
.count_txt_line { text-decoration: line-through; margin-right: 40px;position: relative; letter-spacing: -1px; font-weight: 300}
.count_txt_line::after { content: "\f135";  font-family: bootstrap-icons!important; font-weight: 400; right: -40px; position: absolute; display: inline-block} 
 
.pop_head { background-color: #111; color: #fff; padding: 15px; }
.pop_h1 { font-size: 16px; font-weight: 600; color: #fff;}
.pop_body { padding: 20px;}

.teacher_box .teacher_item { padding: 15px; border: 1px solid #ddd; border-radius: 10px; margin-bottom: 20px;}
.teacher_box .teacher_thumb { width: 300px; height: auto; margin: 0 auto; border-radius: 10px;}
.teacher_box .teacher_thumb img { width: 100%; height: auto;border-radius: 10px;}
.teacher_item .teacher_txt1 { text-align: center; padding: 10px 0 ; font-size: 16px; font-weight: 500;}
.teacher_item .teacher_txt2 { text-align: center;  font-size: 21px; font-weight: 600; color: #000}
.teacher_item .teacher_txt3 { text-align: left; padding: 10px 20px;  font-size: 21px; font-weight: 600; color:var(--sit-keycolor);}
.teacher_item .teacher_txt4 { text-align: left; padding: 10px 20px;  }

.agree_sm_wrap { height:100px; margin:10px; background-color:transparent; text-align:left; overflow: auto; border: 1px solid #ddd; padding: 10px;}
.agree_sm_wrap table th, .agree_sm_wrap table td {padding: 5px 5px; }
.agree_sm_wrap p { padding:0; margin:5px 0}
.display_n { display:none}
.btn_muted { color: #999;  cursor: pointer; }
.m_div1 { display:inline-block; margin:0 0 0 20px;}
.ul_flat li { padding: 5px; }

.like_box { border: 1px solid #ddd; padding: 20px; width: 150px; margin: 30px auto; border-radius: 10px;}
.like_label span { width: 50%; display: inline-block; float: left; height: 40px; cursor: pointer;text-align: center}
.like_label .like_label1 i { font-size: 30px; color: #222;}
.like_label .like_label1 i.bi-chat-square-heart-fill {color: var(--sit-keycolor) !important; }
.like_label .like_label2 { font-size: 18px; line-height: 40px;} 
.like_label:after { content: ''; clear: both; display: table}
.like_count { width: 100%; font-size: 16px; color: #999; margin-top: 10px; text-align: center}