@charset "utf-8";

/* Common */
.pc {}
.mobile {display:none;}

/* Visual */
.visual {background:url(/_jj/img/main/visual.png) center bottom no-repeat; height:100vh; position:relative; z-index:-1}
.visual .layout_fix_lg {position:relative; }
.visual i {display: block; padding-top: 6rem; text-align: center;}
.visual em {position:absolute; right:1.5rem; top:1.5rem;}

/* Section 02 */
.sec02 {padding:2rem 0 7rem 0; background:url(/_by/img/main/sec02_bg.png) left bottom no-repeat; text-align: center;}
.sec02 h3 {margin-bottom: 3rem;}
.sec02 ul {display:flex; gap:4rem; justify-content: center;}
.sec02 ul li {text-align: center;}
.sec02 ul li i {}
.sec02 ul li b {display:block; margin-top:1rem;}

/* Section 03 */
.sec03 {}
.sec03 > div {position:relative; display: flex; background: url(/_by/img/main/sec03_bg.png) left bottom no-repeat; align-items: center; height: 24rem; border-radius: 0 12rem 12rem 0; width: 80%; padding: 4rem; justify-content: space-around;}
.sec03 > div:before {content: ''; width: 82rem; height: 24rem; border-radius: 0 12rem 12rem 0; border: 2px solid #9e9ca3; position: absolute; right: -2rem; bottom: -2rem; z-index: -1; border-left: 0;}
.sec03 > div i {}
.sec03 > div b {}

/* Section 04 */
.sec04 {background-color:#EDE8EC; padding:17rem 0 2rem 0; position: relative; z-index: -2; margin-top:-12rem; overflow:hidden}
.sec04 ul {}
.sec04 ul li {display: flex ; gap: 5rem; align-items:center; margin-bottom:2rem;}
.sec04 ul li:nth-child(2n) {flex-direction: row-reverse;}
.sec04 ul li:nth-child(2n) > div {text-align:right;}
.sec04 ul li:last-child {margin-bottom:0;}
.sec04 ul li i {display: inline-block; padding: 1rem; box-sizing: border-box; border: 1px solid #6f2c91; position:relative;}
.sec04 ul li i:after {color: #fff; position: absolute; right: -2.5rem; top: 22%; background-color: #6D2D90; z-index: 2; display: inline-block; padding: 0.4rem 0.8rem 0.5rem 0.8rem; font-size: 1.5rem; line-height: 1.4rem;}
.sec04 ul li:first-child i:after {content:'VISION';}
.sec04 ul li:nth-child(2n) i {border-color:#61616a}
.sec04 ul li:nth-child(2n) i:after {content:'TRAFFIC'; right:auto; left:-2.5rem; background-color:#61616A}
.sec04 ul li:last-child i:after {content:'LIFE';}
.sec04 ul li > div {}
.sec04 ul li > div b {display: block; margin-bottom: 3rem;}
.sec04 ul li > div p {}

/* Quick Menu */
.quick {position: fixed; right: 2rem; top: 50%; transform: translateY(-60%);}
.quick ul {}
.quick ul li {}
.quick ul li:first-child {margin-bottom:4rem; animation: 2s linear infinite alternate updown;}
.quick ul li a {display:block; }
.quick ul li a img {}
@keyframes updown {
	from {
		transform: translateY(-0.1rem);
	}
	
	to {
		transform: translateY(0.5rem);
	}
} 


/* Media Query */
@media all and (max-width:1842px) {
	.visual p {display:none; }
}

@media all and (max-width:991px) {
	.visual {background: url(/_jj/img/main/vis_bg_m.png) center bottom no-repeat; background-size: 100%;}
	.visual i img {width:60%;}
	.layout_fix_sm {padding:0 7rem}
	.sec02 {background:none; padding:4rem 0 4rem 0}
}

@media all and (max-width:768px) {
	.sec03 > div {border-radius: 0; text-align:center; width:100%; flex-wrap:wrap; height: auto; background-size: cover;}
	.sec03 > div > * {width:70%}
	.sec03 > div:before {display:none; }
	.sec03 > div b {display:block; margin-top:3rem;}
	.sec04 ul li {flex-wrap:wrap; gap:3rem}
	.sec04 ul li > div {padding:0 2rem;}
	.sec04 ul li > div p {width:70%; display:inline-block;}
	.sec04 ul li > div b {width:50%; display:inline-block; }
	.sec04 ul li i:after {right:0;}
	.sec04 ul li:nth-child(2n) i:after {left:0;}
	.layout_fix_sm {padding:0 3rem}
	.pc {display:none;}
	.mobile {display:block;}
	.sec02 h3 {width: 80%; margin: 0 auto; margin-bottom: 3rem;}
	.visual {height: 70vh;}
	#container {background: linear-gradient(142deg, rgba(132, 165, 205, 1) 0%, rgba(136, 170, 209, 1) 34%, rgba(151, 183, 216, 1) 100%);}
	.visual {z-index:0}
	.quick {position: absolute; right: 1rem; top: 1rem; transform: none; left: 	auto; bottom: auto; transform: none; width: 18%;}
	.quick .open {background-color:#e72e8c; width:25%; margin:0; text-align:center; display:flex; align-items:center; justify-content:center}
	.quick > ul {display:flex}
	.quick > ul > li {flex:1 1}
	.quick > ul > li:nth-child(2),.quick > ul > li:nth-child(3) {display:none; }
	.quick ul li:first-child {margin-bottom:0;}
}

@media all and (max-width:640px) {
	.visual i {padding-top:7rem;}
	.visual i img {width:70%}
	.sec04 ul li > div p {width:80%;}
	.sec04 ul li > div b {width:60%;}
	.visual em img {width:80%;}
	.quick {width:21%;}
}

@media all and (max-width:460px) {
	.sec02 ul {gap:2rem}
	.layout_fix_sm {padding:0 2rem}
	.sec03 > div > * {width:90%}
	.sec04 {padding:15rem 0 2rem 0;}
	.visual em {top:0; right:0;}
	.visual {height: 60vh;}
}

@media all and (max-width:380px) {
	.visual em img {width:90%;}
}

@media all and (max-width:360px) {
	.sec04 ul li {gap:2rem}
	.sec04 ul li > div p, .sec04 ul li > div b {width:80%;}
}

.quick ul li a img:hover{
    transform: scale(1.2, 1.2); transition-duration: 0.5s;
}
 
@keyframes rotate_image{
	100% {
    	transform: rotate(180deg);
    }
}