@charset "utf-8";
/************************************************
	 Basic
************************************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button {margin:0;padding:0; font-family: "Noto Sans KR", sans-serif; font-style: normal; font-weight: 400; color: #191919}
div,dl,dt,dd,ul,ol,li,pre,code,form,fieldset,legend,textarea,p,a,blockquote,th,td,input,select,textarea,button,xmp { font-family: "Noto Sans KR", sans-serif; font-style: normal; font-weight: 400; color: #191919}
fieldset,img {border:0 none;}
dl,ul,ol,menu,li {list-style:none}
blockquote, q {quotes: none}
blockquote:before, blockquote:after,q:before, q:after {content:'';content:none}
input,select,textarea,button {vertical-align:middle}
input::-ms-clear {display:none}
button {border:0 none;background-color:transparent;cursor:pointer}
.clear {clear:both;}
table { border-collapse:collapse;}
a {font-weight: 600; text-decoration: none}

/* 이미지 슬라이드 */
* {margin:0;padding:0;box-sizing:border-box;}
ul, li {list-style:none;}

[name="slide"] {display:none;}
.slidebox {max-width:1200px;width:100%;margin:0 auto;text-align:center;}
.slidebox img {max-width:100%;}
.slidebox .slidelist {
	white-space:nowrap;
	font-size:0;
	overflow:hidden;
}
.slidebox .slideitem {
	position:relative;
	display:inline-block;
	vertical-align:middle;
	width:100%;
	transition:all .35s;
}
.slidebox .slideitem label {
	position:absolute;
	z-index:1;
	top:50%;
	transform:translateY(-50%);
	padding:20px;
	border-radius:50%;
	cursor:pointer;
}
label.left {
	left:20px;

	background-image:url('./img/left-arrow.png');
	background-position:center center;
	background-size:50%;
	background-repeat:no-repeat;
}
label.right {
	right:20px;

	background-image:url('./img/right-arrow.png');
	background-position:center center;
	background-size:50%;
	background-repeat:no-repeat;
}

/* 페이징 스타일 */
.paginglist {text-align:center;padding:30px 0;}
.paginglist > li {display:inline-block;vertical-align:middle;margin:0 10px;}
.paginglist > li > label {display:block;padding:10px 30px;border-radius:10px;background:#ccc;cursor:pointer;}
.paginglist > li:hover > label {background:#333;}

[id="slide01"]:checked ~ .slidelist .slideitem {transform:translateX(0);animation:slide01 20s infinite;}
[id="slide02"]:checked ~ .slidelist .slideitem {transform:translateX(-100%);animation:slide02 20s infinite;}
[id="slide03"]:checked ~ .slidelist .slideitem {transform:translateX(-200%);animation:slide03 20s infinite;}
[id="slide04"]:checked ~ .slidelist .slideitem {transform:translateX(-300%);animation:slide04 20s infinite;}

@keyframes slide01 {
	0% {left:0%;}
	23% {left:0%;}
	25% {left:-100%;}
	48% {left:-100%;}
	50% {left:-200%;}
	73% {left:-200%;}
	75% {left:-300%;}
	98% {left:-300%;}
	100% {left:0%;}
}
@keyframes slide02 {
	0% {left:0%;}
	23% {left:0%;}
	25% {left:-100%;}
	48% {left:-100%;}
	50% {left:-200%;}
	73% {left:-200%;}
	75% {left:100%;}
	98% {left:100%;}
	100% {left:0%;}
}
@keyframes slide03 {
	0% {left:0%;}
	23% {left:0%;}
	25% {left:-100%;}
	48% {left:-100%;}
	50% {left:200%;}
	73% {left:200%;}
	75% {left:100%;}
	98% {left:100%;}
	100% {left:0%;}
}
@keyframes slide04 {
	0% {left:0%;}
	23% {left:0%;}
	25% {left:300%;}
	48% {left:300%;}
	50% {left:200%;}
	73% {left:200%;}
	75% {left:100%;}
	98% {left:100%;}
	100% {left:0%;}
}

/* pc */
@media screen and (min-width:500px) {
header {position: fixed; height: 100px; top: 0px; width: 100%; z-index: 1000; background: #fff; box-shadow: 0 0 3px 0 #999}
header div {width: 1200px; margin: 0 auto; padding:30px 0; position: relative}
header h1 {float: left;}
header ul {display: flex; float: right; padding-right: 150px}
header ul li {margin: 10px 30px}
header a:hover {text-decoration: underline}
header .on {text-decoration: underline}
header button {padding: 10px 13px; background: #d12f27; color: #fff; font-weight: 700; position: absolute; top: 33px; right: 0px;}

.main_g {margin-top: 100px; width: 100%; background: #0a1421;}
.main_g .slidebox {position: relative}
.main_g .main_g_bus {position: absolute; top: 0px; left: 0px; z-index: 100}
.main_g .catchphrase {position: absolute; top: 90px; left: 80px;}
.main_g .catchphrase p {width: 55px; height: 5px; background: #d12f27}
.main_g .catchphrase h3 {text-align: left; color: #fff; font-size: 36px; font-weight: 700; letter-spacing: -1px;}
.main_g .catchphrase button {margin-top: 70px; display: block; width: 210px; padding: 20px 10px; color: #fff; font-size: 16px; font-weight: 500; background: #d12f27; cursor: pointer}

.esg, .service, .client {width: 1200px; margin: 90px auto}
.esg .line, .vims .line, .service .line, .client .line {width: 50px; height: 5px; background: #d12f27}
.esg h3, .vims h3, .service h3, .client h3 {font-size: 36px; font-weight: 700; letter-spacing: -1px}
.esg .phrase, .vims .phrase {font-size: 18px; margin: 40px 0; text-align: center; line-height: 1.8em}
.esg .phrase strong {font-size: 24px;}
.esg ul {display: flex; width: 960px; margin: 0 auto}
.esg li {border-right: 1px solid #e8eaeb}
.esg dl {width: 320px; padding: 0 50px}
.esg dt {text-align: center; font-size: 18px; font-weight: 600; margin-bottom: 10px}
.esg dt span {font-size: 14px; color: #33c5bc}

.vims {width: 100%; margin: 90px auto; background: #f2f2f2}
.vims div {width: 1200px; margin: 0 auto; padding: 90px 0}
.vims h3 span, .client h3 span {font-size: 16px; font-weight: 400; letter-spacing: 0px;}

.service {position: relative}
.service h3 {margin-bottom: 120px;}
.service ul {width: 450px; position: absolute; top: 0px; right: 0px; display: flex; justify-content: space-between}
.service div {display: flex; margin-top: 40px;}
.service div p {margin-right: 50px;}
.service dt {margin-top: 65px; margin-bottom: 10px; font-size: 24px; font-weight: 600}
.service dd {font-size: 18px}

.client ul {display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 50px;}
.client li {width: 320px; margin: 10px; padding: 20px; text-align: center; border: 1px solid #ddd; flex: 1 1 30%;}

.recruit {width: 100%; height: 450px; position: relative; background: url('../images/recruit.jpg') no-repeat; background-size: cover;}
.recruit div {text-align: center; width: 320px; position: absolute; top: 50%; margin-top: -70px; left: 50%; margin-left: -160px;}
.recruit h3 {font-size: 36px; font-weight: 700; color: #fff}
.recruit p {font-size: 18px; color: #fff; margin-bottom: 20px}
.recruit a {font-size: 36px; color: #fff}

footer {width: 100%; background: #d12f27}
footer div {width: 1200px; margin: 0 auto; padding: 50px 0; display: flex; justify-content: space-between;}
footer div ul {}
footer div ul li {color: #fff}
footer button {padding: 10px 13px; background: #fff; color: #d12f27; font-weight: 700;}
}

/* 모바일 */
@media screen and (max-width:499px) {
header {position: fixed; height: 135px; top: 0px; width: 100%; z-index: 1000; background: #fff; box-shadow: 0 0 3px 0 #999}
header div {width: 100%; margin: 0 auto; padding:30px 0; position: relative}
header h1 {float: left; margin-left: 10px;}
header ul {display: flex; float: right; padding-right: 10px}
header ul li {margin: 20px 10px; font-size: 14px;}
header a:hover {text-decoration: underline}
header .on {text-decoration: underline}
header button {padding: 10px 13px; background: #d12f27; color: #fff; font-weight: 700; position: absolute; top: 33px; right: 10px;}

.main_g {margin-top: 135px; width: 100%; background: #0a1421;}
.main_g .slidebox {position: relative}
.main_g .main_g_bus {position: absolute; top: 0px; left: 0px; z-index: 100}
.main_g .catchphrase {position: absolute; top: 40px; left: 30px;}
.main_g .catchphrase p {width: 24px; height: 3px; background: #d12f27}
.main_g .catchphrase h3 {text-align: left; color: #fff; font-size: 16px; font-weight: 500; letter-spacing: -1px;}
.main_g .catchphrase button {margin-top: 30px; display: block; width: 210px; padding: 20px 10px; color: #fff; font-size: 13px; font-weight: 500; background: #d12f27; cursor: pointer; display: none}

.esg, .service, .client {width: 100%; margin: 70px auto}
.esg .line, .vims .line, .service .line, .client .line {width: 30px; height: 3px; background: #d12f27; margin-left: 10px;}
.esg h3, .vims h3, .service h3, .client h3 {font-size: 26px; font-weight: 700; letter-spacing: -1px; margin-left: 10px;}
.esg .phrase, .vims .phrase {font-size: 16px; margin: 40px 0; padding: 0 15px; text-align: center; line-height: 1.8em}
.esg .phrase strong {font-size: 22px;}
.esg ul {display: flex; flex-direction: column; width: 320px; margin: 0 auto}
.esg li {border-bottom: 1px solid #e8eaeb; padding: 30px 0;}
.esg dl {width: 320px; padding: 0 50px}
.esg dt {text-align: center; font-size: 18px; font-weight: 600; margin-bottom: 10px}
.esg dt span {font-size: 14px; color: #33c5bc}

.vims {width: 100%; margin: 90px auto; background: #f2f2f2}
.vims div {width: 100%; margin: 0 auto; padding: 90px 0}
.vims h3 span, .client h3 span {font-size: 13px; font-weight: 400; letter-spacing: 0px;}

.service {position: relative}
.service h3 {margin-bottom: 220px;}
.service ul {width: 100%; position: absolute; top: 80px; right: 0px; display: flex; justify-content: space-around}
.service div {display: flex; flex-direction: column; margin-top: 20px; margin-bottom: 50px;}
.service div p {margin-right: 0px; text-align: center} 
.service dt {margin-top: 20px; margin-bottom: 10px; font-size: 24px; font-weight: 600; text-align: center}
.service dd {font-size: 18px; padding: 0 20px;}

.client ul {display: flex; justify-content: space-between; flex-wrap: wrap; margin-top: 50px;}
.client li {width: 320px; margin: 10px; padding: 20px; text-align: center; border: 1px solid #ddd; flex: 1 1 30%;}

.recruit {width: 100%; height: 450px; position: relative; background: url('../images/recruit.jpg') no-repeat; background-size: cover;}
.recruit div {text-align: center; width: 320px; position: absolute; top: 50%; margin-top: -70px; left: 50%; margin-left: -160px;}
.recruit h3 {font-size: 36px; font-weight: 700; color: #fff}
.recruit p {font-size: 18px; color: #fff; margin-bottom: 20px}
.recruit a {font-size: 36px; color: #fff}

footer {width: 100%; background: #d12f27;}
footer div {width: 100%; margin: 0 auto; padding: 50px 20px; display: flex;  flex-direction: column;}
footer div ul { margin: 20px 0 30px 0}
footer div ul li {color: #fff}
footer button {padding: 10px 13px; background: #fff; color: #d12f27; font-weight: 700;}
}