@charset "utf-8";
/* 공통 */
.subtxt { font-size: var(--font-size18); line-height: 1.77em; }

/* 게시판 공통 */
.noti-list { border-top: 2px solid #686868;}
.noti-list li { border-bottom: 1px solid #ddd;}
.noti-list li a { display: flex; padding: 40px; position: relative; align-items: center; }
.noti-list li .num { width: 56px; height: 56px; border-radius: 56px; display: flex; align-items: center; justify-content: center; margin-right: 40px; color: var(--color-primary); font-weight: 700; line-height: 1em; }
.noti-list li .num.label { background: var(--color-primary); color: #fff; }
.noti-list li .info { flex: 1 1 auto; min-width: 0; width: 1%; padding-right: 40px; }
.noti-list li .info .tit { line-height: 1.2em; font-size: var(--font-size20); font-weight: 600; color: #222; margin-bottom: 10px; overflow:hidden; text-overflow:ellipsis;  white-space:normal; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; transition: .2s;}
.noti-list li .info .tit img {vertical-align:middle; margin:-.2em 4px 0;}
.noti-list li .info .etc { display: flex; flex-wrap: wrap; gap: 7px 20px;}
.noti-list li .info .etc span { font-size: 14px; font-weight: 300; color: #505050; line-height: 1.3em; }
.noti-list li a::after { content: "→"; position: absolute; right: 40px; top: 50%; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); font-size: 30px; font-weight: 700; color: #777; line-height: 1em; transition: .2s;}
.noti-list li a:hover { background: #F3F8FB;}
.noti-list li a:hover .info .tit { color: var(--color-primary);}
.noti-list li a:hover::after { color: var(--color-primary);}

/* 대표 인사말 */
.gt-tit { font-size: var(--font-size48); line-height: 1.29em; font-weight: 700; color: #2c2c2c; margin: 120px 0 100px;}
.gt-tit span { color: var(--color-primary); }
.gt img { border-radius: 16px; }
.gt .flex { display: flex; align-items: flex-start; margin-top: 80px; }
.gt .tit { width: 34.5%; font-size: var(--font-size32); line-height: 1.43em; font-weight: 600; color: #2c2c2c; padding-right: 20px; }
.gt .tit span { color: var(--color-secondary);}
.gt .info { width: 65.5%; }
.gt .info p { margin-bottom: 33px; }
.gt .info p:last-child { margin-bottom: 0; }
.gt .info .sign { display: flex; align-items: center; margin-top: 16px; gap: 16px; }
.gt .info .sign strong { font-weight: 600; }

/* 회사 연혁 */
.hst-bg { height: 480px; display: flex; text-align: center; justify-content: center; align-items: center; padding: 10px; color: #fff; background-repeat: no-repeat; background-position: center; background-size: cover;}
.hst-bg.bg1 { background-image: url(../images/sub/hst-img1.jpg);}
.hst-bg.bg2 { background-image: url(../images/sub/hst-img2.jpg);}
.hst-bg.bg3 { background-image: url(../images/sub/hst-img3.jpg);}
.hst-bg h3 { font-size: var(--font-size40); line-height: 1.4em; font-weight: 700; color: rgba(255,255,255,0.8);}
.hst-bg h3 strong { color: #fff; } 
.hst { margin: 120px 0 0; display: flex; position: relative; }
.hst::before { content: ""; position: absolute; left: 31%; width: 1px; height: 100%; z-index: -1; background: #dfdfdf; top: 30px; }
.hst .left { width: 31%; }
.hst .info { width: 69%; }
.hst .left .year { font-size: var(--font-size48); line-height: 1.29em; font-weight: 700; color: var(--color-primary); margin-bottom: 20px; }
.hst .left h4 { font-size: var(--font-size24); line-height: 1.5em; font-weight: 600; color: #2c2c2c; }
.hst .info .group { display: flex; margin-bottom: 60px; position: relative; padding-left: 28px; padding-top: 11px; }
.hst .info .group:last-child { margin-bottom: 120px; }
.hst .info .group.mg { margin-bottom: 0; }
.hst .info .group::before { content: ""; position: absolute; left: -7px; width: 16px; height: 16px; border-radius: 16px; border: 5px solid #ddd; top: 22px; background: #fff; }
.hst .info .group.bg::before { border-color: var(--color-primary); }
.hst .info .group .year { width: 88px; font-size: var(--font-size24); line-height: 1.58em; color: #2c2c2c; font-weight: 600; }
.hst .info .group .txt { flex: 1 1 auto; min-width: 0; width: 1%; font-size: var(--font-size20); line-height: 1.7em; padding-top: 2px; }
.hst .info .group .txt p { margin-bottom: 24px; }
.hst .info .group .hst-txt span { display: block; margin-bottom: 8px; line-height: 1.77em; font-size: var(--font-size18); color: #999; position: relative; padding-left: 10px; }
.hst .info .group .hst-txt span:last-child { margin-bottom: 0; }
.hst .info .group .hst-txt span::before { content: ""; position: absolute; left: 0; width: 5px; height: 1px; background: #999; top: 15px; }
.organ { text-align: center; }

/* 오시는 길 */
.map iframe { width: 100%; height: 650px; border-radius: 16px; }
.lct { margin-top: 60px; }
.lct h4 { color: var(--color-primary); font-size: var(--font-size20); line-height: 1.7em; font-weight: 600; }
.lct h3 { color: #2c2c2c; font-size: var(--font-size28); line-height: 1.5em; font-weight: 600; margin: 24px 0 16px;} 
.lct .addr span { display: inline-block; font-size: var(--font-size18); line-height: 1.77em; padding-right: 40px; }
.lct .addr span:last-child { padding-right: 0; }
.lct ul { display: flex; gap: 10px 120px; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; margin-top: 40px; flex-wrap: wrap;}
.lct ul li { display: flex; align-items: center; padding: 24px 0;}
.lct ul li .tit { width: 100px; display: flex; align-items: center;}
.lct ul li .tit strong { padding-left: 16px; display: inline-block; flex: 1 1 auto; min-width: 0; width: 1%; color: #2c2c2c; font-size: var(--font-size18); font-weight: 600; }
.lct ul li .txt { font-size: var(--font-size18); line-height: 1.44em; }
[lang="zh-CN"] .lct ul li .tit { width: 120px; }

/* 제품 */
.product { display: flex; align-items: flex-start;}
.product .contents { flex: 1 1 auto; min-width: 0; width: 1%; }
.product .tab-menu { width: 264px; margin-right: 70px; border-radius: 8px; overflow: hidden; border: 1px solid #eaeaea;}
.product .tab-menu li a { display: block; padding: 26px 24px; background: #fafafa; color: #999; font-size: var(--font-size18); line-height: 1.77em; transition: .3s; font-weight: 600; position: relative; padding-right: 45px; border-bottom: 1px solid #eaeaea; }
.product .tab-menu li:last-child a{ border: none; }
.product .tab-menu li a::after { content: ""; position: absolute; right: 24px; width: 16px; height: 16px; top: 0; bottom: 0; margin: auto; background: url(../images/sub/pd-arrow.png) center no-repeat; background-size: contain; transition: .2s;}
.product .tab-menu li.active a { background: var(--color-primary); color: #fff; border-color: var(--color-primary);}
.product .tab-menu li.active a::after { background-image: url(../images/sub/pd-arrow-w.png);}
.product .tab-menu li a:hover { background: var(--color-primary); color: #fff; border-color: var(--color-primary);}
.product .tab-menu li a:hover::after { background-image: url(../images/sub/pd-arrow-w.png);}
.product-title { font-size: var(--font-size36); line-height: 1.27em; color: #2c2c2c; font-weight: 600; margin-bottom: 40px; }

/* 제품 리스트 */
.product-list { padding: 40px 0; border-top: 2px solid #686868;}
.product-list ul {display:flex; flex-wrap:wrap; gap: 50px 24px;}
.product-list ul li { width: calc(100%/3 - 16px); text-align:center;}
.product-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676;}
.product-list ul li a {display:block;}
.product-list ul li .thumb {position:relative; padding-bottom:100%; margin-bottom:20px; overflow:hidden;}
.product-list ul li .thumb img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: contain;}
.product-list ul li .thumb:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ddd;}
.product-list ul li .tit {color:#2c2c2c; font-size:var(--font-size20); line-height:1.7em; font-weight: 600; }

/* 제품 상세 */
.product-summary {display:flex; align-items: flex-start;}
.product-image { width: 48%; }
.product-image .img {position:relative; padding-bottom:100%; overflow:hidden;}
.product-image .img img { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); object-fit: contain;}
.pd-board-swiper { width: 100%; margin-bottom: 23px; }
.pd-board-swiper::after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ddd;}
.pd-thumb-swiper { width: 100%; padding: 0 1px; }
.pd-thumb-swiper .swiper-slide { cursor: pointer;}
.pd-thumb-swiper .img:after {content:""; position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #ddd;}
.pd-pagi { display: flex; position: relative; margin-top: 30px; justify-content: center; align-items: center;}
.pd-prev::after, .pd-next::after { display: none; }
.pd-prev, .pd-next { position: relative; top: auto; margin-top: 0; width: 16px; height: 13px; background-repeat: no-repeat; background-position: center; background-size: contain; }
.pd-prev { background-image: url(../images/sub/pd-prev.png); left: auto;}
.pd-next { background-image: url(../images/sub/pd-next.png); left: auto; right: auto;}
.pd-pagi .swiper-pagination { position: relative; top: auto; width: auto; margin: 0 10px; bottom: 1px;}
.pd-pagi .swiper-pagination-bullet { width: 9px; height: 9px; border-radius: 9px; background: #b8b8b8; opacity: 1; margin: 0 15px !important ;}
.pd-pagi .swiper-pagination-bullet-active { background: var(--color-primary);}
.product-info { width: 52%; padding-left: 70px; }
.product-info .tit {color:#242424; font-size:var(--font-size34); line-height:1.41em;}
.product-info .en-tit { font-size: var(--font-size18); line-height: 1.77em; color: #999; font-weight: 600; margin: 4px 0 50px;}
.product-info .txt {color:#505050;}
.product-info ul li { display: flex; line-height: 1.77em; margin-bottom: 15px;}
.product-info ul li:last-child { margin-bottom: 0; }
.product-info ul li .tt { width: 105px; color: #878787; font-weight: 600; }
.product-info ul li .txt { flex: 1 1 auto; min-width: 0; width: 1%; }
.product-detail { margin: 60px 0;}
.product-detail .tit { padding-bottom: 38px; font-size: var(--font-size28); font-weight: 600; line-height: 1.5em; color: #242424; position: relative; }
.product-detail .tit::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 80px; height: 1px; background: var(--color-primary); }
.product-detail .cnt { padding: 40px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; line-height: 1.87em; }

/* 카탈로그 */
.catalog .col { margin-bottom: 24px; }
.catalog .col:last-child { margin-bottom: 0; }
.catalog .col a { display: flex; justify-content: space-between; align-items: center; padding: 22px 30px; border-radius: 8px; border: 1px solid #dfdfdf;}
.catalog .col .tit { display: flex; align-items: center; flex: 1 1 auto; min-width: 0; width: 1%; }
.catalog .col .tit span { flex: 1 1 auto; min-width: 0; width: 1%; font-size: var(--font-size18); line-height: 1.77em; font-weight: 500; padding-left: 20px; overflow:hidden; text-overflow:ellipsis; word-break:break-all; white-space:normal; display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; padding-right: 10px; }
.catalog .col .btns { width: 140px; height: 56px; border-radius: 8px; background: #fff; border: 1px solid #eee; display: flex; align-items: center; padding-left: 20px; position: relative; color: #1097F2; font-weight: 500; line-height: 1em; }
.catalog .col .btns::after { content: ""; position: absolute; right: 20px; top: 0; bottom: 0; margin: auto; width: 13px; height: 19px; background: url(../images/sub/download.png) center no-repeat; background-size: contain; }