@charset "utf-8";

/*-----------------------------------------------------------------------------------------
	safety
-----------------------------------------------------------------------------------------*/

#safety{ background-color: #fff; z-index: 1; position: relative; padding: 150px 0; }

#safety3{ text-align: center; margin-top: 60px;}
#safety3 p.txt{ color: #005AAC; font-size: 20px; line-height: 2em; margin-bottom: 10px; font-weight: bold;}
#safety3 .frame { width:1020px; height:auto; min-height:145px; margin:0 auto; }
#safety3 .frame .list { width:100%; margin:0 auto; padding-top:10px; text-align:center; }
#safety3 .frame .list li { display:inline-block; vertical-align:top; padding-top:30px; }
#safety3 .frame .list li:not(.wid) .bc_modal_movie img { width: 200px; }
#safety3 .frame .list li .bc_modal_movie::after{ display: none; }
#safety3 .frame .list li.wid { width:920px; padding-top: 0; display: block; margin: 0 auto; }
#safety3 .frame .list li.wid  > div { display: flex; justify-content: space-between; align-items: center; }
#safety3 .frame .list li.wid p.note{ width: 100%; }
#safety3 .frame .list li.wid.car_new::before { left: 0; top: 0; }
#safety3 .frame .list li.wid .mov .linkBtn.s{ width: 100%; }
#safety3 .frame .list li.wid .mov .linkBtn.s a{ padding: 15px 20px; }
#safety3 .frame .list li a:hover img { opacity:0.7; filter:alpha(opacity=70); }
#safety3 .frame .list li .btn { margin-top:15px; }
#safety3 .frame .list li.badge { position:relative; }
#safety3 .frame .list li.badge span { position:absolute; left:15px; top:15px; display:block; width:42px; height:45px; background:url(/safety/common/lineup/img/badge_01.png) no-repeat left top; }
#safety3 .frame .btn { margin-top:50px; text-align:center; }
#safety3 .frame .btn a:hover img { opacity:0.7; filter:alpha(opacity=70); }
#safety3 .frame .list li p.note{ font-size: 10px; width: 200px; margin: 0 auto 0; line-height: 1.3em; text-align: left; }
#safety3 .frame .list li .linkBtn{ width: 200px; margin: 0 auto;}
#safety3 .mamoru{ width: 950px; margin: 40px auto; padding: 40px 0 30px; text-align: center; background-color: #EFF4F5;}
#safety3 .mamoru h3{ color: #005AAC; font-size: 30px; margin-bottom: 20px;}

#new-eyesight{ background: #000 url(../img/neweye_main.jpg) no-repeat top center; background-size: 100% auto; width: 90%; margin: 5% auto;  color: #fff; padding-bottom: 4%; transition: 1s; opacity: 0; }
#new-eyesight .n-copy{ width: 90%; margin: 0 auto; padding-top: 4%; }
#new-eyesight .n-copy h2{ transition: 1s; transform: translateY(30px); opacity: 0; }
#new-eyesight .n-copy h2 + p{ font-size: 22px; line-height: 1.8; margin-top: .5em;  letter-spacing: 0.05em; } 
#new-eyesight .n-copy h2 + p b{ font-size: 130%; }
#new-eyesight .n-copy p{ padding-left: 15px; transition: 1s; opacity: 0; }
#new-eyesight .n-ph1{ display: flex; align-items: baseline; justify-content: space-between; width: 80%; margin: 0 auto; max-width: 1150px; transition: 1s; transform: translateY(30px); opacity: 0; }
#new-eyesight .n-tit{ font-size: 35px; line-height: 1.8; margin: 2em;  letter-spacing: 0.05em; text-align: center; transition: 1s; opacity: 0;  }
#new-eyesight .n-ph2{ display: flex; align-items: center; justify-content: space-between; width: 90%; margin: 0 auto 5%; max-width: 1300px; transition: 1s; opacity: 0; }
#new-eyesight .n-ph2 li:last-child{ transform: translateX(-31%); }
#eyesight-x{ margin: 10% auto 4%; text-align: center; transition: 1s; transform: translateY(-30px); opacity: 0;  }
#eyesight-x img{ max-width: 100%; height: auto; }
#eyesight-x.on,#new-eyesight.on,#new-eyesight .n-copy h2.on,#new-eyesight .n-copy p.on,#new-eyesight .n-ph1.on,#new-eyesight .n-tit.on,#new-eyesight .n-ph2.on{ opacity: 1; transform: translateY(0) }

@media screen and (max-width: 1440px) {
	#new-eyesight img{ max-width: 100%; height: auto; }
	#new-eyesight{ width: 94%; margin: 4% auto; }
	#new-eyesight .n-copy h2{ width: 50%; }
	#new-eyesight .n-copy h2 + p{ font-size: 18px;}
	#new-eyesight .n-ph1 li:last-child{ margin-left: 3%; }
	#new-eyesight .n-tit{ font-size: 30px;}
	#new-eyesight .n-ph2 li:last-child{ transform: translateX(-20%); }

}

/*-----------------------------------------------------------------------------------------
	slick
-----------------------------------------------------------------------------------------*/
.slider { margin-bottom:0 !important; }
.arrow { position:absolute; top:50%; width:1000px; margin:0 150px; }
.arrow .prev,
.arrow .next { position:absolute; z-index:1; width:30px; height:70px; cursor:pointer; -webkit-transform: translate(0, -50%); -ms-transform: translate(0, -50%); transform: translate(0, -50%); }
.arrow .prev { left:0; }
.arrow .next { right:0; }

.main-container { position:relative; width:100%; min-width:1000px; max-width:1300px; margin:0 auto; overflow:hidden; }
.main-container .silde-contents { position:relative; min-width:1000px; max-width:1300px; height:440px; margin:0 auto; overflow:hidden; }

.lineup-container { position:relative; width:100%; min-width:1000px; max-width:1300px; margin:80px auto 0; }
.lineup-container .silde-contents { position:relative; height:377px; overflow:hidden; }
.lineup-container .silde-contents .slider img { display:block; margin:0 auto; }

.lineup-container li{ position:relative; }
.lineup-container li.eye:before,
.lineup-container li.eye_x:before{ content: ""; position:absolute; width: 299px; height: 53px; left: 70px; bottom: 70px; display: block; background: url(/safety/eyesight/img/eye_logo.png) no-repeat; }
.lineup-container li.eye_x:before{ background: url(/safety/eyesight/img/eye_x.png) no-repeat; width: 290px; height: 48px; }

.lineup-container li.eye2:before,
.lineup-container li.eye3:before{ content: ""; position:absolute; width: 290px; height: 48px; left: 70px; bottom: 70px; display: block; background: url(/safety/eyesight/img/eye2.png) no-repeat; }
.lineup-container li.eye3:before{ background: url(/safety/eyesight/img/eye3.png) no-repeat; }
.lineup-container li.eye4:before{ content: ""; position:absolute; width: 360px; height: 48px; left: 70px; bottom: 70px; display: block; background: url(/safety/eyesight/img/eye4.png) no-repeat; }

.lineup-container .thumb { position:relative; margin-top:-30px; }
.lineup-container .thumb .item { text-align:center; }
.lineup-container .thumb .item li { display:inline-block; vertical-align:top; cursor:pointer; }
.lineup-container .slick-slide { opacity:.5; }
.lineup-container .slick-slide.slick-current { opacity:1; }

/*-----------------------------------------------------------------------------------------
	banner
-----------------------------------------------------------------------------------------*/

.banner-area {
	padding-bottom: 80px;
	padding-left: 20px;
	padding-right: 20px;
}
.banner-area__banner-wrapper {
	max-width: 1280px;
	width: 100%;
	margin: auto;
}
.banner-area__banner {
	display: block;
	transition: opacity 250ms ease 0ms;
}
.banner-area__banner:hover {
	opacity: 0.8;
}
.banner-area__note {
	max-width: 1280px;
	width: 100%;
	margin: auto;
	margin-top: 40px;
}