@charset "utf-8";

/* 
 * content CSS Document
 *
 */

/* form active - 디자인가이드 input radio, checkbox 디자인 관련입니다. 필요없는경우 삭제하시고 작업하시면되요.*/
.cus_design{max-width:400rem;}
.cus_design > ul > li{display:block; position:relative; margin:3rem 0px;}
.cus_design input[type="text"]{width:100%; height:45rem;}
.cus_design select{width:100%; height:45rem;}
.cus_design label{position:absolute; left:10px; top:50%; width:90%; box-sizing:border-box; padding:0 5rem; background:var(--color-white); transform:translateY(-50%);}
.cus_design .in label{color:#1637a2;}
.cus_design .active label{top:10%; width:auto; font-size:11rem;}
.cus_design [data-form-design="select"] label{top:10%; width:auto; font-size:12rem; font-weight:500;}
footer::before {display: none;}

/* sub-visual */
.area-subVisual {position:relative; width: 100%; height: 500rem; background-color: var(--color-black); overflow:hidden;  color: var(--color-white); background-repeat: no-repeat; background-size: cover; background-position: 50% 50%;}
.area-subVisual .inr {display: flex; align-items: flex-end; justify-content: space-between; padding-top: 100rem; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);}
.area-subVisual h2 {font-size: 65rem; letter-spacing: -0.015em; font-weight: 600;}
.area-subVisual .scroll{font-size:15px;  font-weight:300; color:var(--color-white); line-height: 40rem;}
.area-subVisual .scroll span {display:inline-block; vertical-align: top; width:40px; height:40px; border-radius:50%; border:1px solid rgba(255,255,255,.5); overflow: hidden; box-sizing:border-box; margin-left: 15px; position: relative;} 
.area-subVisual .scroll span:after {content:''; display:block; width:4px; height:4px; border-radius:50%; background:var(--color-white);; position: absolute; left:50%; top:50%; margin-left: -2px; margin-top: -2px; animation: upDown 1.2s ease-in-out infinite;}
.area-subVisual[data-sublayout="about"] {background-image:url(/images/content/sub-visual.jpg);}
.area-subVisual[data-sublayout="automation"] {background-image:url(/images/content/sub-visual02.jpg);}
.area-subVisual[data-sublayout="fa"] {background-image:url(/images/content/sub-visual03.jpg);}
.area-subVisual[data-sublayout="robot"] {background-image:url(/images/content/sub-visual04.jpg);}
.area-subVisual[data-sublayout="online"] {background-image:url(/images/content/sub-visual05.jpg);}
.area-subVisual[data-sublayout="notice"] {background-image:url(/images/content/sub-visual06.jpg);}

/* lnb */
.area-lnb {width: 100%;}
.area-lnb .lnb {background: var(--color-white); border-radius: 80rem; box-shadow : 5rem 8rem 10rem rgba(0, 0, 0, 0.06); margin-top: -40rem;}
.area-lnb .lnb ul {display: flex; justify-content: center; gap: 30rem;}
.area-lnb .lnb li {}
.area-lnb .lnb li a {position: relative; display: block; font-size: var(--font18); font-weight: 600; padding: 30rem 20rem; color: #bdbdbd; transition: .3s;}
.area-lnb .lnb li a.on {color: var(--color-point);}
.area-lnb .lnb li a.on::before {content: ''; position: absolute; bottom: -1rem; left: 50%; transform: translateX(-50%); width: 100%; height: 4rem; background: var(--color-point);}

@media (hover: hover) {
    .area-lnb .lnb li a:hover {color: var(--color-point); opacity: 1;}
}

/* 공통부분 */
#content {padding: 120rem 0; min-height: 500rem;}
.tabMenu {display: flex; justify-content: center; gap: 10rem;}
.tabMenu li {font-size: var(--font18); font-weight: 500; color: #bdbdbd; padding: 10rem 35rem; border-radius: 30rem; background: #f3f3f3; cursor: pointer;}
.tabMenu li.active {background: var(--color-point); color: var(--color-white);}
.tabCon {display: none; height: 0;}
.tabCon.active { display: block; height: 100%;}
.subTit {text-align: center; margin-bottom: 50rem;}
.subTit h2 {font-size: var(--font40); font-weight: 800;}
.subTit small {font-size: var(--font18); color: var(--color-point); display: block; margin-bottom: 25rem; }
.subTit p {font-size: var(--font18); line-height: 1.6; }
.show-mo {display: none;}

@media (max-width:1080px){
	.area-subVisual h2 {font-size: 55rem;}
}
@media (max-width:767px){
	.area-subVisual {height: 400rem;}
	.area-subVisual h2 {font-size: 45rem;}
	.area-subVisual .scroll {line-height: 35rem; font-size: 13rem;}
	.area-subVisual .scroll span {width: 35rem; height: 35rem;}
	.area-lnb .lnb li a {padding: 25rem 15rem;}
	#content {padding: 80rem 0;}
	.tabMenu {gap: 8rem;}
	.subTit {margin-bottom: 30rem;}
	.subTit small {margin-bottom: 20rem;}
}
@media (max-width:480px){
	.area-subVisual h2 {font-size: 40rem;}
	.area-subVisual .inr {padding-top: 0; height: 100%; justify-content: center; align-items: center;}
	.area-lnb .inr {width: 100%;}
	.area-lnb .lnb {width: 100%; border-radius: 0; margin-top: 0; box-shadow: none; overflow-x: scroll; padding: 0 10rem; border-bottom: 1rem solid #e5e5e5;}
	.area-lnb .lnb ul {overflow-x: auto; justify-content: flex-start; gap: 10rem;} 
	.area-lnb .lnb li a {font-size: 15rem; font-weight: 400; white-space: nowrap;}
	.area-lnb .lnb li a.on::before {bottom: 0;}
	.area-subVisual .scroll {position: absolute; bottom: 30rem; left: 50%; transform: translateX(-50%);}
	.show-mo {display: block;}
	.tabMenu li {font-weight: 400;  padding: 8rem 32rem;}
}

/* 인사말 */
[data-sub="about1"] {overflow: hidden; position: relative; margin-bottom: -120rem; padding-bottom: 120rem;}
[data-sub="about1"] .ss01 {margin-top: 80rem; }
[data-sub="about1"] .title {margin-bottom: 55rem;}
[data-sub="about1"] .title small {display: block; margin-bottom: 30rem; font-size: var(--font20); font-weight: 500; letter-spacing: 0.01em; color: var(--color-point);}
[data-sub="about1"] .title h2 {font-size:45rem; line-height: 1.4; font-weight: 700; transition-delay: .3s;}
[data-sub="about1"] .title h2.eng {font-weight: 500; text-transform: uppercase; letter-spacing: 0.01em;}
[data-sub="about1"] .img {margin: 50rem 0 60rem; width: 100%; height: 400rem; background: #bbb;}
[data-sub="about1"] .text {width:100%;}
[data-sub="about1"] .text p {font-size:var(--font18); font-weight: 300; line-height: 1.6;}
[data-sub="about1"] .text p + p {margin-top: 30rem;}
[data-sub="about1"] .text p.ceo {font-size: var(--font20); font-weight: 600; margin-top: 50rem; color: var(--color-black);}
[data-sub="about1"] .marquee {display: flex; gap: 30rem; align-items: center; animation: marquee 12s linear infinite; line-height: 1; position: relative; z-index: -1; margin-top: -60rem;}
[data-sub="about1"] .marquee span {display: block; white-space: nowrap; text-transform: uppercase; font-size: 90rem; font-weight: 900; color:rgba(0, 0, 0, 0.04)}
[data-sub="about1"] .obj {position: absolute; right: 0; bottom: -200rem;  width: 700rem; opacity: 0.2; transform: rotate(90deg);}

/* 조직도 */
[data-sub="about2"] {}
[data-sub="about2"] .orgChart {position: relative; margin-top: 80rem;}
[data-sub="about2"] .orgChart::before {content: ''; position: absolute; top: 10rem; left: 49.99%; transform: translateX(-50%); width: 1rem; height: 49%; background: #ddd; z-index: -1;} 
[data-sub="about2"] .org1 h3{position: relative; margin: 0 auto; display: flex; gap:15rem; flex-direction: column; align-items: center; justify-content: center; width: 200rem; height: 200rem; border-radius: 50%; background: #0073bf; color: var(--color-white); font-size:25rem; line-height: 1; font-weight: 600; box-shadow: 0 0 20rem rgba(0, 126, 236, 0.3);}
[data-sub="about2"] .org1 h3::before {content: ''; position: absolute; top:50%; left:50%; transform: translate(-50%,-50%); width: 250rem; height: 250rem; border-radius: 50%; background: #edf5fa; z-index: -1;}
[data-sub="about2"] .org1 h3::after {content: ''; position: absolute; bottom: -31.5rem; left:50%; transform: translateX(-50%); box-sizing: border-box; width: 13rem; height: 13rem; border-radius: 50%; background: var(--color-point2); border: 2rem solid var(--color-white);}
[data-sub="about2"] .org1 span {font-size: 17rem; font-weight:300; display: block; opacity: 0.8;}
[data-sub="about2"] .org2 {display: grid; grid-template-columns: repeat(3,1fr); text-align: center; margin-top: 120rem;}
[data-sub="about2"] .org2 > li {position: relative; padding: 65rem 50rem 0; text-align: center;}
[data-sub="about2"] .org2 > li::before {content: ''; width: 1rem; height: 65rem; position: absolute; top: 0; left: 50%; transform: translateX(-50%); background: #ddd; }
[data-sub="about2"] .org2 > li::after {content:'';position:absolute; top:0; left: 0; width: 100%; height: 1rem; transform: translate(50%, 0); background: #ddd;}
[data-sub="about2"] .org2 > li:nth-child(3)::after {display: none;}
[data-sub="about2"] .org2 > li > span {position: relative; background:#21272b; color: var(--color-white); border-radius: 5rem 5rem 0 0;}
[data-sub="about2"] .org2 > li > span::before {content: ''; position: absolute; top: -6.5rem; left: 50%; transform: translateX(-50%); box-sizing: border-box; width: 13rem; height: 13rem; border-radius: 50%; background: var(--color-point2); border: 2rem solid var(--color-white);}
[data-sub="about2"] .org2 span {display: block; font-size: 18rem; font-weight: 600; padding: 25rem 0;}
[data-sub="about2"] .org3 {border: 1rem solid #ddd; border-top: 0; border-radius: 0 0 5rem 5rem; box-sizing: border-box;} 
[data-sub="about2"] .org3 span {padding: 20rem 0; font-weight: 400; color: #555;}
[data-sub="about2"] .org3 li + li {border-top: 1rem dotted #ddd;} 

/* 오시는길 */
[data-sub="about3"] {}
[data-sub="about3"] .mapBox {}
[data-sub="about3"] .mapImg {border-radius: 15rem; overflow: hidden; border: 1rem solid #e5e5e5;}
[data-sub="about3"] .mapImg .root_daum_roughmap {width: 100%;}
[data-sub="about3"] .mapImg .root_daum_roughmap .wrap_map {height: 550rem;}
[data-sub="about3"] .mapImg .root_daum_roughmap .map_border {display: none;}
[data-sub="about3"] .mapImg .root_daum_roughmap .wrap_controllers {display: none;}
[data-sub="about3"] .mapImg .root_daum_roughmap .cont .section_address {display: none;}
[data-sub="about3"] .mapInfo {position: relative; display: flex; align-items: center; justify-content: center; gap: 25rem 30rem; margin-top: 20rem; padding: 30rem 0; border-radius: 10rem; background: #21272b; color: var(--color-white); z-index: 10;}
[data-sub="about3"] .mapInfo li {font-size: var(--font17); font-weight: 300; display: flex; align-items: center; gap:15rem;}
[data-sub="about3"] .mapInfo li span {display: block;}
[data-sub="about3"] .mapInfo .icon {display: flex; align-items: center; justify-content: center; width: 42rem; height: 42rem; border: 1rem solid rgba(255, 255, 255, 0.05); background: rgba(255, 255, 255, 0.1); border-radius: 50%;}
[data-sub="about3"] .mapInfo .icon svg {height: 14rem;  fill: var(--color-white);}
[data-sub="about3"] .mapInfo li:nth-child(1) svg {height: 17rem;}

@media (max-width:1280px) {
	
}
@media (max-width:1080px){
	[data-sub="about1"] .title {margin-bottom: 50rem;}
	[data-sub="about1"] .title h2 {font-size:40rem}
	[data-sub="about2"] .org2 {margin-top: 100rem;}
	[data-sub="about2"] .org2 > li {padding: 50rem 20rem 0}
	[data-sub="about3"] .mapInfo {padding: 25rem 20rem; flex-wrap: wrap;}
}
@media (max-width:767px){
	[data-sub="about1"] .ss01 {margin-top: 50rem;}
	[data-sub="about1"] .title {margin-bottom: 40rem;}
	[data-sub="about1"] .title h2 {font-size:35rem}
	[data-sub="about1"] .title small {margin-bottom: 20rem;}
	[data-sub="about1"] .text p br {display: none;}
	[data-sub="about1"] .text p + p {margin-top: 20rem;}
	[data-sub="about1"] .marquee { margin-top: -30rem;}
	[data-sub="about1"] .marquee span {font-size: 80rem;}
	/* 조직도 */
	[data-sub="about2"] .org1 span {font-size: 15rem;}
	[data-sub="about2"] .org1 h3 {width: 180rem; height: 180rem; font-size: 22rem; font-weight: 500;}
	[data-sub="about2"] .org1 h3::before {width: 220rem; height: 220rem;}
	[data-sub="about2"] .org2 {margin-top: 90rem;}
	[data-sub="about2"] .org2 > li {padding: 50rem 10rem 0}
	[data-sub="about2"] .org2 span {padding: 20rem 0; font-weight: 400; font-size: 16rem;}
	[data-sub="about2"] .org3 span {padding: 15rem 0;}
	/* 오시는길 */
	[data-sub="about3"] .mapImg {border-radius: 10rem }
	[data-sub="about3"] .mapImg .root_daum_roughmap .wrap_map {height: 400rem;}
	[data-sub="about3"] .mapInfo .icon {width: 38rem; height: 38rem;}
}
@media (max-width:480px){
	[data-sub="about1"] .ss01 {text-align: center;}
	[data-sub="about1"] .title {margin-bottom: 35rem;}
	[data-sub="about1"] .title h2 {font-size:28rem}
	[data-sub="about1"] .title small {margin-bottom: 15rem; font-size: 15rem;}
	[data-sub="about1"] .text p {font-size: 15rem; line-height: 1.5;}
	[data-sub="about1"] .marquee {animation: marquee 8s linear infinite;}
	[data-sub="about1"] .marquee span {font-size: 50rem;}
	[data-sub="about1"] .text p.ceo {margin-top: 30rem;}
	/* 조직도 */
	[data-sub="about2"] .orgChart::before {height: 31.5%;}
	[data-sub="about2"] .org1 h3 {width: 160rem; height: 160rem; gap: 10rem;}
	[data-sub="about2"] .org1 h3::before {width: 200rem; height: 200rem;}
	[data-sub="about2"] .org1 h3::after {width: 10rem; height: 10rem; bottom: -23.5rem;}
	[data-sub="about2"] .org2 {grid-template-columns: repeat(2,1fr); margin-top: 60rem;}
	[data-sub="about2"] .org2 > li {padding: 40rem 5rem 0}
	[data-sub="about2"] .org2 > li:nth-child(2)::after {display: none;}
	[data-sub="about2"] .org2 > li:nth-child(3) {padding: 20rem 5rem 0}
	[data-sub="about2"] .org2 > li:nth-child(3)::before {display: none;}
	[data-sub="about2"] .org2 > li > span::before {width: 10rem; height: 10rem; top: -5rem;}
	[data-sub="about2"] .org2 span {padding: 15rem 0; font-size: 15rem;}
	/* 오시는길 */
	[data-sub="about3"] .mapImg .root_daum_roughmap .wrap_map {height: 350rem;}
	[data-sub="about3"] .mapInfo {margin-top: 10rem;}
	[data-sub="about3"] .mapInfo li {flex-direction: column; font-size: 14rem;}
}

/* 온라인문의 */
.formList {display: flex; flex-wrap: wrap; gap: 40rem 0; padding: 40rem 0; border-top: 2rem solid #21272b;  border-bottom: 1rem solid #21272b;}
.formList li {width: 50%;}
.formList li label {display: block; font-size: var(--font20); font-weight: 600; margin-bottom: 20rem;}
.formList li:nth-child(1), .formList li:nth-child(3) {padding-right: 20rem;}
.formList li:nth-child(2), .formList li:nth-child(4) {padding-left: 20rem;}
.formList li:nth-child(5), .formList li:nth-child(6), .formList li:nth-child(7) {width: 100%;}
.formList select {background-position-x: calc(100% - 20rem); padding: 0 15rem; height: 60rem; min-width: 200rem;}
.formList [data-form="category"] select {width: 50%;}
.formList [data-form="phone"] {display: flex;  align-items: center;}
.formList [data-form="phone"] i {display: block; margin: 0 10rem;}
.formList [data-form="phone"] select {  margin: 0; padding: 0 15rem; }
.formList [data-form="mail"] .box {display: flex; align-items: center; gap: 10rem;}
.formList [data-form="mail"] .box div:nth-child(2){display: flex; align-items: center;}
.formList [data-form="mail"] .box div:nth-child(2) select{margin: 0 10rem;}
.formList [data-form="mail"] select {min-width: 250rem; margin: 0;}
.formList [data-form="spam"] {display: flex;}
.formList [data-form="spam"] .spam {display: flex; align-items: center; justify-content: center; padding: 0 30rem; font-weight: 600; background: #21272b; color: var(--color-white); margin-right: 10rem;}
.formList .spam em {display: block; font-size: var(--font20); font-weight: 600; margin-bottom: 20rem;}
.box_agree {margin-top: 40rem; display: flex; align-items: center; flex-wrap: wrap; gap: 10rem 0;}
.box_agree i {display: inline-block; margin:  0 5rem 0 10rem; color: var(--color-point3);}
.box_agree input[type="checkbox"] {width: 20rem; height: 20rem;}
.box_agree label {font-size: var(--font18)}
.box_agree a {display: block; padding: 10rem 15rem; background: #eee; font-size: 14rem; color: #888; font-weight: 500; border-radius: 2rem; transition: .3s;}
.box_agree a:hover {background: #21272b; color: var(--color-white);}
.onlineBox .btn_area .button {width: 250rem; height: 70rem; font-size: var(--font18); border-radius: 35rem;}
.onlineBox .btn_area .button:hover {background: var(--color-point); color: var(--color-white); border-color: var(--color-point);}
.formList textarea {width: 100%; height: 250rem; padding: 20rem; margin: 0;}
input[type="text"], input[type="password"], input[type="tel"], input[type="date"], input[type="email"], input[type="number"] {width: 100%; height:60rem; padding: 0 15rem; margin: 0;}

@media (max-width:1080px){
	.formList [data-form="phone"] select {min-width: 100rem}
}
@media (max-width:767px){
	input[type="text"], input[type="password"], input[type="tel"], input[type="date"], input[type="email"], input[type="number"] {height:50rem; padding: 0 10rem;}
	.formList {gap: 30rem 0;}
	.formList select {background-position: calc(100% - 12rem); padding: 0 10rem;}
	.formList [data-form="phone"] select {height: 50rem;}
	.formList [data-form="mail"] select {height: 50rem;}
	
	.formList li label {font-size: 16rem; margin-bottom: 15rem;}
	.formList li:nth-child(1), .formList li:nth-child(3) {padding-right: 10rem;}
	.formList li:nth-child(2), .formList li:nth-child(4) {padding-left: 10rem;}
	.formList li:nth-child(7) {width: 100%; padding-right: 0;} 
	.formList .spam em {font-size: 16rem; margin-bottom: 15rem;}
}
@media (max-width:480px){
	.formList {gap: 25rem 0;}
	.formList li {width: 100%;}
	.formList li:nth-child(7) {width: 100%;}
	.formList li:nth-child(1), .formList li:nth-child(3) {padding-right: 0; width: 100%;}
	.formList li:nth-child(2), .formList li:nth-child(4) {padding-left: 0; width: 100%;}
	.formList [data-form="mail"] .box {flex-direction: column;}
	.formList [data-form="mail"] .box {width: 100%;}
	.formList [data-form="mail"] .box div {width: 100%;}
	.formList [data-form="mail"] .box div:nth-child(2) select {margin: 10rem 0; width: 100%;}
	.formList [data-form="mail"] .box div:nth-child(2) {flex-direction: column;}
	.formList [data-form="category"] select {width: 100%;}
	.formList textarea {height: 150rem; padding: 15rem;}
	.onlineBox .btn_area .button {width: 180rem; font-size: 15rem; height: 60rem;}
}

@media(prefers-reduced-motion:no-preference){
	@keyframes marquee {
		from { transform: translateX(100%); }
		to { transform: translateX(-100%); }
	}
	@keyframes upDown {
		0% {
			opacity: 0.1;
			transform:  translateY(-30px);
		}
		50% {
			opacity: 1;
			transform: translateY(50%);
		}
		100% {
			opacity: 0.1;
			transform:  translateY(30px);
		}
	}
}