@charset "UTF-8";

/* section01 */
#section01 .slide img{display: block; margin: 0 auto;}

/* section02 */
#section02{padding: 100px 0;}
#section02 .topBox{margin-bottom: 76px; display: flex; gap: 0 62px;}
#section02 .topBox .leftBox{width: 580px;}
#section02 .topBox .leftBox h2{position: relative; margin-bottom: 26px; color: #333; font-weight: 700; font-size: 38px;}
#section02 .topBox .leftBox h2::after{content: 'DEREAM CAR WASH'; position: absolute; left:48px; bottom: -23px; font-size: 50px; font-weight: 700; color: #F2F1F1; z-index: -1;}
#section02 .topBox .leftBox p{font-size: 18px; color: #333; line-height: 1.8;}
#section02 .topBox .rightBox{padding: 40px; position: relative; width: 558px; height: 214px; background: url(../images/main/bg01.jpg)no-repeat center; border-radius: 20px; z-index: 1;}
#section02 .topBox .rightBox::after{content: ''; position: absolute; top:0; left:0; right:0; bottom: 0; background: url(../images/main/bg02.png)no-repeat center; z-index: -1;}
#section02 .topBox .rightBox p{margin-bottom: 40px; font-size: 28px; font-weight: 700; color: #fff; line-height: 1.2;} 
#section02 .topBox .rightBox span{display: flex; gap: 0 8px; color: #fff; text-decoration: underline;}
#section02 .topBox .rightBox span::after{content: ''; margin-top: 2px; width: 9px; height: 15px; background: url(../images/main/arrow_icon01.svg)no-repeat center;}
#section02 .linkList{display: flex; gap: 0 20px;}
#section02 .linkList li a{position: relative; padding: 30px; display: block; width: 285px; height: 290px; border-radius: 20px; background-color: #039EFF;}
#section02 .linkList li a::after{content: ''; width: 35px; height: 35px; position: absolute; right:30px; bottom: 30px; background: url(../images/main/arrow_icon02.svg)no-repeat center;}
#section02 .linkList li a::before{content: ''; position: absolute; left:30px; bottom: 30px;}
#section02 .linkList li:nth-child(1) a::before{width: 100px; height: 100px; background: url(../images/main/link01.svg)no-repeat center;}
#section02 .linkList li:nth-child(2) a::before{width: 87px; height: 100px; background: url(../images/main/link02.svg)no-repeat center;}
#section02 .linkList li:nth-child(3) a::before{width: 100px; height: 100px; background: url(../images/main/link03.svg)no-repeat center;}
#section02 .linkList li:nth-child(4) a::before{width: 109px; height: 100px; background: url(../images/main/link04.svg)no-repeat center;}
#section02 .linkList li a h3{margin-bottom: 10px; color: #fff; font-size: 26px; font-weight: 700;}
#section02 .linkList li a p{color: #fff; line-height: 1.3;}

/* section03 */
#section03{position: relative; padding: 80px 0; background-color: #F5F5F5; z-index: 1;}
#section03::after{content: ''; width: 416px; height: 350px; position: absolute; top:0; right:0; background: url(../images/main/bg03.svg) no-repeat center / contain; z-index: -1;}
#section03 .list{display: flex; gap: 20px;}
#section03 .list li{flex: 1;}
#section03 .list li a{position: relative; display: block; width: 100%; height: 300px;  border-radius: 20px; overflow: hidden;}
#section03 .list li a::before{content: ''; position: absolute; top:0; left:0; right: 0; bottom: 0; background-color: rgba(0,0,0,.9); z-index: -1;}
#section03 .list li:nth-child(3) a::before{display: none;}
#section03 .list li a h3{margin-bottom: 10px; color: #fff; font-size: 26px;}
#section03 .list li a p{color: #fff;}
#section03 .list li:nth-child(1) a{padding: 195px 0 0 20px; background: url(../images/main/list_img01.png) no-repeat center / cover;}
#section03 .list li:nth-child(2) a{padding: 195px 0 0 20px; background: url(../images/main/list_img02.png) no-repeat center / cover;}
#section03 .list li:nth-child(1) a::after,
#section03 .list li:nth-child(2) a::after{content: ''; position: absolute; right: 20px; top: 20px; width: 35px; height: 35px; background: url(../images/main/arrow_icon02.svg) no-repeat center;}
#section03 .list li:nth-child(3) a{padding: 35px 0 0; background-color: #0353FF;
  text-align: center;}
#section03 .list li:nth-child(3) a::after{content: '';width: 185px; height: 100px; position: absolute; left: 50%; transform: translateX(-50%); bottom: 0; background: url(../images/main/illustration01.svg) no-repeat center / contain;}
#section03 .list li:nth-child(3) a span{padding-left: 16px; display: flex; align-items: center; gap: 0 10px;margin: 0 auto; width: 108px; height: 30px; line-height: 30px; text-align: center;
  font-size: 14px; color: #fff; background-color: #0099FF; border-radius: 50px;}
#section03 .list li:nth-child(3) a span::after{content: ''; margin-top: 2px; width: 15px; height: 15px; background: url(../images/main/arrow_icon03.svg) no-repeat center;}
#section03 .list li:nth-child(3) a p{margin-bottom: 15px;}

/* section04 */
#section04{position: relative; padding: 80px 0 120px; background: url(../images/main/bg04.jpg)no-repeat center / cover; z-index: 1;}
#section04::after{content: ''; position: absolute; top:0; left:0; right:0; bottom: 0; background-color: rgba(0,0,0,.5); z-index: -1;}
#section04 .titleBox h2{color: #fff;}
#section04 .layoutBox{display: flex; gap: 0 50px;}
#section04 .leftBox{width: 50%;}
#section04 .leftBox span{display: block; margin-bottom: 10px; font-size: 22px; color: #fff;}
#section04 .leftBox em{display: block; margin-bottom: 10px; font-size: 40px; color: #fff; font-weight: 700;}
#section04 .leftBox p{margin-bottom: 20px; font-size: 22px; color: #fff;}
#section04 .leftBox .infoLink{display: block; width: 200px; height: 32px; line-height: 32px; font-size: 18px; color: #fff;  border-radius: 50px; background-color: #0353FF; text-align: center; font-weight: 600;} 
#section04 .rightBox{width: 50%;}
#section04 .rightBox h3{color: #fff; font-size: 25px; margin-bottom: 20px;}
#section04 .rightBox .inputBox{margin-bottom: 10px;}
#section04 .rightBox .inputBox:last-child{margin-bottom: 0;}
#section04 .rightBox .inputBox input{padding-left: 10px; height: 36px; width: 100%; border-radius: 5px; border: 1px solid #f0f0f0; background: 0; font-size: 14px; color: #fff;}
#section04 .rightBox .inputBox input::placeholder{color: #fff;}
#section04 .rightBox .btn{display: block; width: 100%; height: 32px; line-height: 32px; font-size: 18px; color: #fff; background-color: #0353FF; text-align: center; font-weight: 600;}