@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Noto+Sans+KR:100,300,400,500,700,900);
@font-face { font-family: 'Arita-Buri'; src: url('../fonts/ARITA-BURIL.woff') format('woff'); font-weight: 100; font-style: normal;}
@font-face { font-family: 'Arita-Buri'; src: url('../fonts/ARITA-BURIM.woff') format('woff'); font-weight: 400; font-style: normal;}
@font-face { font-family: 'Arita-Buri'; src: url('../fonts/ARITA-BURISB.woff') format('woff'); font-weight: 700; font-style: normal;}
@font-face { font-family: 'Arita-Buri'; src: url('../fonts/ARITA-BURIB.woff') format('woff'); font-weight: 900; font-style: normal;}


/* CSS Document */a, abbr, acronym, address, applet, article, aside, audio,b, blockquote, big, body,center, canvas, caption, cite, code, command,datalist, dd, del, details, dfn, dl, div, dt, em, embed,fieldset, figcaption, figure, font, footer, form, h1, h2, h3, h4, h5, h6, header, hgroup, html,i, iframe, img, ins,kbd, keygen,label, legend, li, meter,nav,object, ol, output,p, pre, progress,q, s, samp, section, small, span, source, strike, strong, sub, sup,table, tbody, tfoot, thead, th, tr, tdvideo, tt,u, ul, var{ background: transparent; border: 0 none; font-size: 100%; margin: 0; padding: 0; vertical-align: baseline; }
html, body {height:100%; -webkit-text-adjust:none; }
body { -webkit-text-adjust:none; min-width:960px; padding:0; margin:0;font-family:'Noto Sans KR', SF Pro Display, Century Gothic, 'CenturyGothic', nanumSqure, 'KoPub Dotum', 나눔고딕, AppleSDGothicNeo, sans-serif; color:#444; text-align:center; font-size:16px; line-height:24px; overflow-x: hidden;}
img {display:block; border:none; }
/*
*::-moz-selection {background-color: #fff; color: #fff;}
*::selection {background-color: #fff; color: #fff;}
*/
a {text-decoration:none; }
a:active {border:none; outline:none;}
.clear {clear:both;}
.float-right {float:right;}
.tc-fff {color:#fff;}
.ts-11 {font-size:11px;}


body, input, textarea, select, button, table, h1, h2, h3, h4 {font-family:'Noto Sans KR', SF Pro Display, Century Gothic, 'CenturyGothic', nanumSqure, 'KoPub Dotum', 나눔고딕, AppleSDGothicNeo, sans-serif;}

.all-free {width:110px; height:120px; position:fixed; z-index:9999; top:0; right:0;}
.nav-wrap {width:100%;height: 110px;padding:0;text-align:left;z-index:999;position:relative;top:0;transition: all 0.8s;background-color: rgba(255,255,255,1);box-shadow: 0px 3px 6px 0px rgb(0 0 0 / 10%);}
.nav-wrap {
            -webkit-animation-duration: 1.0s;
                    animation-duration: 1.0s;
            -webkit-animation-name: slide;
                    animation-name: slide; }

@keyframes slide {
  from {
    -webkit-transform: translate(0px, -120px);
            transform: translate(0px, -120px); }
  to {
    -webkit-transform: translate(0px, 0px);
            transform: translate(0px, 0px); } }

.nav_consumer { border-bottom:0; background-color: transparent }

.pre_header {background-color: #f5f5f5;font-size: 13px;display: none;}
.pre_header .brand {margin: 0 20px;}
.pre_header .brand a { display: block; color: #808080; padding: 5px 10px; }
.pre_header .brand ul, .pre_header .brand li { list-style: none; display: inline-block}
.pre_header .brand .desk_user { float: right }
.pre_header .brand .desk_user a {  }


.nav-wrap .nav { position: relative; display: block; width: 1400px;min-width: 1200px; margin: 0 auto; opacity: 1; transition: all 0.3s; }
.nav-wrap .nav .logo { display: inline-block}
.nav-wrap .nav .logo a {width: 140px;height: 90px;display: block;padding:0;margin: 10px 0 0 0;background-image:url(../images/logo.png);background-size:100% 100%;background-repeat:no-repeat;text-indent:9999px;background-position:left top;transition: all 0.3s;image-rendering: -webkit-optimize-contrast;}
.nav-wrap .nav .logo_customer { width: 250px; height: 36px; padding: 0; margin: 20px auto; }
.nav-wrap .nav .logo_customer a { position: absolute; width: 250px; height: 36px; padding: 0; margin: 20px auto; background-image: url(../images/logo_customer.png); background-size: 100% 100%; background-repeat: no-repeat; text-indent: 9999px; background-position: left top;}

.nav-wrap .nav ul.mainmenu {list-style: none;text-align: center;margin: auto;padding: 0 0 7px 0;display: inline-block;vertical-align: top;width: calc(100% - 345px);}
.nav-wrap .nav ul.mainmenu li {display: inline-block;padding: 0 50px;transition: all 0.3s;opacity: 0.80;}
.nav-wrap .nav ul.mainmenu li:hover { background-position: 0% -10%;  cursor:pointer; opacity: 1.00;  }
.nav-wrap .nav ul.mainmenu li a {position: relative; display: block; font-size: 18px;font-weight: 400;color: #000;margin: 0;line-height: 1.1em; text-decoration: none;padding: 40px 0; }
.nav-wrap .nav ul.mainmenu li a:after {content: '';position: absolute;border-top: 3px solid #559bc0;top: -3px;left: 0;right: 100%;transition: all 500ms;}
.nav-wrap .nav ul.mainmenu li a.checked {color: #559bc0;border-top: 3px solid #559bc0;}
.nav-wrap .nav ul.mainmenu li a:hover:after { right: 0; }
.nav-wrap .nav ul.mainmenu li a:active  { color:#559bc0; }





.nav-wrap .nav .smenu {float: right; margin-top: 22px;}
.nav-wrap .nav .smenu .search { width: calc(100% - 60px); height: 38px; color: #666; background-image:url(../images/ico_search.png); background-position: 95% 45%; background-repeat:no-repeat;   background-color:rgba(0,0,0,0.04); border:rgba(0,0,0,0.08) solid 1px; border-radius: 38px; letter-spacing: 0.03em; padding:0 24px; cursor: pointer;transition: all 0.3s ease; }
.nav-wrap .nav .smenu .search:hover {border-color:#a1a1a1 solid 1px; background-color:rgba(0,0,0,0.08); }

.nav-wrap .nav .smenu a {display: inline-block;padding: 20px 20px;vertical-align: top;}
.nav-wrap .nav .smenu img { display: revert; }


.nav_all {display:inline-block; overflow:hidden;}
.nav_all a {float:left;position: relative;overflow:hidden;margin:0;border:0;background-position:0% 50%;background-repeat:no-repeat;background-size:28px 28px;font-size: 0;letter-spacing: 0.9em;text-transform: uppercase;color: #4c4c4c;transition: all 0.3s;}
.nav_all a:before { content:""; display: inline-block; vertical-align: top; width:28px; height:28px; background-image:url(../images/ico_nav.png); transition: all 0.3s; }
.nav_all a:hover:before { transition: all 0.3s; -webkit-transform: rotate(-90deg); -moz-transform: rotate(-90deg); filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);}
.nav_all a:active, #nav a.selected {  border:0; }


.nav-scroll {position:fixed;z-index:999;opacity: 1;transition: all 0.8s;background-color: rgba(255,255,255,1);box-shadow: 0px 3px 6px 0px rgb(0,0,0,0.10);height: 80px;}
.nav-scroll:hover { }
.nav-scroll .nav .logo a {width:95px;height:65px;margin-top: 16px;transition: all 0.3s; margin-top: 5px;}
.nav-scroll .nav .logo_customer a { margin: 0px auto; }
.nav-scroll .nav ul.mainmenu li a {padding: 25px 0;}
.nav-scroll .nav .smenu {float: right;margin-top: 5px;}

.menu_all {position:fixed;background-color: #e4f0f6;display:none;list-style:none;width:100%;margin:0 auto;padding:0; text-align: center; border-top: #d4e3ea solid 1px; border-bottom: #d4e3ea solid 1px;}
.menu_all ul {position: relative;max-width: 1400px;margin:0 auto;}
.menu_all li {display:inline-block;padding: 15px 90px 15px 0;text-align: left;vertical-align: top;}
.menu_all li:nth-child(1) {
    padding-left: 25px;
}
.menu_all li:nth-child(2) {padding-right: 100px;}
.menu_all li:nth-child(3) {padding-right: 110px;}
.menu_all li:nth-child(4) {}
.menu_all li:nth-child(5) { display: none }
.menu_all li h1  { display:none; color:#333; font-size: 15px; padding: 10px 0 15px 3px }	
.menu_all li a {display:block;color:#333;font-size:14px;font-weight:500;letter-spacing:0em;text-decoration:none;text-transform:uppercase;padding: 4px 3px 4px 15px;margin:0;font-weight:400;line-height:2.0em;border-bottom: 1px #e4f0f6 solid;transition: all 0.3s; background: url(../images/common/ico_arrow_right.png) no-repeat -12px 12px; background-size: 12px;}
.menu_all li a:visited {}
.menu_all li a:hover   { color:#559bc0; border-bottom:1px #559bc0 solid; transition: all 0.3s; background: url(../images/common/ico_arrow_right.png) no-repeat 0 12px; background-size: 12px; }
.menu_all li a:active  { color:#559bc0; }



h1 {font-size:64px; color:#333; line-height:1.0em; padding:0; margin:80px auto 20px; font-weight:400; letter-spacing:0.01em}
h1 span { letter-spacing:-0.01em}
h2 {font-size:42px; font-weight:600; color:#333; line-height:1.3em; padding:0; margin:0; }
h2 span { display: block; font-size:16px; font-weight:400; color:#666;line-height:1.3em; padding-top: 30px   }
h2 font {display: block; font-size:14px;  font-weight:400;  } 
h3 {font-size:18px; color:#333; padding:0; margin:50px auto 30px; text-align:center;}
h4 {font-size:16px; color:#333; padding:0; margin:0; font-weight:600;}


.ico-top {position:fixed;right:50px;bottom:20px;width:56px;height:56px;box-sizing:border-box;background:rgba(0,0,0,0.3);border:solid 1px #b0b0b0;border-radius:100%;text-indent:-999em;overflow:hidden; z-index:999;display:none; transition: all 0.3s;}
.ico-top:before {content:"";width:20px;height:10px;background:url(../images/common/ico_top.png) center -20px no-repeat; position:absolute;left:50%;top:50%;margin:-5px 0 0 -10px;}
.ico-top:hover { border-color:#666; background:rgba(0,0,0,1); }
.ico-top:hover::before {background-position:center -20px;}

.line_box { clear: both; display: block; width: 100%; height: 1px; background-color: #ebebeb; margin:1px 0}
.line_box2 {clear: both;display: block;width: 100%;height: 1px;background-color: #ebebeb;margin: 60px 0;}



.top_banner { position: relative; width: 100%; height: 860px; background-image: url(../images/main/banner_01.jpg); background-repeat: no-repeat; background-size: auto 100%; background-position: calc(100% - 0px) 0; font-family: 'Arita-Buri';}

.top_banner { animation: top 0.9s; animation-delay: 0.0s;}
@keyframes top {
  from {background-position: calc(100% - 50px) 0; opacity: 0}
  to {background-position:calc(100% - 0px) 0; opacity: 1}
}

@media all and (max-width:1400px){
    .top_banner { background-position: calc(100% + 200px) 0; }
    
    .top_banner  {
      animation: top 0.9s;
      animation-delay: 0.0s;
    }
    
    @keyframes top {
      from {background-position: calc(100% + 150px) 0; opacity: 0}
      to {background-position:calc(100% + 200px) 0; opacity: 1}
    }  

}


.top_banner .visual-text-wrap { max-width: 1400px; margin: auto;}
.top_banner .visual-text-wrap .visual-text {z-index:3;max-width: 1400px;margin:0;text-align:left;font-weight:600;color:#fff;}
.top_banner .visual-text-wrap .visual-text h1 {width: calc(50% - 150px);padding: 100px 100px 100px 0;font-size:52px;line-height: 1.6em;color:#4d4d4d;font-weight:600;margin:0;letter-spacing: -0.03em;font-family: 'Arita-Buri';background-color: rgba(255,255,255,1);}
.top_banner .visual-text-wrap .visual-text h1:before { }
.top_banner .visual-text-wrap .visual-text h1 span  {display:block;font-size:18px;font-weight:400;line-height: 30px;max-width: 800px;margin-top: 100px;letter-spacing: 0.00em}
.top_banner .visual-text-wrap .visual-text h1 span.other_text {}
.top_banner .visual-text-wrap .visual-text h1 span.other_text:before { content: ''; border-top: 1px solid rgba(0,0,0,0.10); width: 1920px; margin-top: -40px; float: left; left: 0; position: absolute;}
.top_banner .visual-text-wrap .visual-text .banner_btn { color: #386881; font-size: 15px; letter-spacing: 0.5em; text-decoration: underline; text-transform: uppercase; font-family: auto;}


/* full banner basic */
html, body { margin: 0; height: 100%;} 


#contents {position: relative;z-index: 100;width: 100%;min-width: 1200px;margin:0 auto;background-color:rgba(0,0,0,0.00)}
#contents h2 { text-align: left; font-size: 36px; text-align: left; }
#contents h2 span { font-weight: 100; padding-top: 10px;  }


#contents_main {position: relative;z-index: 100;width: 100%;min-width: 1200px;max-width: 1400px;margin:0 auto;padding-top: 40px;background-color:rgba(0,0,0,0.00)}
#contents_main .introduce_main { display:block; width: 100%; height:auto; margin:0 auto;  padding:0 0 40px 0; background-color: #fff; }


/* main 교육영역 */
#contents_main .edu_info {  display:block; }
#contents_main .edu_info h2 {font-size: 21px; text-align: left;margin: auto;}
#contents_main .edu_info h2 strong {display: inline-block;background-color: #fff;border:#a1a1a1 solid 1px;width: 300px;text-align: center;padding: 10px 0;}
#contents_main .edu_info h2 span {display: inline-block;color: #808080;padding-left: 50px;}

#contents_main .edu_info h3 {font-family:  'Arita-Buri';font-size: 52px;line-height: 64px;color: #333;text-align: left;margin: 60px 0;text-indent: -7px;}
#contents_main .edu_info h3 span { font-family:'Noto Sans KR', SF Pro Display, Century Gothic, 'CenturyGothic', nanumSqure, 'KoPub Dotum', 나눔고딕, AppleSDGothicNeo, sans-serif; color:#444; text-align:center; display: block; font-size: 21px; line-height: 21px; color: #666; text-align: left; margin: 10px 0; font-weight: 300; text-indent: 0px;   }
#contents_main .edu_info h3 span:after { content: ''; position: absolute; width: 110px; margin-top: 30px; display: block;}

#contents_main .edu_info .text_t h3 { margin: 20px 0 100px 0}
#contents_main .edu_info .text_t h3 span { padding: 0 0 30px 0; font-size: 18px; color: #000; letter-spacing: 1.0em;  }
#contents_main .edu_info .text_t h3 span:after { margin-top: 146px;}

#contents_main .edu_info_l {width: calc(100% - 50px);text-align: left; margin:80px auto;font-size: 18px;line-height: 30px;color: #666}

#contents_main .info_img_l  {display: inline-block;width: 520px;text-align: left;vertical-align: middle;}
#contents_main .info_img_l img  {float: left;text-align: left;vertical-align: middle;width: 100%;}

#contents_main .info_img_r  {float: right;display: inline-block;width: 50%;text-align: right;vertical-align: middle;margin-top: 40px}
#contents_main .info_img_r img  {float: right;text-align: right;vertical-align: middle;width: 100%;}

#contents_main .info_img_t  { float: right; display: inline-block; width: 600px; text-align: right;  vertical-align: middle; margin-top: 40px}
#contents_main .info_img_t img  { float: right;  text-align: right;  vertical-align: middle}

#contents_main .edu_info_l .text_l {display: inline-block;width: 45%;text-align:justify;vertical-align: middle;padding-left: 0px;}
#contents_main .edu_info_l .text_r {/* float: right; */display: inline-block;width: 40%;text-align:justify;vertical-align: middle;padding-left: 6%;}

#contents_main .edu_info_l .text_t{ display: inline-block;  width: 464px; text-align:justify;  vertical-align: middle; padding-left: 20px;}

#contents_main .edu_info_l .inquiry { display: block; border-style: solid; border-width: 1px; border-color: rgb(96, 86, 86); background-color: rgba(0,0,0, 0.01); width: 200px; padding: 5px 0; margin: 40px 0; color: #000; font-size: 16px; text-align: center; border-radius: 2em; transition: all 0.3s; }
#contents_main .edu_info_l .inquiry:hover { transition: all 0.3s; background-color: rgba(0,0,0, 0.7); color: #fff}


.edu_info_l .txt {display: block;font-size: 16px;text-align: left;margin: 50px 0;}
.edu_info_l .txt span {display: inline-block;min-width: 150px;text-align: left;}


.info_news { position: absolute; padding: 30px 120px 30px 60px; margin-top:260px; color: #fff; width: 400px; height: 80px; background-image: url(../images/common/ico_arrow_right.png); background-repeat: no-repeat; background-position: calc(100% - 15px) 50%; background-size: auto 32px; box-shadow: 0px 8px 13px 0px rgba(0,0,0, 0.25); line-height: 1.8em; text-align: left;transition: all 0.3s; }

.info_news .news_title { font-size: 21px; font-weight: 600}
.info_news .section_date { font-size: 16px;}


.info_news:hover { cursor:pointer;  transition: all 0.3s; }
#info_01 .info_news:hover { margin-left: -30px; background-color: rgba(51,80,172, 1); }
#info_02 .info_news:hover { margin-left: 180px; background-color: rgba(3,159,44, 1); }
#info_03 .info_news:hover { margin-left: -30px; background-color: rgba(210,90,17, 1); }
#info_04 .info_news:hover { margin-left: 180px; background-color: rgba(155,114,25, 1); }

#info_01 .info_news { margin-left: -50px; background-color: rgba(51,80,172, 0.9);}
#info_02 .info_news { margin-left: 200px; background-color: rgba(63,159,44, 0.9);}
#info_03 .info_news { margin-left: -50px; background-color: rgba(210,90,17, 0.9);}
#info_04 .info_news { margin-left: 200px; background-color: rgba(155,114,25, 0.9);}





/***** sub ****/
.sub_banner { min-width: 1200px; max-width: calc(100% - 0px); margin: 0 auto; }
.sub_banner img { width: 100%;}
.sub_banner h1 {position: absolute;margin-top: 7%;margin-left: calc(50% - 610px);font-size: 48px;font-weight: 100;color: #333;line-height: 1.2;text-align: left;font-family: 'Arita-buri';}
.sub_banner h1 img { display: inline-block; width: auto; height: 38px; text-align: center; padding:0; margin: auto; vertical-align: middle;}
.sub_banner h1 span {display: inline-block;font-size: 16px;color: #666;font-weight: 400;line-height: 1.4em;text-align: left;padding-left: 30px;text-shadow:none;vertical-align: middle;}


/** 02. 교육영역 & 03.평가프로그램 **/
.sub_info  {display: inline-block;width: 1200px;text-align: left;vertical-align: middle;margin: 100px auto;}
.sub_info h3 {font-family:  'Arita-Buri';font-size: 36px;color: #333;text-align: left;margin: 10px 0 50px 0;text-indent: -7px;}
.sub_info h3 span { font-family:'Noto Sans KR', SF Pro Display, Century Gothic, 'CenturyGothic', nanumSqure, 'KoPub Dotum', 나눔고딕, AppleSDGothicNeo, sans-serif; color:#444; text-align:center; display: block; font-size: 21px; line-height: 21px; color: #666; text-align: left; margin: 10px 0; font-weight: 300; text-indent: 0px;   }
.sub_info h3 span:after { content: ''; position: absolute; width: 110px; margin-top: 30px; display: block;}
.sub_info .text_t h3 { margin: 20px 0 100px 0}
.sub_info .text_t h3 span { padding: 0 0 30px 0; font-size: 18px; color: #000; letter-spacing: 1.0em;  }
.sub_info .text_t h3 span:after { margin-top: 146px;}


.sub_info .info_img_l  {display: inline-block; width: 520px;text-align: left;vertical-align: top;}
.sub_info .info_img_l img  {float: left;text-align: left;vertical-align: top;width: 100%;}

.sub_info .text_r {display: inline-block;width: calc(100% - 650px);text-align:justify;vertical-align: middle;padding-left: 60px;font-size: 16px;line-height: 1.4em;}

.sub_info .text_r .txt {display: block;font-size: 16px;text-align: left;margin: 30px 0;}
.sub_info .text_r .txt span {display: block;color: #559bc0;text-align: left;padding: 5px 0;font-weight: 500;}
.sub_info .text_r .txt span font {display: block;color: #666;font-weight: 300; padding: 0;}

.sub_info .text_r .txt2 {display: block;font-size: 16px;text-align: left;margin: 30px 0;}
.sub_info .text_r .txt2 span a {display: block; color: #559bc0; text-align: left;padding:5px 0;font-weight: 500;}

.sub_info .text_r .txt_box {display: block;font-size: 15px;text-align: left;margin: 30px 0; background-color: #559bc0; color: #fff;}
.sub_info .text_r .txt_box span {display: block; padding: 25px; font-weight: 500;}

/** 03.평가프로그램 상세 리스트 **/
.description {margin: 60px auto 0;text-align: left;}
.description li {display: inline-block;}
.description li .info_img_l  {display: inline-block;width: 240px;text-align: left;vertical-align: top;padding-bottom: 30px;}
.description li .info_img_l img  {float: left;text-align: left;vertical-align: top;width: 100%;}
.description li .txt {display: inline-block;width: calc(100% - 340px);text-align:justify;vertical-align: middle;padding-left: 60px;font-size: 18px; padding-bottom: 30px;}
.description li .txt span {display: block;color: #559bc0;text-align: left;padding: 0;font-weight: 500;}
.description li .txt span font {display: inline-block;color: #666;font-weight: 300;padding: 15px 0;font-size: 15px;}
.description li .txt span font strong { display: inline-block; padding: 15px 0;}




#contact {position: relative;z-index: 100;margin: 0 auto;}

.bg_100 { width: 100%;  padding: 100px 0; background-color: #e9eef4  }


.map_box { display: inline-block;  width: calc(100% - 600px);   }
.map_box .address { background-color: #494f53; color: #fff; text-align: center; margin: 0; padding: 10px 0; line-height: 1.8em; font-size: 14px; }
.address_box { display: inline-block; vertical-align: top; width: 500px; text-align: left; margin: 0 0 0 90px; padding:0; line-height: 1.8em; font-size: 14px; }
.address_box h2 { text-align: left; padding: 0; margin: 50px 0 30px 0; font-size: 52px; font-weight: 400; text-transform: uppercase; font-family: 'Arita-Buri'; }
.address_box h2 span { font-size: 16px; padding:0 0 10px; margin: 0; color: #386881 }
.address_box strong { font-size: 16px; letter-spacing:-0.01em; font-weight: 400 }
.address_box h2:after { content: ''; position: absolute; border-top: 1px solid #808080; width: 160px;margin-top: -156px; display: block;}
.address_box .address { color: #666; margin: 0; padding: 10px 0; line-height: 1.8em; font-size: 14px; }
.address_tip { color: #1da3b6; text-align: center;  padding: 30px 0; line-height: 1.8em; font-size: 13px; letter-spacing:-0.03em  }
.address_tip {color: #386881;text-align: left;padding: 30px 0;line-height: 1.8em;font-size: 12px;}
.address_print {margin: 30px auto;display: block;}
.address_print button { width: 180px; height: 36px; border:#a1a1a1 solid 1px; background-color: #fff; font-size: 13px; font-weight: 600; cursor:pointer; border-radius: 18px; color: #333; margin-right: 15px; }
.address_print img { display: inline-block; padding-right: 8px;  vertical-align: middle}


.moving {margin-top: 40px;display: block;font-size: 18px;padding: 20px 0;text-align: left;border-top: #ccc solid 1px;border-bottom: #ccc solid 1px;}
.moving li {display: inline-block;vertical-align: top;font-weight: 300;font-size: 14px;padding: 5px 0;}
.moving li:first-child {}  
.moving img{display: inline-block;padding:0 10px 0 0;margin: 0;vertical-align: middle;width: 32px;}
.moving span {display: inline-block;font-size: 14px;padding-left: 5px;}



.popup_new { position:absolute; top:60px; left:20px; z-index:1000; background-color: transparent}
.popup_new .popbox { display: inline-block; width:400px; text-align:center; margin:0 auto; padding: 0; border:#cccccc solid 1px; background-color: #ecf0f5; box-shadow: 0px 6px 12.48px 0.52px rgba(0, 0, 0, 0.15); vertical-align:top}
.popup_new .popbox h3 {font-size: 16px;color: #003250;font-weight: 600;padding: 15px;margin: 0 auto;text-align: center;width: auto;display: none;}
.popup_new .popbox h3 span { display:block; font-size:13px; color:#808080; line-height:18px; font-weight:400 ; margin:20px auto 20px;}
.popup_new .popbox a img {width:calc(100% - 18px);display:block;text-align:center;margin: 9px 9px 0 9px;}
.popup_new .popbox .close_bottom { font-size: 14px; padding: 0; text-align: left; color: #8a8a8a; letter-spacing: -0.05em; }
.popup_new .popbox .close_bottom span { vertical-align: middle; display: inline-flex; padding: 5px; }
.popup_new .popbox .close_bottom button {display: inline-block;float: right;padding: 7px 11px;color:#8a8a8a;border: 0;background-color:transparent;vertical-align: middle}
.popup_new .popbox .close_bottom button img {vertical-align: middle;padding: 0 5px 0 0;display: inline-block;}


@media all and (max-width:600px){ 
    .popup_new .popbox { position: fixed; width: calc(100% - 42px); margin: auto }
    .popup_new .popbox .close_bottom { font-size: 12px; }
     #divpop { z-index:10003; margin-left: -10px; margin-top: -10px }
     #divpop1 { z-index:10003; margin-left: -10px; margin-top: -10px }
     #divpop2 { z-index:10002; margin-left: -0px; margin-top: 0px }
     #divpop3 { z-index:10001; margin-left: 10px; margin-top: 10px }
}



/* 버튼 속성 */
.visual-text-w { display: block;  margin:40px auto; }
.visual-text-w .btn {display: inline-block;min-width: 100px;position: relative;cursor: pointer;transition: all 0.3s ease;overflow: hidden;border-radius: 2em;margin: 0 auto;padding: 0;text-align: center;background-color: #666;}
.visual-text-w .btn > a {  width: 100%; height: 48px; line-height: 48px; padding: 0 30px; color: #fff; font-weight: 400; font-size: 16px; position: relative; z-index: 1; transition: all 0.2s ease;}
.visual-text-w .btn:before { content: ""; width: 100%; height: 100%; background-color: #000; position: absolute; transition: all 0.2s ease;}

.visual-text-w .btn-1 {display: inline-block;min-width: 100px;position: relative;cursor: pointer;transition: all 0.3s ease;overflow: hidden;border-radius: 2em;margin: 0 auto;padding: 0;text-align: center;background-color: #333;}
.visual-text-w .btn-1 > a {  width: 100%; height: 48px; line-height: 48px; padding: 0 60px; color: #fff; font-weight: 400; font-size: 16px; position: relative; z-index: 1; transition: all 0.2s ease;}
.visual-text-w .btn-1:before { content: ""; width: 100%; height: 100%; background-color: #666; position: absolute; transition: all 0.2s ease;}

.visual-text-w .btn-long { display: inline-block; min-width: 100px; position: relative; cursor: pointer; transition: all 0.3s ease; overflow: hidden; border-radius: 2em; margin: 0 auto; padding: 0; text-align: center; background-color: #605656;}
.visual-text-w .btn-long > a {  width: 100%; height: 48px; line-height: 48px; padding: 0 100px; color: #fff; font-weight: 400; font-size: 16px; position: relative; z-index: 1; transition: all 0.2s ease;}
.visual-text-w .btn-long:before { content: ""; width: 100%; height: 100%; background-color: #000; position: absolute; transition: all 0.2s ease;}

.visual-text-w .btn-2:before{ top: 0; left: -100%; }
.visual-text-w .btn-2:hover:before { left: 0; }
.visual-text-w .btn:hover a{   }









.customer_box { max-width: 1000px; border:#e5e5e5 solid 1px; padding: 0 100px; margin:60px auto}
.customer_box h4 { padding: 35px 0; font-weight: 400; text-align: left }



/* 서브 4개 탭 */
.tab4_nav ul { list-style: none; width: auto; text-align: center; margin: 0; padding: 0 0 0 0; border-bottom: #e5e5e5 solid 1px;}
.tab4_nav ul li { display: inline-block; padding: 0 30px; transition: all 0.3s; opacity: 0.80; }
.tab4_nav ul li:hover { background-position: 0% -10%;  cursor:pointer; opacity: 1.00;  }
.tab4_nav ul li a { display: inline-block; font-size: 16px;  font-weight: 400; color: #333;  margin: 0; line-height: 1.1em; }
.tab4_nav ul li a {text-decoration: none;padding: 5px 30px;margin: 15px 0;border-radius: 2em;display: block;position: relative;}
.tab4_nav ul li a.checked,  
.tab4_nav ul li a:hover,
.tab4_nav ul li a.checked
{ color:#fff; background-color: #559bc0;  transition: all 0.3s; }


.admin_tit { display: block; padding: 0; width: 1200px; text-align: left; margin: auto;}
.admin_tit h1 { color: #000; font-size: 18px; margin: 60px 0;}


/* 공지사항 게시판 */
.customer_box .news_list { width: 100%; margin:30px auto; border-top: #ccc solid 1px;}
.customer_box .news_list li { list-style: none; font-size: 15px; text-align: left; line-height: 58px; border-bottom:#e6e6e6 solid 1px;  cursor:pointer; color: #808080   }
.customer_box .news_list li span { display: inline-block; margin-right: 12px; width: 54px; line-height: 21px; background-color: #8cb4dd; color: #fff; font-size: 13px; font-weight: 600; text-align: center }
.customer_box .news_list li span.gray { background-color: #999}
.customer_box .news_list li font { display: inline-block;float: right; font-size: 13px; color: #808080; font-weight: 100}


.list_more { display: block; text-align: left; margin-bottom: 40px; }
.list_more a { display: inline-block; font-size: 14px; padding: 40px 0; background-image: url(../images/common/ico_arrow_more.png); background-position: 100% 50%; background-repeat:no-repeat;  padding-right: 30px; color: #000;}
.list_more a:hover { opacity: 0.6}





/* faq page */
.section_qa {overflow:hidden;width:100%;height:100%;margin:0 auto; }
.h_txt{float:left;width:196px; height:42px;background:url(../images/common/sp.png) 0 -380px no-repeat}
.con{font-size:12px;line-height:18px}
.section_qa .con{height:100%; margin-bottom:50px}
.section_qa .faq_area{border-bottom:1px solid #575757}
.section_qa .faq_area ul { margin: 0}
.section_qa .faq_area li{position:relative;overflow:hidden;height:100%;border-top:1px solid #d2d2d2;vertical-align:top; text-align:left}
.section_qa .faq_area li:first-child { border-top:2px solid #575757; border-top:0;  }
.section_qa .faq_area .notice_link_box{width:95%;padding:20px 0 20px 30px;font-size:14px;font-weight:bold;background:url(../images/common/ico_about3_q.png) 3px 24px no-repeat; line-height:1.6em; }
.section_qa .faq_area .notice_link_box a{color:#222}
.section_qa .faq_area .notice_link_box.answer{width:100%; font-weight:normal;  border-top:1px solid #ebebeb;color:#666;background:url(../images/common/ico_about3_a.png) 3px 28px no-repeat; padding-top:25px}
.section_qa .faq_area .notice_link_box .answer_con{width:94%; vertical-align:1.3em; padding:0;}
.section_qa .faq_area .notice_link_box .answer_con div { padding:0; margin:0}
.section_qa .faq_area .btn_answer{position:absolute;top:20px;right:6px;width:20px;height:11px;background:url(../images/common/sp.png) -210px -380px no-repeat;}
.section_qa .faq_area .btn_answer.open{background:url(../images/common/sp.png) -210px -410px no-repeat}
.section_qa .faq_area .operating_hour{overflow:hidden}
.section_qa .faq_area .operating_hour dt{float:left;clear:both}
.section_qa .faq_area .operating_hour dd{float:left;margin-left:3px;width:80%}
.blind,legend{overflow:hidden;position:absolute;top:0;left:0;width:0;height:0;font-size:0;line-height:0}




/****** 기본 테이블 구성 *********/
.admin_ico { float:right; margin-top:20px; margin-right:0px; }
.admin_ico img { display:inline-block;  margin:0 0 0 8px; width:36px; height:36px; background-color:#909090; border-radius:23px; padding:3px }
.admin_ico img:hover { background-color:#559bc0; }

.bottom_ico { margin:20px 30px 20px 0; text-align:right }
.bottom_ico img { display:inline-block;  margin:0 0 0 8px; width:36px; height:36px; background-color:#909090; border-radius:23px; padding:3px }
.bottom_ico img:hover { background-color:#e60000; }

/****** 쓰기 *********/
.write {  width:100%; border-bottom:#b7b7b7 solid 1px; margin:0 auto; }
.write .none { border:none; }
.write th { width:150px; background-color:#fafafa; font-size:16px; font-weight:600; color:#7b7b7b; border-top:#e1e1e1 solid 1px; text-align:left; padding:5px 0 5px 25px }
.write td { font-size:12px; color:#e5e5e5; border-top:#d8d8d8 solid 1px; text-align:left; padding:7px 0 7px 15px; } 
.write td input.i_box { width:calc(100% - 20px); border:#c6c6c6 solid 1px; padding-left:5px; color:#666; font-size:16px; line-height:24px; height:24px }
.write td textarea.t_box { width:calc(100% - 24px); height:100px; border:#c6c6c6 solid 1px; padding-left:5px; color:#666; font-size:16px; line-height:24px; }
.write td select.s_box { font-size:16px; line-height:24px;}
.write td.check { font:normal 12px/18px 나눔고딕, 돋움; color:#999999; letter-spacing:-0.05em; }
.write td.smtit{color:#7b7b7b;  font-weight:bold; font-size:16px;  }

.contact .select_type_radio { margin: 0 0 20px; padding-bottom: 10px; text-align: left; border: 0; border-bottom: 1px #e6e6e6 solid; }
.contact .select_type_radio input { display: inline-block; width: auto; height: auto; vertical-align: middle;  padding: 0; margin: 0 0 0 50px}
.contact .select_type_radio input:first-child { margin-left: 0 }
.contact .select_radio{ vertical-align: middle; font-size: 21px;     margin-bottom: 18px;  display: inline-block; margin-right: 5px }  
.contact .radio_label  { display: inline-block; vertical-align: middle; font-size: 15px; letter-spacing: 0; font-weight: 400  }
.contact .radio_label strong { font-size: 15px; }



.table_board_view { width:100%; border-top:0; border-bottom:#999999 solid 1px; margin:0 auto;}
.table_board_view h3 {margin:20px 0; padding: 0}
.table_board_view img { vertical-align:middle; margin: auto;  }
.table_board_view a:link,
.table_board_view a:active { }
.table_board_view a:visited { color:#4c4c4c; text-decoration:none; }
.table_board_view th { padding:20px; font-weight:600; color:#333;  text-align:left; font-size:18px; border-bottom:#e3e3e3 solid 1px; }
.table_board_view th img { max-width:24px; display:inline-block}
.table_board_view th strong { font-size:16px;   margin-right:10px  }
.table_board_view th strong { font-size:16px;   margin-right:10px  }
.table_board_view th:last-child { text-align:right; font-size:13px; font-weight:400; color:#777 } 
.table_board_view th font { margin:0 15px 0 5px; }
.table_board_view td { vertical-align:middle; padding:40px 10px 40px 30px; border-bottom:1px #ddd solid; text-align:left; font-size:16px;   }
.table_board_view td:nth-of-type(odd) { }
.table_board_view td img { display:block; max-width:600px; margin:30px auto; }



/* 문의하기 */
.contact { width:100%; margin-bottom: 50px  }
.contact input {width:calc(100% - 0px); border:0; border-bottom:1px #e6e6e6 solid; background-color:#fff; line-height:38px; font-size:15px; padding:0; margin-bottom:12px; outline:none;}
.contact input:focus,
.contact textarea:focus { border-bottom:1px #42b7c8 solid;  }

.contact textarea   {width:calc(100% - 0px); height:100px; border:0; border-bottom:1px #e6e6e6 solid; background-color:#fff; line-height:21px; font-size:15px; padding:10px 0; margin-bottom:12px; outline:none;}
.contact button  { width:100%; height: 48px;  background-color: #42b7c8; font-size: 21px; cursor:pointer; border-radius: 3px; color: #fff; border:0; }
.add_text { background-color: #eaf1f9; border-radius: 10px; color:#4c4c4c; padding: 30px; font-size: 14px}
.add_text strong { display: block; font-size: 18px; margin-bottom: 10px }
.add_box { width: 100%; background-color: #f5f5f5; font-size: 14px; line-height: 1.4em; padding: 24px 0; margin:20px auto 0; text-align: center; font-weight: 400;}


/* 설정 관련 팝업*/ 
.popup_wrap {width:530px; margin:0 auto; padding:0; } /* 너비 조정시 보더값 주의! */
.popup_wrap h3 { color:#FFFFFF; font-size:15px; letter-spacing:-0.05em; margin-top:30px; padding-left:5px }
.popup_wrap table { padding:20px 0; }

.popup_wrap .join  { border:#262626 solid 1px; background-color:#3b3e40; *padding:20px 0; }
.popup_wrap .join th { width:120px; color:#ffffff; text-align:right; border:0; padding-right:10px; }
.popup_wrap .join td { color:#808080; border:0; margin:0; padding:3px 10px}
.popup_wrap .join td input { width:220px }
.popup_wrap .join td textarea {  }


.login_wrap {width: 90%;margin:0 auto;padding:0;font-family:Verdana}
.login_wrap .login_tit { text-align:center; padding:180px 0 30px 0; color:#333 ; font-size:30px; font-family:Verdana; font-weight:bold; letter-spacing:-0.02em }
.login_wrap .login_tit span { font-size:18px; font-weight:normal; color:#666}
.login_wrap .login_bottom {text-align:center; margin:30px 0 30px 0; color:#666; font-size:12px; }
.login_wrap .login_bottom strong {  }
.login_wrap .login_bottom a { color:#39F }

.login_wrap .login  {width: 100%;max-width: 450px;border:#e5e5e5 solid 1px;border-radius:10px;background-color:#fafafa;margin:0 auto;}
.login_wrap .login table { width:320px; padding:20px 0 20px 0; margin:0 auto;}
.login_wrap .login th { color:#ffffff; border:0; }
.login_wrap .login td { color:#ffffff; border:0; margin:0; padding:0}
.login_wrap .login td input { width:220px; color:#999999; padding:6px 10px; border:#d3d3d3 solid 1px;   }
.login_wrap .login td textarea {  }
.login_wrap .login .save { padding:10px 8px 3px 3px; margin:0; font-weight:normal;  }
.login_wrap .login .save input { width:16px; border:0; padding:0; margin:0 }
.login_wrap .login .save a { color:#999999 }
.login_wrap .login .save a:hover { text-decoration:underline }


.btn_login { padding: 22px 30px; font-weight: 400; border-radius: 3px; font-size: 16px; border: 0; color: #fff; background-color: #333;}
.btn_login:hover { background-color: #000}

.footer_popup { width:100%; font-size:10px; line-height:16px; clear:both; color:#777c84; text-align:center;  }

.table_system_write input[type=text]:focus{border-color:#000;}
.table_system_write input[type=checkbox]{  vertical-align: middle;}
.table_system_write input.url_r { width: calc(100% - 140px); border: 1px solid #d7d7d7; height: 28px; line-height: 28px; padding: 0 10px; margin-right: 6px; float: right;}
.table_system_write select {border:1px solid #d7d7d7; height:28px; line-height:28px; padding:0 10px; margin: 2px 0}


.table_system_write { width: -webkit-fill-available; border: 1px solid #cccccc; border-collapse: separate; border-spacing: 0; border-radius: 0px; overflow: hidden; margin: auto}
.table_system_write th,
.table_system_write th,
.table_system_write td { color:#666; font-size: 13px; padding: 0.9em 1.6em; border-bottom: 1px solid #cccccc; text-align: left; background-color: #fff; font-weight: 400; line-height: 1.3em;   }
.table_system_write th { width: 150px; vertical-align: middle  }
.table_system_write th { color:#666; font-size: 13px; background-color:#f6f7fb; text-transform: uppercase;}
.table_system_write th + th,
.table_system_write td { border-left: 1px solid #cccccc;}
.table_system_write tr:last-child th,
.table_system_write tr:last-child td { border-bottom: none;}

.table_system_write input { width: auto;
    border: none;
    border-bottom: none;
    background-color:transparent;
    line-height: 38px;
/*    font-size: 15px;*/
    padding: 0;
    margin-bottom: 0;
    outline: none;
    vertical-align: middle;

}

.table_system_write .img-thumb { display: block; width: 100%; padding: 25px 0  }
.table_system_write .img-thumb span { display: inline-block;
    width: 70px;
    height: 70px;
    line-height: 70px;
    text-align: center;
    vertical-align: bottom;
    background-color: rgba(0,0,0,0.04);
    border: #f1f1f1 solid 1px;
    padding: 0;
    margin: 2px;
    font-size: 12px; letter-spacing: -0.03em;
    background-image: url(../images/common/noimage.png);
    background-repeat: no-repeat; background-position: 50%; background-size: 100% auto; 
}
.table_system_write .img-thumb span:hover { transition: all 0.6s; border:#42c911 solid 1px; }
.table_system_write .img-thumb span img { width: 100%; }

.table_system_write .img-thumb .img_add { background-image: none; font-size: 36px; color: #fff; background-color: #333  }


.table_system_write label, .table_system_write button {cursor:pointer;  vertical-align: middle; padding-right: 10px; margin: 3px}
.table_system_write input[type=text]{ width: calc(100% - 40px);  border:1px solid #d7d7d7; height:28px; line-height:28px; padding:0 10px; margin-right: 6px}
.table_system_write textarea{ width: calc(100% - 40px);  border:1px solid #d7d7d7; line-height:28px; padding:0 10px; margin-right: 6px}

.table_system_write input[type=datetime-local]{ width: auto;  border:1px solid #d7d7d7; height:28px; line-height:28px; padding:0 10px; margin-right: 6px}


.table_system_write input[type=text]:focus{border-color:#000;}
.table_system_write input[type=checkbox]{  vertical-align: middle;}


.table_system_write input.url_r { width: calc(100% - 140px);
    border: 1px solid #d7d7d7;
    height: 28px;
    line-height: 28px;
    padding: 0 10px;
    margin-right: 6px;
    float: right;
}


.table_system_write select {border:1px solid #d7d7d7; height:28px; line-height:28px; padding:0 10px; margin: 2px 0}









#contents #info_box { max-width: 1000px;  padding: 0 100px; margin:0 auto 60px  }
#contents #info_box h3 { margin: 0 auto 0; padding-top: 36px; line-height: 1em; letter-spacing: -0.01em; text-align: left; font-size: 32px; line-height: 3.0em; font-weight: 600; letter-spacing: -0.01em; }




/* 연구소소개 */
#company { margin: auto; }
#company h3 {font-size: 42px;vertical-align: middle; line-height: normal;}
#company h3 img { margin:40px auto;}

/* 인사말 */
#company .greeting { font-family: 'Arita-buri'; display: block; margin: auto; background-image: url(../images/contents/img_ceo.png); background-repeat: no-repeat; background-position: calc(50% + 340px) 100px; background-size: auto; padding-bottom:90px; }
#company .greeting h3 { display:inline-block; text-align: left;  border-bottom: #333 solid 1px; margin-bottom: 40px; padding: 30px 0   }
#company .greeting .ceo { display: block; width: 1200px; margin: auto; text-align: left;  color: #000; font-size: 16px; line-height: 1.6em;  }
#company .greeting .ceo p { display: block; width: 550px; color: #555;text-align: justify;
    letter-spacing: -0.05rem;
    word-break: keep-all; }
#company .greeting .ceo span { display: block; width: 550px; margin:40px 0 0 0; text-align: right; font-size: 16px; line-height: normal;  font-family: 'Arita-buri-SemiBold'; }
#company .greeting .ceo span em { margin:0 0 0 20px; font-size: 0; line-height: normal; font-weight:600; font-style:normal; letter-spacing: 0.35em;}
#company .greeting .ceo span em img { display: inline-block }

/*연혁*/
#company .histroy {width: 1080px;height: 1080px;background-image: url(../images/contents/img_histroy.png);background-repeat: no-repeat;background-position: 0 0;background-size: auto;padding: 0;border: #559bc0 solid 60px;border-radius:90px 0 90px 90px;margin: 60px auto;text-align: left;}
#company .histroy h3 {padding: 70px 0 0 70px;margin: 0; text-align: left}
#company .histroy h3 span {color: #808080;font-size: 21px;font-weight: 100;display: block;}
#company .histroy p {display: block;width: 380px;color: #999;font-size: 15px;padding-left: 70px;padding-top: 40px;}

/* 맴버 */
#company .member {display: flex;width: 100%;margin: 10px auto;text-align: left;flex-direction: column;align-items: center;}
#company .member li {display: grid;
    /* 1:1:3 비율로 설정 (총 5분할 중 마지막이 60% 차지) */
    grid-template-columns: 1fr 1.2fr 2fr; 
    column-gap: 60px; /* 열 사이 간격 */
    row-gap: 20px;    /* 줄 사이 간격 (모바일 대비) */
    align-items: start; width: 1000px;padding: 30px;margin: 10px;vertical-align: top;border-radius: 30px;background-color: rgb(255, 255, 255);box-shadow: 0px 5px 24px 0px rgba(206, 206, 206, 0.59);transition: all 0.3s;flex-direction: row;}
#company .member li:hover { background-color: #559bc0; color: #fff; transition: all 0.3s; }
#company .member li:hover h3, #company .member li:hover h4, #company .member li:hover .career { color: #fff;  } 
#company .member li:hover h3 { border-bottom:#fff solid 1px;}
#company .member li img { width: 240px; margin: auto; }
#company .member li h3 {display: flex;font-size: 36px;font-family: 'Arita-buri';font-weight: 600;line-height: 1.2em;margin: 16px auto;border-top: #559bc0 solid 1px;letter-spacing: 0.2em;text-align: left;padding-bottom: 20px;flex-direction: column;width: 150px;}
#company .member li h3 span {display: block;font-size: 18px;font-weight: 400;padding: 10px 0;letter-spacing: -0.03em;}
#company .member li .career {display: block;font-size: 13px;line-height: 1.8em;letter-spacing: -0.05em;color: #666;margin:10px auto;text-align: left;overflow: hidden;text-overflow: ellipsis;white-space:normal;}
#company .member h4 {display: block;font-size: 18px;font-weight: 400;text-align: left;padding: 10px 0 0 0;}

/*오시는길*/
#company .Location { width: 1400px; margin:70px auto }
#company .Location h3 {}




/*****  푸터 *****/
.footer {display:block;width:100%;margin:0 auto 0;clear:both;padding: 20px 0;background-color:#1e3a49;}
.footer .sns { float:right; margin-top:25px}
.footer .sns img {display: block;
    padding-top: 20%;
    margin: auto;
    text-align: center;
    vertical-align: middle; }
.footer .sns a:link, 
.footer .sns a:active, 
.footer .sns a:visited {float: right; background-color: #222; border-radius: 20px; width: 35px; height: 36px; padding: 0 1px 0 0; margin: 5px; vertical-align: middle; border: #666 solid 1px;transition: all 0.3s ease; opacity: 0.8;}
.footer .sns a:hover { background-color:#000; border: #fff solid 1px; opacity: 1.0;  }

.footer .footer_info {max-width: 1400px;margin: auto;}

.footer .box {text-align:left;padding: 15px 0;font-size: 11px;line-height:1.8em;color:#d6d9db;}
.footer .box h4 { color: #386881; font-size: 14px; }
.footer .box span { font-weight:100; color:#666; padding:0 5px; font-family:돋움 }
.footer .box a:link, 
.footer .box a:active,     
.footer .box a:visited {color:#444;  }
.footer .box a:hover {color:#000; }
.footer .box .footer_logo { display:inline-block; width:250px; margin-top:40px; vertical-align:top; color: #999999 }
.footer .box .footer_logo img  { height: 30px; margin-bottom: 30px;  }

.footer .box .privacy_box { float:right; margin-top:-70px; }
.footer .box .privacy_box a { color:#919090; font-size:13px; text-decoration:none    }
.footer .box .privacy_box .line { font-weight:100; color:#bdbdbd; padding:0 5px; font-family:돋움 }

.footer .copy {margin: 0 auto;color: #d6d9db;line-height: 4em;font-size: 11px;text-align: left;}
.footer .copy a {margin: 0;color: #fff;}
.footer .copy a:first-child {  }


.hide-web { display: none }