@charset "utf-8";

.main_4_1 .layout_header {transition: background-color 0s 0s}
.main_4_4 .layout_header .logo svg,
.main_4_3 .layout_header .logo svg,
.main_4_2 .layout_header .logo svg,
.main_4_1 .layout_header .logo svg {height: 3vw }
.main_4_4 .layout_header .logo a,
.main_4_3 .layout_header .logo a,
.main_4_2 .layout_header .logo a,
.main_4_1 .layout_header .logo a {transform:unset}


.main_4_1 .logo_bg {position: fixed; background: #fff; width: 100%; height: 100%; left: 0; top: 0; z-index: 55; transition:  opacity 0.3s ease-in-out}
.main_4_1 .layout_header .logo { position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%); height: 3vw;}

.main_4_1 .layout_header .logo.svg_active {top: calc(var(--header_Height) / 2); height: 3rem; transition: top 1s ease-in-out , height 1s ease-in-out }
.main_4_1 .layout_header .logo.svg_active svg {height: 3rem; transition: height 1s ease-in-out}


.main_4_1.no_intro .layout_header .logo {top: calc(var(--header_Height) / 2); height: 3rem; transition: none }
.main_4_1.no_intro .layout_header .logo svg {height: 3rem; transition: none}

.main_4_1 .active-start .logo_bg {opacity: 0; pointer-events: none}
/*.main_4_1 .active-start .logo_bg .logo { top: var() ;transition: top 1s ease-in-out , height 1s ease-in-out }
.main_4_1 .active-start .logo_bg .logo svg {height: 3rem}*/

.no_intro.main_4_1 .logo_bg {opacity: 0; pointer-events: none}
.no_intro.main_4_1 .layout_header .logo.svg_active {top: calc(var(--header_Height) / 2); height: 3rem; transition: top 1s ease-in-out , height 1s ease-in-out }
.no_intro.main_4_1 .layout_header .logo.svg_active svg {height: 3rem; transition: height 1s ease-in-out}


.main_4_1 .layout_header,
.main_4_1 .layout_header.active {background-color: transparent}

.main_4_4 .layout_header .logo svg rect,
.main_4_4 .layout_header .logo svg path,
.main_4_3 .layout_header .logo svg rect,
.main_4_3 .layout_header .logo svg path,
.main_4_2 .layout_header .logo svg path,
.main_4_2 .layout_header .logo svg rect,
.main_4_1 .layout_header .logo svg rect,
.main_4_1 .layout_header .logo svg path {fill: #fff;transform: unset;opacity: 1;}

.main_4_1 .layout_header .logo svg rect,
.main_4_1 .layout_header .logo svg path {fill: #000}

.no_intro.main_4_1 .layout_header .logo svg rect,
.no_intro.main_4_1 .layout_header .logo svg path {fill: #fff}

.main_4_1 .layout_header .logo.svg_active svg rect,
.main_4_1 .layout_header .logo.svg_active svg path {fill: #fff; transition: fill 1s ease-in-out 0s}


.main_4_1 .layout_header.ani_active {background-color: #fff; transition: background-color 1s 1s}
.main_4_1 .layout_header.ani_active .logo svg rect,
.main_4_1 .layout_header.ani_active .logo svg path {fill: #000;transform: unset;opacity: 1;}



/*.main_4_2 .layout_header .icon_wrap ,
.main_4_3 .layout_header .icon_wrap ,
.main_4_4 .layout_header .icon_wrap ,
.main_4_1 .layout_header .icon_wrap {transition: transform 0s; transform: unset}*/

.main_4_2 .layout_header .icon_wrap .btn .btn_txt,
.main_4_3 .layout_header .icon_wrap .btn .btn_txt,
.main_4_4 .layout_header .icon_wrap .btn .btn_txt,
.main_4_1 .layout_header .icon_wrap .btn .btn_txt {color: #fff}

.main_4_2 .layout_header.ani_active .icon_wrap .btn .btn_txt,
.main_4_3 .layout_header.ani_active .icon_wrap .btn .btn_txt,
.main_4_4 .layout_header.ani_active .icon_wrap .btn .btn_txt,
.main_4_1 .layout_header.ani_active .icon_wrap .btn .btn_txt {color: #000}

.main_4_2 .layout_header .icon_wrap .btn.lang .ico,
.main_4_3 .layout_header .icon_wrap .btn.lang .ico,
.main_4_4 .layout_header .icon_wrap .btn.lang .ico,
.main_4_1 .layout_header .icon_wrap .btn.lang .ico { background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><defs><style> .cls-1 { stroke: %23fff; stroke-miterlimit: 10; stroke-width: 8px; } .cls-1, .cls-2 { fill: none; } .cls-2 { stroke-width: 0px; } </style></defs><g id="_레이어_2" data-name="레이어 2"><g><circle class="cls-1" cx="70" cy="70" r="50"/><ellipse class="cls-1" cx="70" cy="70" rx="20.55" ry="50"/><line class="cls-1" x1="119.5" y1="70.5" x2="20.5" y2="70.5"/><rect class="cls-2" width="140" height="140"/></g></g></svg>') center/contain no-repeat; }

.main_4_1 .layout_header.ani_active .icon_wrap .btn.lang .ico { background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><defs><style> .cls-1 { stroke: %23000; stroke-miterlimit: 10; stroke-width: 8px; } .cls-1, .cls-2 { fill: none; } .cls-2 { stroke-width: 0px; } </style></defs><g id="_레이어_2" data-name="레이어 2"><g><circle class="cls-1" cx="70" cy="70" r="50"/><ellipse class="cls-1" cx="70" cy="70" rx="20.55" ry="50"/><line class="cls-1" x1="119.5" y1="70.5" x2="20.5" y2="70.5"/><rect class="cls-2" width="140" height="140"/></g></g></svg>') center/contain no-repeat; }

.main_4_1 .layout_header .icon_wrap .btn.customer .ico,
.main_4_3 .layout_header .icon_wrap .btn.customer .ico,
.main_4_4 .layout_header .icon_wrap .btn.customer .ico,
.main_4_2 .layout_header .icon_wrap .btn.customer .ico { background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><defs><style> .cls-1 { stroke-width: 8px; } .cls-1, .cls-2 { stroke: %23fff; stroke-miterlimit: 10; } .cls-1, .cls-2, .cls-3 { fill: none; } .cls-2 { stroke-width: 7px; } .cls-3 { stroke-width: 0px; } </style></defs><g id="_레이어_2" data-name="레이어 2"><g><polyline class="cls-2" points="66.74 93.19 44.75 124.85 35.79 107.02 15.96 104.85 37.14 74.37"/><polyline class="cls-2" points="73.69 93.15 95.72 124.85 104.67 107.02 124.5 104.85 103.06 73.99"/><circle class="cls-1" cx="70" cy="55.42" r="37.92"/><circle class="cls-2" cx="70" cy="55.42" r="18.96"/><rect class="cls-3" width="140" height="140"/></g></g></svg>') center/contain no-repeat; }

.main_4_1 .layout_header.ani_active .icon_wrap .btn.customer .ico { background: url('data:image/svg+xml,<%3Fxml version="1.0" encoding="UTF-8"%3F><svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><defs><style> .cls-1 { stroke-width: 8px; } .cls-1, .cls-2 { stroke: %23000; stroke-miterlimit: 10; } .cls-1, .cls-2, .cls-3 { fill: none; } .cls-2 { stroke-width: 7px; } .cls-3 { stroke-width: 0px; } </style></defs><g id="_레이어_2" data-name="레이어 2"><g><polyline class="cls-2" points="66.74 93.19 44.75 124.85 35.79 107.02 15.96 104.85 37.14 74.37"/><polyline class="cls-2" points="73.69 93.15 95.72 124.85 104.67 107.02 124.5 104.85 103.06 73.99"/><circle class="cls-1" cx="70" cy="55.42" r="37.92"/><circle class="cls-2" cx="70" cy="55.42" r="18.96"/><rect class="cls-3" width="140" height="140"/></g></g></svg>') center/contain no-repeat; }

.main_4_1 .layout_header .icon_wrap .btn.user > a,
.main_4_3 .layout_header .icon_wrap .btn.user > a,
.main_4_4 .layout_header .icon_wrap .btn.user > a,
.main_4_2 .layout_header .icon_wrap .btn.user > a { background: url('data:image/svg+xml,<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><defs><style> .cls-1 { stroke-width: 9.33px; } .cls-1, .cls-2 { stroke: %23fff; stroke-miterlimit: 10; } .cls-1, .cls-2, .cls-3 { fill: none; } .cls-2 { stroke-width: 9px; } .cls-3 { stroke-width: 0px; } </style></defs><g id="_레이어_2" data-name="레이어 2"><g><circle class="cls-1" cx="70" cy="40.77" r="20"/><path class="cls-2" d="M26.63,116.67c0-22.55,19.42-35.49,43.37-35.49,23.95,0,43.37,12.94,43.37,35.49H26.63Z"/><rect class="cls-3" width="140" height="140"/></g></g></svg>') center/contain no-repeat;  }

.main_4_1 .layout_header.ani_active .icon_wrap .btn.user > a { background: url('data:image/svg+xml,<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><defs><style> .cls-1 { stroke-width: 9.33px; } .cls-1, .cls-2 { stroke: %23000; stroke-miterlimit: 10; } .cls-1, .cls-2, .cls-3 { fill: none; } .cls-2 { stroke-width: 9px; } .cls-3 { stroke-width: 0px; } </style></defs><g id="_레이어_2" data-name="레이어 2"><g><circle class="cls-1" cx="70" cy="40.77" r="20"/><path class="cls-2" d="M26.63,116.67c0-22.55,19.42-35.49,43.37-35.49,23.95,0,43.37,12.94,43.37,35.49H26.63Z"/><rect class="cls-3" width="140" height="140"/></g></g></svg>') center/contain no-repeat;  }

.main_4_1 .layout_header .icon_wrap .btn.basket > a ,
.main_4_3 .layout_header .icon_wrap .btn.basket > a ,
.main_4_4 .layout_header .icon_wrap .btn.basket > a ,
.main_4_2 .layout_header .icon_wrap .btn.basket > a { background: url('data:image/svg+xml,<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><defs><style> .cls-1 { stroke-width: 8px; } .cls-1, .cls-2 { stroke: %23fff; stroke-miterlimit: 10; } .cls-1, .cls-2, .cls-3 { fill: none; } .cls-2 { stroke-width: 9px; } .cls-3 { stroke-width: 0px; } </style></defs><g id="_레이어_2" data-name="레이어 2"><g><path class="cls-1" d="M55.32,58.35v-23.41c0-8.08,6.57-14.63,14.68-14.63,8.11,0,14.68,6.55,14.68,14.63v23.41"/><path class="cls-2" d="M39.29,40.83l-10.29,63.83c0,6.63,5.37,12,12,12h57.83c6.63,0,12-5.37,12-12l-10.12-63.83h-61.42Z"/><rect class="cls-3" width="140" height="140"/></g></g></svg>') center/contain no-repeat; }

.main_4_1 .layout_header.ani_active .icon_wrap .btn.basket > a { background: url('data:image/svg+xml,<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><defs><style> .cls-1 { stroke-width: 8px; } .cls-1, .cls-2 { stroke: %23000; stroke-miterlimit: 10; } .cls-1, .cls-2, .cls-3 { fill: none; } .cls-2 { stroke-width: 9px; } .cls-3 { stroke-width: 0px; } </style></defs><g id="_레이어_2" data-name="레이어 2"><g><path class="cls-1" d="M55.32,58.35v-23.41c0-8.08,6.57-14.63,14.68-14.63,8.11,0,14.68,6.55,14.68,14.63v23.41"/><path class="cls-2" d="M39.29,40.83l-10.29,63.83c0,6.63,5.37,12,12,12h57.83c6.63,0,12-5.37,12-12l-10.12-63.83h-61.42Z"/><rect class="cls-3" width="140" height="140"/></g></g></svg>') center/contain no-repeat; }

.main_4_1 .layout_header .icon_wrap .btn.ham .ico,
.main_4_3 .layout_header .icon_wrap .btn.ham .ico,
.main_4_4 .layout_header .icon_wrap .btn.ham .ico,
.main_4_2 .layout_header .icon_wrap .btn.ham .ico { background: url('data:image/svg+xml,<svg id="hamIco" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><defs><style>%23hamIco .cls-1 { stroke: %23fff; stroke-miterlimit: 10; stroke-width: 9px; fill: none;}</style></defs><path class="cls-1" d="M23.5,35.13h93H23.5Z"/><path class="cls-1" d="M23.5,70h93H23.5Z"/><path class="cls-1" d="M23.5,104.88h93H23.5Z"/></svg>') center/contain no-repeat; }

.main_4_1 .layout_header.ani_active .icon_wrap .btn.ham .ico { background: url('data:image/svg+xml,<svg id="hamIco" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><defs><style>%23hamIco .cls-1 { stroke: %23000; stroke-miterlimit: 10; stroke-width: 9px; fill: none;}</style></defs><path class="cls-1" d="M23.5,35.13h93H23.5Z"/><path class="cls-1" d="M23.5,70h93H23.5Z"/><path class="cls-1" d="M23.5,104.88h93H23.5Z"/></svg>') center/contain no-repeat; }

.main_4_1 .layout_header .resp_top_search a .ico,
.main_4_3 .layout_header .resp_top_search a .ico,
.main_4_4 .layout_header .resp_top_search a .ico,
.main_4_2 .layout_header .resp_top_search a .ico {background: url('data:image/svg+xml,<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><defs><style> .cls-1 { stroke-width: 9px; } .cls-1, .cls-2, .cls-3 { fill: none; } .cls-1, .cls-3 { stroke: %23fff; stroke-miterlimit: 10; } .cls-2 { stroke-width: 0px; } .cls-3 { stroke-width: 10px; } </style></defs><g id="_레이어_2" data-name="레이어 2"><g><circle class="cls-1" cx="58.33" cy="58.33" r="35"/><line class="cls-3" x1="116.67" y1="116.67" x2="83.08" y2="83.08"/><rect class="cls-2" width="140" height="140"/></g></g></svg>')center/contain no-repeat;}

.main_4_1 .layout_header.ani_active .resp_top_search a .ico {background: url('data:image/svg+xml,<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 140 140"><defs><style> .cls-1 { stroke-width: 9px; } .cls-1, .cls-2, .cls-3 { fill: none; } .cls-1, .cls-3 { stroke: %23000; stroke-miterlimit: 10; } .cls-2 { stroke-width: 0px; } .cls-3 { stroke-width: 10px; } </style></defs><g id="_레이어_2" data-name="레이어 2"><g><circle class="cls-1" cx="58.33" cy="58.33" r="35"/><line class="cls-3" x1="116.67" y1="116.67" x2="83.08" y2="83.08"/><rect class="cls-2" width="140" height="140"/></g></g></svg>')center/contain no-repeat;}

.main_4_1 .visual_sect {position: relative; width: 100%; height: calc(100vh + 2px);    overflow: hidden; margin-top: -1px}
.main_4_1 .visual_sect .mo_box{display: none}
/*.main_4_1 .visual_sect .cont_box {display: flex; justify-content: space-between ;height: 100%}*/
.main_4_1 .visual_sect .slide { position: relative; height: 100%; transform: translateY(calc(0%)); transition: transform 0.8s ease-in-out ; pointer-events: auto}
.main_4_1 .visual_sect .swiper-container { overflow: visible; position: absolute; left: 0; top: 0; height: calc(100% - 0px); width: auto;  transition: height 1s ease-in-out , top 1s ease-in-out}
.main_4_1 .visual_sect .swiper-wrapper {justify-content: space-between}
.main_4_1 .visual_sect .swiper-slide {width: calc((100vw - 100px) / 3.3) ; position: relative; height: 100%; overflow: visible;}
.main_4_1 .visual_sect .swiper-slide.slide_hide {transform: translateY(calc(100% + 50px)); transition: transform 1s cubic-bezier(0.87,0,0.69,1)}
.main_4_1 .visual_sect .swiper-slide + .swiper-slide {margin-left: -1px}

.main_4_1 .visual_sect .swiper-slide.active {z-index: 3; }
.main_4_1 .visual_sect .swiper-slide.active .cont {display: block; width: calc((105vw - 0px)); position: relative;height: 100%;transform: translateX(calc(-30.3vw + 15px)); overflow: clip; transition: width 1s cubic-bezier(0.87,0,0.69,1) 0.6s, transform 1s cubic-bezier(0.87,0,0.69,1) 0.6s; cursor: default}
.main_4_1 .visual_sect .swiper-slide.active .video:before {opacity: 0.2 !important;}
.main_4_1 .visual_sect .video {position: absolute;left: 50%;top: 50%; transform: translate(-50%,-50%) ;width: 100%;height: 100%; overflow: hidden; opacity: 0; transition: opacity 0.3s ease-in-out 0.3s}
.main_4_1 .visual_sect .video:before {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background-color: #000; opacity: 0;transition: opacity 0.3s ease-in-out; z-index: 5}
.main_4_1 .visual_sect .video:after {content: ""; position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: linear-gradient(180deg, rgba(52,96,192,0) 0%, rgba(0,0,0,0.6755077030812324) 100%); opacity: 0;transition: opacity 0.3s ease-in-out; z-index: 3}

.main_4_1 .visual_sect .video * {width: 100%;height: 100%;object-fit: cover;object-position: center;}

.active-start .visual_sect .video {opacity: 1}

.main_4_1 .visual_sect .swiper-slide .txt_box {position: absolute; left: 0; bottom: 7rem; width: 100%; z-index: 7 ;text-align: center; color: #fff;  transform: translateY(100%); opacity: 0; transition:transform 1s ease-in-out, opacity 1s ease-in-out}
.main_4_1 .visual_sect .swiper-slide .txt_box > * {opacity: 0.4; transition: opacity 0.3s ease-in-out , font-size 0.3s ease-in-out}
.main_4_1 .visual_sect .swiper-slide.slide_hide .txt_box {}
.main_4_1 .visual_sect .swiper-slide .txt_box .en_tit {font-size: 4rem; font-family: 'CormorantGaramond22'; font-weight: 600;}
.main_4_1 .visual_sect .swiper-slide .txt_box .ko_txt {margin-top: 0.5rem;}
.main_4_1 .visual_sect .swiper-slide .txt_box .ko_txt .tit {font-size: 1.6rem; font-weight: 500}
.main_4_1 .visual_sect .swiper-slide .txt_box .ko_txt .txt {font-size: 1.6rem; margin-top: 2rem; display: none}
.main_4_1 .visual_sect .swiper-slide .txt_box .main_btn {margin-top: 7rem; display: none !important;}
.main_4_1 .visual_sect .swiper-slide .txt_box .main_btn span {font-size: max(2.2rem, 12px); font-family: 'CormorantGaramond22'}
.main_4_1 .visual_sect .swiper-slide .txt_box .main_btn::before {box-shadow: inset 0px 0px 0px #fff}
.main_4_1 .visual_sect .swiper-slide .txt_box .main_btn:hover::before {box-shadow: inset 300px 0px 0px #fff;}
.main_4_1 .visual_sect .swiper-slide .txt_box .main_btn:hover span {color: #000}
.main_4_1 .visual_sect .swiper-slide .txt_box .main_btn:hover .ico {background: url('/data/skin/dualsonic/images/common/dual_ico_arrow.svg')center/contain no-repeat;}

.main_4_1 .visual_sect .swiper-slide.active .txt_box {bottom: 50% !important; transform: translateY(50%) !important; opacity: 0}
.main_4_1 .visual_sect .swiper-slide.active .txt_box > * {opacity: 1;}
.main_4_1 .visual_sect .swiper-slide.active .txt_box .en_tit {font-size: 10rem;  transition:font-size 1s ease-in-out 0.5s}
.main_4_1 .visual_sect .swiper-slide.active .txt_box .ko_txt {margin-top: 4rem}
.main_4_1 .visual_sect .swiper-slide.active .txt_box .ko_txt .tit {font-size: 2.5rem; font-weight: 700;  transition:font-size 1s ease-in-out}
.main_4_1 .visual_sect .swiper-slide.active .txt_box .ko_txt .txt {display: block; font-size: 1.8rem;  transition:font-size 1s ease-in-out}

/*.main_4_1 .visual_sect .swiper-slide.active .txt_box {transition: transform 1s ease-in-out 1s , transform 1s ease-in-out }*/

.main_4_2 #wrap.active-start .visual_sect .slide,
.main_4_1 #wrap.active-start .visual_sect .slide{transform: unset;}
.main_4_1 #wrap.active-start .visual_sect .swiper-slide.active .txt_box {opacity: 1; transition:  0.3s ease-in-out 1s}
.main_4_1 .visual_sect.ani_active .swiper-slide {transform: unset; opacity: 1; transition: transform 1s cubic-bezier(0.87,0,0.69,1) 0.8s, opacity 1s ease-in-out 0.8s}
.main_4_1 .visual_sect.ani_active .swiper-slide + .swiper-slide {margin-left: -1px}
.main_4_1 .visual_sect.ani_active .swiper-slide .txt_box { transform: unset; opacity: 1; transition: opacity 1s ease-in-out 1s , transform 1s ease-in-out 1s}
.main_4_1 .visual_sect.ani_active .swiper-slide.active .cont {width: calc((100vw - 100px) / 3.3) ; transform: translateX(0);  transition: width 1s cubic-bezier(0.87,0,0.69,1) , transform 1s cubic-bezier(0.87,0,0.69,1);}
.main_4_1 .visual_sect.ani_active .txt_box {transform: unset; opacity: 0.4}
.main_4_1 .visual_sect.ani_active .video:before {opacity: 0}

.main_4_1 .visual_sect.ani_active .swiper-container {height: calc(100% - var(--header_Height) + 2px);top: var(--header_Height);}

.main_4_1 .visual_sect.ani_active .swiper-slide.active .txt_box .en_tit {font-size:6rem;}
.main_4_1 .visual_sect.ani_active .swiper-slide.active .txt_box .ko_txt .tit {font-size: 2.2rem;}
.main_4_1 .visual_sect.ani_active .swiper-slide.active .txt_box .ko_txt .txt { font-size: 1.6rem;}

.main_4_1 .visual_sect.ani_active.ani_end .swiper-slide.active .txt_box .en_tit { transition:font-size 1s ease-in-out }
.main_4_1 .visual_sect.ani_active.ani_end .swiper-slide.active .txt_box .ko_txt .tit { transition: font-size 1s ease-in-out 1s}
.main_4_1 .visual_sect.ani_active.ani_end .swiper-slide.active .txt_box .ko_txt .txt { transition: font-size 1s ease-in-out 1s}

.main_4_1 .visual_sect.ani_active.ani_end .swiper-slide .cont:hover .txt_box > *{opacity: 1}
.main_4_1 .visual_sect.ani_active.ani_end .swiper-slide .cont:hover .video:before {opacity: 0}
.main_4_1 .visual_sect.ani_active.ani_end .swiper-slide .cont:hover .video:after {opacity: 0.4}
/*.main_4_1 .visual_sect.ani_active .swiper-slide .cont:hover .video {opacity: 1}*/

.main_4_1 .event_sect {margin-top: var(--main_mt); overflow: hidden}
.main_4_1 .event_sect .tit_box {display: none}
.main_4_1 .event_sect .resp_wrap {display: flex; width: 164rem}
.main_4_1 .event_sect .swiper-wrapper {display: flex}
.main_4_1 .event_sect .swiper-slide {width: 50%;}
.main_4_1 .event_sect .swiper-slide + .swiper-slide {margin-left: 3rem}

.main_4_1 .event_sect .cont {display: block; position: relative; padding-top: 41%;}
.main_4_1 .event_sect .img {position:absolute; right: 0; bottom: 0}
.main_4_1 .event_sect .img:before {content: ""; width: 100%; height: 100%; /*background: rgba(0,0,0,0.03);*/ position: absolute; left: 0; top: 0; z-index: 1}
.main_4_1 .event_sect .swiper-slide.type1 .img {width: 100%; height: 100%}
.main_4_1 .event_sect .swiper-slide.type2 .img {width: 100%; height: 100% }
.main_4_1 .event_sect .swiper-slide.type1 .img img {object-fit: cover; object-position: center}
.main_4_1 .event_sect .swiper-slide.type2 .img img {object-fit: contain; object-position: right bottom}
.main_4_1 .event_sect .swiper-slide.type2 .video {width: 50%;}



.main_4_1 .event_sect .img + .img  {margin-left: 3rem}
.main_4_1 .event_sect .img video,
.main_4_1 .event_sect .img img {position: absolute; right: 0; bottom: 0; width: 100%; height: 100%; }
.main_4_1 .event_sect .img video {object-fit: cover}
.main_4_1 .event_sect .txt_box {position: absolute;left: 0;top: 0;width: 100%;height: 100%;padding: 4rem 6rem;display: flex;flex-direction: column;align-items: flex-start;color: #fff;justify-content: center; z-index: 2}
.main_4_1 .event_sect .txt_box .type {font-size: 1.4rem; font-weight: 600}
.main_4_1 .event_sect .txt_box .tit {font-size: 2.2rem; margin-top: 2rem; font-weight: 700}
.main_4_1 .event_sect .txt_box .txt {font-size: 1.6rem; margin-top: 1rem}
.main_4_1 .event_sect .txt_box .main_btn {font-size: 1.6rem; margin-top: auto; background-color: transparent; display: none}

.main_4_1 .slide_move { position: absolute; left: 50%; transform: translateX(-50%); width: 100%; bottom: 5rem; padding: 0 var(--resp_wrap_pd); display: flex; align-items: center; justify-content: flex-end; z-index: 20; color: #fff; max-width: 100%}
.main_4_1 .slide_move .swiper-pagination { display: flex; align-items: center; font-size: 13px; font-weight: 600; text-align: left; position: static }
.main_4_1 .slide_move .swiper-pagination .slash { margin: 0 10px; }
.main_4_1 .slide_move .arr { display: flex; align-items: center; justify-content: flex-start; font-size: 13px; fill: #fff; z-index: 10; cursor: pointer; margin-left: 20px;}
.main_4_1 .slide_move .arr .swiper_btn { display: flex; align-items: center; justify-content: center; cursor: pointer; }
.main_4_1 .slide_move .arr .swiper_btn + .swiper_btn { margin-left: 13px; }
.main_4_1 .slide_move .arr .swiper_btn .ico { width: 1.8rem; height: 1.8rem;  }
.main_4_1 .slide_move .arr .swiper_btn svg .cls-1 { stroke-width: 0px; fill: none}
.main_4_1 .slide_move .arr .swiper_btn svg .cls-2 { fill: none; stroke: #fff; stroke-miterlimit: 10; stroke-width: 10px; transition: stroke .3s}
.main_4_1 .slide_move .swiper-pagination-current {min-width: 18px}

.main_4_1 .swiper-progress-bar{display: block; position: relative; z-index: 1; width: 15rem; height: 2px; margin-left: 20px}
.main_4_1 .swiper-progress-bar .slide_progress-bar {position: absolute; height: 2px;  width: auto; clear: both;  left: 0; right: 0; transition: background .3s}
.main_4_1 .swiper-progress-bar .slide_progress-bar.bg {background: #fff; opacity: 0.2}
.main_4_1 .swiper-progress-bar .slide_progress-bar.loading { left: 0; right: auto; background: #fff; height: 100%; width: 0; transition: 0s 0.1s width linear;}
.main_4_1 .swiper-progress-bar.animate .slide_progress-bar.loading {width: 100%; transition-delay: unset; transition: width var(--transition-duration, 0s) linear;}


.main_4_1 .banner_sect {flex-direction: column; align-items: center; margin-top: 30px; background: linear-gradient(90deg, rgba(78,49,38,1) 0%, rgba(194,153,112,1) 100%);}
.main_4_1 .banner_sect .txt_box {margin-top: -3rem}
.main_4_1 .banner_sect .main_btn {margin-top: 3rem; opacity: 0; transition: opacity 0.3s ease-in-out 1s}
.main_4_1 .banner_sect.active  {opacity: 1}
.main_4_1 .banner_sect.active .main_btn {opacity: 1}



.main_4_1 .routine_sect .tit_box .tit {text-align: left}



.material_sect {display: flex; align-items: flex-start; padding-left: max(var(--resp_wrap_pd),calc((100% - 164rem )/2 + var(--resp_wrap_pd))); margin-top:var(--main_mt)}
.main4 .material_sect .sect_tit_box {flex-shrink: 0;position: sticky;top:10rem; height: 70vh; text-align: left; align-items: flex-start; margin-right: 30rem; justify-content: flex-start}
.main4 .material_sect .sect_tit_box .tit {font-size: clamp(9rem, 5vw + 2rem, 15rem);font-weight: 600;font-family: 'CormorantGaramond22';line-height: 1.3em;}
.main4 .material_sect .sect_tit_box .sub_tit {margin-top: 4rem;font-size: 2.5rem;font-weight: 700;}

.material_sect .slide {display: none}
.material_sect .img_cont {flex: 1; padding-top: 21rem; padding-right: 35rem ;opacity: 1; transition: opacity .5s;}
.material_sect .img_cont .cont_box {max-width: 140rem;  perspective: 1000px; margin-top: 40rem}
.material_sect .img_cont .cont_box .cont { transform-origin: top; }
.material_sect .img_cont .img {position: relative; padding-top: 60%; overflow: hidden; border-radius: 1.5rem; width: 100%;}
.material_sect .img_cont .img img {position: absolute; left: 0%; top: 0%; object-fit: cover; width: 100%; height: 100% ;z-index: 55; }
.material_sect .img_cont .txt_box {margin-top: 2rem; display: flex; align-items: flex-start; word-break: keep-all;}
.material_sect .img_cont .txt_box .en_tit {font-size: 4.8rem; margin-right: 6.5rem; font-family: 'CormorantGaramond22'; font-weight: 600; line-height: 1.2}
.material_sect .img_cont .txt_box .right_box {flex: 1; padding-top: 15px}
.material_sect .img_cont .txt_box .right_box .tit {font-size: 2.5rem; font-weight: 700}
.material_sect .img_cont .txt_box .right_box .txt {font-size: 1.6rem; margin-top: 10px}
.material_sect .img_cont .cont_box.last .txt_box {opacity: 1 !important;}


.main_4_1 .info_banner_sect {margin-top: var(--main_mt)}
.main_4_1 .routine_sect + .info_banner_sect {margin-top: 0}

.main_4_1 .routine_sect .tit_box {width: 164rem}
.main_4_1 .routine_sect .tit_box .tit {font-size: 10rem}
.main_4_1 .routine_sect .tit_box .symbol {width: 20rem; height: 20rem; transform: translate(25%, 45%)}
.main_4_1 .routine_sect .img_list {pointer-events: auto; margin-right: 0}
.main_4_1 .routine_sect .img_list .item {width: 17.4vw}
.main_4_1 .routine_sect .img_list .item + .item {margin-left: 30px}
.main_4_1 .routine_sect .img_list .item .img {position: relative}
.main_4_1 .routine_sect .img_list .item .img video {position: absolute;top: 0;left: 50%;transform: translateX(-50%);width: 100%;height: 100%;object-fit: cover;}
.main_4_1 .routine_sect .img_list .item:nth-child(2) {margin-top: 6.5vw}
.main_4_1 .routine_sect .img_list .item:nth-child(2) .img {padding-top: 17.4vw}
.main_4_1 .routine_sect .img_list .item:first-child .img {padding-top: 26.3vw;}
.main_4_1 .routine_sect .img_list .item:nth-child(4) .img {padding-top: 25.48vw;}
.main_4_1 .routine_sect .img_list .item:nth-child(5) .img {padding-top: 23.688vw;}

.main_4_1 .service_sect2 {margin-bottom: var(--main_mt)}
.main_4_2 .service_sect2 ,
.main_4_3 .service_sect2 {margin-bottom: 0rem}

.main4 .lounge_sect2.new {margin-bottom: var(--main_mt)}
.main_4_1 .lounge_sect2.new .sect_tit_box {margin-bottom: 0}
.main_4_1 .lounge_sect2.new .bg_box {padding-bottom: 0}

.main_4_1 .material_sect .sect_tit_box .tit {font-size: 10rem}




.main4 .type_sect2 .cont_box .cont .txt_box .tit { -webkit-line-clamp: 1;}

.cart_li .cart_goods_detail .product_wrap .product .txt_area {min-width: 0}


.scroll_animation { position: absolute; bottom: 0; left: 50%; height: 180px; color: #fff; z-index: 70; transform: translateX(-50%); display: none}
.scroll_animation > span { display: block; transform: rotate(90deg); font-size: 14px; }
.scroll_animation > .bg { position: relative; height: 100%; width: 1px; margin: 30px auto 0; background: rgba(255,255,255,0.2); }
.scroll_animation > .bg .animation { width: 100%; background:#fff; animation-name: updown; animation-iteration-count: infinite; animation-duration: 3s; animation-timing-function: ease-in-out; }


@keyframes updown { 0% {height:0%} 100% {height:100%} }


@keyframes scroll {
    0% { transform:translate(-50%, 0); opacity:0; }
    40% { opacity:1; }
    80% { transform:translate(-50%, 20px); opacity:0; }
    100% { opacity:0; }
}



@media screen and (max-width: 1920px) {

    .material_sect .img_cont {padding-right: 8vw}

}