/********** 메인 비주얼 **********/

#mainvisual { position:relative; width:100%; height:100vh; overflow:hidden; background:#111; }

#mainvisual #main_video {
	position: absolute;
    top: 0;
	left:0;
    width: 100%;
    height: 100%;
    z-index:0;
	overflow: hidden; }

#mainvisual #video {
   width: 100vw;
   height: 56.25vw; /* Given a 16:9 aspect ratio, 9/16*100 = 56.25 */
   min-height: 100vh;
   min-width: 177.77vh; /* Given a 16:9 aspect ratio, 16/9*100 = 177.77 */
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}


#main_txt { display:table; width:100%; height:100%; position:relative; z-index:10; }
#main_txt > div { display:table-cell; vertical-align:middle; text-align:center; }
#main_txt p { color:#fff; text-align:center; padding:0 20px; }
.mtxt_bold { font-weight:700; font-size:76px; font-family:'Poppins'; display:none; }
.mtxt_detail { font-weight:400; font-size:22px; line-height:150%; }


#mouse_wheel { position:absolute; width:60px; bottom:50px; left:50%; margin-left:-30px; z-index:10; cursor:pointer; }
#mouse_wheel div { width:24px; margin: 0 auto; height:38px; border:2px solid #fff; border-radius:12px; position:relative; }
#mouse_wheel div i { position:absolute; width:2px; height:6px; left:calc(50% - 1px); top:4px; background:#fff; border-radius:1px; margin-top:1px; animation-name: mouse; animation-duration: 1s; animation-iteration-count: infinite; }
#mouse_wheel p { text-align:center; color:#fff; font-size:11px; font-weight:500; }

@keyframes mouse{ 50% { top:9px; } }


@media (max-width:1400px) {
	.mtxt_bold { font-size:64px; }
	.mtxt_detail { font-size:20px; }
}

@media (max-width:1200px) {
	#mainvisual { height:700px; }
	#mainvisual #video { height:700px; min-height:700px; }
	#main_txt > div { padding-top:30px; }
	.mtxt_bold { font-size:56px; }
	.mtxt_detail { font-size:19px; }
	#mouse_wheel { display:none; }
}

@media screen and (max-width:1000px) {
	#mainvisual { height:580px; }
	#mainvisual #video { height:580px; min-height:580px; }
	.mtxt_bold { font-size:48px; }
	.mtxt_detail { font-size:17px; }
}
@media screen and (max-width:768px) {
	.mtxt_bold { font-size:40px; }
	.mtxt_detail { font-size:16px; }
}
@media screen and (max-width:540px) {
	#mainvisual { height:480px; }
	#mainvisual #video { height:480px; min-height:480px; left: 30%; }
	.mtxt_bold { font-size:32px; }
	.mtxt_detail { font-size:14px; }
	.mtxt_detail br { display:none; }
	a.mvbtn { height:34px; line-height:34px; padding:0 13px; border-width:2px }
}




/********** 메인 타이틀 **********/

.main_tit { font-size:48px; color:#fff; font-weight:700; font-family:'Poppins'; }
.main_stit { font-size:21px; color:#fff; font-weight:500; }
.main_det { font-size:15.5px; color:#fff; line-height:160%; opacity:.8; }
.main_tit .bk { color:#111; }



#main_certi p { color:#222; }




/********** Main 3 Section Banner **********/


#main_deisgn { display:flex; width:100%; height:580px; overflow:hidden; }

#main_deisgn li { position:relative; width:33.33%; background-repeat:no-repeat; background-size:cover; transition:all .5s; }
#main_deisgn li:nth-child(1) { background-image:url('../images/mban1.jpg'); background-position:center; }
#main_deisgn li:nth-child(2) { background-image:url('../images/mban2.jpg'); background-position:center; }
#main_deisgn li:nth-child(3) { background-image:url('../images/mban_3_.jpg'); background-position:center; }


#main_deisgn .ban_txt { position:absolute; z-index:10; top:380px; width:100%; padding:0 60px; }
#main_deisgn .ban_txt * { text-align:left; }

#main_deisgn strong { display:block; font-weight:700; font-size:36px; line-height:130%; color:#fff; }
#main_deisgn p { font-weight:400; font-size:17px; line-height:150%; color:#fff; }

#main_deisgn li:before { display:block; content:''; position:absolute; width:100%; height:100%; background:linear-gradient(to top, #000, transparent); opacity:.6; }
#main_deisgn li:hover { width:50%; }

@media (min-width:1024px) {
	#main_deisgn li:hover:before { background:#171776; opacity:.8; }
	#main_deisgn li:hover .ban_txt, #main_deisgn li:hover .ban_txt * { text-align:center; }
}
#main_deisgn li:hover .ban_txt { top:180px; }
#main_deisgn li:hover strong { font-size:46px; }


a.btn_more { display:none; font-weight:400; box-sizing:content-box; height:44px; line-height:44px; padding:0 20px; font-size:13px; color:#fff; border:2px solid #fff; letter-spacing:0; margin-top:40px; }
a.btn_more:after { float:right; margin-left:12px; width:17px; opacity:1; background-image:url("http://sample.shazam.co.kr/images/arr3_mdw_01.png"); content:''; display:block; height:inherit; background-position:center; background-repeat:no-repeat; }

#main_deisgn li:hover a.btn_more { display:inline-block; }
a.btn_more:hover { background:#fff; color:#000; }
a.btn_more:hover:after { background-image:url("http://sample.shazam.co.kr/images/arr3_mdb_01.png"); }



@media (max-width:1400px) {
	#main_deisgn { height:580px; }
	#main_deisgn .ban_txt { top:440px; padding:0 40px; }
	#main_deisgn strong { font-size:26px; }
	#main_deisgn p { font-size:15px; }
	#main_deisgn li:hover .ban_txt { top:215px; }
	#main_deisgn li:hover strong { font-size:36px; }
	a.btn_more { height:40px; line-height:40px; padding:0 17px; font-size:11px; margin-top:32px; }
	a.btn_more:after { width:14px; background-size:14px 14px; margin-left:10px }
}
@media (max-width:1200px) {
	#main_deisgn { height:480px; }
	#main_deisgn .ban_txt { top:340px; padding:0 40px; }
	#main_deisgn strong { font-size:22px; }
	#main_deisgn p { font-size:14px; }
	#main_deisgn li:hover .ban_txt { top:170px; }
	#main_deisgn li:hover strong { font-size:30px; }
	a.btn_more { height:34px; line-height:34px; padding:0 14px; margin-top:28px; }
}

@media (max-width:1023px) {
	#main_deisgn { display:block; height:auto; }
	#main_deisgn li { width:100%; height:282px; }
	#main_deisgn li:hover { width:100%; }
	#main_deisgn li:before { background:linear-gradient(to right, #000, transparent); opacity:.7; }

	#main_deisgn li:nth-child(2):before { background:linear-gradient(to left, #000, transparent); }
	#main_deisgn li:nth-child(2) div, #main_deisgn li:nth-child(2) div * { text-align:right; }
	a.btn_more { display:inline-block; }
	#main_deisgn .ban_txt, #main_deisgn li:hover .ban_txt { top:60px; }
	#main_deisgn strong, #main_deisgn li:hover strong { font-size:30px; }
}
@media screen and (max-width:768px) {
	#main_deisgn li { height:240px; }
	#main_deisgn .ban_txt { padding:0 20px; }
	#main_deisgn .ban_txt, #main_deisgn li:hover .ban_txt { top:46px; }
	#main_deisgn strong, #main_deisgn li:hover strong { font-size:26px; }
	#main_deisgn p { font-size:13px; }
	a.btn_more { height:32px; line-height:32px; margin-top:22px; }
}

@media screen and (max-width:540px) {
	#main_deisgn li { height:210px; }
	#main_deisgn .ban_txt, #main_deisgn li:hover .ban_txt { top:39px; }
	#main_deisgn strong, #main_deisgn li:hover strong { font-size:22px; }
	a.btn_more { height:28px; line-height:28px; padding:0 13px; font-size:10px; margin-top:18px; }
	a.btn_more:after { width:12px; background-size:12px 12px; margin-left:6px }
}








/********** main_works **********/

#main_works { padding:130px 0; }

.slide_tit  { position:absolute; width:500px; }
.slide_wrap { padding-left:600px; overflow:hidden; }
#works { width:90vw; }

.mw_arr { position:absolute; top:200px; width:50px; height:50px; cursor:pointer; border:2px solid #fff; background-position:center; background-repeat:no-repeat;}
.mw_prev { background-image:url('../images/mw_prev.gif'); left:-540px; }
.mw_next { background-image:url('../images/mw_next.gif'); left:-492px; }

#works li { padding:0 20px; }
#works li div { height:18vw; background-size:cover; background-position:center; background-repeat:no-repeat; }
#works li p { margin-top:35px; color:#77baff; font-weight:500; font-size:16px; }
#works li strong { display:block; line-height:140%; margin-top:10px; color:#fff; font-weight:500; font-size:19px; }
#works li span { display:inline-block; margin-top:20px; padding:5px 16px 6px; background:#fff; color:#171776; border-radius:40px; font-size:13px; font-weight:500; }

@media (max-width:1500px) {
	.slide_tit { width:400px; }
	.mw_prev { left:-460px; }
	.mw_next { left:-412px; }
	.slide_wrap { padding-left:500px; }
	#works { width:1200px; }
	#works li { padding:0 15px; }
	#works li div { height:240px }
	#works li p { font-size:15px; margin-top:30px; }
	#works li strong { font-size:17px; }
}

@media (max-width:1140px) {
	.slide_tit { width:400px; }
	.slide_wrap { padding-left:400px; }
	.mw_prev { left:-360px; }
	.mw_next { left:-312px; }
	#works li p { font-size:14px; margin-top:25px; }
	#works li strong { font-size:16px; }
	#works li span { margin-top:15px; padding:4px 13px 5px; font-size:12px; }
}

@media (max-width:1000px) {
	.mw_arr { top:180px; width:40px; height:40px; background-size:8px; }
	.mw_prev { left:-370px; }
	.mw_next { left:-332px; }
}

/* 900이하 */
#main_works.res .slide_tit { position:static; width:auto; }
#main_works.res .slide_tit p { text-align:center; }
#main_works.res .slide_tit .main_det br { display:none; }

#main_works.res .slide_wrap { padding-left:0; }
#main_works.res #works { width:100%; margin-top:50px; }

@media (max-width:900px) {
	#works li p { font-size:13px; }
	#works li strong { font-size:14.5px; }
	#works li span { margin-top:12px; padding:3px 10px 4px; font-size:11px; }
}
@media (max-width:640px) {
	#works li { padding:0 2vw; }
	#works li div { height:44vw; }
	#main_works.res #works { margin-top:30px; }
	#main_works.res .slide_tit .main_det br { display:block; }
	#works li p { font-size:12.5px; margin-top:20px; }
	#works li strong { font-size:13.5px; margin-top:5px; }
	#works li span { padding:2px 10px 3px; }
}




/********** 주요 특허 **********/

#license { width:90vw; }

.ml_arr { position:absolute; top:200px; width:50px; height:50px; cursor:pointer; border:2px solid #888; background-position:center; background-repeat:no-repeat;}
.ml_prev { background-image:url('../images/ml_prev.gif'); left:-540px; }
.ml_next { background-image:url('../images/ml_next.gif'); left:-492px; }

#license li { padding:0 20px; text-align:center; }
#license li div { height:17vw; background-size:cover; background-position:center; background-repeat:no-repeat; border:1px solid #ccc; }
#license li p { margin-top:35px; color:#77baff; font-weight:500; font-size:16px; }
#license li strong { display:block; line-height:140%; margin-top:10px; color:#222; font-weight:500; font-size:16px; }


@media (max-width:1500px) {
	.ml_prev { left:-460px; }
	.ml_next { left:-412px; }
	#license { width:1200px; }
	#license li { padding:0 15px; }
	#license li div { height:270px }
	#license li p { font-size:15px; margin-top:30px; }
	#license li strong { font-size:15px; }
}

@media (max-width:1140px) {
	.ml_prev { left:-360px; }
	.ml_next { left:-312px; }
	#license li p { font-size:14px; margin-top:25px; }
	#license li strong { font-size:14px; }
	#license li span { margin-top:15px; padding:4px 13px 5px; font-size:12px; }
}

@media (max-width:1000px) {
	.ml_arr { top:180px; width:40px; height:40px; background-size:8px; }
	.ml_prev { left:-370px; }
	.ml_next { left:-332px; }
}

/* 900이하 */
#main_certi.res .slide_tit { position:static; width:auto; }
#main_certi.res .slide_tit p { text-align:center; }
#main_certi.res .slide_tit .main_det br { display:none; }
#main_certi.res .slide_wrap { padding-left:0; }
#main_certi.res #license { width:100%; margin-top:50px; }

@media (max-width:900px) {
	#license li p { font-size:13px; }
	#license li strong { font-size:14.5px; }
	#license li span { margin-top:12px; padding:3px 10px 4px; font-size:11px; }
}
@media (max-width:640px) {
	#license li { padding:0 2vw; }
	#license li div { height:44vw; }
	#main_certi.res #works { margin-top:30px; }
	#main_certi.res .slide_tit .main_det br { display:block; }
	#license li p { font-size:12.5px; margin-top:20px; }
	#license li strong { font-size:12.5px; margin-top:5px; }
	#license li span { padding:2px 10px 3px; }
}












/********** CS 1단 배너 **********/

#maincs { padding:160px 20px 300px; background:url('../images/main_cs.jpg') center bottom no-repeat; text-align:center; background-size:cover; }
#maincs strong { font-size:44px; display:block; color:#fff; font-weight:700; }
#maincs p { font-size:18px; color:#fff; line-height:170%; }


@media (max-width:767px) {
	#maincs p br { display:none; }
}

@media screen and (max-width:540px) {
	#maincs p { line-height:150%; }
}




/********** main_News **********/

#main_news { padding:120px 0; position:relative; margin-top:-100px;  }
#main_news:before { display:block; content:''; position:absolute; width:calc(100% - 60px); height:100%; background:#0242c0; z-index:0; top:0; left:0; }


#main_news .col2 > li:first-child { width:540px; }
#main_news .col2 > li:last-child { width:calc(100% - 540px); padding-right:60px; position:relative; margin:-44px 0; }
#main_news .col2 > li:last-child:before { display:block; content:''; position:absolute; width:100%; height:44px; top:0; left:0; background:#0242c0; z-index:1; }
#main_news .col2 > li:last-child:after { display:block; content:''; position:absolute; width:100%; height:44px; bottom:0; left:0; background:#0242c0; z-index:1; }
#news_list li { padding:44px 0; border-top:1px solid rgba(255,255,255,.3); }


#news_list table { width:100%; }
#news_list .news_cont { padding-right:40px; }
#news_list .news_cont .news_tit { font-size:22px; font-weight:500; color:#fff; line-height:150%; }
#news_list .news_cont .news_det { font-size:16px; color:#fff; line-height:160%; opacity:.7; }
#news_list .news_date { width:100px; text-align:center; }
#news_list .news_date p:first-child { font-size:48px; font-weight:600; color:#fff; }
#news_list .news_date p:last-child { font-size:16px; color:#fff; }

.mn_prev { background-image:url('../images/mn_prev.gif'); left:-540px; }
.mn_next { background-image:url('../images/mn_next.gif'); left:-492px; }

@media (max-width:1500px) {
	#main_news { margin-top:-80px; }
	#main_news:before { width:calc(100% - 40px); }
	#main_news .col2 > li:first-child { width:460px; }
	#main_news .col2 > li:last-child { width:calc(100% - 460px); padding-right:40px; margin:-36px 0; }
	#main_news .col2 > li:last-child:before, #main_news .col2 > li:last-child:after { height:36px; }
	#news_list li { padding:36px 0; }
	.mn_prev { left:-460px; }
	.mn_next { left:-412px; }
}

@media (max-width:1300px) {
	#main_news .col2 > li:first-child { width:360px; }
	#main_news .col2 > li:last-child { width:calc(100% - 360px); }
	.mn_prev { left:-360px; }
	.mn_next { left:-312px; }
}


@media (max-width:1000px) {
	#main_news:before { width:calc(100% - 30px); }
	#main_news .col2 > li:first-child { width:260px; }
	#main_news .col2 > li:last-child { width:calc(100% - 260px); margin:-26px 0; }
	#main_news .col2 > li:last-child:before, #main_news .col2 > li:last-child:after { height:26px; }
	#news_list li { padding:26px 0; }
	.mn_prev { left:-260px; }
	.mn_next { left:-222px; }
	#news_list .news_date { width:90px; }
}
@media (max-width:768px) {
	#main_news { margin-top:-50px; }
	#main_news:before { width:calc(100% - 20px); }
	#main_news .col2 > li:first-child { width:240px; }
	#main_news .col2 > li:last-child { width:calc(100% - 240px); padding-right:20px; }
	#news_list .news_date { width:70px; }
}

@media screen and (max-width:767px) {
	#main_news .main_tit, #main_news .main_det { text-align:center; }
	#main_news .btn_more { display:none; }
	#main_news .main_det br { display:none; }
	#main_news .col2 > li:first-child { width:100%; }
	#main_news .col2 > li:last-child { width:100%; padding-right:20px; margin:0; }

	#news_list .news_cont { padding-right:20px; }
	#news_list .news_cont .news_det { display:none; }
	#news_list .news_cont .news_mo_cate { display:block; margin-bottom:10px; font-weight:400; color:#cc0d0d; }
}

@media screen and (max-width:420px) {
	#main_news .col2 > li:last-child:before, #main_news .col2 > li:last-child:after { height:20px; }
	#main_news .col2 > li:last-child { transform:translateY(20px);}
	#news_list li { padding:20px 0; }

	#news_list .news_date { width:70px; }

}











/********** 4 배너 **********/

#footer { padding-top: 200px; margin-top:-80px; }

#main_service { position:relative; }
#main_service .main_det { color:#555; }

.col_box_photo02{ display: flex; flex-wrap: wrap; margin: 0 -20px; }
.col_box_photo02 li{ width: 25%; padding: 0 20px; height: 24vw; }
.col_box_photo02 li > div { box-shadow:2px 2px 15px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow:2px 2px 15px 2px rgba(0, 0, 0, 0.1); height: 100%;  position: relative; overflow:hidden; }

.col_box_photo02 li .img_wrap { width: 100%; height: 70%;  position: absolute; top: 0;  background-position:center; background-repeat:no-repeat; background-size:cover;  }
.col_box_photo02 li:nth-child(1) .img_wrap  { background-image:url('../images/mlink1.jpg'); }
.col_box_photo02 li:nth-child(2) .img_wrap  { background-image:url('../images/mlink2.jpg'); }
.col_box_photo02 li:nth-child(3) .img_wrap  { background-image:url('../images/mlink3.jpg'); }
.col_box_photo02 li:nth-child(4) .img_wrap  { background-image:url('../images/mlink4.jpg'); }

.col_box_photo02 li .txt_wrap { width: 100%; height: 30%; padding: 25px 30px;  position: absolute; bottom: 0; }
.col_box_photo02 li .txt_wrap::before { content: ''; background-color: #fff; width: 100%; height: 100%; position: absolute; left: 0; top: 0; }

.col_box_photo02 .txt_wrap > div{ position: relative; z-index: 10;  height: 100%;}
.col_box_photo02 .txt_wrap .tit { font-size: 25px; color: #131313; font-weight: 700; }
.col_box_photo02 .txt_wrap .en { font-size: 14px; color: #7a7a7a; font-weight: 400; font-family:Nanum Gothic; }
.col_box_photo02 .txt_wrap .txt{ display: none; font-size: 15px; line-height: 140%; }
.col_box_photo02 .txt_wrap .view { position: absolute; right:0; bottom: 0; width:19px; height:12px; background:url('/images/mlink_arrow.gif') right center no-repeat; }

@media (min-width:769px){
	.col_box_photo02 li > div:hover .txt_wrap > div{ position: relative; top: 50%; transform: translateY(-50%); text-align: center; height: auto; }
	.col_box_photo02 li > div:hover .img_wrap { height: 100%; }
	.col_box_photo02 li > div:hover .txt_wrap { height: 100%; }
	.col_box_photo02 li > div:hover .txt_wrap::before { background-color: #171776; opacity: .8; }
	.col_box_photo02 li > div:hover .txt_wrap .txt { display: block; }
	.col_box_photo02 li > div:hover .txt_wrap p{ color: #fff;}
	.col_box_photo02 li > div:hover .txt_wrap .view { position: static; margin-top: 30px; width:100%; background:url('/images/mlink_arrow_w.gif') center no-repeat; }
}

@media (max-width:1400px){
	.col_box_photo02 { margin: 0 -15px; }
	.col_box_photo02 li { height: 380px; padding: 0 15px; }
}

@media (max-width:1300px){
	.col_box_photo02{ margin: 0 -10px; }
	.col_box_photo02 li{ padding: 0 10px; }
}
@media (max-width:1100px){
	.col_box_photo02 li{ height: 320px; }
	.col_box_photo02 li .img_wrap { height: 65%; }
	.col_box_photo02 li .txt_wrap { height: 35%; }
}
@media (max-width:900px){
	.col_box_photo02 li{ height: 380px; }
	.col_box_photo02 { margin: -15px auto; width:600px; }
	.col_box_photo02 li{ width: 50%; height: 300px; padding: 15px; }
	.col_box_photo02 .txt_wrap .view { padding-bottom: 6px; }
}
@media (max-width:800px){
	#footer { margin-top:-70px; }
}
@media (max-width:768px){
	.col_box_photo02{ margin:-10px; width:auto; }
	.col_box_photo02 li{ padding:10px; }
	.col_box_photo02 li > div { box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.1); -webkit-box-shadow:2px 2px 8px 2px rgba(0, 0, 0, 0.1); }
	.col_box_photo02 .txt_wrap .view { background-size:auto 10px; height:10px; }
}
@media (max-width:440px){
	#footer { margin-top:-50px; }
	.col_box_photo02{ margin:-6px; }
	.col_box_photo02 li{ padding:6px; height: 240px; }
	.col_box_photo02 li > div { box-shadow:0px 0px 8px 0px rgba(0, 0, 0, 0.1); -webkit-box-shadow:0px 0px 8px 0px rgba(0, 0, 0, 0.1); }
	.col_box_photo02 .txt_wrap .view { background-size:auto 8px; height:8px; }
}