@charset "UTF-8";
.main .slick-prev,.main .slick-next{ background: none ; }
.pnavs li a{ text-decoration: none; color: #fff;}
.automotivelighting{ background: #000; color: #fff;}
.on .titRead, .on .scrolltext {
    opacity: 1;
    transform: translateY(0) rotate(-90deg);
}

#contents{ width: 100%; overflow: hidden;}
.scrolltext.off,.scroll.off{ display: none;}
.scroll {
	    position: fixed;
    z-index: 1;
    bottom: 20px;
    right: 60px;
    overflow: hidden;
    width: 1px;
    height: 80px;
    letter-spacing: 0.08em;
}
.scrolltext
{
    position: fixed;
    font-weight: 400;
    font-size: 10px;
    bottom: 169px;
    color: #000;
    right: 12px;
    transform: rotate(-90deg);
    font-weight: 400;
    letter-spacing: 0.185em;
    color: #fff;
}
.scroll:after, .scroll:before {
	position: fixed;
	top: 0;
	left: 0;
	display: block;
	width: 2px;
	height: 100%;
	content: ''
}
.scroll:before {
	z-index: 10;
	-webkit-animation: scroll 2.4s infinite normal;
	animation: scroll 2.4s infinite normal;
	background: #ccc
}
.scroll:after {
	background: #fff
}

.scroll:after{  background-image: linear-gradient(181deg, #00fff6, #6200ff 47%, #ff00a1);
}
@-webkit-keyframes scroll {
0% {
-webkit-transform:translate3d(0, -100%, 0)
}
15% {
-webkit-transform:translate3d(0, -98%, 0)
}
85% {
-webkit-transform:translate3d(0, 98%, 0)
}
100% {
-webkit-transform:translate3d(0, 100%, 0)
}
}
@keyframes scroll {
0% {
transform:translate3d(0, -100%, 0)
}
15% {
transform:translate3d(0, -98%, 0)
}
85% {
transform:translate3d(0, 98%, 0)
}
100% {
transform:translate3d(0, 100%, 0)
}
}

.entit{font-family: "Helvetica Neue" , Helvetica , Arial , Verdana , Roboto ,  sans-serif;
}
.titRead,.scrolltext{transition: all 1.2s 1.2s ease-out; opacity: 1; transform:translateY(-20px) rotate(90deg);}
.scroll{transition: all 1.2s 1.2s ease-out; opacity: 1; transform:translateY(-20px) ;}
.on .hedUrl,.intno .menu-trigger,.on .mainconTit{ opacity: 1; transform: translateX(0);}
.on .titRead,.on .scrolltext{ opacity: 1; transform:translateY(0) rotate(-90deg);}

.on .scroll{ opacity: 1; transform:translateY(0);}
 .topBoderArea.on h1{ opacity: 1; transform:translateX(0);}
.inner{ max-width: 1416px; padding: 0 20px; margin: 0 auto;}

.main{ background: url("../../img/product/raytela/automotive-lighting/main.png") left top no-repeat; background-size: cover; padding-bottom: 65px  }
.pnavs {
    padding-bottom: 10px;
    padding-top: 10px;
}
.main .logo{ padding-top: 60px; padding-bottom: 135px;}
.main h1{ font-size: 2.0rem; font-weight: bold; margin-bottom: 37px;}
.main h2{ font-size: 6.0rem; line-height: 1.5}
.mainread{ font-size: 1.6rem; line-height: 2.5; padding-top: 120px;}
.pagernav{ display: flex; max-width: 1120px; margin: 0 auto; column-gap: 40px; margin-bottom: 180px;}
.pagernav li { text-align: center; width: 33%;}
.pagernav li a{ color: #fff; font-size: 18px; color: #fff; display: block; padding-top: 16px; text-decoration: none;}
.pagernav li a:after{ content: ""; display: block; width: 6px; height: 3px; background: url("../../img/product/raytela/automotive-lighting/arrow.svg") center bottom no-repeat; margin: 0 auto; width: 10px; height: 10px; background-size: contain; margin-top: 0;}

.pagernav li:nth-child(1) a{ background-image: linear-gradient(42deg, #1db2f9, #4845fd); }
.pagernav li:nth-child(2) a{ background-image: linear-gradient(42deg, #4e34fd, #8700e9)}
.pagernav li:nth-child(3) a{ background-image: linear-gradient(42deg, #9200e2, #d401bc);
 }

.main:before{ display: none;}
.pagernav a{ border-radius: 4px; box-sizing: border-box; height: 70px;　display: grid;
  place-items: center; text-decoration: none; padding-top: 12px;}
.ftcontents{ padding-top: 80px;}


.fstext h2{ font-size: 7.0rem; alignment-baseline: 1.5; margin-bottom: 65px;}
.fstext p{ font-size: 2.4rem; alignment-baseline: 2; padding-top: 65px;}

.fccontents{ position: relative; padding-bottom: 190px;}
.fsimg{ position: absolute; right: 0; top: 0; width: 57.35%; padding-top: 0;}
.fsimg img{ width: 100%; height: auto;}
.fstext{ position: relative; z-index: 2;}

.gsLine{ width: 300px; height: 8px; border-radius: 20px;
	  background-image: linear-gradient(90deg, #ff0000 1%, #ff8800 20%, #b7ff00 35%, #00aaff 53%, #7300ff 70%, #d900ff 86%, #ff0004);
	 background-size: 300% 100%;
	animation: colorRotation 10s linear 0s infinite;}
@keyframes colorRotation {
	from {
		background-position: 0 0;
	}
	to {
		background-position: 300% 0;
	}
}


.structure{ position: relative; padding-top: 100px;}

.structureImg{ position: absolute; left: 0; top: 0;}
.gsLine.rights{ margin-left: auto;}

.structureIncont{ background: #1F1F1F ; padding: 110px 80px 90px 80px; box-sizing: border-box; position: relative; z-index: 2; border-radius: 30px; margin-top: 121px; position: relative}
.structureTit {
    font-size: 12rem;
    font-weight: bold;
    position: absolute;
    right: 0;
    top: -110px;
}
.imgListin{ padding-top: 100px;}
.appTit{ font-size: 1.6rem; margin-bottom: 60px;}

.namber{ font-size: 8.0rem; font-style: italic;}
.imgslist{ display: flex; column-gap: 20px;}
.imgslist li{ width: 50%; position: relative;/*box-shadow: 2px 2px 10px #000 ,
-2px 2px 10px #000 ,
2px -2px 10px #000 ,
-2px -2px 10px #000;*/}
/*.imgslist li img{box-shadow: 2px 2px 10px #000 ,
-2px 2px 10px #000 ,
2px -2px 10px #000 ,
-2px -2px 10px #000;}*/
.imgslist .imgTit{ position: absolute; left: 0; top: -40px; line-height: 1;}
.botmline{ background: url("../../img/product/raytela/automotive-lighting/btmimg.png") center bottom repeat-x; padding-bottom: 200px; background-size: 1536px 345px;}

.botmline{ position: relative;}
/*.botmline:after{ width: 100%; height: 14px; content: ""; display: block; background-image: linear-gradient(90deg, #00fff6, #6200ff 48%, #ff00a1); position: absolute; bottom: 0; backdrop-filter: blur(5px); filter: blur(9px);}*/
.seconsection:before{ content: ""; display: block; width: 100%; height: 41px; background: url("../../img/product/raytela/automotive-lighting/linebg.png") center  bottom; position: absolute; top: 0;}

.sectit{ position: relative;}
.seccontentsWrapp{ background-color: rgb(0 0 0 / 0.5); width: 366px; border-radius: 10px; overflow: hidden; backdrop-filter: blur(5px); border: 1px solid #C1C1C3; padding: 40px 0; box-sizing: border-box; position: absolute; right: 40px; top: 90px}
.applicationTits{ padding: 0 40px; padding-bottom: 30px; display: flex; border-bottom: 1px solid #C1C1C3; letter-spacing: 0.2em; font-size: 1.4rem; align-items: center}


.apcnam{ max-width: 180px; padding-left: 20px; box-sizing: border-box;}

.sectoptxt{ letter-spacing: 0.3em;}
.settopite{ color: #313131; font-size: 11rem; font-weight: bold;  white-space: nowrap; line-height: 1}
.titlsin h2{ font-size: 4.5rem; font-weight: bold; padding-bottom: 10px; letter-spacing: 0.2em;}
.titlsin .sabtits { background: #fff; color: #000; letter-spacing: 0.3em; display: inline;}
.titlsin .sabtits {  }
.sabtitssecon{border-top: 1px solid #C1C1C3; padding: 30px 30px 0 30px;}

.titlsin{ padding: 30px 40px 30px 40px; }

.secmainImg{ border-radius: 150px 0 150px 0; overflow: hidden; margin-top: -16px; overflow: hidden;  box-shadow: 0px 6px 22px 7px rgba(0, 0, 0, 0.35); margin-bottom: 50px;}
.seconsection{ padding-top: 150px;
}

.slick-list{ }
.imgsslides { /*transform: translateX(-10%)*/ }
.imgsslides li.slick-slide{ padding-top: 40px; transform: translateX(-22%) !important; margin-left: -12px}
.imgsslides .imgTit{ top: 0;}

.imgsslides .slick-dots {
    text-align: left;
    background: #000;
    border-radius: 20px;
    width: auto;
    margin-left: 40px;
    width: 140px;
    padding: 0px 10px 10px;
    text-align: center;
	bottom: -37px; left: 6px;
}

.slick-dots li.slick-active button:before{ background: #fff;}

.imgsslides .slick-prev,.imgsslides  .slick-next{ position: absolute; bottom: -40px; top: auto}
.imgsslides .slick-prev:before, .imgsslides .slick-next:before{ background: url("../../img/product/raytela/automotive-lighting/btn_slide.png") left top no-repeat; width: 40px; height: 40px; background-size: contain; display: block; content: "";} 

.imgsslides .slick-next {
    right: auto;
    width: 35px;
    left: 0;
}
.imgsslides .slick-prev{left: 200px;}
.fccontents p,.fccontents h2,.ftcontents h3,.ftcontents li{  
	opacity: 0;
    transform: translate(0, 30px);
 transition: all .4s ;}
.seconsection p,.seconsection h2,.seconsection h3,.seconsection li{  
	opacity: 0;
    transform: translate(0, 30px);
 transition: all .4s ;}

.aftIn{ justify-content: center; padding: 91px 0; max-width: 805px; margin: 0 auto; justify-content: space-between;
}
.afetrcon .logo{ width: 308px;}
.afetrcon .logo img{ width: 100%; height: auto;}
a.raybtn{ border: 1px solid #fff; width: 283px; height: 56px;  display: block; text-align: center; line-height: 56px; color: #fff;}
.on-active {
    opacity: 1 !important;
    transform: none !important;
    transition: all .4s ;
}

.aftIn{ display: flex;}


@media screen and (max-width:980px) {
	
	.main{ position: relative; background: none; padding-bottom: 0
	}
	.main .inner{ position: absolute; top: 0; left: 0; box-sizing: border-box;}
	.main .logo{
    padding-top: 30px;
    padding-bottom: 25px;
}
	.main h1 {
    font-size: 1.6rem;
    font-weight: bold;
    margin-bottom: 25px;
}
	.main h2 {
    font-size: 3.6rem;
    line-height: 1.5;
}
	
	.mainread {
    font-size: 1.4rem;
    line-height: 2.5;
    padding-top: 45px;
}
	.ftcontents{ padding-top: 40px;}
	.pagernav{ display: block;}
	.pagernav li {
    text-align: center;
    width: 100%;
		margin-bottom: 20px;
}
	.pagernav li:last-child{ margin-bottom: 0;}
	.fsimg {
    position: relative;
    right: auto;
    top: auto;
    width: 100%;
    padding-top: 0;
}
	.pagernav {
    margin-bottom: 10px;
}
	.fstext h2 {
    font-size: 4.0rem;
    alignment-baseline: 1.5;
    margin-bottom: 25px;
}
	.gsLine{ height: 5px;}
	
	.fstext p {
    font-size: 2.0rem;
    alignment-baseline: 2;
    padding-top: 35px;
}
	.fccontents {
    position: relative;
    padding-bottom: 0;
}
	.structureTit {
    font-size: 5rem;
    font-weight: bold;
    position: absolute;
    right: 0;
    top: -110px;
    width: 100%;
    text-align: center;
}
	.structureImg{ top: -80px;}
	
	.structureTit {
    font-size: 5rem;
    font-weight: bold;
    position: absolute;
    right: 0;
    top: -40px;
    width: 100%;
    text-align: center;
}
	.structureIncont {
    background: #1F1F1F;
    padding: 110px 80px 90px 80px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    border-radius: 30px;
    margin-top: 11px;
    position: relative;
}
	
	.structureIncont {
    background: #1F1F1F;
    padding: 50px 30px 30px 30px;
    box-sizing: border-box;
    position: relative;
    z-index: 2;
    border-radius: 30px;
    margin-top: 11px;
    position: relative;
		width: calc( 100% + 40px); margin-left: -20px;
		border-radius: 0;
}
	.atdtxts{ padding-top: 40px;}
	
	.imgslist {
    display: block;
    column-gap: 20px;
}
	.imgslist li {
		width: 100%;
		margin-bottom: 70px;
	}
	.appTit {
    margin-bottom: 60px;
}
	.imgListin {
		padding: 0 10px;
    padding-top: 40px;
}
	.botmline{ padding-bottom: 60px;}
	.namber {
    font-size: 4.0rem;
    font-style: italic;
		top: -20px;
		margin-bottom: 20px;
}
	
	.seconsection {
    padding-top: 60px;
}
	.sectoptxt {
    letter-spacing: 0.3em;
    font-size: 1.4rem;
    text-align: center;
}
.settopite {
    color: #313131;
    font-size: 3rem;
    font-weight: bold;
    white-space: nowrap;
    line-height: 1;
	width: 100%; text-align: center
}
	.seccontentsWrapp{ position: relative; right: auto; top: auto; width: 100%;}
	
	.seconsection .inner{ padding: 0}
	.secmainImg {
    border-radius: 0;
}
	
	.seccontentsWrapp {
        position: relative;
        right: auto;
        top: auto;
        width: calc(100% - 20px);
        margin: 0 auto;
    }
	.seconsection .imgListin{ padding: 0 30px;}
	.secmainImg {

    overflow: hidden;
    margin-top: -5px;
    overflow: hidden;
    
		margin-top: -5px;
		margin-bottom: 0
}
	
	    .seccontentsWrapp {
        position: relative;
        right: auto;
        top: auto;
        width: calc(100% - 20px);
        margin: 0 auto;
        margin-top: -30px;
        margin-bottom: 40px;
    }
	
	.seconsection .gsLine.rights{ margin-right: 10px;}
	.seconsection .imgListin{ padding-top: 74px;}
	
	.seconsection .imgslist .imgTit {
    position: absolute;
    left: 20px;
    top: -20px;
    line-height: 1;
}
	
	.imgsslides li.slick-slide {
    padding-top: 40px;
    transform: translateX(0) !important;
    margin-left: 0;
}
	.imgsslides li.slick-slide{ padding-top: 25px;}
	    .seconsection .imgslist .imgTit {
        position: absolute;
        left: 20px;
        top: 0;
        line-height: 1;
    }
	.imgslist .slick-dots li{ margin-bottom: 0;}
	.imgsslides .slick-dots{ width: calc(100% - 100px); bottom: -16px;}
	.imgsslides .slick-prev {
    left: auto;
    right: 0;
}
	.imgsslides .slick-prev, .imgsslides .slick-next {
    bottom: -19px;
 
}
	.aftIn {
    display: block;
}
	.aftIn{ text-align: center;}
	.afetrcon .logo{ margin: 0 auto; width: 188px; margin-bottom: 45px;}
	a.raybtn{ margin: 0 auto;}
	.aftIn {
    justify-content: center;
    padding: 63px 0 30px 0;
	}
}



.imgsslides .slick-next {
    left: 200px;
}

.slick-prev {
    transform: scale(-1, 1);
}

.slick-next {
    transform: scale(1, 1);
}


.imgsslides .slick-prev {
    right: auto;
    width: 35px;
    left: 0;
}

@media screen and (min-width:981px) {.imgslist.sp{ display: none;}}
@media screen and (max-width:980px) {
.imgsslides .slick-next {
    left: auto;
    right: 0;
}
	
	.spscrollaera{ width: 100%; margin-top: 20px; overflow-x: scroll;}
	.spscrollaera img{ width: 687px; height: auto; max-width: inherit;}
	.imgslist.pc{ display: none;}
}