@charset "utf-8";

/*** main ***/
.main .slick-arrow {position:absolute; top:50%; width:50px; height:50px; margin-top:-25px; z-index:99; font-size:0; line-height:0; text-indent:-9999px;}
.main .slick-prev {left:30px; background:url(../_img/arw1_left.png) 50% 50% no-repeat;}
.main .slick-next {right:30px; background:url(../_img/arw1_right.png) 50% 50% no-repeat;}
.main #visual {position:relative;}
.main #visual .item {position:relative; height:510px; padding-top:190px; text-align:center; color:#fff; }
.main #visual .item1 {background:url(../_img/main_visual1.jpg) 50% 0 no-repeat;background-size:cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale');-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale')";}
.main #visual .item2 {background:url(../_img/main_visual2.jpg) 50% 0 no-repeat;background-size:cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale');-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale')";}
.main #visual .item3 {background:url(../_img/main_visual3.jpg) 50% 0 no-repeat;background-size:cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale');-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale')";}
.main #visual .item a {position:absolute; bottom:116px; left:50%; width:156px; line-height:50px; margin-left:-80px; border:2px solid #fff; border-radius:50px; text-align:center;}
.main #visual .item a:after {display:inline-block; width:0; height:0; margin:19px 0 0 10px; border-left:8px solid #fff; border-top:6px solid transparent; border-bottom:6px solid transparent; vertical-align:top; content:'';}
.main #visual .item1 strong {display:block; padding-top:95px; background:url(../_img/logo_label.png) 50% 40px no-repeat; font-size:48px; font-weight:300;}
.main #visual .item1 p {position:relative; padding-top:18px; margin-top:18px; font-size:48px; font-weight:500}
.main #visual .item1 p:after {position:absolute; top:0; left:50%; width:40px; height:3px; margin-left:-20px; background:#fff; content:'';}
.main #visual .item2 strong {display:block; padding-top:10px; font-size:68px; font-weight:bold; letter-spacing:0; line-height:80px;}
.main #visual .item2 p {margin-top:30px; font-size:28px;}
.main #visual .item3 strong {display:block; font-size:52px; line-height:68px; font-weight:normal}
.main #visual .item3 p {width:350px; margin:20px auto 0; padding:28px 0; border:1px solid #fff; border-color:rgba(255,255,255,0.5); font-size:28px; line-height:1.5}
.main #visual .slick-dots {position:absolute; bottom:60px; left:0; width:100%; text-align:center;}
.main #visual .slick-dots li {display:inline-block; opacity:0.5}
.main #visual .slick-dots li + li {margin-left:15px;}
.main #visual .slick-dots li.slick-active {opacity:1;}
.main #visual .slick-dots button {display:block; width:10px; height:10px; border-radius:100%; background:#fff; font-size:0; line-height:0; text-indent:-9999px;}
.main #business {padding:70px 0 110px;}
.main #business .tit {text-align:center;}
.main #business .tit:before {display:block; width:2px; height:28px; margin:0 auto 25px; background:#d71920; content:''}
.main #business .tit strong {display:block; font-size:22px; letter-spacing:0; font-weight:bold;}
.main #business .tit strong em {color:#d71920;}
.main #business .tit p {margin-top:30px; font-size:24px; font-weight:200}
.main #business .slider {position:relative; margin-top:100px; padding-top:70px;}
.main #business .slick-slide {padding:0 50px; opacity:0.3}
.main #business .slick-slide.slick-active {opacity:1}
.main #business .item {position:relative; width:1140px; height:380px; color:#fff;}
.main #business .item1 {background:url(../_img/main_business5.jpg) 50% 50% no-repeat;}
.main #business .item2 {background:url(../_img/main_business1.jpg) 50% 50% no-repeat;}
.main #business .item3 {background:url(../_img/main_business3.jpg) 50% 50% no-repeat;}
.main #business .item4 {background:url(../_img/main_business4.jpg) 50% 50% no-repeat;}
.main #business .item5 {background:url(../_img/main_business2.jpg) 50% 50% no-repeat;}
.main #business .slick-slide.slick-active .item {position:relative;}
.main #business .slick-slide.slick-active .item:before {position:absolute; top:0; left:0; width:100%; height:380px; background:-moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,1) 100%); background:-webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); background:linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,1) 100%); filter:progid:DXImageTransform.Microsoft.gradient( startColorstr='#00000000', endColorstr='#000000',GradientType=0 ); opacity:0.5; content:'';}
.main #business .item .inner {position:absolute; top:85px; left:65px; width:800px;}
.main #business .item strong {display:inline-block; position:relative; padding-bottom:14px; margin-bottom:45px; font-size:92px; line-height:1; letter-spacing:0;}
.main #business .item strong em {display:block; font-size:18px; padding-left:6px;}
.main #business .item strong:after {position:absolute; bottom:0; left:1px; width:98px; height:4px; background:#fff; content:''}
.main #business .item span,
.main #business .item span > em {display:block;}
.main #business .item span .kor {margin-bottom:8px; font-size:18px;}
.main #business .item span .eng {height:27px; background:url(../_img/main_business_txt.png) 0 0 no-repeat; font-size:0; line-height:0; text-indent:-9999px;}
.main #business .item1 span .eng {background-position:0 0;}
.main #business .item2 span .eng {background-position:0 -30px;}
.main #business .item3 span .eng {background-position:0 -60px;}
.main #business .item4 span .eng {background-position:0 -90px;}
.main #business .item5 span .eng {background-position:0 -120px;}
.main #business .slick-dots {position:absolute; top:0; left:50%; width:720px; height:140px; margin-left:-360px;}
.main #business .slick-dots li {float:left;}
.main #business .slick-dots li + li {margin-left:4px;}
.main #business .slick-dots button {display:block; width:140px; height:140px; background:#00324d; color:#fff; text-align:center; font-weight:200;}
.main #business .slick-dots button em {display:block;}
.main #business .slick-dots button .num {margin-bottom:8px; font-size:14px; font-weight:bold; letter-spacing:0;}

.main #business .slick-dots li.slick-active button {background:#d71920; font-weight:bold;}
.main #business .slick-arrow {margin-top:10px;}
.main #business .slick-prev {left:30px;}
.main #business .slick-next {right:30px;}
.main #notice {padding:80px 0; background:#f3f3f3; overflow:hidden;}
.main #notice .tit {float:left; width:210px; margin:20px 120px 0 0;}
.main #notice .tit strong {display:block; font-size:20px; font-weight:500;}
.main #notice .tit span {font-size:48px; letter-spacing:0; line-height:1.1; font-weight:200;}
.main #notice .tit a {display:block; width:106px; line-height:36px; border:2px solid #888; border-radius:38px; margin-top:50px; text-align:center; font-size:16px; color:#666; font-weight:bold;}
.main #notice .tit a:after {display:inline-block; width:14px; height:14px; margin:11px 0 0 7px; background:url(../_img/ico_plus.png) 50% 50% no-repeat; vertical-align:top; opacity:0.6; content:'';}
.main #notice .list_notice {overflow:hidden; border-top:1px solid #ddd;}
.main #notice .list_notice li {border-bottom:1px solid #ddd; overflow:hidden; padding:16px 10px}
.main #notice .list_notice .inner {float:left; position:relative; padding:0 10px;}
.main #notice .list_notice .inner:after {position:absolute; top:50%; left:0; width:2px; height:2px; margin-top:-1px; border-radius:100%; background:#111; content:'';}
.main #notice .list_notice .inner a {display:inline-block; max-width:590px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.main #notice .list_notice .date {float:right; font-size:14px; font-weight:400; line-height:27px; letter-spacing:0;}
.main #contact {height:410px; background:url(../_img/main_contact.jpg) 50% 50% no-repeat; background-size:cover; filter: progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale');-ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader( src='arrow-big-right.png', sizingMethod='scale')";}
.main #contact .wfix {padding-top:90px; color:#fff;}
.main #contact strong {padding-left:3px; letter-spacing:0; line-height:1;}
.main #contact span {margin:5px 0 15px; font-size:48px; font-weight:bold; letter-spacing:0; line-height:1;}
.main #contact p {margin-bottom:48px; font-weight:200;}
.main #contact .btn_cs {display:inline-block; line-height:50px; border:2px solid #fff; border-radius:50px; padding:0 26px; font-size:18px; font-weight:bold}
.main #clients {padding:80px 0 124px;}
.main #clients .tit {text-align:center;}
.main #clients .tit:before {display:block; width:2px; height:28px; margin:0 auto 38px; background:#d71920; content:''}
.main #clients .tit strong {display:block; margin-bottom:10px; font-size:18px; color:#d71920;}
.main #clients ul {overflow:hidden; margin:55px auto 0; max-width:1852px;}
.main #clients ul li {float:left; width:50%;}
.main #clients .inner {position:relative; height:408px; margin:16px; overflow:hidden; }
.main #clients .bg {height:408px; -webkit-transition:all 0.3s ease-out; transition:all 0.3s ease-out;}
.main #clients .client1 .bg {background:url(../_img/main_client1.jpg) 50% 50% no-repeat;}
.main #clients .client2 .bg {background:url(../_img/main_client2.jpg) 50% 50% no-repeat;}
.main #clients .client3 .bg {background:url(../_img/main_client3.jpg) 50% 50% no-repeat;}
.main #clients .client4 .bg {background:url(../_img/main_client4.jpg) 50% 50% no-repeat;}
.main #clients .client5 .bg {background:url(../_img/main_client_spider.jpg) 50% 50% no-repeat;}
.main #clients ul .name {position:absolute; top:35px; left:35px;}
.main #clients ul span {position:absolute; bottom:30px; right:40px; color:#fff; font-size:24px; letter-spacing:0; font-family:'Noto Sans KR','HelveticaNeue-Light','Apple SD Gothic Neo','Apple SD Gothic Neo','Malgun Gothic','맑은 고딕',sans-serif !important; text-shadow:0 0 20px rgba(0,0,0,0.3);}
.main #clients ul span b {font-size:48px; font-weight:bold;}
.main #clients .client1 span b {color:#feb426;}
.main #clients .client2 span b {color:#75a600;}
.main #clients .client3 span b {color:#ed1c24;}
.main #clients .client4 span b {color:#1c7dfa;}

@media (min-width:1000px){
	.main #visual .item a:hover {border-color:#d71920; color:#fff; background:#d71920;}
	.main #business .slick-dots button:hover {background:#001f2f; }
	.main #notice .tit a:hover {border-color:#d71920; color:#fff; background:#d71920;}
	.main #notice .tit a:hover:after {background:url(../_img/ico_plus_white.png) 50% 50% no-repeat; opacity:1}
	.main #notice .list_notice .inner a:hover {text-decoration:underline;}
	.main #contact .btn_cs:hover {border-color:#d71920; color:#fff; background:#d71920;}
	.main #clients .bg:hover {-ms-transform:scale(1.1,1.1); -webkit-transform:scale(1.1,1.1); transform:scale(1.1,1.1);}
}
@media (max-width:1000px){
	.main #visual .item {height:470px; padding:60px 0 0 0;}
	.main #visual .slick-arrow {display:none;}
	.main #visual .item1 strong {margin-top:85px; padding-top:40px; font-size:24px; background-position: 50% 0; background-size:120px auto;}
	.main #visual .item1 p {font-size:40px;}
	.main #visual .item1 p:after {width:30px; height:2px; margin-left:-15px;}
	.main #visual .item2 strong {padding-top:100px; font-size:45px; line-height:1}
	.main #visual .item2 p {margin-top:20px; font-size:18px;}
	.main #visual .item a {bottom:100px;}
	.main #visual .item3 strong {padding-top:40px; font-size:38px; line-height:1.2}
	.main #visual .item3 p {width:280px; padding:20px 0; font-size:24px; line-height:1.4;}
	.main #visual .slick-dots {bottom:50px;}
	.main #business {padding:40px 0;}
	.main #business .tit:before {height:15px; margin:0 auto 20px;}
	.main #business .tit strong {font-size:14px; letter-spacing:-0.05em}
	.main #business .tit p {margin-top:15px; font-size:18px; font-weight:300}
	.main #business .tit p span {display:block;}
	.main #business .slider {margin-top:26px; padding-top:52px;}
	.main #business .slick-arrow {width:25px; height:25px;}
	.main #business .slick-prev,
	.main #business .slick-next {background-size:25px 25px;}
	.main #business .slick-prev {left:17px;}
	.main #business .slick-next {right:17px;}
	.main #business .slick-dots {left:50%; width:246px; height:auto; margin:0 0 0 -123px; text-align:center; font-size:0; background:url(../_img/m/business_line.png) 50% 50% no-repeat;}
	.main #business .slick-dots li {display:inline-block; float:none; vertical-align:middle;}
	.main #business .slick-dots li + li {margin-left:24px;}
	.main #business .slick-dots button {width:auto; height:auto; font-size:0px; border-radius:100%;  box-sizing:content-box; background:none}
	.main #business .slick-dots button em {display:none;}
	.main #business .slick-dots button .num {display:block; font-size:0; line-height:0; margin:7px; background:#d7d7d7; border-radius:100%; width:16px; height:16px;}
	.main #business .slick-dots button em em {display:inline-block;}
	.main #business .slick-dots li.slick-active button em {font-size:14px; line-height:30px; margin:0; width:30px; height:30px;  background:#d71920;}
	.main #business .slick-dots button:hover {background:#d7d7d7;}
	.main #business .slick-slide {padding:0 5px;}
	.main #business .item {height:250px; background-size:cover;}
	.main #business .slick-slide.slick-active .item:before {height:250px;}
	.main #business .item1 {background:url(../_img/m/main_business5.jpg) 50% 50% no-repeat; background-size:cover;}
	.main #business .item2 {background:url(../_img/m/main_business1.jpg) 50% 50% no-repeat; background-size:cover;}
	.main #business .item3 {background:url(../_img/m/main_business3.jpg) 50% 50% no-repeat; background-size:cover;}
	.main #business .item4 {background:url(../_img/m/main_business4.jpg) 50% 50% no-repeat; background-size:cover;}
	.main #business .item5 {background:url(../_img/m/main_business2.jpg) 50% 50% no-repeat; background-size:cover;}
	.main #business .item .inner {top:68px; left:0; width:100%;}
	.main #business .item strong {padding-bottom:8px; margin:0 0 18px 20px; font-size:60px; letter-spacing:-0.04em;}
	.main #business .item strong em {padding-left:6px; font-size:12px; letter-spacing:-0.02em;}
	.main #business .item strong:after {height:3px; width:97%;}
	.main #business .item span {margin:0 20px;}
	.main #business .item span .kor {margin-bottom:5px; font-size:13px; font-weight:400;}
	.main #business .item span .eng {height:39px; background:url(../_img/m/main_business_txt.png) 0 0 no-repeat; background-size:235px 180px;}
	.main #business .item1 span .eng {background-position:0 0;}
	.main #business .item2 span .eng {background-position:0 -40px;}
	.main #business .item3 span .eng {height:19px; background-position:0 -80px;}
	.main #business .item4 span .eng {background-position:0 -100px;}
	.main #business .item5 span .eng {background-position:0 -140px;}
	.main #notice {padding:50px 0;}
	.main #notice .tit {position:relative; float:none; width:auto; margin:0 0 20px 0;}
	.main #notice .tit strong {font-size:14px; margin-bottom:4px;}
	.main #notice .tit span {font-size:24px; font-weight:300}
	.main #notice .tit a {position:absolute; width:24px; height:24px; top:50%; right:0; margin-top:-14px; border-color:#222; background:url(../_img/ico_plus.png) 50% 50% no-repeat; font-size:0; line-height:0;}
	.main #notice .tit a:after {display:none;}
	.main #notice .list_notice li {padding:12px 0; font-size:16px;}
	.main #notice .list_notice .inner {display:block; float:none;}
	.main #notice .list_notice .inner a {max-width:91%;}
	.main #notice .list_notice .inner a + .ico_new {margin-left:4px}
	.main #notice .list_notice .date {display:none;}
	.main #contact {height:auto; padding:0; text-align:center; background-position:45% 50%}
	.main #contact .wfix {padding:40px 0 45px; margin:0; background:rgba(0,0,0,0.2); text-shadow:0 0 18px rgba(0,0,0,0.5)}
	.main #contact strong {font-size:15px;}
	.main #contact strong:before {display:block; width:2px; height:15px; margin:0 auto 6px; background:#d71920; content:''}
	.main #contact span {margin:6px auto 8px; font-size:36px;}
	.main #contact p {font-size:16px; margin-bottom:22px; font-weight:300}
	.main #contact .btn_cs {line-height:43px; border-radius:43px; font-size:16px;}
	.main #clients {padding:40px 0 22px;}
	.main #clients .tit:before {height:15px; margin:0 auto 8px;}
	.main #clients .tit strong {font-size:14px; margin-bottom:8px}
	.main #clients .tit span {height:17px;}
	.main #clients .tit span img {width:200px; height:auto;}
	.main #clients ul {margin-top:30px;}
	.main #clients ul li {float:none; width:auto;}
	.main #clients .inner {height:160px; margin:0 0 18px;}
	.main #clients .bg {height:160px;}
	.main #clients .client1 .bg {background:url(../_img/m/main_client1.jpg) 50% 50% no-repeat; background-size:cover;}
	.main #clients .client2 .bg {background:url(../_img/m/main_client2.jpg) 50% 50% no-repeat; background-size:cover;}
	.main #clients .client3 .bg {background:url(../_img/m/main_client3.jpg) 50% 50% no-repeat; background-size:cover;}
	.main #clients ul .name {top:40px; left:50%; width:80px; height:80px; margin-left:-98px;}
	.main #clients ul span {top:50%; right:auto; left:50%; line-height:60px; margin-top:-30px; vertical-align:bottom; font-size:15px; text-shadow:0 0 15px rgba(0,0,0,0.5);}
	.main #clients ul span b {vertical-align:bottom; font-size:30px;}
}

@media (max-width:320px){
	.main #business .item span .eng {font-size:20px;}
}