/*헤드메뉴*/ #header_wrap {position: absolute; width:100%; height:100px; z-index:10; transition-duration: 0.3s; border-bottom: 1px solid transparent; margin-top: 35px;} #header {position:absolute;left:0;top:0px; max-width: 1800px; width:100%; left: 50%; transform:translateX(-50%) ;z-index:6;-webkit-transition:all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;} #header .header-inner {width:100%; height:100%; display: flex; justify-content: space-between; align-items: center;} #header .gnb { list-style:none; height:100%; position:absolute; right:0px} #header .gnb > li { float:left; position:relative; display:inline-block; width:100px; vertical-align:middle; text-align:center;} #header .gnb > li > a {display:inline-block; line-height:1em; width:100%; color:#fff; opacity:0.8; font-size:15px; letter-spacing:-0.5px; font-weight:600; text-decoration:none;} #header .gnb > li > a:hover { opacity:1} #header .gnb > li.active {background-color: #b0905e} #header .gnb > li.active > a {color: #fff} #header .gnb > li, #header #right-side-open {height:80px;line-height:80px; -webkit-transition: all .3s ease;-moz-transition: all .3s ease;-ms-transition: all .3s ease;-o-transition: all .3s ease;transition: all .3s ease;} #header #right-side-open { position:absolute; right:0; width:100px; cursor:pointer; border-left:1px solid rgba(255,255,255,0.3); text-align:center; display: inline-block; } #header #right-side-open span{display:inline-block;width:20px; height:20px;font-size:20px;line-height:1em;margin-top:-10px; margin-left:-10px; position:absolute; top:50%;left:50%; color:#fff;} #header .gnb .snb {list-style:none; display:none;} #header #logo { margin-left:25px; padding:0} #header #logo a { display:block; width:152px; height:100px; line-height:100px} #header #logo img { width:100%; transition-duration: 0.3s;} #header .gnb .snb,.device-md #header .gnb .snb{display: none;position: absolute;right: -82px;width: 200px; top:80px; border-top: 0;background-color: #121212; z-index:2} #header .gnb .snb li { font-size:14px; line-height:3.1; text-align:left; border-top:1px solid #414141;} #header .gnb .snb li a { color:#FFF; display:block; padding-left:20px} #header .gnb .snb li a:hover {color:#fff; display:block; background-color:#2253b8; text-decoration:none; line-height:3.1} #header .gnb .snb li:first-child { border-top:0} #header .header-inner .h_btnwrap {display: flex; align-items: center; margin-right: 25px;} #header .header-inner .catalog {margin-left: 30px;} /* 구글 번역 버튼 css */ .lang-wrap {position: relative;display: inline-block;} .lang-toggle {color: #fff;border-radius: 6px;cursor: pointer;user-select: none;font-size: 14px;display: flex;align-items: center;gap: 6px;} .lang-dropdown {position: absolute;left: 50%;top: 45px;background: #fff;border: 1px solid #ddd;border-radius: 8px;width: 160px;box-shadow: 0 10px 25px rgba(0,0,0,0.15);overflow: hidden;list-style: none;padding: 0;margin: 0;z-index: 1000; opacity: 0;transform: translate(-50%, -10px);pointer-events: none;transition: opacity 0.25s ease, transform 0.25s ease; text-align: center;} .lang-dropdown.show {opacity: 1;transform: translate(-50%, -10px);pointer-events: auto;} .lang-dropdown li {padding: 10px 16px;font-size: 14px;color: #333;cursor: pointer;transition: background 0.2s;} .lang-dropdown li:hover {background: #f2f2f2;} .lang-dropdown li.active {background: #eee;font-weight: 600;} .lang-toggle .arrow {transition: transform 0.25s;} .lang-toggle.active .arrow {transform: rotate(180deg);} body {top: 0 !important;} .VIpgJd-ZVi9od-aZ2wEe-OiiCO {display: none !important;} .VIpgJd-ZVi9od-ORHb-OEVmcd {display: none;} /* 스크롤 이벤트 */ @media screen and (max-width: 960px) { #header_wrap {height: 80px;} #header { display:block; background-color:transparent; top:0; border-bottom:0;} #header #logo {display:block} #header #logo a {height: 80px; line-height: 80px; width: 132px;} #header .gnb { display:none} } @media screen and (max-width: 640px) { #header_wrap {height: 60px;} #header #logo a {height: 60px; line-height: 60px; width: 102px;} #header .header-inner .catalog {margin-left: 20px;} .lang-dropdown {width: 120px;} .lang-dropdown li {font-size: 13px;} } /*헤드메뉴*/ /*모바일 오른쪽 메뉴*/ #right-side {background-color:#333;position:fixed; z-index:9999; top:0;right:-400px;max-width:400px; width:100%; height:100%; color:#FFF; padding:30px;-webkit-transition: right .3s ease;-moz-transition: right .3s ease;-ms-transition: right .3s ease;-o-transition: right .3s ease;transition: right .3s ease; box-sizing:border-box; overflow:auto;} #right-side .side_gnb .call a {text-align:center; display:block;position:relative;background:#6cc043; color:#fff; font-weight:bold; height:5.0em; line-height:5em; border-radius:3px; margin-top:10px; padding:2px 0 4px 0;} #right-side #btn-close-right-side {position:absolute;top:20px;right:0;color:#fff;width:60px;text-align:center;line-height:40px; font-size:16px; cursor:pointer} #right-side #btn-close-right-side .fa.fa-times { font-size:18px; padding-top:20px} .right-side-on #right-side {right:0;} .right-side-on #wrapper { left:-300px; } .right-side-on #header { left:-300px; } .right-side-on #rs-overlay {display:block;} .quick_menu {width:100%; margin:auto; padding-top:20px} .quick_menu ul { text-align:center} .quick_menu li{display:inline-block; margin-left:-3px; width:80px; border-right:1px solid rgba(255, 255, 255, .3)} .quick_menu li:last-child { border:0} .quick_menu li a{display:block; box-sizing:border-box; color:#f5f5f5; letter-spacing:-0.8px; text-align:center; position:relative; font-size:12px} .quick_menu li a:hover{color:#fff;backface-visibility:hidden} .quick_menu li a.on{color:#fff;border-bottom-color:#FF3300;border-bottom-width:2px;border-bottom-style:solid} .quick_kakao{text-align:center; height:35px; background-color:#ffd800; display:inline-block; clear:both} .quick_kakao a{display:block;position:relative;background:#ffd800} .quick_kakao a img{display:block;margin:0 auto} .side_gnb{position:relative;width:100%;float:left;padding-top:20px;} .side_gnb p{color:#fff; text-align:center; padding:20px } .side_gnb .menu-list{display:block;position:relative;border-bottom:1px solid #121212; margin-top:60px} .side_gnb .menu-list>li>a{display:block;position:relative;color:#fff;font-size:15px;line-height:3.8em;padding:0 1.0em;border-top:1px solid #121212; text-decoration:none} .side_gnb .menu-list>li>a i{display:block;position:absolute;top:50%;transform:translateY(-75%) rotate(135deg);-webkit-transform:translateY(-75%) rotate(135deg);right:1.5em;width:5.31%;max-width:32px;border:1px solid #f2f2f2;border-left-width:0;border-bottom-width:0;transition:transform .3s ease;-webkit-transition:-webkit-transform .3s ease;-ms-transition:transform .3s ease} .side_gnb .menu-list>li.on>a i{-webkit-transform:translateY(-25%) rotate(315deg);transform:translateY(-25%) rotate(315deg)} .side_gnb .menu-list>li>a i:before{content:"";display:block;position:relative;padding-top:100%} .side_gnb .depth-2{display:none;} .side_gnb .depth-2>li { background-color:#ddd} .side_gnb .depth-2>li>a{display:block;color:#f2f2f2;font-size:1.2em;line-height:3.0em;padding:0 1.5em 0 2.2em;border-bottom:1px solid #fff; color:#121212} @media screen and (max-width:640px) { .right_quick { display:none} } /*모바일 오른쪽 메뉴*/ /* 슬라이드 배너 */ .txtslide_wrap {width: 100%; overflow: hidden; pointer-events: none;} .rightslide_wrap {position: absolute; top: 0; left: 0; z-index: 1;} .leftslide_wrap {position: sticky; top: 0; z-index: 99; margin-top: -38px;} .txtslide {display: flex; align-items: center; width: max-content; min-width: 200%; margin: 0; padding: 10px 0; background: #d9d9d9; white-space: nowrap; font-size: 15px; will-change: transform;} .txtslide li {flex: 0 0 auto; padding-right: 150px;} .txtslide li span {font-weight: 700; margin-right: 10px;} .rightslide {animation: marqueeRight 40s linear infinite;} .leftslide {animation: marqueeLeft 40s linear infinite;} @keyframes marqueeRight { 0% {transform: translateX(-50%);} 100% {transform: translateX(0);} } @keyframes marqueeLeft { 0% {transform: translateX(0);} 100% {transform: translateX(-50%);} } /* 슬라이드 배너 */ /*메인배너*/ .main-carousel{padding:0;display:block} .main-carousel .li{position:relative;height:100vh;overflow:hidden} .main-carousel .li .copy_area{position:relative;width:100%;height:100%} .main-carousel .li .video_wrap{position:absolute;top:0;left:0;width:100%;height:100%;overflow:hidden} .main-carousel .li .video_wrap iframe{position:absolute;top:50%;left:50%;width:100vw;height:56.25vw;min-width:177.78vh;min-height:100vh;transform:translate(-50%,-50%);border:0} .main-carousel .li .video_wrap .video_click_blocker { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 2; background: transparent; } .main-carousel .li .slidelogo{position:absolute;top:50%;left:50%;opacity:0;z-index:10;transform:translate(-50%,-30%)} .main-carousel .li .slidelogo.show{animation:logoFadeUp 1.5s cubic-bezier(.22,1,.36,1) forwards} @keyframes logoFadeUp{ 0%{opacity:0;transform:translate(-50%,-20%)} 100%{opacity:1;transform:translate(-50%,-50%)} } @media screen and (max-width: 960px) { .main-carousel .li .copy_area .slidelogo img {height: 40px;} } @media screen and (max-width: 640px) { .main-carousel .li .copy_area .slidelogo img {height: 30px;} } /*메인배너*/ /* section 공통 */ /* 공통 */ :root{ --tr:0.3s; } .trd{transition:var(--tr);} .section {min-height: 100vh; padding: 120px 0;} .section .titwrap {margin-bottom: 60px; text-align: center;} .section .titwrap h2 {font-size: 40px; font-weight: 700;} @media screen and (max-width: 960px) { .section {padding: 100px 0; min-height: auto;} .section .titwrap {margin-bottom: 50px;} .section .titwrap h2 {font-size: 30px;} } @media screen and (max-width: 640px) { .section {padding: 80px 0;} .section .titwrap {margin-bottom: 40px;} .section .titwrap h2 {font-size: 24px;} } /* section 공통 */ /* section1 */ #section1 {text-align: center; display: flex; align-items: center; background-image: url(../img/s1_bg.jpg); background-repeat: no-repeat; background-position-x: center; position: relative; background-size: cover;} #section1 .logo {margin-bottom: 80px;} #section1 .txt { font-size: 17px; line-height: 1.5; color: rgba(255,255,255,.9);} @media screen and (max-width: 960px) { #section1 .logo {margin-bottom: 60px;} #section1 .logo img {height: 50px;} #section1 .txt {font-size: 16px;} } @media screen and (max-width: 640px) { #section1 .txt {font-size: 15px;} } /* section1 */ /* section2 */ #section2 {padding: 120px 20px; max-width: 1540px; margin: 0 auto;} #section2 .titwrap {text-align: center;} #section2 .conwrap .con {display: flex; gap: 60px; margin-bottom: 120px;} #section2 .conwrap .con:nth-child(2n) {flex-direction: row-reverse;} #section2 .conwrap .con:last-child {margin-bottom: 0;} #section2 .conwrap .con .circle {position: relative; overflow: visible; display: flex; align-items: center; flex: 0 0 auto;} #section2 .conwrap .con .circle .icon {position: relative; z-index: 2; flex: 0 0 auto; width: 400px; height: 400px; box-shadow: 0px 20px 35px rgba(0, 0, 0, .05); border-radius: 50%; transition: transform 0.4s ease; transform: scale(0.85); background-size: cover;} #section2 .conwrap .con .circle:hover .icon {transform: scale(1);} #section2 .conwrap .con .circle .txtwrap {position: relative; z-index: 1; flex: 0 0 auto; width: 200px; height: 300px; padding: 0; box-sizing: border-box; overflow: hidden; opacity: 0; background-color: #d9d9d9; border-radius: 0 200px 200px 0; display: flex; flex-direction: column; justify-content: center; transition: width 0.6s ease, padding 0.6s ease, opacity 0.35s ease; margin-left: -280px;} #section2 .conwrap .con .circle:hover .txtwrap {width: 900px; padding: 45px 70px 45px 350px; opacity: 1;} #section2 .conwrap .con .circle .txtwrap h5 {min-width: 250px; font-size: 15px; margin-bottom: 10px; font-weight: 400; color: #666;} #section2 .conwrap .con .circle .txtwrap h2 {min-width: 250px; font-size: 26px; margin-bottom: 20px;} #section2 .conwrap .con .circle .txtwrap p {min-width: 250px; font-size: 15px; line-height: 1.5; color: #222;} /* 짝수번째 .con : 텍스트박스가 왼쪽에 열림 */ #section2 .conwrap .con:nth-child(2n) .circle {flex-direction: row-reverse;} #section2 .conwrap .con:nth-child(2n) .circle .txtwrap {border-radius: 200px 0 0 200px; margin-left: 0; margin-right: -280px;} #section2 .conwrap .con:nth-child(2n) .circle:hover .txtwrap {padding: 45px 350px 45px 70px;} /* 아이콘 이미지 */ #section2 .conwrap .con .circle1 .icon {background-image: url(../img/s2_img1.png);} #section2 .conwrap .con .circle1:hover .icon {background-image: url(../img/s2_img1_h.png);} #section2 .conwrap .con .circle2 .icon {background-image: url(../img/s2_img2.png);} #section2 .conwrap .con .circle2:hover .icon {background-image: url(../img/s2_img2_h.png);} #section2 .conwrap .con .circle3 .icon {background-image: url(../img/s2_img3.png);} #section2 .conwrap .con .circle3:hover .icon {background-image: url(../img/s2_img3_h.png);} #section2 .conwrap .con .circle4 .icon {background-image: url(../img/s2_img4.png);} #section2 .conwrap .con .circle4:hover .icon {background-image: url(../img/s2_img4_h.png);} #section2 .conwrap .con .circle5 .icon {background-image: url(../img/s2_img5.png);} #section2 .conwrap .con .circle5:hover .icon {background-image: url(../img/s2_img5_h.png);} #section2 .conwrap .con .circle6 .icon {background-image: url(../img/s2_img6.png);} #section2 .conwrap .con .circle6:hover .icon {background-image: url(../img/s2_img6_h.png);} @media screen and (max-width: 960px) { #section2 .conwrap .con {flex-direction:column; gap:40px; margin-bottom:80px;} #section2 .conwrap .con:nth-child(2n) {flex-direction:column;} #section2 .conwrap .con .circle {width:100%;} #section2 .conwrap .con .circle .icon {width:300px; height:300px;} #section2 .conwrap .con .circle .txtwrap {height:300px; border-radius:200px; flex: initial;} #section2 .conwrap .con .circle .txtwrap h5 {font-size: 14px;} #section2 .conwrap .con .circle .txtwrap h2 {font-size: 22px;} #section2 .conwrap .con .circle .txtwrap p {font-size: 14px;} #section2 .conwrap .con .circle:hover .txtwrap {padding:45px 70px 45px 320px; width: 100%; } #section2 .conwrap .con:nth-child(2n) .circle .txtwrap {border-radius: 200px;} } @media screen and (max-width: 640px) { #section2 .conwrap .con {margin-bottom: 50px; gap: 20px;} #section2 .conwrap .con .circle {flex-direction: column;} #section2 .conwrap .con .circle .icon {width: 200px; height: 200px; margin-bottom: 0;} #section2 .conwrap .con .circle .txtwrap {width: 100%; max-height: 0; height: auto; margin-left: 0; padding: 0 30px; border-radius: 10px; opacity: 0; overflow: hidden; transform: translateY(-20px); transition: max-height .6s ease, padding .6s ease, margin .6s ease, opacity .4s ease, transform .6s ease;} #section2 .conwrap .con .circle .txtwrap h5 {font-size: 12px;} #section2 .conwrap .con .circle .txtwrap h2 {font-size: 18px; margin-bottom: 15px;} #section2 .conwrap .con .circle .txtwrap p {font-size: 12px;} #section2 .conwrap .con .circle:hover .txtwrap {width: 100%; max-height: 500px; margin-top: 20px; padding: 30px; opacity: 1; transform: translateY(0);} #section2 .conwrap .con:nth-child(2n) .circle {flex-direction: column;} #section2 .conwrap .con:nth-child(2n) .circle .txtwrap {margin-right: 0; padding: 0 30px; border-radius: 10px;} #section2 .conwrap .con:nth-child(2n) .circle:hover .txtwrap {margin-top: 20px; padding: 30px;} } /* section2 */ /* section3 */ #section3 {position:relative; width:100%; overflow:hidden; background:#fff; padding:120px 20px;} #section3 .inner {position:relative; width:100%; padding: 0;} #section3 .titwrap {margin-top:100px; margin-bottom:0;} #section3 .titwrap img {width:100%;} .s3_stage {position:relative; width:100%; height:100vh; overflow:hidden;} .s3_stage .s3_stage_inner {position:relative; width:100%; height:100%;} .s3_stage .s3_scroll_wrap {position:absolute; left:0; top:50%; width:100%; height:400px; z-index:10; will-change:transform,opacity;} .s3_stage .s3_product_scene {position:relative; width:100%; height:100%;} .s3_stage .s3_item {will-change:transform,opacity;} .s3_stage .s3_labels {position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none;} .s3_stage .s3_label {will-change:transform,opacity;} #s3_stage1 .s3_tit_wrap {position:absolute; left:0; top:0; width:100%; z-index:20;} #s3_stage1 .titwrap {will-change:transform,opacity;} #s3_stage1 .s3_product_scene {position:relative; width:100%; height:100%;} #s3_stage1 .s3_parts_row {position:absolute; left:50%; top:55%; display:flex; align-items:center; justify-content:center; gap:0; transform:translate(-50%,-50%);} #s3_stage1 .s3_parts_row .s3_item {position:relative; flex:0 0 auto;} #s3_stage1 .s3_item-cap {margin-left:0; z-index: 4;} #s3_stage1 .s3_item-pump {margin-left:-180px; z-index: 3;} #s3_stage1 .s3_item-inner {margin-left:-150px; z-index: 1;} #s3_stage1 .s3_item-outer {margin-left:-465px; z-index: 2;} #s3_stage1 .s3_item img {display:block; width:auto; height:180px;} #s3_stage1 .s3_labels {position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none;} #s3_stage1 .s3_label {position:absolute; top:55%; display:flex; flex-direction:column; align-items:center; gap:8px; white-space:nowrap; transform:translateX(-50%);} #s3_stage1 .s3_label-cap {left:calc(50% - 570px);} #s3_stage1 .s3_label-pump {left:calc(50% - 340px);} #s3_stage1 .s3_label-inner {left:50%;} #s3_stage1 .s3_label-outer {left:calc(50% + 440px);} #s3_stage1 .s3_dot {width:7px; height:7px; border-radius:50%; background:#000; display:block;} #s3_stage1 .s3_line {width:1px; height:150px; background:#000; display:block;} #s3_stage1 .s3_label strong {font-size:16px; font-weight:500;} #s3_stage2 {position:relative; width:100%; height:100vh; overflow:hidden;} #s3_stage2 .s3_stage_inner {position:relative; width:100%; height:100%;} #s3_stage2 .s3_scroll_wrap2 {position:absolute; left:0; top:50%; width:100%; z-index:10; will-change:transform,opacity;} #s3_stage2 .s3_product_scene {position:relative; width:100%; height:100%; min-height:500px; display:flex; align-items:center; justify-content:center;} #s3_stage2 .s3_item {position:absolute; left:50%; top:50%; width:350px; will-change:transform,opacity;} #s3_stage2 .s3_item img {display:block; width:350px; height:auto; transform:translate(-50%,-50%);} #s3_stage2 .s3_item-cap {margin-top:-110px; z-index: 4;} #s3_stage2 .s3_item-pump {margin-top:-160px; z-index: 3;} #s3_stage2 .s3_item-inner {margin-top:-40px; z-index: 1;} #s3_stage2 .s3_item-outer {margin-top:-0; z-index: 2;} #s3_stage2 .s3_labels {position:absolute; left:0; top:0; width:100%; height:100%; pointer-events:none; z-index:20;} #s3_stage2 .s3_label {position:absolute; left:calc(50% + 0px); display:flex; align-items:center; gap:10px; white-space:nowrap; will-change:transform,opacity;} #s3_stage2 .s3_label-cap {top:calc(50% - 320px);} #s3_stage2 .s3_label-pump {top:calc(50% - 210px);} #s3_stage2 .s3_label-inner {top:calc(50% + -50px);} #s3_stage2 .s3_label-outer {top:calc(50% + 250px);} #s3_stage2 .s3_dot {width:7px; height:7px; border-radius:50%; background:#000; display:block; flex:0 0 auto;} #s3_stage2 .s3_line {width:370px; height:1px; background:#000; display:block; flex:0 0 auto;} #s3_stage2 .s3_label strong {font-size:16px; font-weight:500; display:block; flex:0 0 auto;} @media screen and (max-width:960px){ #section3 {padding: 100px 20px;} #section3 .titwrap {margin-top: 70px;} .s3_stage .s3_scroll_wrap {height:350px;} #s3_stage1 .s3_item-cap {margin-left:0;} #s3_stage1 .s3_item-pump {margin-left:-100px;} #s3_stage1 .s3_item-inner {margin-left:-70px;} #s3_stage1 .s3_item-outer {margin-left:-270px;} #s3_stage1 .s3_item img {height:100px;} #s3_stage1 .s3_label {top:56%; gap:7px;} #s3_stage1 .s3_label-cap {left:calc(50% - 300px);} #s3_stage1 .s3_label-pump {left:calc(50% - 170px);} #s3_stage1 .s3_label-inner {left:50%;} #s3_stage1 .s3_label-outer {left:calc(50% + 230px);} #s3_stage1 .s3_line {height:100px;} #s3_stage1 .s3_label strong {font-size:14px;} #s3_stage2 .s3_product_scene {min-height:450px;} #s3_stage2 .s3_item {width:320px;} #s3_stage2 .s3_item img {width:320px;} #s3_stage2 .s3_item-cap {margin-top:-80px;} #s3_stage2 .s3_item-pump {margin-top:-90px;} #s3_stage2 .s3_item-inner {margin-top:10px;} #s3_stage2 .s3_item-outer {margin-top:10px;} #s3_stage2 .s3_label {left:calc(50% - 20px); gap:8px;} #s3_stage2 .s3_label-cap {top:calc(50% - 230px);} #s3_stage2 .s3_label-pump {top:calc(50% - 125px);} #s3_stage2 .s3_label-inner {top:calc(50% - 40px);} #s3_stage2 .s3_label-outer {top:calc(50% + 195px);} #s3_stage2 .s3_line {width:260px;} #s3_stage2 .s3_label strong {font-size:14px;} } @media screen and (max-width:600px){ #section3 {padding: 80px 20px;} .s3_stage {height:100vh;} .s3_stage .s3_scroll_wrap {height:300px;} #s3_stage1 .s3_parts_row {width:100%;} #s3_stage1 .s3_item-cap {margin-left:0;} #s3_stage1 .s3_item-pump {margin-left:-50px;} #s3_stage1 .s3_item-inner {margin-left:-35px;} #s3_stage1 .s3_item-outer {margin-left:-135px;} #s3_stage1 .s3_item img {height:50px;} #s3_stage1 .s3_label {top:56%; gap:5px;} #s3_stage1 .s3_label-cap {left:calc(50% - 133px);} #s3_stage1 .s3_label-pump {left:calc(50% - 80px);} #s3_stage1 .s3_label-inner {left:51%;} #s3_stage1 .s3_label-outer {left:calc(50% + 120px);} #s3_stage1 .s3_dot {width:5px; height:5px;} #s3_stage1 .s3_line {height:60px;} #s3_stage1 .s3_label strong {font-size:12px;} #s3_stage2 .s3_product_scene {min-height:380px;} #s3_stage2 .s3_item {width:180px;} #s3_stage2 .s3_item img {width:180px;} #s3_stage2 .s3_item-cap {margin-top:-50px;} #s3_stage2 .s3_item-pump {margin-top:-80px;} #s3_stage2 .s3_item-inner {margin-top:-20px;} #s3_stage2 .s3_item-outer {margin-top:0;} #s3_stage2 .s3_label {left:calc(50% - 30px); gap:6px;} #s3_stage2 .s3_label-cap {top:calc(50% - 165px);} #s3_stage2 .s3_label-pump {top:calc(50% - 110px);} #s3_stage2 .s3_label-inner {top:calc(50% - 30px);} #s3_stage2 .s3_label-outer {top:calc(50% + 120px);} #s3_stage2 .s3_dot {width:5px; height:5px;} #s3_stage2 .s3_line {width:100px;} #s3_stage2 .s3_label strong {font-size:12px;} } /* section3 */ /* section4 */ #section4 {position: relative; z-index: 1;} #section4 .inner {padding: 0; max-width: 100%;} #section4 .titwrap h2 {text-align: center;} /* section4 */ /* section5 */ #section5 {padding: 0 20px; max-width: 1440px; margin: 0 auto;} #section5 iframe {border-radius: 50px;} #section5 .video_wrap video {width: 100%;} @media screen and (max-width:640px){ #section5 iframe {border-radius: 20px;} } /* section5 */ /* section6 */ #section6 {display: flex; align-items: center;} #section6 .inner {padding: 0; max-width: 100%;} /* section6 */ /* section7 */ #section7 {display: flex; align-items: center; background-color: #fcfcfc; overflow: hidden;} #section7 .conwrap .empwrap {max-width: 1000px; display: flex; justify-content: space-between; margin: 100px auto;} #section7 .conwrap .empwrap[data-aos="fade-up"] {transform:translate3d(0,50px,0);} #section7 .conwrap .empwrap[data-aos="fade-up"].aos-animate {transform:translate3d(0,0,0);} #section7 .conwrap .empwrap .emp {display: flex; flex-direction: column; align-items: center; cursor: pointer; transition:transform .35s ease; opacity: .3;} #section7 .conwrap .empwrap .emp.on {transform:scale(1.4); opacity: 1;} #section7 .conwrap .empwrap .emp .icon {margin-bottom: 15px;} #section7 .conwrap .empwrap .emp .icon img {height: 120px;} #section7 .conwrap .empwrap .emp p {font-size: 18px; font-weight: 600;} #section7 .formwrap {max-width: 1600px; margin: 0 auto;} #section7 .formwrap[data-aos="fade-up"] {transform:translate3d(0,50px,0);} #section7 .formwrap[data-aos="fade-up"].aos-animate {transform:translate3d(0,0,0);} #section7 .formwrap .input_page {margin-bottom: 30px;} #section7 .formwrap .input_page h3 {font-size: 16px; min-width:150px;} #section7 .formwrap .input_page input {width: 100%; border: 0; border-bottom: 1px solid #999; font-size: 16px; height: 40px; background-color: transparent;} #section7 .formwrap .input_page input:focus {border: 0; border-bottom: 1px solid #999; box-shadow: none;} #section7 .formwrap .input_inwrap {display: flex; justify-content: space-between;} #section7 .formwrap .input_inwrap .input_page {width: 32.333%; display: flex; align-items: center;} #section7 .formwrap .input_inquiry h3 {font-size: 16px; margin-bottom: 30px;} #section7 .formwrap .input_inquiry textarea {width: 100%; border: 0; border-bottom: 1px solid #999; font-size: 16px; height: 200px; resize: none; background-color: transparent;} #section7 .formwrap .input_inquiry textarea:focus {border: 0; border-bottom: 1px solid #999; box-shadow: none;} #section7 .btnwrap .submit {margin-top: 40px; display: flex; justify-content: space-between; align-items: center;} #section7 .btnwrap .submit button {background-color: #747474; padding: 10px 20px; font-size: 18px; border: 0; border-radius: 22px; font-weight: 600; color: #fff;} #section7 .btnwrap .submit .send {transition:transform .12s ease;} #section7 .btnwrap .submit .send:active {transform:scale(.8);} #x_message{position:absolute;width:300px;border-radius:10px;height:50px;text-align:center;line-height:50px;top:50px;left:50%;margin-left:-150px;background-color:#FDD;border:2px solid #C00;font-weight:700;color:#666;z-index:1121212} #x_loading{position:absolute;display:none;width:200px;height:200px;top:50px;left:50%;margin-left:-100px;z-index:1;font-size:100px;line-height:200px} #x_message.x-msg1 {background-color: #FDD;} #x_message.x-msg2 {background-color: #9C6;border:2px solid #096;} @media screen and (max-width:960px) { #section7 .conwrap {flex-direction: column;} #section7 .conwrap .empwrap {margin: 80px auto;} #section7 .conwrap .empwrap .emp {width: 20%;} #section7 .conwrap .empwrap .emp.on {transform: scale(1.2);} #section7 .conwrap .empwrap .emp .icon img {height: 80px;} #section7 .conwrap .empwrap .emp p {font-size: 16px;} #section7 .formwrap .input_inwrap {flex-direction: column;} #section7 .formwrap .input_inwrap .input_page {width: 100%;} #section7 .formwrap .input_page {display: flex; align-items: center;} #section7 .formwrap .input_page h3 {font-size: 15px;} #section7 .formwrap .input_page input {font-size: 15px;} #section7 .formwrap .input_inquiry textarea {font-size: 15px;} #section7 .btnwrap .submit {margin-top: 30px;} #section7 .btnwrap .submit button {font-size: 16px;} } @media screen and (max-width:640px) { #section7 .conwrap .empwrap {margin: 50px auto; justify-content: flex-start; flex-wrap: wrap;} #section7 .conwrap .empwrap .emp {width: 33.333%; margin-top: 50px;} #section7 .conwrap .empwrap .emp .icon img {height: 70px;} #section7 .conwrap .empwrap .emp p {font-size: 14px;} #section7 .formwrap .input_page h3 {font-size: 14px;} #section7 .formwrap .input_page input {font-size: 14px;} #section7 .formwrap .input_inquiry textarea {font-size: 14px;} #section7 .btnwrap .submit button {font-size: 14px;} } /* section7 */ /*서브상단*/ .sub_visual{position:relative;max-width:2560px;margin:0 auto;height:500px;overflow:hidden;background-repeat:no-repeat;background-position:center top} .sub_visual.visual01 .bg{background-image:url(../img/sub_visual01.jpg)} .sub_visual.visual02 .bg{background-image:url(../img/sub_visual02.jpg)} .sub_visual.visual03 .bg{background-image:url(../img/sub_visual03.jpg)} .sub_visual.visual04 .bg{background-image:url(../img/sub_visual04.jpg)} .sub_visual.visual05 .bg{background-image:url(../img/sub_visual05.jpg)} .sub_visual:hover .bg{-webkit-transform:scale(1.1);-moz-transform:scale(1.1);-o-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)} .sub_visual .title_wrap {display:table; margin:0 auto; height:500px} .sub_visual .title { max-width:1240px; display:table-cell; vertical-align:middle} .sub_visual h3{position:relative;z-index:2;font-size:54px;font-weight:600; letter-spacing:-4px; color:#FFF;text-align:center} .sub_visual .sub_title{font-size:15px;text-align:center;filter:alpha(opacity=60);position:relative;font-weight:600; color:#FFF;z-index:2;opacity:.8; padding-top:10px} .sub_visual .cover{position:absolute;top:0;left:0;width:100%;height:100%;background:url(../img/sub_visual_cover.png) center bottom no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;min-width:1200px;opacity:.6;z-index:1} .sub_visual .bg{position:absolute;top:0;left:0;width:100%;height:100%;background-position:center center;background-repeat:no-repeat;-webkit-background-size:cover;-moz-background-size:cover;-o-background-size:cover;background-size:cover;z-index:0;-webkit-transition:all .5s ease;-moz-transition:all .5s ease;-o-transition:all .5s ease;transition:all .5s ease} @media screen and (max-width: 640px) { .sub_visual { height:400px} .sub_visual .title_wrap { max-width:100%; height:400px} .sub_visual h3 { font-size:35px} .sub_visual .sub_title { font-size:13px} } /*서브상단*/ /*서브 하단 네비*/ .category-wrap {width:100%; height:70px; background-color:#fff; border-bottom:1px solid #ddd; clear:both; background-attachment:scroll; position:relative; z-index:3; display: none;} .sub_navI_warp { background-color:#fff; max-width:1300px; z-index:3; position:relative; margin: -70px auto;} .all-wrap{max-width:1300px; height:69px; margin:0 auto; transition:all .3s ease;} .all-wrap .loca-wrap{width:100%;margin:0 auto;height:69px} .all-wrap .loca-wrap .loca-area i{float:left;display:inline-block;width:60px;height:71px; line-height:65px; color:#121212; border-right:1px solid #ddd; padding:0; margin-top:0; text-align:center} .all-wrap .loca-wrap .loca-area{height:69px;float:left;} .all-wrap .loca-wrap .loca-area > a {display:inline-block;width:54px;height:100%; float:left; line-height:100%; text-align:center;} .all-wrap .loca-wrap .loca-area > a img {margin-top:17px;} .all-wrap .loca-wrap .loca-area>ul {float: left;margin:0; padding:0;} .all-wrap .loca-wrap .loca-area>ul>li{float:left;width:220px;height:70px;position:relative; margin-left:-1px} .all-wrap .loca-wrap .loca-area>ul>li button{height:69px;width:220px;position:relative;text-align:left; background-image:url(../img/loca_arrow_off.png);background-position-y:50%;background-position-x:100%;background-repeat:no-repeat;-webkit-transition:background .3s ease;-moz-transition:background .3s ease;-o-transition:background .3s ease;-ms-transition:background .3s ease; border:0; background-color: inherit; box-sizing: border-box; border-left: 1px solid #ddd; border-right: 1px solid #ddd;} .all-wrap .loca-wrap .loca-area>ul>li button.active{background-image:url(../img/loca_arrow_on.png);background-position-y:50%;background-position-x:100%;background-repeat:no-repeat;} .all-wrap .loca-wrap .loca-area>ul>li button span {padding-left: 19px;background-color: transparent; color:#333; font-size:15px} .all-wrap .loca-wrap .loca-area>ul>li div{overflow:hidden;height:0;position:relative} .all-wrap .loca-wrap .loca-area>ul>li div ul{display:block;position:absolute;width:100%;left:0;border:1px solid #ddd; background-color:#fff; padding:0} .all-wrap .loca-wrap .loca-area>ul>li div ul li a{ border-bottom:1px solid #ddd; background:#fff;height:46px;color:#121212;line-height:46px;display:block;-webkit-transition:background .3s ease;-moz-transition:background .3s ease;-o-transition:background .3s ease;-ms-transition:background .3s ease;padding-left:19px; font-size:15px; box-sizing:border-box} .all-wrap .loca-wrap .loca-area>ul>li div ul li a:hover { color:#121212; font-weight:bold} .all-wrap .loca-wrap .share-area {float: right; display:block; padding-top:16px;box-sizing: border-box;} .all-wrap .loca-wrap .share-area .hide-wrap{width:151px;height:34px;overflow:hidden;float:left} .all-wrap .loca-wrap .share-area .hide-wrap .hide-area{width:151px;height:34px;position:relative;left:200px} .all-wrap .loca-wrap .share-area .hide-wrap .hide-area ul {overflow: hidden; padding:0; margin:0} .all-wrap .loca-wrap .share-area .hide-wrap .hide-area ul li {float: left;margin-left: 13px; border-bottom: 1px solid #ddd; cursor:pointer} .all-wrap .loca-wrap .share-area .hide-wrap .hide-area ul li:first-child {margin-left: 0;} .all-wrap .loca-wrap .share-area .share-btn{width:34px;height:34px;background-image:url(../img/share_open_bt.png);float:right;text-indent:-9999px;padding-left:18px;box-sizing:unset;background-repeat:no-repeat;background-position-x:right;transition:all .5s ease; background-color: inherit; border:0; margin-right:20px} .all-wrap .loca-wrap .share-area .share-btn.active {background-image: url(../img/share_close_bt.png);border-left: 1px solid #fff;} @media screen and (max-width: 640px) { .all-wrap .loca-wrap .loca-area {100%; float:none;} .all-wrap .loca-wrap .loca-area > a {width:10%;} .all-wrap .loca-wrap .share-area { display:none} .all-wrap .loca-wrap .loca-area > ul {width:100%;} .all-wrap .loca-wrap .loca-area > ul > li { width:50%} .all-wrap .loca-wrap .loca-area > ul > li:first-child { border:0} .all-wrap .loca-wrap .loca-area > ul > li button {width:100%; border-right:0} .all-wrap .loca-wrap .loca-area i { display:none} } /*서브 하단 네비*/ /*서브 기본 상단*/ .content_wrap { width:100%;} .content_wrap .txtCon { max-width:1640px; margin:0 auto; padding:60px 20px 50px 20px; font-weight:400; position:relative; clear:both} .content_wrap .txtCon .sub_title{ margin-bottom:100px} .content_wrap .txtCon h1 { margin:0 0 40px 0; font-size:40px; padding:0 0 20px 0; color:#121212; font-weight:bold; letter-spacing:-2px; text-align:center} .content_wrap .txtboard { max-width:1640px; font-size:12px} .content_wrap .sub_title h3 {margin:50px 0 0 0; text-align:center; font-size:42px; color:#121212; font-weight:600;} .content_wrap .sub_title p { margin:10px 0 0; text-align:center; font-size:15px; color:#121212;} @media screen and (max-width: 640px) { .content_wrap .txtCon .sub_title h1 { font-size:32px} .content_wrap .sub_title h3 { font-size:35px} } /*서브 기본 상단*/ /*서브 하단 네비*/ .share-area {float: right; display:block; padding-top:16px;box-sizing: border-box;} .share-area .hide-wrap{width:151px;height:34px;overflow:hidden;float:left} .share-area .hide-wrap .hide-area{width:151px;height:34px;position:relative;left:200px} .share-area .hide-wrap .hide-area ul {overflow: hidden; padding:0; margin:0} .share-area .hide-wrap .hide-area ul li {float: left;margin-left: 13px; cursor:pointer} .share-area .hide-wrap .hide-area ul li:first-child {margin-left: 0;} .share-area .share-btn{width:34px;height:34px;background-image:url(../img/share_open_bt.png);float:right;text-indent:-9999px;padding-left:18px;box-sizing:unset;background-repeat:no-repeat;background-position-x:right;transition:all .5s ease; background-color: inherit; border:0; margin-right:20px} .share-area .share-btn.active {background-image: url(../img/share_close_bt.png);border-left: 1px solid #fff;} @media screen and (max-width: 640px) { .share-area{ display:none} } /*서브 하단 네비*/ /*서브 탭메뉴*/ .tab_navi { width:100%; margin:0 auto;} .tab_navi ul { text-align:center; padding-bottom:100px;} .tab_navi li{display:inline-block; margin-left:-5px; margin-right:10px; min-width:17%;} .tab_navi li a{text-align:center;color:#333; height:50px;line-height:50px;font-size:16px;display:block;background-color:#f2f2f2; border-radius: 50px; text-decoration:none; padding: 0 15px;} .tab_navi li a:hover{color:#fff;background-color:#14b6c2} .tab_navi li a.on{color:#fff;background-color:#14b6c2;font-weight:600} .tab_navi li:first-child { border-left:0px} .tab_navi li:last-child { margin-right:0} /*서브 탭메뉴*/ /*내용관리 헤더관리*/ #head-edit-form .line #co_head_bg_class { width: 150px; height:40px } #head-edit-form .line #co_head_sub_title { width: 350px; } #head-edit-form .tc {text-align:center; margin-top:1em;} /*내용관리 헤더관리*/ /*푸터*/ #footer { padding: 40px 0px; width: 100%; background-color:#fff;} #footer .inner {display: flex;} #footer .ft_logo {margin-right: 100px;} #footer .ft_infowrap ul {display: flex; margin-bottom: 20px;} #footer .ft_infowrap ul li {margin-right: 30px;} #footer .ft_infowrap ul li:last-child {margin-right: 0;} #footer .ft_infowrap ul li a {font-size: 15px; font-weight: 600; color: #333;} #footer .ft_infowrap .ft_info {line-height: 1.5; margin-bottom: 20px;} #footer .ft_infowrap .ft_info p {margin-bottom: 5px;} #footer .ft_infowrap .ft_info p:last-child {margin-bottom: 0;} #footer .ft_infowrap .ft_info p span {font-size: 14px; font-weight: 400; color: #999; margin-right: 30px;} #footer .ft_infowrap .ft_info p span:last-child {margin-right: 0;} #footer .ft_infowrap .ft_info p span b {font-weight: 600; color: #666; margin-right: 10px;} #footer .ft_infowrap .copyright {font-size: 13px; color: #aaa;} #footer .ft_infowrap .copyright a {color: #aaa;} .quickwrap {position: fixed; bottom: 20px; right: 20px; z-index: 99; opacity: 0; transition-duration: 0.3s;} .quickwrap #top_btn {width: 60px; height: 60px; border-radius: 50%; border: 0; background-color: #fff; box-shadow: 5px 5px 9px rgba(0, 0, 0, .05);} .quickwrap .catalogbtn {width: 60px; height: 60px; background-color: #ddd; border-radius: 50%; box-shadow: 5px 5px 9px rgba(0, 0, 0, .05); margin-bottom: 10px;} .quickwrap .catalogbtn a {display: flex; align-items: center; justify-content: center; height: 100%;} .scrolled .quickwrap {opacity: 1;} @media screen and (max-width: 640px) { #footer .inner {flex-direction: column;} #footer .ft_logo {margin-right: 0; margin-bottom: 40px;} #footer .ft_infowrap ul {flex-direction: column;} #footer .ft_infowrap ul li {margin-right: 0; margin-bottom: 5px;} #footer .ft_infowrap ul li:last-child {margin-bottom: 0;} #footer .ft_infowrap ul li a {font-size: 14px;} #footer .ft_infowrap .ft_info p span {font-size: 13px;} #footer .ft_infowrap .copyright {font-size: 12px;} .quickwrap #top_btn {width: 50px; height: 50px;} .quickwrap .catalogbtn {width: 50px; height: 50px;} .quickwrap .catalogbtn a img {height: 25px;} } /*푸터*/ /* 푸터팝업*/ .tl_pop_con{background:#fff;} .tl_pop_con h2.f_pop_tit{width:100%;height:80px;line-height:80px;background:#121212;font-size:20px;color:#fff;} .tl_pop_con h2.f_pop_tit img {display:inline-block;margin-left:50px;margin-right:5px;margin-top:-10px;width:120px;} .tl_pop_con h2.f_pop_tit span {display:inline-block; padding-left:50px;} .f_pop_wrap {line-height:23px;text-align:justify;word-break:break-all;font-size:15px;overflow-y:auto;} .f_pop_wrap strong {color:#121212;font-weight:normal;} .f_pop_wrap p { color:#666; padding:40px 50px; line-height:1.6;} .mfp-close:after { content: ''; display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("../img/btn_close.png") no-repeat center center; -webkit-transition: -webkit-transform 300ms; transition: -webkit-transform 300ms; transition: transform 300ms; transition: transform 300ms, -webkit-transform 300ms; border-radius: 50%; } .mfp-close { width: 40px; height: 40px; text-indent: -999px;opacity: 1; overflow: hidden; background-color:transparent; border:0; } button.mfp-close:hover:after { -webkit-transform: rotate(270deg); -ms-transform: rotate(270deg); transform: rotate(270deg); } /* 푸터팝업*/ /*회원가입*/ #fregister { max-width:1200px; margin:0 auto; padding:20px 0} #fregisterform { max-width:1200px; margin:0 auto; padding:20px 0} /*회원가입*/ @media screen and (max-width: 960px) { /*공통*/ #open-button{position:fixed;z-index:10000;right:15px;padding-top:18px;width:75px; height:80px;-webkit-transition:all .3s ease-out;-moz-transition:all .3s ease-out;-o-transition:all .3s ease-out;transition:all .3s ease-out;cursor:pointer;display:none;} #open-button .navicon-line{position:absolute;width:20px;height:2px;border-radius:1px;background:#fff;-webkit-transition:all .7s ease-out;-moz-transition:all .7s ease-out;-o-transition:all .7s ease-out;transition:all .7s ease-out} #open-button .nl1 {top: 11px;right: 10px; width:30px;} #open-button .nl2 {top: 19px;right: 10px; width:24px;} #open-button .nl3 {top: 27px;right: 10px; width:30px;} #open-button.on>div>div{transform:rotate(225deg);-ms-transform:rotate(225deg);-webkit-transform:rotate(225deg);width:25px;position:absolute;top:15px;right:10px;margin:0;padding:0;background-color:#fff;} #open-button.on>div>div:first-child{transform:rotate(135deg);-ms-transform:rotate(135deg);-webkit-transform:rotate(135deg)} #open-button.scrolled .navicon-line {background-color: #333;} #open-button.on.scrolled >div>div{background-color:#fff;} /*공통*/ }