@charset "utf-8";


/* layout */
html, body { height:100%;}
body { color:#686868; letter-spacing:-.05em; -webkit-text-size-adjust:none; -webkit-font-smoothing:antialiased;}
body.intro-lock {
  overflow: hidden;
}
#wrap {	position:relative; width:100%; min-width:320px;height:100%; font-size:1rem; }
.w-inner {	width:1800px;	position:relative;	margin-left:auto;	margin-right:auto;}
.inner {	width:1600px;	position:relative;	margin-left:auto;	margin-right:auto;}


@media all and (max-width:1799px) {	
	.w-inner {width:94%;}
}
@media all and (max-width:1599px) {	
	.inner {width:94%;}
}


/* link_btn */
.link_btn{}
.link_btn a{font-size: 16px; color: #fff; display: inline-block; line-height: 52px; border: 1px solid #fff; padding: 0 50px 0 30px; border-radius: 50px; font-weight: 700; position: relative;}
.link_btn a::after{content: '▶'; font-size: 9px; position: absolute; top: 50%; transform: translateY(-50%); right: 20px;}
.link_btn a:hover{border-color: #000; background-color: #000000; color: #fff;}
.link_btn.black a{border-color: #000; background-color: #000000;}
.link_btn.black a:hover{border-color: #000; background-color: transparent; color: #000;}
.link_btn.border a{border-color: #000; color: #000;}
.link_btn.border a:hover{border-color: #000; background-color: #000000; color: #fff;}

@media all and (max-width:1280px){
	.link_btn a{line-height: 48px; padding: 0 45px 0 25px;}
}
@media all and (max-width:1024px){
	.link_btn a{line-height: 45px; font-size: 15px; padding: 0 42px 0 22px;}
	.link_btn a::after{font-size: 8px; right: 18px;}
}
@media all and (max-width:768px){
	.link_btn a{line-height: 42px;}
}
@media all and (max-width:500px){}


/* header */
#header{position: fixed; z-index: 99; top: 0; left: 0; width: 100%; height: 100px;}
#header .w-inner{height: 100%;}
#header .w-inner #logo{position: absolute; top: 50%; transform: translateY(-50%); left: 0;}
#header .w-inner #logo a{}
#header .w-inner #logo a img{filter: grayscale(1) invert(1) brightness(10);}
#header .w-inner .right_menu{position: absolute; top: 50%; transform: translateY(-50%); right: 0; display: flex; align-items: center;}
#header .w-inner .right_menu .pcGnb{margin-right: 60px;}
#header .w-inner .right_menu .pcGnb > ul{display: flex; align-items: center; gap:60px;}
#header .w-inner .right_menu .pcGnb > ul > li{position: relative;}
#header .w-inner .right_menu .pcGnb > ul > li > div{}
#header .w-inner .right_menu .pcGnb > ul > li > div > a{color: #fff; font-size: 18px; font-weight: 700;}
#header .w-inner .right_menu .pcGnb > ul > li:hover > div > a{color: #ef1b23 !important; text-decoration: underline; text-underline-position: under;}
#header .w-inner .right_menu .pcGnb > ul > li > ul{display: none; position: absolute; background-color: #000000; border-radius: 20px; padding: 40px; width: max-content; left: 50%; transform: translateX(-50%); top: 50px; min-width: 220px;}
#header .w-inner .right_menu .pcGnb > ul > li > ul > li{}
#header .w-inner .right_menu .pcGnb > ul > li > ul > li + li{margin-top: 15px;}
#header .w-inner .right_menu .pcGnb > ul > li > ul > li > a{color: #fff; font-size: 18px; font-weight: 600;}
#header .w-inner .right_menu .pcGnb > ul > li > ul > li:hover > a{text-decoration: underline; text-underline-position: under;}
#header .w-inner .right_menu .menuToggle{margin-left: 50px; width: 62px; display: flex; flex-direction: column; justify-content: space-between; height: 22px; align-items: flex-end; cursor: pointer;} 
#header .w-inner .right_menu .menuToggle span{height: 3px; background-color: #fff; display: block; transition: .4s;}
#header .w-inner .right_menu .menuToggle span.t{width: 34px;}
#header .w-inner .right_menu .menuToggle span.m{width: 100%;}
#header .w-inner .right_menu .menuToggle span.b{background-color: #ef1b23 !important; width: 42px;}
#header .w-inner .right_menu .menuToggle:hover span.t{width: 100%;}
#header .w-inner .right_menu .menuToggle:hover span.m{width: 34px;}
#header .w-inner .right_menu .menuToggle:hover span.b{width: 85%;}
#header .w-inner .right_menu .menuToggle.on span.t{width: 100%;}
#header .w-inner .right_menu .menuToggle.on span.m{width: 34px;}
#header .w-inner .right_menu .menuToggle.on span.b{width: 85%;}
#header .w-inner .right_menu .link_btn{}
#header .w-inner .right_menu .link_btn a{border-width: 2px;}


#header:hover{background-color: #fff; border-bottom: 1px solid #e5e5e5;}
#header.on{border-bottom: 1px solid #e5e5e5;}
#header.ons{border-bottom: 1px solid #e5e5e5;}
#header.onss{border-bottom: 1px solid #e5e5e5;}
#header:hover .w-inner #logo a img{filter: grayscale(0) invert(0) brightness(1);}
#header.on .w-inner #logo a img{filter: grayscale(0) invert(0) brightness(1);}
#header.ons .w-inner #logo a img{filter: grayscale(0) invert(0) brightness(1);}
#header.onss .w-inner #logo a img{filter: grayscale(0) invert(0) brightness(1);}
#header:hover .w-inner .right_menu .pcGnb > ul > li > div > a{color: #222}
#header.on{background-color: #fff;}
#header.ons{background-color: #fff;}
#header.onss{background-color: #fff;}
#header.on .w-inner .right_menu .pcGnb > ul > li > div > a{color: #222}
#header.ons .w-inner .right_menu .pcGnb > ul > li > div > a{color: #222}
#header.onss .w-inner .right_menu .pcGnb > ul > li > div > a{color: #222}
#header:hover .w-inner .right_menu .link_btn a{border-color: #000; background-color: #000;}
#header.on .w-inner .right_menu .link_btn a{border-color: #000; background-color: #000;}
#header.ons .w-inner .right_menu .link_btn a{border-color: #000; background-color: #000;}
#header.onss .w-inner .right_menu .link_btn a{border-color: #000; background-color: #000;}
#header:hover .w-inner .right_menu .menuToggle span{background-color: #000;}
#header.on .w-inner .right_menu .menuToggle span{background-color: #000;}
#header.ons .w-inner .right_menu .menuToggle span{background-color: #000;}
#header.onss .w-inner .right_menu .menuToggle span{background-color: #000;}

@media all and (max-width:1280px){
	#header{height: 80px;}
	#header .w-inner #logo a img{max-width: 260px;}
	#header .w-inner .right_menu .menuToggle{margin-left: 35px;}
	#header .w-inner .right_menu .pcGnb > ul > li > ul{top: 40px;}
}
@media all and (max-width:1024px){
	#header .w-inner .right_menu .pcGnb{display: none;}
}
@media all and (max-width:768px){
	#header{height: 70px;}
	#header .w-inner #logo a img{max-width: 222px;}
	#header .w-inner .right_menu .menuToggle{width: 54px; margin-left: 30px;}
	#header .w-inner .right_menu .menuToggle span{height: 2px;}
	#header .w-inner .right_menu .menuToggle span.t{width: 30px;}
	#header .w-inner .right_menu .menuToggle span.b{width: 38px;}
    #header .w-inner .right_menu .menuToggle:hover span.t{width: 100%;}
    #header .w-inner .right_menu .menuToggle:hover span.m{width: 30px;}
    #header .w-inner .right_menu .menuToggle:hover span.b{width: 85%;}
    #header .w-inner .right_menu .menuToggle.on span.t{width: 100%;}
    #header .w-inner .right_menu .menuToggle.on span.m{width: 30px;}
    #header .w-inner .right_menu .menuToggle.on span.b{width: 85%;}
}
@media all and (max-width:500px){
	#header .w-inner .right_menu .link_btn{display: none;}
	#header .w-inner .right_menu .menuToggle{width: 45px; margin-left: 25px; height: 20px;}
	#header .w-inner .right_menu .menuToggle span.t{width: 26px;}
	#header .w-inner .right_menu .menuToggle span.b{width: 32px;}
    #header .w-inner .right_menu .menuToggle:hover span.t{width: 100%;}
    #header .w-inner .right_menu .menuToggle:hover span.m{width: 26px;}
    #header .w-inner .right_menu .menuToggle:hover span.b{width: 85%;}
    #header .w-inner .right_menu .menuToggle.on span.t{width: 100%;}
    #header .w-inner .right_menu .menuToggle.on span.m{width: 26px;}
    #header .w-inner .right_menu .menuToggle.on span.b{width: 85%;}
}


.moGnb{position: fixed; top: -100vh; background-color: #fafafa; width: 100%; height: calc(100vh - 100px); z-index: 98; transition: .8s;}
.moGnb.on{top: 100px;}
.moGnb > ul{display: flex; justify-content: center; max-width: 1000px; margin-left: auto; margin-right: auto; height: 100%; border-left: 1px solid #ddd; border-right: 1px solid #ddd;}
.moGnb > ul > li{text-align: center; width: 33.3333%; padding-top: 100px; height: 100%; transition: .4s;}
.moGnb > ul > li:hover{background-color: #fff;}
.moGnb > ul > li + li{border-left: 1px solid #ddd;}
.moGnb > ul > li > div{}
.moGnb > ul > li > div > a{font-size: 30px; font-weight: 700; color:#000;}
.moGnb > ul > li:hover > div > a{color: #ef1b23;}
.moGnb > ul > li > ul{margin-top: 40px;}
.moGnb > ul > li > ul > li{}
.moGnb > ul > li > ul > li + li{margin-top: 25px;}
.moGnb > ul > li > ul > li > a{font-size: 20px; font-weight: 500; color:#777;}
.moGnb > ul > li > ul > li:hover > a{text-decoration: underline; text-underline-position: under; text-decoration-thickness:1px; color: #000;}
.moGnb .link_btn{display: none;}

@media all and (max-width:1280px) {
    .moGnb{height: calc(100vh - 80px);}
    .moGnb.on{top: 80px;}
}
@media  all and (max-width:768px) {
    .moGnb{height: calc(100vh - 70px); background-color: #dedede;}
    .moGnb.on{top: 70px;}
    .moGnb > ul{flex-direction: column; justify-content: flex-start; align-items: flex-start; height: auto;}
    .moGnb > ul > li{width: 100%; padding-top: 0; height: auto; text-align: left;}
    .moGnb > ul > li > div > a{font-size: 24px; padding: 20px 20px; display: block; background-color: #fff; pointer-events: none; border-bottom: 1px solid #ddd;}
    .moGnb > ul > li > ul{display: none; margin-top: 0; background-color: #fafafa;}
    .moGnb > ul > li > ul > li{}
    .moGnb > ul > li > ul > li + li{margin-top: 0;}
    .moGnb > ul > li > ul > li > a{display: block; padding: 12px 30px; border-bottom: 1px solid #ddd; font-size: 18px;}
    .moGnb > ul > li > ul > li:hover > a{background-color: #fff;}
}
@media  all and (max-width:500px) {
    .moGnb .link_btn{display: block; text-align: right; margin-right: 3%; margin-top: 20px;}
    .moGnb .link_btn a{border-color: #000; background-color: #000;}
    .moGnb > ul > li > div > a{font-size: 22px; padding: 15px 20px;}
}


/* footer */
#footer {background-color: #000; padding: 100px 0 110px;}
#footer .inner{}
#footer .inner .top{display: flex; justify-content: space-between; padding-bottom: 70px; margin-bottom: 50px; border-bottom: 1px solid #333;}
#footer .inner .top .l_cont{display: flex; flex-direction: column; justify-content: space-between;}
#footer .inner .top .l_cont .f_logo{font-size: 40px; font-weight: 700; color: #fff;}
#footer .inner .top .l_cont .info{}
#footer .inner .top .l_cont .info h3{font-size: 28px; color: #fff; font-weight: 700; margin-bottom: 20px;}
#footer .inner .top .l_cont .info .list{display: flex; gap:20px;}
#footer .inner .top .l_cont .info .list li{}
#footer .inner .top .l_cont .info .list li a{font-size: 16px; font-weight: 500; color: #fff; opacity: 0.7;}
#footer .inner .top .r_cont{}
#footer .inner .top .r_cont > ul{text-align: right; display: flex; gap:110px;}
#footer .inner .top .r_cont > ul > li{}
#footer .inner .top .r_cont > ul > li > div{margin-bottom: 20px;}
#footer .inner .top .r_cont > ul > li > div > a{font-size: 18px; font-weight: 700; color: #fff;}
#footer .inner .top .r_cont > ul > li > ul{}
#footer .inner .top .r_cont > ul > li > ul > li{}
#footer .inner .top .r_cont > ul > li > ul > li + li{margin-top: 13px;}
#footer .inner .top .r_cont > ul > li > ul > li > a{font-size: 16px; font-weight: 500; 	color: #cccccc;}
#footer .inner .bottom{display: flex; justify-content: space-between;}
#footer .inner .bottom .l_cont{}
#footer .inner .bottom .l_cont .info{}
#footer .inner .bottom .l_cont .info span{display: inline-block; font-size: 15px; font-weight: 400; color: #fff; opacity: 0.5; margin-right: 15px; line-height: 1.8em;}
#footer .inner .bottom .r_cont{text-align: right; font-size: 15px; color: #fff; opacity: 0.4;}
#footer .inner .bottom .r_cont .copy{}
#footer .inner .bottom .r_cont .design{margin-top: 8px;}
#footer .inner .bottom .r_cont .design a{font-size: 15px; color: #fff;}

@media all and (max-width:1280px){
	#footer{padding: 80px 0 90px;}
	#footer .inner .top{padding-bottom: 60px; margin-bottom: 45px;}
	#footer .inner .top .l_cont .f_logo{font-size: 36px;}
	#footer .inner .top .l_cont .info h3{font-size: 26px;}
	#footer .inner .top .r_cont > ul{gap:60px;}
	#footer .inner .top .r_cont > ul > li > div > a{font-size: 17px;}
	#footer .inner .top .r_cont > ul > li > ul > li > a{font-size: 15px;}
	#footer .inner .bottom{flex-direction: column; gap:20px;}
	#footer .inner .bottom .l_cont .info span{margin-right: 13px;}
	#footer .inner .bottom .r_cont{text-align: left;}
}
@media all and (max-width:1024px){
	#footer{padding: 70px 0 80px;}
	#footer .inner .top{padding-bottom: 55px; margin-bottom: 40px;}
	#footer .inner .top .l_cont{width: 100%; gap:50px;}
	#footer .inner .top .l_cont .info h3{font-size: 24px; margin-bottom: 17px;}
	#footer .inner .top .r_cont > ul{display: none;}
}
@media all and (max-width:768px){
	#footer{padding: 60px 0 70px;}
	#footer .inner .top{padding-bottom: 50px;}
	#footer .inner .top .l_cont{gap:40px;}
	#footer .inner .top .l_cont .f_logo{font-size: 32px;}
	#footer .inner .top .l_cont .info h3{font-size: 22px; margin-bottom: 15px;}
	#footer .inner .top .l_cont .info .list{gap:15px;}
	#footer .inner .top .l_cont .info .list li a{font-size: 15px;}
	#footer .inner .bottom .l_cont .info span{font-size: 14px;}
	#footer .inner .bottom .r_cont{font-size: 14px;}
}
@media all and (max-width:500px){
	#footer{padding: 50px 0 60px;}
	#footer .inner .top{padding-bottom: 30px; margin-bottom: 30px;}
	#footer .inner .top .l_cont{gap:30px;}
	#footer .inner .top .l_cont .f_logo{font-size: 27px;}
	#footer .inner .top .l_cont .info .list{gap:11px;}
	#footer .inner .top .l_cont .info .list li a{font-size: 14px;}
}


.quick{position: fixed; z-index: 999; top: 50%; transform: translateY(-50%); right: 25px; display: flex; flex-direction: column; align-items: center; gap:20px;}
.quick > li{box-shadow: 1px 6px 12px rgba(0,0,0,0.08); cursor: pointer; }
.quick .inquiry{background-color: #ef1b23; display: flex; flex-direction: column; justify-content: center; align-items: center; width: 82px; height: 82px; border-radius: 100%; border-top-left-radius: 0px;}
.quick .inquiry .img{margin-bottom: 8px; margin-top: -5px;}
.quick .inquiry .img img{max-width: 100%;}
.quick .inquiry p{color: #fff; font-size: 15px; font-weight: 700;}
.quick .go_top{border-radius: 100%; overflow: hidden;}
.quick .go_top .img{}
.quick .go_top .img img{}

@media all and (max-width:768px) {
    .quick{display: none;}
}


#intro_section {
  background-color: #1d1d1d;
  position: fixed;
  z-index: 9999;
  top: 0; left: 0;
  width: 100%; height: 100%;
}

#intro_section.on {
  animation: transout 1.4s forwards;
}

#intro_section .img img{position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 100%; height: 100%; object-fit: cover;}

/* 텍스트 */
#intro_section .txt {
  position: absolute;
  width: 100%;
  text-align: center;
  top: 50%;
  transform: translateY(-100%);
  font-size: 64px;
  color: #fff;
  font-weight: 700;
  transition: opacity 0.6s ease, transform 0.6s ease;
}

#intro_section .txt span {
  display: inline-block;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.4s ease;
  white-space: pre;
}

#intro_section .txt span.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 텍스트 사라질 때 */
#intro_section .txt.on {
  opacity: 0;
  transform: translateY(-40px);
}

/* 로고 */
#intro_section .logo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -100%);
  opacity: 0;
  transition:
    opacity 0.6s ease,
    transform 0.8s ease,
    top 0.8s ease,
    left 0.8s ease;
  will-change: transform, top, left, opacity;
}

#intro_section .logo img {
  max-width: 420px; /* 처음 크게 */
  transition: max-width 0.8s ease;
}

/* 로고 등장 */
#intro_section .logo.on {
  opacity: 1;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
}

/* 로고 축소 + 좌상단 이동 */
#intro_section .logo.shrink {
  transform: translate(0, 0);
  top: 30px;
  left: 60px;
}

#intro_section .logo.shrink img {
  max-width: 314px;
}

/* 제품 리스트 */
#intro_section .pd_list {
  position: absolute;
  top: 50%;
	transform: translateY(-50%);
  width: 100%;
  opacity: 0;
  transition: opacity 1s ease;
}

#intro_section .pd_list.show {
  opacity: 1;
}

#intro_section .pd_list > div {
  display: flex;
  justify-content: center;
  gap: 15px;
}

#intro_section .pd_list .pd {
  opacity: 0;
  transform: translateY(60px) scale(0.85);
  transition: transform 650ms cubic-bezier(.22,1,.36,1), opacity 500ms;
  max-width: 220px;
}
#intro_section .pd_list .pd img{
	max-width: 100%;
}

#intro_section .pd_list.show .pd {
  opacity: 1;
  transform: translateY(0) scale(1.05);
}

#intro_section .pd_list.hide .pd {
  opacity: 0;
  transform: translateY(60px) scale(0);
  transition: transform 650ms cubic-bezier(.22,1,.36,1), opacity 500ms;
}

#intro_section .progress{position: absolute; left: 50%; transform: translateX(-50%); bottom: 80px; height: 2px; background-color: rgba(255,255,255,0.2); width: 80vw;}
#intro_section.on .progress{animation: transout 1.4s forwards;}
#intro_section .progress .bar{position: absolute; left: 0; top: 0; height: 2px; width: 0%; background-color: #ef1b23;}

/* 키프레임 */
@keyframes transout {
  0% { opacity: 1; }
  100% { opacity: 0; }
}

/* 반응형 */

@media all and (max-width:1799px){
	#intro_section .logo.shrink{left: 3%;}
}
@media all and (max-width: 1280px) {
  #intro_section .txt { font-size: 56px; }
  #intro_section .logo.shrink{top: 24px;}
  #intro_section .logo img { max-width: 380px; }
  #intro_section .logo.shrink img { max-width: 260px; }
  #intro_section .pd_list .pd { max-width: 180px; }
}

@media all and (max-width: 768px) {
  #intro_section .txt { font-size: 42px; }
  #intro_section .logo.shrink{top: 22px;}
  #intro_section .logo.shrink img{max-width: 300px}
  #intro_section .logo img { max-width: 300px; }
  #intro_section .logo.shrink img { max-width: 222px; }
	#intro_section .pd_list > div{gap:8px;}
  #intro_section .pd_list .pd { max-width: 140px; }
}

@media all and (max-width: 500px) {
  #intro_section .txt { font-size: 30px; }
}