@import url('font.css'); /* 폰트임 */
@import url('https://fonts.googleapis.com/css2?family=Play:wght@700&display=swap');

html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,img,ins,kbd,q,s,samp,small,strike,sub,sup,tt,var,b,u,i,center,dl,dt,dd,ol,ul,li,fieldset,form,label,legend,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,output,ruby,section,summary,time,mark,audio,video{margin:0;padding:0;border:0;letter-spacing:normal} /* delete vertical-align,font:inherit; */
body,html{width:100%; height:100%; font-size:17px; font-weight:400; color:#777; font-family:'Spoqa Han Sans', sans-serif; line-height:1.6}
*{font-family:'Spoqa Han Sans', sans-serif; outline:none; -webkit-text-size-adjust: 100%; -moz-text-size-adjust: 100%; -ms-text-size-adjust: 100%; word-break:keep-all; box-sizing:border-box}
ol,ul,li{list-style:none;}
blockquote,q{quotes:none;}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none;}
table {border-collapse:separate;border-spacing:0; font-size:1rem;}
table caption {overflow:hidden; font-size:0; line-height:0; font-size:1rem;}
tbody,tfoot,thead,tr,th,td {margin:0;line-height:160%;letter-spacing:normal; word-break:break-all;}
span,strong {line-height:inherit; letter-spacing:inherit; font-weight:inherit; font-family:inherit}
dt{display:block;}
hr{display:none;}
a{cursor:pointer;text-decoration:none;color:#777; ;}
address{font-style:normal;}
input,select,img{vertical-align:middle;}
img{max-width:100%;}
input:focus, textarea:focus, button:focus {outline:none;}  /* 크롬에서 커서 클릭시 파란색 테두리 제외*/

select::-ms-expand {display:none}
select {padding:8px 5px; /* 여백으로 높이 설정 */
background: #fff url('/img/foot_select_arrow.gif') no-repeat right 15px center; /* 화살표 모양의 이미지 */
border: 1px solid #ddd;  border-radius: 0px; /* iOS 둥근모서리 제거 */
-webkit-appearance: none; /* 네이티브 외형 감추기 */ }
input:focus, textarea:focus, button:focus {outline:none;}  /* 크롬에서 커서 클릭시 파란색 테두리 제외*/
input[type=image] {border-radius:0 !important;}
input[type=text],input[type=button], input[type=submit] {/* border-radius:0 !important; -webkit-border-radius: 0; -webkit-appearance: none; */}





:root{

	--basic:#777;
	--main:#0EB3D3;
	--sub: #54A6F2;
	--white:#fff;
	--black:#222222;

	--eng: 'Outfit', 'Noto Sans KR', Malgun Gothic,'Malgun Gothic', sans-serif;
	--icon: "Material Symbols Outlined";

}



/* 레이아웃 */
#wrap {position:relative; width:100%; min-width:320px;}
.noScroll {overflow:hidden !important;}

.width1230 {max-width:1230px; margin:0 auto;}

.compad {padding:150px 0; box-sizing:border-box;}
.compad_t {padding:150px 0 0; box-sizing:border-box;}
.compad_m {padding:50px 0 0; box-sizing:border-box;}
.compad_b {padding:0 0 150px; box-sizing:border-box;}

.eng {font-family:'Oswald', sans-serif; letter-spacing:0 !important;}
.center{text-align:center !important;}
.bold {font-weight:700}
.blue {color:#0eb3d3 !important}
.white {color:#fff !important}
.red{color:#fc397c !important}

.show480 {display:none;}
.none480 {display:block;}

.show680 {display:none;}
.none680 {display:block;}

.show768 {display:none;}
.none768 {display:block;}

.show980 {display:none;}
.none980 {display:block;}


/* 슬릭 CSS */
.slick-slider{position: relative;display: block;box-sizing: border-box;
		-webkit-user-select: none;-moz-user-select: none;-ms-user-select: none;user-select: none;-webkit-touch-callout: none;-khtml-user-select: none;-ms-touch-action: pan-y;
			touch-action: pan-y;-webkit-tap-highlight-color: transparent; outline: 0 !important;}
.slick-slider:after {content:''; display:block; clear:both;}
.slick-list{position: relative;display: block;overflow: visible;margin: 0; padding:0 !important;  outline: 0 !important;}
.slick-slide{float: left; outline: 0 !important; border:0;}
.slick-initialized .slick-slide{display: block; outline: 0 !important;}




/***** S:: 버튼 CSS *****/
.moreBtn {position:relative; width:165px; height:52px; display:block; box-sizing:border-box; border-radius:50px; overflow:hidden; overflow:hidden; background:#0eb3d3; transition:all 0.3s linear; margin:40px 0 0;  text-align:left !important; }
.moreBtn span {position:relative; z-index:10; display:block; width:100%; height:100%; background:url('/img/moreArrow.png')no-repeat center right 30px; font-size:15px; line-height:50px; padding:0 30px; color:#fff; }
.moreBtn:after {content:''; width:180px; height:150px; position:absolute; bottom:-115%; right:-55%; background: radial-gradient( #7ee495, transparent , transparent ); transition:all 0.3s linear;}
.moreBtn:hover {box-shadow:0 15px 30px rgb(0 0 0 / 10%);}
.moreBtn:hover:after {transform:scale(2); transition:all 0.3s linear;}

.moreBtn.big {width:220px; height:55px; margin:50px auto 0;}
.moreBtn.big::after {bottom:-80%; right:-40%;}

.moreBtn_plus {position:relative; width:220px; height:52px; display:block; box-sizing:border-box; border-radius:50px; overflow:hidden; overflow:hidden; transition:all 0.3s linear;
background:linear-gradient(to right, #3eacdb , #7edfb9 ); margin:50px auto 0; transition:all 0.3s linear;}
.moreBtn_plus:after {content:''; width:calc(100% - 4px); height:calc(100% - 4px); background:#fff; border-radius:50px; position:absolute; top:2px; left:2px; transition:all 0.3s linear; overflow:hidden;}
.moreBtn_plus span {position:relative; color:#3ca5d8; font-size:15px; line-height:50px; padding:0 30px; display:block; z-index:10; letter-spacing:-0.5pt;}
.moreBtn_plus span:after {content:''; width:14px; height:14px; position:absolute; right:30px; top:50%; margin-top:-7px; background-size:100%; background:url('/img/arrow_plus.png')no-repeat center; transition:all 0.3s linear;}
		.moreBtn_plus:hover {box-shadow:0 15px 30px rgb(0 0 0 / 8%); transition:all 0.3s linear;}
		.moreBtn_plus:hover span:after {transform:rotate(360deg); transition:all 0.3s linear;}

.moreArrow {width:250px;}
.moreArrow span:after {width:17px; height:12px; background:url('/img/moreArrow_b.png')no-repeat center;}
.moreArrow:hover span:after {transform:rotate(0);}

.btnCircle {position:relative; display:block; width:35px; height:35px; background:linear-gradient(45deg, #3eacdb , #7edfb9 ); border-radius:100%; transition:all 0.3s linear;}
.btnCircle:after {content:''; width:17px; height:12px; background:url('/img/moreArrow.png')no-repeat center; position:absolute; top:50%; left:50%; margin:-6px 0 0 -8px;}
.btnCircle:hover {box-shadow:0 15px 30px rgb(0 0 0 / 8%); transition:all 0.3s linear;}
/***** E:: 버튼 CSS *****/



/* 공통 카테고리 css */
span.cate {display:block; position:absolute; top:15px; left:15px; width:100px; height:30px; background:#26b9d4; border-radius:50px; color:#fff; text-align:center; line-height:30px; font-size:14px; z-index:10; transition:all 0.3s linear;}
span.cate_circle {position:absolute; top:10px; right:10px; display:block; width:80px; height:80px; line-height:80px; border-radius:100%; background:#14a8c6; color:#fff; text-align:center; font-size:14px;
letter-spacing:-0.6pt; z-index:1111}

span.new {display:block; width:24px; height:24px; background:#ff2c85; border-radius:100%; text-align:center; line-height:24px; font-size:13px; font-weight:bold; color:#fff; position:absolute; top:13px; right:13px; z-index:9;}
/* 공통 카테고리 css */


/* 공통 CSS */
.table_style{position:relative; width:100%; border-collapse:separate; border-spacing:0px; border-top:2px solid #0eb3d3;}
.table_style.bor0 {border-top:0 !important; padding-right:9px;}
.table_style th {font-size:1rem; padding:20px 10px; border-bottom:1px solid #0eb3d3; background-color:#0eb3d3; letter-spacing:-0.5pt; text-align:center; font-weight:400; color:#fff; line-height:1; border-right:1px solid #ddd;}
.table_style th.gray {background:#f9f9f9; color:#222; border-bottom:1px solid #ddd;}
.table_style td {font-size:0.882rem; color:#666; letter-spacing:-0.7pt; border-bottom:1px solid #dddddd; padding:10px 20px; text-align:left; background:#fff; border-right:1px solid #ddd; line-height:1.6;}
.table_style .end {border-right:0;}
.detailBtn {display:block; width:70px; height:28px; border:1px solid #0eb3d3; box-sizing:border-box; line-height:26px; color:#fff; font-size:13px; letter-spacing:-0.6pt; background:#0eb3d3; border-radius:50px; text-align:center;
margin:5px auto 0; transition:all 0.2s linear;}
.detailBtn:hover {background:#fff; color:#0eb3d3; transition:all 0.2s linear;}
.table_style td.tab_tit {font-size:1rem; color:#222; letter-spacing:-0.7pt; line-height:1; text-align:center !important;}
.table_style td.tab_tit.font15 {font-size:0.882rem !important;}
.table_style td.right {text-align:right !important;}
		.table_style td p {position:relative; font-size:0.882rem; letter-spacing:-0.6pt; line-height:1.6; color:#666; padding-left:10px; box-sizing:border-box; margin:0 0 5px;}
		.table_style td p:last-child {margin:0;}
		.table_style td p:after {content:''; width:3px; height:3px; background:#8d929d; position:absolute; top:12px; left:0;}


.table_style2{width:100%; border-collapse:separate;}
.table_style2 th {color:#fff !important; line-height:75px; text-align:center; letter-spacing:-0.6pt; font-size:1.176rem; font-weight:400;}
.table_style2 th.blue {background:#0eb3d3; border-radius:30px 0 0 0;}
.table_style2 th.gray {background:#8d929d; border-radius:0 30px 0 0;}
.table_style2 td {border-bottom:1px dashed #d8d9dc; letter-spacing:-0.7pt; line-height:1; text-align:center;}
.table_style2 td:first-child {font-size:0.882rem;}
.table_style2 td:nth-child(2) {border-right:1px solid #0eb3d3; border-left:1px solid #0eb3d3;}
.table_style2 td:last-child {border-right:1px solid #ddd;}
.table_style2 td.tab_tit {font-size:0.882rem; color:#222;  background:#fff; line-height:1.5; padding:8px 10px;}
.table_style2 td.top {padding:30px 10px 8px;}
.table_style2 td.bottom {padding:8px 10px 30px;}
.table_style2 td:first-child.bottom {border-bottom:0;}
.table_style2 td:nth-child(2).bottom {border-bottom:1px solid #0eb3d3; border-radius:0 0 0 30px;}
.table_style2 td:last-child.bottom {border-bottom:1px solid #d8d9dc; border-radius:0 0 30px 0;}

.table_style.center {position:relative;}
.table_style.center:after {content:''; width:35%; height:calc(100% + 2px); border:4px solid #0eb3d3; box-sizing:border-box; position:Absolute; right:0; top:-2px;}
.table_style.center td {text-align:center !important; padding:15px 10px;}
.table_style.center td.black {color:#222;}

.table_style.center.noblank {}
.table_style.center.noblank:after {display:none;}
.table_style.center.noblank th:last-child {border-right:none;}
.table_style.center.noblank td:last-child {border-right:none;}

.table_style .cancel {text-decoration:line-through}

.font15 {letter-spacing:-0.6pt; font-size:0.882rem;}
.color999 {color:#999}

/* 공통 CSS */




/* 상단 팝업 */
#topNotice {position:relative; width:100%; z-index:99999; height:95px;}
#topNotice:after {content:''; width:100%; height:100%; background:#36455c;  position:absolute; top:0; left:0; z-index:-1;}
#topNotice.none {display:none !important;}
#topNotice .topNotice_in {position:relative; font-size:0;}
#topNotice p {font-size:15px; color:#fff; font-weight:400; letter-spacing:-0.6pt; line-height:1; position:absolute; top:40px; right:0;}
#topNotice p img {margin-left:10px;}
#topNotice a.close {position:absolute; width:31px; height:31px; right:-80px; top:33px; display:block;}
/* 상단 팝업 */




/* header */
#header {position:absolute; left:0; top:0; width:100%; z-index:9999; transition:all 0.3s linear; overflow:hidden; height:105px;}
#header.fixed, #header.nofixed  {position:fixed; top:-15px; transition:all 0.3s linear; background:#fff; box-shadow:0 5px 12px rgb(0 0 0 / 5%); height:95px;}
#header:after {content:''; width:100%; height:1px; background:#e3e4e8; position:absolute; top:106px; left:0; opacity:0; transition:all 0.3s;}
#header.on {height:450px; background:#fff; transition:all 0.3s linear;}
#header.on:after {opacity:1; transition:all 0.3s;}

#header .head_in {position:relative; padding:30px 0 25px;}
		#header .head_in h1 {display:inline-block; background:url("")no-repeat center; background-size:100% !important;}
		#header .head_in h1 img {opacity:0;}
		#header .head_in .sitemap {display:none !important;}
		#header .head_in .en_site {position: absolute; right: 88px; top: 46px; display: inline-flex; align-items: center; width: 100px;  color:#222; font-size: 0.75rem; font-weight: 700; padding-left: 26px;
		background-image: url("/img/enflag.png"); background-repeat: no-repeat; background-size: 20px 14px; background-position: left center; height:14px;}
		#header .head_in .customer {position:absolute; right:0; top:33px; display:block; width:125px; height:42px; line-height:40px; border-radius:50px; font-size:0.882rem;
		z-index:10; padding-left:50px; box-sizing:border-box; font-weight: 700; letter-spacing: -0.75px; transition:all 0.3s linear;color:#fff; z-index:10; overflow:hidden;}
		#header .head_in .customer::after {content:''; width:100%; height:100%; background-image: linear-gradient(to right, #0EB3D3, #FC397C); background-size: 300%;
  background-position: 0 0; position:absolute; top:0; left:0; z-index:-1;  animation: gradients 6s linear 1s infinite;}
		#header .head_in .customer::before {content:''; width:24px; height:20px; background:url("/img/customer_icon.svg")no-repeat center; position:absolute; top:9px; left:20px;}


@keyframes gradients {
  0% {
    background-position: 0 0;
  }
  25% {
    background-position: 50% 0;
  }
  50% {
    background-position: 100% 0;
  }
  75% {
    background-position: 50%;
  }
  100% {
    background-position: 0 0;
  }
}

#header .gnb_pro { padding-top: 50px;}
/* #header .gnb_pro {position:absolute; width:323px; height:278px; left:-246px; top:60px; padding-top:50px; background:url('/img/gnb_bg.png')no-repeat  right 30px bottom 15px;background-size: 170px 160px;*/
#header .gnb_pro h3 {font-size:1.412rem; font-weight:400; color:#222; letter-spacing:-0.7pt; line-height:1;}
#header .gnb_pro span {color:#0eb3d3; font-size:0.882rem; font-weight:400; line-height:14px; margin:8px 0 11px; display:block;}
#header .gnb_pro span img {margin-right:7px; margin-top:-2px;}
#header .gnb_pro p {font-size:1.1rem; font-weight:400; line-height:1.4;}
#header .gnb_pro a {width:135px; height:42px; display:block; border-radius:50px; background:#a4a9b3 url("/img/moreArrow.png")no-repeat center right  20px; color:#fff; padding:0 20px; box-sizing:border-box;
line-height:40px; letter-spacing:-0.6pt; color:#fff; font-weight:400; font-size:0.882rem; margin:20px 0 0;}
/* header */



/* GNB */
/* #gnb .menu {font-size:0;}
#gnb .menu > li {display:inline-block; margin-right:45px; vertical-align:top;} */
#gnb {position:absolute; top:45px; left:45%; margin-left:-280px;}
#gnb .menu { display: flex; gap: 28px; font-size: 0; }
#gnb .menu > li { margin-right: 0; vertical-align: top; width: 120px; text-align: center; position: relative; }

#gnb .menu > li:nth-child(2) {margin: 0 10px 0 20px;}

#gnb .menu > li:last-child {margin-right:0;}
#gnb .menu > li .gnb_1depth {display: inline-block; position:relative; font-size:1.059rem; color:#222; font-weight:400; letter-spacing:-0.7pt; line-height:1; transition:all 0.3s linear; }

#gnb .menu > li .gnb_1depth.none {opacity:0;} 
#gnb .menu > li .gnb_1depth:after {content:''; width:0; height:3px; background:#0eb3d3; position:absolute; bottom:-44px; left:0; z-index:99; transition:all 0.3s linear;}
#gnb .menu > li.on .gnb_1depth {color:#0eb3d3; transition:all 0.3s linear;}
#gnb .menu > li.on .gnb_1depth:after {width:100%; transition:all 0.3s linear;}

#gnb .menu > li .gnb_1depth.t_blog {display:block; line-height:1; background:url("/img/naver.png")no-repeat center; }
#gnb .menu > li .gnb_1depth.t_blog::after {bottom:-43px;}
#gnb .menu > li .gnb_1depth.t_blog:hover {background:url("/img/naver_up.png")no-repeat center; }
#gnb .menu > li .gnb_1depth.t_blog img {opacity:0;}

#gnb .menu_depth {padding-top:72px; text-align: left;} 
#gnb .menu > li:nth-child(1) .menu_depth { padding-left: 18px; }  
#gnb .menu > li:nth-child(2) .menu_depth { padding-left: 12px; }  
#gnb .menu > li:nth-child(3) .menu_depth { padding-left: 20px; }  
#gnb .menu > li:nth-child(4) .menu_depth { padding-left: 20px; }  
#gnb .menu > li:nth-child(5) .menu_depth { padding-left: 28px; }  
#gnb .menu_depth a {transition:all 0.3s linear; display: inline-block; width: 120px; } 

#gnb .menu_depth a:hover {color:#0eb3d3; text-decoration:underline; transition:all 0.3s linear;}
#gnb .menu_depth > a {display:block; font-size:0.882rem; color:#666; font-weight:400; letter-spacing:-0.6pt; line-height:1; margin:14px 0; }
#gnb .menu_depth > a.blank {padding-right:20px; background:url('/img/blank_icon.gif')no-repeat center right 20px;}
#gnb .menu_depth > a .badge_free{display:inline-block;margin-left:4px;padding:2px 5px 3px 5px;border-radius:3px;background-color:#FC397C;font-size:0.706rem;color:#fff;}
#gnb .menu_depth > a .badge_new{display:inline-block;margin-left:4px;padding:2px 5px 3px 5px;border-radius:3px;background-color:#ff142c;font-size:0.706rem;color:#fff;}

#gnb .menu_depth > ul {display:inline-block; width:100%; margin:0 0 8px;}
#gnb .menu_depth > ul > li {margin:0 0 13px;}
#gnb .menu_depth > ul > li:last-child {margin:0;}
#gnb .menu_depth > ul > li > a {position:relative; font-size:0.824rem; color:#888; letter-spacing:-0.6pt; font-weight:400; padding-left:10px; line-height:1; }
#gnb .menu_depth > ul > li > a:after {content:''; width:3px; height:2px; background:#aaa; position:absolute; top:10px; left:0;}
/* #gnb .menu_depth > a.blank:hover {background:url('/img/blank_icon_up.gif')no-repeat center right;} */
/* GNB */

/* 슬라이드 메뉴 : 모바일 메뉴 */
#menuArea {position:fixed !important; top:0; right:-400px; width:360px;  z-index:999999999999; height:100%; max-width:100%; opacity:0; visibility:hidden; transition:all 0.2s linear; min-width:320px;}
#menuArea.view {right:0; opacity:1; visibility:visible; transition:all 0.2s linear;}
#menuArea .menuList {position:absolute; height:100%; width:100%; box-sizing:border-box; overflow-y:auto; background:#fff;}
#menuArea .menuList h1 {position:relative; padding:20px 15px; box-sizing:border-box; overflow:hidden; border-bottom:1px solid #ddd; margin:0 0 10px;}
#menuArea .menuList h1 > a > img {width:120px;}
#menuArea .btnMenu_mClose {display:block; padding:0; margin:0; position:absolute; top:27px; right:30px; background:none; border:none; z-index:99999999999 !important; cursor:pointer;}
#menuArea .btnMenu_mClose img {}

#menuArea .menuList>.list {width:100%;}
#menuArea .menuList>.list>li {}
#menuArea .menuList>.list>li>a {position:relative; display:block; font-size:15px; color:#222; letter-spacing:-0.5pt; line-height:1; font-weight:400; padding:15px 20px;}
#menuArea .menuList>.list>li>a:after{content: ""; position: absolute; right:30px; top: 50%; margin-top:-4px; width:10px; height:8px; background: url('../../img/menu_arrow.png') no-repeat center; background-size: 100%;}
#menuArea .menuList>.list>li.active>a {font-weight:500; color:#0eb3d3;}
#menuArea .menuList>.list>li.active>a:after {transform:rotate(180deg); transition:all 0.3s;}

#menuArea .menuList>.list .sMenu {position: relative;  width:100%;  padding:0px 20px 20px 30px; display:none; box-sizing:border-box;}
#menuArea .menuList>.list .sMenu>li {}
#menuArea .menuList>.list .sMenu>li>a {font-weight:400; display:block; border:none; font-size:13px; letter-spacing:-0.5pt; color:#848b98; transition:all 0.3s ease; margin-bottom:10px; line-heighT:1;}
#menuArea .menuList>.list .sMenu>li>a:hover {color:#0eb3d3; transition:all 0.3s ease; text-decoration:underline;}
#menuArea .menuList>.list .sMenu>li>a .badge_free{display:inline-block;margin:0 0 -2px 4px;padding:2px 4px;border-radius:3px;background-color:#FC397C;font-size:0.769rem;color:#fff;}
#menuArea .menuList>.list .sMenu li:last-child a {margin-bottom:0}

#menuArea .menuList .m_quick {margin:20px 0 30px; text-align:center;}
#menuArea .menuList .m_quick a {position:relative; display:inline-block; width:75px; height:75px; background-color:#8d929d; border-radius:100%; padding:15px 0; box-sizing:border-box; transition:all 0.2s linear; text-align:center;
margin:0 5px;}
#menuArea .menuList .m_quick a:before {content:''; width:100%; height:100%; border-left:2px dashed rgba(255,255,255,0.3); position:absolute; top:0; left:0; border-radius:100%; opacity:0; transition:all 0.2s linear;}
#menuArea .menuList .m_quick a:hover {background:#0eb3d3; transition:all 0.2s linear;}
#menuArea .menuList .m_quick a span {display:block; width:100%; height:25px; background-repeat:no-repeat; background-position:center;}
#menuArea .menuList .m_quick a p {text-align:center; font-size:15px; color:#fff; letter-spacing:-0.6pt; line-height:1; margin:6px 0 0;}
#menuArea .menuList .m_quick a.q_inquiry span {background-image:url('/img/quick04.png');}
#menuArea .menuList .m_quick a.q_demo span {background-image:url('/img/quick02.png');}
#menuArea .menuList .m_quick a.q_port span {background-image:url('/img/quick03.png');}
#menuArea .menuList .m_quick a.q_price span {background-image:url('/img/quick01.png');}

#menuArea .customer {padding:20px 15px; border-top:1px solid #ddd; margin:10px 20px 0; font-size:0;}
#menuArea .customer dt {display:inline-block; vertical-align:middle; width:50%;}
#menuArea .customer dt h4 { font-size:15px; font-weight:400; color:#222; letter-spacing:-0.6pt; line-height:1; vertical-align:middle;}
#menuArea .customer dt span {font-size:20px; color:#0eb3d3; font-weight:bold; letter-spacing:-0.3pt; line-height:1; vertical-align:middle; margin:5px 0 0; display:block;}
#menuArea .customer dd {display:inline-block; vertical-align:middle; font-size:0.89rem; line-height:1.6; font-weight:400; /* text-align:center; */ width:50%;}

#menuArea .moreBtn {width:calc(100% - 30px); margin:0 auto 0;}
#menuArea .moreBtn::after {right:-100px; bottom:-60px;}


#grayLayer {width:100%; height:100%; background:rgba(0,0,0,0.9); position:fixed; left:0; top:0; z-index:99999999; overflow-x:hidden; overflow-y:auto; display:none;}
#grayLayer > a {display:block;width:100%; height:100%;}
/* 슬라이드 메뉴 : 모바일 메뉴 */




/* 팝업창 */
#modal {position:fixed; top:20%; left:50%; z-index:99999999; transform:translate(-50%,-50%); width:1230px; visibility:hidden; opacity:0; transition:all 0.8s;}
#modal.view {visibility:visible; opacity:1; top:48%; transition:all 0.8s; height: 70%;}

#modal .closeBtn {position:absolute; top:-60px; right:20px; cursor:pointer;}
#modal .closeBtn p {position:relative; display:inline-block; vertical-align:middle; text-align:center; width:45px; height:45px;}
#modal .closeBtn p a{position:absolute; left:0; top:5px; display:inline-block; width:45px; height:2px; background:#fff; margin:7px 0; transform: rotate(-45deg); transition:all 0.5s ease;}
#modal .closeBtn p a.two{transform: rotate(45deg); transition:all 0.5s ease;}
#modal .closeBtn:hover p a{transform: rotate(45deg); transition:all 0.5s ease;}
#modal .closeBtn:hover p a.two{transform: rotate(-45deg); transition:all 0.5s ease;}

#modal .youtubeWrap {padding-bottom: 56.25%; /* 16:9 */ padding-top: 25px; height:0; overflow:hidden;}
#modal .youtubeWrap iframe {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

@media only screen and (max-width: 426px) and (min-height: 600px) {
	#modal .youtubeWrap {
		position: relative;
	}
}

.detailView {max-width:1020px; max-height:70vh;}
.detailView .modal_in {}
.pop_scroll {height:55vh; border-left:1px solid #ddd;}
.tableWrap {overflow:hidden; position:relative;}
.tableWrap:after {content:''; width:1px; height:100%; background:#ddd; position:absolute; right:9px; top:0;}
.tableWrap:before {content:''; width:calc(100% - 9px); height:1px; background:#ddd; position:absolute; left:0; bottom:1px; z-index:10;}
.tableWrap .tab_head {position:relative; z-index:99; width:calc(100% - 9px); border-left:1px solid #ddd; border-right:1px solid #ddd;}
		.tableWrap .tab_head .one {width:250px;}
		.tableWrap .tab_head .two {width:calc(100% - 250px);}

.detailView h3 {font-size:1.765rem; color:#222; text-align:center; line-height:1.2; font-weight:400; letter-spacing:-1pt; margin:0 0 26px;}
.detailView .modal_in {padding:50px 40px; box-sizing:border-box; background:#fff;}
.detailView .table_style tbody {max-height:500px; overflow-y:scroll;}
.detailView .table_style td.end {padding:20px;}
.detailView .table_style span {font-size:0.882rem; letter-spacing:-0.6pt; line-height:1.3; color:#777;}
.detailView .table_style h4 {font-size:1.176rem; color:#222; font-weight:bold; color:#222; letter-spacing:-0.7pt; line-height:1.2; margin:5px 0 0;}
.detailView .table_style .center td {text-align:center !important; padding:15px;}

		.detailView .table_style td.cont01 {width:250px;}
		.detailView .table_style td.cont02 {width:180px;}
		.detailView .table_style td.cont03 {width:calc(100% - 430px);}

.mCustomScrollBox {}
#mCSB_1_scrollbar_vertical {position:absolute; top:0; right:-5px; }
#modal .mCSB_inside>.mCSB_container {margin-right:0; overflow:visible !important;}
#modal .mCSB_scrollTools .mCSB_draggerRail {width:5px !important; background:#ecf1f1; border-radius:50px; overflow:hidden;}
#modal .mCSB_scrollTools .mCSB_dragger .mCSB_dragger_bar {width:5px !important; background:#26b9d4;}


.mask {position:fixed;  z-index:9999999;  background-color:#2a2f33;  display:none;  left:0; top:0; opacity:0.8;}
.mask_pro {position:fixed;  z-index:9999999;  background-color:rgba(0,0,0,0.8);  display:none;  left:0; top:0; opacity:0.8;}
/* 팝업창 */





/******** 범용 클라우드 LMS 신규 테마 출시! ********/
.theme_con {position:relative; padding:5px 0 0;}
.theme_con.margin_50 {margin:-50px auto 100px;}
.theme_con::after {content:''; width:68px; height:68px; position:absolute; top:0; left:-5px; z-index:99; background:url("/img/new_icon.png")no-repeat center;}
.theme_con_in {position:relative; background:#f7f9fc; border-radius:30px; padding:55px 110px; box-sizing:border-box; overflow:hidden;}
.theme_con_in::before {content:''; width:440px; height:182px; background:url("/img/theme_img.png")no-repeat center bottom; position:absolute; bottom:0; right:225px; z-index:90;}
.theme_con_in::after {content:''; background:#f1f4f9; position:absolute; top:95px; right:-75px; transform:rotate(-15deg); width:100%; height:250px; z-index:1;}
.theme_con_in .txtArea {position:relative; z-index:999; text-align:left !important;}
			.theme_con_in .txtArea h4 {font-size:1.412rem; color:#222; letter-spacing:-1pt; line-height:1.3; font-weight:300; margin:0 0 8px;}
			.theme_con_in .txtArea h4 b {color:#467fd7; letter-spacing:inherit; line-height:inherit;}
			.theme_con_in .txtArea p {text-align:left !important; font-weight:400; color:rgba(34,34,34,0.7); line-height:1.6;}
			.theme_con_in .txtArea .b_circle_btn {position:absolute; top:50%; right:0; transform:translateY(-40px);}

			.b_circle_btn {position:relative; display:block; width:80px; height:80px; background-color:#1198da; background-image:url("/img/big_arrow.png"); overflow:hidden; background-repeat:no-repeat; background-position:center; border-radius:100%; transition:all 0.2s linear;}
			.b_circle_btn::after {content:''; width:180px; height:150px; position:absolute; top:-90%; right:-100%; background: radial-gradient( #15d9ec, transparent , transparent ); transition:all 0.3s linear; opacity:0.5; transition:all 0.2s linear;}
			.b_circle_btn:hover::after {transform:scale(1.2); transition:all 0.2s linear; opacity:0.8;}

			.demo_btn {display:block; padding:0 20px; box-sizing:border-box; border:1px solid rgb(70, 127, 215); width:155px; height:42px; line-height:40px; border-radius:50px; font-size:15px; letter-spacing:-0.5pt; font-weight:400; background-color:rgb(70, 127, 215); background-image:url('/img/moreArrow.png'); background-repeat:no-repeat; background-position:center right 20px; background-size:14px; color:#fff; margin:20px 0 0; transition:all 0.3s linear;}
			.demo_btn:hover {box-shadow:-10px 0px 15px rgb(0 0 0 / 6%); background-color:rgb(14, 179, 211); border:1px solid rgb(14, 179, 211); transition:all 0.3s linear;}
/******** 범용 클라우드 LMS 신규 테마 출시! ********/


/**** 다이렉트 배너 2024-09-03 ****/
.direct_banner.theme_con:after{content:none;}
/**** 다이렉트 배너 ****/


/* 메인 서브 공통 CSS */
#portfolio_cont {}
#portfolio_cont #story {padding:30% 0 150px !important; }
#portfolio_cont #story .story_cont {top:0; margin-top:0;}
.customer_cont #story {padding:16% 0 150px !important; }
.customer_cont #story .story_cont {top:0; margin-top:0;}


#story {position:relative; overflow:hidden;}
#story:after {content:''; width:100%; height:0; background:#f7fafb; position:absolute; top:0; left:0; z-index:-1;}
#story .slick-list {overflow:hidden; padding:1% 0 !important;}
#story .width1230 {overflow:hidden;}
#story .title {padding-bottom:30%;}

#story .slick-arrow {position:absolute; background:none; display:block; width:60px; height:80px; border:0; font-size:0; background-repeat:no-repeat; top:50%; cursor:pointer; transition:all 0.3s linear;
background-position:center; margin-top:-40px; z-index:99 !important; overflow: hidden;}
#story .slick-arrow:after{content:''; display:block; width: 100%; height: 100%; position: absolute; left: 0; top:0; background-repeat:no-repeat; background-position:center;}
#story .slick-prev {right:50%; margin-right:235px; background-image:url('/img/prevArrow_bg2.png'); box-shadow:-10px 0px 15px rgb(0 0 0 / 6%); border-radius:100px 0 0 100px;}
#story .slick-prev:after{background-image:url('/img/prevArrow.png');}
#story .slick-prev:hover {/* background-position:center left 15px;  */box-shadow:-10px 0px 20px rgb(0 0 0 / 8%); transition:all 0.3s linear;}
#story .slick-next {right:50%; margin-right:-380px; background-image:url('/img/nextArrow_bg2.png'); box-shadow:10px 0px 15px rgb(0 0 0 / 6%); border-radius:0 100px 100px 0;}
#story .slick-next:after{background-image:url('/img/nextArrow.png');}
#story .slick-next:hover {/* background-position:center right 15px;  */box-shadow:10px 0px 20px rgb(0 0 0 / 8%); transition:all 0.3s linear;}

#story .story_cont {margin-left:-40px;  box-sizing:border-box; position:absolute; width:1230px; margin-top:235px;}
#story .story_cont dl {position:relative; border-radius:30px; overflow:hidden; margin-left:83px; transition:all 0.5s; transform:scale(0.75); opacity:0.6;}
#story .story_cont dl img {width:100%; transition:all 0.3s linear; position:relative; z-index:1;}
#story .story_cont dl:hover img {transform:scale(1.1); transition:all 0.3s linear; z-index:1;}
#story .story_cont dl a::before {content:''; width:100%; height:70%; background:linear-gradient(360deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 100%); position:absolute; bottom:0; left:0; opacity:0; transition:all 0.3s linear; z-index:2;}
#story .story_cont dl:hover a::before {height:90%; transition:all 0.3s linear;}

#story .story_cont dl dt {overflow:hidden;}
#story .story_cont dl dd {border-radius:0 0 30px 30px; border:1px solid #dddfe3; border-top:0; padding:25px; box-sizing:border-box; text-align:center; background:#fff; overflow:hidden;}
#story .story_cont dl dd p {font-size:0.882rem; letter-spacing:-0.6pt; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; word-wrap:break-word; overflow:hidden; height: 1.4rem; }
#story .story_cont dl dd h4 {font-size:1.176rem; color:#222;letter-spacing:-0.6pt; font-weight:400;  text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;
word-wrap:break-word; overflow:hidden; height: 1.6rem; margin:0 0 4px;}

#story .story_cont dl.slick-current {border-radius:10px 40px 10px 10px; /* transform:scale(1); */ transition:all 0.5s; transform:scale(1.55); margin-top:1%; z-index:100; filter: none; opacity:1;}
#story .story_cont dl.slick-current a::before {opacity:1; transition:all 0.3s;}
#story .story_cont dl.slick-current .cate_circle {transform:scale(0.65); top:0; right:0}
#story .story_cont dl.slick-current dd {position:absolute; bottom:0; left:0; width:100%; text-align:left; background:transparent; border:0; z-index:10;}
		#story .story_cont dl.slick-current dd p {font-size:0.5rem; transform:scale(1); color:rgba(255,255,255,0.7);height:0.8rem;}
		#story .story_cont dl.slick-current dd h4 {font-size:0.8rem; transform:scale(1); color:#fff;height: 1.1rem; }

.sub_tab {width:380px; margin:0 auto; border-radius:50px; background:#fdfefe; font-size:0;}
.sub_tab li {display:inline-block; width:50%;  }
.sub_tab li.tab_up {}
.sub_tab li a {font-size:1rem; line-height:55px; border-radius:50px; display:block; width:100%; text-align:center; letter-spacing:-0.5pt; transition:all 0.3s linear;}
.sub_tab li a:hover {color:#0eb3d3; transition:all 0.3s linear;}
.sub_tab li.tab_up a {color:#fff; background:#0eb3d3; transition:all 0.3s linear;}
/* 메인 서브 공통 CSS */



/* Footer */
#footer {border-top:1px solid #e6e7e9; position:relative; }
#footer:after {content:''; width:100%; height:1px; background:#e6e7e9; position:absolute; top:65px; left:0;}
#footer .width1230 {position:relative; }
.foot_top {font-size:0;}
.foot_top > a {display:inline-block; font-size:0.882rem; letter-spacing:-0.6pt; line-height:63px; margin-right:30px;}
.foot_top > a:last-child {margin-right:0;}
.foot_top > a.privacy {color:#0eb3d3; margin-right:30px;}
		.sns {font-size:0; position:absolute; top:13px; right:0;}
		.sns li {display:inline-block;}
		.sns a {display:block; width:40px; height:40px; background-color:#a4a9b3; background-repeat:no-repeat; background-position:center; border-radius:100%; transition:all 0.3s linear;}
		.sns li.blog a {background-image:url('/img/sns01.png'); margin-right:2px; background-color: #43d31a;}
		.sns li.blog a:hover {background-color:#43d31a; transition:all 0.3s linear;}
		.sns li.youtube a {background-image:url('/img/sns02.png'); background-color: #e93224;}
		.sns li.youtube a:hover {background-color:#e93224; transition:all 0.3s linear;}

.foot_bottom {padding:45px 0 80px; box-sizing:border-box; position:relative;}
.foot_bottom dl {font-size:0;}
.foot_bottom dl dt {color:#222;}
.foot_bottom dl dt, .foot_bottom dl dd {font-size:0.882rem; line-height:1; letter-spacing:-0.6pt; display:inline-block; margin-right:14px; padding:0 0 12px; vertical-align:top;}
.foot_bottom p {font-size:14px; color:#888; line-height:1; margin:11px 0 0;}
.foot_bottom p a {font-size:14px; color:rgba(136,136,136,0.6); display:inline-block; margin-left:5px;}

#footer .center {position:absolute; top:40px; right:0; text-align:left !important;}
#footer .center h4 {display:table-cell; width:100px; vertical-align:top; font-size:1.059rem; font-weight:400; color:#222; letter-spacing:-0.6pt; line-height:1; position:relative; top:5px; cursor:pointer;}
#footer .center h4::before {content:''; width:25px; height:25px; border:1px solid #dfe1e5; border-radius:100%; position:absolute; top:-5px; right:0; background:url('/img/footArrow.png')no-repeat center;}
#footer .center div {display:table-cell; vertical-align:top; padding-left:25px;}
		#footer .center div h5 {font-size:1.941rem; color:#0eb3d3; font-weight:bold; letter-spacing:-0.3pt; line-height:1; margin:0 0 15px;}
		#footer .center div dl {display:table;}
		#footer .center div dl dt {display:table-cell; width:65px; font-size:0.882rem; color:#222; letter-spacing:-0.6pt;}
		#footer .center div dl dd {display:table-cell; font-size:0.882rem; letter-spacing:-0.6pt;}
#footer .flex_container {display: flex; flex-wrap: wrap;justify-content: space-evenly;}
/*#footer .flex_container a {height: 20px;}*/
#footer .mobile {justify-content: unset;}
#footer .mobile_footer .foot_bottom {padding: 10px;}
#footer .mobile_footer .flex_item {flex-basis: 200px;}
#footer .mobile_footer .flex_item:last-child {flex-basis: 100px;}
#footer .mobile_footer {display: none;}
/* Footer */



/* 하단 퀵메뉴 */
.topBtPkg {position:fixed; right:20px; bottom:20px; z-index:999999999;}
.topBtPkg li {position:relative; margin:0 0 5px;}

.topBtPkg li .quick_cont {position:absolute; right:0; top:0; display:block; border-radius:50px; background:#0eb3d3; z-index:-1; width:70px; padding:19px 25px;
box-sizing:border-box; opacity:0; visibility:hidden; transition:all 0.2s linear; overflow:hidden; height:75px;}
.topBtPkg li .quick_cont:after {content:''; width:200px; height:170px; position:absolute; top:-95%; left:-50%; background: radial-gradient( #7ee495, transparent , transparent ); transition:all 0.3s linear;}
.topBtPkg li:hover .quick_cont {width:210px; opacity:1; visibility:visible; transition:all 0.2s linear;}
.topBtPkg li .quick_cont a {position:relative; display:block; font-size:14px; color:#fff; letter-spacing:-0.6pt; line-height:1; opacity:0.7; padding-left:10px; box-sizing:border-box; position:relative; margin:0 0 9px; z-index:10; transition:all 0.2s linear;}
.topBtPkg li .quick_cont a:hover {opacity:1;  transition:all 0.2s linear;}
.topBtPkg li .quick_cont a:before {content:''; width:4px; height:4px; background:#fff; border-radius:100%; position:absolute; top:6px; left:0;}
.topBtPkg li .quick_cont a:last-child {margin:0 0 0;}

.topBtPkg li > a {position:relative; display:inline-block; width:75px; height:75px; background: linear-gradient(45deg, #0eb3d3, #0eb3d3); border-radius:100%; padding:15px 0; box-sizing:border-box; transition:all 0.2s linear;}
.topBtPkg li > a:before {content:''; width:100%; height:100%; border-left:2px dashed rgba(255,255,255,0.3); position:absolute; top:0; left:0; border-radius:100%; opacity:0; transition:all 0.2s linear;}
.topBtPkg li > a.topBtn {background:transparent !important;}
.topBtPkg li:hover > a {background: linear-gradient(45deg, #0eb3d3, #edc793);  transition:all 0.2s linear;}
/* .topBtPkg li:hover > a:before {opacity:1; transition:all 0.2s linear;} */
.topBtPkg li > a span {display:block; width:100%; height:25px; background-repeat:no-repeat; background-position:center;}
		.topBtPkg li > a.q_price span {background-image:url('/img/quick01.png');}
		.topBtPkg li > a.q_inquiry {background: #fc397c;}
		.topBtPkg li > a.q_inquiry:hover {/* background:#f5a3c2;  */background: linear-gradient(45deg, #fc397c, #edc793);}
		.topBtPkg li > a.q_inquiry span {background-image:url('/img/quick04.png');}
		.topBtPkg li > a.q_demo span {background-image:url('/img/quick02.png');}
		.topBtPkg li > a.q_port span {background-image:url('/img/quick03.png');}
		.topBtPkg li > a.q_help span {background-image:url('/img/customer_icon_up.png');}
		.topBtPkg li > a.topBtn span {background-image:url('/img/topBtn.png');}
		.topBtPkg li > a.topBtn:before {display:none;}
		.topBtPkg li > a p {text-align:center; font-size:15px; color:#fff; letter-spacing:-0.6pt; line-height:1; margin:6px 0 0;}
		.topBtPkg li > a.topBtn p {font-size:13px; letter-spacing:0; margin:0; color:#72767c;}
/* 하단 퀵메뉴 */

.ktlan { text-decoration:underline; color:blue; }

/*******************************************************************************
	@media ~1400px
*******************************************************************************/
@media all and (max-width:1400px) {


/* 상단 팝업 */
#topNotice p {display:none;}
#topNotice a.close {right:3%;}
/* 상단 팝업 */


}
/*******************************************************************************
	@media ~1300px
*******************************************************************************/
@media all and (max-width:1300px) {

.width1230 {width:94%;}
.topBtPkg {bottom:75px;}


/* 상단 팝업 */
#wrap {margin-top:-15px;}
#topNotice {height:auto;}
/* #topNotice:after {height:calc(100% - 15px);} */
#topNotice a.close {width:25px; height:25px; right:3%; top:50%; transform:translateY(-50%);}
#topNotice a.close img {width:100%;}
/* 상단 팝업 */



/* header */
/* #header .gnb_pro {display:none;} */
#header .gnb_pro {left:-45%;}
/* header */


/* GNB */
#gnb {margin-left:-255px;}
/* #gnb .menu > li {margin-right:35px;} */
/* GNB */


/* 팝업창 */
#modal {width:94%;}
/* 팝업창 */


/******** 범용 클라우드 LMS 신규 테마 출시! ********/
.theme_con_in {padding:55px 50px;}
.theme_con_in::before {right:150px;}
/******** 범용 클라우드 LMS 신규 테마 출시! ********/



/* 메인 서브 공통 CSS */
#story .title {padding-bottom:33%;}
#story .story_cont {width:100%; margin-left:-50px;}

#story .slick-prev {right:67%; margin-right:0;}
#story .slick-next {right:21%; margin-right:-10px;}
/* 메인 서브 공통 CSS */

}
/*******************************************************************************
	@media ~1280px
*******************************************************************************/
@media all and (max-width:1280px) {

#header .gnb_pro {display:none;}

/* GNB */
#gnb {margin-left:-255px;}
#gnb .menu {gap: 10px;}
/* #gnb .menu > li {margin-right:20px;} */
/* GNB */

}

/*******************************************************************************
	@media ~1100px
*******************************************************************************/
@media all and (max-width:1100px) {

/* GNB */
#gnb {margin-left:-225px;}
#gnb .menu > li {width: 100px;}
#gnb .menu_depth {padding-left: 0 !important; }
/* #gnb .menu > li {margin-right:8px;} */
/* GNB */

}

/*******************************************************************************
	@media 769~980px
*******************************************************************************/
@media all and (max-width:980px) {

body,html {font-size:15px; font-weight:normal;}
table {font-size:15px;}
table caption {font-size:15px;}


.compad {padding:110px 0; box-sizing:border-box;}
.compad_t {padding:110px 0 0; box-sizing:border-box;}
.compad_b {padding:0 0 110px; box-sizing:border-box;}


/***** S:: 버튼 CSS *****/
.moreBtn {width:165px; height:48px; margin:30px 0 0;  }
.moreBtn span {font-size:14px; line-height:46px; padding:0 20px; background:url('/img/moreArrow.png')no-repeat center right 20px;}
.moreBtn:hover:after {transform:scale(1.6); transition:all 0.3s linear;}

.moreBtn_plus {width:180px; height:52px;}
.moreBtn_plus span {padding:0 20px;}
.moreBtn_plus span:after {right:20px;}
/***** E:: 버튼 CSS *****/


/* 공통 카테고리 css */
span.cate {width:100px; height:28px; line-height:28px; font-size:13px;}

.show980 {display:block;}
.none980 {display:none;}

.table_scroll {width:100%; overflow-x:scroll;}
.table_scroll .table_style {width:980px;}
.table_style td p:after {top:10px;}

.table_style2 th {line-height:60px;}
.table_style2 td.top {padding:20px 10px 8px;}
.table_style2 td.bottom {padding:8px 10px 20px;}
/* 공통 카테고리 css */

/* 상단 팝업 */
#wrap {margin-top:-10px;}
/* #topNotice:after {height:calc(100% - 10px);} */
#topNotice a.close {width:20px; height:20px;}
/* 상단 팝업 */

/* header */
#header {height:80px !important;}
#header.fixed, #header.nofixed {top:0 !important;}
#header .head_in {padding:20px 0;}
#header .head_in h1 {position:relative; left:50%; transform:translateX(-50%);}
#header .head_in h1 img {width:160px;}
#header .head_in .sitemap {display:inline-block !important; width:24px; height:18px; background:url('/img/sitemap.png')no-repeat center; background-size:100%;
position:absolute; left:auto; top:30px; right:0;}
#header .head_in .en_site {left: 130px; top: 32px; height: 14px;}
#header .head_in .customer {top:20px; width:110px; height:40px; line-height:38px; background-position:center left 15px; padding-left:42px; right:auto; left:0;}
#header .head_in .customer::before {width:20px; background-size:100%; top:8px; left:18px;}
/* header */


#gnb {display:none;}



/* 팝업창 */
#modal .closeBtn p {width:40px; height:40px;}
#modal .closeBtn p a{width:40px; height:2px;}
/* 팝업창 */


/******** 범용 클라우드 LMS 신규 테마 출시! ********/
.theme_con_in {padding:50px 30px;}
.theme_con_in::before {right:110px; background-size:100%; width:260px;}

.b_circle_btn {width:65px; height:65px; background-size:20px;}
.b_circle_btn::after {width:125px; height:115px; right:-90%; top:-85%;}
/******** 범용 클라우드 LMS 신규 테마 출시! ********/



/* 메인 서브 공통 CSS */
#portfolio_cont #story {padding:30% 0 90px !important;}
.customer_cont #story {padding:19% 0 90px !important; }
.customer_cont #story .story_cont {margin-left:-40px;}
#story .title {padding-bottom:36%;}

#story .slick-prev {right:67%; margin-right:15px;}
#story .slick-next {right:21%; margin-right:-20px;}

span.cate_circle {width:70px; height:70px; line-height:70px}
#story .story_cont {margin-left:-60px; margin-top:195px;}
#story .story_cont dl {margin-left:60px;}
#story .story_cont dl dd {padding:15px;}

#story .story_cont dl.slick-current dd h4 {font-size:0.7rem; margin:0;}
#story .story_cont dl.slick-current dd p {height:0.9rem;}

.sub_tab {width:320px;}
.sub_tab li a {line-height:46px; }
/* 메인 서브 공통 CSS */






.detailView h3 {font-size:1.4rem;  margin:0 0 18px;}
.detailView .modal_in {padding:40px 30px;}
.detailView .table_style td.end {padding:15px;}
.detailView .table_style h4 {font-size:1.14rem;}
.detailView .table_style td p {margin:0 0 3px;}

.tableWrap .tab_head .one {width:180px;}
.tableWrap .tab_head .two {width:calc(100% - 180px);}

.detailView .table_style td.cont01 {width:180px;}
.detailView .table_style td.cont02 {width:130px;}
.detailView .table_style td.cont03 {width:calc(100% - 310px);}



/* Footer */
.foot_top > a {font-size:14px; margin-right:20px;}
.foot_bottom {padding:30px 0 50px;}
.foot_bottom dl dt, .foot_bottom dl dd {font-size:14px;}
#footer .pc_footer {display:none;}
#footer .mobile_footer {display:block;}
/*#footer .mobile_sns {position: unset;}*/
.sns {position: unset;}
/* Footer */



/* 하단 퀵메뉴 */
.topBtPkg li .quick_cont {padding:13px 25px; height:65px;}
.topBtPkg li .quick_cont a {font-size:13px; padding-left:10px; margin:0 0 7px;}

.topBtPkg li > a {width:65px; height:65px; padding:10px 0;}
		.topBtPkg li > a p {font-size:14px;}
		.topBtPkg li > a.topBtn p {font-size:13px; letter-spacing:0; margin:0;}
/* 하단 퀵메뉴 */




}
/*******************************************************************************
	@media 681 ~ 768px
*******************************************************************************/
@media all and (max-width:768px) {

.show768 {display:block;}
.none768 {display:none;}


/* 메인 서브 공통 CSS */
#story .slick-arrow {width:40px; height:60px; margin-top:-30px;}
#story .slick-arrow:after{background-size:10px auto !important;}
#story .slick-prev {right:67%; margin-right:5px;}
#story .slick-next {right:21%; margin-right:-5px;}



#story .story_cont {margin-left:-50px;}
#story .story_cont dl {margin-left:50px;}
#story .story_cont dl dd {padding:15px;}

span.cate_circle {width:70px; height:70px; line-height:70px}
#story .story_cont dl.slick-current .cate_circle {top:0; right:0;}
#story .story_cont dl.slick-current dd h4 {font-size:0.7rem; margin:0;}
#story .story_cont dl.slick-current dd p {height:0.9rem;}
/* 메인 서브 공통 CSS */



}
/*******************************************************************************
	@media 481~680px
*******************************************************************************/
@media all and (max-width:680px) {



body,html {font-size:13px; font-weight:normal}
table {font-size:13px;}
table caption {font-size:13px;}


.compad {padding:60px 0; box-sizing:border-box;}
.compad_t {padding:60px 0 0; box-sizing:border-box;}
.compad_b {padding:0 0 60px; box-sizing:border-box;}

.show680 {display:block;}
.none680 {display:none;}

.table_scroll .table_style {width:680px;}

.table_style th {padding:15px 10px; line-height:1.3;}
.table_style td {font-size:0.9rem;}
.table_style.center td {padding:10px;}
.table_style td p:after {top:10px; width:2px; height:2px;}

.table_style2 th {line-height:45px; font-size:1.14rem;}
.table_style2 td.top {padding:15px 10px 8px;}
.table_style2 td.bottom {padding:8px 10px 15px;}

.table_style2 th.blue {border-radius:20px 0 0 0;}
.table_style2 th.gray {border-radius:0 20px 0 0;}
.table_style2 td:nth-child(2).bottom {border-radius:0 0 0 20px;}
.table_style2 td:last-child.bottom {border-radius:0 0 20px 0;}



/***** S:: 버튼 CSS *****/
.moreBtn {width:120px; height:40px;}
.moreBtn span {background:transparent; font-size:13px; line-height:38px; padding:0; text-align:center;}
.moreBtn:after {content:''; width:140px; height:120px; position:absolute; bottom:-115%; right:-55%; background: radial-gradient( #7ee495, transparent , transparent ); transition:all 0.3s linear;}
.moreBtn:hover:after {transform:scale(1.6); transition:all 0.3s linear;}

.moreBtn_plus {width:160px; height:38px; margin:30px auto 0;}
.moreBtn_plus span {padding:0; line-height:38px; font-size:13px; text-align:center;}
.moreBtn_plus span:after {display:none; /* right:15px; */}


.btnCircle {width:25px; height:25px;}
.btnCircle:after { width:13px; height:10px; margin:-5px 0 0 -7px; background-size:100%;}
.btnCircle:hover {box-shadow:0 15px 30px rgb(0 0 0 / 8%); transition:all 0.3s linear;}
/***** E:: 버튼 CSS *****/



/* 공통 카테고리 css */
span.cate {width:80px; height:26px; line-height:26px; font-size:12px; top:10px; left:10px;}
span.cate_circle {width:60px; height:60px; line-height:60px; font-size:13px; top:15px; right:15px;}

span.new {top:10px; right:10px;}
/* 공통 카테고리 css */



/* 상단 팝업 */
#wrap {margin-top:0;}
#topNotice {display:none;}
/* 상단 팝업 */



/* header */
#header {height:65px !important;}
#header.nofixed {top:0; background:#fff; box-shadow:0 5px 12px rgb(0 0 0 / 5%);}
#header .head_in {padding:17px 0;}
#header .head_in h1 {position:relative; left:0; transform:translateX(0);}
#header .head_in h1 img {width:130px;}
#header .head_in .sitemap {display:inline-block !important; width:20px; height:16px; top:24px; left:auto; right:0;}
#header .head_in .en_site {left: 140px; top:26px; background-size:15px 10px; padding-left:18px;}
#header .head_in .customer {display:none;}
/* header */



/******** 범용 클라우드 LMS 신규 테마 출시! ********/
.theme_con.margin_50 {margin:0px auto 60px;}
.theme_con::after {width:50px; height:50px; background-size:100% !important;}
.theme_con_in {padding:40px 30px 185px; border-radius:20px;}
.theme_con_in::before {right:50%; background-size:100%; width:350px; transform:translateX(175px);}
.theme_con_in::after {transform:rotate(-30deg); top:100px; right:-235px; width:135%; height:340px;}
.theme_con_in .txtArea {text-align:center !important;}
.theme_con_in .txtArea p {text-align:center !important;}
.theme_con_in .txtArea .b_circle_btn {position:relative; top:0; right:0; transform:translateY(0); margin:20px auto 0;}

.b_circle_btn {width:50px; height:50px; background-size:18px;}
.b_circle_btn::after {width:100px; height:95px; right:-85%; top:-80%;}

.demo_btn {text-align:left !important; margin:15px auto 0; font-size:12px; width:120px; height:38px; line-height:36px; padding:0 15px; background-position: center right 15px;}
/******** 범용 클라우드 LMS 신규 테마 출시! ********/



/* 메인 서브 공통 CSS */
#portfolio_cont #story {padding:0 0 60px !important;}
.customer_cont #story {padding:0 0 60px !important; }
.customer_cont #story .story_cont {margin-left:0;}

#story .title {padding-bottom:0;}
#story .slick-arrow {width:40px; height:60px; margin-top:-40px; box-shadow:none;}
#story .slick-prev {right:auto; left:0; margin-right:0;}
#story .slick-next {right:0; margin-right:0;}

#story .story_cont {margin-left:0; padding:0 20px; margin-top:0; position:relative;}
#story .story_cont dl {margin-left:0;}
#story .story_cont dl dd {position:absolute; bottom:0; left::0; width:100%; background:transparent; padding:20px;  border:0;}

#story .story_cont dl.slick-current {transform:scale(1); margin-top:0;}
#story .story_cont dl.slick-current .cate_circle {transform:scale(1); top:15px; right:15px;}
		#story .story_cont dl.slick-current dd p {font-size:1rem; transform:scale(1);  height:1.5rem;}
		#story .story_cont dl.slick-current dd h4 {font-size:1.176rem; transform:scale(1); height:1.6rem;}

.sub_tab {width:280px;}
.sub_tab li a {line-height:42px; }
/* 메인 서브 공통 CSS */



/* 팝업창 */
#modal {top:35%;}
#modal .closeBtn {top:-45px; right:10px;}
#modal .closeBtn p {width:30px; height:30px;}
#modal .closeBtn p a{width:30px; height:2px;}

		.tableWrap .tab_head .one {width:35%;}
		.tableWrap .tab_head .two {width:65%;}

.detailView h3 {font-size:1.2rem;  margin:0 0 13px;}
.detailView .modal_in {padding:30px 15px;}
.detailView .table_style td.end {padding:15px;}
.detailView .table_style td:nth-child(1) {width:120px !important;}

.detailView .table_style h4 {font-size:1.14rem;}
.detailView .table_style td p {margin:0 0 3px;}

.tableWrap .tab_head .one {width:120px;}
.tableWrap .tab_head .two {width:calc(100% - 120px);}

.detailView .table_style td.cont02 {width:120px;}
.detailView .table_style td.cont03 {width:calc(100% - 120px);}

/* 팝업창 */




/* Footer */
#footer:after {top:60px;}
#footer br {display:none;}
.foot_top > a {font-size:13px; margin-right:50px; line-height:30px;}

.foot_bottom {padding:30px 0 50px;}
.foot_bottom dl dt, .foot_bottom dl dd {font-size:13px;}

.sns {position:relative; top:0px; right:50%; transform:translateX(50%); z-index:99; margin:0px 0 20px;}
.sns a {width:30px; height:30px;}
.sns li.blog a {background-size:9px;}
.sns li.youtube a {background-size:7px;}

.foot_bottom p {font-size:13px; margin:6px 0 0;}
.foot_bottom p a {display:block; margin-left:0; margin-top:5px;}
/* Footer */



/* 하단 퀵메뉴 */
.topBtPkg { bottom:100px; right:15px; }
 .topBtPkg li .quick_cont {padding:10px 20px; height:50px;}
		.topBtPkg li .quick_cont:after {top:-75%; left:-65%;}
		.topBtPkg li:hover .quick_cont {width:170px;}
		.topBtPkg li .quick_cont a {font-size:12px; padding-left:7px; margin:0 0 5px;}
		.topBtPkg li .quick_cont a:before {width:3px; height:3px; top:5px;}

		.topBtPkg li > a {width:50px; height:50px; padding:8px 0;}
		.topBtPkg li > a span {background-size:auto 17px; height:17px;}
		.topBtPkg li > a p {font-size:12px;}
		.topBtPkg li > a.topBtn span {background-size:10px auto;}
		.topBtPkg li > a.topBtn p {font-size:12px; letter-spacing:0; margin:0;}

.topBtPkg li > a.q_price {display:none !important;}
.topBtPkg li > a.q_demo {display:none !important;}
.topBtPkg li > a.q_port {display:none !important;}
.topBtPkg li > a.q_help {display:block !important;}
/* 하단 퀵메뉴 */

#menuArea .menuList .m_quick a { background-color: #0eb3d3}

}
/*******************************************************************************
	@media 361~480px
*******************************************************************************/
@media all and (max-width:480px) {


/* 상단 팝업 */
#topNotice a.close {width:10px; height:10px;}
/* 상단 팝업 */


/******** 범용 클라우드 LMS 신규 테마 출시! ********/
.theme_con_in {padding:40px 30px 150px;}
.theme_con_in::before {width:300px;  transform:translateX(150px);}

.b_circle_btn {width:40px; height:40px; background-size:15px;}
.b_circle_btn::after {top:-110%; right:-125%;}




/* 메인 서브 공통 CSS */
#story .story_cont dl dd {padding:15px;}
/* 메인 서브 공통 CSS */

}
/*******************************************************************************
	@media ~420px
*******************************************************************************/
@media all and (max-width:420px) {

/* Footer */
.foot_top > a {font-size:12px; margin-right:30px;}
/* Footer */


}