@charset "utf-8";

/* ************ reset ************ */
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, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video, input, textarea, button, select {
    margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; outline: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
html { height: 101%; font-size: 62.5%; }
body { background: #F1F3F5; line-height: 1; color:#302D2C; font-family: 'Noto Sans KR', 'SD Apple Gothic', sans-serif, 'Malgun Gothic', 'MalgunGothic', '맑은 고딕'; font-weight:400; letter-spacing: -0.05em;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
fieldset, img, abbr, acronym{border:0} 
span, em, mark, strong, b, label{margin:0;padding:0;border:0;vertical-align:baseline;background:transparent;list-style:none;box-sizing:border-box;}
ol, ul { list-style: none; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }
strong { font-weight: 500; }
table { border-collapse: collapse; border-spacing: 0;border:0; }
td,th{word-break:break-all;margin:0;padding:0;box-sizing:border-box}
legend, caption{font-size:0;overflow:hidden;text-indent:-9999999px;height:0;width:0;line-height:0} 
img { border: 0; max-width: 100%; }
ins{text-decoration:none}
del{text-decoration:line-through}
sub, sup{margin:0;padding:0}   
em,i{font-style:normal}
a, a:link, a:visited, a:active,a:hover{text-decoration:none; transition:all 0.3s ease;}
input[type="button"], button{margin:0;padding:0;border:0;cursor:pointer;background:none} 
input[type="reset"], input[type="submit"]{line-height:normal;border:0} 
textarea{padding:1%;width:100%;border:1px solid #ccc;color:#4d4d4d;resize:none;box-sizing:border-box;-webkit-appearance:none;-moz-appearance:none;appearance:none;border-radius:0} 
button:focus{}


/* ************ common ************ */ 
.align-r{text-align:right !important}
.align-c{text-align:center !important}
.align-l{text-align:left !important}
.float-l{float:left !important}
.float-r{float:right !important} 
.clearfix:after{content:"";display:block;clear:both;width:0;height:0}
.ellipsis{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;-o-text-overflow:ellipsis;-ms-text-overflow:ellipsis;-moz-binding:url(/xe/ellipsis.xml#ellipsis)}
.w100{width:100%;display:block}
.hidden{overflow:hidden;width:0;height:0;line-height:0;margin:0;padding:0;font-size:0;text-indent:-9999px}
.break{display:block}/* pc에서는 줄바꿈,모바일에서는 줄바꿈이 없는경우 */
.break-inverse{display:inline} 
.p-type{display:block}
.m-type{display:none}
.ptNo {padding-top:0 !important;}
.hideTxt{display: none;}


/* ************ layout ************ */
html, body{height: 100%;}
#fullpage {margin-left: 275px; }
#fullpage > div { padding: 0 calc( 100% / 6 );}

/* header / footer */
header {position: absolute; left: 25px; top: 40px; z-index: 20;}
header h1 a{display:block; }
header h1 a span{display:none; }
header h1 a svg{width: 155px; height: 43px;}
header button{ display:none; float: left; margin: 15px; text-indent:-9999px; overflow: hidden;}
header button i{display: none;}
header button span{display:block; width: 28px; height: 2px; background-color:#333; margin: 8px 0; transition: 0.2s;}
footer {position: absolute; left: 25px; bottom: 30px; color: #707070; font-size: 1.4rem; font-weight: 400; z-index: 40; white-space: nowrap;}

/* menu / aside */
#menu{ box-sizing: border-box; display: flex; flex-direction: column; justify-content: center; width: 275px;height: 100%;padding: 0;margin:0; background: #fff; z-index: 10; transition:all 0.3s ease;}
#menu li { margin: 3px 0; }
#menu li a{ display:block; height: 38px; padding: 0 20px; color: rgba(0, 0, 0, .6); text-decoration:none; transition:all 0.3s ease; line-height: 38px;}
#menu > li > a { font-size: 1.8rem; font-weight: 400; }
#menu .botSubMenu > li > a { font-size: 1.3rem; font-weight: 400; }
#menu li a:hover{ color: rgba(0, 0, 0, 1);}
#menu > li.active > a { font-size: 2.2rem; color: #000; }
#menu .botSubMenu > li.active > a { font-size: 1.6rem; color: #000; }
#menu li.active a:hover{ color: #000; }
aside {position:fixed;top:0;left:0; height: 100%; transition:all 0.3s ease;}
aside .botMenuBg {position: fixed; width: 100%; height: 100%; left: 0; top: 0; background-color: rgba(0, 0, 0, .7); visibility: hidden; opacity: 0; transition:all .5s ease;}
aside > a {display: none; position: absolute; left: 230px; top: 20px; width: 24px; height: 24px; z-index: 31; }
aside > a::before {content: ''; position: absolute; left: -5px; top: 12px; width: 34px; height: 1px; background: #000; transform: rotate(45deg);}
aside > a::after {content: ''; position: absolute; left: -5px; top: 12px; width: 34px; height: 1px; background: #000; transform: rotate(-45deg);}
aside > a span {display: none;}

/* Pages - common */
.slide{background-size: cover;}
.section{background-size: cover;}
.section h3{ position: relative; margin-bottom: 3.5rem; color: #000; font-size: 5rem; font-weight: 800; }
.section h3::before{ content: ''; position: absolute; left: 0; top: -1rem; width: 4.5rem; height: .5rem; background: #DC000C;}
.section h4{ position: relative; margin-bottom: 3.5rem; color: #000; font-size: 5rem; font-weight: 800; }
.section h4.dep2 { position: relative; margin-bottom: 2.5rem; border-bottom: 4px solid #302D2C; color: #000; font-size: 3.5rem; font-weight: 800; line-height: 1.5em; }
.section h4.dep2 + p { margin-bottom: 2.5rem; font-size: 1.6rem; font-weight: 400; line-height: 1.5em; }
.section h5.dep3 { display: flex; align-items: center; margin-bottom: 2rem; color: #000; font-size: 2.8rem; font-weight: 600; line-height: 1.5em; }
.section h5.dep3 .ic_hexa { width: 22px; height: 25px; margin-right: 1rem; fill: #DC000C; }
.section .tbl_DL dl{display: flex;}
.section .tbl_DL dt{ width: 25%; margin-right: 20px ; font-weight: 900; }
.section .tbl_DL dd{ flex: 1;}
.section .tbl_DL dt, .section .tbl_DL dd { padding:5px 10px 15px; color: #302D2C; font-size: 1.4rem; line-height: 1.3em; border: 1px solid #302D2C; border-width: 0 0 1px;}
.section .tbl_DL li:first-child dt, .section .tbl_DL li:first-child dd { border-top: 3px solid #302D2C; }
.section .tbl_DL li:last-child dt, .section .tbl_DL li:last-child dd { border-bottom: 3px solid #302D2C; }
.section .noti { display: flex; justify-content: center; align-items: center; border: 1px solid #aaa; height: 20%; }
.slide.fp-slide.fp-table{margin-right: 1px;}
.fp-controlArrow { width: 40px !important; height: 80px; border: none; opacity: .5; transition:all .3s ease;}
.fp-controlArrow:hover { transform: scale(1.1); opacity: 1;}
.fp-controlArrow::before { content: ''; position: absolute; top: 11px; width: 56px; height: 56px; border: 2px solid #000; }
.fp-controlArrow.fp-prev::before { left: 0; transform: scaleX(0.7) rotate(45deg) ; border-width: 0 0 2px 2px;}
.fp-controlArrow.fp-next::before { right: 0; transform: scaleX(0.7) rotate(45deg) ; border-width: 2px 2px 0 0;}


/* Pages - p01 intro */
#section0 {position: relative; z-index: 1; overflow: hidden;}
#section0 .txt_con {position: absolute; right: calc( 100% / 6 ); bottom: 0; width: 500px; background: #fff; z-index: 10;}
#section0 .txt_con p { width: 100%; height: 0; padding-bottom: 100%; }
#section0 .txt_con p strong { display: block; margin:0 30px; padding-top: 30px; color: #000; font-size: 6rem; font-weight: 600; line-height: 1.2em; }
#section0 .txt_con p span { display: block; margin: 30px; color: #302D2C; font-size: 3.3rem; font-weight: 400; line-height: 1.3em;}
#section0::after {content:""; position:absolute; left:0;top:0; width:100%;height:100%; background-image: url(../images/img_main01.jpg);background-size: cover;background-position: center;opacity:0.25!important;filter:alpha(opacity=25);z-index:-1;}
#section0 i {position: absolute; background: rgba(255, 255, 255, .8); border-radius: 50%;}
#section0 i:after {content: ''; position: absolute; left: 0; top: 0; width: 100%; height: 0; padding-bottom: 100%; background: rgba(255, 255, 255, .4); border-radius: 50%;}
#section0 i:nth-of-type(1) {left: -12.8%; bottom: 30%; width: calc( 340px - ( 340px - 18% )/1.5 ); }
#section0 i:nth-of-type(2) {left: 29.34%; top: 20.6%; width: calc( 170px - ( 170px - 8.8% )/1.5 ); }
#section0 i:nth-of-type(3) {left: 41.9%; top: 47.4%; width: calc( 260px - ( 260px - 13.5% )/1.5 ); }
#section0 i:nth-of-type(4) {left: 47.1%; top: 4.5%; width: calc( 350px - ( 350px - 18.2% )/1.5 ); }
#section0 i:nth-of-type(5) {left: 83.9%; top: 37.5%; width: calc( 113px - ( 113px - 5.8% )/1.5 ); }

/* Pages - p02 Business Area */
#section2 h4{display: flex; flex-direction: column; align-items: center;}
#section2 h4 span{ margin-bottom: 5px; color: #5F5E5E; font-size: 3rem; font-weight: 600; }
#section2 h4 small{ color: #947864; font-size: 1.7rem; font-weight: 300; }
#section2 ul{ position: relative; display: flex; padding-top: 60px;}
#section2 ul:after{ content: ''; position: absolute; top: 22px; left: 12.5%; height: 1px; width: 75%; background: #302D2C; }
#section2 ul li{ position: relative; flex: 1; margin: 0 5px; border: 2px solid #302D2C; border-radius: 50%; }
#section2 ul li:before{ content: ''; position: absolute; left: 50%; top: -40px; width: 1px; height: 40px; background: #302D2C;}
#section2 ul li a{ position:relative; display: block; width: 100%; padding-bottom: 100%; border-radius: 50%; transition:all 0.3s ease;}
#section2 ul li a span{ position: absolute; left: 0;top: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; color: #302D2C; font-size: 2rem; text-align: center; }
#section2 ul li a:hover{ background-color: rgba(0, 0, 0, .1);}

/* Pages - p02 Business Area - 01 e-Learning */
.figure_elearning li .ic_hexa { width: 240px; height: 312px; fill: #fff; stroke:#302D2C; stroke-linecap: round; stroke-width:.1px }




/* Pages - p03 portfolio */
#section7 .catemenu { display: flex; margin-bottom: 40px; }
#section7 .catemenu li { position: relative; padding: 0 20px; }
#section7 .catemenu li::before { content: ''; position: absolute; left: 0; top: 3px; width: 2px; height: 14px; background: #888; }
#section7 .catemenu li:first-child { padding-left: 0; }
#section7 .catemenu li:first-child::before { display: none; }
#section7 .catemenu li a {display: block; color: #5F5E5E; font-size: 1.6rem; transition:all 0.3s ease; }
/* #section7 .catemenu li a:hover { color: #000; } */
#section7 .catemenu li a.on { transform: scale(1.1); color: #000; }
[class*="catelist"] { min-height: 611px; opacity: 0; visibility: hidden; transition:all 0.3s ease; }
[class*="catelist"].on { opacity: 1; visibility: visible;}
[class*="catelist"] ul { display: flex; flex-wrap: wrap; justify-content: space-around; align-items: center; }
[class*="catelist"] ul li { width: 250px; margin:0 calc(( 100% - 500px )/4) 1.5rem; }
[class*="catelist"] ul li > div { position: relative; width: 100%; padding-bottom: 56.25%; }
[class*="catelist"] ul li > div span { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-size: cover; background-position: center;}
/* [class*="catelist"] ul li > p:first-of-type { margin: .5rem 0; color: #947864; font-size: 1.4rem;  } */
[class*="catelist"] ul li > p { margin: .5rem 0;}
[class*="catelist"] ul li > p span{ display: block; font-size: 2rem; line-height: 1.3em; }
[class*="catelist"] ul li > p small{ display: block; font-size: 1.2rem; opacity: .7; }

/* Pages - p04 contactus */
#section8 h4 { margin: 30px 0 15px; color:#302D2C; font-size: 2.4rem; font-weight: 600; }
#section8 .map_con {position: relative; width: 100%; height: 500px; background-image: url(../images/img_map.jpg); background-size: cover; background-position: center;}
#section8 .map_con p {position: absolute; left: 50%; top: 0; display: flex; flex-direction: column; justify-content: center; height: 100%; }
#section8 .map_con p span {  position: relative; display: block; padding: 3px 5px; background-color: rgba(220, 0, 12, .85); border-radius: 3px; color: #fff; font-size: 1.2rem; font-weight: 400; line-height: 1.4em;}
#section8 .map_con p span:before {content: ''; position: absolute; left: -10px; top: calc( 50% - 8px ); width: 0; height: 0; border-right: 10px solid rgba(220, 0, 12, .85); border-top: 5px solid transparent; border-bottom: 5px solid transparent; }



/* Smartphones ----------- */
@media only screen and (max-width : 767px) {
    /* ************ layout ************ */
    #fullpage {margin-left: 0; }
    #fullpage > div { padding: 0 20px;}

    /* header */
    header{position: fixed; left: 0; top: 0; width: 100%; padding: 6px 0px; background: #fff;}
    header h1 a svg{transform: scale(.8);}
    header button{ display:block; position: absolute; right: 20px; top: 10px; margin: 0;}
    
    /* menu / aside */
    #menu {position: absolute; display: block; padding-top: 50px; z-index: 30;}
    aside {position: fixed; top: 0; left: -275px; z-index: 30;}
    aside > a {display: block;}
    aside.on .botMenuBg {visibility: visible; opacity: 1;}
    aside.on {left: 0; }

    /* Pages - common */
    .section:nth-child(2n) {background-color: #fff;}
    .section h3{font-size: 2.5rem;margin-bottom: 2rem;}
    .section h3::before{ top: -.5rem; width: 2rem; height: 2px;}
    .section h4.dep2 { margin-bottom: 2.5rem; border-bottom: 2px solid #302D2C; font-size: 2rem; font-weight: 800; }
    .section h5.dep3 { margin-bottom: 2rem; font-size: 1.8rem; }
    .section h5.dep3 .ic_hexa { width: 18px; height: 20px;}
    .section .tbl_DL dt{ width: 40%; margin-right: 10px;}
    .section .tbl_DL dt, .section .tbl_DL dd { padding:3px 10px 10px; font-size: 1.3rem; line-height: 1.4em;}
    .fp-controlArrow::before { top: 30px; width: 10px; height: 10px;}
    .fp-controlArrow.fp-prev { left: 4px;}
    .fp-controlArrow.fp-next { right: 4px;}

    /* Pages - p01 intro */
    #section0 .txt_con {right: 0; bottom: 100px; width: 285px;}
    #section0 .txt_con p strong { font-size: 3.5rem;}
    #section0 .txt_con p span { font-size: 1.8rem;}

    /* Pages - p02 Business Area */
    #section2 ul li a span{ font-size: 1.2rem;}

    /* Pages - p03 portfolio */
    #section7 .catemenu { display: flex; margin-bottom: 2rem; }
    #section7 .catemenu li { padding: 0 15px; }
    #section7 .catemenu li a {font-size: 1.3rem;}
    [class*="catelist"] { min-height: 432px;}
    [class*="catelist"] ul li { width: 160px; margin:0 calc(( 100% - 320px )/4) 1rem; }
    [class*="catelist"] ul li > p:first-of-type { margin: .3rem 0 ; font-size: 1.2rem;  }
    [class*="catelist"] ul li > p + p span{ font-size: 1.6rem; }
    [class*="catelist"] ul li > p + p small{ font-size: 1.2rem;}

    /* Pages - p04 contactus */
    #section8 h4 { margin: 20px 0 10px; font-size: 1.8rem;}
    #section8 .map_con {height: 200px;}
}
  
/* Tablet ----------- */
@media only screen and (min-width : 768px) and (max-width : 1199px) {
    /* ************ layout ************ */
    /* Pages - common */
    .section h3{font-size: 4rem;margin-bottom: 1.5rem;}
    .section h3::before{ top: -.5rem; width: 1.8rem; height: 2px;}

    /* Pages - p02 Business Area */
    #section2 ul li a span{ font-size: 1.5rem;}

    /* Pages - p03 portfolio */
    #section7 .catemenu li a {font-size: 1.4rem;}
    [class*="catelist"] { min-height: 491px;}
    [class*="catelist"] ul li { width: 170px; margin:0 calc(( 100% - 340px )/4) 20px; }
}