@charset "utf-8";

/* == Base == */
:root {
  --main-color: #0068B7;
  --sub-color1: #89ABDA;
  --sub-color2: #C3D600;
  --gray1: #707070;
  --gray2: #afafaf;
  --gray3: #dfdfdf;
  --light-gray1 : #e7e8e9;
  --light-gray2 : #f2f21f0;
  --light-gray3 : #f6f5f4;
  --cubic-pop1: cubic-bezier(.85, .14, .29, .99);
  --cubic-pop2: cubic-bezier(.71, .45, .36, 1.31);
  --cubic-pop3: cubic-bezier(.85, .14, .29, .99);
  --main-font: 'Pretendard', sans-serif;
  --font-sub1: 'Poppins', 'Pretendard', sans-serif;
}

body {
  color: #1b1b1b;
  font-family: var(--main-font);
  font-size: 16px;
}

.typo1,
.typo2,
.typo3,
.typo4,
.typo5,
.typo6,
.h1,
.h2,
.h3,
.h4,
.h5,
.h6 {font-family: var(--font-sub1); font-weight: 600;}

.page_sbj {font-size: 62px; font-weight: 600; font-family: var(--font-sub1); margin-bottom: .3em;}

.catalog {background: #fff;}
.page__container {}
.page__container .page__bg {z-index: 0;}
.page__container .page__bg.has_dim::after {position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; background: rgb(0,0,0,.1); mix-blend-mode: overlay; display: block;}
.page__container .page__contents {position: relative; z-index: 1; height: 100%;}

.ly--content1 .page__container {padding: 135px 80px 75px 185px;}
.ly--content1 .page__contents {display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: 100%; height: 100%;}
.ly--content1 .page__contents .page__head {width: 100%; padding-bottom: 40px;}
.ly--content1 .page__contents .page__body {width: 100%;}
.ly--content1 .page__contents.dir--row {flex-direction: row; align-items: stretch; justify-content: stretch; gap: 80px;}
.ly--content1 .page__contents.dir--row .page__head {padding-bottom: 0;}

.ly--cover .page__container {padding: 135px 80px 75px 185px;}
.ly--cover .page__contents {}

.ly--product {}
.ly--product .page__container {padding: 0;}
.ly--product .page__contents {display: flex; flex-direction: column;}
.ly--product .page__head {position: relative; padding: 135px 80px 30px 185px; background: no-repeat center / cover; background-color: #000; color: #fff;}
.ly--product .page__head::before {position: absolute; top: 0; left: 0; width: 70%; height: 100%; display: block; background: var(--main-color); mix-blend-mode: multiply; content: ''; transform: skewX(20deg); margin-left: -10%;}
.ly--product .page__head .inner {position: relative; z-index: 1; width: 50%;}
.ly--product .page__head .tech_nav {display: flex; gap: 10px; position: absolute; bottom: 30px; right: 50px;}
.ly--product .page__head .tech_nav .btn {display: flex; height: 40px; border-radius: 40px; background: var(--main-color); color: #fff; font-size: 18px; padding: 0 20px; align-items: center; gap: .5em; cursor: pointer;}
.ly--product .page__head .tech_nav .btn:hover {opacity: .5;}
.ly--product .page__body {padding: 50px 50px 75px 185px; height: 100%;}
.ly--product .pdf_viewer {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 50; display: flex; align-items: center; justify-content: center; padding: 100px; display: none;}
.ly--product .pdf_viewer.active {display: flex;}
.ly--product .pdf_viewer .dimmer {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0,0,0,.5); backdrop-filter: blur(5px); z-index: 0;}
.ly--product .pdf_viewer .content {position: relative; z-index: 1; width: 90%; height: 100%;}
.ly--product .pdf_viewer .content .btn--close {position: absolute; top: 0; left: calc(100% + 30px); width: 46px; height: 46px; border-radius: 50%; background: #fff; display: flex; align-items: center; justify-content: center; cursor: pointer;}
.ly--product .pdf_viewer .content .btn--close:hover {opacity: .5;}
.ly--product .pdf_viewer .content .btn--close .ico--plus {width: 40%; height: 40%; transform: rotate(45deg);}
.ly--product .pdf_viewer .content .btn--close .ico--plus::before,
.ly--product .pdf_viewer .content .btn--close .ico--plus::after {background: #1b1b1b;}
.ly--product .pdf_viewer .content .btn--close .ico--plus::before {}
.ly--product .pdf_viewer .content .btn--close .ico--plus::after {}
.ly--product .pdf_viewer iframe {width: 100%; height: 100%; display: block; border-radius: 30px; overflow: hidden; box-shadow: 0 0 20px rgb(0,0,0,.65); background: #000;}

/* Controls */
.ct__controller {display: flex; gap: 15px;}
.ct__controller .btn {width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid #1b1b1b; cursor: pointer; transition: border .4s;}
.ct__controller .btn .arrow {width: 30%; height: 30%; border-width: 2px; border-color: #1b1b1b; transition: border .4s;}
.ct__controller .btn--prev .arrow {margin-left: 6%;}
.ct__controller .btn--next .arrow {margin-left: -6%;}
.ct__controller .btn:hover,
.ct__controller .btn:hover .arrow {border-color: var(--main-color)!important;}
.catalog.pg01 .ct__controller .btn--prev,
.catalog.depth1--ct_last .ct__controller .btn--next {opacity: .3; pointer-events: none;}
.catalog.navTheme--transparent:not(.depth1--ct_index) .ct__controller .btn,
.catalog.navTheme--transparent:not(.depth1--ct_index) .ct__controller .btn .arrow {border-color: #fff;}
.catalog.controlTheme--white .ct__controller .btn,
.catalog.controlTheme--white .ct__controller .btn .arrow {border-color: #fff;}
.catalog.navTheme--transparent.controlTheme--dark .ct__controller .btn,
.catalog.navTheme--transparent.controlTheme--dark .ct__controller .btn .arrow {border-color: #1b1b1b;}

.header {position: absolute; z-index: 998; top: 0; left: 0; width: 100%; height: 100px; font-family: var(--font-sub1); transition: transform .3s var(--cubic-pop1); transform: translate(0, -100%); pointer-events: none;}
.catalog.headerState--show .header {transform: translate(0);}
.header .container {width: calc(100% - 100px); height: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: flex-end; gap: 0 30px;}
.header .lnb {display: none; align-items: center; gap: 10px; text-align: center; color: #808285; text-transform: uppercase; pointer-events: initial;}
.header .lnb.active {display: flex;}
.header .lnb li {display: block; padding: 10px; transition: color .3s;}
.header .lnb li.active {font-weight: 700;}
.header .ct__controller {pointer-events: initial;}
.catalog.navTheme--transparent .header .lnb li {color: #f1f1f1;}
.catalog.lnbTheme--dark .header .lnb li {color: #1b1b1b;}

.sitemap_btn {position: relative; width: 52px; height: 52px; padding: 0;}
.sitemap_btn .nav_symbol {display: block; width: 100%; height: 100%; transition: all .4s; filter: grayscale(1);}
.catalog.sitemap--open .sitemap_btn .nav_symbol {transform: rotate(360deg); filter: grayscale(0);}

@media (hover: hover) {
  .sitemap_btn:hover .nav_symbol {filter: grayscale(0);}
}

.nav_bar {position: absolute; top: 0; left: 0; z-index: 999; width: 105px; height: 100%; background: #f7f6f5; font-family: var(--font-sub1); display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: 50px; padding: 30px 10px; transition: transform .3s var(--cubic-pop1), background .3s; transform: translate(-100%);}
.catalog.navBarState--show .nav_bar {transform: translate(0);}
.nav_bar button {position: relative; appearance: none; -webkit-appearance: none; -moz-appearance: none; -ms-appearance: none; background: none; border: none; outline: none; box-shadow: none; cursor: pointer;}
.nav_bar__btn {display: flex; align-items: center; justify-content: center; width: 52px; height: 52px; border-radius: 50%; font-size: 20px; background: #e2dfe2;}
.nav_bar__btn.btn--home {margin-bottom: auto;}
.nav_bar .gnb {display: flex; gap: 10px; font-size: 18px; writing-mode: vertical-rl;}
.nav_bar .gnb__item {transform: rotate(180deg); border: 1px solid #d9d8d7; padding: 25px 15px; border-radius: 100px; transition: color .4s, border .4s;}
.nav_bar .gnb__item.active {font-weight: 600;}
.nav_bar .gnb__item:nth-child(1).active {border-color: var(--main-color); color: var(--main-color);}
.nav_bar .gnb__item:nth-child(2).active {border-color: var(--sub-color1); color: var(--sub-color1);}
.nav_bar .gnb__item:nth-child(3).active {border-color: var(--sub-color2); color: var(--sub-color2);}
.catalog.navTheme--transparent:not(.sitemap--open) .nav_bar {background: rgb(255,255,255,.1); backdrop-filter: blur(5px);}
.catalog.navTheme--transparent:not(.sitemap--open):not(.gnbTheme--dark) .nav_bar .gnb__item:not(.active) {color: #fff; border-color: #fff;}

.total_menu {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 998; pointer-events: none!important;}
.total_menu .dimmer {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgb(0,0,0,.5); backdrop-filter: blur(5px); z-index: -1; opacity: 0!important; transition: opacity .4s;}
.total_menu .menu_container {display: flex; flex-direction: column; background: #fff; width: 620px; height: 100%; padding: 70px 40px 40px 140px; transform: translate(-100%)!important; transition: transform .4s var(--cubic-pop1);}
.total_menu .menu_container .head {padding-bottom: 30px;}
.total_menu .menu_container .head .title {font-size: 52px; margin-bottom: 30px;}
.total_menu .menu_container .head .category {display: flex; align-items: flex-end; gap: 1em; padding-bottom: 18px; padding-right: 0.5em; border-bottom: 1px solid #dedede;}
.total_menu .menu_container .head .category a {font-size: 14px;}
.total_menu .menu_container .head .category a.active {font-size: 24px; font-weight: 700; margin-right: auto;}
.total_menu .menu_container .body {margin-bottom: auto;}
.total_menu .index_menu > li {padding: 5px 0;}
.total_menu .index_menu > li > a {display: block; padding: 3px 0; font-size: 20px; font-weight: 500;}
.total_menu .index_menu > li > a .sbj {}
.total_menu .index_menu > li > ul {font-size: 16px; padding: 0 0 10px 14px; color: #606060; font-weight: 300;}
.total_menu .index_menu > li > ul > li {}
.total_menu .index_menu > li > ul > li > a {display: block; padding: 6px 0;}
.total_menu .menu_container .foot {padding-top: 40px;}
.total_menu .menu_container .foot .group {display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 0; border-bottom: 1px solid #dedede;}
.total_menu .menu_container .foot .group:last-child {padding-bottom: 0; border: none;}
.total_menu .menu_container .nav--links {display: flex; gap: 5px;}
.total_menu .menu_container .nav--links a {display: flex; align-items: center; justify-content: center; text-align: center; height: 36px; padding: 8px 10px; border: 1px solid #3a3a3a; border-radius: 3px;}
.total_menu .menu_container .nav--sns {display: flex; gap: 5px;}
.total_menu .menu_container .nav--sns a {height: 36px; width: 36px; display: flex; align-items: center; justify-content: center; border: 1px solid #3a3a3a; border-radius: 3px;}
.total_menu .menu_container .copyright {line-height: 1.5; display: block; font-size: 12px; color: #8a8a8a;}

.total_menu .menu_container a:hover {opacity: .5;}
.catalog.sitemap--open .total_menu {pointer-events: initial!important;}
.catalog.sitemap--open .total_menu .dimmer {opacity: 1!important;}
.catalog.sitemap--open .total_menu .menu_container {transform: translate(0)!important;}


.node_canvas {position: relative; mix-blend-mode: color-dodge; transform: translate(0);}
.node_canvas canvas {position: absolute; top: 0; left: 0; width: 100%; height: 100%;}

@keyframes symbolScaleup {
  from {transform: translate(-50%, -50%) scale(1); opacity: 1;}
  to {transform: translate(-50%, -50%) scale(5) rotate(360deg); opacity: 0;}
}
@keyframes symbolLineAnimation {
  from {stroke-dashoffset: -150%; stroke-dasharray: 150%;}
  to {stroke-dashoffset: 1800%; stroke-dasharray: 150%;}
}

#ct_cover1 {background-color: #fff;}
#ct_cover1 .page__bg {display: flex; align-items: flex-end; justify-content: space-between;}
#ct_cover1 .page__bg .node_canvas {width: 30%; height: 50%;}
#ct_cover1 .page__bg .node_canvas:nth-child(2) {position: absolute; bottom: 0%; left: 50%; width: 70%; height: 40%; transform: translate(-50%);}
#ct_cover1 .symbol {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 300px; opacity: .9; animation: .6s 3.1s 1 forwards var(--cubic-pop2);}
#ct_cover1 .symbol path {stroke-dashoffset: -150%; stroke-dasharray: 150%; animation: 3.0s 1 forwards var(--cubic-pop1);}
#ct_cover1 .page__contents {display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; height: 100%; padding: 70px 100px;}

.catalog__page--active #ct_cover1 .page__bg {transition-delay: 3.0s;}
.catalog__page--active #ct_cover1 .sbj {transition-delay: 3.3s;}
.catalog__page--active #ct_cover1 .logo {transition-delay: 3.4s;}
.catalog__page--active #ct_cover1 .symbol {animation-name: symbolScaleup;}
.catalog__page--active #ct_cover1 .symbol path {animation-name: symbolLineAnimation;}

#ct_cover2 {background: none;}
#ct_cover2 .page__bg {display: flex; align-items: flex-end; justify-content: space-between;}
#ct_cover2 .page__bg .node_canvas {width: 30%; height: 50%; mix-blend-mode: color-dodge;}
#ct_cover2 .page__bg .node_canvas:nth-child(2) {position: absolute; bottom: 0%; left: 50%; width: 70%; height: 40%; transform: translate(-50%);}
#ct_cover2 .page__contents {display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100%; padding: 70px 100px; text-align: center;}

#ct_last {background-color: #fff;}
#ct_last .page__bg {display: flex; align-items: flex-end; justify-content: space-between;}
#ct_last .page__bg .node_canvas {width: 30%; height: 50%;}
#ct_last .page__bg .node_canvas:nth-child(2) {position: absolute; bottom: 0%; left: 50%; width: 70%; height: 40%; transform: translate(-50%);}
#ct_last .page__contents {display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; padding: 50px;}
#ct_last .page__contents .logo {margin: auto;}
#ct_last .page__contents address {font-style: normal; width: 100%; text-align: center;}
#ct_last .page__contents address li {line-height: 1.8;}
#ct_last .page__contents address .cntct span {display: inline-block; margin: 0 .5em; font-size: 18px;}
#ct_last .page__contents address .copy {margin-top: 1em; color: #909090;}

#ct_index {background: #fff;}
#ct_index .symbol {position: absolute; bottom: -200px; width: 800px; left: 50%; margin-left: -400px; mix-blend-mode: color-dodge; opacity: .7;}
#ct_index .page__bg {width: 900px; background-color: #f3f2f1;}
#ct_index .page__contents {display: flex; flex-direction: row; align-items: flex-end; gap: 50px;}
#ct_index .page__head {width: 750px; flex-shrink: 0; margin-bottom: auto;}
#ct_index .page__body {width: 100%;}
#ct_index .node_canvas {position: absolute; bottom: 0; right: 0; width: 700px; height: 500px;}
#ct_index .page_sbj {}
#ct_index .index_container {padding: 20px 40px 40px 0; position: relative;}
/* #ct_index .index_container::before,
#ct_index .index_container::after {position: absolute; content: '';}
#ct_index .index_container::before {height: calc(100% + 50px); width: 1px; background: var(--sub-color2); right: 0; top: 0;}
#ct_index .index_container::after {width: calc(100% + 50px); height: 1px; background: var(--sub-color1); left: 0; bottom: 0;}
#ct_index .index_container .depth1::after {position: absolute; content: ''; bottom: 0; right: 0; width: 30px; height: 30px; background: var(--sub-color1); display: block;} */
#ct_index .index_container .catalog__link:hover {opacity: .7;}
#ct_index .index_container .depth1 {display: flex; flex-direction: column; width: 100%; gap: 40px; font-size: 28px; font-family: var(--font-sub1);}
#ct_index .index_container .depth1 > li {}
#ct_index .index_container .depth1 > li > span {font-weight: 500;}
#ct_index .index_container .depth2 {display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 2em; font-size: 20px; padding: .5em 0;}
#ct_index .index_container .depth2 > li {display: flex; gap: .5em; padding: 4px 0;}
#ct_index .index_container .depth2 > li::before {content: '+'; font-weight: 700; color: var(--main-color);}


.section_intro {color: #fff;}
.section_intro .page__bg {transition: transform 1s; transition-delay: 1s; transform: scale(1);}
.section_intro .page__bg .symbol {position: absolute; top: 50%; right: 0; transform: translate(40%, -50%); width: 700px; opacity: .3; mix-blend-mode: color-dodge;}
.catalog__page--active .anime--active .section_intro .page__bg {transform: scale(1); transition: transform 30s; transition-delay: 0s;}
.section_intro .node_canvas {position: absolute; right: 100px; width: 600px; height: 50%;}
.section_intro .node_canvas--1 {top: 100px;}
.section_intro .node_canvas--2 {bottom: 100px; width: 800px;}

#greeting {}
#greeting .page__head {display: flex; flex-direction: column; flex-shrink: 0; width: 550px;}
#greeting .page__head .page_sbj {margin-bottom: 1.0em;}
#greeting .page__head .imgbox {background-color: var(--light-gray1); height: 100%;}
#greeting .page__body {display: flex; align-items: flex-end;}

#history {}
#history .page__head {display: flex; flex-direction: column; width: 550px; flex-shrink: 0;}
#history .page__head .imgbox {height: 100%;  display: flex; }
#history .page__head .imgbox img{margin-top: auto; }
#history .page__body {overflow: hidden auto;}
.history_cont .depth1 {display: flex; flex-direction: column; position: relative;}
.history_cont .depth1::before {position: absolute; content: ''; left: 25px; top: 0; width: 1px; height: 100%; background: var(--gray2); display: block; z-index: -1;}
.history_cont .depth1__item {margin-top: -54px;}
.history_cont .depth1__item:first-child {margin-top: 0;}
.history_cont .depth1__item .tit {display: flex; align-items: center; gap: 1em; color: var(--main-color); font-size: 32px; font-family: var(--font-sub1); font-weight: 600; background: #fff; padding: 15px 0; position: sticky; top: 0; z-index: 10; transform: translate(0, -1px); box-shadow: 0 5px 10px rgb(0,0,0,.02);}
.history_cont .depth1__item .tit small {display: block; line-height: 1.3; font-weight: 500; margin-top: 0.3em; font-size: 0.5em;}
.history_cont .depth2 {display: flex; flex-direction: column; gap: 1em; font-size: 20px; padding-left: 50px; padding-top: 20px;}
.history_cont .depth2__item {display: flex; gap: 1em; position: relative;}
.history_cont .depth2__item:last-child {padding-bottom: 50px;}
.history_cont .depth2__item::before {position: absolute; top: 10px; left: -29px; content: ''; width: 9px; height: 9px; border-radius: 50%; background: var(--sub-color1); display: block;}
.history_cont .depth2__item .year {font-weight: 600; color: var(--sub-color1);}
.history_cont .depth2__item .cont {}

#org .symbol {position: absolute; bottom: -330px; left: 150px; width: 800px; opacity: .1; z-index: 0;}
.org_diagram {display: block; margin: -200px 0 0 auto;}

.loca_cont {display: flex; gap: 30px;}
.loca_cont__item {display: flex; flex-direction: column; gap: 30px; width: 100%;}
.loca_cont__item .map_container {width: 100%; height: 350px;}
.loca_cont__item .cont {}
.loca_cont__item .cont .tit {}
.loca_cont__item .cont .info {width: 100%; border-top: 1px solid #dadada;}
.loca_cont__item .cont .info tr {border-bottom: 1px solid #dadada;}
.loca_cont__item .cont .info tr th {flex-shrink: 0; width: 130px; padding: 10px 15px; background: #f2f1f4; color: var(--main-color);}
.loca_cont__item .cont .info tr td {padding: 10px 15px;}
.loca_cont__item .cont .info tr.addr td {letter-spacing: -.5px;}

#prod_intro .page__bg.has_dim::after {mix-blend-mode: darken;}

.prod_lineup {display: grid; grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(2, 1fr); gap: 5px;}
.prod_lineup__item {width: 100%; display: flex; align-items: center; justify-content: flex-start; flex-direction: column; text-align: center; color: #fff; position: relative; padding: 30px 50px;}
.prod_lineup__item::after {position: absolute; top: 0; left: 0; width: 100%; height: 100%; content: ''; display: block; background: rgb(0,0,0,.5);}
.prod_lineup__item .icon {position: relative; z-index: 1; margin-top: 10px; margin-bottom: 10px;}
.prod_lineup__item .name {position: relative; z-index: 1; margin-bottom: 0;}
.prod_lineup__item:nth-child(4) {grid-row: 2; grid-column: 2;}
.prod_lineup__item:nth-child(5) {grid-row: 2; grid-column: 3;}
.prod_lineup__item:nth-child(6) {grid-row: 2; grid-column: 4;}
.prod_lineup .empty--1 {grid-row: 1; grid-column: 4; background: var(--sub-color1);}
.prod_lineup .empty--2 {grid-row: 2; grid-column: 1; background: var(--sub-color2);}

.prod_cont {display: grid; grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(2, 1fr); height: 100%; gap: 30px 60px; position: relative;}
.prod_cont .node_canvas {position: absolute; z-index: 0; bottom: 0; right: 0; width: 40%; height: 50%;}
.prod_cont .node_canvas canvas {opacity: .4!important;} 
.prod_cont .node_canvas--1 {right: 0;}
.prod_cont .node_canvas--2 {right: 25%;}
.prod_cont section {position: relative; z-index: 1;}
.prod_cont section .sbj {margin-bottom: 0.5em;}
.prod_cont section hr {width: calc(100% - 20px); height: 1px; background: #e0e9e8; margin: 30px auto; border: none;}
.prod_cont .features {display: flex; flex-direction: column; justify-content: flex-start; grid-column: span 2; grid-row: span 2;}
.prod_cont .features .icons {display: flex; gap: 10px;}
.prod_cont .features .icons li {display: flex; flex-direction: column; align-items: center; text-align: center; width: 100%; padding: 15px; border: 1px solid #dadada; border-radius: 5px;}
.prod_cont .features .icons li .icon {width: 80px;}
.prod_cont .features .icons li .val {font-size: 13px;}
.prod_cont .features .desc_ls {font-size: 16px; margin-top: -0.5em;}
.prod_cont .features .desc_ls > li {display: flex; gap: .5em; margin-bottom: 0.5em;}
.prod_cont .features .desc_ls > li:last-child {margin-bottom: 0;}
.prod_cont .features .desc_ls > li::before {content: '+'; color: var(--main-color); font-weight: 700; flex-shrink: 0;}
.prod_cont .gall {grid-column: span 3;}
.prod_cont .gall_ls {display: flex; gap: 10px; height: 180px;}
.prod_cont .gall_ls li {border: 1px solid #dadada;}
.prod_cont .gall_ls li img {display: block; width: auto; height: 100%;}
.prod_cont .str {grid-column: span 3; display: flex; flex-direction: column;}
.prod_cont .str_ls {display: flex; gap: 10px; height: 100%;}
.prod_cont .str_item {position: relative; width: 100%; background: #f0f4f8; padding: 20px;}
.prod_cont .str_item .no {position: absolute; top: 0; right: 0; display: flex; width: 15px; height: 15px;}
.prod_cont .str_item .cont {}
.prod_cont .str_item .tit {margin-bottom: 0.5em; display: block;}
.prod_cont .str_item .val {font-size: 13px;}

.prod_cont.row--1 {grid-template-rows: repeat(1, 1fr);}
.prod_cont.row--1 .features {grid-row: span 1;}
.prod_cont.row--1 .str_item .tit {font-size: 20px;}
.prod_cont.row--1 .str_item .val {font-size: 17px;}

#trania_intro .page__bg::after {background-color: rgb(0,0,0,.5); mix-blend-mode: multiply;}
#trania_intro .page__bg::before {position: absolute; left: 0; top: 0; width: 65%; height: 100%; content: ''; display: block; background: var(--main-color); mix-blend-mode: multiply; transform: skewX(-10deg); opacity: .8; margin-left: -10%;}

.trania_cont .page__head {background: var(--main-color);}
.trania_cont .page__head::before {background-color: var(--sub-color2); mix-blend-mode: saturation; width: 100%; transform: none; margin: 0;}
.trania_cont .page_sbj {display: flex; gap: .5em; align-items: center;}
.trania_cont .page_sbj img {width: 280px;}

#about_trania {}
#about_trania .page__body {display: flex; gap: 100px;}
#about_trania .page__body section {width: 50%;}
#about_trania .page__body section .bg_box {padding: 30px; background: #f5f1f4;}
#about_trania .page__body .about_etpfe {width: 40%; display: flex; flex-direction: column;}
#about_trania .page__body .about_etpfe .spec {margin-top: auto;}
#about_trania .page__body .about_etpfe .spec .cont {padding-top: 10px;}
#about_trania .page__body .about_etpfe .spec .cont table {width: 100%; background: rgb(255,255,255,.5);}
#about_trania .page__body .about_etpfe .spec .cont table tr:not(:last-child) {border-bottom: 1px solid #dadada;}
#about_trania .page__body .about_etpfe .spec .cont table th,
#about_trania .page__body .about_etpfe .spec .cont table td {padding: 10px 15px; text-align: left;}
#about_trania .page__body .about_etpfe .spec .cont table th {width: 190px;}
#about_trania .page__body .about_etpfe .spec .cont table td {}
#about_trania .page__body .info_etpfe {width: 60%;}

#app_trania .page__body {display: flex; align-items: center;}
.trania_app_ls {display: flex; gap: 20px; width: 100%;}
.trania_app_ls > li {width: 100%;}
.trania_app_ls > li .thumb {height: 300px;}
.trania_app_ls > li .cont {width: calc(100% - 40px); background: var(--main-color); color: #fff; margin: -50px auto 0 auto; padding: 25px 30px; height: 140px;}
.trania_app_ls > li .cont .tit {font-size: 20px; margin-bottom: 0.5em;}
.trania_app_ls > li .cont .desc {font-size: 17px;}

.trania_prod_detail {width: 100%; height: 100%; display: flex; gap: 50px;}
.trania_prod_detail__item {width: 50%; display: flex; gap: 30px;}
.trania_prod_detail__item .thumb {width: 50%;}
.trania_prod_detail__item .cont {display: flex; flex-direction: column; width: 50%;}
.trania_prod_detail__item .cont .tit {}
.trania_prod_detail__item .spec {text-align: left; margin-top: auto;}
.trania_prod_detail__item .spec tr {border-bottom: 1px solid #dadada;}
.trania_prod_detail__item .spec tr th,
.trania_prod_detail__item .spec tr td {vertical-align: middle; padding: 8px 10px;}
.trania_prod_detail__item .spec tr th {background: #f2f3f5; width: 170px; line-height: 1.3;}
.trania_prod_detail__item .spec tr td {}