/* ==================================================
	VISUAL
================================================== */

.main_visual {position:relative; height:820px;}
.main_visual .owl-carousel {height:100%;}
.main_visual .owl-stage-outer {height:100%;}
.main_visual .owl-stage-outer div {height:100%;}
.main_visual .visual01 {background:url("../images/main/mvisual01.jpg") 50% 50% / cover no-repeat;}
.main_visual .visual02 {background:url("../images/main/mvisual02.jpg") 50% 50% / cover no-repeat;}
.main_visual .visual03 {background:url("../images/main/mvisual03.jpg") 50% 50% / cover no-repeat;}

.main_visual .owl-prev {position:absolute; left:25px; top:50%; z-index:9; width:25px; height:47px; font-size:0; text-indent:-9999px; background:url("../images/main/btn_prev.png") 50% 50% / 100% 100% no-repeat; animation-name:btn; animation-duration:2s;}
.main_visual .owl-next {position:absolute; right:25px; top:50%; z-index:9; width:25px; height:47px; font-size:0; text-indent:-9999px; background:url("../images/main/btn_next.png") 50% 50% / 100% 100% no-repeat; animation-name:btn; animation-duration:2s;}

.main_visual .owl-dots {position:absolute; left:0; bottom:20px; z-index:9; width:100%; text-align:center; animation-name:btn; animation-duration:2s;}
.main_visual .owl-dots .owl-dot {display:inline-block; width:40px; height:4px; margin:0 5px; background:white; opacity:0.5;}
.main_visual .owl-dots .owl-dot.active {background:black; opacity:1;}

.main_visual .copy {position:absolute; top:300px; z-index:2; width:calc(100% - 200px); margin:0 100px; text-align:center; color:white; animation-name:copy; animation-duration:2s; font-weight:500;}
.main_visual .copy p:nth-child(1) {margin-bottom:30px; font-size:30px;}
.main_visual .copy p:nth-child(2) {font-size:80px; line-height:1.25em; font-weight:600;}
.main_visual .copy p:nth-child(2) span {display:block;}

@keyframes copy {
		
	0% {top:400px; opacity:0;}
	100% {top:300px; opacity:1;}
	
}

@keyframes btn {
	
	0% {opacity:0;}
	100% {opacity:1;}
	
}


@media all and (max-width:1020px) {

	.main_visual {height:500px;}

	.main_visual .owl-prev {width:16px; height:30px;}
	.main_visual .owl-next {width:16px; height:30px;}

	.main_visual .owl-dots {bottom:15px;}
	.main_visual .owl-dots .owl-dot {margin:0 3px;}

	.main_visual .copy {top:170px; width:calc(100% - 160px); margin:0 80px;}
	.main_visual .copy p:nth-child(1) {margin-bottom:20px; font-size:20px;}
	.main_visual .copy p:nth-child(2) {font-size:50px;}
	.main_visual .copy p:nth-child(2) span {display:none;}

	@keyframes copy {
		
		0% {top:260px; opacity:0;}
		100% {top:170px; opacity:1;}
		
	}

}

@media all and (max-width:640px) {

	.main_visual {height:420px;}

	.main_visual .owl-prev, .main_visual .owl-next {display:none;}

	.main_visual .owl-dots {bottom:10px;}
	.main_visual .owl-dots .owl-dot {width:30px; height:2px; margin:0 2px;}

	.main_visual .copy {top:150px; width:calc(100% - 30px); margin:0 15px;}
	.main_visual .copy p:nth-child(1) {margin-bottom:20px; font-size:16px;}
	.main_visual .copy p:nth-child(2) {font-size:30px;}

	@keyframes copy {
		
		0% {top:200px; opacity:0;}
		100% {top:150px; opacity:1;}
		
	}

}


/* ==================================================
	product
================================================== */

.product {padding:120px 25px 195px; background:url("../images/main/productBg.jpg") 50% 50% / cover no-repeat;}
.product > div {display:flex; flex-wrap:wrap; max-width:1200px; margin:0 auto;}
.product > div > div {width:50%;}
.product > div > div img {width:100%;}
.product > div > div:nth-child(2) {display:flex; flex-direction:column; justify-content:center; padding-left:80px;}
.product h2 {margin-bottom:15px; font-size:50px; font-weight:600; color:#122a88;}
.product h3 {margin-bottom:5px; font-size:25px; font-weight:300;}
.product p {margin-bottom:60px; font-size:18px;}
.product a {display:inline-block; padding:10px 25px; font-size:18px; background:white; border:1px solid #ececec;}
.product a span {display:inline-block; margin-left:40px;}
.product a:hover {color:white; background:#122a88; border:1px solid #122a88;}

@media all and (max-width:1020px) {

	.product {padding:80px 25px 120px;}
	.product > div > div:nth-child(2) {padding-left:40px;}
	.product h2 {margin-bottom:10px; font-size:40px;}
	.product h3 {font-size:20px;}
	.product p {margin-bottom:40px; font-size:16px;}
	.product a {padding:8px 20px; font-size:16px;}
	.product a span {margin-left:30px;}

}

@media all and (max-width:640px) {

	.product {padding:40px 15px 80px; background-position:0 50%;}
	.product > div > div {width:100% !important; padding:0 !important;}
	.product > div > div:first-child {margin-bottom:20px;}
	.product h2 {margin-bottom:5px; font-size:30px;}
	.product h3 {font-size:18px;}
	.product p {margin-bottom:30px; font-size:15px;}
	.product a {width:100%; padding:10px 0; font-size:16px; text-align:center;}
}

/* ==================================================
	company
================================================== */

.company {padding:0 25px; background:url("../images/main/companyBg.jpg") 50% 50% / cover no-repeat;}
.company > div {position:relative; top:-80px; max-width:1200px; margin:0 auto; padding:60px 25px; text-align:center; color:white; background:#122a88;}
.company h2 {margin-bottom:15px; font-size:50px; font-weight:600;}
.company p {margin-bottom:60px; font-size:18px;}
.company > div div {display:flex; justify-content:center; width:100%;}
.company a {position:relative; display:block; width:25%; padding-top:80px; font-size:18px; color:white;}
.company a:nth-child(1) {background:url("../images/main/icon_company01.png") 50% 0 no-repeat;}
.company a:nth-child(2) {background:url("../images/main/icon_company02.png") 50% 0 no-repeat;}
.company a:nth-child(3) {background:url("../images/main/icon_company03.png") 50% 0 no-repeat;}
.company a::after {position:absolute; right:0; top:0; width:1px; height:100%; content:""; background:#5a6aac;}
.company a:last-child::after {display:none;}

@media all and (max-width:1020px) {

	.company > div {top:-60px; padding:45px 25px 50px;}
	.company h2 {margin-bottom:10px; font-size:40px;}
	.company p {margin-bottom:50px; font-size:16px;}
	.company a {width:33.33%; padding-top:60px; font-size:16px;}
	.company a:nth-child(1) {background-size:40px;}
	.company a:nth-child(2) {background-size:46px;}
	.company a:nth-child(3) {background-size:52px;}

}

@media all and (max-width:640px) {

	.company {padding:0 15px;}
	.company > div {top:-40px; padding:30px 15px 40px;}
	.company h2 {margin-bottom:5px; font-size:30px;}
	.company p {margin-bottom:40px; font-size:15px;}
	.company a {padding-top:50px; font-size:14px;}
	.company a:nth-child(1) {background-size:30px;}
	.company a:nth-child(2) {background-size:36px;}
	.company a:nth-child(3) {background-size:42px;}

}

/* ==================================================
	notice
================================================== */

.notice {padding:120px 25px; background:#f7f7f7;}
.notice > div {position:relative; max-width:1200px; margin:0 auto;}
.notice > div::after {clear:both; display:block; content:"";}
.notice h2 {margin-bottom:15px; font-size:50px; font-weight:600;}
.notice .list a {float:left; display:block; width:calc(25% - 15px); margin-right:20px; padding:20px 25px; background:white; border:1px solid #ececec;}
.notice .list a:last-child {margin-right:0;}
.notice .list p {overflow:hidden; width:100%; margin-bottom:5px; font-size:18px; white-space:nowrap; text-overflow:ellipsis;}
.notice .list span {color:#868686;}
.notice .list a:hover {color:white; background:#122a88; border:1px solid #122a88;}
.notice .list a:hover span {color:white;}
.notice > div > a {position:absolute; right:0; top:40px; font-size:18px;}
.notice > div > a:hover {color:#122a88;}

@media all and (max-width:1020px) {

	.notice {padding:60px 25px;}
	.notice h2 {margin-bottom:10px; font-size:40px;}
	.notice .list a {width:calc(50% - 10px); margin:0 10px 15px 0; padding:15px 20px;}
	.notice .list a:nth-child(even) {margin:0 0 15px 10px;}
	.notice .list p {font-size:16px;}
	.notice .list span {font-size:14px;}
	.notice > div > a {top:30px; font-size:16px;}

}

@media all and (max-width:640px) {

	.notice {padding:40px 15px;}
	.notice h2 {margin-bottom:5px; font-size:30px;}
	.notice .list a {width:calc(50% - 4px); margin:0 4px 10px 0; padding:10px 15px;}
	.notice .list a:nth-child(even) {margin:0 0 10px 4px;}
	.notice .list p {margin-bottom:2px; font-size:15px;}
	.notice .list span {font-size:13px;}
	.notice > div > a {top:20px; font-size:15px;}

}