@charset "utf-8";

/* 
 * content CSS Document
 *
 */

 /* visual */
 #header {border-bottom: 0; position: relative;}
.area-subVisual {--sizeHig: 500rem; color: var(--color-white);}
.area-subVisual .inr {overflow: hidden; border-radius: 20rem; max-width: calc(var(--sub-wide) * 1rem); height:var(--sizeHig); display: flex; align-items: center;}
.area-subVisual .obj-bg {position:absolute; bottom:0; left:0; width:100%; height:100%; background-color: var(--color-black); background-repeat:no-repeat; background-position:50% 50%; background-size:cover; transition:transform 5s ease;}
.area-subVisual .text {color: var(--color-white); display: flex; align-items: center; justify-content: space-between; z-index: 10;}
.area-subVisual .tit h2 {font-size: var(--font55); font-weight: 700}
.area-subVisual .tit p {font-size: var(--font18); margin-top:30rem; line-height: 1.5;}
.scroll-icon {display: flex; flex-direction: column; align-items: center; z-index:9;}
.scroll-icon .scroll-txt {font-size: 15rem; font-weight: 400; letter-spacing: -0.025em; color: var(--color-white); writing-mode: tb;}
.scroll-icon .scroll-dot {margin-top: 10px;}
.scroll-icon .scroll-dot em {display: block; width:5rem; height: 5rem; border-radius: 50%; margin: 5rem auto; background:var(--color-white); animation: scroll-icon 1.5s linear infinite; opacity:0.1; transition:all 0.4s ease-in-out;}
.scroll-icon .scroll-dot em.dot1 {animation-delay:0s;}
.scroll-icon .scroll-dot em.dot2 {animation-delay:0.2s;}
.scroll-icon .scroll-dot em.dot3{animation-delay:0.3s;}

/* img */
[data-sublayout="about"] .obj-bg {background-image: url(/images/content/visual1.jpg);}
[data-sublayout="product"] .obj-bg {background-image: url(/images/content/visual2.jpg);}
[data-sublayout="certificate"] .obj-bg {background-image: url(/images/content/visual3.jpg);}
[data-sublayout="notice"] .obj-bg {background-image: url(/images/content/visual4.jpg);}
/* lnb */
.area-lnb {width: 100%; border-bottom: 1rem solid #e5e5e5;}
.area-lnb ul {height: 100%; display: flex; gap: 20rem; justify-content: center; align-items: center;}
.area-lnb li a {display: block; padding: 25rem 40rem; font-size: var(--font18); font-weight: 600; color: #c9c9c9;}
.area-lnb li a.on {position: relative; color: var(--color-point);}
.area-lnb li a.on::before {content: ''; position: absolute; bottom: -1rem; left: 0; background: var(--color-point); width: 100%; height: 3rem;}

/* common */
#content {padding: 100rem 0; min-height: 300rem;}
.subTit {text-align: center; margin-bottom: 50rem;}
.subTit h2 {font-size: var(--font45); font-weight:700; line-height: 1.4;}
.subTit em {font-size: var(--font18); font-weight: 400; display: block; letter-spacing: 0.01em; text-transform: uppercase; color: #c9c9c9; margin-bottom: 20rem;}
.mo_show {display: none;}

@media (max-width:767px){
	#content {padding: 80rem 0;}
	.mo_show {display: block;}
	.subTit {margin-bottom: 30rem;}
	.area-subVisual {--sizeHig: 400rem}
	.area-subVisual .tit p {margin-top:15rem;}
}
@media (max-width:480px){
	#content {padding: 60rem 0;}
	.area-subVisual {--sizeHig: 300rem}
	.area-subVisual .inr {border-radius: 10rem;}
	.area-subVisual .text {width: 100%; padding: 20rem;}
	.scroll-icon {display: none;}
	.subTit em {margin-bottom: 10rem;}
	.area-lnb ul {gap: 10rem;}
	.area-lnb li a {padding: 18rem 20rem; font-weight: 500;}
	.mo_hide {display: none;}
}
@keyframes scroll-icon {
	10% {opacity: 0.1;}
	20% {opacity: 0.6;}
	30% {opacity: 1;}
}

/* 연혁 */
[data-sub="about1"] .subCont{margin-top:70rem !important;}
[data-sub="about1"] .hisImg {display: flex; align-items: center; width: 100%; height: 380rem; padding: 80rem 60rem; box-sizing: border-box; color: var(--color-white); background: url(/images/content/img_about1.jpg) no-repeat 50% 50% / cover;}
[data-sub="about1"] .hisImg em {font-size: var(--font18); font-weight: 400; display: block; text-transform: uppercase; letter-spacing: 0.015em; margin-bottom: 25rem;} 
[data-sub="about1"] .hisImg h2 {font-size: var(--font40); font-weight: 700; line-height: 1.4;} 
[data-sub="about1"] .hisBox {position: relative;width: 100%; height: 100%; display: flex; flex-direction: column; padding: 30rem 0;}
[data-sub="about1"] .hisBox::before { position: absolute; content: ''; top: 0; left: 50%; transform: translateX(-50%); width: 2rem; height: 100%; background: #eee;}
[data-sub="about1"] .hisBox .box {align-self: flex-end; text-align: left; padding-top: 80rem; width: 50%;}
[data-sub="about1"] .hisBox .box:nth-child(odd) {align-self: flex-start; text-align: right; padding-right: 100rem;}
[data-sub="about1"] .hisBox .box:nth-child(even) {padding-left: 100rem;}
[data-sub="about1"] .hisBox .box:nth-child(odd) h3::before { right: -106rem;}
[data-sub="about1"] .hisBox .box:nth-child(even) h3::before { left: -106rem;}
[data-sub="about1"] .hisBox .box h3 {position: relative; font-size: var(--font45); font-weight: 700;font-family:var(--font-eng); margin-bottom: 20rem;}
[data-sub="about1"] .hisBox .box h3::before, [data-sub="about1"] .hisBox .box h3::after {content: ''; position: absolute; top: 50%; border-radius: 50%; transform: translateY(-50%);}
[data-sub="about1"] .hisBox .box h3::before {width: 14rem; height: 14rem;  background: var(--color-white); border: 2rem solid var(--color-black);}
[data-sub="about1"] .hisBox .box li {font-size: var(--font18); color: #555; position: relative;}
[data-sub="about1"] .hisBox .box li + li {margin-top: 8rem;}
[data-sub="about1"] .hisBox .year {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 100%; text-align: center; white-space: nowrap; font-size: 120rem; letter-spacing: 0.05em; font-style: italic; font-weight: 900; z-index: -10; color: #f5f6f9;}
@media (max-width:768px){
	[data-sub="about1"] .subCont{margin-top:0 !important;}
}

/* 오시는 길 */
[data-sub="about2"] .mapImg {border-radius: 15rem; overflow: hidden; border: 1rem solid #e5e5e5;}
[data-sub="about2"] .mapImg iframe {width: 100%; height: 600rem;}
[data-sub="about2"] .root_daum_roughmap {width: 100%; height: 600rem;}
[data-sub="about2"] .root_daum_roughmap .wrap_map {height: 100%;}
[data-sub="about2"] .root_daum_roughmap .wrap_controllers, .root_daum_roughmap .cont, .root_daum_roughmap .map_border {display: none;}
[data-sub="about2"] .mapInfo {position: relative; z-index: 10; width: 90%; margin: -100rem auto 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 30rem; padding: 50rem; box-sizing: border-box; background: var(--color-point); color: var(--color-white);}
[data-sub="about2"] .mapInfo .txt { width: calc(100% - 150rem)}
[data-sub="about2"] .mapInfo .txt h5 {font-size: var(--font30); font-weight: 600; margin-bottom: 20rem;}
[data-sub="about2"] .mapInfo .txt ul {font-size: var(--font18); display: flex; flex-wrap: wrap; align-items: center; gap: 10rem 25rem;}
[data-sub="about2"] .mapInfo .txt li b {font-weight: 500; margin-right: 10rem;}
[data-sub="about2"] .mapInfo .btn {display: flex; align-items: center; justify-content: space-between; width: 170rem; height: 100rem; font-weight: 600; background: rgba(255, 255, 255, 0.2); padding: 20rem; transition: .3s;}
[data-sub="about2"] .mapInfo .btn i {width: 25rem; height: 25rem; font-size: 15rem; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-white); color: var(--color-point);}
[data-sub="about2"] .mapInfo .btn:hover {background: rgba(255, 255, 255, 1); color: var(--color-point);}
[data-sub="about2"] .mapInfo .btn:hover i {background: var(--color-point); color: var(--color-white);}

/* 제품소개 */
.tab-menu {display: inline-flex; gap:5rem; text-align: center; margin-top:30rem; padding: 8rem; border: 1rem solid #e5e5e5; border-radius:50rem;}
.tab-menu li {width: 160rem;}
.tab-menu li a {display:block; font-size: var(--font18); padding: 18rem 0; width: 100%; color: #a9a9a9; font-weight: 500; border-radius:50rem; transition: .3s;} 
.tab-menu li a.on {background:var(--color-point); color: var(--color-white); pointer-events: none;}
.tab-menu li a:hover {background: #f5f6f9;}

@media (max-width:1080px){
	[data-sub="about1"] .mo_show {display: block;}
	[data-sub="about1"] .hisImg {height: 350rem;}
	[data-sub="about2"] .mapInfo {width: 90%; margin: -80rem auto 0 auto;}
	[data-sub="about2"] .mapInfo .txt {width: 80%;}
	[data-sub="about2"] .mapInfo .txt ul {flex-wrap: wrap;}
	[data-sub="about2"] .mapInfo .btn {width: 20%;}
	[data-sub="about2"] .mapInfo .btn {flex-direction: column;}
}
@media (max-width:768px){
	[data-sub="about1"] .hisImg {padding: 40rem 30rem; height: 280rem;}
	[data-sub="about1"] .hisBox .box {padding-top: 50rem;}
	[data-sub="about1"] .hisBox .box:nth-child(odd) {padding-right: 60rem;}
	[data-sub="about1"] .hisBox .box:nth-child(even) {padding-left: 60rem;}
	[data-sub="about1"] .hisBox .box:nth-child(odd) h3::before { right: -66rem;}
	[data-sub="about1"] .hisBox .box:nth-child(even) h3::before { left: -66rem;}
	[data-sub="about1"] .hisBox .year {font-size: 70rem;}
	[data-sub="about2"] .mapImg {border-radius: 8rem;}
	[data-sub="about2"] .mapImg iframe {height: 450rem;}
	[data-sub="about2"] .mapInfo {width: 100%; padding: 30rem; gap: 20rem; flex-direction: column; margin-top: 10rem; border-radius: 8rem;}
	[data-sub="about2"] .mapInfo .txt {width: 100%;}
	[data-sub="about2"] .mapInfo .txt ul {flex-wrap: wrap;}
	[data-sub="about2"] .mapInfo .btn {width: 100%; flex-direction:row; height: auto; padding: 15rem 20rem;}
}
@media (max-width:480px){
	[data-sub="about1"] .hisImg {padding: 20rem; height: 220rem; background-position: 40% 100%;}
	[data-sub="about1"] .hisImg em {margin-bottom: 15rem; font-size: 14rem;}
	[data-sub="about1"] .hisImg h2 {font-size: 20rem;}
	[data-sub="about1"] .hisBox {padding: 0;}
	[data-sub="about1"] .hisBox::before {left: 0; transform: translateX(0);}
	[data-sub="about1"] .hisBox .year {font-size: 50rem;}
	[data-sub="about1"] .hisBox .box {align-self: flex-start; padding-top: 40rem; width: 100%;}
	[data-sub="about1"] .hisBox .box:nth-child(odd) {align-self: flex-start; text-align: left; padding-right: auto; padding-left: 22rem;}
	[data-sub="about1"] .hisBox .box:nth-child(even) {padding-left: 22rem;}
	[data-sub="about1"] .hisBox .box:nth-child(odd) h3::before { right: auto; left: -25rem;}
	[data-sub="about1"] .hisBox .box:nth-child(even) h3::before { left: -25rem;}
	[data-sub="about1"] .hisBox .box h3 {margin-bottom: 10rem; font-size: 25rem;}
	[data-sub="about1"] .hisBox .box h3::before {width: 8rem; height: 8rem; border: 1rem solid var(--color-black);}
	[data-sub="about2"] .mapImg iframe {height: 350rem;}
	[data-sub="about2"] .mapInfo {padding: 30rem 15rem;}
	[data-sub="about2"] .mapInfo .txt h5 {font-weight: 500; margin-bottom: 15rem;}
	[data-sub="about2"] .mapInfo .txt li b {display: block;}
	[data-sub="about2"] .mapInfo .txt ul {flex-direction: column; align-items: flex-start;}
	.tab-menu {padding: 0; border: 0; gap: 8rem;}
	.tab-menu li {width: auto;}
	.tab-menu li a {padding: 15rem 30rem; font-size: 15rem; background: #f5f6f9; white-space:nowrap;}
}