/*
Theme Name: Hello Elementor Child
Theme URI: https://elementor.com/hello-theme/?utm_source=wp-themes&utm_campaign=theme-uri&utm_medium=wp-dash
Template: hello-elementor
Author: Elementor Team
Author URI: https://elementor.com/?utm_source=wp-themes&utm_campaign=author-uri&utm_medium=wp-dash
Description: Hello Elementor is a lightweight and minimalist WordPress theme that was built specifically to work seamlessly with the Elementor site builder plugin. The theme is free, open-source, and designed for users who want a flexible, easy-to-use, and customizable website. The theme, which is optimized for performance, provides a solid foundation for users to build their own unique designs using the Elementor drag-and-drop site builder. Its simplicity and flexibility make it a great choice for both beginners and experienced Web Creators.
Tags: accessibility-ready,flexible-header,custom-colors,custom-menu,custom-logo,featured-images,rtl-language-support,threaded-comments,translation-ready
Version: 3.4.4.1751328784
Updated: 2025-07-01 00:13:04

*/

#header.main {position: fixed; background-color: transparent;}
#header.main.fixed .elementor-nav-menu--main .elementor-item {color: var(--txt-color);}
#header.main.fixed {background-color: #fff;}
#header.main.fixed #sitemap,#header.main.fixed #logo {filter: invert(1) brightness(0);}


/* visualCon */
.visual-wrap
{position: relative;}
.visual-wrap .txt-wrap
{position: absolute; top: 45%; left: 0; transform: translateY(-50%); width: 100%; z-index: 10;}
.visual-wrap .txt-wrap h2 
{font-size: 4.2rem; font-weight: 600; color: var(--main-color); padding-bottom: 2.5rem; letter-spacing: -0.28rem;}
.visual-wrap .txt-wrap p
{font-size: 3.4rem; font-weight: 300; color: #fff; line-height: 1.6;}

.visual-wrap .vis-slider .swiper-slide-fully-visible
{position:relative; width:100%; height:960px;}

.visual-wrap .vis-slider iframe#video-iframe
{
  width: 100vw;
  height: calc(72.25vw + 420px);
  min-height: calc(100vh + 340px);
  min-width: 177.77vh; 
  position: absolute;
  top: 50%; 
  left: 50%; 
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.pagination-wrap 
{position: absolute; bottom: 10rem; left: 0; color: #fff; width:100%; z-index: 2;}
.pagination-num
{font-size: 2.5rem; font-weight: 500; padding-bottom: 2.5rem;}
.pagination-num .total
{font-size: 2rem; font-weight: 500;}
.pagination-num .current 
{font-size: 2.5rem; font-weight: 700;}
.pagination-bar 
{height: 3px; width: 55.5rem; background-color: #ddd; position: relative; overflow: hidden;}
.bar-fill 
{height: 3px; background-color: var(--main-color); width: 0%; }

/* guideCon */
.guide-wrap 
{padding: 18rem 0;}
.guide-wrap .title-wrap
{padding-bottom: 8rem;}
.guide-box
{display: flex; gap: 12.5rem; align-items: center;}
.guide-box .gui-left
{width: 80rem; height: 50rem; border-radius: 2rem 2rem 8rem 2rem; transition: all 0.3s ease; overflow: hidden;}
.guide-box .gui-left a
{position: relative; display: block; width: 100%; height: 100%; background-size: 100%; background-repeat: no-repeat; background-position: center;  transition: all 0.3s ease;}
.guide-box .gui-left a::after
{opacity: 0; content: ""; position: absolute; left: 0; width: 100%; height: 100%; background-color: #00000090; z-index: 1; transition: all 0.3s ease;}
.guide-box .gui-left .more
{opacity: 0; z-index: 2;}

.guide-box .gui-left:hover .more {opacity: 1;}
.guide-box .gui-left:hover a::after {opacity: 1;}
.guide-box .gui-left:hover a {background-size: 110%;}

.more
{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 18.4rem; display: flex; align-items: center; padding: 2rem 2.5rem; background-color: #00000040; font-size: 1.6rem; font-weight: 500; color: #fff; border: 1px solid #fff; border-radius: 0.5rem 0.5rem 1.5rem 0.5rem; transition: all 0.3s ease;}
.more .arrow
{display: inline-block; margin-left: 2rem; filter: brightness(0) invert(1); width: 2.5rem; height: 1rem; background: url(/wp-content/uploads/2025/07/next-color.png) no-repeat center / contain;}

.guide-box .gui-right
{width: 40%;}
.guide-box .gui-right .count
{font-size: 2.4rem; font-weight: 500; color: #a8a8a8;}
.guide-box .gui-right .count span
{font-size: 2.4rem; font-weight: 500; color: #111111;}
.guide-box .gui-right .txt-wrap
{padding: 5rem 0 6rem;}
.guide-box .gui-right .txt-wrap h2
{padding-bottom: 3rem; font-size: 4.6rem; font-weight: 600; color: var(--txt-color);}
.guide-box .gui-right .txt-wrap p
{font-size: 1.8rem; font-weight: 400; color: #676767; line-height: 1.6;}
.guide-box .icon-wrap ul
{display: flex; justify-content: space-evenly; gap: 4rem;}
.guide-box .icon-wrap ul li
{display: flex; flex-direction: column; align-items: center; gap: 2rem;}
.guide-box .icon-wrap p
{font-size: 1.8rem; font-weight: 500; color: var(--txt-color);}

.guide-box.middle
{padding: 14rem 0; flex-direction: row-reverse; justify-content: space-between;}
.guide-box.middle .gui-left
{border-radius: 2rem 2rem 2rem 8rem;}

/* productCon */
.product-container
{background: url(/wp-content/uploads/2025/07/pro-bg.jpg) no-repeat center / cover;}
.product-wrap
{padding: 28rem 0 23rem;}
.product-wrap .txt-wrap h2
{font-size: 5.4rem; font-weight: 600; color: #fff; padding-bottom: 3.5rem; letter-spacing: -0.18rem;}
.product-wrap .txt-wrap p
{font-size: 2rem; font-weight: 500; color: #fff; line-height: 2; padding-bottom: 7rem;}

.product-wrap .btn-wrap 
{display: flex; align-items: center; gap: 7rem;}
.product-wrap .btn-wrap .arrow-wrap
{display: flex; gap: 2rem;}
.product-wrap .btn-wrap .arrow-wrap div
{display: flex; justify-content: center; align-items: center; width: 6.4rem; height: 6.4rem; border: 1px solid #fff; border-radius: 1rem 1rem 1rem 2rem; cursor: pointer; transition: all 0.3s ease;}
.product-wrap .btn-wrap .arrow-wrap div.next-btn
{border-radius: 1rem 1rem 2rem 1rem;}
.product-wrap .btn-wrap .arrow-wrap .arrow
{display: inline-block; width: 2.5rem; height: 1rem; filter: brightness(0) invert(1); background: url(/wp-content/uploads/2025/07/prev-color.png) no-repeat center / contain; transition: all 0.3s ease;}
.product-wrap .btn-wrap .arrow-wrap div.next-btn .arrow
{background: url(/wp-content/uploads/2025/07/next-color.png) no-repeat center / contain;}

.product-wrap .btn-wrap .arrow-wrap div:hover {background-color: #fff;}
.product-wrap .btn-wrap .arrow-wrap div:hover .arrow {filter: none;}

.product-wrap .count-wrap ul
{display: flex; gap: 3rem;}
.product-wrap .count-wrap .dot
{position: relative; font-size: 1.6rem; font-weight: 400; color: #fff;}

.product-wrap .count-wrap .dot.active::after
{content: ""; position: absolute; left: 50%; transform: translateX(-50%); bottom: -3px; width: 100%; height: 1px; background-color: var(--main-color);}
.count-wrap .dot.active
{color: var(--main-color);}

/* pro-slider SWiper */
.product-wrap
{padding-left: 15rem;}
.pro-right
{width: 69%; position: absolute; top: 20%; left: 50%;}
.pro-slider
{height: 52rem;}
.panel-box .img img
{width: 100%; object-fit: cover;}

/* pro-slide item */
.panel-box
{position: relative; width: 42rem; height: 52rem; border-radius: 2rem 2rem 8rem 2rem; overflow: hidden;}
.panel-box a
{position: relative; display: block; width: 100%; height: 100%; transition: all 0.3s ease;}
.panel-box a::after
{opacity: 0; content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #00000090; z-index: 1; transition: all 0.3s ease}  
.panel-box .top-wrap
{position: absolute; top: 6rem; left: 4rem; display: flex; align-items: flex-end; gap: 1rem; z-index: 2;}
.panel-box .top-wrap .num
{font-size: 8rem; font-weight: 600; color: transparent; -webkit-text-stroke: 1px white; transition: all 0.3s ease;}
.panel-box .top-wrap .title ,.panel-box .bottom-wrap .detail
{font-size: 2rem; font-weight: 600; color: #fff;} 
.panel-box .top-wrap .title
{transform: translateY(-4rem); transition: all 0.3s ease; opacity: 0;}
.panel-box .img
{transition: all 0.3s ease;}

.panel-box .bottom-wrap
{position: absolute; bottom:6rem; left: 4rem; z-index: 2;}
.panel-box .bottom-wrap .detail
{opacity: 1; transform: translateY(0); transition: all 0.3s ease;}
.panel-box .bottom-wrap .more
{opacity: 0; transform: translateY(-4rem); bottom: 0; top: auto; left: 0; transition: all 0.3s ease;}

.panel-box:hover a::after {opacity: 1;}
.panel-box:hover .num {color: #fff; -webkit-text-stroke: 0;}
.panel-box:hover .title {opacity: 1; transform: translateY(-1rem);}
.panel-box:hover .img {transform: scale(1.1);}
.panel-box:hover .detail {opacity: 0; transform: translateY(4rem);}
.panel-box:hover .more {opacity: 1; transform: translateY(0);}

/* quickCon */
.quick-wrap
{display: flex; justify-content: space-between; align-items: center; padding: 14rem 0;}
.quick-wrap .common-title
{margin-bottom: 3rem;}
.quick-wrap .common-detail
{line-height: 2;}
.qui-left ul
{display: flex; gap: 4rem;}
.qui-left ul li
{width: 100%; height: 100%; border-radius: 2rem 2rem 8rem 2rem; overflow: hidden; transition: all 0.3s ease;}
.qui-left ul li a
{position: relative; display: inline-block; width: 36rem; height: 29rem; background-position: center; background-repeat: no-repeat; background-size: 100%; transition: all 0.3s ease;}
.qui-left ul li a::after
{opacity: 0; content: ""; position: absolute; left: 0; width: 100%; height: 100%; background-color: #00000090; z-index: 1; transition: all 0.3s ease;}
.qui-left ul li a .txt-box
{opacity: 1; position: absolute; bottom: 0; left: 0; padding: 2rem 4rem 2rem 2rem; border-radius: 0 2rem 0 0; background-color: #fff; transition: all 0.3s ease-in-out; transform: translateY(0); z-index: 2;}
.qui-left ul li a .txt-box .name
{padding-bottom: 1rem; font-size: 1.8rem; font-weight: 600; color: var(--txt-color);}
.qui-left ul li a .txt-box p
{font-size: 1.4rem; font-weight: 400; color: #676767; letter-spacing: -0.06rem;}
.qui-left ul li .more 
{opacity: 0; z-index: 2;}

.qui-left ul li:hover a {background-size: 110%;}
.qui-left ul li:hover a::after {opacity: 1;}
.qui-left ul li:hover .more {opacity: 1;}
.qui-left ul li:hover .txt-box {opacity: 0; transform: translateY(5rem);}