@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/notosanskr.css);
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 {margin:0;padding:0;border:0;font-size:100%;font:inherit;vertical-align:baseline;}
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {display:block;}
body {line-height:1.5;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%;}
h1, h2, h3, h4, h5, h6 {line-height:1.2;}
sub, sup {line-height:0;}
ol, ul {list-style:none;}
blockquote, q {quotes:none;}
blockquote:before, blockquote:after, q:before, q:after {content:'';content:none;}
table {border-collapse:collapse;border-spacing:0;}
caption, th, td {text-align:left;font-weight:normal;float:none !important;}
table, th, td {vertical-align:middle;}
a {text-decoration:none;}

* {font-family: 'Open Sans', 'Malgun Gothic', '맑은 고딕', Dotum, '돋움', 'Segoe UI Symbol', sans-serif !important;outline:none;-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent;}


@media screen and (min-device-width: 64em){
* {font-family: 'Noto Sans KR', sans-serif !important;}
}


svg {vertical-align:top;}
*,:after,:before{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box}
.text--uppercase {text-transform:uppercase}
.text--left {text-align:left}
.text--center {text-align:center}
.text--right {text-align:right}
.text--justify {text-align:justify}




 /* 배경색 */
.bk_gray_1 {background-color:#8e8e8e;}
.bk_gray_1, .bk_gray_1 * {transition:all 0.2s ease-in-out;}
.bk_gray_1:hover {background-color:#393939}
.bk_gray_1:hover .c_Office p {color:#ff3333;}
.bk_gray_1:hover .c_Office p * {color:#ff3333;}
.bk_gray_1:hover .c_Office .link {color:#ff3333;}

.bk_red_2 {background-color:#424242;}
.bk_red {background-color:#424242;}
.bk_red, .bk_gray_1 * {transition:all 0.2s ease-in-out;}
.bk_red:hover {background-color:#292929}
.bk_red:hover .c_Contact p {color:#ff3333;}
.bk_red:hover .c_Contact .link {color:#ff3333;}

.bk_gray_2 {background-color:#dcdcdc}
.bk_gray_2, .bk_gray_2 * {transition:all 0.2s ease-in-out;}
.bk_gray_2:hover {background-color:#424242;}
#aside .bk_gray_2:hover .panel_tit_1 {color:#fff;}
#aside .bk_gray_2:hover .line span {background-color:#fff;}
#aside .bk_gray_2:hover .panel_tit_2 {color:#ff3333;}
#aside .bk_gray_2:hover .icon path {fill:#ff3333;}

.bk_gray_3 {background-color:#d2d2d2}
.bk_gray_3, .bk_gray_3 * {transition:all 0.2s ease-in-out;}
.bk_gray_3:hover {background-color:#393939;}
#aside .bk_gray_3:hover .panel_tit_1 {color:#fff;}
#aside .bk_gray_3:hover .line span {background-color:#fff;}
#aside .bk_gray_3:hover .panel_tit_2 {color:#ff3333;}
#aside .bk_gray_3:hover .icon path {fill:#ff3333;}




#header {position:fixed;top:0;right:0;left:0;z-index:50;}
#header .header {height:44px;position:relative;background-color:rgba(55,55,55,0.9);transition: background-color 0.3s ease 0s;}
#header h1.logo {position:absolute;top:7px;left:20px;display:block;width:30px;height:30px;overflow:hidden;}
#header h1.logo a {width:100%;height:100%;display:block;}
#header h1.logo #logo {width:30px;height:30px;}

.img_map  {display:none;}
html {background: linear-gradient(to bottom, #f8faff, #fffaff)}
body {background-color:#ffffff;padding-top:44px;;overflow-x:hidden;}

/* tab */
#tab {position:relative;}
#tab h3 {position:relative;text-align:left;font-weight:300;letter-spacing:5px;background-color:#d2d2d2;cursor:pointer;padding:11px 20px;font-size:12px;line-height:1.5;}
#tab h3:focus,#tab h3:hover{background-color:#eff7f9}
#tab h3 .icon_Arrow {position:absolute;top:14px;right:20px;width:20px;height:11px;transition: all 0.3s ease-in-out 0s;transform: rotateX(0deg);-webkit-transform:rotateX(0deg);}
#tab.on h3 .icon_Arrow {transform: rotateX(180deg);-webkit-transform: rotateX(180deg);}
#tab ul {position:relative;width:100%;max-height:0;transition:all 0.5s ease 0s;overflow:hidden;}
#tab.on ul {max-height:500px;}
#tab ul:after {clear:both;content:"";display:block;}
#tab ul li {float:left;width:100%;font-weight:300;text-align:center;}
#tab ul li a {width:100%;letter-spacing:5px;display:block;color:#000;text-decoration:none;font-size:12px;line-height:1.5;padding:11px;}
#tab ul li:nth-child(1) a {background-color:rgba(220,220,220,0.9);}
#tab ul li:nth-child(2) a {background-color:rgba(210,210,210,0.9);}
#tab ul li:nth-child(3) a {background-color:rgba(220,220,220,0.9);}
#tab ul li:nth-child(4) a {background-color:rgba(210,210,210,0.9);}
#tab ul li a.current {background-color:rgba(60,60,60,0.9);color:#fff; font-weight:400}
#tab ul li a:hover {background-color:rgba(70,70,70,0.8);color:#fff;}
.work_project {padding-top:40px;}
@media screen and (min-width: 48em){ /* ≥ 768px */
#tab h3 {display:none;}
#tab ul {max-height:500px;}
#tab ul li {width:25%;}
#tab ul li a {padding:18px 11px;}
.work_project {padding-top:54px;}
}



/* contact */
.c_Office {position:relative;left:0;width:100%;padding:26px;height:100%;}
.c_Office * {color:#fff;}
.c_Office h3 {font-size:14px;font-weight:300;line-height:1.5;}
.c_Office h3:after {content:"";display:block;height:1px;transition:width 0.2s ease 0s;width:80px;background-color:currentcolor;margin-top:1px;}
.c_Office:hover h3:after {width:100%;}
.c_Office p {font-size:11px;line-height:1.5;margin-top:6px;}
.c_Office p .inbk {display:block;}
.c_Office p + p {margin-top:16px;}
.c_Office .link {position:absolute;bottom:26px;right:26px;text-decoration:none;font-size:11px;font-style: italic;text-align:right;display:block;}
 
.c_Contact {position:relative;left:0;width:100%;padding:26px;height:100%;}
.c_Contact * {color:#fff;}
.c_Contact h3 {font-size:14px;font-weight:300;line-height:1.5;}
.c_Contact h3:after {content:"";display:block;height:1px;transition:width 0.2s ease 0s;width:80px;background-color:currentcolor;margin-top:1px;}
.c_Contact:hover h3:after {width:100%;}
.c_Contact p {font-size:11px;line-height:1.5;margin-top:6px;}
.c_Contact p + p {margin-top:16px;}
.c_Contact .link {position:absolute;bottom:26px;right:26px;text-decoration:none;font-size:11px;font-style: italic;text-align:right;display:block;}

/* aside */
#aside {text-align:center;}
#aside .slogan {background-color:#757575;color:#cbcbcb;font-size:14px;line-height:1.5;text-align:center;padding:12px 60px;}
#aside .panel_tit_1 {font-size:10px;line-height:1.5;color:#000;font-weight:300;letter-spacing:5px;}
#aside .line {width:100%;height:1px;margin-top:9px;font-size:0;line-height:0;}
#aside .line span {display:inline-block;height:1px;width:180px;background-color:#000;}
#aside .panel_tit_2 {font-size:22px;line-height:1.5;color:#000;margin-top:6px;}
#aside .icon {display:block;margin-top:22px;}
#aside .icon svg {width:68px;height:68px;}

/* footer */
#footer .f_link {}
#footer .f_link {padding:16px 36px;}
#footer .f_link .icon {float:left;}
#footer .f_link .icon svg {width:57px;height:57px;}
#footer .f_link .beside {font-size:12px;line-height:1.2;color:#fff;display:table;height:57px;}
#footer .f_link .beside .table-cell {display:table-cell;vertical-align:middle;padding-left:10px;}
#footer .f_link .beside .table-cell a {color:#fff;}
#footer .f_link .beside .table-cell .inbk {display:block;}


@media screen and (min-width: 35.5em){
/* contact */
.c_Office p {font-size:10px;}
.c_Office .link {left:26px;right:auto;}
.c_Contact p {font-size:10px;}
.c_Contact .link {left:26px;right:auto;}
}

@media screen and (min-width: 48em){
body {padding-top:79px;}
#header .header {height:79px;}
#header h1.logo {width:43px;height:43px;top:18px;left:36px;}
#header h1.logo #logo {width:43px;height:43px;}

.c_Office {padding:36px;}
.c_Office p {font-size:11px;}
.c_Office p .inbk {display:inline;}
.c_Office .link {bottom:36px;left:36px;}
.c_Contact {padding:36px;}
.c_Contact p {font-size:11px;}
.c_Contact .link {bottom:36px;left:36px;}

#aside .slogan {padding:33px 60px;}
#aside .panel_tit_1 {font-size:12px;line-height:1.5;}
#aside .panel_tit_2 {font-size:22px;}
#aside .icon svg {width:88px;height:88px;}

}

@media screen and (min-width: 64em){
.img_map  {display:inline;}
.img_map_s  {display:none;}
}

@media screen and (min-width: 80em){
}




/* 공통 레잉아웃 */
body {max-width:1600px;margin:0 auto;}
#header .header {max-width:1600px;margin:0 auto;}
#header #tab {max-width:1600px;margin:0 auto;}
#container {max-width:1600px;margin:0 auto;}
#aside {max-width:1600px;margin:0 auto;}
#footer {max-width:1600px;margin:0 auto;}

/* 작은거에서없다 */

/* 박스 레이아웃 */
.sq_box {position:absolute;top:0;bottom:0;left:0;right:0;white-space:nowrap;overflow:hidden;}
.sq_box:after{content:"";position:relative;display:inline-block;height:100%;vertical-align:middle;}
.sq_box > .middle_inner {display:inline-block;vertical-align:middle;white-space:normal;}
.sq_box_t {position:absolute;top:0;bottom:0;left:0;right:0;overflow:hidden;}

.pure-u-none {display:none;}
.sq-u-1 {position:relative;padding-bottom:100%;}
.sq-u-2 {position:relative;padding-bottom:75%;}
.sq-u-3 {position:relative;padding-bottom:66.6667%;}
.sq-u-4 {position:relative;padding-bottom:50%;}
.sq-u-5 {position:relative;padding-bottom:80%;}
.sq-u-6 {position:relative;padding-bottom:68.75%;}
.sq-u-7 {position:relative;padding-bottom:125%;}
.sq-u-8 {position:relative;padding-bottom:25%;}
@media screen and (min-width: 35.5em){ /* ≥ 568px */
.pure-u-none {display:inline-block;}
.pure-u-sm-none {display:none;}
.sq-u-sm-1 {position:relative;padding-bottom:100%;}
.sq-u-sm-2 {position:relative;padding-bottom:75%;}
.sq-u-sm-3 {position:relative;padding-bottom:66.6667%;}
.sq-u-sm-4 {position:relative;padding-bottom:50%;}
.sq-u-sm-5 {position:relative;padding-bottom:80%;}
.sq-u-sm-6 {position:relative;padding-bottom:68.75%;}
.sq-u-sm-7 {position:relative;padding-bottom:125%;}
.sq-u-sm-8 {position:relative;padding-bottom:25%;}
}
@media screen and (min-width: 48em){ /* ≥ 768px */
.pure-u-sm-none {display:inline-block;}
.sq-u-md-1 {position:relative;padding-bottom:100%;}
.sq-u-md-2 {position:relative;padding-bottom:75%;}
.sq-u-md-3 {position:relative;padding-bottom:66.6667%;}
.sq-u-md-4 {position:relative;padding-bottom:50%;}
.sq-u-md-5 {position:relative;padding-bottom:80%;}
.sq-u-md-6 {position:relative;padding-bottom:68.75%;}
.sq-u-md-7 {position:relative;padding-bottom:125%;}
.sq-u-md-8 {position:relative;padding-bottom:25%;}
}
@media screen and (min-width: 64em){ /* ≥ 1024px */
.sq-u-lg-1 {position:relative;padding-bottom:100%;}
.sq-u-lg-2 {position:relative;padding-bottom:75%;}
.sq-u-lg-3 {position:relative;padding-bottom:66.6667%;}
.sq-u-lg-4 {position:relative;padding-bottom:50%;}
.sq-u-lg-5 {position:relative;padding-bottom:80%;}
.sq-u-lg-6 {position:relative;padding-bottom:68.75%;}
.sq-u-lg-7 {position:relative;padding-bottom:125%;}
.sq-u-lg-8 {position:relative;padding-bottom:25%;}
}
@media screen and (min-width: 80em){ /* ≥ 1280px */
.sq-u-xl-1 {position:relative;padding-bottom:100%;}
.sq-u-xl-2 {position:relative;padding-bottom:75%;}
.sq-u-xl-3 {position:relative;padding-bottom:66.6667%;}
.sq-u-xl-4 {position:relative;padding-bottom:50%;}
.sq-u-xl-5 {position:relative;padding-bottom:80%;}
.sq-u-xl-6 {position:relative;padding-bottom:68.75%;}
.sq-u-xl-7 {position:relative;padding-bottom:125%;}
.sq-u-xl-8 {position:relative;padding-bottom:25%;}
}




/* 이미지 레이아웃 */
.sq_box_hidden {overflow:hidden;}
.sq_box.img-u-2 {left:-100%;right:-100%;}
.sq_box .c_img {position:absolute;height:101%;width:auto;}
.img-u-1 .c_img {left:0;right:auto;}
.img-u-2 .c_img {left:0;right:0;margin:0 auto;}
.img-u-3 .c_img {left:auto;right:0;}
@media screen and (min-width: 35.5em){ /* ≥ 568px */
.img-u-sm-1 .c_img {left:0;right:auto;}
.img-u-sm-2 .c_img {left:auto;right:auto;}
.img-u-sm-3 .c_img {left:auto;right:0;}
}
@media screen and (min-width: 48em){ /* ≥ 768px */
.img-u-md-1 .c_img {left:0;right:auto;}
.img-u-md-2 .c_img {left:0;right:0;margin:0 auto;}
.img-u-md-3 .c_img {left:auto;right:0;}
}
@media screen and (min-width: 64em){ /* ≥ 1024px */
.img-u-lg-1 .c_img {left:0;right:auto;}
.img-u-lg-2 .c_img {left:0;right:0;margin:0 auto;}
.img-u-lg-3 .c_img {left:auto;right:0;}
}
@media screen and (min-width: 80em){ /* ≥ 1280px */
.img-u-xl-1 .c_img {left:0;right:auto;}
.img-u-xl-2 .c_img {left:0;right:0;margin:0 auto;}
.img-u-xl-3 .c_img {left:auto;right:0;}
}



.fl-u-0 {left:0;right:0;}
.fl-u-1 {left:-100%;right:100%;}
.fl-u-2 {left:100%;right:-100%;}
@media screen and (min-width: 35.5em){ /* ≥ 568px */
.fl-u-sm-0 {left:0;right:0;}
.fl-u-sm-1 {left:-100%;right:100%;}
.fl-u-sm-2 {left:100%;right:-100%;}
}
@media screen and (min-width: 48em){ /* ≥ 768px */
.fl-u-md-0 {left:0;right:0;}
.fl-u-md-1 {left:-100%;right:100%;}
.fl-u-md-2 {left:100%;right:-100%;}
}
@media screen and (min-width: 64em){ /* ≥ 1024px */
.fl-u-lg-0 {left:0;right:0;}
.fl-u-lg-1 {left:-100%;right:100%;}
.fl-u-lg-2 {left:100%;right:-100%;}
}
@media screen and (min-width: 80em){ /* ≥ 1280px */
.fl-u-xl-0 {left:0;right:0;}
.fl-u-xl-1 {left:-100%;right:100%;}
.fl-u-xl-2 {left:100%;right:-100%;}
}