@charset "utf-8";
/*-------------------------------------------------
Author : YjPark
Create date : 2019-04-14
-------------------------------------------------*/

/* Spoqa Han Sans */
@font-face {
    font-family:SpoqaHanSansL;
	font-style:normal;
	font-weight:300;
    src: url("../webfonts/Spoqa Han Sans Light.eot");
    src: url("../webfonts/Spoqa Han Sans Light.eot?#iefix") format("embedded-opentype"), 
		 url("../webfonts/Spoqa Han Sans Light.woff2") format("woff2"), 
	     url("../webfonts/Spoqa Han Sans Light.woff") format("woff"), 
		 url("../webfonts/Spoqa Han Sans Light.ttf") format("truetype");
}
@font-face {
    font-family:SpoqaHanSansR;
	font-style:normal;
	font-weight:400;
    src: url("../webfonts/Spoqa Han Sans Regular.eot");
    src: url("../webfonts/Spoqa Han Sans Regular.eot?#iefix") format("embedded-opentype"), 
		 url("../webfonts/Spoqa Han Sans Regular.woff2") format("woff2"), 
	     url("../webfonts/Spoqa Han Sans Regular.woff") format("woff"), 
		 url("../webfonts/Spoqa Han Sans Regular.ttf") format("truetype");
}
@font-face {
    font-family:SpoqaHanSansB;
	font-style:normal;
	font-weight:700;
    src: url("../webfonts/Spoqa Han Sans Bold.eot");
    src: url("../webfonts/Spoqa Han Sans Bold.eot?#iefix") format("embedded-opentype"), 
		 url("../webfonts/Spoqa Han Sans Bold.woff2") format("woff2"), 
	     url("../webfonts/Spoqa Han Sans Bold.woff") format("woff"), 
		 url("../webfonts/Spoqa Han Sans Bold.ttf") format("truetype");
}
/*body*/
body {font-family:SpoqaHanSansR,"돋움",dotum,sans-serif}
/*wrap*/
.wrap{position:relative;width:100%}

/*gnb*/
.dropdown {position:relative;display:inline-block}
.dropdown-content{display:none;position:absolute;background-color:#f1f1f1;min-width:160px;box-shadow:0px 8px 16px 0px rgba(0,0,0,0.2);z-index:1}
.dropdown-content a{padding:16px 20px;display: block}
.dropdown-content a:hover{background-color:#e1e1e1}
.dropdown:hover .dropdown-content{display:block}
.gnbWrap{position:fixed;width:100%;z-index:200;background:#fff;height:80px}
.gnbWrap .logo{float:left}
.gnbWrap .logo{padding-top:0px}
.gnbWrap .logo a{display:block;width:230px;height:88px;background:url(../images/mediaclick_logo.png) no-repeat center;background-size:contain}
.gnbWrap .menu-container{float:right;background:#fff;}
.gnbWrap .menu li{display:inline-block;padding-left:80px}
.gnbWrap .menu li > a{position:relative;display:block;height:80px;line-height:80px;font-size:18px;color:#191919}
.gnbWrap .menu li > a:hover{color:#0052b0}
.gnbWrap .menu li > a:after{content:"";position:absolute;left:50%;bottom:0;width:0;height:4px;background:#0052b0;transition:width 0.3s ease 0s, left 0.3s ease 0s}
.gnbWrap .menu li > a:hover:after{left:0;width:100%}
.gnbWrap .menu li.on > a{color:#ff514d}
.gnbWrap .menu li.on > a:after{content:"";position:absolute;left:0;bottom:0;width:100%;height:4px;background:#ff514d}
.gnbWrap .hamburger {display:none;position:absolute;top:12px;left:24px;width:26px;z-index:201}
.gnbWrap .hamburger .line{width:100%;height:3px;background-color:#191919;display:block;margin:7px auto;-webkit-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out}
.gnbWrap .hamburger:hover{cursor:pointer}
.gnbWrap .hamburger.is-active{-webkit-transition:all 0.3s ease-in-out;-o-transition:all 0.3s ease-in-out;transition:all 0.3s ease-in-out;-webkit-transition-delay:0.6s;-o-transition-delay:0.6s;transition-delay:0.6s;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg)}
.gnbWrap .hamburger.is-active .line:nth-child(2){width:0px}
.gnbWrap .hamburger.is-active .line:nth-child(1), .gnbWrap .hamburger.is-active .line:nth-child(3){-webkit-transition-delay:0.3s;-o-transition-delay:0.3s;transition-delay:0.3s}
.gnbWrap .hamburger.is-active .line:nth-child(1){-webkit-transform:translateY(10px);-ms-transform:translateY(10px);-o-transform:translateY(10px);transform:translateY(10px)}
.gnbWrap .hamburger.is-active .line:nth-child(3){-webkit-transform:translateY(-10px) rotate(90deg);-ms-transform:translateY(-10px) rotate(90deg);-o-transform:translateY(-10px) rotate(90deg);transform:translateY(-10px) rotate(90deg)}

/*메인 컨텐츠*/
.inner_wrap{max-width:1248px;min-width:320px;margin:0 auto;padding:0 24px;height:100%;position:relative}
.img img{width:100%}
/*visual*/
.visual{position:relative;width:100%;height:660px;padding-top:80px;background:url(../images/visual_02.jpg) no-repeat;background-size:cover}
.visual .inner_wrap{display:flex;justify-content:center;align-items:center}
.visual .heading{color:#fff;text-align:center}
.visual .heading h1{font-size:44px;line-height:52px;font-weight:bold;margin-bottom:15px}
.visual .heading p{font-size:20px;line-height:28px;padding-left:5px}
/*story*/
.content_wrap{width:100%;}
.content_wrap .main_title{text-align:center;font-size:37px;font-weight:700}
.content_wrap .main_text{text-align:center;font-size:18px;line-height:27px;padding:28px 0 45px}
.service_wrap ul{margin-left:-20px}
.content_wrap li{float:left;width:33.3333%;padding-left:20px}
.content_wrap li a{display:block}
.content_wrap li span{display:block;font-size:22px;}
.content_wrap .img{margin-bottom:23px}
.service,.news{padding:80px 0 100px}
.service_wrap{width:100%;overflow:hidden}
.service_wrap li a{text-align:center;min-height:440px;padding-top:84px}
.service_wrap .service_name{font-size:24px;font-weight:bold;margin:43px 0 30px}
.service_wrap p{font-size:18px;line-height:26px;padding:0 36px}
.item{width:100%;background:#f4f6fa}
.item .item_wrap{padding:50px 24px}
.item .solution_wrap{width:50%;float:left;padding-left:10px}
.item .solution_icon{display:inline-block;}
.item .text_wrap{display:inline-block;width:100%}
.item .text_wrap h3{font-size:27px;font-weight:700}
.item .text_wrap p{font-size:18px;line-height:28px;padding:24px 0 28px}
.item .btn_box a{display:inline-block;width:140px;font-size:14px;padding:16px 0;text-align:center;border:1px solid #000;margin-right:10px}
.news .img{height:162px;overflow:hidden}
.news_wrap ul{margin-left:-40px}
.news_wrap li a{padding:0;padding-bottom:24px;border:1px solid #e1e1e1;position:relative;overflow:hidden}
.content_wrap li a:hover .img img{-webkit-transform: scale(1.2);-ms-transform: scale(1.2);transform: scale(1.2);-webkit-transition-duration: 1s; transition-duration: 1s;z-index:0}
.news_wrap .promo_wrap{width:50%;float:left;margin-left:-20px;}
.news_wrap .promo{display:block;border:1px solid #e1e1e1;margin-left:20px;}
.news_wrap .promo_bottom{margin-top:20px}
.news_wrap .promo img{width:100%}
.news_wrap .news_text{padding:0 18px}
.news_wrap .headline,.news_wrap p{text-overflow:ellipsis;white-space:normal;word-wrap:break-word;overflow:hidden;display:-webkit-box;-webkit-box-orient:vertical}
.news_wrap .headline{font-size:22px;line-height:28px;margin-bottom:7px;height:60px;-webkit-line-clamp:2}
.news_wrap p{font-size:15px;line-height:22px;height:70px;-webkit-line-clamp:4}
.news_wrap .date{display:block;font-size:15px;margin-top:25px}
.contact h2{font-size:37px;font-weight:bold}
.contact .solution_wrap{padding-left:0}
.contact .form-group{width:100%;margin-bottom:18px}
.contact .form-label{display:block;font-size:18px;margin-bottom:12px}
.contact .form-control{width: 100%;font-size:14px;padding:13px 10px;border-radius:0;border:1px solid #ddd;box-shadow:none}
.contact .btn_box{float:right;margin-right:0}
.contact .btn_box a{margin-right:0;background:#236d9e;border-color:#236d9e;color:#fff}
.contact .form_wrap{background:#fff;padding:50px 40px 40px 40px;border:1px solid #e1e1e1}

.sub .item .item_wrap{border-bottom:1px solid #e1e1e1;padding:70px 24px}
.sub .solution_wrap:nth-child(2){padding-left:5%}

/*footer*/
.footer_wrap{width:100%;background:#222325;font-size:14px}
.footer_wrap .footer_inner{max-width:1248px;margin:0 auto;padding:20px 24px 30px;font-size:15px;display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-between;align-items:center}
.footer_wrap ul > li {display:inline-block}
.terms_wrap{padding-top:10px}
.terms_wrap li a{color:#fff}
.terms_wrap li:after {content:"|";padding:0 10px;color:#fff} 
.terms_wrap li:last-child:after {content:none}
.companyinfo_wrap{padding-top:10px;color:#999999;line-height:1.5}
.companyinfo_wrap .address, .companyinfo_wrap .tel{padding-right:14px}

/*반응형*/
@media screen and (max-width:1023px){
	/*gnb*/
	.dropdown-content{display:block;position:static;background-color:#fff;box-shadow:none}
	.dropdown-content a:hover{background-color:#fff}
	.gnbWrap{height:60px}
	.gnbWrap .hamburger{display:block}
	.gnbWrap .logo{float:none;padding-top:0;position:absolute;top:0px;left:50%;margin-left:-57px}
	.gnbWrap .logo a{width:188px;height:72px}
	.gnbWrap .menu-container{position:absolute;width:300px;height:100vh;top:60px;left:-100%;transition:left .7s ease-in-out;text-align:left}
	.gnbWrap .menu-container.is-active{left:0}
	.gnbWrap .menu li{display:block;padding-left:24px}
	.gnbWrap .menu li > a{height:60px;line-height:60px}
	.gnbWrap .menu li > a:hover:after{width:0}
	/*visual*/
	.visual{height:400px;padding-top:60px}
	.visual .heading h1{font-size:30px;line-height:41px;margin-bottom:10px}
	.visual .heading p{font-size:16px;line-height:27px;padding-left:5px}
	/*story*/
	.content_wrap .main_title{text-align:left;font-size:24px}
	.content_wrap .main_text{text-align:left;font-size:16px;line-height:27px;padding:20px 0 24px}
	.content_wrap{padding-top:40px}
	.content_wrap li{width:50%;margin-bottom:20px}
	.content_wrap .img{margin-bottom:20px}
	.service, .news{padding:40px 0}
	.service_wrap{padding:0;padding-top:0}
	.service_wrap li a{padding-top:80px}
	.service_wrap .service_name{font-size:22px;margin:43px 0 28px}
	.service_wrap p{font-size:16px;line-height:24px;padding:0 18px}
	.item .item_wrap{padding:40px 24px}
	.item .text_wrap h3{font-size:22px}
	.item .text_wrap p{font-size:16px;line-height:24px;padding:14px 0 18px}
	.news_wrap ul{margin-left:-20px}
	.news_wrap .promo_wrap{width:100%;margin-bottom:20px}
	.news_wrap .promo{width:100%}
	.news .img{height:164px}
	.news_wrap .headline{font-size:20px;line-height:28px}
	.contact h2{font-size:24px}
	.contact .item .solution_wrap:first-child{margin-bottom:20px}
	.contact .form-label{font-size:18px}
	.contact .form_wrap{padding:40px 24px}
	
	.sub .item .item_wrap{padding:40px 24px}
	.sub .solution_wrap:nth-child(2){padding-left:0}
}

@media screen and (max-width:767px){
	.item .solution_wrap{width:100%;padding-left:0}
	.item .solution_wrap:first-child{margin-bottom:44px}
	.content_wrap .img{margin-bottom:10px}
	.news .img{height:100px}
	.contact .solution_wrap:first-child{margin-bottom:10px}
}