@charset "utf-8";


#main .swiper-pagination {bottom:10.5%; height:auto; padding:0; vertical-align:top;}
#main .swiper-pagination-bullet {width:10px; height:10px; margin:0 10px; vertical-align:top; background:rgba(255,255,255,0.4); opacity:1;}
#main .swiper-pagination-bullet-active {background:#ed1c24;}

#main_visual {overflow:hidden;}
#main_visual img {vertical-align:top;}
#main_visual .swiper-wrapper {height:700px; min-height:100vh;}
#main_visual .swiper-slide {position:relative; height:700px; min-height:100vh; background:no-repeat center; background-size:cover;}
#main_visual .slide01 {background-image:url('/images/main/main_visual01.jpg');}

#main_visual .txt_box {position:absolute; top:50%; left:6%; right:6%; transform: translateY(-50%); color:#fff; text-align:center;}
#main_visual .t01 {font-size:100px; line-height:1; font-family: "Montserrat", sans-serif; font-weight:900; letter-spacing:0;}

#main_visual .t01 .red{color: #ed1c24 }
#main_visual .t01 .yellow{color: #ffe400 }
#main_visual .t01 .icon_x{width: 58px; height: 63px;display: inline-block; background:url('/images/main/icon_x.png') no-repeat ;background-size: contain;}
.mobile_txt{display: none;}



#main_visual .t02 {margin-top:38px; font-size:34px; font-weight:500; letter-spacing:-0.09em;}
#main_visual .t03 {margin-top:25px; font-size:19px; line-height:1.57; font-weight:300;}

#main_visual .swiper-slide-active.slide02 {background-image:url('/images/main/main_visual02.jpg');}
#main_visual .swiper-slide-active.slide03 {background-image:url('/images/main/main_visual03.jpg');}
#main_visual .swiper-slide-active.slide04 {background-image:url('/images/main/main_visual04.jpg');}
#main_visual.load .slide02 {background-image:url('/images/main/main_visual02.jpg');}
#main_visual.load .slide03 {background-image:url('/images/main/main_visual03.jpg');}
#main_visual.load .slide04 {background-image:url('/images/main/main_visual04.jpg');}

.pc.resize #main_visual .animate .slide_up,
.pc.resize #main_visual .animate .fade_in,
.pc.resize #main_visual .animate .mask_motion .mask,
.pc.resize #main_visual .animate .red_motion {-webkit-transition-delay:0s !important; transition-delay:0s !important;}







#main_visual .animate .t0101 {-webkit-transition-delay:0.2s; transition-delay:0.2s;}
#main_visual .animate .t0102 {-webkit-transition-delay:0.7s; transition-delay:0.7s;}
#main_visual .animate .mask_motion .mask {-webkit-transition-delay:2s; transition-delay:2s;}
#main_visual .animate .mask_motion .original {-webkit-transition-delay:0.3s; transition-delay:0.3s;}
#main_visual .animate .t02 {-webkit-transition-delay:1.4s; transition-delay:1.4s;}
#main_visual .animate .t03 {-webkit-transition-delay:1.4s; transition-delay:1.4s;}




#portfolio {position:relative; margin-top:96px; padding:0 2%;}
#portfolio ul {overflow:hidden; margin:0.8% -1%;}
#portfolio li {overflow:hidden; float:left; width:25%; padding:1% 1% 0.8%;}
#portfolio li:nth-child(4n+1) {clear:both;}
#portfolio .img_wrap {overflow:hidden; position:relative; padding-bottom:100%;}
#portfolio .img_wrap img {position:absolute; top:0; left:0; width:100%; height:100%;}
#portfolio li > div {position:relative;}
#portfolio li .txt {display:block; padding-top:15px; font-size:24px; color:#333333; font-weight:400; text-align:center;}
#portfolio li .txt small {display:block; font-size:16px; color:#888888;}
#portfolio li .ovr {display:block; position:absolute; top:0; left:0; width:100%; height:100%; text-align:center; background:rgba(0,0,0,0.8); opacity:0; transition:all 0.4s ease; -webkit-transition:all 0.4s ease;}
#portfolio li .ovr .ovr_txt {position:absolute; top:50%; left:0; width:100%; height:220px; margin-top:-110px;}
#portfolio li .ovr em {position:relative; display:inline-block; padding-top:56px; font-size:40px; color:#ffffff; font-weight:400; transition:all 0.4s ease; -webkit-transition:all 0.4s ease;}
#portfolio li .ovr em:before {position:absolute; top:30px; left:50%; width:1px; height:23px; background:#ed1c24; content:''; transition:all 0.4s ease; -webkit-transition:all 0.4s ease;}
#portfolio li .ovr p {margin-top:50px; padding-top:5px;  font-family: "Montserrat", sans-serif; font-size:14px; color:#cccccc; font-weight:500; letter-spacing:0.02em; transition:all 0.4s ease; -webkit-transition:all .4s ease;}
#portfolio li .ovr .view {display:inline-block; width:64px; height:64px; margin-top:40px; border-radius:50%; font-family: "Montserrat", sans-serif; font-size:14px; color:#ed1c24; font-weight:700; line-height:58px; border-radius:50%; -webkit-border-radius:50%; border:3px solid #ed1c24; transition:all 0.8s ease; -webkit-transition:all 0.8s ease;}
.pc #portfolio li:hover .ovr {opacity:1; }
.pc #portfolio li:hover .ovr em {padding-top:36px;}
.pc #portfolio li:hover .ovr em:before {top:0;}
.pc #portfolio li:hover .ovr p {margin-top:0;}
.pc #portfolio li .ovr .view {margin-top:32px;}
#portfolio .btn_more.top {position:absolute; top:10px; right:40px;}



#m_banner {margin-top:60px;}
#m_banner .swiper-slide {}
#m_banner img {vertical-align:top;}
#m_banner .swiper-pagination {bottom:58px;}
#m_banner .swiper-slide {position:relative; height:750px; font-size:100px; line-height:100px; font-weight:900; letter-spacing:0; font-family: "Montserrat", sans-serif; color:#fff; text-align:center;}
#m_banner .txt_box * {vertical-align:top;}
#m_banner .slide01 {background:url('../images/main/m_banner01_bg.jpg') no-repeat center;}
#m_banner .slide01 .txt_box {position:absolute; top:325px; left:0; right:0; z-index:2;}
#m_banner .slide01 .t01 {display:inline-block; }
#m_banner .slide01 .t02 {display:inline-block; font-weight:400;}
#m_banner .slide01 .t03 {display:inline-block; overflow:hidden; position:relative; width:500px; height:112px;}
#m_banner .slide01 .t03 span {position:absolute; top:0; left:0;}
#m_banner .slide01 .t03 em {color:#ed1c24;}
#m_banner .slide01.animate .t01,#m_banner .slide01.animate .t02 {-webkit-transition-delay:0.2s; transition-delay:0.2s;}
#m_banner .slide01.animate .t0301 {-webkit-animation-delay: 0.5s; animation-delay: 0.5s;}
#m_banner .slide01.animate .t0302 {-webkit-animation-delay: 1.4s; animation-delay: 1.4s;}
#m_banner .slide01.animate .t0303 {-webkit-animation-delay: 2.3s; animation-delay: 2.3s;}
#m_banner .slide01.animate .t0304 {-webkit-animation-delay: 3.2s; animation-delay: 3.2s;}
#m_banner .slide01.animate .t0305 {-webkit-animation-delay: 4.1s; animation-delay: 4.1s;}
#m_banner .slide01.animate .t0306 {-webkit-transition-delay: 5.2s; transition-delay: 5.2s;}

#m_banner .slide02 {background:url('../images/main/m_banner02_bg.jpg') no-repeat center;}
#m_banner .slide02 .txt_box {position:absolute; top:285px; left:0; right:0; z-index:2;}
#m_banner .slide02.animate .t01 {display:block; -webkit-transition-delay:0.4s; transition-delay:0.4s;}
#m_banner .slide02.animate .t02 {-webkit-transition-delay:1s; transition-delay:1s;}
#m_banner .animate .red_motion {-webkit-transition-delay:1.4s; transition-delay:1.4s;}
#m_banner .slide02.animate .mask {-webkit-transition-delay:1.5s; transition-delay:1.5s;}
#m_banner .animate .mask_motion .original {-webkit-transition-delay:1.8s; transition-delay:1.8s;}


#m_banner .slide03 {background:url('../images/main/m_banner03_bg.jpg') no-repeat center;}
#m_banner .slide03 .txt_box {position:relative; width:1220px; margin:0 auto; padding-top:200px; padding-left:167px; text-align:left;}
#m_banner .slide03 .t01 {display:inline-block; margin-right:38px; margin-top:13px; font-size:30px; color:#fff; font-weight:300; line-height:1;}
#m_banner .slide03 .t02 {display:inline-block; width:550px; font-size:90px; line-height:1;}
#m_banner .slide03 .t02 p {overflow:hidden; position:relative;}
#m_banner .slide03 .t02 span {display:block; padding-left:37px; background:url('../images/main/icon_bar.png') no-repeat 0 center;}
#m_banner .slide03 .t0202 span, #m_banner .slide03 .t0204 span {color:#ed1c24; }
.pc #m_banner .slide03.animate .t0201 span {-webkit-transition-delay:0.4s; transition-delay:0.4s;}
.pc #m_banner .slide03.animate .t0202 span {-webkit-transition-delay:0.9s; transition-delay:.9s;}
.pc #m_banner .slide03.animate .t0203 span {-webkit-transition-delay:1.3s; transition-delay:1.3s;}
.pc #m_banner .slide03.animate .t0204 span {-webkit-transition-delay:1.7s; transition-delay:1.7s;}










#news {margin-top:95px; text-align:center;}
#news .title01 span:after {left:50%; margin-left:-16px;}
#news ul {width:95%; max-width:1220px; margin:44px auto 60px;}
#news li {position:relative; display:inline-block; width:100%; padding:40px 0;}
#news li+li {border-top:1px solid #e3e3e3;}
#news li .img_wrap {overflow:hidden; float:left; width:229px; height:155px;}
#news li .img_wrap img {width:100%; height:100%;}
#news li .txt {margin-left:295px; padding-right:185px; text-align:left;}
#news li .tit {overflow:hidden; display:block; text-overflow:ellipsis; white-space:nowrap; margin-top:14px; font-size:22px; color:#1a1c1f; font-weight:700;}
#news li .t01 {margin-top:3px; font-size:17px; color:#1a1c1f; line-height:1.47;}
#news li .date {margin-top:17px; font-family: "Montserrat", sans-serif; letter-spacing:0.03em; font-size:15px; color:#707070; font-weight:400;}
#news .btn_more02 {overflow:hidden; position:absolute; top:50%; right:0; width:155px; height:155px; margin-top:-78px; text-indent:-310px; background:url('../images/main/btn_plus02.png') no-repeat center;}
#news .btn_more02:before {position:absolute; top:0; left:0; right:0; bottom:0; border:1px solid #e3e3e3; content:'';}
#news .btn_more02 span {position:absolute; background:#ed1c24;}
#news .btn_more02 .top {top:0; left:0; width:0; height:1px;}
#news .btn_more02 .right {right:0; top:0; width:1px; height:0;}
#news .btn_more02 .bottom {bottom:0; right:0; width:0; height:1px;}
#news .btn_more02 .left {left:0; bottom:0; width:1px; height:0;}
#news .btn_more02:hover .top {width:100%; transition: width .15s ease-in-out; -webkit-transition: width .15s ease-in-out;}
#news .btn_more02:hover .right {height:100%; transition: all .15s ease-in-out .15s; -webkit-transition: all .15s ease-in-out .15s;}
#news .btn_more02:hover .bottom {width:100%; transition: width .15s ease-in-out .3s; -webkit-transition: width .15s ease-in-out .3s;}
#news .btn_more02:hover .left {height:100%; transition: all .15s ease-in-out .45s; -webkit-transition: all .15s ease-in-out .45s;}
#news .mbtn_area {display:none;}




#client {padding:80px 0 96px; text-align:center; background:#f7f7f7;}
#client .client_wrap {position:relative; width:95%; max-width:1220px; margin:0 auto;}
#client .btn_more {position:absolute; top:79px; right:0;}
#client ul {overflow:hidden; margin:68px -9px -9px;}
#client ul li {float:left; width:20%; padding:9px;}
#client ul li img {border:1px solid #e9e9e9; max-width:100%;}





.title01 {position:relative; font-weight:normal; font-family: "Montserrat", sans-serif; font-size:34px; color:#1a1c1f; font-weight:800; letter-spacing:0;}
.title01 span {position:relative; padding-top:12px; }
.title01 span:after {position:absolute; top:0; left:0; width:31px; height:1px; background:#ed1c24; content:'';}
.title01 small {display:inline-block; height:24px;  padding-left:10px; font-family: "Noto Sans KR", sans-serif; font-size:16px; color:#888888; font-weight:normal; vertical-align:middle;}

.title02 {position:relative; padding-top:12px; font-weight:normal; font-family: "Montserrat", sans-serif; font-size:34px; color:#1a1c1f; font-weight:800; letter-spacing:0;}
.title02:after {position:absolute; top:0; left:50%; width:31px; height:1px; margin-left:-16px; background:#ed1c24; content:'';}


.btn_more {padding-right:30px; font-family: "Montserrat", sans-serif; letter-spacing:0; font-size:13px; color:#1a1c1f; font-weight:700; background:url('../images/common/ico_plus.png') no-repeat right center; transition:all 0.4s ease; -webkit-transition:all .4s ease;}
.pc .btn_more:hover {color:#ed1c24;}
.btn_more span {color:#ed1c24;}

.mbtn_area {margin-top:23px; text-align:center; border-top:1px solid #dedede; border-bottom:1px solid #dedede;}
.mbtn_area .more_view {display:block; line-height:58px; font-family: "Montserrat", sans-serif; letter-spacing:0; font-size:13px; color:#1a1c1f; font-weight:700; transition:all 0.4s ease; -webkit-transition:all .4s ease;}
.mbtn_area .more_view span {padding-right:30px; background:url('../images/common/ico_plus.png') no-repeat right center; }
.pc .mbtn_area:hover .more_view {color:#ed1c24;}


.c_red {color:#ed1c24;}



@media all and (max-width:1400px){
	#portfolio li {width:33.33%;}
	#portfolio li:nth-child(4n+1) {clear:none;}
	#portfolio li:nth-child(3n+1) {clear:both;}
    
}

@media all and (max-width:1200px){
	#main_visual .swiper-wrapper, #main_visual .swiper-slide {height:auto;}
	#main_visual .t01 {font-size:80px;}
	#main_visual .t02 {font-size:28px;}
	#main_visual .t03 {font-size:16px;}

	#m_banner .slide01 .txt_box, #m_banner .slide02 .txt_box, #m_banner .slide03 .txt_box {position:absolute; top:50%; left:4%; right:4%; width:auto; padding:0; transform: translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); margin-top:0;}
	#m_banner .slide03 .txt_box {text-align:center;}
	#m_banner .slide03 .t02 {text-align:left;}
	
    #main_visual .t01 .icon_x{width: 45px; height: 50px;}

	
	
}
@media (max-width: 1000px) {
	#portfolio li .ovr {display:none;}
	#portfolio {margin-top:40px; padding:0 16px;}
	#portfolio ul {margin:5px -8px;}
	#portfolio li {width:50%; padding:8px 8px 10px;}
	#portfolio li:nth-child(3n+1) {clear:none;}
	#portfolio li:nth-child(4n+1) {clear:none;}
	#portfolio li:nth-child(2n+1) {clear:both;}	

	#m_banner .swiper-slide {font-size:80px; line-height:80px;}	
	#m_banner .slide03 .t01 {font-size:18px;}
	#m_banner .slide03 .t02 {font-size:54px; width:350px;}
	#m_banner .slide01 .t01, #m_banner .slide01 .t02 {display:block; text-align:center !important;}
	#m_banner .slide01 .t03 {display:block; width:auto;}
	#m_banner .slide01 .t03 span {width:100%;}

	#news li .txt {margin-left:260px; padding-right:0;}
	#news li .tit {margin-top:5px;}
	#news .btn_more02 {display:none;}
}
@media (max-width: 767.98px) {
	
	.m_block {display:block;}
	
	#main_visual .t01 {font-size:30px;}
	#main_visual .t02 {margin-top:10px; font-size:18px;}
    #main_visual .t01 .icon_x{width: 16px; height: 18px;}
    .pc_txt{display: none;}
    .mobile_txt{display: block;}
    .mobile_txt .t03 span{display: block;}
    
	#main_visual .t03 {margin-top:10px; font-size:13px;}	
	#main_visual .t03 br {display:none;}
	#main .swiper-pagination {bottom:20px;}
	#main_visual .txt_box {transform: translateY(-50%); -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); margin-top:0px;}
	
	#portfolio .btn_more.top {top:5px; right:15px;}
	#portfolio li .txt {padding-top:7px;}
	#portfolio li .txt {font-size:16px;}
	#portfolio li .txt small {font-size:12px;}
	


	#m_banner {margin-top:30px;}
	#m_banner .swiper-slide {height:auto; padding-bottom:117%; font-size:40px; line-height:40px; background-size:cover;}
	#m_banner .slide01 {background-image:url('../images/main/m_banner01_bg_m.jpg');}
	
	
	#m_banner .slide01 .t03 {height:45px;}
	.mobile #m_banner .slide01 .t03 span {display:none;}
	.mobile #m_banner .slide01 .t03 .t0306 {display:inline-block;}	
	#m_banner .slide03 .t01 {font-size:15px; display:block; padding:0; text-align:center;}
	#m_banner .slide03 .t02 {width:auto; margin-top:20px; font-size:45px; display:inline-block; text-align:left}
	#m_banner .slide03 .t02 span {padding-left:18px; background-size:5px auto;}

	/*
	#news {margin:30px 10px 0;}
	#news ul {width:auto; margin:2px 0 0;}
	#news li {padding:20px 0;}
	#news li .img_wrap {width:138px; height:93px;}
	#news li .txt {margin-left:154px; padding-right:0;}
	#news .btn_more02 {display:none;}
	#news li .tit {margin-top:0; overflow:hidden; max-height:38px; display:-webkit-box; white-space:normal; font-size:16px;  line-height:19px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis;}
	#news li .t01 {margin-top:5px; overflow:hidden; max-height:36px; display:-webkit-box; font-size:13px;  line-height:18px; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis;}
	#news li .date {margin-top:5px; font-size:11px;}
	#news .mbtn_area {display:block;}
	*/

	#news {margin:30px 16px 0;}
	#news ul {width:auto; margin:2px 0 0;}
	#news li {padding:20px 0;}
	#news li .img_wrap {display:none;}
	#news li .txt {margin-left:0px; padding-right:0;}
	#news .btn_more02 {display:none;}
	#news li .tit {overflow:hidden; font-size:18px; white-space:nowrap; text-overflow:ellipsis; line-height:1.3;}
	#news li .t01 {margin:3px 0 8px; overflow:hidden; max-height:44px; display:-webkit-box; font-size:15px;  line-height:1.47; -webkit-line-clamp: 2; -webkit-box-orient: vertical; text-overflow: ellipsis;}
	#news li .date {margin-top:0; font-size:14px;}
	#news .mbtn_area {display:block;}



	#client {margin-top:30px; padding:30px 16px;}
	#client .client_wrap {width:auto;}
	#client ul {margin:15px -3px -3px;}
	#client ul li {width:33.33%; padding:3px;}
	#client .btn_more {display:none;}



	.title01 {margin-left:0px; margin-bottom:5px; font-size:25px;}
	.title01 span {padding-top:8px;}
	.title01 small {display:none;}

	.title01 span:after {width:15px;}
	.title02 {font-size:25px;}
	.title02:after {width:15px; margin-left:-7px;}

	.btn_more {display:none; padding-right:12px; font-size:11px; background-size:6px auto;}

	.mbtn_area {margin-top:10px;}
	.mbtn_area .more_view {font-size:13px; line-height:40px;}
	.mbtn_area .more_view span {padding-right:15px; background-size:8px auto;}
}