/* reset */
* {box-sizing: border-box;}
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 {font-family:'나눔고딕',NanumGothic; line-height: 1; font-family:'NanumGothic'; font-size: 14px; color: #333; width: 100%; height: 100%;}
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;}
input:focus {outline: none;}
a {color: inherit; text-decoration: none;}
button {border:none; background-color: transparent; cursor: pointer; letter-spacing: -0.01rem;}

/* 웹폰트 CSS */
@font-face {font-family:'NanumGothic'; font-style:normal; src: url('../font/NanumGothic.ttf') format('truetype');}
@font-face {font-family:'NanumGothic'; font-style:normal; src: url('../font/NanumGothic.eot');}
@font-face {font-family:'NanumGothic'; font-style:normal; src: url('../font/NanumGothic.woff') format('woff');} 
@font-face {font-family:'NanumGothicBold'; font-style:normal; src: url('../font/NanumGothicBold.ttf') format('truetype');}
@font-face {font-family:'NanumGothicBold'; font-style:normal; src: url('../font/NanumGothicBold.eot');}
@font-face {font-family:'NanumGothicBold'; font-style:normal; src: url('../font/NanumGothicBold.woff') format('woff');} 

/* common css */
.flex {display: flex;}
.flex-wrap {flex-wrap: wrap;}
.space-between {justify-content: space-between;}
.items-center {align-items:center}
.justify-center {justify-content: center;}


/* menu */
.top {width: 100%; height: 33px; padding-top: 3px; border-top: 2px solid #a3a3a3; background-color: #ececec;}
.top ul {display: flex; justify-content: right; width: 1000px;  margin: 0 auto; padding: 0 20px;}
.top ul li {margin: 0 10px;}
.top ul li:last-child {margin-right: -18px;}
.top ul li a {display: inline-block; padding: 5px 10px; font-size: 12px; font-weight: bold; color: #7f7f7f;}

.g-menu-wrap {display: flex; justify-content: space-between; width: 1000px; margin: 0 auto; padding: 0 20px;} 
.g-menu-wrap .logo {display: inline-block; width: 175px; height: 33px; margin-top: 20px; text-indent: -999px; background: url(../img/logo.png) 0 0;}
#gnb {display: flex; justify-content: right; width: 760px; margin: 0 auto; }
#gnb > li {display:inline-block; margin: 0 5px;}
#gnb > li:last-child {margin-right: -50px;}

#gnb > li a {display: inline-block; font-size: 18px; font-weight: bold; padding: 28px 30px; letter-spacing: -0.1rem;}
#gnb .submenu {display: none; position:absolute; width: 100%; top:107px; left:0; height:30px; z-index: 999; background-color: #316dff;}
#gnb .submenu > div {position: relative; width: 760px; margin: 0 auto; background-color: red;}
#gnb li:nth-child(1) .submenu > div ul {position: absolute; left: -380px;}  
#gnb li:nth-child(2) .submenu > div ul {position: absolute; left: -300px;} 
#gnb li:nth-child(3) .submenu > div ul {position: absolute; left: -170px;} 
#gnb li:nth-child(4) .submenu > div ul {position: absolute; left: -110px;} 
#gnb .submenu ul {display: flex; justify-content: right; width: 975px; margin: 0 auto;}
#gnb .submenu li {padding:0 5px;}
#gnb .submenu li:last-child {margin-right: -20px;}
#gnb .submenu li a {color: #fff; padding:7.5px 15px; font-size: 14px; font-weight: normal; letter-spacing: 0;}

/* banner1 */
.banner1-wrap {width: 100%; height: 354px; border-top:4px solid #316dff; background-color: #000; color: #fff; letter-spacing: -0.1rem;}
.banner1 .item {height: 350px; padding: 60px 0 0;}
.banner1 .item div {width: 1000px; margin: 0 auto; padding: 0 20px;}
.banner1 .ba_01 {background:url(../img/ba_01_bg.png) no-repeat center center;}
.banner1 .ba_02 {background:url(../img/ba_02_bg.png) no-repeat center center;}
.banner1 .ba_03 {background:url(../img/ba_03_bg.png) no-repeat center center;}
.banner1 .item div h4 {font-size: 32px; font-weight: bold;}
.banner1 .item div > p {margin: 25px 0 18px; font-size: 20px; line-height: 30px; font-weight: bold;}
.banner1 .item div > p span {display: block; color: #316dff;}
.banner1 .item div {line-height: 22px; font-size: 13px;}

.banner1_bu {width: 975px; margin: 0 auto;}
.banner1 .owl-dots {width: 975px; margin: 0 auto; padding-left: 15px;}
.banner1 .owl-dot {width: 13px; height: 13px; margin: 0 4px; border-radius: 100%; background-color: #fff;}
.banner1 .play {display: inline-block; position: relative; top: -80px; z-index: 999; margin-left: 85px; width: 20px; height: 20px; text-indent: -9999px; background:url(../img/play.png) no-repeat center center;}
.banner1 .stop {display: inline-block; position: relative; top: -80px; z-index: 999; margin-left: -2px; width: 20px; height: 20px; text-indent: -9999px; background: url(../img/stop.png) no-repeat center center;}

/* banner2 */
.banner2-wrap {width: 100%; margin: 0 auto; border-top: 1px solid #e8e8e8; border-bottom: 1px solid #e8e8e8;}
.banner2 {width: 975px; height: 90px; margin: 0 auto; display: flex; align-items:center; justify-content:center}
.banner2 .owl-carousel {display: flex; align-items:center; justify-content:center;}
.banner2 .owl-carousel .owl-stage {width: 50px; display: flex; align-items:center; justify-content:center; text-align: center;}
.banner2 .owl-dots {display: none;}
.banner2 .owl-carousel .owl-nav button.owl-prev {position: absolute; top: -29px; left: 0px; width: 13px; height: 90px; background:#fff url(../img/ref_left_bu.png) no-repeat center center;}
.banner2 .owl-carousel .owl-nav button.owl-next {position: absolute; top: -29px; right: 0px; width: 13px; height: 90px; background:#fff url(../img/ref_right_bu.png) no-repeat center center;}

/* board_wrap */
.board_wrap {display: flex; justify-content: space-between; width: 1000px; margin: 0 auto; padding: 0 20px;}
.board_wrap h3 {font-size: 18px; font-weight: bold; letter-spacing: -0.1rem;}
.board_wrap .h4_title {display: block; padding: 9px 0 20px; font-size: 12px; text-indent: 2px; font-weight: bold; color: #316dff;}

/* news */
.news {width: 430px; padding: 35px 60px 0 0; border-right: 1px solid #e8e8e8;}
.news ul li {padding: 3px 0 3px;}
.news ul li a {display: block; display: flex; justify-content: space-between; padding: 2px 0; font-size: 13px;}
.news ul li strong {width: 260px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;}

/* FAQ, Q&A */
.board_li a {display: block; width: 300px; min-height: 109px; font-weight: bold; font-size: 18px; padding: 35px 0 0 122px;}
.board_li li:nth-child(1) a {border-bottom:1px solid #e8e8e8; background: url(../img/ba01.png) no-repeat 55px 29px;}
.board_li li:nth-child(2) a {background: url(../img/ba02.png) no-repeat 55px 26px;}

/* best-refernce */
.best-refernce {width: 245px; padding: 35px 0 0 40px; border-left: 1px solid #e8e8e8; background: url(../img/Refernce_bg.png) no-repeat 0 0;}
.best-refernce a {display: block; width: 100%; font-size: 11px; line-height: 17px; background: url(../img/right_bu2.png) no-repeat right 2px;} 

/* footer */
.footer {display: flex; justify-content: space-between; align-items: center; width: 1000px; margin: 30px auto; padding: 0 20px; font-size: 12px;}
.footer .footer_logo {text-indent: -9999px;}
.footer .footer_logo {display: inline-block; width: 120px; height: 22px; background:url(../img/footer_copy.png) no-repeat 0 0;}