@charset "utf-8";

/* 전역적으로 사용될 변수 스타일을 작성합니다. */
:root {
  --dt-orange: #F7AD1C;
  --dt-blue: #1489CC;
  --dt-sky-blue: #00A8BF;
  --dt-green: #75BC3D;
  --dt-purple: #A59ECC;
  --dt-navy: #0057A6;
  --main-color : #F7AD1C;
  --sub-color1 : #1489CC;
  --gray1: #707070;
  --gray2: #afafaf;
  --gray3: #dadada;
  --light_gray1: #f3f3f3;
  --light_gray2: #f9f8f7;
  --light_gray3: rgb(216, 216, 216, .2);
  --gradient1: linear-gradient(140deg, #0086CC, #25F5B1);
  --main-font: "Pretendard", "맑은 고딕", sans-serif;
  --sub-font: "Lato", "Pretendard", "맑은 고딕", sans-serif;
  --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);
}

/* 프로젝트 진행시 커스텀 스타일을 여기에 작성합니다. */
/* Base */
body.fixed {height: calc(var(--vh, 1vh) * 100)!important; overflow: hidden!important;}
main:not(.not_overflow_hidden) {overflow-x: hidden;}
.overflow-x-hidden {overflow-x: hidden;}

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

.ff--main {font-family: var(--main-font)!important;}
.ff--sub {font-family: var(--sub-font)!important;}

.fc--yellow {color: var(--dt-orange);}
.fc--blue {color: var(--dt-blue);}
.fc--sky-blue {color: var(--dt-sky-blue);}
.fc--green {color: var(--dt-green);}
.fc--purple {color: var(--dt-purple);}
.fc--navy {color: var(--dt-navy);}

.video_box {}
.video_box .video {}
.video_box .thumb {position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; transition: opacity .4s;}
.video_box.is_playing .thumb {opacity: 0; pointer-events: none;}
.video_box .play_btn {position: relative; cursor: pointer; width: 250px; height: 250px;}
.video_box .play_btn .outer, .video_box .play_btn .inn, .video_box .play_btn span {position: absolute; top: 50%; left: 50%; transform-origin: center; -webkit-will-change: transform; -moz-will-change: transform; -ms-will-change: transform; will-change: transform;}
.video_box .play_btn .outer {width: 194px; height: 194px; margin: -97px 0 0 -97px; border-radius: 50%; background: rgba(255,255,255,.4); animation: videoBtn 1s infinite;}
.video_box .play_btn .inn {width: 154px; height: 154px; margin: -77px 0 0 -77px; border-radius: 50%; background: rgba(255,255,255,.8); animation: videoBtn 1s .2s infinite; flex-shrink: 0;}
.video_box .play_btn span { display: block; font-size: 28px; font-family: "Montserrat"; font-weight: 700; text-transform: uppercase; color: var(--dt-blue); letter-spacing: .1em; transform: translate(-50%, -50%); animation: none 1s infinite alternate;}
@keyframes videoBtn {
    from {transform: scale(1); opacity: 1;}
    to {transform: scale(2); opacity: 0;}
}
@keyframes videoBtnTxt {
    from { opacity: 1;}
    to { opacity: 0;}
}

.underline {text-decoration: underline;}

.bar_subject {}
.bar_subject::after {display: block; content: ''; width: 2.5em; height: 5px; background: var(--dt-sky-blue); margin: .8em 0;}

.link_more_container {display: flex; flex-direction: column; align-items: flex-start; gap: 5px; margin-top: 20px;}
.link_more {color: var(--dt-sky-blue); font-size: 16px; font-weight: 700; line-height: 1.5; display: flex; padding: 5px 0; gap: 1em;}
.link_more__arrow {display: flex; align-items: center; flex-shrink: 0; transition: transform .4s;}
.link_more__arrow::after,
.link_more__arrow::before {display: block; content: '';}
.link_more__arrow::before {width: 18px; height: 2px; background: var(--dt-sky-blue); flex-shrink: 0;}
.link_more__arrow::after {width: 8px; height: 8px; border-top: 2px solid var(--dt-sky-blue); border-right: 2px solid var(--dt-sky-blue); transform: rotate(45deg); margin-left: -10px;}


@media (hover: hover) {
  .link_more:hover {opacity: .7;}
  .link_more:hover .link_more__arrow {transform: translate(50%);}
}
@media screen and (max-width: 1399px) {
  .link_more_container {margin-top: 10px;}
  .link_more {font-size: 14px;}
}
@media screen and (max-width: 767px) {
  .video_box .play_btn {width: 120px; height: 120px;}
  .video_box .play_btn .outer {width: 120px; height: 120px; margin: -60px 0 0 -60px;}
  .video_box .play_btn .inn {width: 100px; height: 100px; margin: -50px 0 0 -50px;}
  .video_box .play_btn span {font-size: 20px;}

  .link_more_container {gap: 0;}
}
@media screen and (max-width: 499px) {}



/* Header */
.header {height: 140px; transition: height .3s, transform .3s;}
.header .container {gap: 0;}
.header .logo {width: 276px; height: 57px; background-image: url('../images/common/logo-color.png'); margin-right: 0px; margin-top: -20px;}
.header::after {transform: scaleX(0); transition: transform .4s; background: #ececec;}
.header__bg {background: transparent; transition: background .4s;}

.header .gnb__item > a {color: #fff; font-size: 24px; font-weight: 700; transition: color .4s, padding .4s;}
.header .submenu {height: 275px;}
.header .submenu::after {position: absolute; content: ''; top: 30px; width: 1px; height: calc(100% - 40px); display: block; background: #ececec;}
.header .submenu::after {right: 0;}
.header .submenu__item > a {font-size: 20px;}
.header .gnb_dimmer {height: 505px; transform-origin: top; background: #fff; box-shadow: 0 5px 15px rgb(0,0,0,.1);}
.gnb--total .gnb__item:last-child .submenu_container::after {z-index: -1;}

.header--scrolled {height: 100px;}
.header--scrolled .header__bg {background: rgb(255,255,255,1); backdrop-filter: blur(10px);}
.header--scrolled .gnb__item > a {color: #333;}

.header .gnb__item:nth-child(1) .submenu__item > a:hover,
.header .gnb__item:nth-child(1):hover > a {color: var(--dt-orange);}
.header .gnb__item:nth-child(2) .submenu__item > a:hover,
.header .gnb__item:nth-child(2):hover > a {color: var(--dt-blue);}
.header .gnb__item:nth-child(3) .submenu__item > a:hover,
.header .gnb__item:nth-child(3):hover > a {color: var(--dt-sky-blue);}
.header .gnb__item:nth-child(4) .submenu__item > a:hover,
.header .gnb__item:nth-child(4):hover > a {color: var(--dt-green);}
.header .gnb__item:nth-child(5) .submenu__item > a:hover,
.header .gnb__item:nth-child(5):hover > a {color: var(--dt-purple);}

.header_etc_nav {height: 100%;}
.header_etc_nav .etc_links {height: 100%;}
.header_etc_nav .etc_links > li {position: relative; height: 100%; padding: 0 27px; margin-right: 32px; z-index: 10;}
.header_etc_nav .etc_links > li > a {color: var(--dt-sky-blue); font-size: 22px; font-weight: 600; display: flex; align-items: center; height: 100%; transition: color .4s;}
.is_index .header_etc_nav .etc_links > li > a {color:#77E521;}
.header_etc_nav .etc_links > li .submenu_container {width: 100%;}
.header_etc_nav .etc_links > li .submenu {width: 100%;}
.header_etc_nav .etc_links > li .submenu::after {display: none;}

.header_etc_nav .lang_nav {}
.header_etc_nav .lang_nav .flag {width: 17px; height: 17px; border: none;}
.header_etc_nav .lang_nav .flag.global {border: none; background-image: url('../images/common/ico-global.png');}
.header_etc_nav .lang_nav .flag.eng {background-image: url('../images/common/flag-en.png');}
.header_etc_nav .lang_nav .cur {color: #ccc; font-size: 16px; font-weight: 600; text-transform: uppercase; border-color: #ccc; height: 35px; border-radius: 35px; padding-right: 25px;}
.header_etc_nav .lang_nav .cur::after {display: none;}
.header_etc_nav .lang_nav:hover .cur {border-radius: 17.5px 17.5px 0 0; background: #fff;}
.header_etc_nav .lang_nav .ls {border-radius: 0 0 17.5px 17.5px; border-color: #ccc; padding: 0; color: #ccc;}
.header_etc_nav .lang_nav .ls > li > a {padding-right: 25px; }

.header.gnb--hover::after {transform: scaleX(1);}
.header.gnb--hover .gnb__item > a {color: #333; padding: 0 65px;}
.header.gnb--hover .header_etc_nav .etc_links > li > a {color: #333;}
.header.gnb--hover .header_etc_nav .etc_links > li:hover > a,
.header.gnb--hover .header_etc_nav .etc_links > li .submenu__item > a:hover {color: var(--dt-navy);}

.lang_nav--square_btns .ls > li > a {color: #ccc;}
.lang_nav--square_btns .ls > li.active > a {background: var(--dt-purple); border-color: var(--dt-purple);}

.sitemap {height: calc(var(--vh, 1vh) * 100);}
.sitemap__head .logo {width: 114px; height: 37px; background-image: url('../images/common/logo-color.png');}
.sitemap__gnb__item > a {border-radius: 3px; padding: 10px 20px; border-top: none; border-left: none; border-right: none!important;}
.sitemap__gnb__item > a .ico--circle {width: 24px; height: 24px;}
.sitemap__gnb__item > a .ico--plus {width: 20px; height: 20px; margin: 2px 0;}
.sitemap__gnb__item.active > a {border: none!important;}
.sitemap__gnb__item.active > a .ico--plus::after {background: #fff!important;}
.sitemap__gnb__item.active > a .ico--circle .arrow, 
.sitemap__gnb__item.active > a .ico--circle {border-color: #fff!important;}
.sitemap__gnb__item:nth-child(1).active > a {background: var(--dt-orange)!important;}
.sitemap__gnb__item:nth-child(2).active > a {background: var(--dt-blue)!important;}
.sitemap__gnb__item:nth-child(3).active > a {background: var(--dt-sky-blue)!important;}
.sitemap__gnb__item:nth-child(4).active > a {background: var(--dt-green)!important;}
.sitemap__gnb__item:nth-child(5).active > a {background: var(--dt-purple)!important;}
.sitemap__gnb__item:nth-child(6).active > a {background: var(--dt-navy)!important;}

.sitemap__lang_container .lang_nav--square_btns .ls {justify-content: center;}
.sitemap__lang_container .lang_nav--square_btns .ls > li {width: 150px;}

@media (hover: hover) {
  .sitemap__gnb__item > a:hover {border-color: #dadada;}
  .sitemap__gnb__item:nth-child(1) > a:hover {border-color: var(--dt-orange); color: var(--dt-orange)}
  .sitemap__gnb__item:nth-child(2) > a:hover {border-color: var(--dt-blue); color: var(--dt-blue)}
  .sitemap__gnb__item:nth-child(3) > a:hover {border-color: var(--dt-sky-blue); color: var(--dt-sky-blue)}
  .sitemap__gnb__item:nth-child(4) > a:hover {border-color: var(--dt-green); color: var(--dt-green)}
  .sitemap__gnb__item:nth-child(5) > a:hover {border-color: var(--dt-purple); color: var(--dt-purple)}
  .sitemap__gnb__item:nth-child(6) > a:hover {border-color: var(--dt-navy); color: var(--dt-navy)}
  .sitemap__gnb__item:nth-child(1) > a:hover .ico--plus::after,
  .sitemap__gnb__item:nth-child(1) > a:hover .ico--plus::before {background-color: var(--dt-orange);}
  .sitemap__gnb__item:nth-child(2) > a:hover .ico--plus::after,
  .sitemap__gnb__item:nth-child(2) > a:hover .ico--plus::before {background-color: var(--dt-blue);}
  .sitemap__gnb__item:nth-child(3) > a:hover .ico--plus::after,
  .sitemap__gnb__item:nth-child(3) > a:hover .ico--plus::before {background-color: var(--dt-sky-blue);}
  .sitemap__gnb__item:nth-child(4) > a:hover .ico--plus::after,
  .sitemap__gnb__item:nth-child(4) > a:hover .ico--plus::before {background-color: var(--dt-green);}
  .sitemap__gnb__item:nth-child(5) > a:hover .ico--plus::after,
  .sitemap__gnb__item:nth-child(5) > a:hover .ico--plus::before {background-color: var(--dt-purple);}
  .sitemap__gnb__item:nth-child(6) > a:hover .ico--plus::after,
  .sitemap__gnb__item:nth-child(6) > a:hover .ico--plus::before {background-color: var(--dt-navy);}
  .sitemap__gnb__item:nth-child(1) > a:hover .ico--circle .arrow,
  .sitemap__gnb__item:nth-child(1) > a:hover .ico--circle {border-color: var(--dt-orange);}
  .sitemap__gnb__item:nth-child(2) > a:hover .ico--circle .arrow,
  .sitemap__gnb__item:nth-child(2) > a:hover .ico--circle {border-color: var(--dt-blue);}
  .sitemap__gnb__item:nth-child(3) > a:hover .ico--circle .arrow,
  .sitemap__gnb__item:nth-child(3) > a:hover .ico--circle {border-color: var(--dt-sky-blue);}
  .sitemap__gnb__item:nth-child(4) > a:hover .ico--circle .arrow,
  .sitemap__gnb__item:nth-child(4) > a:hover .ico--circle {border-color: var(--dt-green);}
  .sitemap__gnb__item:nth-child(5) > a:hover .ico--circle .arrow,
  .sitemap__gnb__item:nth-child(5) > a:hover .ico--circle {border-color: var(--dt-purple);}
  .sitemap__gnb__item:nth-child(6) > a:hover .ico--circle .arrow,
  .sitemap__gnb__item:nth-child(6) > a:hover .ico--circle {border-color: var(--dt-navy);}
}
@media screen and (max-width: 1849px) and (min-width: 1400px) {
  .header .logo {margin-right: 40px;}
  .header.gnb--hover .gnb__item > a {padding: 0 50px!important;} 
}
@media screen and (max-width: 1699px) and (min-width: 1400px) {
  .header {height: 100px;}
  .gnb_align--center .gnb {margin-right: 0;}
  .header_etc_nav .etc_links > li > a,
  .header .gnb__item > a {font-size: 17px;}
  .header .submenu__item > a {font-size: 15px;}
  .header_etc_nav .etc_links > li {margin-right: 0;}
}
@media screen and (max-width: 1550px) and (min-width: 1400px) {
  .header.gnb--hover .gnb__item > a {padding: 0 50px!important;}
}
@media screen and (max-width: 1399px) {
  .header_etc_nav .etc_links,
  .header .gnb_dimmer {display: none;}
  .header {height: 65px;}
  .header::after {opacity: .5; transform: none;}
  .sitemap__head .logo,
  .header .logo {width: 180px; height: 34px; margin-top: -10px;}
  .sitemap_btn .ico--hamburger .inner {background: var(--dt-sky-blue);}
}
@media screen and (max-width: 767px) {}
@media screen and (max-width: 499px) {}



/* Footer */
.footer {background: #444; color: #ccc;}
.f_logo {width: 200px;}
.f_logo img {display: block;}

.footer .ico--outlink {width: 14px;}

.f_body .container {display: flex; position: relative;}
.f_body .top_btn {position: absolute; top: 27px; right: 0; width: 38px; cursor: pointer;}
.f_body .top_btn img {display: block;}
.f_body .logo_box {padding: 40px 0; margin-right: auto;}
.f_body .logo_box .f_logo {margin-bottom: 60px;}
.f_body .f_contact {}
.f_body .f_contact li {display: flex; align-items: center; gap: 1em; font-size: 18px;}
.f_body .f_contact li .name {}
.f_body .f_contact li .val {font-size: 23px; color: #ececec; font-weight: 500;}
.f_loca {display: flex; flex-direction: column; padding: 40px 40px; border-left: 1px solid #606060;}
.f_loca .tag {color: #999; font-weight: 600; font-size: 10px; margin-bottom: 1em;}
.f_loca .sbj {color: #ececec; font-size: 16px; font-weight: 600; margin-bottom: 1.2em;}
.f_loca .addr {font-size: 13px; font-weight: 300; margin-bottom: 2em;}
.f_loca .addr .ico--outlink {margin-left: 0.5em;}
.f_loca__contact {margin-top: auto; font-size: 13px; font-weight: 300;}

.f_foot {color: #888; background: #222; padding: 13px 0;}
.f_foot .container {display: flex; justify-content: space-between; gap: 20px;}
.f_foot .copy {font-size: 10px; font-weight: 300;}
.f_foot .links {font-size: 12px; font-weight: 600; display: flex; gap: 1em;}


@media (hover: hover) {}
@media screen and (max-width: 1399px) {
  .f_logo {width: 180px;}
  .f_body .container {flex-wrap: wrap; gap: 0 40px;}
  .f_body .logo_box {width: 100%;}
  .f_body .logo_box .f_logo {margin-bottom: 30px;}
  .f_body .f_contact li {font-size: 16px;}
  .f_body .f_contact li .val {font-size: 18px;}
  .f_loca {width: calc(50% - 20px); padding: 0 0 40px 0; border: none;}
  .f_loca .addr .ico--outlink {display: none;}
}
@media screen and (max-width: 767px) {
  .f_foot .container {flex-direction: column; padding: 20px 0; gap: 10px;}
  .f_foot .links {order: 0; font-size: 14px;}
  .f_foot .copy {order: 1; font-size: 14px;}
}
@media screen and (max-width: 499px) {
  .f_loca {width: 100%;}
}




/* Mainpage */
.fp-viewing-business .header__bg,
.fp-viewing-showroom .header__bg,
.fp-viewing-product .header__bg {background: rgb(255,255,255,.3); backdrop-filter: blur(10px);}
.fp-viewing-business .header .gnb__item > a,
.fp-viewing-showroom .header .gnb__item > a,
.fp-viewing-product .header .gnb__item > a {color: #333;}

.mainpage {}
.mainpage {}
.mainpage .section {overflow: hidden;}
.main_section_bg {position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%;}
.fp-content {position: relative; padding: 110px 0;}
.fp-section-head {padding-bottom: 45px;}

.main_visual {}
.main_visual .swiper {height: 100%;}
.main_visual .swiper-slide {color: #fff;}
.main_visual .swiper-slide .bg {position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -1; background-position: bottom center;}
.main_visual .swiper-slide .bg--pc {}
.main_visual .swiper-slide .container {display: flex; align-items: flex-end; padding-bottom: 40vh; height: 100%;}
.main_visual .swiper-slide .content {}
.main_visual .swiper-slide .content .sbj {font-size: 60px; font-family: var(--sub-font); font-weight: 900; margin-bottom: 20px;}
.main_visual .swiper-slide .content .typo {font-size: 195px; font-family: var(--sub-font); font-weight: 900; margin-bottom: 20px; color: rgb(255,255,255,.7); text-indent: -.05em; line-height: 1.1; white-space: nowrap;}
.main_visual .swiper-slide .content .desc {font-size: 22px; line-height: 1.8;}
.main_visual nav {position: absolute; left: 0; bottom: calc(40vh - 50px); z-index: 10; width: 100%;}
.main_visual nav .container {display: flex; align-items: center; gap: 10px;}
.main_visual nav .duration {position: relative; overflow: hidden; width: 450px; flex-shrink: 1; background: rgb(255,255,255,.3); height: 2px;}
.main_visual nav .duration::after {position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; transform: scaleX(0); transition: transform .2s linear; transform-origin: left; content: ''; display: block;}
.main_visual nav .duration.running::after {transform: scaleX(1); transition: transform 4s linear;}
.main_visual nav .playbtn {flex-shrink: 0; width: 9px; height: 8px; display: flex; gap: 2px;}
.main_visual nav .playbtn::before,
.main_visual nav .playbtn::after {display: block; content: ''; background: #fff; width: 2px;}
.main_visual nav .playbtn.pause::before {display: none;}
.main_visual nav .playbtn.pause::after {background: none; width: 0; height: 0; border-left: 8px solid #fff; border-block: 4px solid transparent;}
.main_visual nav .page {font-size: 12px; color: rgb(255,255,255,.4);}
.main_visual nav .page span::before {content: '0';}
.main_visual nav .page .swiper-pagination-current {color: #fff;}
.main_visual .scroll_down_icon {position: absolute; bottom: 10vh; left: 0; width: 100%; z-index: 10;}

.main_prod {}
.main_prod .main_section_bg {background: #EBEBE7; top: auto; bottom: 0; height: 50%;}
.main_prod .fp-content {height: 100%;}
.main_prod .fp-content .container {display: flex; flex-direction: column; justify-content: center; height: 100%;}
.main_prod_banner {display: flex; justify-content: flex-end; gap: 10px; height: 100%; max-height: 530px; margin-top: 65px;}
.main_prod_banner article {color: #fff; box-shadow: 0 0 15px rgb(0,0,0,.15);}
.main_prod_banner .card--large {margin-left: -265px; width: 100%; max-width: 1115px; margin-top: -65px; position: relative;}
.main_prod_banner .card--large::before {position: absolute; top: 0; left: 0; width: 50%; height: 100%; z-index: 0; display: block; content: ''; background: linear-gradient(to right, #333, transparent); opacity: .6; mix-blend-mode: multiply;}
.main_prod_banner .card--large .inner {position: relative; height: 100%; z-index: 1; padding: 105px 130px; }
.main_prod_banner .card--large .prod_ls {position: absolute; bottom: 0; right: 0; width: calc(100% - 265px); background: rgb(255,255,255,.8); padding: 0 0 38px 32px; display: flex; gap: 14px;}
.main_prod_banner .card--large .prod_ls > li {width: 100%;}
.main_prod_banner .card--large .prod_ls > li > a {display: block; width: 100%; padding: 5px 0 15px 0; border-top: 5px solid #ccc; font-size: 18px; color: #777;}
.main_prod_banner .card--large .prod_ls > li:hover > a {color: var(--dt-blue); border-color: var(--dt-blue); font-weight: 700;}
.main_prod_banner .card--sml {width: 255px; flex-shrink: 0; padding: 38px 27px; display: flex; flex-direction: column; position: relative; overflow: hidden;}
.main_prod_banner .card--sml .sbj {margin-bottom: 0;}
.main_prod_banner .card--sml .sbj::after {display: block; content: ''; width: 22px; height: 3px; background: var(--dt-blue); margin: .5em 0;}
.main_prod_banner .card--sml .prod_ls {color: #ccc; font-size: 18px;}
.main_prod_banner article .link {position: absolute; bottom: 0; right: 0; width: 47px; height: 47px; background: rgb(255,255,255,.8); display: flex; align-items: center; justify-content: center;}
.main_prod_banner article .link .arrow {border-color: var(--dt-blue); border-width: 4px;}
.main_prod_banner .card--large .link {display: none;}

.main_showroom {}
.showroom_tab_btns {display: flex; justify-content: center;}
.showroom_tab_btns .btn {display: flex; position: relative; padding: 0 20px; font-size: 20px; font-weight: 300; cursor: pointer;}
.showroom_tab_btns .btn::after {position: absolute; top: 50%; right: 0; transform: translate(0, -50%); content: ''; width: 1px; height: 1em; background: #B9B9B9;}
.showroom_tab_btns .btn:last-child::after {display: none;}
.showroom_tab_btns .btn.active {color: var(--dt-blue); font-weight: 700;}
.showroom_slide {padding: 60px 0; position: relative; display: none;}
.showroom_slide.active {display: flex;}
.showroom_slide .content_slide {z-index: 1; background: #fff; width: 320px; height: 400px; box-shadow: 0 0 25px rgb(0,0,0,.1); margin: 0 auto 0 0;}
.showroom_slide .content_slide .swiper-slide {display: flex; flex-direction: column; align-items: flex-start; padding: 35px 33px 60px 45px;}
.showroom_slide .content_slide .swiper-slide .icon {margin-left: auto; width: 63px; margin-bottom: 7px;}
.showroom_slide .content_slide .swiper-slide .loca {color: #b9b9b9;}
.showroom_slide .content_slide nav {position: absolute; bottom: 0; right: 0; display: flex; align-items: center; justify-content: flex-end; width: 100%; gap: 2px; z-index: 10;}
.showroom_slide .content_slide nav .swiper-pagination {position: static; width: auto; margin-right: 17px; color: #999; font-size: 14px; font-weight: 300;}
.showroom_slide .content_slide nav .btn {width: 47px; height: 47px; display: flex; align-items: center; justify-content: center; background: var(--dt-blue); cursor: pointer;}
.showroom_slide .content_slide nav .btn .arrow {border-color: #fff; border-width: 3px;}
.showroom_slide .content_slide nav .btn--prev .arrow {margin-left: 3px;}
.showroom_slide .content_slide nav .btn--next .arrow {margin-right: 3px;}
.showroom_slide .content_slide nav .btn.swiper-button-disabled {background: #ccc; pointer-events: none;}
.showroom_slide .img_slide {position: absolute; z-index: 0; top: 0; left: 50%; transform: translate(-50%); width: calc(100% - 100px); max-width: 1070px; height: 100%; overflow: visible;}
.showroom_slide .img_slide .swiper-slide {opacity: .5; transition: opacity .5s;}
.showroom_slide .img_slide .swiper-slide-active {opacity: 1;}

.main_biz .fp-content {padding-top: 180px; padding-bottom: 0;}
.main_biz .biz_icon_banner {padding: 120px 0;}
.main_biz .biz_icon_ls {display: flex;}
.main_biz .biz_icon_ls li {position: relative; width: 100%; color: #fff; display: flex; flex-direction: column; text-align: center; align-items: center;}
.main_biz .biz_icon_ls li::after {position: absolute; top: 0; right: 0; content: ''; width: 1px; height: 100%; background: #707070; display: block;}
.main_biz .biz_icon_ls li:last-child::after {display: none;}
.main_biz .biz_icon_ls li .icon {width: 150px; margin-bottom: 15px;}
.main_biz .biz_icon_ls li .tag {font-size: 20px; font-weight: 700; font-family: var(--sub-font); color: #B9B9B9; margin-bottom: 1em;}
.main_biz .biz_icon_ls li .name {font-size: 32px; font-weight: 400; line-height: 1.3;}

.main_about {display: flex;}
.main_about__article {width: 50%; padding: 155px 0 72px 0;}
.main_about__article .inner {width: 685px;}
.main_about__company {display: flex; background: #EBEBE7; padding-bottom: 0;}
.main_about__company .inner {display: flex; flex-direction: column; align-items: flex-end; margin-left: auto; height: 100%;}
.main_about__company .inner .cont {width: 100%; padding-right: 50px; margin-bottom: 50px;}
.main_about__company .inner .video_box_wrapper {width: 56vw; margin-right: -84px; height: 100%;}
.main_about__company .inner .video_box_wrapper .video_box {padding-bottom: 0; height: 100%; width: 95%; margin-left: auto;}
.main_about__linkbanner {}
.main_about__linkbanner .inner {display: flex; flex-direction: column; gap: 72px; align-items: flex-end; padding-left: 50px;}
.main_about__linkbanner .inner .item {width: 507px; max-width: 100%;}
.main_about__linkbanner .inner .item .thumb {height: 230px; margin-bottom: 30px;}

.main_news {background: #E8E8E8; padding: 124px 0;}
.latest_news {display: flex; align-items: center; padding-top: 20px; gap: 90px;}
.latest_news__btn_more {flex-shrink: 0; width: 67px; height: 67px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #ccc; transition: background .4s, transform .4s;}
.latest_news__btn_more .ico--plus {width: 50%; height: 50%;}
.latest_news__btn_more .ico--plus::after,
.latest_news__btn_more .ico--plus::before {background: #fff;}
.latest_news__btn_more .ico--plus::after {height: 1px;}
.latest_news__btn_more .ico--plus::before {width: 1px;}
.latest_news__ls {display: grid; grid-template-columns: repeat(3, 1fr); gap: 37px;}
.latest_news__item {}
.latest_news__item a {position: relative; display: flex; flex-direction: column; padding: 45px 35px 50px 35px; background: #fff; height: 100%; color: #333;}
.latest_news__item .head {display: flex; align-items: flex-end; padding-bottom: 20px; border-bottom: 1px solid #707070;}
.latest_news__item .head .date {display: flex; font-size: 41px; font-weight: 200; color: var(--dt-sky-blue);}
.latest_news__item .head .date i {display: block; line-height: 1; font-style: normal;}
.latest_news__item .head .tag {font-size: 12px; margin-left: auto; font-weight: 700; color: #707070;}
.latest_news__item .body {padding-top: 20px;}
.latest_news__item .body .tit {font-size: 22px; font-weight: 700; line-height: 1.5; margin-bottom: 1em;}
.latest_news__item .body .cont {font-size: 14px; word-break: normal; line-height: 1.5; margin-bottom: 30px;}
.latest_news__item .body .ico {position: absolute; bottom: 30px; right: 25px;}
.latest_news__item .body .ico::after,
.latest_news__item .body .ico::before {display: block; content: ''; background: #333;}
.latest_news__item .body .ico::after {width: 28px; height: 1px;}
.latest_news__item .body .ico::before {width: 14px; height: 1px; transform: rotate(-45deg); transform-origin: right bottom; position: absolute; bottom: 0; right: 0;}
.latest_news__item:hover a {background: #0D3146;}
.latest_news__item:hover a .tag,
.latest_news__item:hover a .tit,
.latest_news__item:hover a .cont {color: #898989;}
.latest_news__item:hover a .body .ico::after,
.latest_news__item:hover a .body .ico::before {background: #707070;} 

@media (hover: hover) {
  .latest_news__btn_more:hover {background: var(--dt-sky-blue); transform: rotate(360deg);}
}
@media screen and (max-width: 1699px) and (min-width: 1400px) {
  .main_prod_banner .card--large {margin-left: 0;}
  .main_prod_banner .card--large .inner {padding: 60px;}
  .main_prod_banner .card--large .prod_ls {width: calc(100% - 60px);}
  .main_prod_banner .card--large .prod_ls > li > a {font-size: 15px;}
}
@media screen and (min-width: 1400px) {
  .mainpage .fp-ani {transition: transform .5s, opacity .5s; transition-delay: .7s; opacity: 0; will-change: transform, opacity; -webkit-will-change: transform, opacity; -ms-will-change: transform, opacity; -moz-will-change: transform, opacity; -o-will-change: transform, opacity;}
  .mainpage .section:not(.active) .fp-ani {transition: all 0s; transition-delay: .7s!important;}
  .mainpage .fp-ani.fp-fadeleft {transform: translate(100px);}
  .mainpage .fp-ani.fp-faderight {transform: translate(-100px);}
  .mainpage .fp-ani.fp-fadeup {transform: translate(0, 100px);}
  .mainpage .fp-ani.fp-fadedown {transform: translate(0, -100px);}
  .mainpage .fp-ani.fp-scaledown {transform: scale(1.1); opacity: 1;}
  .mainpage .fp-ani.fp-scaleup {transform: scale(.9); opacity: 1;}

  .mainpage.init .section.active .fp-ani {transition: transform .7s var(--cubic-pop3), opacity .7s var(--cubic-pop3); opacity: 1; transition-delay: 0.3s;}
  .mainpage.init .section.active .fp-ani.fp-fadeleft,
  .mainpage.init .section.active .fp-ani.fp-faderight,
  .mainpage.init .section.active .fp-ani.fp-fadeup,
  .mainpage.init .section.active .fp-ani.fp-fadedown {transform: translate(0, 0);}
  .mainpage.init .section.active .fp-ani.fp-scaledown,
  .mainpage.init .section.active .fp-ani.fp-scaleup {transform: scale(1);}

  .mainpage .fp-ani.fp-delay--1 {transition-delay: .3s!important;}
  .mainpage .fp-ani.fp-delay--2 {transition-delay: .4s!important;}
  .mainpage .fp-ani.fp-delay--3 {transition-delay: .5s!important;}
  .mainpage .fp-ani.fp-delay--4 {transition-delay: .6s!important;}
  .mainpage .fp-ani.fp-delay--5 {transition-delay: .7s!important;}
  .mainpage .fp-ani.fp-delay--6 {transition-delay: .8s!important;}
  .mainpage .fp-ani.fp-delay--7 {transition-delay: .9s!important;}
  .mainpage .fp-ani.fp-delay--8 {transition-delay: 1.0s!important;}
}
@media screen and (max-width: 1699px) and (min-width: 1200px) {
  
}
@media screen and (max-width: 1399px) {
  .mainpage .section .fp-scrollable,
  .mainpage .section .fp-tableCell,
  .mainpage .section {height: auto!important;}
  
  .main_visual .swiper {height: calc(var(--vh, 1vh) * 100);}
  .main_visual .swiper-slide .content .sbj {font-size: 42px;}
  .main_visual .swiper-slide .content .typo {font-size: 102px;}
  .main_visual .swiper-slide .content .desc {font-size: 18px;}


  .main_prod_banner {flex-direction: column; height: auto; max-height: none; margin-top: 0;}
  .main_prod_banner article {width: 100%!important; padding: 30px!important; min-height: 230px;}
  .main_prod_banner article .inner {padding: 0!important;}
  .main_prod_banner .card--large {margin: 0; width: 100%;}
  .main_prod_banner .card--large .prod_ls {position: static; width: 100%; padding: 15px; margin: 55px 0 -30px;}
  .main_prod_banner .card--large .prod_ls > li > a {padding: 5px 0; font-size: 14px;}

  .showroom_slide {padding: 30px 0;}
  .showroom_slide .content_slide {width: 350px; height: 350px;}
  .showroom_slide .content_slide .swiper-slide .icon {width: 40px;}

  .main_biz .fp-content {padding-top: 110px;}
  .main_biz .biz_icon_ls li .icon {width: 100px;}
  .main_biz .biz_icon_ls li .tag {font-size: 16px;}
  .main_biz .biz_icon_ls li .name {font-size: 22px;}

  .main_about {flex-direction: column;}
  .main_about__article {width: 100%; padding: 110px 0 10px 0;}
  .main_about__article .inner {width: 720px; margin: 0 auto; max-width: calc(100% - 40px);}

  .main_about__company {background: none;}
  .main_about__company .inner .cont {padding: 0;}
  .main_about__company .inner .video_box_wrapper {width: 100%; height: auto; margin: 0;}
  .main_about__company .inner .video_box_wrapper .video_box {height: 0; padding-bottom: 56.25%; width: 100%;}
  .main_about__linkbanner {padding: 10px 0 110px;}
  .main_about__linkbanner .inner {padding: 0; flex-direction: row; gap: 20px; align-items: flex-start;}
  .main_about__linkbanner .inner .item .sbj {font-size: 20px;}

  .latest_news {flex-direction: column; gap: 50px;}
  .latest_news__ls {display: flex; flex-direction: column; gap: 20px; width: 100%;}
}
@media screen and (max-width: 767px) {
  .fp-section-head {padding-bottom: 25px;}

  .main_visual .swiper-slide .container {padding: 300px 0;}
  .main_visual .swiper-slide .content .desc {font-size: 16px;}
  .main_visual .swiper-slide .content .sbj {font-size: 26px;}
  .main_visual .swiper-slide .content .typo {font-size: 52px;}
  .main_visual .scroll_down_icon {display: none;}
  .main_visual nav {bottom: 40px;}

  .main_prod_banner .card--large .sbj {margin-bottom: 0;}
  .main_prod_banner .card--large .sbj::after {display: block; content: ''; width: 22px; height: 3px; background: var(--dt-blue); margin: .5em 0;}
  .main_prod_banner .card--large .prod_ls {flex-direction: column; background: none; padding: 0; margin: 0 0 0 0; gap: 0;}
  .main_prod_banner .card--large .prod_ls > li > a {border: none; color: #fff!important; font-size: 18px;}
  .main_prod_banner .card--large .link {display: flex; bottom: -30px; right: -30px;}
  .main_prod .main_section_bg {height: 70%;}

  .showroom_slide.active {display: flex; flex-direction: column;}
  .showroom_slide .img_slide {position: relative; left: 0; top: 0; transform: none; height: 250px; width: 100%; order: 0; overflow: hidden;}
  .showroom_slide .content_slide {width: 100%; height: auto; order: 1;}
  .showroom_slide .content_slide .swiper-slide {padding: 30px 20px 55px 20px;}
  .showroom_slide .content_slide .swiper-slide .icon {position:  absolute; top: 20px; right: 20px;}

  .main_biz .biz_icon_banner {padding: 80px 0;}
  .main_biz .biz_icon_ls {flex-wrap: wrap; gap: 20px; justify-content: center;}
  .main_biz .biz_icon_ls li {width: calc(50% - 10px); border: 1px solid rgb(255,255,255,.4); border-radius: 5px; padding: 30px 20px;}
  .main_biz .biz_icon_ls li:nth-child(1) {width: 100%;}
  .main_biz .biz_icon_ls li::after {display: none;}
  .main_biz .biz_icon_ls li .icon {width: 80px;}
  .main_biz .biz_icon_ls li .tag {margin-bottom: 0.5em;}
  .main_biz .biz_icon_ls li .name {font-size: 18px;}

  .main_about__article {padding-bottom: 30px;}
  .main_about__company .inner {align-items: center;}
  .main_about__company .inner .video_box_wrapper {width: calc(100% + 40px);}
  .main_about__linkbanner {padding-top: 30px; padding-bottom: 80px;}
  .main_about__linkbanner .inner {flex-direction: column; gap: 40px;}
  .main_about__linkbanner .inner .item {display: flex; flex-direction: column; width: 100%;}
  .main_about__linkbanner .inner .item .sbj {order: 0;}
  .main_about__linkbanner .inner .item .link_more_container {order: 1; margin-top: 5px;}
  .main_about__linkbanner .inner .item .thumb {height: 0; padding-bottom: 56.25%; order: 2; margin-top: 15px; margin-bottom: 0;}

  .main_news {padding: 80px 0;}
  .latest_news__item a {padding: 30px 20px;}
}
@media screen and (max-width: 499px) {
  
}



/* Subpage */



/* Quickmenu */
/* .quick_menu {position: fixed; bottom: 20px; right: 20px; z-index: 10001; display: flex; flex-direction: column; align-items: flex-end;}
.quick_menu a {display: block; width: 60px; height: 60px; border-radius: 50%; background: no-repeat center / 30px; background-color: #F71C1C; margin-top: 20px;}
.quick_menu .btn_inquiry {overflow: hidden; flex-wrap: nowrap; display: flex; justify-content: flex-end; border-radius: 72px; transition: width 0.3s;}
.quick_menu .btn_inquiry:hover {width: 153px;}
.quick_menu .btn_inquiry .inner {display: flex; align-items: center; color: #fff; width: 133px; flex-shrink: 0;}
.quick_menu .btn_inquiry .inner .tag {flex-shrink: 0;}
.quick_menu .btn_inquiry .inner .ico {flex-shrink: 0; display: flex; justify-content: center; align-items: center; width: 60px; height: 60px; border-radius: 50%;}
.quick_menu .btn_inquiry .inner .ico img {width: 27px;}


@media screen and (max-width: 1399px) {
  .quick_menu {right: 20px; bottom: 70px;}
  body.is_index .quick_menu {bottom: 20px;}
  .quick_menu a {width: 50px!important; height: 50px!important;}
  .quick_menu .btn_inquiry .inner {width: 100%; height: 100%; justify-content: center;}
  .quick_menu .btn_inquiry .inner .ico {width: 40px!important; height: 40px!important;}
  .quick_menu .btn_inquiry .inner .tag {width: 0; height: 0; overflow: hidden; font-size: 0; color: transparent; padding: 0;}
}
@media screen and (max-width: 767px) {
  .quick_menu {right: 10px; bottom: 60px;}
  body.is_index .quick_menu {bottom: 10px;}
} */

.quick_menu_container {position: fixed; bottom: 20px; right: 20px; z-index: 10001; display: flex; flex-direction: column ; align-items: center;  width: 120px; height:120px;}
.quick_menu_container .round_text_box {position: absolute;  left: 50%;  top: 50%;  transform: translate(-50%, -50%); width: 100%; height:100%;}
.quick_menu_container .round_text {animation: rotate 10s 0s infinite linear;opacity: 1;}
.quick_menu_container .quick_menu {display: flex; flex-direction: column; align-items: center; position: relative; z-index:111111; justify-content: center;height: 100%;}
.quick_menu_container .quick_menu a {display: block; width: 60px; height: 60px; border-radius: 50%; background: no-repeat center / 30px; background-color: #F71C1C;}
.quick_menu_container .quick_menu .btn_inquiry {overflow: hidden; flex-wrap: nowrap; display: flex; justify-content: flex-end; border-radius: 72px; transition: width 0.3s;}
.quick_menu_container .quick_menu .btn_inquiry .inner {display: flex; align-items: center; color: #fff; width: 132px; flex-shrink: 0;}
.quick_menu_container .quick_menu .btn_inquiry .inner .tag {flex-shrink: 0;}
.quick_menu_container .quick_menu .btn_inquiry .inner .ico {flex-shrink: 0; display: flex; margin-left: 15px; align-items: center; width: 72px; height: 72px; border-radius: 50%;}
.quick_menu_container .quick_menu .btn_inquiry .inner .ico img {width: 27px;}

@media (hover: hover) {
    .quick_menu_container:hover .round_text {opacity: 0; transition:0.2s; }
    .quick_menu_container .quick_menu .btn_inquiry:hover {width: 153px;}
  }


@keyframes rotate {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}


@media screen and (max-width: 1399px) {
  /* body.is_index .quick_menu_container {bottom: 20px; right: 60px;}
  body.is_index .quick_menu {bottom: 0px;right: 0;} */
  body.is_index .quick_menu_container { bottom: 20px !important;}
  .quick_menu_container {bottom:57px; right: 33px; width: 90px; height: 90px;}
  .quick_menu_container .round_text {width: 90px; height: 90px; }
  .quick_menu_container .quick_menu a {width: 50px!important; height: 50px!important;}
  .quick_menu_container .quick_menu .btn_inquiry .inner {width: 100%; height: 100%; justify-content: center;}
  .quick_menu_container .quick_menu .btn_inquiry .inner .ico {width: 40px!important; height: 40px!important; margin-left: 0; justify-content: center;}
  .quick_menu_container .quick_menu .btn_inquiry .inner .tag {width: 0; height: 0; overflow: hidden; font-size: 0; color: transparent; padding: 0;}
}
@media screen and (max-width: 767px) {
  .quick_menu_container { bottom: 47px; right: 10px; width: 65px; height: 65px;}
  .quick_menu_container .round_text {display: none;}
  .quick_menu_container .quick_menu a {width: 40px!important; height: 40px!important;}
  .quick_menu_container .quick_menu .btn_inquiry .inner .ico img {width: 22px;}
  body.is_index .quick_menu_container { bottom: 10px !important;}
}