@charset "utf-8";

/*-------------------------------------------------------------------
	@ Layout
-------------------------------------------------------------------*/
/* header */
header{display: flex; align-items: center; position: fixed; left: 0; top: 0; width: 100%; height: 100px; border-bottom: 1px solid #EBEBEB; background: #fff; z-index: 9000;}
header > div{display: flex; justify-content: space-between; align-items: center; width: 90%; max-width: 1600px; min-width: 1300px;  margin: 0 auto;}
header h1 a{display: block; width: 220px; height: 45px; background: url('../../images/common/logo.svg') left center no-repeat; text-indent: -9999em;}
header h2 a{display: block; width: 93px; height: 35px; background: url('../../images/common/logo_moin.svg') left center no-repeat; text-indent: -9999em;}
header nav{margin-left: auto;}
header .nav{display: flex; gap: 100px;}
header .nav li a{display: block; color: #222; font-family: Roboto; font-size: 20px; font-weight: 500; line-height: 45px;}
header .nav li a.on{color: #ED1C24; font-weight: 500;}
header .lang{display: flex; margin-left: 120px;}
header .lang li{position: relative;}
header .lang li::after{position: absolute; left: 0; top: 50%; width: 1px; height: 12px; margin-top: -6px; background: #222; content: "";}
header .lang li:first-child::after{display: none;}
header .lang li a{display: block; padding: 0 15px; color: #222; font-family: Roboto; font-size: 14px; font-weight: 600; line-height: 45px;}
header .lang li:first-child a{padding-left: 0;}
header .lang li:last-child a{padding-right: 0;}
body.page-main header{position: absolute; border: 0; background: none;}
body.page-main header .nav li a{color: #fff;}
body.page-main header .lang li::after{background: #fff;}
body.page-main header .lang li a{color: #fff;}

/* main */
main{position: relative;}

/* footer */
footer{position: relative; background: #fff; z-index: 9000;}
footer > div{display: flex; align-items: center; justify-content: space-between; width: 90%; max-width: 1600px;  height: 60px; margin: 0 auto;}
footer .copy{display: flex; gap: 10px;}
footer .copy p{color: #676767; font-family: Roboto; font-size: 13px; font-weight: 500;}
footer .copy .btn-contact{color: #010101; font-family: Roboto; font-size: 13px; font-weight: 500; text-decoration-line: underline; text-decoration-style: solid; text-decoration-skip-ink: auto; text-decoration-thickness: auto; text-underline-offset: auto; text-underline-position: from-font;}
footer .link a{display: flex; align-items: center; gap: 10px; padding-right: 24px; background: url('../../images/common/ico_link_arw.svg') right center no-repeat;}


/*-------------------------------------------------------------------
	@ Componets
-------------------------------------------------------------------*/
/* pagination */
.pagination{margin-top: 40px; text-align: center;}
.pagination ul{display: inline-flex; align-items: center; gap: 10px;}
.pagination li a{display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; font-size: 16px; color: #666; border-radius: 10px;}
.pagination li a.on {background: #666; color: #fff; font-weight: 700;}
.pagination li a.first{min-width: 20px; margin-right: 5px; background: url('../../images/common/ico_pagi_first.svg') center no-repeat; text-indent: -9999em;}
.pagination li a.prev{min-width: 20px; background: url('../../images/common/ico_pagi_prev.svg') center no-repeat; text-indent: -9999em;}
.pagination li a.next{min-width: 20px; background: url('../../images/common/ico_pagi_next.svg') center no-repeat; text-indent: -9999em;}
.pagination li a.last{min-width: 20px; margin-left: 5px; background: url('../../images/common/ico_pagi_last.svg') center no-repeat; text-indent: -9999em;}


/*-------------------------------------------------------------------
	@ Pages
-------------------------------------------------------------------*/
/* main */
.main .visual{display: flex; align-items: center; position: relative; height: calc(100vh - 60px); min-height: 800px; background: url('../../images/main/bg_visual.jpg') center / cover no-repeat;}
.main .visual > div{display: flex; justify-content: space-between; align-items: center; position: relative; width: 90%; max-width: 1600px;  height: 100vh - 160px; padding: 160px 0 60px; margin: 0 auto; box-sizing: border-box;}
.main .visual .txt strong{display: block; color: #FFF; font-size: 72px; font-weight: 700; line-height: 110%;}
.main .visual .txt p{margin-top: 30px; color: #FFF; font-size: 22px; font-weight: 500; line-height: 150%;}
.main .visual .quick > li{width: 440px; height: 220px; border-radius: 20px; border: 1px solid rgba(255, 255, 255, 0.40); background: rgba(255, 255, 255, 0.20); backdrop-filter: blur(5px); box-sizing: border-box;}
.main .visual .quick > li + li{margin-top: 12px;}
.main .visual .quick > li.item3{border: 1px solid rgba(34, 34, 34, 0.40); background: rgba(34, 34, 34, 0.60);}
.main .visual .quick > li.item1 .box{background: url('../../images/main/ico_company.svg') right 30px top 25px no-repeat;}
.main .visual .quick > li.item2 .box{background: url('../../images/main/ico_product.svg') right 30px top 25px no-repeat;}
.main .visual .quick > li.item3 .box{background: url('../../images/main/ico_news.svg') right 30px top 25px no-repeat;}
.main .visual .quick > li .box{display: block; position: relative; width: 100%; height: 100%; padding: 40px; box-sizing: border-box;}
.main .visual .quick > li .box strong{display: block; color: #FFF; font-size: 26px; font-weight: 700; line-height: 110%;}
.main .visual .quick > li .box p{margin-top: 40px; color: #FFF; font-size: 18px; font-weight: 600; line-height: 150%;}
.main .visual .quick > li .box .btn-more{position: absolute; right: 10px; bottom: 10px; width: 58px; aspect-ratio: 1/1; background: url('../../images/main/ico_more.svg') no-repeat; text-indent: -9999em;}
.main .visual .quick > li .box .slide{margin-top: 40px; overflow: hidden;}
.main .visual .quick > li .box .slide span.tit{display: block; color: #FFF; font-size: 20px; font-weight: 700; line-height: 110%;}
.main .visual .quick > li .box .slide span.date{display: block; margin-top: 8px; color: #FFF; font-size: 14px; line-height: 110%; opacity: 0.5;}
.main .visual .quick > li .box .slide .swiper-pagination{position: absolute; left: 40px; bottom: 33px; width: auto; padding: 0; font-size: 0; line-height: 1; text-align: left;}
.main .visual .quick > li .box .slide .swiper-pagination-bullet{width: 10px; height: 10px; background: url('../../images/main/ico_pagi.svg') center no-repeat; opacity: 0.4; margin: 0 3px; transition: opacity 0.5s ease;}
.main .visual .quick > li .box .slide .swiper-pagination-bullet-active{opacity: 1;}

/* sub */
.sub{padding: 200px 0 140px;}
.sub > div{width: 90%; max-width: 1600px; margin: 0 auto;}
.sub .page-head{display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 30px;}
.sub .page-head h2{display: block; color: #000; font-size: 70px; font-weight: 700;}
.sub .page-head .breadcrumb{display: flex; align-items: center;}
.sub .page-head .breadcrumb li{display: block; padding-right: 20px; margin-right: 15px; background: url('../../images/common/ico_breadcrumb.svg') right center no-repeat; font-family: Roboto; font-size: 14px; font-weight: 500;}
.sub .page-head .breadcrumb li .home{display: block; width: 24px; height: 24px; background: url('../../images/common/ico_home.svg') no-repeat; text-indent: -9999em;}
.sub .page-head .breadcrumb li:last-child{padding-right: 0; margin-right: 0; background: none;}
.sub .visual{margin: 0 0 80px; border-radius: 50px; overflow: hidden;}

/* company */
.company .intro{margin-top: 100px;}
.company .intro h3{display: block; font-size: 36px; font-weight: 700;}
.company .intro p{margin-top: 36px; font-size: 22px; font-weight: 500; line-height: 180%;}
.company .workplace{margin-top: 100px;}
.company .workplace h3{display: block; font-size: 36px; font-weight: 700;}
.company .workplace table{width: 100%; margin-top: 30px; border-top: 1px solid #000;}
.company .workplace table th{padding: 34px 0; border-bottom: 1px solid rgba(0, 0, 0, 0.20); color: #868686; font-size: 24px; font-weight: 500; text-align: left;}
.company .workplace table td{padding: 34px 0 34px 55px; border-bottom: 1px solid rgba(0, 0, 0, 0.20); font-size: 24px; font-weight: 500; text-align: left;}
.company .ci{margin-top: 100px;}
.company .ci h3{display: block; font-size: 36px; font-weight: 700;}
.company .ci h3 + p{margin-top: 36px; font-size: 22px; font-weight: 500; line-height: 180%;}
.company .ci .group{display: flex; justify-content: space-between; margin-top: 80px;}
.company .ci .group h4{display: block; color: #222; font-size: 28px; font-weight: 700;}
.company .ci .group .content{width: 85%; max-width: 1357px;}
.company .ci .group .content .box{display: flex; align-items: center; justify-content: center; min-height: 200px; padding: 0 30px; border: 1px solid rgba(0, 0, 0, 0.20); box-sizing: border-box;}
.company .ci .group .content .box img{max-width: 100%;}
.company .ci .group .content .box.symbol{height: auto; padding: 57px 0;}
.company .ci .group .content .box.official + .box.official{margin-top: 20px;}
.company .ci .group .content .signature-list{display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px;}
.company .ci .group .content .txt{margin-top: 36px; color: #222; font-size: 22px; font-weight: 500; line-height: 180%;}
.company .ci .group .content .download-box{display: flex; justify-content: space-between; align-items: center; gap: 20px; height: 100px; padding: 0 30px; margin-top: 35px; background: #F4F4F4;}
.company .ci .group .content .download-box p{color: #666; font-size: 20px; font-weight: 500; line-height: 180%;}
.company .ci .group .content .download-box .btn-area{display: flex; gap: 14px;}
.company .ci .group .content .download-box .btn-area .btn-down{display: flex; align-items: center; justify-content: center; width: 116px; height: 44px; border-radius: 10px 0; border: 1px solid #bdbdbd; background: #fff; box-sizing: border-box;}
.company .ci .group .content .download-box .btn-area .btn-down span{display: block; padding-right: 30px; background: url('../../images/common/ico_down.svg') center right no-repeat; color: #222; font-size: 20px; font-weight: 500;}

/* product */
.product .filter .in{display: flex; gap: 16px;}
.product .filter select{width: 250px; padding: 0 20px; border-radius: 10px; border: 2px solid #E5E5E5; background: url('../../images/common/ico_select.svg') right 10px center no-repeat; color: #666; font-size: 16px; font-weight: 400; line-height: 56px; box-sizing: border-box;}
.product .filter .nice-select{width: 250px; padding: 0 20px; border-radius: 10px; border: 2px solid #E5E5E5; color: #666; font-size: 16px; font-weight: 400; line-height: 56px; box-sizing: border-box;}
.product .filter .nice-select:after{right: 20px; width: 10px; height: 10px; margin-top: -8px; border-color: #999;}
.product .filter .nice-select.open .list{width: calc(100% + 4px); padding: 10px; margin-left: -2px; border-radius: 10px; border: 2px solid #E5E5E5; box-sizing: border-box;}
.product .filter .nice-select .option{padding-left: 10px; color: #666; font-size: 16px; font-weight: 400; box-sizing: border-box;}
.product .filter input[type=text]{height: 60px; padding: 0 20px; border-radius: 10px; border: 2px solid #E5E5E5; color: #666; font-size: 16px; font-weight: 400; box-sizing: border-box;}
.product .filter .range{display: flex; justify-content: space-between; align-items: center; width: 266px; color: #666; font-size: 16px;}
.product .filter .range input[type=text]{width: 120px;}
.product .filter .keyword{width: 380px;}
.product .filter .btn{display: flex; gap: 8px;}
.product .filter .btn-search{width: 60px; height: 60px; border-radius: 100%; background: url('../../images/common/ico_search.svg') center no-repeat #F21B23; text-indent: -9999em;}
.product .filter .btn-reset{width: 60px; height: 60px; border-radius: 100%; background: url('../../images/common/ico_reset.svg') center no-repeat #868686; text-indent: -9999em;}
.product .product-list{width: 100%; table-layout: fixed; margin-top: 36px;}
.product .product-list thead th{height: 60px; background: #eee; border-right: 1px solid #D4D4D4; font-size: 18px; color: #222; font-weight: 700;}
.product .product-list thead th:first-child{border-radius: 10px 0 0 10px;}
.product .product-list thead th:last-child{border-right: 0; border-radius: 0 10px 10px 0;}
.product .product-list tbody td{padding: 15px 10px; border-right: 1px solid #ddd; border-bottom: 1px solid #D4D4D4; color: #666; font-size: 16px; word-break: keep-all; text-align: center; line-height: 22px;}
.product .product-list tbody td:last-child{border-right: 0;}
.product .product-list .btn-rect{display: inline-flex; align-items: center; justify-content: center; width: 62px; height: 30px; margin: 0 5px; border: 1px solid #868686; border-radius: 4px; background: #FFF; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.10); color: #444; font-size: 14px; font-weight: 500; box-sizing: border-box;}
.product .product-list .btn-rect + .btn-rect{margin-top: 5px;}
.product .product-list .btn-circle{display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; margin: 0 5px; border: 1px solid #868686; border-radius: 100%; background: #FFF; box-shadow: 3px 3px 0 0 rgba(0, 0, 0, 0.10); color: #444; font-size: 14px; font-weight: 700; box-sizing: border-box;}

/* news */
.board-list{width: 100%; table-layout: fixed; border-top: 1px solid #000;}
.board-list td{padding: 30px 0; border-bottom: 1px solid #D4D4D4; color: #333; font-size: 18px; font-weight: 500; text-align: center;}
.board-list td.subject{padding-left: 50px; text-align: left;}
.board-view{border-top: 1px solid #000;}
.board-view .head{display: flex; justify-content: space-between; align-items: center; padding: 27px 0 27px 50px; border-bottom: 1px solid #D4D4D4;}
.board-view .head h2{display: block; color: #333; font-size: 24px; font-weight: 600;}
.board-view .head time{display: block; width: 235px; color: #333; font-size: 18px; font-weight: 500; text-align: center;}
.board-view .content{padding: 50px 50px 140px; color: #333; font-size: 18px; font-weight: 500; line-height: 180%;}
.board-view .file{display: flex; align-items: center; padding: 28px 0; border-top: 1px solid #D4D4D4;}
.board-view .file strong{display: block; width: 250px; padding-left: 50px; color: #333; font-size: 18px; font-weight: 500; box-sizing: border-box;}
.board-view .file ul li + li{margin-top: 15px;}
.board-view .file ul li a{display: inline-block; padding-left: 36px; background: url('../../images/common/ico_file.svg') left center no-repeat; line-height: 30px; color: #333; font-size: 18px; font-weight: 600;}
.board-view .btn-area{padding-top: 60px; border-top: 1px solid #D4D4D4; text-align: center;}
.board-view .btn-area .btn-list{display: inline-flex; align-items: center; justify-content: center; height: 98px; padding: 0 120px; border-radius: 20px; background: #ED1C24; color: #FFF; font-size: 32px; font-weight: 800;}

/* contact */
.contact .intro{color: #000; text-align: center; font-size: 24px; font-weight: 500; line-height: 150%;}
.contact .info{padding: 35px 0; margin-top: 30px; border-radius: 10px; border: 1px solid #D4D4D4; text-align: center;}
.contact .info dl{display: inline-flex;}
.contact .info dl dt{color: #868686; font-size: 20px; font-weight: 500;}
.contact .info dl dd{margin-left: 30px; color: #222; font-size: 20px; font-weight: 500;}
.contact .info dl dd + dt{margin-left: 100px;}
.contact .contact-list{margin-top: 60px;}
.contact .contact-list{width: 100%; table-layout: fixed; margin-top: 60px;}
.contact .contact-list thead th{height: 60px; background: #eee; border-right: 1px solid #D4D4D4; font-size: 18px; color: #222; font-weight: 700;}
.contact .contact-list thead th:first-child{border-radius: 10px 0 0 10px;}
.contact .contact-list thead th:last-child{border-right: 0; border-radius: 0 10px 10px 0;}
.contact .contact-list tbody td{padding: 19px 0; border-right: 1px solid #ddd; border-bottom: 1px solid #D4D4D4; color: #666; font-size: 16px; word-break: keep-all; text-align: center; line-height: 22px;}
.contact .contact-list tbody td:last-child{border-right: 0;}