@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200;300;400;500;600;700&display=swap');

section {background-position: center center; background-size:cover;}

/*메인비쥬얼*/
#m_visual {width: 100%; height: 100vh; overflow: hidden; position: relative;}

.video_cover {position: absolute; background: linear-gradient(to bottom, rgba(0,0,0,.7),rgba(255,255,255,.2)) ; z-index: -1; width: 100%; height: 100%;}
#m_visual .video_gif {min-height: 100vh; min-width: 100%; position: fixed; z-index: -2; top:0; left: 50%; transform: translateX(-50%); display: block;}

.m_visual {width: 1200px; height: 100%; margin: 0 auto;position: relative;}
.m_visual:before {content: ''; display: block; background-color: #fff; height: 1px; width: 750px; position: absolute; top: 50%; left: -50%; opacity: .5;}
.m_visual:after {content: ''; display: block; background-color: #fff; height: 1px; width: 750px; position: absolute; top: 50%; right: -50%; opacity: .5;}
.m_visual_global {position: relative; width: 500px; height: 500px; top: 50%; left: 50%; transform: translate(-50%,-50%); z-index: -1;}
.m_visual_global img {position: absolute; width: 100%}
.m_visual_global img:nth-child(1) {opacity: .9; transform: scale(.9)}
.m_visual_global img:nth-child(2) {animation: g_rotate 80s infinite reverse linear; opacity: .3}
.m_visual_global img:nth-child(3) {animation: g_rotate 120s infinite linear; opacity: .7}

@keyframes g_rotate {
	0% {transform: rotate(0)}
	100% {transform: rotate(360deg)}
}

.m_visual_text {position: absolute; top:50%; left: 50%; transform: translate(-50%, -50%); text-align: center; color: #fff; width: 100%;}
.m_visual_text span {display: block; font-size: 30px; text-shadow: 0 0 5px rgba(0,0,0,.3); letter-spacing: 17px} 
.m_visual_text strong {display: block; font-size: 80px; text-shadow: 0 0 5px rgba(0,0,0,.3); font-weight: 700; letter-spacing: 10px}
.m_visual_text p {font-size: 20px; text-shadow: 0 0 5px rgba(0,0,0,.4); margin-top: 20%}

@keyframes sc_move01 {
	0%{transform: translateY(0)}
	50%{transform: translateY(10px)}
	100%{transform: translateY(0)}
}

/*회사소개*/
#m_company {width: 100%; background-image: url(../img/main_company_back.jpg); background-attachment: fixed; padding: 300px 0;}
.m_company {width: 1200px; margin: 0 auto;}
.m_company_text {width: 50%; float: left; padding-right: 5%; border-right: 1px solid rgba(255,255,255,.5);}
.m_company_text strong {font-size: 40px; color: #fff; line-height: 45px;  font-weight: 600;}
.m_company_text h1 {color: #fff; font-size: 20px; line-height: 60px}
.m_company_text p {color: #fff; font-weight: 100}
.m_company_text .more:hover {background-color: inherit; color: #fff; border: 1px solid #fff;}

.m_company_img {width: 50%; float: left;}
.m_company_img ul {width: 100%; padding: 0 10%}
.m_company_img ul li {width: 50%; float: left;text-align: center; margin-bottom: 50px;}
.m_company_img ul li div {width: 120px; height: 120px; display: inline-block; border-radius: 100%; background-color: rgba(0,0,0,.3); padding: 20px}
.m_company_img ul li div img {width: 100%;}
.m_company_img ul li strong {color: #fff;}

/*제품슬라이드*/
#m_product {padding: 200px 0; background-color: #f7f8f8;}
.m_product_title {width: 1200px; margin: 0 auto 50px; padding-bottom: 20px;}
.m_product_title strong {font-size: 40px; font-weight: 600; }
.m_product_title h1 {color: #939598;}
.m_product_slide {width: 100%; position: relative;}
.m_product_slide_page {width: 350px; height: 550px; background-color: #fff; margin: 0 30px;}
.m_product_img {width: 100%; height: auto; padding: 40px;}
.m_product_img img {width: 100%; transition: .2s}
.m_product_img img:hover {transform: scale(1.1)}
.m_product_slide_page h1 {text-align: center; display: block; margin-top: 30px; font-size: 18px; font-weight: 600; padding: 0 5px;}
.m_product_slide_page a {display: block; margin: 0 auto; margin-top: 50px; background-color: #fff; color: #0a4e98; border: 1px solid #0a4e98;}
.m_product_slide_page a:hover {background-color: #0a4e98; color: #fff;}
.m_product_slide .slick-arrow {position: absolute; font-size: 30px; color: #bcbec0; top: -120px; background-color: #ddd; width: 50px; height: 50px; padding: 10px; border: 1px solid #bcbec0; z-index: 1; text-align: center;}
.m_product_slide .slick-arrow:hover {color: #999;}
.m_product_slide .prev_arrow {right: 19%; margin-right: 70px}
.m_product_slide .next_arrow {right: 19%}

.m_product_slide .slick-dots {width: 1200px; margin: 0 auto; font-size: 0; margin-top: 50px;}
.m_product_slide .slick-dots li {background-color: #bcbec0; width: 19%; height: 5px; float: left; transition: .2s; margin: 0 .5%;}
.m_product_slide .slick-dots li.slick-active {background-color: #0a4e98;}

/*인증서*/
#m_certificate {width: 100%; background-image: url(../img/main_certificate_back.jpg);background-attachment: fixed; position: relative; z-index: 1; padding: 200px 0;}
.m_certificate {width: 1200px; height: auto; margin: 0 auto; text-align: center;}
.m_certificate_text {padding: 0 0 50px;}
.m_certificate_text strong {font-size: 40px; line-height: 45px;  font-weight: 500; color: #fff;}
.m_certificate_text div {width: 50px; height: 1px; background-color: #fff; margin: 30px auto;}
.m_certificate_text p {color: #fff; }
.m_certificate_list {width: 100%; height: auto; z-index: 1;}
.m_certificate_list ul {width: 100%; height: auto; margin-top: 50px; padding: 0 30px;}
.m_certificate_list ul li {width: 20%; height: 230px; float: left;}
.m_certificate_list ul li img {height: 100%; transition: .3s}
.m_certificate_list ul li img:hover {transform: translateY(-20px)}
.m_certificate_list .more {margin: 50px auto; color: #fff; border: 1px solid #fff; position: relative; background-color: rgba(0,0,0,0); display: block;}
.m_certificate_list .more:hover {background-color: #0a4e98; border: none;}

/*비지니스*/
#m_business {width: 100%; padding: 300px 0; background-color: #fff;}
.m_business {width: 1200px; margin: 0 auto;}
.m_business_brand {width: 50%; float: left; background-color: #fff; padding: 0 30px;}
.m_business_brand ul li {float: left; width: 33.33%; margin-bottom: 40px}
.m_business_brand ul li img {width: 100%;}
.m_business_text {width: 50%; float: right; padding-left: 5%;}
.m_business_text strong {font-size: 40px; line-height: 45px;  font-weight: 600}
.m_business_text p {font-weight: 300; color: #606060;}

/*안내*/
#m_info {width: 100%; background-color: #fff; position: relative; padding: 50px 0;}
.m_info {width: 1200px; margin: 0 auto;display: block;}
.m_info_con {width: 100%; float: right;}
.m_info_con strong img {max-width: 20px; height: 20px;margin-left: 10px;}
.m_info_location {width: 50%; float: left;}
.m_info_location strong {font-size: 24px; font-weight: 600;}
.m_info_location p {font-weight: 300; line-height: 30px;}
.m_info_location p span {font-weight: 700; padding-right: 20px;}

.m_info_contact {width: 50%; float: left;}
.m_info_contact strong {font-size: 24px; font-weight: 600;}
.m_info_contact p {font-weight: 300; line-height: 30px;}
.m_info_contact p span {font-weight: 700; padding-right: 20px;}
.m_info_contact a {width: 50%; height: 40px; text-align: center; background-color: #0a4e98; display: block; border-radius: 30px; line-height: 40px; color: #fff; font-weight: 100; font-size: 18px; border: 2px solid #0a4e98; transition: .1s;}
.m_info_contact a:hover {letter-spacing: 2px; background-color: #fff; color: #0a4e98; font-weight: 500;}

@media (max-width: 1199px) {
	#header {margin-top:0;}
	/*메인비쥬얼*/
	#m_visual video {height: 100vh; width: auto;}
	.m_visual {width: 100%;}
	.m_visual:before {display: none}
	.m_visual:after {display: none}
	.m_visual_global {width: 60%; height: 400px; top:40%}
	.m_visual_text {top:50%;}
	
	/*회사소개*/
	#m_company {padding: 70px 30px;}
	.m_company {width: 100%;}

	
	
	/*제품슬라이드*/
	#m_product {padding: 100px 0;}
	.m_product_title {width: 100%; padding: 0 30px 20px;}
	.m_product_title strong {font-size: 30px;}
	.m_product_slide_page {width: 300px; height: 500px;}
	.m_product_slide .slick-arrow {right: 30px;}
	.m_product_slide .slick-dots {width: 50%}
	
	/*인증서*/
	#m_certificate {padding: 50px 0;}
	.m_certificate {width: 100%;}
	.m_certificate_text {padding: 30px;}
	.m_certificate_text p {font-size: 14px;}
	.m_certificate_list {height: auto; padding: 30px 0; top:0;}
	.m_certificate_list ul {top:0; height: auto; margin-top: 0; padding: 0}
	.m_certificate_list ul li {padding: 0 1%; height: auto;}
	.m_certificate_list ul li img {height: auto; width: 100%;}
	.m_certificate_list .more {top:0; margin-top: 30px;}
	
	/*비지니스*/
	#m_business {padding: 100px 30px;}
	.m_business {width: 100%;}

	/*안내*/

	.m_info {width: 100%;}
	.m_info_con {width: 50%; padding: 50px;}
	.m_info_location {padding-bottom: 50px;}
	.m_info_contact {padding-top: 50px;}
}

@media (max-width: 767px) {
	/*메인비쥬얼*/
	.m_visual_global {top:50%; width: 80%; height: 250px;}
	.m_visual_text {padding: 0 30px; top:50%;}
	.m_visual_text span {font-size: 14px; line-height: 24px; letter-spacing: 4px}
	.m_visual_text strong {font-size: 50px;line-height: 60px;}
	.m_visual_text p {font-size: 16px;}
	
	.m_company_text {width: 100%; border: 0; padding: 0;}
	.m_company_text h1 {font-size: 18px}
	.m_company_text .more {margin: 0 auto;}
	.m_company_img {width: 100%; margin: 50px 0;}
	.m_company_img ul {padding: 0;}
	.m_company_img ul li {margin-bottom: 30px;}
	.m_company_img ul li div {width: 100px; height: 100px;}
	.m_company_img ul li strong {font-weight: 100;}
	
	/*제품슬라이드*/
	#m_product {padding: 50px 0;}
	.m_product_title {margin-bottom: 30px; padding: 0 30px;}
	.m_product_title h1 {display: none;}
	.m_product_slide_page {width: 190px; margin: 0 10px; height: 350px}
	.m_product_slide_page h1 {font-size: 14px;}
	.m_product_slide_page a {margin-top: 30px;}
	.m_product_img {padding: 20px}
	.m_product_slide .slick-arrow {width: 30px; height: 30px; padding: 5px; font-size: 18px; top: -70px}
	.m_product_slide .prev_arrow {margin-right: 40px}
	
	
	/*비지니스*/
	#m_business {padding: 0;}
	.m_business_brand {width: 100%; margin: 0; padding: 30px 0;}
	.m_business_brand ul li {margin-bottom: 20px;}
	.m_business_text {width: 100%; padding: 30px}
	
	/*안내*/
	#m_info iframe {width: 100%; height: 300px; position: static; }
	.m_info_con {width: 100%; padding: 30px;}
	.m_info_location {padding-bottom: 30px;}
	.m_info_location p {font-size: 14px; line-height: 20px; margin: 10px 0;}
	.m_info_contact {padding-top: 30px;}
	.m_info_contact p {font-size: 14px; line-height: 20px;}
}