@charset "utf-8"; 
@import url('//fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Noto+Sans+KR:wght@100..900&display=swap');
@import url('fonts/XEIcon-2.3.3/xeicon.min.css');

/*-----------------------------------------------------------------*/
/* reset
/*-----------------------------------------------------------------*/
html, body {width:100%; height:100%;}
article, aside, canvas, details, figcaption, figure, footer, header, hgroup, menu, main, nav, section {display:block;}
html, body, div, span, strong, a, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, acronym, address, big, cite, code, del, dfn, em, ins, kbd, q, samp, strike, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, /*img, table, caption, tbody, tfoot, thead, tr, th, td,*/ article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {margin:0; padding:0; }
body, input, textarea, select, button, table {font-size:12px; /*color:#555;*/}
input, select, textarea, button, ul, ol, li, dl, dt, dd {vertical-align:middle;}
/*input[type='text'], input[type='file'], input[type='password'] {border:1px solid #ccc; background:#fff; height:20px; line-height:20px; text-indent:3px; padding:0;}*/
textarea {padding:5px; border:1px solid #ccc; background:#fff;}
select {border:1px solid #ccc; border-radius:0; height:22px; line-height:22px; padding:0 20px 0 3px; padding-right:0\0/IE8+9; -webkit-appearance:none; -moz-appearance:none; appearance:none; -webkit-box-sizing:border-box; box-sizing:border-box; background:#fff url('../img/bu_select.png') no-repeat calc(100% - 5px) center; padding-right: 20px !important; }
select::-ms-expand { /* IE 8 */ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; /* IE 5-7 */ filter: alpha(opacity=0); /* Good browsers :) */ opacity:0;}
/* 크롬핵 */ @media screen and (-webkit-min-device-pixel-ratio:0) {}
input[type='checkbox'], input[type='radio'] {width:15px; height:15px; vertical-align:middle !important; margin-left:0; margin-right:0;}
label {display:inline-block; cursor:pointer; vertical-align:middle; margin-right:10px;}
legend, hr {visibility:hidden; overflow:hidden; position:absolute; top:0; left:0; width:0; height:0;padding:0; font-size:0; line-height:0}
button {cursor:pointer;}
table {/*border-spacing:0; table-layout:fixed; border-collapse:collapse;}*/}
th, td {word-wrap:break-word; word-break:break-all; /*vertical-align:middle;*/ line-height:1.4;}
caption {visibility:hidden; width:0px; height:0px; overflow:hidden; font-size:0; line-height:0;}
col {display:table-column;}
iframe {border:0; margin:0; overflow:hidden;}
img, fieldset {border:0; vertical-align:middle;}
ul, ol, nav {list-style:none;}
em, address {font-style:normal}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:''; content:none;}
/*a:link, a:active, a:focus {color:#666; text-decoration:none; -webkit-transition: all .5s; transition: all .5s;}*/
/* gnb쪽 마우스오버시 색상 페이드인 지연없이 바로 변경되게끔 요청해서 원문 주석 처리 LHH 2019-10-25 금 */
a:link, a:active, a:focus {color:#666; text-decoration:none;}
a:hover {color:#5396fe/*!important*/; text-decoration:none;}
.hidden {display:block; font-size:0; width:1px; height:1px; line-height:0; overflow:hidden; position:absolute; left:-9999px; text-indent:-9999px;}
.hand, .pointer {cursor:pointer !important;}
.underline {text-decoration:underline;}
.relative {position:relative !important;}
.absolute {position:absolute !important;}
.small {font-size:11px;}
.desc {font-size:11px; color:#848484;}
.hide {display:none;}
.unvisibility {visibility:hidden;}
.normal {font-weight:normal !important;}
strong, b, .bold {font-weight:600; }
.input-box-default-text {color:#515151 !important; letter-spacing:-1px;}
.pure-g {letter-spacing: 0em!important;}

body { font-family:'Noto Sans KR','Malgun Gothic','Dotum','AppleGothic', sans-serif; }



/*-----------------------------------------------------------------*/
/* 공통요소
/*-----------------------------------------------------------------*/
/* placholder */
::-webkit-input-placeholder {color:#aaa;} 
::-moz-placeholder {color:#aaa;}
:-ms-input-placeholder {color:#aaa;}
:-moz-placeholder {color:#aaa;}
::-webkit-input-title {color:#aaa;}
::-moz-title {color:#aaa;}
:-ms-input-title {color:#aaa;}
:-moz-title {color:#aaa;}

/* 하이퍼링크 */
a:link, a:visited, a:active	 {color:#222;}
a:hover {color:#000; text-decoration:none;}










/*-----------------------------------------------------------------*/
/* layout
/*-----------------------------------------------------------------*/
.wrap {position: relative; width: 100%; overflow: hidden;}
.container{
	position: relative;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-top: 121px; 
    background-color: #fff;
	}
.container:before, .container:after{
    content: " ";
    display: table;
}
.inner_1140 {    
    position: relative;
    width: 100%;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-left: 1rem;
    padding-right: 1rem;
}
.inner_no_pad {
    position: relative;
    width: 100%; 
    margin: 0 auto;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;    
}
.inner_no_pad > div {
    -webkit-box-sizing: border-box;
    box-sizing: border-box; 
    padding-left: 10px; 
    padding-right: 10px;
}
.flipped > * {
    float: left;
}
.clearfix:after {
  content: " ";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}
.blk_none {font-size: 0;}
.hide {display: none;}

#overlay_t { background-color: #000; bottom: 0; left: 0; opacity: 0.5; filter: alpha(opacity = 50); /* IE7 & 8 */ position: fixed; right: 0; top: 0; z-index: 99; display:none;}
#popup_layer { width:900px; margin-bottom:30px; background:#fff; border:solid 1px #ccc; position:absolute; top: 60px; left:50%; margin-left:-450px; -webkit-box-shadow: 0px 1px 20px #333; box-shadow: 0px 1px 20px #333; z-index:100; display:none;}
#popup_layer img {width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 36px;}

#youtube_overlay_t { background-color: #000; bottom: 0; left: 0; opacity: 0.5; filter: alpha(opacity = 50); /* IE7 & 8 */ position: fixed; right: 0; top: 0; z-index: 99; display:none;}
#youtube_popup_layer { max-width:700px; margin-bottom:30px; background:#fff;  position:absolute; top: 60px; left:50%; margin-left:-350px; -webkit-box-shadow: 0px 1px 20px #333; box-shadow: 0px 1px 20px #333; z-index:100; display:none;}
#youtube_popup_layer img {width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 36px;}
#youtube_popup_layer .close { position:absolute; right:-40px; top:-40px; width:35px; height:35px; padding:0; cursor:pointer; }












/*-----------------------------------------------------------------*/
/* helper
/*-----------------------------------------------------------------*/
.main_clr {color: #29e5f3;}
/*.main_clr_snd {color: #ff892a;}*/
.sub_clr {color: #ffceff;}
.dark_base_clr {color: #252525;}
.base_clr {color: #ececec;}
.base_light_clr {color: #f1f1f1;}
.base_light_clr_02 {color: #f8f8f8;}
/* tab */
ul.btn_tab {margin: 80px auto;}
ul.btn_tab li {text-align: center;}
ul.btn_tab li.on {}
ul.btn_tab li a {display: block; border: 1px solid #000; color: #000; margin-left: 5px; margin-right: 5px; padding: 14px 0px; -webkit-box-sizing: border-box;box-sizing: border-box; font-size: 16px; border-radius: 30px;}
ul.btn_tab li a.on {color: #fff; background: #000;}








/*-----------------------------------------------------------------*/
/* heading
/*-----------------------------------------------------------------*/
h1 {}
/* h1 a {display: block; background: url(../img/ksteno/logo@2x.png) -11px top no-repeat; background-size: contain; height: 60px;} */
h1 a {display: block; background: url(../img/ksteno/logo2.png) /* -11px  */ 0px no-repeat; background-size: contain; height: 52px;}
h2.title {text-transform: uppercase; font-size: 24px; text-align: center; margin-bottom: 15px; margin-top: 20px;word-break:keep-all;}
h3.title {font-weight: 300; font-size: 20px;word-break:keep-all;}
h3 em {font-weight: 700;}
h4 {font-weight: 300;}
h4 em {font-weight: 700;}
h2.main_title { font-size: 24px; text-align: center; margin-bottom: 15px; margin-top: 20px;}







/*-----------------------------------------------------------------*/
/* header
/*-----------------------------------------------------------------*/
header {position: relative;}
header::before {
    content: attr(class);
    position: absolute;
    top: 0px;
    left: 0px;
    width: 100%;
    height: 31px;
    background: #e7e7e7;
    z-index: -1;
    font-size: 0px;
}
header .inner_1140:last-child {padding-top: 20px; padding-bottom: 10px;}
.top_menu {}
.top_menu a {display: block; line-height: 31px; height: 30px; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; font-size: 12px;}
/* .top_menu a:first-child {text-align: left;} */
.top_menu a.active {background: #9b9b9b; color: #fff;}
.top_menu a.link { margin-left:auto; font-weight:600; }

/* gnb */
nav {}
nav li { text-align: center; line-height: 50px; -webkit-box-sizing: border-box; box-sizing: border-box; }
nav li a { font-size: 16px; }
.main_h {
  position: fixed;
  top: 0px;
  left: 0px;
  height: 121px;
  z-index: 9999;
  width: 100%;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
}
.main_h::after {content:attr(class); position: absolute; width: 100%; height: 121px; z-index: -2; background-color: #fff; opacity: 1; font-size: 0px; top: 0px; left: 0px;}


@media print {
	.main_h, .sub_spot, footer, .noprint  {display:none !important; height:0 !important;}
}





/* quick_menu */
a.educator { color:#fff !important; background-color:#235b8d !important; border-color:#235b8d !important; }
.quick_menu { text-align:right; position:relative; /*padding-right:100px;*/ }
.quick_menu a {display: inline-block; -webkit-box-sizing: border-box; box-sizing: border-box; margin-right: 5px; font-size: 14px; line-height: 50px; color: #5a5a5a; float:none;}
.quick_menu a.link {border: 1px solid #5a5a5a; border-radius: 12px; padding: 4px 10px; margin-right: 0px; font-size: 13px; line-height: 13px; /*margin-top: 14px;*/ }
/*
.quick_menu a.link.educator { position:absolute; top:0; right:0; }
.quick_menu a.link.site { position:absolute; bottom:0; right:0; }
*/

/* search */
.search {position: relative; font-size: 0; background: #fff; overflow: hidden; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 1rem; -webkit-box-shadow: 2px 2px 2px 2px #aaa; box-shadow: 2px 2px 2px 2px #aaa;}
.search p {position: relative; font-size: 1.2rem; line-height: 40px; z-index: 99; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 10px;}
.search form {position: relative; z-index: 99;}
.search input[type='text'] {width: 83%; height: 40px; background: #fff; border: none; padding-left: 2%; font-size: 14px; margin-left: 3%;}
.search button {width: 10%; height: 40px; background: #fff; border: none; font-size: 16px;}
.search div:empty {position: absolute; top: -571px; right: 0px; z-index: 1; -webkit-transform-origin: bottom; transform-origin: bottom; -webkit-transform: rotate(56deg); transform: rotate(56deg); background-color: #ebebeb; width: 2000px; height: 2000px;}










/*-----------------------------------------------------------------*/
/* main
/*-----------------------------------------------------------------*/
main {padding-top: 121px;}
/* spot */
.spot_wrap {position: relative;}
.spot {position: relative; margin:0 auto;}
.spot img {width: 100%; height: auto;}

.inner_1140 strong{font-weight: 700;}

.visual {height: 600px; color: #313131;}
.spot_01 {background: #a8b7d5 url(../img/ksteno/main_banner_1_v2.png) center bottom no-repeat; background-size:contain; }
.spot_02 {background: #fce3d7 url(../img/ksteno/main_banner_2_v2.png) center bottom no-repeat; background-size:contain; display:none;} 
.spot_03 {background: url(../img/ksteno/ceo_pic_bg.png) no-repeat 90% bottom / auto 90%, url(../img/ksteno/main_banner_5.png) no-repeat center bottom / cover; display:none; } /* 초기에 안보이게 하면 slick이 알아서 inline-block 처리함. LHH 2019-11-18 월 */
.spot_04 {background: url(../img/ksteno/main_banner_3_v2.png) right bottom no-repeat; background-size:auto 90%; display:none;} 
.spot_05 {background: #d8dff6 url(../img/ksteno/main_banner_4_v2.png) center bottom no-repeat; background-size:contain; display:none;} 
.spot_06 {background: url(../img/ksteno/main_banner_6_pc.png) no-repeat 90% center / auto auto, url(../img/ksteno/main_banner_6.png) no-repeat center bottom / cover; display:none; } 
.spot_07 {background: #000000 url(../img/ksteno/main_banner_4_v3.png) center bottom no-repeat; background-size:contain; display:none;} 
.spot_08 { 
	background: url(../img/ksteno/main_banner_8_img.png) no-repeat 90% center / contain, url(../img/ksteno/main_banner_8_bg_pc.jpg) no-repeat center bottom / cover;
	background-color:#141302; display:none;}
@media only screen and (min-width: 48em) and (max-width: 64em) {
	.spot_04 { background-size:auto 80%; }
	.spot_06 { background-size: 40% auto, cover; }
	.spot_08 { 
	background: url(../img/ksteno/main_banner_8_img.png) no-repeat 100% bottom / 40% auto, url(../img/ksteno/main_banner_8_bg_mo.jpg) no-repeat center bottom / cover;
	background-color:#141302; }
}
@media only screen and (min-width: 35.5em) and (max-width: 48em) {
	.spot_01 { background-position:right bottom; }
	.spot_02 { background-position:right bottom; } 
	.spot_03 { background-size: auto 50%, cover; }
	.spot_04 { background-size: 60% auto; }
	.spot_05 { background-position:right bottom; }
	.spot_06 { background-size: 40% auto, cover; background-position:90% 90%, center bottom; }
	.spot_07 img { height:50px; }
	.spot_08 { 
	background: url(../img/ksteno/main_banner_8_img.png) no-repeat 100% bottom / 40% auto, url(../img/ksteno/main_banner_8_bg_mo.jpg) no-repeat center bottom / cover;
	background-color:#141302; }
}
@media screen and (max-width: 35.5em) {
	.spot_03 { background-size: auto 50%, cover; }
	.spot_04 { background-size: 60% auto; }
	.spot_06 { background-size: 40% auto, cover; background-position:90% 90%, center bottom; }
	.spot_07 img { height:40px; }
	.spot_08 { 
	background: url(../img/ksteno/main_banner_8_img.png) no-repeat 100% bottom / 40% auto, url(../img/ksteno/main_banner_8_bg_mo.jpg) no-repeat center bottom / cover;
	background-color:#141302; }
	.spot_08 img { width:75%; }
} 

.spot_copy {padding-top: 100px;padding-right:40%;}
.spot_copy * {font-weight: 300;}
.spot_copy h2 {font-size: 42px; font-weight: 300; line-height:1.3; letter-spacing:-0.025em; text-align: left;}
.spot_copy h2 em {font-weight: 700;}
.spot_copy h2 span {position: relative;}
.spot_copy h2 span::after { content: attr(class); position: absolute; bottom: 5px; left: 0px; width: 100%; height: 1px; background-color: #fff; z-index: 1; }
.spot_copy h2 + p {margin-top: 20px; margin-bottom: 60px; font-size: 20px; line-height:1.6; word-break:keep-all; }
.spot_copy mark { background-color:#29ABE2; color:#fff; }
.spot_copy > .spot_link {display: block; border: 1px solid #313131; border-radius: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 8px; padding-bottom: 8px; font-size: 16px; width: 170px; color: #313131; text-align: center;}

.spot_01 h2 { color:#264c95; }
.spot_01 h2 em { color:#4d2b88; }
.spot_02 h2 { color:#7cb9ab; }
.spot_02 h2 em { color:#5fb3e0; }
.spot_03 h2 {  }
.spot_03 h2 em {  }
.spot_04 h2 { color:#3a2899; }
.spot_04 h2 em { color:#22366a; }
.spot_05 h2 { color:#3a2899; }
.spot_05 h2 em { color:#ff476e; }
.spot_06 h2 { color:#235b8d; }
.spot_07 h2 { color:#ffffff; }
.spot_07 h2 em { color:#ffffff; }
.spot_07 p { color:#ffffff; }
.spot_07 .spot_link { color:#ffffff; border: 1px solid #ffffff;}


.spot_nav {position: absolute; bottom: 70px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); clear: both; width:80%; max-width:1000px; text-align:center; display:flex; }
.spot_nav li { flex:1; margin: 0px 10px; height: 3px; background-color: #afafaf; opacity: .3; cursor: pointer;}
.spot_nav li button {border: none; display: none;}
.spot_nav li.slick-active {opacity: .75;}

/* cnt */
.cnt_wrap {margin-top: 80px!important; margin-bottom: 80px!important;}
.cnt_menu {}
.cnt_menu > div {position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #ddd; background: url(../img/ksteno/main_cnt_01@2x.jpg) left top no-repeat; background-size: cover;}
/*.cnt_menu:nth-of-type(2) > div {background: url(../img/ksteno/main_cnt_02@2x.jpg) left top no-repeat; background-size: cover;}*/
.cnt_menu:nth-of-type(2) > div {background: #f1f1f1 url(../img/ksteno/educator_mockup.png) 100% center no-repeat; background-size: 60% auto;}
/*.cnt_menu:last-of-type > div {background: url(../img/ksteno/main_cnt_03@2x.jpg) left top no-repeat; background-size: cover;}*/
.cnt_menu:last-of-type > div {background: url(../img/ksteno/main_cnt_02@2x.jpg) left top no-repeat; background-size: cover;}
.cnt_menu > div a {position: relative; display: block; height: 253px;}
.cnt_menu > div a > span {position: absolute; top: 15px; left: 15px; font-size: 14px;}
.cnt_menu > div a p {position: absolute; bottom: 15px; left: 15px; font-size: 18px; width: 100%;}
.cnt_menu > div a p em {font-weight: 700;}
.cnt_menu > div a p span {position: absolute; right: 30px; bottom: 0px;}


/* brd */
.brd_cnt {}
.brd_cnt > div {position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #f4f4f4; padding: 20px 20px 25px;min-height: 230px;}
.brd_cnt:nth-of-type(2) > div {background-color: #eff6f8;}
.brd_cnt > div h3 {font-size: 18px;}
.brd_cnt > div h3 span{float: right;}
.brd_cnt > div ul {margin-top: 15px;}
.brd_cnt > div ul li {line-height: 2.2; }
.brd_cnt > div ul li a {display: block; font-size: 14px;}
.brd_cnt > div ul li a span {display: block; width:75%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}
.brd_cnt > div ul li a span:last-child {width: 25%; text-align: right;}

.brd_cnt:nth-of-type(3) > div {background-color: #ccd9fc;}
.brd_cnt:nth-of-type(3) > div ul {}
.brd_cnt:nth-of-type(3) > div ul li {position: relative;}
.brd_cnt:nth-of-type(3) > div ul li::before {content: attr(class); position: absolute; top: 49%; left: 0px; z-index: 2; width: 3px; height: 3px; border-radius: 100%; background-color: #5a5a5a;}
.brd_cnt:nth-of-type(3) > div ul li a {padding-left: 15px; display: block; width: 95%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}


/* media */ 
.media_wrap {background-color: #e9efff; padding-top: 50px; padding-bottom: 100px; margin:0 !important;}
.media_wrap iframe { vertical-align:top; }
.media div {padding-left: 5px; padding-right: 5px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.media img {max-width: 100%;}





/* prd_cas */
.cnt_wrap.prd_cas {position: relative; width: 100%; height:1030px; background: url(../img/ksteno/prd_cas_bg.jpg) left top repeat-x;background-position-y: -128px; margin-top:40px !important;}

.main_desc {font-size: 16px; line-height: 1.8; margin-top: 50px; text-align: center;}
.prd_img {text-align: center; }
.prd_img img {width: 507px; height: 300px; margin: 0 auto;}
/* tab */
.tab_wrap {text-align: center;}
.tab_nav {margin-top: 40px; margin-bottom: 50px; width: 100%;}
.tab_nav li {line-height: 50px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 20px; padding-right: 20px; }
.tab_nav li a {display: block; font-size: 16px; border-bottom: 1px solid #aaa; color: #000;outline:none;}
.tab_nav .slick-current.slick-active {background-color: #000; border-radius: 30px; }
.tab_nav .slick-current.slick-active a {color: #fff; border-bottom: 0px;}

.tab_inner {display: none; font-size: 14px; text-align: left; line-height: 1.8; word-break:keep-all; }
/*.tab_inner.active {display: block;}*/








/*-----------------------------------------------------------------*/
/* aside
/*-----------------------------------------------------------------*/










/*-----------------------------------------------------------------*/
/* footer
/*-----------------------------------------------------------------*/
footer {position: relative;}
footer::before {content: attr(class); position: absolute; top: 0px; left: 0px; width: 100%; height: 160px; z-index: -1; background-color: #93b0ff;}
/* cs banner */
.cs_banner {position: relative;}
.cs_banner > * {color: #fff!important;}
.cs_banner > em {font-size: 26px; line-height: 160px;}
.cs_banner p {position: relative; height: 160px; background: url(../img/ksteno/footer_call@2x.png) 35% bottom no-repeat; background-size: 117px 103px; font-size: 16px; font-weight: 300;}
.cs_banner p span {position: absolute; top: 40%; left: 50%;}
.cs_banner p span em {font-size: 24px; display: block; font-weight: 700;}
.cs_banner a {position: absolute; top: 50%; right: 10px; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 200px; height: 50px; text-align: center;line-height: 50px; font-size: 18px; border: 1px solid #fff; border-radius: 30px; -webkit-box-sizing: border-box; box-sizing: border-box;}

/* foot_menu */
.foot_menu {}
.foot_menu > ul {}
.foot_menu > ul > li {-webkit-box-sizing: border-box;box-sizing: border-box;}

.foot_menu > ul > li > a {display: block; font-weight: 700; font-size: 14px; margin-top: 30px; margin-bottom: 20px;}
.foot_menu > ul > li > ul {line-height: 1.8;}

.foot_menu .sns { position:absolute; top:auto; bottom:16px; right:16px; left:auto; }
.foot_menu .sns li { display:inline-block; width:36px; }
.foot_menu .sns li a { display:block; }

address {margin: 30px 0px 50px; color: #555;}

.foot_quick {margin-bottom: 30px; padding: 0px!important;}
.foot_quick a {display: block; border: 1px solid #aaa; border-radius: 3px; -webkit-box-sizing: border-box; box-sizing: border-box; text-align: center; font-size: 14px; padding-top: 4px; padding-bottom: 4px;}
.foot_quick ul li a {margin-left: 10px; margin-right: 10px; color: #555;}
.foot_quick+p {float: right; text-align: right; -webkit-box-sizing: border-box; box-sizing: border-box;padding-right: 10px; color: #555;}







/*-----------------------------------------------------------------*/
/* sub
/*-----------------------------------------------------------------*/
.sub_spot { height: 265px; position: relative;}
.sub_spot.story {background: url(../img/ksteno/sub_story@2x.jpg) center center no-repeat; background-size: cover;}
.sub_spot.store {background: url(../img/ksteno/sub_store@2x.jpg) center center no-repeat; background-size: cover;}
.sub_spot.business {background: url(../img/ksteno/sub_business@2x.jpg) center center no-repeat; background-size: cover;}
.sub_spot.function {background: url(../img/ksteno/sub_function@2x.jpg) center center no-repeat; background-size: cover;}
.sub_spot.cs {background: url(../img/ksteno/sub_cs@2x.jpg) center center no-repeat; background-size: cover;}
.sub_spot.mall {background: url(../img/ksteno/sub_mall@2x.jpg) center center no-repeat; background-size: cover;}
.sub_spot h2 {position: absolute; top: 100px; left: 50%; z-index: 99; -webkit-transform:translateX(-50%); transform:translateX(-50%); color: #fff; font-weight: 300;}
.sub_spot h2 em {font-weight: bold; }
.sub_spot h2 > span {position: relative; color: #fff;}
.sub_spot h2 > span::after {
    content: attr(class);
    position: absolute;
    bottom: 2px;
    left: 0px;
    width: 100%;
    height: 1px;
    background: #fff;
    z-index: 999;
    font-size: 0;
}


.page_nav {position: absolute; bottom: 0px; left: 0px; z-index: 1; background-color: #fff; width: 100%; height: 50px; opacity: .7;}
.page_nav ul {}
.page_nav ul li {border-right: 1px solid #e7e7e7; text-align: center; color: #222; line-height: 50px; height: 50px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 20px; padding-right: 20px; width: 200px;}
.page_nav ul li:first-child {border-left: 1px solid #e7e7e7; width: 50px; padding: 0px;}
.page_nav ul li:last-child {width: 240px; font-size: 14px;}
.page_nav ul li:last-child i {float: right; color: #222; line-height: 60px; font-size: 14px;}
.page_nav ul li a {color: #222; font-size: 14px;}






/* history */
.cnt_blk {position: relative; margin-bottom: 80px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 50px; padding-bottom: 50px;}
.add_line {position: absolute; top: 0px; left: 50%; width: 1px; height: 100%; background-color: #202256; z-index: 1; padding: 0px!important;}
.add_line::before {content: attr(class); position: absolute; top: 0px; left: -3px; z-index: 2; width: 7px; height: 7px; border-radius: 100%; background-color: #202256; font-size: 0px;}

/* cnt_odd */
.history .cnt_blk:nth-of-type(odd) {padding-left: 50px;}
.history .cnt_blk:nth-of-type(even) {padding-right: 50px;}
.history .cnt_blk:nth-of-type(odd) .half_cnt_r {position: relative; height: 340px;}
.history .cnt_blk:nth-of-type(odd) .half_cnt_l {position: relative;}
.history .cnt_blk:nth-of-type(odd) .add_img img {position: absolute; top: 40px; left: 0px; z-index: 9; width: 100%;}
.history .cnt_blk:nth-of-type(odd) em.year {position: absolute; top: -70px; left: 0px; z-index: 99; font-size: 60px; font-weight: bold; color: #202256; padding-left: 5px;}

.history .cnt_blk:nth-of-type(odd) ol {margin-left: 55px; margin-top: 15px;}
.history .cnt_blk:nth-of-type(odd) ol li {line-height: 3; font-size: 14px; clear: both;}
.history .cnt_blk:nth-of-type(odd) ol li em {color: #202256; font-weight: bold; margin-right: 70px;}

.history .cnt_blk:nth-of-type(odd) .year_bg {position: absolute; top: 50%; left: 47%; z-index: 0; -webkit-transform: translateY(-50%) rotateZ(270deg); transform: translateY(-50%) rotateZ(270deg); font-size: 130px; color: #dfdfff; font-weight: bold; opacity: .3; }

/* cnt_even */
.history .cnt_blk:nth-of-type(even) .half_cnt_r {position: relative;}
.history .cnt_blk:nth-of-type(even) .half_cnt_l {position: relative; min-height: 340px;}
.history .cnt_blk:nth-of-type(even) .add_img img {position: absolute; top: 40px; right: 0px; z-index: 9; width: 100%;}
.history .cnt_blk:nth-of-type(even) em.year {position: absolute; top: -70px; right: 80px; z-index: 99; font-size: 60px; font-weight: bold; color: #202256; padding-left: 5px;}

.history .cnt_blk:nth-of-type(even) ol {margin-left: 55px; margin-top: 15px;}
.history .cnt_blk:nth-of-type(even) ol li {line-height: 3; font-size: 14px; clear: both;}
.history .cnt_blk:nth-of-type(even) ol li em {color: #202256; font-weight: bold; margin-left: 0px;}
.history .cnt_blk:nth-of-type(even) ol li span {margin-left: 30px;}
.history .cnt_blk:nth-of-type(even) .year_bg {position: absolute; top: 50%; left: 25%; z-index: 0; -webkit-transform: translateY(-50%) rotateZ(270deg); transform: translateY(-50%) rotateZ(270deg); font-size: 130px; color: #dfdfff; font-weight: bold; opacity: .3; }

.history .cnt_blk em.year::before {
    content: attr(class);
    position: relative;
    font-size: 0;    
}
.history .cnt_blk em.year::after {
    content: attr(class);
    position: absolute;
    top: 25px;
    left: 0px;
    width: 8px;
    height: 45px;
    background: #202256;
    z-index: 999;
    font-size: 0;    
}



/* store */
/* sub_tit_desc */
.store .sub_tit_desc h3 {margin: 80px auto; text-align: center;}
.store .sub_tit_desc h3 span {position: relative;}
.store .sub_tit_desc h3 span::before {  
    position: absolute; 
    top: -8px;
    left: -30px; 
    z-index: 999;
    content: "\201C";
    font-size: 55px;
    font-family: Georgia;
    color: #ddd;
    vertical-align: middle;
}
.store .sub_tit_desc h3 span::after {
    position: absolute; 
    top: -5px;
    right: -28px; 
    z-index: 999;
    content: "\201D";
    font-size: 55px;
    font-family: Georgia;
    color: #ddd;
    vertical-align: middle;
}
.sub_cnt.store {margin-bottom: 160px;}

.prd_menu h4 {font-size: 20px;}
.prd_menu > div > div {padding-lefT: 10px; padding-right: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; margin-bottom:20px; }
.prd_01, .prd_02, .prd_03, .prd_04 {display: block; position: relative; -webkit-box-sizing: border-box;box-sizing: border-box; border: 1px solid #ddd; padding: 50px; -webkit-transition: all .6s; transition: all .6s; overflow: hidden;}
.prd_menu a > div {position: absolute; left: 0px; z-index: 9; background-color: #dbdefd; opacity: .8; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 50px; -webkit-transition: all .6s; transition: all .6s;}
.prd_menu a > div p {position: relative; font-size: 16px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 14px;}
.prd_menu a > div p::before {content: attr(class); position: absolute; top: 0px; left: 0px; width: 5px; height: 100%; z-index: 99; font-size: 0px; background-color: #000;}
.prd_menu a > div p em {font-weight: 700; display: block;}


/* prd 01 */
/*
.prd_01 {height: 580px; background: url(../img/ksteno/prd_01@2x.jpg) left top no-repeat; background-size: cover;}
.prd_01 > div {padding: 80px 50px !important; bottom: -100%;}
*/
.prd_01 {height: 49%; /*background: url(../img/ksteno/prd_01@2x.jpg) left top no-repeat; background-size: cover;*/}
.prd_01 > div {bottom: -100%;}
.prd_04 {height: 49%; margin-top:2%; /*position:absolute;left:10px; bottom:0; background: url(../img/ksteno/prd_01@2x.jpg) left top no-repeat; background-size: cover;*/}
.prd_04 > div {bottom: -100%;}

/* prd 02 */
.prd_02 {height: 49%; margin-top:2%; /*background: url(../img/ksteno/prd_02@2x.jpg) left top no-repeat; background-size: cover;*/}
.prd_02 > div {bottom: -100%;}
/* prd 03 */
.prd_03 {height: 49%; /*position:absolute;left:10px; bottom:0; background: url(../img/ksteno/prd_03@2x.jpg) left top no-repeat; background-size: cover;*/}
.prd_03 > div {bottom: -100%;}

/* hover */
.prd_menu a:hover > div {bottom: 0%;}




/* business */
.business .sub_tit_desc h3 {position: relative; padding-left: 14px; margin-bottom: 80px;}
.business.subtitle .sub_tit_desc h3 {position: relative; padding-left: 14px; margin-bottom: 30px; margin-top: 60px;}
.business.subtitle .sub_tit_desc h3.subtitle {margin-top: 0px;}
.business .sub_tit_desc h3::before {content:''; position: absolute; top: 0px; left: 0px; width: 5px; height: 100%; background-color: #000; z-index: 9; }
.business .sub_tit_desc p {font-size: 16px; line-height: 1.8;}
.business .sub_tit_desc p span {font-size: 24px;}

.add_nav {border-bottom: 1px solid #ddd;}
.add_nav ul {display: table; width: 1140px; height: 50px; table-layout: fixed;}
.add_nav ul li {display: table-cell; line-height: 50px; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; border-right: 1px solid #ddd; }
.add_nav ul li:first-child {border-left: 1px solid #ddd; }
.add_nav ul li a {display: block; -webkit-transition: all .5s; transition: all .5s; font-size: 14px;}
.add_nav ul li a:hover {display: block; background: #f5f8ff;}
.add_nav ul li a.on {background: #e9efff;}

.sub_cnt.business {margin-top: 80px; margin-bottom: 160px;}
.sub_cnt.business > * {padding-lefT: 10px; padding-right: 10px; -webkit-box-sizing: border-box; box-sizing: border-box; }

.add_prd_img {position: relative;}
/* background 를 img_tag로 교체 LHH 2019-11-04 월
.add_prd_img > div {height: 100%; background: url(../img/ksteno/business_01@2x.jpg) left top no-repeat; background-size: cover;}
*/
.add_prd_img > div {height: 100%;}

/* background 를 img_tag로 교체 LHH 2019-11-04 월
.add_prd_img.recording > div {height: 100%; background: url(../img/ksteno/business_03@2x.jpg) left top no-repeat; background-size: cover;}
*/
.add_prd_img.recording > div {height: 100%;}

/* background 를 img_tag로 교체 LHH 2019-11-04 월
.add_prd_img.subtitle > div {height: 100%; background: url(../img/ksteno/business_04@2x.jpg) left top no-repeat; background-size: cover;}
*/
.add_prd_img.subtitle > div {height: 100%;}

/* background 를 img_tag로 교체 LHH 2019-11-04 월
.add_prd_img.edu > div {height: 100%; background: url(../img/ksteno/business_05@2x.jpg) left top no-repeat; background-size: cover;}
*/
.add_prd_img.edu > div {height: 100%;}




/* function */
/* sub_tit_desc */
.function .sub_tit_desc h3 {margin: 80px auto; text-align: center;}
.function .sub_tit_desc h3 span {position: relative;}
.function .sub_tit_desc h3 span::before {  
    position: absolute; 
    top: -8px;
    left: -30px; 
    z-index: 999;
    content: "\201C";
    font-size: 55px;
    font-family: Georgia;
    color: #ddd;
    vertical-align: middle;
}
.function .sub_tit_desc h3 span::after {
    position: absolute; 
    top: -5px;
    right: -28px; 
    z-index: 999;
    content: "\201D";
    font-size: 55px;
    font-family: Georgia;
    color: #ddd;
    vertical-align: middle;
}
.sub_cnt.function {margin-bottom: 160px;}

/* 소프트웨어, 매뉴얼 부분 하단 여백 없는게 깔끔 LHH 2019-10-28 월 */
.sub_cnt.function.no_margin {margin-bottom: 0px;}

.function_menu, .sw_menu {background-color: #f3f3f3;}
.function_menu > div > div {padding: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; }
.function_menu .func_list {}
.function_menu .func_list h4 {font-size: 20px; text-align: center; margin-top: 60px; font-weight: 700;}
.function_menu .func_list h4 span {display: block; font-size: 14px; margin-top: 10px; font-weight: 300;}
.function_menu .func_list a {position: relative; display: block; border: 1px solid #ddd; height: 464px; padding: 30px; -webkit-box-sizing: border-box; box-sizing: border-box; background-color: #fff;}
.function_menu .func_list a::after {
    position: absolute;
    right: 30px; 
    bottom: 37px;
    z-index: 2;
    content: '';
    background : url(../img/ksteno/func_arrow@2x.png) no-repeat;
    background-size: contain;
    width: 75px;
    height: 7px;
}
.function_menu .func_list a .img_add {}
/*
.function_menu .func_list:nth-of-type(1) a .img_add {background: url(../img/ksteno/func_01@2x.jpg) center center no-repeat; background-size: cover;}
.function_menu .func_list:nth-of-type(2) a .img_add {background: url(../img/ksteno/func_02@2x.jpg) center center no-repeat; background-size: cover;}
.function_menu .func_list:nth-of-type(3) a .img_add {background: url(../img/ksteno/func_03@2x.jpg) center center no-repeat; background-size: cover;}
*/

/* function_sw */
.sw_menu {-webkit-box-sizing: border-box;box-sizing: border-box; padding: 40px 30px;}
.sw_list {-webkit-box-sizing: border-box;box-sizing: border-box; padding-left: 15px; padding-right: 15px;}
.sw_list ul {}
.sw_list ul li {margin-bottom: 10px; background: #fff /*url(../img/ksteno/down_arrow@2x.png) 90% center no-repeat; background-size: 24px*/;}
.sw_list ul li:last-child {margin-bottom: 0px;}
.sw_list ul li a {display: block; line-height: 50px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 3px 20px 3px 40px; font-size: 14px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
.sw_list .img_add {width: 100%; height: 100%; background: url(../img/ksteno/manual_add_img@2x.png) center center no-repeat; background-size: 70%;}

.sw_list_img{display:block;}
.sw_list_img_mo{display:none;width:100%;}


/* cs */
/* sub_tit_desc */
.cs .sub_tit_desc h3 {margin: 80px auto; text-align: center;}
.cs .sub_tit_desc h3 span {position: relative;}
.cs .sub_tit_desc h3 span::before {  
    position: absolute; 
    top: -8px;
    left: -30px; 
    z-index: 999;
    content: "\201C";
    font-size: 55px;
    font-family: Georgia;
    color: #ddd;
    vertical-align: middle;
}
.cs .sub_tit_desc h3 span::after {
    position: absolute; 
    top: -5px;
    right: -28px; 
    z-index: 999;
    content: "\201D";
    font-size: 55px;
    font-family: Georgia;
    color: #ddd;
    vertical-align: middle;
}
.sub_cnt.cs {margin-bottom: 160px;}

.cs_menu {}
.cs_menu ul {-webkit-box-sizing: border-box;box-sizing: border-box; padding-right: 30px;}
.cs_menu ul li {-webkit-box-sizing: border-box;box-sizing: border-box; margin-bottom: 40px;}
/* background 를 img_tag로 교체 LHH 2019-11-04 월 LHH 2019-10-14 월
.cs_menu ul li:last-child {background-color: #000; border-radius: 2px; line-height: 50px; padding-left: 20px;}
.cs_menu ul li:last-child a {color: #fff;}
*/

.cs_menu ul li a {display: block; font-size: 16px;}
/*
.cs_menu .img_add {height: 550px; background: url(../img/ksteno/cs_01@2x.jpg) center center no-repeat; background-size: cover;}
*/
.cs_menu .img_add {height: 550px; background-size: cover;}


/* mall */
.mall_main {margin: 100px 0px 160px;}
.mall_main ul {-webkit-box-sizing: border-box;box-sizing: border-box; padding-right: 30px;}
.mall_main ul li {-webkit-box-sizing: border-box;box-sizing: border-box; margin-bottom: 40px;}
.mall_main ul li a {display: block; font-size: 16px;}

.mall_main .mall_srch {-webkit-box-sizing: border-box;box-sizing: border-box; padding-right: 30px;}
.mall_main .mall_srch #mall_sch {position: relative; -webkit-box-sizing: border-box;box-sizing: border-box; border: 1px solid #ddd;}
.mall_main .mall_srch input[type='text'] {height: 40px; border: 0px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 5px;}
.mall_main .mall_srch button {height: 40px; width: 40px; background: none; border: 0px; position: absolute; top: 0px; right: 0px; z-index: 99;}
.mall_main .mall_srch button i {font-size: 14px;}

.mall_main .list_wrap {position: relative; height: 486px; background: url(../img/ksteno/book_wrap_bg@2x.jpg) center center no-repeat; background-size: cover;}
.mall_main .inner_book { -webkit-box-sizing: border-box;box-sizing: border-box; padding: 100px 100px 0px; }
/*.mall_main .inner_book > div {-webkit-transform: translateX(4%); transform: translateX(4%);}*/
.mall_main .inner_book div a {display: block; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 25%; padding-right: 25%;}
.mall_main .inner_book div a img {width: 180px; height: 248px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #ddd;}
.mall_main .inner_book div a em {display: block; font-size: 16px; margin-top: 10px; font-weight: 700;}
.mall_main .inner_book div a span {display: block; font-size: 14px; margin-top: 5px;}
.list_wrap > button {position: absolute; top: 45%; z-index: 999; border: none; background-color: transparent; font-size: 30px; color: #aaa;}
button.leftArrow {left: 40px;}
button.leftMajor {left: 20px;}
button.rightArrow {right: 40px;}
button.rightMajor {right: 20px;}

/* major book */
.mall_main .list_wrap.major {position: relative; height: auto; background: url(../img/ksteno/book_wrap_bg@2x.jpg) center center no-repeat; background-size: cover; margin-bottom: 70px;}
.mall_main .list_wrap.major:last-of-type {margin-bottom: 0px;}
.mall_main .inner_major { -webkit-box-sizing: border-box;box-sizing: border-box; padding: 60px 40px; overflow: hidden;}
/*.mall_main .inner_major > div {-webkit-transform: translateX(3%); transform: translateX(3%);}*/
.mall_main .inner_major div a {display: block; text-align: center; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 20px;}
.mall_main .inner_major div a img {width: 150px; height: 218px; -webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #ddd;}
.mall_main .inner_major div a em {display: block; font-size: 16px; margin-top: 10px; font-weight: 700;}
.mall_main .inner_major div a span {display: block; font-size: 14px; margin-top: 5px;}



/* story_main */
/* sub_tit_desc */
.sub_tit_desc img{max-width:100%;}
.story .sub_tit_desc h3 {margin: 80px auto; text-align: center;}
.story .sub_tit_desc h3 span {position: relative;}
.story .sub_tit_desc h3 span::before {  
    position: absolute; 
    top: -8px;
    left: -30px; 
    z-index: 999;
    content: "\201C";
    font-size: 55px;
    font-family: Georgia;
    color: #ddd;
    vertical-align: middle;
}
.story .sub_tit_desc h3 span::after {
    position: absolute; 
    top: -5px;
    right: -28px; 
    z-index: 999;
    content: "\201D";
    font-size: 55px;
    font-family: Georgia;
    color: #ddd;
    vertical-align: middle;
}
.sub_cnt.story {margin-bottom: 160px;}
.sub_cnt.story.tit_in {margin-top: 0px; margin-bottom: 0px;}

.story_menu {background-color: #f3f3f3;}
.story_menu > div > div {padding: 30px 20px; -webkit-box-sizing: border-box; box-sizing: border-box; }
.story_menu h3 {position: relative;}
.story_menu h3::after {position: absolute; right: 0px; top: 0px; z-index: 9; color: #fff; content: '+'; font-weight: bold; font-size: 30px;}

.story_menu .left_wrap {}
.story_menu .left_wrap > div {-webkit-box-sizing: border-box;box-sizing: border-box; border: 1px solid #ddd; min-height: 48%; background-color: #fff;}
.story_menu .left_wrap > div:last-child {margin-top: 4%;}
.story_menu .left_wrap > div > a {display: block; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 15px 30px;}
.story_menu .left_wrap h3 {font-weight: 700; color: #fff;}
.story_menu .left_wrap > div:first-of-type > a {background-color: #ff8d77;}
.story_menu .left_wrap > div:last-of-type > a {background-color: #33345d;}
.story_menu .left_wrap h3 span {display: block; font-weight: 300; font-size: 16px; text-transform: capitalize;}
.story_menu .left_wrap ul {-webkit-box-sizing: border-box;box-sizing: border-box; padding: 15px 30px;}
.story_menu .left_wrap ul li {line-height: 2.5;}
.story_menu .left_wrap ul li a {display: block; font-size: 14px; padding-right:60px; position:relative; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.story_menu .left_wrap ul li a strong { display:block;  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.story_menu .left_wrap ul li a span.new_icon {display: inline-block;width: 16px;margin-right: 3px;line-height: 14px;font-size: 0.833em;color: #fff;background: #3fd49e;border: 1px solid #32c791;text-align: center;border-radius: 2px;}
.story_menu .left_wrap ul li a span.date {position:absolute; right:0; top:0; }

.story_menu .right_wrap {}
.story_menu .right_wrap > div {-webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #ddd; height: 180px; margin-bottom: 20px; background-color: #fff; padding: 30px; background-position:right 50% !important; }
.story_menu .right_wrap > div:first-of-type {background: url(../img/ksteno/story_main_01@2x.png) no-repeat; background-size: cover;}
.story_menu .right_wrap > div:nth-of-type(2) {background: url(../img/ksteno/story_main_02@2x.png) no-repeat; background-size: cover;}
.story_menu .right_wrap > div:last-of-type {background: url(../img/ksteno/story_main_03_re@2x.jpg) no-repeat; background-size: cover;}
.story_menu .right_wrap > div a {display: block; color: #fff;}
.story_menu .right_wrap > div a h3 {font-weight: 700;}
.story_menu .right_wrap > div a h3 span {display: block; font-weight: 300; font-size: 16px; text-transform: capitalize;}
.story_menu .right_wrap > div:last-child {margin-bottom: 0px; }


/* about */
.about {position: relative; background: url(../img/ksteno/ceo_bg_02@2x.jpg) no-repeat; background-size: 100% 360px; padding-top: 360px; margin-bottom: 160px;}
.about_top {position: absolute; top: -230px; left: 140px; z-index: 99; width: 260px; height: 260px; background: url(../img/ksteno/sign_box_bg@2x.jpg) no-repeat; background-size: cover;}
.sign_box {width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 30px; background: url(../img/ksteno/ceo_sign@2x.png) center 150px no-repeat; background-size: 50%; }
.sign_box em {color: #93b0ff; font-size: 20px; display: block; margin-top: 80px;}
.ceo_photo {position: absolute; top: -335px; left: 50%; z-index: 98; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 361px; height: 335px; background: /*url(../img/ksteno/ceo_pic@2x.png)*/ url(../img/ksteno/ceo_pic.png) no-repeat; background-size: cover;}

.about p {-webkit-box-sizing: border-box;box-sizing: border-box; padding-left: 65px; padding-right: 65px; font-size: 16px; line-height: 1.8; font-weight: 300; margin-top: 30px;}
.about p span {font-size: 24px;}
.about p em {font-weight: 700;}


/* tech */
.tech {position: relative; background: url(../img/ksteno/tech_bg@2x.jpg) no-repeat; background-size: 100% 220px; padding-top: 10px; margin-bottom: 160px;}
.tech_summary {}
.tech_summary p {text-align: center; font-size: 18px; font-weight: 300; line-height: 1.6;}
.tech_summary em {font-weight: 700;}
.tech_summary p span {position: relative; font-weight: 300;}
.tech_summary p span::after {position: absolute; bottom: 0px; left: 0px; width: 100%; height: 1px; background-color: #000; z-index: 1; content: ''; }
.tech_summary .tech_info {-webkit-box-sizing: border-box;box-sizing: border-box; padding-left: 100px; padding-right: 100px; margin-top: 50px; margin-bottom: 99px;}
.tech_summary .tech_info li {width:25%}
.tech_summary .tech_info li a {position: relative; text-align: center; display: block; width: 87px; height: 87px; border-radius: 100%; text-align: center; background-color: #ff8d77; margin: 0 auto;}
.tech_summary .tech_info li a div {line-height: 87px;}
.tech_summary .tech_info li:nth-of-type(2) a {background-color: #aad4dd;}
.tech_summary .tech_info li:nth-of-type(3) a {background-color: #93b0ff;}
.tech_summary .tech_info li:nth-of-type(4) a {background-color: #f89e00;}
.tech_summary .tech_info li:last-of-type a {background-color: #33345d;}
.tech_summary .tech_info div em {color: #fff; font-weight: 700; font-size: 20px;}
.tech_summary .tech_info div+span {display: block; padding-top: 5px; font-size: 14px;}

.tech_list h4 {position: relative; padding-left: 14px; margin-top: 80px; margin-bottom: 40px; font-size: 20px;}
.tech_list h4::before {content:''; position: absolute; top: 6px; left: 0px; width: 5px; height: 20px; background-color: #000; z-index: 9;}

.tech_list ul {border-top: 3px solid #000;}
.tech_list ul li {position: relative; -webkit-box-sizing: border-box;box-sizing: border-box; border-bottom: 1px solid #aaa; padding: 30px; padding-right:160px; }
.tech_list ul li em {display: block; font-weight: 700; font-size: 16px; margin-bottom: 5px;}
.tech_list ul li span {display: block; font-weight: 300;}
.tech_list ul li a {position: absolute; top: 50%; right: 30px; -webkit-transform: translateY(-50%); transform: translateY(-50%); z-index: 2; display: block; width: 120px; height: 34px; line-height: 33px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 30px; border: 1px solid #ccc; border-radius: 30px; background: url(../img/ksteno/down_arrow@2x.png) 80px center no-repeat; background-size: 12%; }





/* store_add */
.list_wrap.store {background: none!important; height: auto!important;}
.list_wrap.store h4+span {font-size: 16px;}
/* prd 02 */
.list_wrap.store .prd_02 {height: 48%; background: url(../img/ksteno/keybrd_02@2x.jpg) left top no-repeat; background-size: cover;}
/* prd 03 */
.list_wrap.store .prd_03 {height: 48%; margin-top: 6%; background: url(../img/ksteno/keybrd_03@2x.jpg) left top no-repeat; background-size: cover;}

.list_wrap.store .prd_01{ background-size: auto 250px !important; height:250px; background-color:#f1f1f1 !important; background-position:100% 0 !important;}
.list_wrap.store.etc .prd_01 {background: url(../img/ksteno/etc_01@2x.jpg) left top no-repeat; background-size: cover;  }
.list_wrap.store.etc .prd_01.etc {background: url(../img/ksteno/etc_02@2x.jpg) left top no-repeat; background-size: cover;}

.list_wrap.store.keyboard .prd_01 {background: url(../img/ksteno/prd_01@2x.jpg) left top no-repeat; } 
.list_wrap.store.keyboard .prd_01.keyboard {background: url(../img/ksteno/keybrd_03@2x.jpg) left top no-repeat; background-size: cover;}


/* cnt_mall main */
.function_menu.cnt > div {padding: 0px 100px;}
.function_menu .func_list a .img_add {}
.function_menu .func_list a .img_add img { width:100%; }
.function_menu.cnt .func_list:nth-of-type(1) a .img_add {background: url(../img/ksteno/cnt_book_01@2x.jpg) center center no-repeat; background-size: cover;}
.function_menu.cnt .func_list:nth-of-type(2) a .img_add {background: url(../img/ksteno/cnt_book_02@2x.jpg) center center no-repeat; background-size: cover;}
.function_menu.cnt .func_list h4 {margin-top: 40px;}



/* business relationship */
.sub_cnt.relationship {}

.steno {position: relative; height: 870px;}
.steno > div {}
.steno > div h4, .chart > div h4 {color: #fff; border-radius: 30px; margin-left: 10px; margin-right: 10px; height: 60px; text-align: center; font-weight: 700; font-size: 20px; -webkit-box-sizing: border-box; box-sizing: border-box;}
.steno > div h4 span {display: block; font-weight: 300; font-size: 14px;}
.steno > div:first-of-type h4 {background-color: #93b0ff; line-height: 60px; }
.steno > div:nth-of-type(2) h4 {background-color: #aad4dd; padding-top: 4px;}
.steno > div:nth-of-type(3) h4 {background-color: #ff8772; padding-top: 4px;}
.steno ul {margin-top: 30px;}
.steno ul li {text-align: center; font-size: 16px; line-height: 30px;}

.steno .partner {position: absolute; top: 330px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 570px; height: 164px; background: url(../img/ksteno/partner_bg@2x.png) no-repeat; background-size: contain; text-align: center;}
.steno .partner em {display: block; color: #fff; font-size: 26px; font-weight: bold; margin-top: 60px;}
.steno .partner::before {position: absolute; top: -120px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 144px; height: 132px; background: url(../img/ksteno/arrow_up@2x.png) no-repeat; background-size: contain; content: '';}
.steno .partner::after {position: absolute; bottom: -120px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 144px; height: 132px; background: url(../img/ksteno/arrow_dw@2x.png) no-repeat; background-size: contain; content: '';}

.steno .company {position: absolute; bottom: 0px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 170px; text-align: center;}
.steno .company h4 {background-color: #f89e00; border-radius: 100%; width: 170px; height: 170px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 56px; margin-left: 0px;}
.steno .company h4+span{-webkit-box-sizing: border-box;box-sizing: border-box; display: block; padding-left: 0px; font-size: 16px; margin-top: 10px;}



/* business organization */
.sub_cnt.organization {position: relative; height: 870px;}
.sub_cnt.organization_02 {position: relative; height: 800px;}
.sub_cnt.organization_02 > div {width: 100%; height: 844px; background: url(../img/ksteno/organization_w@2x.png) center top no-repeat; background-size: 90%; }
.chart {}
.chart h4 {line-height: 60px;}
.chart .ceo h4 {width: 170px; height: 170px; border-radius: 100%; background-color: #33345d; line-height: 170px; position: absolute; top: 0px; left: 50%;  -webkit-transform: translateX(-50%);  transform: translateX(-50%);}
.chart .flow_02 {margin-top: 260px;}
.chart .flow_02.right_wrap h4 {float: right;}
.chart .flow_02 h4 {background-color: #93b0ff; width: 260px;}
.chart .flow_02 > div:last-of-type h4 {background-color: #ccdaff; margin-top: 30px;}
.chart .flow_03 {margin-top: 130px;}
.chart .flow_03 h4 {background-color: #aad4dd;}
.chart .flow_03 ul {margin-top: 30px;}
.chart .flow_03 ul li {width: 260px; margin-left: 10px; margin-bottom: 15px; font-size: 16px; line-height: 40px; text-align: center; border: 1px solid #aad4dd; color: #222; border-radius: 30px;}



/* business main */
/*LHH 2019-10-14 월
.cs_menu.business ul li:last-child {background-color: #fff; border-radius: 0px; line-height: 50px; padding-left: 0px;}
.cs_menu.business ul li:last-child a {color: #000;}
*/

/* background 를 img_tag로 교체 LHH 2019-11-04 월
.cs_menu.business .img_add {height: 550px; background: url(../img/ksteno/business_main@2x.jpg) center center no-repeat; background-size: cover;}
*/
.cs_menu.business .img_add {height: 550px; background-size: cover;}


#popup_layer .close { position:absolute; right:15px; top:15px; cursor:pointer;  width:25px; height:25px; padding:0; }

#fregisterform .form_01 input { width:100%; }
#fregisterform .form_01 ul { width:480px; }


.sub_cnt.mall .prd_menu { /*width:50%;*/ }
.sub_cnt.mall .pure-u-md-1-2  { width:100%; float:none;  }


/* 1111 */
.prd-new { padding:0;  background:none !important; height:auto;  }
.prd-new h4 { position:absolute; left:50px; top:50px; }
.prd-new img { max-width:100%; }


@media all and (max-width:1100px) {
	.sub_cnt.mall .prd_menu  { width:100%; }
}

@media all and (max-width:1020px) {
	.function_menu > div > div { padding:15px; }
	.function_menu .func_list a { padding:10px; }
	.function_menu .func_list h4 { font-size:16px; }
	.story_menu .right_wrap > div { padding:15px; }
	.story_menu .left_wrap ul { padding:10px 15px; }
}



/* 980 이하부터 LHH 2019-11-04 월 */
@media (max-width:980px) {
	/* function_sw */
	.sw_menu {-webkit-box-sizing: border-box;box-sizing: border-box; padding: 40px 30px;}
	.sw_list {-webkit-box-sizing: border-box;box-sizing: border-box; padding-left: 15px; padding-right: 15px; width:100%}
	.sw_list ul {}
	.sw_list ul li {margin-bottom: 10px; background: #fff /*url(../img/ksteno/down_arrow@2x.png) 90% center no-repeat; background-size: 24px*/;}
	.sw_list ul li:last-child {margin-bottom: 0px;}
	.sw_list ul li a {display: block; line-height: 50px; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 3px 20px 3px 40px; font-size: 14px; text-overflow: ellipsis; overflow: hidden; white-space: nowrap;}
	.sw_list .img_add {width: 100%;height: 240px;background: url(../img/ksteno/manual_add_img@2x.png) center top no-repeat;background-size: 50%;}
	.sw_list:nth-of-type(3) {margin-top: 10px;}
	.sw_list_img{display:none;}
	.sw_list_img_mo{display:block;width:100%;}
}

@media all and (max-width:768px) {
	
	.cnt_wrap.prd_cas {position: relative; width: 100%; height:1030px; background: url(../img/ksteno/prd_cas_bg.jpg) left top repeat-x;background-position-y: -88px; margin-top:40px !important;}

	

	.sub_cnt.mall .prd_menu  { width:100%; }
	.list_wrap.store .prd_01 {  background-position:0 0 !important; background-size:cover !important; }

	.nav_wrap {  
        height: 100%;
        position: fixed;
        top: 0;
        left: -65px;
        z-index: 999999;
        background: rgba(255,255,255,.95);
        -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
        -o-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
		overflow:auto;
    }
    #burgerBtn {
        border-top: 2px solid #aaa;
        height: 25px;
        width: 25px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        z-index: 99999;
        right: 30px;
        top: 20px;
        cursor: pointer;
        -webkit-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
    }
    #burgerBtn:before {
        content: " ";
        display: block;
        position: absolute;
        height: 2px;
        width: 30px;
        left: 0;
        background: #aaa;
        top: 8px;
        -webkit-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
    }
    #burgerBtn:after {
        content: " ";
        display: block;
        position: absolute;
        height: 2px;
        width: 28px;
        left: 0;
        background: #aaa;
        bottom: 3px;
        -webkit-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
    }
    #nav {
        list-style-type: none;
        margin: 0px 20px 0px;
        padding: 0px;
        overflow: auto;   
    }
    #nav li {
        line-height: 30px;
        width: 0;
        padding: 30px 0 30px;
        -webkit-transition: all 0.6s ease-in;
        transition: all 0.6s ease-in;
        border-bottom: 1px solid #ccc;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    #nav li a {display: block; font-size: 18px; text-transform: uppercase; color: #333; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 30px;}
    #nav .dep2 .dep3 li:hover a {color: #5c88ff;}
    #nav li a span {color: #5c88ff;}
    #nav li + li {
        margin-left: -40px;
    }
    #nav li + li + li {
        margin-left: -80px;
    }
    #nav li + li + li + li {
        margin-left: -120px;
    }
    .navigation #nav li {
        width: 260px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin-left: 60px;
    }
    .navigation #burgerBtn {
        border-color: transparent;
    }
    .navigation #burgerBtn:before {
        -webkit-transform: rotate(45deg);
        -khtml-transform: rotate(45deg);
        transform: rotate(45deg);
        width: 33px;
        left: -2px;
        top: 10px;
    }
    .navigation #burgerBtn:after {
        -webkit-transform: rotate(135deg);
        -khtml-transform: rotate(135deg);
        transform: rotate(135deg);
        bottom: 11px;
        width: 33px;
        left: -2px;
    }

    .demo2.navigation #mobileBodyContent {
        margin-left: 320px;
        -webkit-opacity: 0.4;
        -moz-opacity: 0.4;
        -khtml-opacity: 0.4;
        -o-opacity: 0.4;
        opacity: 0.4;
    }
    #nav .dep2 { padding-top:10px; display:none; } 
    #nav .dep2 li { line-height:20px; padding:10px 0; border-bottom:0; }
	#nav .btn-dep2 { font-size:14px; color:#777; padding-left:0; }
	#nav .dep3 { display:none; padding:10px 0;  } 
	#nav .dep3 li { margin-left:0; width:auto; padding:3px 0;   } 
	#nav .btn-dep3 { font-size:13px; color:#999; padding-left:0; }

	.function_menu .func_list a {height:auto; }
	.function_menu .func_list h4 { margin-top:20px; padding-bottom:40px;  }
}


@media (max-width:568px) {
.tech_list ul li { padding:15px; }
.prd_03 { position:relative; left:0;  }
.prd_menu h4 { margin-top:0 !important;}
}




























































.mobile-etc { display:none; position:absolute; right:70px; top:20px; z-index:10; }
.mobile-etc a { font-size:15px; color:#777; margin-left:5px; padding:5px; }

@media all and (max-width:768px) {
	.mobile-etc  { display:block; }
	
	/* 기능센터 두줄씩 나올때 50%처리 LHh 2019-11-04 월 */
	/*.sw_list {width:50%}*/



}


/*-----------------------------------------------------------------*/
/* media query
/*-----------------------------------------------------------------*/
@media screen and (max-width: 35.5em) {/*567까지*/

	.visual {height: 300px; color: #313131;}

	a.logo_class{width:50%;}

    .mo_hide {display: none!important;}    
    .top_menu+div {margin-top: 20px;}

    /* 서적쪽 탭메뉴 모바일일때 안보이게 처리 LHH 2019-10-24 목 */
	.book_left {display: none;}
	.item_left {display: none;}

    /* mo_nav */
/*
    #mobile {
        position: relative;
        overflow: hidden;
    }
*/
    .nav_wrap {  
        height: 100%;
        position: fixed;
        top: 0;
        left: -65px;
        z-index: 999999;
        background: rgba(255,255,255,.95);
        -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
        -o-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
		overflow:auto;
    }
    #burgerBtn {
        border-top: 2px solid #aaa;
        height: 25px;
        width: 25px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        z-index: 99999;
        right: 30px;
        top: 20px;
        cursor: pointer;
        -webkit-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
    }
    #burgerBtn:before {
        content: " ";
        display: block;
        position: absolute;
        height: 2px;
        width: 30px;
        left: 0;
        background: #aaa;
        top: 8px;
        -webkit-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
    }
    #burgerBtn:after {
        content: " ";
        display: block;
        position: absolute;
        height: 2px;
        width: 28px;
        left: 0;
        background: #aaa;
        bottom: 3px;
        -webkit-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
    }
    #nav {
        list-style-type: none;
        margin: 0px 20px 0px;
        padding: 0px;
        overflow: auto;   
    }
    #nav li {
        line-height: 30px;
        width: 0;
        padding: 30px 0 30px;
        -webkit-transition: all 0.6s ease-in;
        transition: all 0.6s ease-in;
        border-bottom: 1px solid #ccc;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    #nav li a {display: block; font-size: 18px; text-transform: uppercase; color: #333; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 30px;}
    #nav .dep2 .dep3 li:hover a {color: #5c88ff;}
    #nav li a span {color: #5c88ff;}
    #nav li + li {
        margin-left: -40px;
    }
    #nav li + li + li {
        margin-left: -80px;
    }
    #nav li + li + li + li {
        margin-left: -120px;
    }
    .navigation #nav li {
        width: 260px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin-left: 60px;
    }
    .navigation #burgerBtn {
        border-color: transparent;
    }
    .navigation #burgerBtn:before {
        -webkit-transform: rotate(45deg);
        -khtml-transform: rotate(45deg);
        transform: rotate(45deg);
        width: 33px;
        left: -2px;
        top: 10px;
    }
    .navigation #burgerBtn:after {
        -webkit-transform: rotate(135deg);
        -khtml-transform: rotate(135deg);
        transform: rotate(135deg);
        bottom: 11px;
        width: 33px;
        left: -2px;
    }

    .demo2.navigation #mobileBodyContent {
        margin-left: 320px;
        -webkit-opacity: 0.4;
        -moz-opacity: 0.4;
        -khtml-opacity: 0.4;
        -o-opacity: 0.4;
        opacity: 0.4;
    }


    #nav .dep2 { padding-top:10px; display:none; } 
    #nav .dep2 li { line-height:20px; padding:10px 0; border-bottom:0; }
	#nav .btn-dep2 { font-size:14px; color:#777; padding-left:0; }
	#nav .dep3 { display:none; padding:10px 0;  } 
	#nav .dep3 li { margin-left:0; width:auto; padding:3px 0;   } 
	#nav .btn-dep3 { font-size:13px; color:#999; padding-left:0; }


    /* spot */
   	.spot_nav { bottom:20px; }
	.spot_copy {padding: 30px 60px 0px;}
    .spot_copy h2 {font-size: 18px;}
    .spot_copy h2 + p {font-size: 14px; margin-bottom:20px;}
	.spot_copy > .spot_link{ font-size: 14px; width:100px;}

    .slick-next {right: 10px;}
    .slick-prev {left: 10px;}

    /* cnt */
    .cnt_menu > div {margin-bottom: 10px;}
    .brd_cnt > div {margin-bottom: 10px;}
    
    /* prd_cas */
    .cnt_wrap.prd_cas {position: relative; width: 100%; height:800px; background-SIZE: CONTAIN; background-position-y: -208px;}
    
    .prd_img img {width: 303px; height: 180px;}
    .tab_nav li {line-height: 1.2; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px; }
    .tab_nav li a {font-size: 14px; border-bottom: 1px solid #aaa; color: #000;}
    
    /* footer */
    .cs_banner > em { line-height: 120px; font-size: 20px;}
    .cs_banner p {position: relative; height: 160px; background:none; font-size: 16px; font-weight: 300;}
    .cs_banner p span {position: absolute; top: 40px; left: 10%;}
    .cs_banner p span em {font-size: 24px; display: block; font-weight: 700;}
    .cs_banner a {left: 10px; -webkit-transform: translateY(-0%); transform: translateY(-0%); width: 160px; height: 40px; line-height: 40px; font-size: 18px;}
    
    .foot_menu > ul > li > a {text-align: center; margin-top: 15px; margin-bottom: 10px;}
    .foot_menu > ul > li > ul {display: none;}
    .foot_quick+p {text-align: center; margin-bottom: 50px;}
    
    /* sub */
    h3 span::before {  
        display: none;
    }
    h3 span::after {
        display: none;
    }
    .sub_spot.story {
    background: url(../img/ksteno/sub_story@2x.jpg) bottom left no-repeat; background-size: cover;}
    .page_nav ul{padding: 0px!important;}
    .page_nav ul li {border-right: 1px solid #e7e7e7; text-align: center; width: 35%;}
    .page_nav ul li:first-child {border-left: 1px solid #e7e7e7; width: 60px; padding: 0px; width: 15%;}
    .page_nav ul li:last-child {width: 50%!important; border-right: none;}
    /* tab */
    ul.btn_tab {margin: 80px 0px; width: 100%;}
    ul.btn_tab li {text-align: center; width: 33.33%;}
    ul.btn_tab li.on {}
    ul.btn_tab li a {display: block; border: 1px solid #000; color: #000; margin-left: 0px; margin-right: 0px; padding: 14px 0px; -webkit-box-sizing: border-box;box-sizing: border-box; font-size: 14px; border-radius: 0px;}
    ul.btn_tab li.on a {color: #fff; background: #000;}
    
    /* history */
    .cnt_blk {position: relative; margin-bottom: 80px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 50px; padding-bottom: 50px;}
    .add_line {display: none;}
    /* cnt_odd */
    .history .cnt_blk:nth-of-type(odd) {padding-left: 0px;}
    .history .cnt_blk:nth-of-type(even) {padding-right: 0px; position: relative;}
    .history .cnt_blk:nth-of-type(odd) .half_cnt_r,
    .history .cnt_blk:nth-of-type(odd) .half_cnt_l {position: relative; height: auto;}
    .history .cnt_blk:nth-of-type(odd) .add_img {text-align: center; margin-top: 20px; margin-bottom: 20px;}
    .history .cnt_blk:nth-of-type(odd) .add_img img,
    .history .cnt_blk:nth-of-type(even) .add_img img {position: static; top: 0px; left: 0px; z-index: 0; width: 80%;}
    .history .cnt_blk:nth-of-type(odd) em.year {position: absolute; top: -70px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 99; font-size: 48px; font-weight: bold; color: #202256; padding-left: 5px;}

    .history .cnt_blk:nth-of-type(odd) ol {margin: 0 auto;}
    .history .cnt_blk:nth-of-type(odd) ol li,
    .history .cnt_blk:nth-of-type(even) ol li {line-height: 1.8; margin-bottom: 10px;}
    .history .cnt_blk:nth-of-type(odd) ol li em {margin-right: 20px;}

    .history .cnt_blk:nth-of-type(odd) .year_bg,
    .history .cnt_blk:nth-of-type(even) .year_bg {display: none;}

    /* cnt_even */
    .history .cnt_blk:nth-of-type(even) em.year {position: absolute; top: -30px; left: 0%; right: 0%; text-align: center; z-index: 98; font-size: 48px; font-weight: bold; color: #202256; padding-left: 5px;}
    .history .cnt_blk:nth-of-type(even) .add_img {text-align: center; margin-top: 0px; margin-bottom: 20px;}
    .history .cnt_blk:nth-of-type(even) ol {margin-left: 0px; margin-top: 15px;}
    .history .cnt_blk:nth-of-type(even) ol li em {color: #202256; font-weight: bold; margin-left: 0px;}
    .history .cnt_blk ol li span {width: 80%;}
    .history .cnt_blk em.year::before {
        display: none;   
    }
    .history .cnt_blk em.year::after {
        display: none;   
    }
    .history .cnt_blk:nth-of-type(even) .half_cnt_l {
        min-height: auto;
    }

    
    /* store */
	/* 이미지랑 제목 겹쳐서 모바일일때 상품리스트에서만 마진탑0 먹임 LHH 2019-10-24 목 */
    .prd_menu h4.item_h4 {text-align: center; margin-top: 0px;} 
	.prd_menu h4 {text-align: center; margin-top: 40px;}
    
    .prd_01, .prd_02, .prd_03, .prd_04 {-webkit-box-sizing: border-box;box-sizing: border-box; }
    .prd_menu a > div {padding: 40px 30px!important;}
    .prd_01 { background: url(../img/ksteno/prd_01@2x.jpg) left top no-repeat; background-size: cover;}
    /* prd 02 */
    .prd_02 { margin-top: 4%; }
    /* prd 03 */
    .prd_03 { /*margin-top: 4%;*/ background: #f5f5f5 url(../img/ksteno/prd_03@2x.jpg) left 30px no-repeat; background-size: cover;}
	.prd_04 { margin-top: 4%; }

    
    /* business */
    .add_prd_img > div {height: 300px !important; margin-top: 20px;}
    .add_nav ul {position: relative; display: block; width: 100%; padding-lefT: 0px; padding-right: 0px; height: 100%; padding-bottom: 50px; -webkit-box-sizing: border-box; box-sizing: border-box;}
    .add_nav ul li {float: left; display: block; width: 50%; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd;}
    .add_nav ul li:first-child {border-left: 1px solid #ddd; }
    .add_nav ul li:last-child {/*border-right: 0px;*/ }
    .add_nav ul li.active {width: 100%; position: absolute; bottom: 0px; left: 0px; border-top: 1px solid #ddd; border-bottom: none;}
    
    
    /* cs */
    .cs_menu ul {padding-right: 0px; margin-bottom: 20px;}

    .cs_menu ul li {-webkit-box-sizing: border-box;border-bottom: 1px solid #ddd;box-sizing: border-box; margin-bottom: 0px; text-align: center; line-height: 50px;}
    .cs_menu ul li:nth-child(odd) {border-right: 1px solid #ddd; border-left: 1px solid #ddd;}
    .cs_menu ul li:nth-child(-n+2) {border-top: 1px solid #ddd; }
	.cs_menu ul li:nth-child(even) {border-right: 1px solid #ddd;}
    /*.cs_menu ul li:last-child {background-color: #000; border-radius: 0px; line-height: 50px; padding-left: 20px; border: none;}*/
    
    
    /* mall */
    .mall_main ul {padding-right: 0px; margin-bottom: 0px;}
    .mall_main ul li {-webkit-box-sizing: border-box;box-sizing: border-box; margin-bottom: 0px; border-top: 1px solid #ddd; text-align: center; line-height: 50px;}
    .mall_main ul li.active {background-color: #e9efff;}
    .mall_main ul li:nth-child(odd) {border-right: 1px solid #ddd; border-left: 1px solid #ddd;}
    .mall_main ul li:nth-child(even) {border-right: 1px solid #ddd;}
    
    .mall_main .mall_srch {padding-right: 0px; margin-bottom: 20px;}
    .mall_main .mall_srch #mall_sch {-webkit-box-sizing: border-box; box-sizing: border-box; border: 1px solid #ddd;}
    .mall_main .mall_srch input[type='text'] {height: 50px;}
    .mall_main .mall_srch button {height: 50px; width: 50px;}
    
    .mall_main .list_wrap {height: auto; background: url(../img/ksteno/book_wrap_bg@2x.jpg) center center no-repeat; background-size: cover;}
    .mall_main .inner_book {padding: 70px 0px; }
    .mall_main .inner_book div a {padding-left: 20%; padding-right: 20%;}
    .mall_main .inner_book div a img {width: 100%; height: 100%;}
    button.leftArrow {left: 20px;}
    button.leftMajor {left: 20px;}
    button.rightArrow {right: 20px;}
    button.rightMajor {right: 20px;}
    
    /* major book */
    .mall_main .list_wrap.major {height: auto;}
    .mall_main .inner_major {padding: 60px 40px;}

    .mall_main .inner_major div a {padding-left: 20%; padding-right: 20%;}
    .mall_main .inner_major div a img {width: 100%; height: 100%;}
    

    /* function_sw */
    .sw_list .img_add {width: 100%; height: 240px; background: url(../img/ksteno/manual_add_img@2x.png) center top no-repeat; background-size: 50%;}
    .sw_list:nth-of-type(3) {margin-top: 10px;}
	.sw_list_img{display:none;}
	.sw_list_img_mo{display:block; width:100%;}
    
    /* store add */
    .list_wrap.store .prd_02 {margin-top: 6%;}
    .list_wrap.store .prd_menu h4 {text-align: left;}
    
    .mall_main.store ul {position: relative; padding-top: 50px; padding-right: 0px; margin-bottom: 0px; -webkit-box-sizing: border-box; box-sizing: border-box; border-left: 1px solid #ddd; border-right: 1px solid #ddd;}
    .mall_main.store ul li {-webkit-box-sizing: border-box;box-sizing: border-box; margin-bottom: 0px; border-top: 1px solid #ddd; text-align: center; line-height: 50px;}
    .mall_main.store ul li.active {position: absolute; top: 0px; left: 0px; width: 100%!important; background-color: #e9efff;}
    .mall_main.store ul li:nth-child(2) {border-right: 1px solid #ddd; border-left: 0px; }
    .mall_main.store ul li:nth-child(3) {border-right: 0px; border-left: 0px;}
    .list_wrap.store.etc .prd_01.etc {margin-top: 4%;}
    .list_wrap.store.keyboard .prd_01.keyboard {margin-top: 4%;}
    
    /* cnt_mall main */
    .function_menu.cnt > div {padding: 0px;}
    
    /* about */
    .about {position: relative; background: url(../img/ksteno/ceo_bg_02@2x.jpg) no-repeat; background-size: 100% 360px; padding-top: 360px; margin-bottom: 160px;}
    .about_top {position: absolute; top: -170px; left: inherit; right: 0px; z-index: 99; width: 200px; height: 200px; background: url(../img/ksteno/sign_box_bg@2x.jpg) no-repeat; background-size: cover;}
    .sign_box {width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 30px; background: url(../img/ksteno/ceo_sign@2x.png) center 120px no-repeat; background-size: 50%; }
    .sign_box em {margin-top: 50px;}
    .ceo_photo {position: absolute; top: -335px; left: 0%; z-index: 98; -webkit-transform: translateX(0%); transform: translateX(0%); width: 361px; height: 335px; background: url(../img/ksteno/ceo_pic.png) no-repeat; background-size: cover;}

    .about p {padding-left: 0px; padding-right: 0px; margin-top: 30px;}

    
    /* tech */
    .tech {position: relative; background: url(../img/ksteno/tech_bg@2x.jpg) no-repeat; background-size: 100% 160px; padding-top: 10px; margin-bottom: 160px;}
    .tech_summary {}
    .tech_summary p {text-align: center; font-size: 18px; font-weight: 300; line-height: 1.6;}
    .tech_summary em {font-weight: 700;}
    .tech_summary p span {position: relative; font-weight: 300;}
    .tech_summary p span::after {position: absolute; bottom: 0px; left: 0px; width: 100%; height: 1px; background-color: #000; z-index: 1; content: ''; }
    .tech_summary .tech_info {padding-left: 0px; padding-right: 0px; margin-top: 50px; margin-bottom: 20px;}
    .tech_summary .tech_info li {margin-bottom: 5px; border-radius: 3px;}
    .tech_summary .tech_info li a {position: relative; text-align: center; display: block; width: 100%; height: 45px; border-radius: 0%;  margin: 0 auto;}
    .tech_summary .tech_info li a div {line-height: 45px;}
    
	/*.tech_summary .tech_info li a div span {color: #fff; margin-right: 10px; font-size: 14px; line-height: 45px;}*/
	/* 모바일에서 숫자가 내려가보여서 마진 죽임 LHH 2019-10-25 금 */
	.tech_summary .tech_info li a div span {color: #fff; font-size: 14px; line-height: 45px;}


    .tech_list ul li a {position: static; -webkit-transform: translateY(-0%); transform: translateY(-0%); z-index: 0; display: block; margin-top: 10px; }

    /* business relationship */
    .steno {height: 1170px;}
    .steno ul {margin-top: 10px; margin-bottom: 10px;}

    .steno .partner {position: absolute; top: 630px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100%; height: 164px; background: url(../img/ksteno/partner_bg@2x.png) no-repeat; background-size: contain; text-align: center;}

    
    
    
}


@media screen and (max-width: 29em) {
	.about {position: relative; background: url(../img/ksteno/ceo_bg_02@2x.jpg) no-repeat; background-size: 100% 360px; padding-top: 360px; margin-bottom: 160px;}
    .about_top {position: absolute; top: -100px; left: inherit; right: 0px; z-index: 99; width: 175px; height: 175px; background: url(../img/ksteno/sign_box_bg@2x.jpg) no-repeat; background-size: cover;}
    .sign_box {width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 30px; background: url(../img/ksteno/ceo_sign@2x.png) center 90px no-repeat; background-size: 50%; }
    .sign_box em {margin-top: 15px;}
    .ceo_photo {position: absolute; top: -335px; left: 0%; z-index: 98; -webkit-transform: translateX(0%); transform: translateX(0%); width: 361px; height: 335px; background: url(../img/ksteno/ceo_pic.png) no-repeat; background-size: cover;}
}









@media only screen and (min-width: 35.5em) and (max-width: 48em) {/*568px부터 태블릿 전 */
    
	.visual {height: 360px; color: #313131;}


	a.logo_class{width:50%;}

	.mo_hide, .depth_02 {display: none!important;} 
    .top_menu+div {margin-top: 20px;}
    
    /* mo_nav */
/*
    #mobile {
        position: relative;
        overflow: hidden;
    }
*/
    .nav_wrap {  
        height: 100%;
        position: fixed;
        top: 0;
        left: -65px;
        z-index: 999999;
        background: rgba(255,255,255,.95);
        -webkit-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
        -o-box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
        box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.2);
		overflow:auto;
    }
    #burgerBtn {
        border-top: 2px solid #aaa;
        height: 25px;
        width: 25px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        position: absolute;
        z-index: 30;
        right: 30px;
        top: 20px;
        cursor: pointer;
        -webkit-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
    }
    #burgerBtn:before {
        content: " ";
        display: block;
        position: absolute;
        height: 2px;
        width: 30px;
        left: 0;
        background: #aaa;
        top: 8px;
        -webkit-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
    }
    #burgerBtn:after {
        content: " ";
        display: block;
        position: absolute;
        height: 2px;
        width: 28px;
        left: 0;
        background: #aaa;
        bottom: 3px;
        -webkit-transition: all 0.3s ease-in;
        transition: all 0.3s ease-in;
    }
    #nav {
        list-style-type: none;
        margin: 0px 20px 0px;
        padding: 0px;
        overflow: hidden;   
    }
    #nav li {
        line-height: 30px;
        width: 0;
        padding: 30px 0 30px;
        -webkit-transition: all 0.6s ease-in;
        transition: all 0.6s ease-in;
        border-bottom: 1px solid #ccc;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    #nav li a {display: block; font-size: 18px; text-transform: uppercase; color: #333; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 30px;}
    
    #nav li a span {color: #5c88ff;}
    #nav li + li {
        margin-left: -40px;
    }
    #nav li + li + li {
        margin-left: -80px;
    }
    #nav li + li + li + li {
        margin-left: -120px;
    }

	
    .navigation #nav li {
        width: 260px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        margin-left: 40px;
    }
    .navigation #burgerBtn {
        border-color: transparent;
    }
    .navigation #burgerBtn:before {
        -webkit-transform: rotate(45deg);
        -khtml-transform: rotate(45deg);
        transform: rotate(45deg);
        width: 33px;
        left: -2px;
        top: 10px;
    }
    .navigation #burgerBtn:after {
        -webkit-transform: rotate(135deg);
        -khtml-transform: rotate(135deg);
        transform: rotate(135deg);
        bottom: 11px;
        width: 33px;
        left: -2px;
    }

    .demo2.navigation #mobileBodyContent {
        margin-left: 320px;
        -webkit-opacity: 0.4;
        -moz-opacity: 0.4;
        -khtml-opacity: 0.4;
        -o-opacity: 0.4;
        opacity: 0.4;
    }
    
    /* spot */
	.spot_nav { bottom:20px; }
	.spot_copy {padding: 50px 60px 0px; padding-right:35%; }
    .spot_copy h2 {font-size: 20px;}
    .spot_copy h2 + p {font-size: 15px;}
	.spot_copy > .spot_link{ font-size: 15px; width:100px;}
    .slick-next {right: 10px;}
    .slick-prev {left: 10px;}

    /* cnt */
    .cnt_menu > div {margin-bottom: 10px;}
    .brd_cnt > div {margin-bottom: 10px;}
    
    /* prd_cas */
    .cnt_wrap.prd_cas {position: relative; width: 100%; height:800px; background-SIZE: CONTAIN;background-position-y: -208px;}

    .prd_img img {width: 303px; height: 180px;}
    .tab_nav li {line-height: 1.2; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 10px; }
    .tab_nav li a {font-size: 14px; border-bottom: 1px solid #aaa; color: #000;}
    
    /* footer */
    .cs_banner > em {line-height: 120px; padding-left: 30px; -webkit-box-sizing: border-box; box-sizing: border-box;}
    .cs_banner p {position: relative; height: 160px; background: none;  font-size: 16px; font-weight: 300;}
    .cs_banner p span {position: absolute; top: 26%; left: 4%;}
    .cs_banner p span em {font-size: 30px; display: block; font-weight: 700;}
    .cs_banner a {left: 40px; -webkit-transform: translateY(-0%); transform: translateY(-0%); width: 160px; height: 40px; line-height: 40px; font-size: 18px;}
    
    .foot_menu > ul > li > a {text-align: center; margin-top: 15px; margin-bottom: 10px;}
    .foot_menu > ul > li > ul {display: none;}
    .foot_quick+p {text-align: center; margin-bottom: 50px;}
    
    /* sub */
    h3 span::before {  
        display: none;
    }
    h3 span::after {
        display: none;
    }
    /* history */
    .cnt_blk {position: relative; margin-bottom: 80px; -webkit-box-sizing: border-box; box-sizing: border-box; padding-top: 50px; padding-bottom: 50px;}
    .add_line {display: none;}
    /* cnt_odd */
    .history .cnt_blk:nth-of-type(odd) {padding-left: 0px;}
    .history .cnt_blk:nth-of-type(even) {padding-right: 0px;}
    .history .cnt_blk:nth-of-type(odd) .half_cnt_r,
    .history .cnt_blk:nth-of-type(odd) .half_cnt_l {position: relative; height: auto;}
    .history .cnt_blk:nth-of-type(odd) .add_img, 
    .history .cnt_blk:nth-of-type(even) .add_img {text-align: center; margin-top: 20px; margin-bottom: 20px;}
    .history .cnt_blk:nth-of-type(odd) .add_img img,
    .history .cnt_blk:nth-of-type(even) .add_img img {position: static; top: 0px; left: 0px; z-index: 0; width: 80%;}
    .history .cnt_blk:nth-of-type(odd) em.year {position: absolute; top: -70px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); z-index: 99; font-size: 48px; font-weight: bold; color: #202256; padding-left: 5px;}

    .history .cnt_blk:nth-of-type(odd) ol li,
    .history .cnt_blk:nth-of-type(even) ol li {line-height: 1.8; margin-bottom: 10px;}
    .history .cnt_blk:nth-of-type(odd) ol li em {margin-right: 20px;}

    .history .cnt_blk:nth-of-type(odd) .year_bg,
    .history .cnt_blk:nth-of-type(even) .year_bg {display: none;}

    /* cnt_even */
    .history .cnt_blk:nth-of-type(even) em.year {position: absolute; top: -30px; left: 0%; right: 0%; text-align: center; z-index: 98; font-size: 48px; font-weight: bold; color: #202256; padding-left: 5px;}
    .history .cnt_blk:nth-of-type(even) ol li em {color: #202256; font-weight: bold; margin-left: 0px;}
    .history .cnt_blk:nth-of-type(even) ol li span {margin-left: 20px;}
    .history .cnt_blk em.year::before {
        display: none;   
    }
    .history .cnt_blk em.year::after {
        display: none;   
    }
    
     /* store */
    .prd_menu h4 {text-align: center; margin-top: 40px;}
    .prd_01, .prd_02, .prd_03 {-webkit-box-sizing: border-box;box-sizing: border-box; }
	.prd-new h4 { left:20px; top:20px; }
    .prd_menu a > div {padding: 40px 30px!important;}
    .prd_01 {background: url(../img/ksteno/prd_01@2x.jpg) left center no-repeat; background-size: cover;}
    /* prd 02 */
    /*.prd_02 {height: 48%; background: #f1f1f1 url(../img/ksteno/prd_02@2x.jpg) -100px bottom no-repeat; background-size: cover;}*/
    /* prd 03 */
    .prd_03 {}
    

    
    /* business */
    .add_prd_img > div {height: 500px !important; margin-top: 20px;}
    .add_nav ul {position: relative; display: block; width: 100%; padding-lefT: 0px; padding-right: 0px; height: 100%; padding-bottom: 50px; -webkit-box-sizing: border-box; box-sizing: border-box;}
    .add_nav ul li {float: left; display: block; width: 50%; border-bottom: 1px solid #ddd; border-left: 1px solid #ddd;}
    .add_nav ul li:first-child {border-left: 1px solid #ddd; }
    .add_nav ul li:last-child {/*border-right: 0px; */}
    .add_nav ul li.active {width: 100%; position: absolute; bottom: 0px; left: 0px; border-top: 1px solid #ddd; border-bottom: none;}
    
    
    /* function_sw */
    .sw_list .img_add {width: 100%; height: 240px; background: url(../img/ksteno/manual_add_img@2x.png) center top no-repeat; background-size: 50%;}
    .sw_list:nth-of-type(3) {margin-top: 10px;}
	.sw_list_img{display:none;}
	.sw_list_img_mo{display:block;width:100%;}
    
    
    /* store add */
    .list_wrap.store .prd_menu h4 {text-align: left;}
    .list_wrap.store .prd_02 {margin-top: 6%;}
    .list_wrap.store.etc .prd_01.etc {margin-top: 6%;}
    .list_wrap.store.keyboard .prd_01.keyboard {margin-top: 6%;}
    
    /* cnt_mall main */
    .function_menu.cnt > div {padding: 0px 70px;}
    
    /* mall_main */
    .mall_main .list_wrap {height: auto;}
    .mall_main .inner_book {padding: 70px 0px; }
    .mall_main .inner_book div a {padding-left: 25%; padding-right: 25%;}
    .mall_main .inner_book div a img {width: 100%; height: 100%;}
    button.leftArrow {left: 20px;}
    button.leftMajor {left: 20px;}
    button.rightArrow {right: 20px;}
    button.rightMajor {right: 20px;}
    /* major book */
    .mall_main .list_wrap.major {height: auto;}
    .mall_main .inner_major {padding: 60px 40px;}

    .mall_main .inner_major div a {padding-left: 20%; padding-right: 20%;}
    .mall_main .inner_major div a img {width: 100%; height: 100%;}
    
    /* about */
    .about {position: relative; background: url(../img/ksteno/ceo_bg_02@2x.jpg) no-repeat; background-size: 100% 360px; padding-top: 360px; margin-bottom: 160px;}
    .about_top {position: absolute; top: -210px; left: inherit; right: 20px; z-index: 99; width: 240px; height: 240px; background: url(../img/ksteno/sign_box_bg@2x.jpg) no-repeat; background-size: cover;}
    .sign_box {width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 30px; background: url(../img/ksteno/ceo_sign@2x.png) center 120px no-repeat; background-size: 50%; }
    .sign_box em {margin-top: 50px;}
    .ceo_photo {position: absolute; top: -335px; left: 0%; z-index: 98; -webkit-transform: translateX(0%); transform: translateX(0%); width: 361px; height: 335px; background: url(../img/ksteno/ceo_pic.png) no-repeat; background-size: cover;}

    .about p {padding-left: 40px; padding-right: 40px; margin-top: 80px;}
    
    .tech {
        position: relative;
        background: url(../img/ksteno/tech_bg@2x.jpg) no-repeat;
            background-size: auto;
        background-size: 100% 400px;
    }
    .tech_summary .tech_info {
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-left: 0px;
        padding-right: 0px;
        margin-top: 50px;
        margin-bottom: 99px;
    }
    .tech_info li a .w_hide {display: none!important;}
    .tech_info li a .mo_hide {display: block!important;}
    
    /* business relationship */
    .steno {height: 1170px;}
    .steno > div h4 {
        margin-left: auto;
        margin-right: auto;
        width: 60%;
    }
    .steno ul {margin-top: 20px; margin-bottom: 20px;}

    .steno .partner {position: absolute; top: 630px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 100%; height: 164px; background: url(../img/ksteno/partner_bg@2x.png) center center no-repeat; background-size: contain; text-align: center;}
}


















@media only screen and (min-width: 48em) and (max-width: 64em) {/*태블릿과 웹 중간만 적용*/

    .gnb {-webkit-transition: all .5s; transition: all .5s;}
    .gnb > ul {
        position: relative;
        z-index: 10;
        overflow: hidden;
    }

    .gnb > ul > li {
      position: relative;
    }
    .gnb > ul > li:hover:after {
      width: 50%;
    }
    .gnb > ul > li:hover > a {color: #6e95ff;}
    .gnb > ul > li:after {
      display: block;
      content: "";
/*
      position: absolute;
      top: 46px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      width: 0px;
      height: 2px;
      background: #2a86f8;
      -webkit-transition: all .2s;
      transition: all .2s;
*/
    }

    .gnb > ul > li > a {
/*      display: inline-block;*/
      width: 100%;

    }
    .depth_02 {
        display: none;
        opacity: 0;
        margin-top: 30px;
        -webkit-transition: all 1s ease-out;
      transition: all 1s ease-out;
    }
    .depth_02 > li {
        text-align: left; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 32px; line-height: 36px; 
    }
    .depth_02 > li > a {
        display: block; 
        font-size: 14px;
    }
    .depth_02.on {
        display: block;
        opacity: 1;
    }
    
    .depth_03 {margin-bottom: 15px;}
    .depth_03 li {line-height: 30px; text-align: left; -webkit-transition: all .5s;transition: all .5s;}
    .depth_03 li a {position: relative; color: #4b5087; font-size: 13px; -webkit-transition: all .5s;transition: all .5s;}
    .depth_03 li:hover a::after {position: absolute; bottom: -2px; left: 0px; width: 100%; height: 1px; background-color: #4b5087; z-index: 2; content: '';}
  

    .sub_bg {
      position: absolute;
      top: 121px;
      left: 0;
      width: 100%;
      height: 0;
      background: #e9efff;
      opacity: .95;
      z-index: 5;

    }

/*    .sub_bg::after {content: attr(class); position: absolute; bottom: 0px; left: 0px; width: 100%; height: 4px; background: url(../img/sennet/nav_line@2x.jpg) repeat-x; background-size: cover; font-size: 0px;}*/
    .sub_bg.on {
      height: 450px;
    }
    



    .mo_hide {display: block;} 
    .w_hide {display: none;}
    .t_hide {display: none!important;}
    
    h1 a {background-position: left 8px;}
    
    .top_menu+div {margin-top: 20px;}
    
    /* quick_menu */
    .quick_menu a:first-child {margin-left: 15px;}
    
    /* spot */
    .visual {height: 450px;}
    .spot_copy.inner_1140 {padding-top: 80px; padding-left: 100px;}
    .spot_copy h2 {font-size: 28px;}
    .spot_copy h2 + p {font-size: 16px;}
	.spot_copy > .spot_link{ font-size: 16px; width:150px;}
    
    /* cnt */
    .cnt_menu > div a > span {font-size: 16px;}
    .cnt_menu > div a p {position: static; bottom: 0px; left: 0px; font-size: 14px; width: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 210px 15px 0px;}
    .cnt_menu > div a p span {position: absolute; right: 15px; top: 18px;}
    
    /* prd_cas 여기서부터 */
    .cnt_wrap.prd_cas {height:900px;background-position-y: -226px;}
    .main_desc { margin: 50px auto 0px;}
    
    /* tab */
    .tab_wrap {text-align: center; margin: 0 auto;}
    .tab_nav {margin-top: 40px; margin-bottom: 50px;}
    
    /* footer */
    /* cs banner */
    .cs_banner > em {font-size: 20px;}
    .cs_banner p {position: relative; height: 160px; background: url(../img/ksteno/footer_call@2x.png) 15% bottom no-repeat; background-size: 117px 103px; font-size: 16px; font-weight: 300;}
    .cs_banner p span {position: absolute; top: 40%; left: 45%;}
    .cs_banner a {width: 180px; height: 45px; line-height: 45px; font-size: 16px;}

    /* foot_menu */
    .foot_menu > ul > li > a {display: block; font-weight: 700; font-size: 14px; margin-top: 30px; margin-bottom: 20px;}
    .foot_menu > ul > li > ul {line-height: 1.8;}
    
    
    /* history */
    /* cnt_odd */
    .history .cnt_blk:nth-of-type(odd) .half_cnt_r,
    .history .cnt_blk:nth-of-type(even) .half_cnt_l {height: auto;}
    .history .cnt_blk:nth-of-type(odd) ol {margin-left: 25px; margin-top: 15px;}
    .history .cnt_blk:nth-of-type(odd) ol li {line-height: 1.8; font-size: 14px; clear: both; margin-bottom: 10px;}    
    .history .cnt_blk:nth-of-type(odd) ol li > *,
    .history .cnt_blk:nth-of-type(even) ol li > * {float: left;}
    .history .cnt_blk:nth-of-type(odd) ol li em {color: #202256; font-weight: bold; margin-right: 0px; width: 15%;}
    .history .cnt_blk:nth-of-type(odd) ol li span {width: 85%;}
    .history .cnt_blk:nth-of-type(odd) .add_img img,
    .history .cnt_blk:nth-of-type(even) .add_img img {top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%);}
    .history .cnt_blk:nth-of-type(odd) em.year,
    .history .cnt_blk:nth-of-type(even) em.year {top: 0px;}

    /* cnt_even */
    .history .cnt_blk:nth-of-type(even) {padding: 0px 0px 0px 50px;}
    .history .cnt_blk:nth-of-type(even) ol {margin-left: 0px; margin-top: 15px;}
    .history .cnt_blk:nth-of-type(even) ol li {line-height: 1.8; font-size: 14px; clear: both; margin-bottom: 10px;}
    .history .cnt_blk:nth-of-type(even) ol li em {color: #202256; font-weight: bold; margin-left: 0px; width: 10%;}
    .history .cnt_blk:nth-of-type(even) ol li span {margin-left: 0px; width: 70%;}
    .history .cnt_blk:nth-of-type(even) .year_bg {position: absolute; top: 50%; left: 25%; z-index: 0; -webkit-transform: translateY(-50%) rotateZ(270deg); transform: translateY(-50%) rotateZ(270deg); font-size: 130px; color: #dfdfff; font-weight: bold; opacity: .3; }
    
    /* business */
    .add_nav ul {width: 100%; padding-lefT: 0px; padding-right: 0px; }
    
    /* cnt_mall main */
    .function_menu.cnt > div {padding: 0px;}
    
    /* mall_main */
    .mall_main .list_wrap {height: auto;}
    .mall_main .inner_book {padding: 70px 0px; }
    .mall_main .inner_book div a {padding-left: 25%; padding-right: 25%;}
    .mall_main .inner_book div a img {width: 100%; height: 100%;}
    button.leftArrow {left: 20px;}
    button.leftMajor {left: 20px;}
    button.rightArrow {right: 20px;}
    button.rightMajor {right: 20px;}
    /* major book */
    .mall_main .list_wrap.major {height: auto;}
    .mall_main .inner_major {padding: 60px 40px;}

    .mall_main .inner_major div a {padding-left: 20%; padding-right: 20%;}
    .mall_main .inner_major div a img {width: 100%; height: 100%;}
    
     /* about */
    .about {position: relative; background: url(../img/ksteno/ceo_bg_02@2x.jpg) no-repeat; background-size: 100% 360px; padding-top: 360px; margin-bottom: 160px;}
    .about_top {position: absolute; top: -210px; left: 74px; z-index: 99; width: 240px; height: 240px; background: url(../img/ksteno/sign_box_bg@2x.jpg) no-repeat; background-size: cover;}
    .sign_box {width: 100%; height: 100%; -webkit-box-sizing: border-box; box-sizing: border-box; padding: 30px; background: url(../img/ksteno/ceo_sign@2x.png) center 120px no-repeat; background-size: 50%; }
    .sign_box em {margin-top: 50px;}
    .ceo_photo {position: absolute; top: -335px;  z-index: 98; -webkit-width: 361px; height: 335px; background: url(../img/ksteno/ceo_pic.png) no-repeat; background-size: cover;}

    .about p {padding-left: 40px; padding-right: 40px; margin-top: 80px;}
    
    
    /* search_add */
    .quick_menu {position: relative; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 12px; padding-right:0;}
	.quick_menu a.link.educator { top:auto; bottom:-12px; }
    .srch_wrap {position: relative; -webkit-transform: translate(-35px, 26px); transform: translate(-35px, 26px);}
    .srch_wrap .search {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 24px;
        height: 24px;
        background: transparent!important;
        border-radius: 50%;
        -webkit-transition: all 1s;
        transition: all 1s;
        z-index: 4;
        -webkit-box-shadow: none!important;
        box-shadow: none!important;
    }
    .srch_wrap .search:hover {
        cursor: pointer;
    }
    .srch_wrap .search::before {
        content: "";
        position: absolute;
        margin: auto;
        top: 10px;
        right: 0;
        bottom: 0;
        left: 10px;
        width: 6px;
        height: 2px;
        background: #5a5a5a;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transition: all .5s;
        transition: all .5s;
    }
    .srch_wrap .search::after {
        content: "";
        position: absolute;
        margin: auto;
        top: -2px;
        right: 0;
        bottom: 0;
        left: -1px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 2px solid #5a5a5a;
        -webkit-transition: all .5s;
        transition: all .5s;
    }
    .srch_wrap input {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 24px;
        height: 30px;
        outline: none;
        border: none;
        color: #5a5a5a;
        padding: 0 0px 0 12px;
        border-radius: 30px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all 1s;
        transition: all 1s;
        opacity: 0;
        z-index: 5;
        letter-spacing: 0.1em;
    }
    .srch_wrap input:hover {
        cursor: pointer;
    }
    .srch_wrap input:focus {
        width: 200px;
        opacity: 1;
        cursor: text;
        border: 1px solid #ddd!important;
        -webkit-box-shadow: none!important;
        box-shadow: none!important;
        -webkit-transform: translateX(-120px);
        transform: translateX(-120px);
    }
    .srch_wrap input:focus ~ .search {
        right: -124px;
        background: #151515;
        z-index: 6;
    }
    .srch_wrap input:focus ~ .search::before {
        top: 0;
        left: 0;
        width: 16px;
    }
    .srch_wrap input:focus ~ .search::after {
        top: 0;
        left: 0;
        width: 16px;
        height: 2px;
        border: none;
        background: #151515;
        border-radius: 0%;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .srch_wrap input::-webkit-input-placeholder {
        color: #fff;
        opacity: 0.5;
    }
    .srch_wrap input:-ms-input-placeholder {
        color: #fff;
        opacity: 0.5;
    }
    .srch_wrap input::placeholder {
        color: #fff;
        opacity: 0.5;
        font-weight: bolder;
    }
	
}


































@media screen and (min-width: 64em) {/*1024px부터*/
	.cnt_wrap.prd_cas {position: relative; width: 100%; height:1030px; background: url(../img/ksteno/prd_cas_bg.jpg) left top repeat-x;background-position-y: -228px; margin-top:40px !important;}


    .w_hide {display: none;}
    .inner_1140 {    
        position: relative;
        width: 1140px; 
        margin: 0 auto;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        padding-left: 10px;
        padding-right: 10px;
    }
    .inner_no_pad {    
        position: relative;
        width: 1140px; 
        margin: 0 auto;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }  
    
    .top_menu+div {margin-top: 20px;}
    /* nav */
    .gnb {-webkit-transition: all .5s; transition: all .5s;}
    .gnb > ul {
        position: relative;
        z-index: 10;
        overflow: hidden;
    }

    .gnb > ul > li {
      position: relative;
    }
    .gnb > ul > li:hover:after {
      width: 50%;
    }
    .gnb > ul > li:hover > a {color: #6e95ff;}
    .gnb > ul > li:after {
      display: block;
      content: "";
/*
      position: absolute;
      top: 46px;
      left: 50%;
      -webkit-transform: translateX(-50%);
      transform: translateX(-50%);
      width: 0px;
      height: 2px;
      background: #2a86f8;
      -webkit-transition: all .2s;
      transition: all .2s;
*/
    }

    .gnb > ul > li > a {
/*      display: inline-block;*/
      width: 100%;

    }
    .depth_02 {
        display: none;
        opacity: 0;
        margin-top: 30px;
        -webkit-transition: all 1s ease-out;
      transition: all 1s ease-out;
    }
    .depth_02 > li {
        text-align: left; -webkit-box-sizing: border-box; box-sizing: border-box; padding-left: 32px; line-height: 36px; 
    }
    .depth_02 > li > a {
        display: block; 
        font-size: 14px;
    }
    .depth_02.on {
        display: block;
        opacity: 1;
    }
    
    .depth_03 {margin-bottom: 15px;}
    .depth_03 li {line-height: 30px; text-align: left; -webkit-transition: all .5s;transition: all .5s;}
    .depth_03 li a {position: relative; color: #4b5087; font-size: 13px; -webkit-transition: all .5s;transition: all .5s;}
    .depth_03 li:hover a::after {position: absolute; bottom: -2px; left: 0px; width: 100%; height: 1px; background-color: #4b5087; z-index: 2; content: '';}
    

	/*
	.sub_bg {
      position: absolute;
      top: 121px;
      left: 0;
      width: 100%;
      height: 0;
      background: #e9efff;
      opacity: .95;
      z-index: 5;
      -webkit-transition: all .3s ease-out;
      transition: all .3s ease-out;
    }
	*/
    .sub_bg {
      position: absolute;
      top: 121px;
      left: 0;
      width: 100%;
      height: 0;
      background: #e9efff;
      opacity: .95;
      z-index: 5;

    }

/*    .sub_bg::after {content: attr(class); position: absolute; bottom: 0px; left: 0px; width: 100%; height: 4px; background: url(../img/sennet/nav_line@2x.jpg) repeat-x; background-size: cover; font-size: 0px;}*/
    .sub_bg.on {
      height: 450px;
    }
    
    
    .main_desc {margin-left: 265px;}
    .tab_wrap {margin-left: 138px;}
    
    /* footer */
    .foot_menu > ul > li:nth-child(4) {padding-left: 30px;}
    .foot_menu > ul > li:nth-child(5) {padding-left: 50px;}
    .foot_menu > ul > li:nth-child(6) {padding-left: 70px;}
    
	.foot_menu .sns { top:0; bottom:auto; right:0; left:auto; }

    address {background: url(../img/ksteno/logo_foot@3x.png) right bottom no-repeat; background-size: 117px 32px; position:relative; }    
    
    /* search_add */
    .quick_menu {position: relative; -webkit-box-sizing: border-box; box-sizing: border-box;}
    .srch_wrap {position: relative; -webkit-transform: translate(-35px, 26px); transform: translate(-35px, 26px);}
    .srch_wrap .search {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 24px;
        height: 24px;
        background: transparent!important;
        border-radius: 50%;
        -webkit-transition: all 1s;
        transition: all 1s;
        z-index: 4;
        -webkit-box-shadow: none!important;
        box-shadow: none!important;
    }
    .srch_wrap .search:hover {
        cursor: pointer;
    }
    .srch_wrap .search::before {
        content: "";
        position: absolute;
        margin: auto;
        top: 10px;
        right: 0;
        bottom: 0;
        left: 10px;
        width: 6px;
        height: 2px;
        background: #5a5a5a;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        -webkit-transition: all .5s;
        transition: all .5s;
    }
    .srch_wrap .search::after {
        content: "";
        position: absolute;
        margin: auto;
        top: -2px;
        right: 0;
        bottom: 0;
        left: -1px;
        width: 8px;
        height: 8px;
        border-radius: 50%;
        border: 2px solid #5a5a5a;
        -webkit-transition: all .5s;
        transition: all .5s;
    }
    .srch_wrap input {
        position: absolute;
        margin: auto;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        width: 24px;
        height: 30px;
        outline: none;
        border: none;
        color: #5a5a5a;
        padding: 0 0px 0 12px;
        border-radius: 30px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
        -webkit-transition: all 1s;
        transition: all 1s;
        opacity: 0;
        z-index: 5;
        letter-spacing: 0.1em;
    }
    .srch_wrap input:hover {
        cursor: pointer;
    }
    .srch_wrap input:focus {
        width: 200px;
        opacity: 1;
        cursor: text;
        border: 1px solid #ddd!important;
        -webkit-box-shadow: none!important;
        box-shadow: none!important;
    }
    .srch_wrap input:focus ~ .search {
        right: -355px;
        background: #151515;
        z-index: 6;
    }
    .srch_wrap input:focus ~ .search::before {
        top: 0;
        left: 0;
        width: 16px;
    }
    .srch_wrap input:focus ~ .search::after {
        top: 0;
        left: 0;
        width: 16px;
        height: 2px;
        border: none;
        background: #151515;
        border-radius: 0%;
        -webkit-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
    .srch_wrap input::-webkit-input-placeholder {
        color: #fff;
        opacity: 0.5;
    }
    .srch_wrap input:-ms-input-placeholder {
        color: #fff;
        opacity: 0.5;
    }
    .srch_wrap input::placeholder {
        color: #fff;
        opacity: 0.5;
        font-weight: bolder;
    }

}











.tooltip {
  position: absolute;
  z-index: 9999;
  display: block;
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 12px;
  font-style: normal;
  font-weight: normal;
  line-height: 1.42857143;
  text-align: left;
  text-align: start;
  text-decoration: none;
  text-shadow: none;
  text-transform: none;
  letter-spacing: normal;
  word-break: normal;
  word-spacing: normal;
  word-wrap: normal;
  white-space: normal;
  filter: alpha(opacity=0);
  opacity: 0;

  line-break: auto;
}
.tooltip.in {
  filter: alpha(opacity=90);
  opacity: .9;
}
.tooltip.top {
  padding: 5px 0;
  margin-top: 10px;
}
.tooltip.right {
  padding: 0 5px;
  margin-left: 3px;
}
.tooltip.bottom {
  padding: 5px 0;
  margin-top: 3px;
}
.tooltip.left {
  padding: 0 5px;
  margin-left: -3px;
}
.tooltip-inner {
  max-width: 200px;
  padding: 3px 8px;
  color: #fff;
  text-align: center;
  background-color: #000;
  border-radius: 4px;
}
.tooltip-arrow {
  position: absolute;
  width: 0;
  height: 0;
  border-color: transparent;
  border-style: solid;
}
.tooltip.top .tooltip-arrow {
  bottom: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-left .tooltip-arrow {
  right: 5px;
  bottom: 0;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.top-right .tooltip-arrow {
  bottom: 0;
  left: 5px;
  margin-bottom: -5px;
  border-width: 5px 5px 0;
  border-top-color: #000;
}
.tooltip.right .tooltip-arrow {
  top: 50%;
  left: 0;
  margin-top: -5px;
  border-width: 5px 5px 5px 0;
  border-right-color: #000;
}
.tooltip.left .tooltip-arrow {
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-width: 5px 0 5px 5px;
  border-left-color: #000;
}
.tooltip.bottom .tooltip-arrow {
  top: 0;
  left: 50%;
  margin-left: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-left .tooltip-arrow {
  top: 0;
  right: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}
.tooltip.bottom-right .tooltip-arrow {
  top: 0;
  left: 5px;
  margin-top: -5px;
  border-width: 0 5px 5px;
  border-bottom-color: #000;
}

.fade {
  opacity: 0;
  -webkit-transition: opacity 0.15s linear;
  -o-transition: opacity 0.15s linear;
  transition: opacity 0.15s linear;
}
.fade.in {
  opacity: 1;
}

/* editor 에서 삽입 한 이미지 width 조절 LHH 2023-07-05  */
.pure-u-1 img{max-width:100%;}