@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@300;900&display=swap');
/* **************************************** *
 * common
 * **************************************** */
#wrap {width:100%; overflow:hidden; position:relative;}

/* **************************************** *
 * header
 * **************************************** */
#header {position:relative; height:80px; width:1180px; margin:0 auto;}
#header .logo {position:absolute; left:0; top:50%; transform: translateY(-50%);}
#header .logo a {text-indent:-9999px; display:block; width:218px; height:43px; background:url(../image/logo.png)no-repeat 0 0; background-size:contain; transition: 0.3s;}
/* gnb */
#gnb {float:right;}
#gnb ul li {float:left; line-height:80px; padding-left:150px;}
#gnb ul li a {position:relative; display:block; width:inherit; height:inherit; font-size:18px; font-weight:400;}
#gnb ul li a:hover {color:#0d4fb3;}
#gnb ul li a:before {content:''; width:0px; height:2px; background:#0d4fb3; display:block; position:absolute; top:75%; left:50%; transform: translate(-50%, -50%);}
#gnb ul li a:hover:before {width:100%; transition:0.5s;}
#m_gnb {display:none;}

/* **************************************** *
 * container
 * **************************************** */
.main_visual {width:100%;}
.main_visual .visual_list {position:relative; height:750px; animation: img_s 2s}
.slick-slide:nth-child(1) {background:url(../image/main/main_visual01.jpg) no-repeat center; background-size:cover;}
.slick-slide:nth-child(2) {background:url(../image/main/main_visual02.jpg) no-repeat center; background-size:cover;}
.main_visual .visual_list:list-child {background:url(../image/sub/bg_ceo.jpg) no-repeat center; background-size:cover;}
.main_visual .visual_list .text {width:100%; text-align: center; position:absolute; top:50%; color:#fff; font-size:20px; transform: translateY(-50%); font-weight:300; animation: visual_t 2s; animation-fill-mode: both;}
.main_visual .visual_list .text span {display:block;font-size:50px; margin-bottom:20px; line-height:1.3em; font-weight: 700;}

@keyframes visual_t {
    0% {top:55%; opacity: 0;}
    100% {top:50%; opacity: 1;}
}

@keyframes img_s {
    0% {background-size:110%;}
    100% {background-size:100%;}
}

.main_content .content {padding:100px 0 150px; width:1180px; margin:0 auto;}
.main_content .content h2 {position:relative; font-family: 'Cairo'; font-size:45px; text-align:center; margin-bottom:100px; color:#000;}
.main_content .content h2:after {content:''; position:absolute; width:35px; height:3px; background:#0d4fb3; top:80px; left:50%; transform: translateX(-50%);}
.main_content .content ul {display:table; width:100%;}
.main_content .content ul li {display:table-cell;position:relative;}
.main_content .content ul li:after {content:''; position:absolute; right:0px; top:30%; width:1px; height:40px; background:#999; transform: rotate(30deg) translate(-50%);}
.main_content .content ul li:last-child:after {display:none;}
.main_content .content ul li a {position:relative; display:block; text-align: center; padding-top:250px; font-size:24px; font-weight:700;}

.main_content .content ul li a:before {content:''; width:200px; height:200px; border:1px solid #009ce4; position:absolute; top:0; left:50%; transform: translateX(-50%); border-radius:35px; }
.main_content .content ul li:nth-child(1) a:before {background:url(../image/main/icon_business.png)no-repeat center;}
.main_content .content ul li:nth-child(2) a:before {background:url(../image/main/icon_product.png)no-repeat center;}
.main_content .content ul li:nth-child(3) a:before {background:url(../image/main/icon_cs.png)no-repeat center;}
.main_content .content ul li:nth-child(1):hover a:before {background:#009ce4 url(../image/main/icon_business_on.png)no-repeat center;}
.main_content .content ul li:nth-child(2):hover a:before {background:#009ce4 url(../image/main/icon_product_on.png)no-repeat center;}
.main_content .content ul li:nth-child(3):hover a:before {background:#009ce4 url(../image/main/icon_cs_on.png)no-repeat center;}
.main_content .content ul li:hover a:before {transition:0.5s;}
.main_content .content ul li a span {display:block; font-family: 'Cairo'; font-size:14px; font-weight:300; color:#777;}

/* **************************************** *
 * footer
 * **************************************** */
#footer {width:100%; background:#073b8c; padding:40px 0;}
#footer .inner {width:1180px; margin:0 auto;}
#footer .inner:after {content:''; clear:both; display:block;}
#footer h2 {float:left; width:20%; margin-top:10px}
#footer h2 a {text-indent:-9999px; display:block; height:40px; background:url(../image/logo_w.png)no-repeat 0 0; background-size:contain; width:100%;}
#footer .footer_info {float:left; color:#fff; padding-left:3%; width:80%; font-size:14px; font-weight:300; letter-spacing: -0.5px;}
#footer .footer_info span{display:inline-block;}
#footer .footer_info span:after {content:'/'; display:inline-block; padding:5px;}
#footer .footer_info span:nth-child(6):after {display:none;}
#footer .footer_info span a {color:#fff;}
#footer .footer_info > a {color:#fff; display:inline-block; margin-left:20px; padding:5px 10px; border:1px solid rgb(255 255 255 / 35%); border-radius:3px; font-size:12px; font-weight:300;}


/* **************************************** *
 * sub_page
 * **************************************** */

/*sub_top*/
.sub_top {height:350px; overflow:hidden; position:relative; transition: 0.3s; width:100%;}
.sub_top img {position:absolute; top:50%; left:50%; transform: translate(-50%, -50%); z-index:-1; object-fit: cover; width:100%; height:100%;}
.sub_top h2 {text-align: center; color:#fff; font-size:50px; position:absolute; top:50%; left:50%; transform: translate(-50%, -50%);}
.sub_content .content {padding:50px 0 0;}
.section {padding:80px 0;}
.section h3 {position:relative; width:1180px; margin:0 auto; display:block; font-size:38px; font-weight: 700; padding-bottom:10px; margin-bottom:60px; text-align:center;}
.section h3:after {content:''; position:absolute; width:70px; height:3px; background:#0048ec; bottom:0; left:50%;transform: translateX(-50%);}

.lnb {border-bottom:1px solid #dcdcdc; background:#2255a5;}
.lnb > ul {width:1180px; margin:0 auto; display:table; table-layout: fixed; border:1px solid #4972b2; border-width: 0 1px}
.lnb > ul > li{position:relative; display:table-cell; text-align: center; font-size:16px; border-right:1px solid #4972b2; vertical-align: middle;}
.lnb > ul > li:last-child {border-right:none;}
.lnb > ul > li > a {color:#fff; font-weight:500; width:100%; display:inline-block; padding:20px 0;}
.lnb > ul > li > a:hover {color:#ebff00;}
.lnb > ul > li .deps3 {display:none; position:absolute; width:100%; height:0; overflow:hidden; background:#184790; top:100%; z-index:9999;height:auto;}
.lnb > ul > li.on .deps3 {display:block;}
.lnb > ul > li .deps3 > li {display:block; border-bottom:1px solid #3a62a1}
.lnb > ul > li .deps3 a {display:block; color:#fff; padding:20px 0;}
.lnb > ul > li .deps3 a:hover {color:#ebff00;}

/* 회사소개 */
.section .ceo_img {position:absolute; left:0; width:50%; height:600px; background:url(../image/sub/bg_ceo.jpg)no-repeat bottom center; background-size:cover;}
.ceo_intro .section_cont {height:700px;}
.ceo_intro .ceo_text {position:absolute; right:0; margin-top:70px; width:50%; background:#f3f3f3; height:600px; padding:85px 0 0 60px; font-size:20px; line-height:2em; font-weight:300; letter-spacing: -0.5px;}
.ceo_intro .ceo_text em {font-weight:700; font-size:25px;}
.ceo_intro .ceo_text p img {display:block; margin-top:50px;}

.vision .section_cont {width:1180px; margin:0 auto;}
.vision .section_cont p {position:relative; text-align: center; margin:20px 0 50px;font-size:20px; font-weight: 300;}
.vision .section_cont p em {font-weight:700;}
.vision .section_cont p:before {content:'\f10d'; position:absolute; left:50%; font-size:50px; color:#e5e5e5; margin-left:-290px; top:0px; font-family:"FontAwesome"; font-size:30px;}
.vision .section_cont p:after {content:'\f10e'; position:absolute; left:50%; font-size:50px; color:#e5e5e5; margin-left:260px; top:20px; font-family:"FontAwesome"; font-size:30px;}
.vision .section_cont .img {display:table; width:auto; width:1180px;}
.vision .section_cont .img span {display:table-cell; text-align: center;}


.section.map {padding-bottom:0;}
.map .section_cont ul {width:1180px; margin:0 auto 40px;}
.map .section_cont ul:after {content:''; display:block; clear:both;}
.map .section_cont ul li:nth-child(1) {float:left; width:45%;}
.map .section_cont ul li:nth-child(2) {float:left; width:35%;}
.map .section_cont ul li:nth-child(3) {float:left; width:20%;}
.map .section_cont ul li span {display:block; font-size:16px;}
.map .section_cont ul li span:last-child {display:block; font-size:18px; font-weight:700; margin-top:10px;}
.map .section_cont ul li i {float:left; width:64px; height:64px; background:#e1e5ea; border-radius: 50%; margin-right:20px; text-align:center; line-height:64px; font-size:25px;}
.map .section_cont ul li:last-child i {background:#ff1b1b; color:#fff;}

/* 제품소개 */
.product_text {padding:100px 0 90px;}
.product_text .text_type1 {text-align:center; font-size:50px; font-weight:700; margin-bottom:20px; line-height:1.3em}
.product_text p em {font-weight:300;}
.product_text .text_type2 {text-align:center; font-size:18px; font-weight:300;}
.section_w100 {width:100%; height:580px; overflow:hidden;}
.section_w100 img {width:100%; height:100%; object-fit: cover;}
.info_w50 {width:1180px; margin:0 auto 70px;}
.info_w50:after {content:''; display:block; clear:both;}
.info_w50 > div {float:left; width:50%; height:380px;}
.info_w50 .img {overflow:hidden;}
.info_w50 .img img {width:100%; height:100%; object-fit:scale-down;}
.info_w50 .text {display:table; padding:0 50px;}
.info_w50 .text p {display:table-cell; vertical-align: middle; font-size:25px; font-weight:700;}
.info_right .text {text-align: right;}
.info_center {width:100%; background:#f3f4f7; padding:50px 0 100px;}
.info_center ul {width:1180px; margin:0 auto;}
.info_center ul:after {content:''; display:block; clear:both;}
.info_center ul li {float:left; width:calc(100% / 3); text-align: center; min-height:500px;}
.info_center ul li img {width:292px; height:292px; display:block; margin:0 auto;}
.info_center ul li span {display:block; font-size:20px; font-weight:700; margin:20px 0 10px;}
.info_center ul li p {font-size:18px; width:250px; margin:0 auto;}
.section.update {text-align: center; padding:150px 0;}
.section.update p {font-size:18px; margin-top:40px;}
.section.update p em {font-size:50px; display:block; font-weight:700; padding-bottom:20px; color:#222;}

/* table */
.search_area {width:1180px; margin:50px auto;}
.search_area .search_wrap {background:#f1f1f1; padding:20px; text-align:center;}
.search_area select, input {height:40px; padding:0 10px; line-height:40px; border:1px solid #999;}
.search_area .sc_sort {display:inline-block;}
.search_area .sc_sort select {min-width:100px;}
.search_area .sc_inp {display:inline-block;}
.search_area .sc_inp a {display:inline-block; line-height:40px; height:40px; background:#0578cc; color:#fff; padding:0 25px;}
.w300 {width:300px;}
.t_title {text-align:left !important;;}

.board {width:1180px; margin:0 auto;}
.board table {width:100%; border-top:2px solid #000;}
.table_list table tr th {border:1px solid #000; border-width:1px 0; height:50px;}
.table_list table tr td {border:1px solid #ccc; border-width:1px 0; height:50px; text-align:center;}
.table_list table tr td:hover a {text-decoration: underline;}

.table_view table tr th {border:1px solid #000; border-width:1px 0; padding:20px 20px 20px 40px; text-align:left; font-weight:normal; font-size:20px;}
.table_view table tr td {border:1px solid #ccc; border-width:1px 0; height:50px; text-align:left;  padding:40px 20px 40px 40px; font-size:16px;}
.table_view table tr th .tmi {font-size:14px; margin-top:20px; padding-top:10px; border-top:1px dotted #dcdcdc; font-weight:300;}
.table_view table tr th .tmi span {margin-right:30px;}
.table_view table tr th .tmi .file a {color:#0258ce; font-weight:bold;}
.table_view table tr th .tmi .file:hover a {text-decoration: underline;}


.table_write table {width:100%;}
.table_write table tr th, 
.table_write table tr td {border:1px solid #dcdcdc; border-width:1px 0; padding:20px; text-align:left; font-weight:normal;}
.col_title {background:#edf0f4; text-align: center !important;}

.btn_area {width:1180px; margin:30px auto 50px; text-align: right;}
.btn_area a {text-align: center; display:inline-block; padding:10px 40px; background:#033c65; color:#fff !important;}

/* 관리자로그인 */
.login_area {width: 500px; margin: 20px auto 80px; border: 2px dotted #999; padding: 50px; background: #eceff1; border-radius: 20px;}
.login_area p {text-align: center; font-size:18px;}
.login_area form {margin-top:30px;}
.login_area form > div input {display:block; width:100%; margin-bottom:15px; height:50px;}
.login_area form label {margin-top:30px;}
.login_area form label input {display:inline-block; height:auto; }
.login_area a {display:block; width:100%; padding:15px 0; background:#0a2a5d; color:#fff; margin-top:30px; text-align: center;}

/* 페이징 */
.paging {text-align:center; padding:50px 0 70px;}
.paging a {display:inline-block; width:30px; height:30px; line-height:30px;  vertical-align: middle; margin:0 3px;}
.paging .num:hover, .paging .num.on {border-bottom:2px solid #0043ad; color:#0043ad;}
.paging .btn {background: url('../image/btn_pagination.png')no-repeat;}
.paging .btn.next {background-position:-81px -4px;}
.paging .btn.prev {background-position:-42px -4px;}
.paging .btn.first {background-position:-4px -4px;}
.paging .btn.last {background-position:-119px -4px;}

/* 다운로드 버튼 */
.download_area {width:100%; text-align:center; padding:100px 0 50px;}
.download_area:before {content:''; display:block; width:1px; height:70px; background:#000; margin:0 auto 20px;}
.download_area h4 {font-size:25px;}
.download_area span {font-size:18px; color:#777}
.download_area a {display:block; padding:15px 0; width:150px; margin:30px auto 0; background:#333; color:#fff; font-size:16px;}
.download_area a:hover {background:#000; transition:0.3s;}
.download_area a:before {content:'\f0c5'; font-family:"FontAwesome"; display:inline-block; margin-right:10px; font-size:18px;}



@media all and (max-width:1180px) {
    /* header */
    #header {width:100%;}
    #header .logo {left:35px;}
    #gnb ul li {padding:0 30px;}
    
    /* main */
    .main_content .content {width:100%;}
    
    /* sub */
    .section h3 {width:100%;}
    .section .ceo_img {position:relative; width:100%;}
    .ceo_intro .section_cont {height:auto;}
    .ceo_intro .ceo_text {position: relative; width:100%; margin-top:0;}
    .vision .section_cont {width:100%;}
    .vision .section_cont img {width:100%; padding:0 20px}
    .map .section_cont ul {width:100%; padding:0 30px;}
    .map .section_cont ul li {display:block; clear:both; width:100% !important; padding:20px 0;}
    .lnb > ul {width:100%;}
    .info_w50 {width:100%;}
    .info_center ul {width:100%;}
    .info_center ul li {padding:20px;}
    .info_center ul li img {width:100%; height:100%;}
    .info_center ul li p {width:100%;}
    .product_text .text_type1 {font-size:30px;}
    .btn_area {width:100%; padding:0 20px;}
    .product_text {padding:30px 0 50px;}
    
    /* table */
    .search_area {width:100%; margin:0 0 50px; padding:0 20px;}
    .board {width:100%; padding:0 20px;}
    .table_list table tr th,
    .table_list table tr td {padding:10px;}
    .table_view table tr td, 
    .table_view table tr th {padding:20px 10px;}
    .table_view table tr td img {max-width:100% !important; height:auto !important;}
    .table_view table tr td video {max-width:100% !important; height:auto !important;}
    
    /* footer */
    #footer .inner {width:100%;}
    #footer h2 a {background-position:20px 0;}
}

@media all and (max-width:768px) {
    /* header */
    #header {position:fixed; top:0; left:0; height:60px; z-index:99999; background:#fff;}
    #header .logo a {width:164px; height:28px;}
    #gnb {display:none;}
    #m_gnb {display:block;}
    #m_gnb h1 {position:absolute; left:30px; top:15px;}
    #m_gnb h1 a{text-indent:-9999px; display:block; width:170px; height:43px; background:url(../image/logo_W.png)no-repeat 0 0; background-size:contain; transition: 0.3s;}
    #m_gnb .btn_menu {z-index:99998; position:absolute; right:0; width:60px; height:100%;}
    #m_gnb .btn_menu span {position:absolute; width:30px; height:2px; background:#000; transition: 0.3s;  transform: translate(-50%);}
    #m_gnb .btn_menu span:nth-child(1) {top:0; left:50%; transform: translate(-50%); width:100%;}
    #m_gnb .btn_menu span:nth-child(2) {top:50%; left:50%; transform: translate(-50%); width:100%;}
    #m_gnb .btn_menu span:nth-child(3) {top:100%; left:50%; transform: translate(-50%); width:100%;}
    #m_gnb.on .btn_menu span {background:#fff;}
    #m_gnb.on .btn_menu span:nth-child(1) {top:50%; left:0%; transform: rotate(45deg); width:100%;}
    #m_gnb.on .btn_menu span:nth-child(2) {display:none;}
    #m_gnb.on .btn_menu span:nth-child(3) {top:50%; left:0%; transform: rotate(-45deg); width:100%;}
    /*#m_gnb .btn_menu:hover span:nth-child(2) {width:60%;}*/
    #m_gnb .btn_menu > div {position: absolute; width:40%; height:30%; top:50%; left:50%; transform: translate(-50%, -50%);}
    #m_gnb .gnb {width:100%; background:rgb(20 22 24 / 98%); z-index:9999; position:fixed; right:-100%; height:100%; font-weight:500; transition:0.5s;}
    #m_gnb.on .gnb {position:fixed; right:0;}
    #m_gnb.on .gnb ul {position:absolute; top:30%; width:100%; transform: translateY(-50%);}
    #m_gnb.on .gnb ul li {color:#fff; display:block; text-align:center;}
    #m_gnb.on .gnb ul li a {color:#fff; display:block; padding:20px 0; font-size:25px;}
    
    /* main */
    .main_visual .visual_list {height:450px;}
    .main_visual .visual_list .text {font-size:16px;}
    .main_visual .visual_list .text span {font-size:2em;}
    .main_content .content h2 {margin-bottom:50px; font-size:2em}
    .main_content .content h2:after {top:55px}
    .main_content .content {padding:60px 0;}
    .main_content .content ul li a {padding-top:200px; font-size:1.5em}
    .main_content .content ul li a:before {width:170px; height:170px;}
    .main_content .content ul li:after {display:none;}
    .slick-prev, .slick-next {display:none !important;}

    #container, .sub_content {margin-top:60px;}
    
    /*sub*/
    .sub_top {height:210px;}
    .sub_top h2 {font-size:32px;}
    .section h3 {font-size:28px;}
    .product_text {padding:50px 0;}
    .product_text .text_type1 {padding:0 7%; font-size:30px;}
    .product_text .text_type2 {font-size:16px; padding:0 7%;}
    .section_w100 {height:300px;}
    .info_w50 > div {width:100%;}
    .info_w50 .text p {text-align: center; font-size:1.2em;}
    .info_w50 .img {padding:20px 30px;}
    .info_center ul li {width:100%; padding-bottom:50px;}
    .info_center ul li p {font-size:16px;}
    .info_center ul li img {width:70%;}
    .info_right {display: flex; flex-direction:column; height:400px;}
    .info_left {display: flex; flex-direction:column; height:400px;}
    .info_right > div:nth-child(1) {order:2;}
    .info_right > div:nth-child(2) {order:1;}
    .vision .section_cont .img {width:100%;}
    .vision .section_cont .img span {display:block; padding:30px;}
    .section.update p {font-size:14px; letter-spacing: -1px; padding:0 30px}
    .section.update p em {font-size:32px;}
    .btn_area a {padding:7px 20px;}
    
    /* table */
    .search_area {width:100%; margin:0 0 50px; padding:0 20px;}
    .table_warp {width:100%; padding:0 20px;}
    .table_warp table tr th {border:1px solid #000; border-width:1px 0; padding:10px;}
    .table_warp table tr td {border:1px solid #ccc; border-width:1px 0; text-align:center; padding:10px;}
    .tblind {display:none;}
    
    /* footer */
    #footer {padding:20px 0;}
    #footer h2 {display:none;}
    #footer .footer_info {float:none; width:100%; text-align: center;padding:0 3%; font-size:0.8em}
    #footer .footer_info > a {display:block; width:100px; margin:10px auto; font-size:0.8em;}
    .aos-animate, aos-init {transform: none !important; transition-property:none !important;}
}
@media all and (max-width:570px) {
    .section.update p {font-size:14px;}
    .section.update p em {font-size:32px;}
    .map .section_cont ul li span:last-child {font-size:14px;}
    
    /* table */
    .search_area .sc_sort {display:block;}
    .search_area .sc_sort select {min-width:100%;}
    .search_area .sc_inp {display:block;}
    .search_area .sc_inp input {width:100%; margin:10px 0;}
    .search_area .sc_inp a {display:block; height:40px; width:100%; background:#0578cc; color:#fff; padding:0 25px;}
    
    /* 관리자로그인 */
    .login_area {width: 90%; margin: 20px 5% 80px; padding: 30px;}
    .login_area p {font-size:16px;}
}

@media all and (max-width:480px) {
    /* header */
    #header .logo {left:20px;}
    
    /* main */
    .main_content .content ul li {display:block; margin:40px 0;}
    .main_visual .visual_list .text {padding:0 20px;}
    .main_visual .visual_list .text span {font-size:1.3em;}
    .main_visual .visual_list .text p {font-size:0.75em;}
    
    /* sub */
    .lnb > ul > li {display:block; border-bottom:1px solid rgba(255, 255, 255, 0.19); font-size:14px;}
    .lnb > ul > li a {padding:12px 0;}
    .lnb > ul > li .deps3 {position:relative; background:#0f346d; padding:10px 0;}
    .lnb > ul > li .deps3 > li {border:none;}
    .lnb > ul > li .deps3 a {padding:10px 0;}
    .ceo_intro .ceo_text {padding:15% 7%; height:auto; font-size:16px; line-height:2em;}
    .ceo_intro .ceo_text em {font-size:20px;}
    .ceo_intro .ceo_text p img {margin-top:26px;}
    .vision .section_cont p {font-size:18px;}
    .section {padding:50px 0;}
    .section .ceo_img {height:250px;}
    .vision .section_cont p {padding:0 7%;}
    
    /*table*/
    .table_write tr > td:first-child {display:none;}
    .table_write table tr th, .table_write table tr td {padding:20px 10px}
    .table_view table tr th .tmi .file {display:block; margin-top:10px;}
};