@charset "utf-8";

/* 
 * content CSS Document
 * KOWEB
 */

/* sub visual */
.area_subVisual{ overflow: hidden; position:relative; height:9.66666667em; padding-top: var(--header_height); box-sizing: border-box; text-align:center; color:#fff; background: 50% / cover; text-shadow:0 0 30px rgba(0, 0, 0, .3); font-size: var(--font_size45); }
.area_subVisual .inr{ display: flex; flex-direction: column; justify-content: center; align-items: center; }
.area_subVisual::before{ content: ''; position: absolute; inset: 0; background: 50% / cover; }
.area_subVisual[class*="about"]::before{ background-image:url(../images/content/sub_visual1.jpg); }
.area_subVisual[class*="product"]::before{ background-image:url(../images/content/sub_visual2.jpg); }

.area_subVisual.field_sub01::before{ background-image:url(../images/content/sub_visual3_1.jpg);}
.area_subVisual.field_sub02::before{ background-image:url(../images/content/sub_visual3.jpg);}
.area_subVisual.field_sub03::before{ background-image:url(../images/content/sub_visual3_2.jpg);}
.area_subVisual.field_sub04::before{ background-image:url(../images/content/sub_visual3_3.jpg);}

.area_subVisual[class*="koweb"]::before{ background-image:url(../images/content/sub_visual4.jpg); }
.area_subVisual[class*="board"]::before{ background-image:url(../images/content/sub_visual5.jpg); }
.area_subVisual.common::before{ background-image:url(../images/content/sub_visual4.jpg); }
.area_subVisual h2{ font-size: 1em; }
.area_subVisual p{ font-size: 1rem; }
@media(prefers-reduced-motion:no-preference){
	@keyframes sub_visual_bg {
		0%{ transform: scale(1.05); }
		100%{ transform: scale(1); }
	}
	@keyframes sub_visual_text {
		0%{ transform: translateY(20px); opacity: 0; transition:1s;}
		100%{ transform: translateY(0); opacity: 1; }
	}
	.area_subVisual::before{ animation: sub_visual_bg 1.8s both; }
	.area_subVisual p{ opacity: 0; animation: sub_visual_text 1s .4s both; }
	.area_subVisual h2{ opacity: 0; animation: sub_visual_text 1s .2s both; }
}
@media(min-width:1280px){
	.area_subVisual{ padding-top: calc( var(--header_height) - 35px ); }
}
@media(max-width:1279px){
	.area_subVisual h2 {font-size:35px; margin-bottom:7px;}
}
@media (max-width:767px){
	.area_subVisual h2 {font-size:30px;}
}

/* lnb */
.area_lnb {display:flex; align-items:center; height:70px; margin-top:-35px; background:#0a0a0a; position:relative; z-index: 3; }
.area_lnb *{ box-sizing: border-box; }
.area_lnb .home {position:relative; display:block; width:70px; height:100%; background:url(/images/common/i_home.svg) no-repeat center; background-size:13px;}
.area_lnb .title,
.area_lnb .lnb {position:relative;}
.area_lnb .home:after,
.area_lnb .title:after,
.area_lnb .lnb:after {position:absolute; right:0; top:50%; content:''; width:1px; height:15px; background:rgba(255, 255, 255, .2); transform:translateY(-50%);}
.area_lnb .title,
.area_lnb .lnb > a {display:block; line-height:70px; min-width:250px; padding:0 50px 0 40px; color:#ddd; font-size:15px; background:url(/images/common/lnb_down.svg) no-repeat center right 30px; background-size:10px;}
.area_lnb .title {padding-left:40px; background:url(/images/common/lnb_1depth.svg) no-repeat center right 30px; background-size:10px;}
.area_lnb .lnb > ul {position:absolute; opacity:0; visibility:hidden; left:0; width:100%; padding:10px 0; margin-top:1px; background:#f5f5f5; box-shadow:3px 3px 10px rgba(0, 0, 0, .1); transition:all .3s; z-index:8;}
.area_lnb .lnb ul li a {display:block; padding:10px 20px; font-size:15px; color:#888; box-sizing:border-box; transition:all .3s;}
/* .area_lnb .lnb ul li .product_sub03 {padding: 10px 40px 5px 40px;} */
.area_lnb .lnb .sub3 li a {font-size: 14px; color: #aaa;}
.area_lnb .lnb ul li a:hover {font-weight:500; color:#111;}
.area_lnb .lnb:hover ul { opacity:1; visibility:visible;}
.area_lnb .course {position:absolute; right:20px; top:50%; display:flex; align-items:center; font-size:12px; font-weight:300; color:rgba(255, 255, 255, .35); transform:translateY(-50%);}
.area_lnb .course li {position:relative; padding:0 15px; background:url(/images/common/lnb_arrow.png) no-repeat left center;}
.area_lnb .course li:first-child {background:none;}

@media(max-width:1279px){
	.area_lnb {width:100%; margin: 0;}
	.area_lnb .course {right:35px;}
}
@media(max-width:1080px){
	.area_lnb { width:100%; height:60px;}
	.area_lnb .home {width:60px;}
	.area_lnb .course {right:15px; display: none;}
}
@media(max-width:767px){
	.area_lnb .title,
	.area_lnb .lnb {width:calc((100% - 60px)/2);}
	.area_lnb .title,
	.area_lnb .lnb > a {min-width:auto; padding:0 50px 0 30px; line-height:60px; font-size:1em; white-space: nowrap; text-overflow: ellipsis}
	.area_lnb .lnb ul li a {font-size:1em; padding:10px 30px;}
	.area_lnb .lnb ul li .product_sub03 {padding: 10px 30px 5px 30px;}
	.area_lnb .lnb:after {display:none;}
}
@media(max-width:500px){
	.area_lnb {height:55px;}
	.area_lnb .title,
	.area_lnb .lnb {width:calc((100% - 12px)/2);}
	.area_lnb .title,
	.area_lnb .lnb > a {line-height:55px; padding:0 40px 0 20px; background-position:right 20px center; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
	.area_lnb .lnb ul li a {padding:10px 20px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
	.area_lnb .lnb ul li .product_sub03 {padding: 10px 20px 5px 20px;}
	.area_lnb .home {background-size:11px; flex-shrink:1;}
}

/* common content */
#content{ min-height:300px; padding: 5em 0; }
.sub_title { margin-bottom: 3.75em; text-align: center;}
.sub_tit { margin-bottom: 3.75em; text-align: center;}
.sub_title h2 {font-size: 40px; font-weight: 800;}
.sub_tit h2 {font-size: 40px; font-weight: 800;}

/* 서브 공통 영역 */
.tit_box {margin-bottom: 60px;}
.ss_small {position: relative; display: block; font-size: 17px; font-weight: 800; padding-left: 35px; color: var(--primary);}
.ss_small::before {content: ''; position: absolute; top: 50%; left: 0; transform: translateY(-50%); width: 30px; height: 6px; background: url(/images/content/ico_dot.png) no-repeat;}

/* about01 - 회사개요 */
.about01 {position: relative;}
.about01:before {content: ''; position: absolute; bottom: -5em; left: 0; width: 32%; height: 60%; background: #eee;}
.about01 .ss_box {display: flex; align-items: center; justify-content: space-between;}
.about01 .ss_box .ss_img {width: 45%; position: relative; text-align: right; }
.about01 .ss_box .ss_img img {width: 100%; height: 100%; object-fit: cover;}
.about01 .ss_box .ss_img span {display: inline-block; width: 460px; height: 600px; border: 1px solid #f5f5f5; box-shadow: 0px 5px 20px rgb(0 0 0 / 8%);}
.about01 .ss_box .ss_table {width: 50%; border-top: 2px solid #222;}
.about01 .ss_box .ss_table tr {border-bottom: 1px solid #e5e5e5;}
.about01 .ss_box .ss_table th {width: 20%; font-weight: 600; padding: 20px 10px; border-right: 1px solid #e5e5e5;  text-align: center; letter-spacing: 1px;} 
.about01 .ss_box .ss_table td {padding: 20px 40px; color: #555;}

/* about02 - 기업이념 */
.about02 {}
.about02 .ss01 {text-align: center;}
.about02 .ss01 h4 {font-size: var(--font_size30); margin: 20px 0 25px 0;}
.about02 .ss01 p {font-size: var(--font_size17); line-height: 1.7;}
.about02 .ss01 span {display: inline-block;  padding: 0 4px; font-weight: 500;}
.about02 .ss01 span.blue {color: #064db7;}
.about02 .ss01 span.orange {color: #f58220;}
/* ss02 */
.about02 .ss02 {}
.about02 .ss02 .ss_top {position: relative; display: flex; gap: 30px; justify-content: center; box-sizing: border-box; text-align: center; margin: 80px 0;}
.about02 .ss02 .ss_top .line {position: absolute; top: 50%; left: 0; display: block; width: 0; height: 1px; background: #e5e5e5; z-index: -25; animation: arrow 5s linear infinite;}
.about02 .ss02 .ss_top .line::before {content: '';position: absolute;  top: 50%; right: 0; transform: translateY(-50%); border-bottom: 7px solid transparent; border-top: 7px solid transparent; border-left: 11px solid #222;}
.about02 .ss02 .ss_top h4 {position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); font-size: 30px; font-weight:900;}
.about02 .ss02 .ss_top h4 small {display: block; font-size: 18px; font-weight: 800; color:var(--primary); margin-top: 2px;}
.about02 .ss02 .ss_top ul {position: relative; width: 600px; height: 600px}
.about02 .ss02 .ss_top ul::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 450px; height: 450px; border-radius: 50%; border: 15px solid #eee; background: #f5f5f5; z-index: -20;}
.about02 .ss02 .ss_top ul::after {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 300px; height: 300px; border-radius: 50%; background: #fff; border: 3px dotted #ddd;  z-index: -10;}
.about02 .ss02 .ss_top li {position: absolute; width: 200px; height: 200px; border-radius: 50%; display: flex; gap: 10px; align-items: center; flex-direction: column; justify-content: center; background: rgba(255, 255, 255, 0.9);  border: 2px solid rgba(1, 84, 208,0.35); box-shadow: 0 3px 25px 0 rgb(0 0 0 / 10%)}
.about02 .ss02 .ss_top li i.icon {width: 30px; height:30px;}
.about02 .ss02 .ss_top li p {font-size:18px; font-weight: 700;}
.about02 .ss02 .ss_top li:nth-child(1) {top: 0; left: 50%; transform: translateX(-50%); }
.about02 .ss02 .ss_top li:nth-child(2) {top: 50%; left: 0; transform: translateY(-50%); background: #111; border-color: transparent; color: #fff;}
.about02 .ss02 .ss_top li:nth-child(3) {bottom: 0; left: 50%; transform: translateX(-50%);}
.about02 .ss02 .ss_top li:nth-child(4) {top: 50%; right: 0; transform: translateY(-50%); background: #111; border-color: transparent; color: #fff;}
/* ss_bottom */
.about02 .ss02 .ss_bottom {display: flex; justify-content: space-between}
.about02 .ss02 .ss_bottom li {position: relative; width: 24%; height: 330px; padding: 40px 30px; border: 1px solid #e5e5e5; box-sizing: border-box; transition: all 0.5s; overflow: hidden;}
.about02 .ss02 .ss_bottom em {display: inline-block; font-size: var(--font_size17); font-weight: 800; border-bottom: 1px solid #111;}
.about02 .ss02 .ss_bottom dt {font-size: var(--font_size20); font-weight: 800; margin: 20px 0; }
.about02 .ss02 .ss_bottom dd {position: relative; padding-left: 11px;}
.about02 .ss02 .ss_bottom dd + dd {margin-top: 4px;}
.about02 .ss02 .ss_bottom dd::before {content: ''; position: absolute; top: 10px; left: 0; width: 5px; height: 1px; border-top: 1px solid #555;}
.about02 .ss02 .ss_bottom i.icon {position: absolute; bottom:-20px; right: -20px; display: block; width:160px; height:160px; opacity: 0.07; filter: grayscale(1);}
/* on hover */
.about02 .ss02 .ss_bottom li.on {box-shadow: 0 3px 15px 0 rgb(82 75 104 / 13%); border-color: #888;}
.about02 .ss02 .ss_bottom li:nth-child(odd).on em {color: #03b756; border-color: #03b756;}
.about02 .ss02 .ss_bottom li:nth-child(even).on em {color: #0154d0; border-color: #0154d0;}
.about02 .ss02 .ss_bottom li.on i.icon {filter: grayscale(0); opacity: 0.1;}
.about02 .ss02 .ss_bottom li:hover {box-shadow: 0 3px 15px 0 rgb(82 75 104 / 13%);border-color: #888;}
.about02 .ss02 .ss_bottom li:nth-child(odd):hover em {color: #03b756; border-color: #03b756;}
.about02 .ss02 .ss_bottom li:nth-child(even):hover em {color: #0154d0; border-color: #0154d0;}
.about02 .ss02 .ss_bottom li:hover i.icon {filter: grayscale(0); opacity: 0.1;}
@keyframes arrow {
    100% {
        width: 100%;;
    }
}
/* about03 - 인사말 */
.about03 {}
.about03 .sub_title {display: none;}
.about03 .ss_box {display: flex; align-items: center; justify-content: space-between;}
.about03 .ss_img {width: 40%; position: relative;}
.about03 .ss_img span {position: relative; display: inline-block; text-align: center; width:400px; height: 500px; line-height: 500px; background: url(/images/content/img_ceo2.jpg)no-repeat center / cover; color: #bbb; font-weight: 600; margin: 0 0 60px 60px;}
.about03 .ss_img em {display: block; position: absolute; bottom: 16px; left: 16px; color:rgba(255, 255, 255, 0.35); font-size: var(--font_size17); font-weight: 700; letter-spacing: 1px;}
.about03 .ss_img span:before {content: ''; position: absolute; bottom: -60px; left: -60px; background: #063f95; width: 100%; height: 80%; z-index: -1;}
.about03 .ss_text {width: 55%;}
.about03 .ss_text .ceo_tit h4 {font-size: var(--font_size35); font-weight:800; margin: 20px 0 30px 0;}
.about03 .ss_text p {font-size: var(--font_size17); line-height: 1.7;}
.about03 .ss_text p + p {margin-top: 22px;}
.about03 .ss_text p.ceo {display: flex; align-items: center; gap: 8px;  margin-top: 40px; font-size: 20px; font-weight: 700;} 

/* about04 연혁 */
.about04 {}
.about04 .dep1:nth-child(1) {margin-top: 0;}
.about04 .dep1 {margin-top: 60px;}
.about04 .dep1 .his_img {position: relative; width: 100%; height: 300px; margin-bottom: 60px; background-position: center; background-size: cover; background-repeat: no-repeat;}
.about04 .dep1 .his_img.img0 {background-image: url(/images/content/img_history.jpg);}
.about04 .dep1 .his_img.img1 {background-image: url(/images/content/img_history0.jpg);}
.about04 .dep1 .his_img.img2 {background-image: url(/images/content/img_history3.jpg);}
.about04 .dep1 .his_img.img3 {background-image: url(/images/content/img_history2.jpg);}
.about04 .dep1 .his_img.active {opacity: 1; transition: 4s;}
.about04 .dep1 .his_img.img1::before,
.about04 .dep1 .his_img.img3::before {left: 0;}
.about04 .dep1 .his_img::before {content: ''; position: absolute; top: 0; right: 0; display: block; z-index: 100; width: 100%; height: 100%; background: #fff; transition: all 4s cubic-bezier(0.18, 0.89, 0.32, 1.28) 0s;} 
.about04 .dep1 .his_img.active::before {width: 0;} 
.about04 .dep1 .his_list li {display: flex; padding: 0 4%; justify-content: space-between;}
.about04 .dep1 .his_list .his_year {width: 32%;}
.about04 .dep1 .his_list .his_year h4 {font-size:var(--font_size32); font-weight: 800;}
.about04 .dep1 .his_list .his_year h4 span {font-size: var(--font_size28);}
.about04 .dep1 .his_list .his_year p {margin-bottom: 15px; font-size: var(--font_size25); font-weight: 800; color: var(--primary); }
.about04 .dep1 .his_list .his_year span {display: block; margin-top: 15px;}
.about04 .dep1 .his_list .his_line {position: relative; top: 14px; width: 2px; background: #ddd; }
.about04 .dep1 .his_list .his_line:before {content: ''; position: absolute; top: -8px; left: -12px; width: 25px; height: 25px; border-radius: 50%; background: #f58220; opacity: 0.2;}
.about04 .dep1 .his_list .his_line:after {content: ''; position: absolute; top: 0; left: -4px; width: 9px; height: 9px; border-radius: 50%; background: #f58220; z-index: 10;}
.about04 .dep1 .his_list .dep2 {width: 55%;}
.about04 .dep1 .his_list .dep2 dl + dl {padding-top: 30px; margin-top: 30px;  border-top: 1px dotted #ddd;}
.about04 .dep1 .his_list .dep2 dt {font-size: var(--font_size25); font-weight: 800; margin-bottom: 15px;}
.about04 .dep1 .his_list .dep2 dd {width: 100%; display: block; font-size: var(--font_size17);}
.about04 .dep1 .his_list .dep2 dd + dd {margin-top: 6px;}
.about04 .dep1 .his_list .dep2 dd span {display: inline-block; letter-spacing: 0.2px; width: 100px;}

/* about05 - 조직도 */
.about05 {position: relative; width: 100%; height: 100%; padding-bottom: 5em; margin-bottom: -5em;}
.about05 span {font-size: var(--font_size20); font-weight: 600; display: inline-block; width: 250px; height:70px; line-height: 70px; border-radius: 6px; text-align: center; }
.about05::before {content: ''; position: absolute; bottom: 0; right: 0; width: 100%; height: 800px; background: url(/images/content/img_org_bg.jpg) no-repeat right / cover; z-index: -10;}
/* org1 */
.about05 .ss_box {padding: 25px 0;}
.about05 .org1 h5 {display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 10px; position: relative; margin: 0 auto; text-align: center; width: 180px; height: 180px; background: url(/images/content/org_circle.png) no-repeat center / cover; border-radius: 50%; box-sizing: border-box;}
.about05 .org1 h5::before {content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 200px; background: #fff; border: 3px solid #064db7; border-radius: 50%; z-index: -1;}
.about05 .org1 h5 span {font-size: var(--font_size22); font-weight: 700; color: #fff;}
.about05 .org1 div {position: relative; text-align: center; padding: 100px 0;}
.about05 .org1 div::before {content: ''; position: absolute; top: 5px; left: 50%; transform: translateX(-50%); width: 10px; height:10px; border: 2px solid #fff; border-radius: 50%; background: #063f95;}
.about05 .org1 div::after {content: ''; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 1px; height:215px; border-left: 1px solid #ccc; z-index: -5;}
.about05 .org1 div span {background: #d6e4ed; border: 2px solid #c4d2dc;}
/* org2 */
.about05 .org2 {display: flex; justify-content: center;}
.about05 .org2 li {position: relative; width: 19%; text-align: center;}
.about05 .org2 li:last-child::before {display: none}
.about05 .org2 li::before {content: ''; position: absolute; top: -50px; left: 50%; width: calc(100% + 0px); height: 1px; border-top: 1px solid #ccc;}
.about05 .org2 li::after {content: ''; position: absolute; top: -50px; left: 50%; transform: translateX(-50%); width: 1px; height: 50px; border-left: 1px solid #ccc;}
.about05 .org2 li span {position: relative; border: 2px solid #ccc; background: #f8f8f8; color: #555;}
.about05 .org2 li span::before {content: ''; position: absolute; top: -7px; left: 50%; transform: translateX(-50%); width: 10px; height:10px; border: 2px solid #fff; border-radius: 50%; background: #555; z-index: 10;}

/* about06 - 오시는 길 */
.about06 {}
.about06 .ss2 {margin-top: 60px;}
.about06 .map .root_daum_roughmap {width: 100%; border-bottom: 1px solid #ddd;}
.about06 .map .root_daum_roughmap .wrap_map {height: 500px;}
.about06 .ss_text {display: flex; padding-left: 40px;}
.about06 .ss_text .map_tit {position: relative; width: 20%; min-width: 250px; height: 250px; display: flex; flex-direction: column; background:var(--primary); overflow: hidden; color: #fff; padding: 40px; box-sizing: border-box; margin-top: -70px; box-shadow: 5px 5px 20px 0 rgb(0 0 0 / 7%); z-index: 20;}
.about06 .ss_text .map_tit:before {content: ''; position: absolute; bottom: 20px; right: -25px; width: 160px; height: 160px; background: url(/images/content/ico_ideo3_wh.svg) no-repeat; opacity: 0.08;}
.about06 .ss_text .map_tit small {display: block; font-size: var(--font_size17); font-weight: 600;}
.about06 .ss_text .map_tit h4 {font-size: var(--font_size32); font-weight: 800; margin-top: auto;}
.about06 .ss_text ul {width: 80%; display: flex; flex-wrap: wrap; gap: 0 40px; align-items: center; padding: 20px 0 20px 40px; box-sizing: border-box;}
.about06 .ss_text li {display: flex; align-items: center; gap: 15px;}
.about06 .ss_text li i.icon {display: block; width: 45px; height: 45px; line-height:45px; background: #f5f5f5; border-radius: 50%; text-align: center;}
.about06 .ss_text li i.icon img {width: 18px}
.about06 .ss_text li dt {font-size: var(--font_size17); font-weight: 700;}
.about06 .ss_text li dd {color: #555;}

@media(max-width:1280px){
	.about03 .ss_img span {margin: 0 0 40px 40px;}
	.about03 .ss_img span:before {bottom: -40px; left: -40px;}
	.about03 .ss_text {width: 52%;}
	.about03 .ss_text p br {display: none;}
	/* about05 - 조직도 */
	.about05 .org2 {justify-content: space-between;}
	.about05 .org2 li {width: 18%;}
	.about05 .org2 li::before {width: calc(100% + 26px);}
	.about05 .org2 li span {width: 100%;}
	/* about06 - 오시는 길 */
	.about06 .ss_text {flex-wrap: wrap;}
	.about06 .ss_text .map_tit {min-width: 400px; height: 160px;}
	.about06 .ss_text .map_tit:before {bottom: -15px;}
	.about06 .ss_text .map_tit h4 br {display: none;}
	.about06 .ss_text ul {width: 100%; padding: 30px 0 0 0; gap: 30px 40px;}
}

@media(max-width:1080px){
	.sub_title h2 {font-size: 35px;}
	.sub_tit h2 {font-size: 35px;}
	.about01 .ss_box .ss_img {width: 45%;}
	.about01 .ss_box .ss_img span {width: 100%; height: auto;}
	.about01 .ss_box .ss_table th {padding: 15px 10px;}
	.about01 .ss_box .ss_table td {padding: 15px 20px;}
	/* about02 - 경영이념 */
	.about02 .ss02 .ss_bottom {flex-wrap: wrap; gap: 20px;}
	.about02 .ss02 .ss_bottom li {width: calc((100% - 20px )/2); height: 250px; }
	/* about03 - 인사말 */
	.about03 .sub_title {display: block;}
	.about03 .ss_box {flex-direction: column; gap: 40px;}
	.about03 .ss_img {position: relative; width: 100%; text-align: center;}
	.about03 .ss_img::before {content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 200px; background: #063f95;}
	.about03 .ss_img span { margin: 0 auto 50px auto;}
	.about03 .ss_img span:before {display: none;}
	.about03 .ss_img span em {display: none;}
	.about03 .ss_text {width:100%;}
	.about03 .ss_text p.ceo {font-size: 18px;}
	/* about04 연혁 */
	.about04 .dep1 .his_list li {padding: 0;}
	.about04 .dep1 .his_list .his_year p {margin-bottom: 10px;}
	.about04 .dep1 .his_list .his_year span {margin-top: 10px;}
	.about04 .dep1 .his_list .dep2 dt {margin-bottom: 10px;}
	.about04 .dep1 .his_list .dep2 dl + dl {margin-top: 20px; padding-top: 20px;}
	/* about05 조직도 */
	.about05 span {width: 220px;}
	.about05 .org1 div {padding:70px 0 100px 0}	
	.about05 .org1 div::after {height: 180px;}
	.about05 .org2 li::before {width: calc(100% + 18px);}
}

@media(max-width:767px){ 
	.sub_title {margin-bottom: 30px;}
	.sub_tit {margin-bottom: 30px;}
	.about01:before {display: none;}
	.about01 .ss_box {flex-direction: column; gap: 30px;}
	.about01 .ss_box .ss_img, .about01 .ss_box .ss_table {width: 100%;}
	.about01 .ss_box .ss_table th {padding: 12px 10px;}
	.about01 .ss_box .ss_table td {padding: 12px 10px;}
	/* about02 - 경영이념 */
	.about02 .ss02 .ss_top {margin: 50px 0;}
	.about02 .ss02 .ss_top h4 small {font-size: 16px; margin-top: 0;}
	.about02 .ss02 .ss_top h4 {font-size: 25px;}
	.about02 .ss02 .ss_top ul {width: 500px; height: 500px;}
	.about02 .ss02 .ss_top ul::before {width: 380px; height: 380px;}
	.about02 .ss02 .ss_top ul::after {width: 250px; height: 250px;}
	.about02 .ss02 .ss_top li {width: 150px; height: 150px; gap: 8px;}
	.about02 .ss02 .ss_top li i.icon {width: 26px; height: 26px;}
	.about02 .ss02 .ss_top li p {font-size: 15px; font-weight: 400;}
	/* about03 - 인사말 */
	.about03 .ss_text .ceo_tit h4 {margin: 10px 0 15px 0;}
	.about03 .ss_text p + p {margin-top: 10px;}
	.about03 .ss_text p.ceo {font-size: 16px; margin-top: 20px;}
	.about03 .ss_text p.ceo img {height: 28px;}
	.about03 .ss_img span {height: 450px; line-height: 450px;}
	/* about04 연혁 */
	.about04 .dep1 {margin-top: 30px;}
	.about04 .dep1 .his_img {height: 250px; margin-bottom: 30px;}
	.about04 .dep1 .his_list li {flex-wrap: wrap; gap: 25px;}
	.about04 .dep1 .his_list .his_line {display: none;}
	.about04 .dep1 .his_list .his_year {order: 1; width: 100%;}
	.about04 .dep1 .his_list .dep2 {order: 2; width: 100%;}
	.about04 .dep1 .his_list .dep2 dl:first-child {padding-top: 20px; border-top: 1px dotted #ddd;}
	.about04 .dep1 .his_list .dep2 dd span {width: 85px; font-weight: 500;}
	/* about05 조직도 */
	.about05::before {height: 600px;}
	.about05 span {width: 220px; height: 60px; line-height: 60px;}
	.about05 .org1 div {padding: 60px 0 80px 0;}
	.about05 .org1 div::after {height: 160px;}
	.about05 .org1 h5 {width: 145px; height: 145px;}
	.about05 .org1 h5::before {width: 170px; height: 170px;}
	.about05 .org2 li::before {width: calc(100% + 15px); top: -40px;}
	.about05 .org2 li::after {top: -40px; height: 40px;}
	/* about06 - 오시는 길 */
	.about06 .ss2 {margin-top: 30px;}
	.about06 .ss_text {padding: 0 20px;}
	.about06 .ss_text .map_tit {width: 100%; min-width: auto; height: 115px; padding: 25px; margin-top: -50px;}
	.about06 .ss_text ul {gap: 20px 30px;}
	.about06 .ss_text li {gap: 10px;}
	.about06 .ss_text li i.icon {width: 40px;height: 40px; line-height: 40px;}
}

@media(max-width:600px){
	.sub_title h2 {font-size: 28px;}
	.sub_tit h2 {font-size: 22px;}
	/* about02 - 경영이념 */
	.about02 .ss01 p br {display: none;}
	.about02 .ss02 .ss_top {display: none;}
	.about02 .ss02 .ss_bottom {gap: 10px; margin-top: 30px;}
	.about02 .ss02 .ss_bottom dt {margin: 15px 0;}
	.about02 .ss02 .ss_bottom li {width: 100%; height: 200px; padding: 30px 20px;}
	.about02 .ss02 .ss_top .line {display: none;}
	/* about04 연혁 */
	.about04 .dep1 .his_img {height: 200px}
	.about04 .dep1 .his_list .dep2 dl:first-child {margin-top: 0;}
	.about04 .dep1 .his_list .dep2 dl {margin-top: 15px; padding-top: 15px;}
	/* about05 조직도 */
	.about05 .org1 div::after {height: 155px;}
	.about06 .map .root_daum_roughmap .wrap_map {height: 420px;}
	.about06 .ss_text .map_tit h4 {font-weight: 700;}
	.about05 span {width: 200px;}
	.about05 .org2 {flex-wrap: wrap; gap: 20px;}
	.about05 .org2 li {width: calc((100% - 20px)/2);}
	.about05 .org2 li::before {width: calc(100% + 20px); left: 51.5%;}
	.about05 .org2 li:nth-child(n+2)::before {display: none;}
	.about05 .org2 li::after {left: 51.5%; z-index: -10;}
}

@media(max-width:480px){
	/* about02 - 경영이념 */
	.about02 .ss01 img {height: 60px;}
	.about02 .ss01 h4 {margin: 10px 0 15px 0;}
	.about02 .ss02 .ss_top ul {width: 320px; height: 320px;}
	.about02 .ss02 .ss_top ul::before {width:200px; height: 200px;}
	.about02 .ss02 .ss_top ul::after {width: 150px; height: 150px;}
	/* about03 - 인사말 */
	.about03 .ss_box {gap: 30px;}
	.about03 .ss_img span {width: 100%; height: 400px; line-height: 400px; margin: 0;}
	.about03 .ss_img em {display: none;}
	.about03 .ss_img::before {display: none;}
}

/* bar_list */
.bar_list > li {position:relative; padding-left:12px; text-align: left;}
.bar_list > li:before {content: ''; position:absolute; top:11px; left: 0; width: 5px; height: 1px; background: #555;}
.bar_list > li + li {margin-top:5px;}
/* dot_list */
.dot_list > li {position:relative; padding-left:12px;}
.dot_list > li:before {content: ''; position:absolute; top:10px; left: 0; width: 3px; height: 3px; background: #555;}
.dot_list > li + li {margin-top:5px;}
/* num_list */
.num_list {counter-reset:list-number; display: flex; gap: 16px; flex-wrap: wrap; align-items: center;}
.num_list > li {position:relative; padding-left:25px;counter-increment:list-number;}
.num_list > li:before {position:absolute; left:0; top:3px; content:counter(list-number); width:18px; height:18px; line-height:18px; font-size:11px; font-weight:500; color:#fff; text-align:center; border-radius:100%; background:#333;}


/* business 공통 */
.ss_link {display: flex; gap: 15px; align-items: center; margin-bottom: 30px;}
.ss_link li {width: 24%;}
.ss_link li a {display: block; text-align: center; padding: 10px 10px; box-sizing: border-box; border: 1px solid #eee;}
.ss_link li a img {max-height: 50px; vertical-align: middle;}
.tab_list .tab_btn {display: flex; justify-content: center; margin-bottom:50px; border-top: 1px solid #555;}
.tab_list .tab_btn li {position: relative; flex: 1; box-sizing: border-box; text-align: center;}
.tab_list .tab_btn li a {display: block; padding: 22px 10px; background: #f8f8f8; color: #aaa; font-weight: 600;}
.tab_list .tab_btn li + li::before {content: ''; position: absolute; top: 50%; left: 0; width: 1px; height: 16px; transform: translateY(-50%); background: #ddd;}
.tab_list .tab_btn li + li.on::before {display: none;}
.tab_list .tab_btn li.on a {background: var(--primary); color: #fff;}

/* business01 - BASF */
.area_business .sub_tit h2 {display: inline-block; position: relative; margin-right: 5px;}
.area_business .sub_tit a.pr_link img {width: 16px; height: 16px; vertical-align: super;}
.area_business span.color {font-weight: 600;}
.business01 .sub_tit {text-align: center;}
.business_tit {color: #fff; display: flex; flex-direction: column; justify-content: center; width:100%; height: 300px; padding: 0 20px 0 60px; box-sizing: border-box; margin-bottom: 30px; background-repeat: no-repeat; background-position: center; background-size: cover;}
.business_tit.bu1 {background-image: url(/images/content/img_bu1.jpg);}
.business_tit.bu2 {background-image: url(/images/content/img_bu2.jpg);}
.business_tit.bu3 {background-image: url(/images/content/img_bu3.jpg);}
.business_tit.bu4 {background-image: url(/images/content/img_bu04.jpg);}
.business_tit.bu5 {background-image: url(/images/content/img_bu5.jpg);}
.business_tit span {display: inline-block; margin-right: 4px; }
.business_tit .img {width: 100%; height: 250px; background: #aaa; margin-bottom: 20px;}
.business_tit p {color: rgba(255, 255, 255, 0.9);}
.business_tit h4 {font-size: var(--font_size35); font-weight: 800; margin-bottom: 10px; text-shadow: 0 0 15px rgb(0 0 0 / 20%);}
.business_tit h5 {font-size: var(--font_size20); font-weight: 600; margin-bottom: 10px;}
.business_con .con {position: relative; display: flex; justify-content: space-between; padding-top: 60px; border-top: 1px solid #e5e5e5;}
.business_con .con::before {content: ''; position: absolute; top: -1px; left: 0; width: 22%; height: 1px; background: var(--primary);}
.business_con .con + .con {margin-top: 60px;}
.business_con .con h5 {width: 23%; font-size: var(--font_size25); font-weight: 700;}
.business_con .text {width: 70%;}
.business_con .text a.link {position: relative; font-weight: 600; display: inline-block; padding-right: 20px; border-bottom: 1px solid #888;}
/* .business_con .text a.link:hover {border-bottom: 1px solid #888;} */
.business_con .text a.link:hover {color: var(--primary); border-color: var(--primary);}
.business_con .text a.link:before {content: ''; position: absolute; top: 5px; right: 0; width: 13px; height: 13px; background: url(/images/common/i_link.svg) no-repeat center / cover;}
.business_con .table {margin-bottom: 40px;}
.business_con .table:last-child {margin-bottom: 0;}
.business_con .table span.mobile {display: none;}
.business_con .table p {position: relative; font-size: var(--font_size20); font-weight: 700; margin-bottom: 20px; padding-left: 12px;}
.business_con .table p:before {content: ''; position:absolute; top:12px; left: 0; width: 4px; height: 4px; background: var(--primary);}
.business_con .table table {text-align: center; border-top: 1px solid #555; }
.business_con .table table tr {border-bottom: 1px solid #e5e5e5;}
/* .business_con .table table thead th:last-child, */
.business_con .table table tbody td:last-child {border-right: 0; text-align: left;}
.business_con .table table tbody td.border {border-right: 1px solid #e5e5e5; text-align: center;}
.business_con .table table tbody td.center {text-align: center;}
.business_con .table table thead th {background: #f8f8f8; border-right: 1px solid #e5e5e5; font-size: var(--font_size17); font-weight: 500; padding: 15px;}
.business_con .table table tbody th {padding: 14px 15px; font-size: var(--font_size16); font-weight: 500; border-right: 1px solid #e5e5e5;}
.business_con .table table tbody td {padding: 14px 15px 14px 22px; border-right: 1px solid #e5e5e5; font-size: 15px;}
.business_con .table table tbody td.align {text-align: left;}
.business_con .table table tbody td dl dd + dd {margin-top: 8px;}
.business_con .table table tbody td span {display: block; font-size: var(--font_size15); color: #555;}

/* num_list 숫자 리스트 */
.area_field .car_list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 25px;}
.area_field .car_list li {display: flex; padding: 15px 20px; background: #f5f5f5; }
.area_field .car_list li span {position: relative; font-weight: 700; color: #b5b5b5; padding-right: 15px; margin-right: 15px;}
.area_field .car_list li span::before {position: absolute; top: 5px; right: 0; content: ''; width: 1px; height: 14px; background: #ddd;}
.area_field .img img {max-width: 100%;}
.area_field .img_list {display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-top: 25px;}
.area_field .img_list li p {padding: 15px 20px; box-sizing: border-box; background: #f5f5f5; margin-top: 10px;}
.area_field .img_list li p span {position: relative; font-weight: 700; color: #b5b5b5; padding-right: 15px; margin-right: 15px;}
.area_field .img_list li p span::before {position: absolute; top: 5px; right: 0; content: ''; width: 1px; height: 14px; background: #ddd;}

@media(max-width:1080px){
	.area_field .num_list {gap: 15px; margin-top: 20px;}
	.tab_list .tab_btn li a {font-size: 15px;}
	.business_tit {padding: 0 40px; margin-bottom: 40px;}
	.business_con .con {flex-direction: column; gap: 15px; padding-top: 40px;}
	.business_con .con::before {width: 30%;}
	.business_con .con + .con {margin-top: 40px;}
	.business_con .con h5 {width: 100%;}
	.business_con .text {width: 100%;}
	.business_con .table {margin-bottom: 30px;}
	.ss_link li {width: 33.333%;}
	.ss_link li a img {max-width: 100%; max-height: 100%;}
	.area_field .car_list {grid-template-columns: repeat(3, 1fr);  margin-top: 10px;}
	.area_field .img_list {grid-template-columns: repeat(3, 1fr); gap: 10px; margin-top: 10px;}
	.area_field .img_list li p {padding: 15px 15px; margin-top: 0;}
	.area_field .img_list li p span::before {top: 2px;}
}

@media(max-width:767px){
	.tab_list .tab_btn {flex-wrap: wrap; background: #f8f8f8; justify-content: flex-start; margin-bottom: 40px;}
	.tab_list .tab_btn li {width: 33.333%; flex: auto; border-bottom: 1px solid #e5e5e5;}
	.tab_list .tab_btn li a {font-size: 14px; padding: 20px 10px;}
	.tab_list .tab_btn li:nth-child(n+4) {border-bottom: 0;}
	.tab_list .tab_btn li:nth-child(4)::before {display: none;}
	.business_tit {height: 250px;}
	.business_tit p br {display: none;}
	.business_con .con {padding-top: 25px;}
	.business_con .con + .con {margin-top: 25px;}
	.business_con .table table thead th {padding: 12px 10px;}
	.business_con .table table tbody th {padding: 12px 10px;}
	.business_con .table table tbody td {padding: 12px 10px 12px 15px; font-size: 14px;}
	.business_tit {margin-bottom: 20px;}
	.business_tit.bu4 {background-position: right;}
	.ss_link {margin-bottom: 20px; gap: 8px;}
	.ss_link li a {padding: 5px 5px;}
	.area_field .img_list {grid-template-columns: repeat(2, 1fr);}
	.area_field .car_list {grid-template-columns: repeat(2, 1fr);}
	.area_field .car_list li {padding: 12px 12px;}
	.area_field .car_list li span {margin-right: 8px; padding-right: 8px;}
	.num_list > li {padding-left: 20px;}
	.num_list > li:before {top: 2px; width: 16px; height: 16px; line-height: 16px; font-size: 10px; font-weight: 400;}
}

@media(max-width:500px){
	.tab_list .tab_btn li {width: 50%; flex: inherit;}
	.tab_list .tab_btn li:nth-child(4) {border-bottom: 1px solid #e5e5e5}
	.tab_list .tab_btn li:nth-child(4)::before {display: block;}
	.tab_list .tab_btn li:nth-child(5)::before {left: auto; right: 0;}
	.tab_list .tab_btn li:nth-child(3)::before {display: none;}
	.business_tit {height: auto; padding: 25px 25px; margin-bottom: 30px;}
	.business_con .table div {overflow-x: scroll;}
	.business_con .table table {white-space: nowrap; min-width: 600px;}
	.business_con .table span.mobile {display: block; padding: 10px; margin-bottom: 10px; font-size: 14px; font-weight: 400; color: #888; background: #f8f8f8; border: 1px solid #e5e5e5; cursor: pointer;}
	.area_field .ss_box > .img {height: 150px;}
	.area_field .field_img {height: auto !important; width: 100%;}
	.area_field .field_img img {width: 100%; height: auto;}
	.area_field .ss_box > .img img {object-fit: cover; height: 100%;}
}

/* customer */
.customer {}
.customer_img {width: 100%; height: 260px; margin-bottom: 30px; background: url(/images/content/img_online3.jpg) no-repeat center / cover;}
.customer .ss_box {display: flex; gap: 15px;}
.customer .ss_box li {position: relative; width: calc((100% - 15px)/5); border: 1px solid #ddd; padding: 20px; height: 185px; border-radius: 5px; box-sizing: border-box;}
.customer .ss_box li:hover {background: var(--primary); color: #fff;}
.customer .ss_box li p {font-size: var(--font_size17); font-weight: 700;}
.customer .ss_box li em {display: inline-block; font-size: 15px; color: #ccc; font-weight:800; margin-bottom: 10px;}
.customer .ss_box li .icon {margin: 10px 0;}
.customer .ss_box li .icon i {position: absolute; bottom: 25px; right: 25px; display: inline-block; width: 41px;}
.customer .ss_box li .icon i img.white {display: none;}
.customer .ss_box li:hover img {display: none;}
.customer .ss_box li:hover img.white {display: block !important; opacity: 0.5;}

/* online */
.online {}
.online .online_bn {display: flex; align-items: center; justify-content: space-between; gap: 50px; width: 100%; padding: 45px 65px; box-sizing: border-box; background: #f7f7f7; border-radius: 15px; margin-bottom: 30px;}
.online .online_bn .icon_img img {width: 180px;}
.online .online_bn .tit {width: 80%;}
.online .online_bn h3 {font-size: 33px; line-height: 1.4; font-weight:700; margin-bottom: 15px; letter-spacing: -0.2px; text-shadow: 0 0 15px rgb(0 0 0 / 20%);}
.online .online_bn h3 .color {display: block; font-weight: 400;}
.online .online_bn h3 br.mo {display: none;}
.online .online_bn .call {font-size:22px; font-weight: 500; letter-spacing: -0.2px;}
.online .online_bn .call img {height:22px; margin-right: 8px;}
.online h4 {font-size: var(--font_size30); font-weight: 800; margin-bottom: 20px;}

@media(max-width:1080px){
	.customer .ss_box {flex-wrap: wrap;}
	.customer .ss_box li {width: calc((100% - 30px)/3);}
	.online .online_bn {flex-direction: row-reverse; padding: 35px 55px;}
	.online .online_bn h3 {font-size: 24px;}
	.online .online_bn .call {font-size: 20px;}
	.online .online_bn .icon_img img {width: 150px;}
}
@media(max-width: 767px){
	.customer_img {margin-bottom: 20px; height: 200px;}
	.customer .ss_box {gap: 10px;}
	.customer .ss_box li {width: calc((100% - 10px)/2); height: 160px;}
	.customer .ss_box li p {font-weight: 500;}
	.customer .ss_box li .icon i {width: 36px; bottom: 20px; right: 20px;}
	.online .online_bn {padding: 30px 40px; gap: 40px; margin-bottom: 20px;}
	.online .online_bn h3 {margin-bottom: 10px; font-size: 20px;}
	.online .online_bn .call {font-size: 18px;}
	.online .online_bn .call img {height:18px; margin-right: 5px;}
	.online .online_bn .icon_img img {width: 100px;}
}

@media(max-width: 500px){
	.customer .ss_box li .icon i {width: 32px;}
	.online .online_bn {flex-direction: column-reverse; text-align: center; gap: 10px; padding: 20px 20px; border-radius: 5px; margin-bottom: 10px;}
	.online .online_bn .tit {width: 100%;}
	.online .online_bn h3 {font-size: 17px; margin-bottom: 6px;}
	.online .online_bn .call {font-size: 15px;}
	.online .online_bn .call img {height: 15px;}
	.online .online_bn .icon_img img {width: 70px;}
}