@charset "utf-8";

/* 공통 */
.sub-title-box { margin-bottom: 100px; }
.sub-title-box h4 { margin-bottom: 24px; font-family: var(--play); font-size: var(--font-size18); font-weight: 700; line-height: 1.55em; color: var(--color-primary);}

/* 인사말 */
.gt-bg { height: 100vh; background: url(../images/sub/sub1-1-bg.jpg) center no-repeat; background-size: cover; display: flex; align-items: center; justify-content: center; text-align: center; }
.gt-bg h4 { margin-bottom: 40px; font-family: var(--play); font-size: var(--font-size18); font-weight: 700; line-height: 1.55em; color: var(--color-primary); }
.gt-bg h2 { font-size: var(--font-size48); color: #242424; font-weight: 700; line-height: 1.33em; }
.gt-bg .line { width: 1px; height: 104px; margin: 40px auto; background: #a8a8a8; position: relative; }
.gt-bg .line::before { content: ""; position: absolute; width: 1px; height: 48px; background: var(--Gradient_color, linear-gradient(90deg, #0515D8 0%, #00097D 100%)); top: 0; left: 0; }
.gt-bg p { font-size: var(--font-size18); line-height: 1.77em; font-weight: 500; }
.gt { padding-top: 150px; display: flex; align-items: flex-start;}
.gt .img { width: 45.8%; border-radius: 48px; overflow: hidden;}
.gt .info { width: 54.2%; padding-left: 100px; }
.gt .info h4 { margin-bottom: 40px; font-family: var(--play); font-weight: 700; line-height: 1.62em; color: var(--color-primary); display: flex; align-items: center; }
.gt .info h4 .line { flex: 1 1 auto; min-width: 0; width: 1%; height: 1px; margin-left: 24px; background: #d8dbff; }
.gt .info h3 { font-size: var(--font-size24); font-weight: 600; line-height: 1.66em; color: #242424; margin-bottom: 40px; }
.gt .info .txt p { line-height: 1.87em; margin-bottom: 32px; }
.gt .info .txt p:last-child { margin-bottom: 0; }
.gt .info .sign { display: flex; align-items: center; gap: 16px; margin-top: 40px; }
.gt .info .sign strong { display: inline-block; font-weight: 600; color: #242424; line-height: 1.87em; }

/* 연혁 */
.hst-bg { margin-bottom: 100px; padding: 110px 80px; background: url(../images/sub/hst-img.jpg) center no-repeat; background-size: cover; color: #fff; border-radius: 24px; }
.hst-bg h5 { color: rgba(255,255,255,0.5); font-family: var(--play); font-size: var(--font-size20); font-weight: 700; line-height: 1.5em; margin-bottom: 24px; }
.hst-bg h3 { font-size: var(--font-size30); line-height: 1.4em; font-weight: 700; }
.hst { position: relative; }
.hst::before { content: ""; position: absolute; left: calc(38% + 224px); width: 2px; height: 97%; background: #e6e6e6; top: 25px; }
.hst .group { display: flex; margin-bottom: 150px; }
.hst .period { width: 38%; font-size: var(--font-size48); font-family: var(--play); color: #bdbdbd; font-weight: 700; line-height: 1.2em; transition: .3s;}
.hst .info { width: 62%; }
.hst .info .item { display: flex; margin-bottom: 40px; }
.hst .info .item:last-child { margin-bottom: 0; }
.hst .info .year { width: 225px; color: #242424; font-family: var(--play); font-weight: 700; font-size: var(--font-size32); line-height: 1.81em; position: relative; transition: .3s; }
.hst .info .year::after { content: ""; position: absolute; width: 18px; height: 18px; background: url(../images/sub/dots.png) center no-repeat; background-size: contain; top: 20px; right: -9px; transition: .3s;}
.hst .info ul { flex: 1 1 auto; min-width: 0; width: 1%; padding-left: 95px; padding-top: 15px; }
.hst .info ul li { display: flex; margin-bottom: 24px; }
.hst .info ul li:last-child { margin-bottom: 0; }
.hst .info ul li .month { width: 33px; font-size: var(--font-size18); font-weight: 600; color: #242424; line-height: 1.66em; }
.hst .info ul li .txt { flex: 1 1 auto; min-width: 0; width: 1%; line-height: 1.62em; padding-top: 2px; }
.hst .group .period.active  { color: #242424; }
.hst .info .item.on .year { color: var(--color-primary);}
.hst .info .item.on .year::after { width: 89px; height: 89px; right: -44px; top: 0; background-image: url(../images/sub/dots-on.png); top: -10px; }

/* 오시는길 */
.lct-wrap .item { display: flex; align-items: center; margin-bottom: 72px; }
.lct-wrap .item:last-child { margin-bottom: 0; }
.lct-wrap .item .maps { width: 50%; border-radius: 24px; border: 1px solid #DDD; overflow: hidden; }
.lct-wrap .item .info { width: 50%; padding-left: 64px; }
.lct-wrap .item .info .tt { display: flex; align-items: center; gap: 24px; margin-bottom: 64px; }
.lct-wrap .item .info .tt strong { display: inline-block; font-size: var(--font-size30); line-height: 1.25em; font-weight: 700; color: #242424; }
.lct-wrap .item .info h4 { font-size: var(--font-size24); color: #242424; font-weight: 600; line-height: 1.41em; }
.lct-wrap .item .info .address { margin: 8px 0 32px; }
.lct-wrap .item .info .address span { display: inline-block; padding-right: 30px; font-size: var(--font-size18); color: #999; line-height: 1.55em; }
.lct-wrap .item .info ul li { display: flex; margin-bottom: 16px; font-size: var(--font-size18); line-height: 1.55em; }
.lct-wrap .item .info ul li:last-child { margin-bottom: 0; }
.lct-wrap .item .info ul li .tit { display: inline-block; font-family: var(--play); color: #242424; font-weight: 700; padding-right: 8px; }

/* 제품 - 리스트 */
.pd-tab { display: flex; padding: 10px; border-radius: 8px; background: #F8F8F8; margin-bottom: 100px; gap: 10px; }
.pd-tab li { flex: 1;}
.pd-tab li a { display: flex; height: 60px; border-radius: 8px; align-items: center; justify-content: center; font-size: var(--font-size18); font-weight: 600; line-height: 1.44em; color: #242424; }
.pd-tab li.active a, 
.pd-tab li a:hover { background: var(--color-primary); color: #fff; }
.pd-tit { position: relative; margin-bottom: 40px; font-size: var(--font-size30); line-height: 1.33em; color: #242424; padding-left: 24px; }
.pd-tit::before { content: ""; position: absolute; left: 0; top: 16px; width: 8px; height: 8px; border-radius: 2px; background: var(--Gradient_color, linear-gradient(90deg, #0515D8 0%, #00097D 100%)); }
.product-list { margin-bottom: 40px; }
.product-list ul { display: flex; flex-wrap: wrap; gap: 64px 32px; }
.product-list ul li { width: calc(100%/4 - 24px); }
.product-list ul li.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676; border-top: 1px solid #242424; border-radius: 0; background: transparent; border-bottom: 1px solid #ddd;}
.product-list ul li a { display: block; text-align: center; }
.product-list ul li .thumb { position: relative; padding-bottom: 100%; display: block; overflow: hidden; border-radius: 24px; }
.product-list ul li .thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.product-list ul li .thumb::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 24px; border: 1px solid #ddd; transition: .2s;}
.product-list ul li .ctr { margin: 24px 0 16px; color: #999; font-weight: 500; line-height: 1.62em; }
.product-list ul li .tit { font-size: var(--font-size20); line-height: 1.5em; font-weight: 600; color: #242424; }
.product-list ul li a:hover .thumb::after { border-color: var(--color-primary);}

/* 제품 - 상세 */
.product-group { margin-bottom: 100px; }
.product-group.mg { margin-bottom: 0; }
.product-detail-top { display: flex; justify-content: space-between; align-items: flex-start; padding: 140px 0 72px; }
.product-detail-top .info { flex: 1 1 auto; min-width: 0; width: 1%; padding-right: 20px; }
.product-detail-top .info .tt { font-size: var(--font-size48); font-weight: 700; color: #242424; line-height: 1.33em; }
.product-detail-top .info .txt { font-size: var(--font-size20); line-height: 1.8em; margin-top: 40px; word-break: break-all;}
.product-detail-top a { display: inline-flex; height: 60px; border-radius: 8px; background: var(--color-primary); padding: 0 40px; color: #fff; align-items: center; font-size: var(--font-size18); line-height: 1.55em; font-weight: 600; position: relative; padding-left: 80px; }
.product-detail-top a::before { content: ""; position: absolute; left: 40px; top: 0; bottom: 0; margin: auto; width: 24px; height: 24px; background: url(../images/sub/download-ico.png) center no-repeat; background-size: contain;}
.product-img-wrap { display: flex; gap: 40px; flex-wrap: wrap;}
.product-img-wrap .img { width: calc(100%/2 - 20px); position: relative; } 
.product-img-wrap .thumb { padding-bottom: 100%; display: block; overflow: hidden; border-radius: 24px; position: relative; }
.product-img-wrap .thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.product-img-wrap .thumb::after { content: ""; position: absolute; left: 0; right: 0; top: 0; bottom: 0; margin: auto; border-radius: 24px; border: 1px solid #ddd;}
.pd-tbl-wrap { overflow: auto;}
.pd-tbl { width: 100%; border-collapse: collapse; border-top: 1px solid #686868; }
.pd-tbl tr { border-bottom: 1px solid #ddd;}
.pd-tbl tr th { padding: 18px 10px; color: #242424; font-size: var(--font-size18); font-weight: 600; line-height: 1.55em; background: #f8f8f8; }
.pd-tbl tr td { text-align: center; padding: 19px 10px; line-height: 1.62em; }
.product-detail-contents { padding: 40px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd;}
.product-list-btn { width: 136px; height: 58px; display: flex; align-items: center; justify-content: center; color: #fff; line-height: 1.62em; border-radius: 8px; background: #111; margin: auto; }

/* 특허 및 인증서 공통 */
.certi-wrap { display: flex; gap: 40px; flex-wrap: wrap;}
.certi-wrap .item { width: calc(100%/4 - 30px); padding: 24px 30px; border-radius: 24px; background: #F8F8F8; text-align: center; }
.certi-wrap .item .thumb { padding-bottom: 136%; display: block; overflow: hidden; position: relative; }
.certi-wrap .item .thumb img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.certi-wrap .item .tt { margin-top: 24px; font-size: var(--font-size18); color: #242424; font-weight: 600; line-height: 1.55em; }
.certi-wrap .item.none {width:100%; padding:70px 0; margin:0; text-align:center; color:#767676; border-top: 1px solid #242424; border-radius: 0; background: transparent; border-bottom: 1px solid #ddd;}