@import url("common.css");

.fs50.center{padding: 0 0 35px;}
.moBr{display:none;}

/* -- visual -- */
#visual{width:100%; overflow: hidden; position:relative;}
.visual_01 {width:100%; background-color: var(--graybg); text-align: center;}
.visual_01 .textZone{position:relative; z-index:2; padding:180px 0 246px; }
.visual_01 .textZone::before{content:""; display:block; width:716px; height:265px; position:absolute; bottom:0; right:50%; background:url('/home/img/visual_home.png') no-repeat center/auto 100%; z-index:1;}
.visual_01 .textZone::after{content:""; display:block; width:1284px; height:257px;position:absolute; z-index:0; bottom:0; left:50%; background:url('/home/img/visual_bg.png') no-repeat center/auto 100%; margin-left:-435px}
.visual_01 .textZone h2 {margin-top:10px;}
.visual_01 .textZone span {display: block; font-weight: 300; line-height: 135%; margin-top:25px; color:var(--black);}
.visual_01 .textZone span .point1{font-weight:700;}
.visual_01 .textZone .point1 { font-weight: inherit;}

.visual_01 .visual_img{position:absolute; left:50%; margin-left:-68px; z-index:10; bottom:0}



.visual_02 {width:100%; background-color: var(--main); color:#fff; padding:80px 0; box-sizing: border-box;  position: relative; z-index:5;}
.visual_02_in {max-width:1170px; width:94%; margin:0 auto;}
.visual_02 dl {display: flex; gap:5px; flex-wrap: wrap;}
.visual_02 dd {min-width:80px; height: 42px; background-color: rgba(255,255,255,0.1); border-radius: 80px; text-align: center; line-height: 42px; font-weight: 400; letter-spacing: -0.54px; padding:0 15px; }  
.visual_02 .main_info {margin-top:30px; display: flex; flex-direction: column; gap:12px;}
.visual_02 .main_info p {display: flex; gap:30px; align-items:center;  font-weight: 700; color:var(--white);}
.visual_02 .main_info p span {width:150px; display: flex; align-items: center; gap:10px; font-size: 1rem; font-weight: 400; line-height:  155.556%; letter-spacing: -0.54px;}
.visual_02 .main_info p span::before {width:28px; height:28px; background-position:center; background-size:100% auto; background-repeat:no-repeat;}
.visual_02 .main_info p:nth-child(1) span::before{content: ""; background-image: url("/home/img/main_txticon_1.svg"); }
.visual_02 .main_info p:nth-child(2) span::before{content: ""; background-image: url("/home/img/main_txticon_2.svg"); }
.visual_02 .main_info p:nth-child(3) span::before{content: ""; background-image: url("/home/img/main_txticon_3.svg"); }





/* -- contents -- */
/* inquiry */
#inquiry {width:100%; }
#inquiry .inquiry_in {padding:140px 0 0;  }
#request .inquiry_in .form_cont{background:none;}
#inquiry .inquiry_in h3 {text-align: center;}
#inquiry .inquiry_in .formBox{border-radius:var(--borderR3); border:1px solid var(--border); position:relative;}
#inquiry .inquiry_in .formBtn{width:calc(100% + 2px); position:relative; left:-1px;}
#inquiry .inquiry_in .formBtn .btn_confirm {border-radius:var(--borderR3);}



/* core */
#core{}
#core h3 {text-align: center;}
#core .br_m {display:none;}
#core .core_check{display: flex;}
#core .core_check dt{width: 50%; box-sizing:border-box; text-align:center; display: flex; align-items: flex-end;}
#core .core_check dt .img_area{max-width:100% !important; height: auto !important;}
#core .core_check dd{width: 50%; box-sizing:border-box; padding:0 0 0 40px; display: flex; align-items: center;}

#core .core_check .star_01 {animation: blink 1.5s infinite;}
#core .core_check .star_02 {animation: blink 2.5s infinite;}
#core .core_check .star_03 {animation: blink 1s infinite;}
@keyframes blink {
  0% {opacity: 1;}
  50% {opacity: 0.3;}
  100% {opacity: 1;}
}
#core .core_check .img_area{position: relative;}
#core .core_check .img_area img{max-width:100%; height:auto;}
#core .core_check .img_area img:nth-child(1){position:relative;}
#core .core_check .img_area img:nth-child(2),
#core .core_check .img_area img:nth-child(3),
#core .core_check .img_area img:nth-child(4){position:absolute; left:0; top:0;}


#core .check_list{padding:20px 0;} 
#core .check_list li{color:var(--basic); letter-spacing: -0.72px; font-weight: 400; line-height: 160%; padding:0 0 10px 36px; box-sizing:border-box; position: relative;}
#core .check_list li:last-child{padding-bottom:0;}
#core .check_list li b{font-weight:700; letter-spacing: inherit; line-height:inherit; color:var(--black);}
#core .check_list li:before{content:''; display: block; width:28px; height:28px; position: absolute; left:0; top:5px; background:url('/home/img/check_icon.svg') no-repeat center/100% auto;}

#core .core_list{padding:30px 65px; box-sizing:border-box; background:var(--graybg);  border-radius:var(--borderR3);}
#core .core_list dl {padding:30px 0; display:flex;  align-items: center; border-bottom:1px solid var(--border);}
#core .core_list dl:last-child {border-bottom:0;}
#core .core_list dl dt {width: 160px;font-weight:600; color:var(--black); }
#core .core_list dl dd {width:calc(100% - 160px);}


/* request */
#request {width:100%;}
#request .request_in {}
#request .request_in .form_cont{background:none;}
#request .request_in h3 {text-align: center;}
#request .request_in p {text-align: center; color: var(--sub); font-weight: 400; line-height: 150% ; letter-spacing: -0.6px; margin:-20px 0 35px;}
#request .request_in .formBox{border-radius:var(--borderR3); border:1px solid var(--border); position:relative;}
#request .request_in .formBtn{width:calc(100% + 2px); position:relative; left:-1px;}
#request .request_in .formBtn .btn_confirm {border-radius:var(--borderR3);}




/* faq*/
#faq {width:100%; overflow:hidden;}
#faq .banner {max-width:100%; background: url('/home/img/faq_banner_bg.jpg') no-repeat center top / cover; }
#faq .banner_in{color:var(--white); z-index:10;  position: relative; padding-bottom:calc(100px + 170px)}
#faq .banner_in .img{position:absolute; left:50%; bottom:170px;}
#faq .banner h3 {color:var(--white);}
#faq .banner p {color:var(--white); font-weight:300; margin-top:15px; opacity: 0.9;}



/* faqBox */
#faq .faq_main {background-color: var(--graybg); position:relative;}
#faq .faq_main .basic_in{position:relative; top:-170px;}
#faq .faq_main .basic_in > div{background-color: var(--white); padding:60px 65px; box-sizing: border-box;  z-index:10; border-radius:var(--borderR3);  position:relative; box-shadow:0px -10px 30px 0px rgba(0, 0, 0, 0.04)}

#faq .faq_main .faq_in {}
#faq .faq_main .faq_in h4 {text-align: center;}
#faq .faq_main .faq_in .faqBox {margin-top:25px;}


#faq .faq_call {text-align: center; margin:50px 0 0; }
#faq .faq_call .call {margin:25px 0 12px;}
#faq .faq_call .call a{position: relative; font-family:var(--eng); font-size: 2.7rem; font-weight: 800; line-height:  100% ; color:var(--main);}
#faq .faq_call .call a::after {width: 62px; height: 62px; line-height: 62px;; border-radius: 50%; display: block; font-size:30px; font-family:var(--icon); font-variation-settings:'FILL' 1,'wght' 800 ; content: '\e0b0'; background-color: var(--main); color:var(--white); position: absolute; right:-80px; top:0;}
#faq .faq_call p {color:var(--basicFont); }

/* banner */
#banner_car { background-color: var(--white); overflow:hidden;}
#banner_car .basic_in {padding:130px 0; position:relative; z-index:2;}
#banner_car .carTxt{}
#banner_car .carTxt h3 { margin-top:8px;}
#banner_car .carTxt a {display:block; width:100%; max-width:380px; border-radius:var(--borderR3); background-color: var(--main); color:var(--white);  text-align: center; padding:25px 0; margin-top:27px; box-sizing:border-box; border:1px solid var(--main); transition:all 0.2s linear;}
#banner_car .carTxt a:hover{background:var(--white); color:var(--main); transition:all 0.2s linear;}

#banner_car .img_area{ position: absolute; left:50%; bottom:0; margin-left:-85px; z-index:-1; width:670px;}
#banner_car .img_area img{width:100%; }
#banner_car .img_area img:nth-child(1){position:relative;}
#banner_car .img_area img:nth-child(2),
#banner_car .img_area img:nth-child(3),
#banner_car .img_area img:nth-child(4),
#banner_car .img_area img:nth-child(5){position:absolute; left:0; top:0;}
#banner_car .img_area .family{position:absolute; left:0; top:0;}

#banner_car .star_1 {animation: blink 1.5s infinite;}
#banner_car .star_2 {animation: blink 2.5s infinite;}
#banner_car .star_3 {animation: blink 2s infinite;}
#banner_car .star_4 {animation: blink 1.5s infinite;}
#banner_car .star_5 {animation: blink 1s infinite;} 


/*******************************************************************************
    @media 1500px
*******************************************************************************/
@media all and (max-width:1500px){




}

/*******************************************************************************
    @media ~1300px
*******************************************************************************/
@media all and (max-width:1300px){
.moBr{display:block;}

/* -- visual -- */
#visual{}
.visual_01 .visual_img{margin-left:-48px; bottom:0}


#faq .banner_in .img{width:460px}

#banner_car .img_area{margin-left:-125px; width:600px;}
}


/*******************************************************************************
    @media  ~980px               
*******************************************************************************/
@media all and (max-width:980px){


.fs50.center{padding: 0 0 25px;}


/* -- visual -- */
#visual{}
.visual_01 {position:relative;}

.visual_01 .textZone{padding:160px 0 0; }
.visual_01 .textZone::before,
.visual_01 .textZone::after{display:none;}

.visual_01::before{content:""; display:block; position:absolute; z-index:1; bottom:0; background:url('/home/img/visual_home.png') no-repeat center/auto 100%; margin-left:-435px; width:680px; height:252px; right:50%; margin-right:-100px; }
.visual_01::after{content:""; display:block; width:1284px; height:257px;position:absolute; z-index:0; bottom:0; left:-5%; background:url('/home/img/visual_bg.png') no-repeat center/auto 100%; }

.visual_01 .visual_img{position:relative; left:auto; margin:25px auto 0; z-index:10; bottom:0; left:80px; }
.visual_01 .visual_img img{width:60%; max-width:400px;}



.visual_02 {padding:50px 0;}
.visual_02_in {transform:translateX(0);}
.visual_02 dl {justify-content:center;}
.visual_02 dd {padding: 0 10px;}
.visual_02 .main_info {margin:20px auto 0; max-width:340px;}
.visual_02 .main_info p{gap:0;}
.visual_02 .main_info p span {width:150px;}
.visual_02 .main_info p span::before{width:22px; height:22px}



/* -- contents --
/* inquiry */
#inquiry .inquiry_in {padding:100px 0 0;}
 

/* core */ 
#core{padding:110px 0 0;}
#core .core_check{flex-wrap:wrap;}
#core .core_check dt{width: 100%; padding:0;}
#core .core_check dt .img_area{max-width:70% !important; margin:0 auto; }
#core .core_check .img_area img{max-width:100%; height:auto; margin:0 auto; }
#core .core_check dd{width: 100%; padding:25px 0 35px; justify-content: center;}
#core .check_list{display:inline-block; padding:0;}
#core .check_list li{padding:0 0 8px 32px;text-align:left; }
#core .check_list li:before{top:3px;}
#core .core_list{padding:10px 40px;}
#core .core_list dl{padding:20px 0;}
#core .core_list dl dt{width: 140px;}
#core .core_list dl dd{width:calc(100% - 140px);}



/* faq*/
#faq{}
#faq .banner_in{padding-bottom:0;}
#faq .banner_in p br{display:none;}
#faq .banner_in .img{position:relative; bottom:0; left:20%; margin:10px 0 0; max-width:420px; width:80%; }
#faq .faq_main {padding:0 0 30px; margin:-30px 0 0}
#faq .faq_main .basic_in{top:0; width:100%;}
#faq .faq_main .basic_in > div{padding:40px;}
#faq .faq_call{margin:30px 0 0;}
#faq .faq_call .call{margin:16px 0 10px;}
#faq .faq_call .call a::after{width:54px; height:54px; line-height:54px; font-size:28px; right:-65px;}



/* banner */
#banner_car {}
#banner_car .basic_in {padding:40px 0; text-align:center; }
#banner_car .carTxt{}
#banner_car .carTxt h3 { margin-top:7px;}
#banner_car .carTxt a {max-width:100%; padding:20px 0; margin-top:0; }  
#banner_car .img_area{ position:relative; left:20%; bottom:0; margin-left:0; z-index:-1; width:60%; margin:15px 0 0}


}


/*******************************************************************************
    @media 481~680px
*******************************************************************************/
@media all and (max-width:680px){



/* -- visual -- */
#visual{}
.visual_01 {position:relative;}
.visual_01 .textZone {padding:140px 0 0}
.visual_01 .textZone span{margin-top:15px;}
.visual_01::before{width:384px; height:142px; right:50%; margin-right:-50px; }
.visual_01::after{width:613px; height:135px;left:50%; transform:translateX(-50%); bottom:50px}
.visual_01 .visual_img{ margin:15px auto 0; left:40px; }
.visual_01 .visual_img img{width:70%; max-width:400px;}

.visual_02 {padding:30px 0;}
.visual_02_in {transform:translateX(0);}
.visual_02 dl {justify-content:center; gap:2px}
.visual_02 dd {padding:0; height:38px; line-height:38px;}
.visual_02 .main_info {margin:20px auto 0; max-width:280px;}
.visual_02 .main_info p{gap:0;}
.visual_02 .main_info p span {width:130px; gap:5px;}
.visual_02 .main_info p span::before{width:18px; height:18px}



/* inquiry */
#inquiry .inquiry_in {}



/* core */
#core{}
#core .br_m{display: block;}
#core .core_check dd{padding:15px 0 25px;}
#core .check_list{max-width:450px;}
#core .check_list li{padding:0 0 6px 30px;}
#core .check_list li:before{width:24px; height:24px; top:3px;}
#core .core_list{padding:15px 20px;}

#core .core_list dl{padding:15px 0; flex-wrap:wrap;}
#core .core_list dl dt{width: 100%; padding:0 0 2px;}
#core .core_list dl dd{width:100%;}


/* faq*/
#faq .banner_in {}
#faq .banner .fs24{margin-bottom:20px;;}
/* #faq .banner img {max-width:70%;  left:25%;; bottom:0; } */

#faq .faq_main_in{}
#faq .faq_main {padding: 0 0 20px;}
#faq .faq_main .basic_in > div{padding:40px 20px;}
#faq .faq_main .faq_in {top:0;}
#faq .faq_main .faq_in{padding:50px 30px;}
#faq .faqBox dt p::before {width:28px; height:28px ;line-height: 28px; }

#faq .faq_call{margin:20px 0 0;}
#faq .faq_call .call { margin-top:10px;}
#faq .faq_call .call a{ position: relative; font-size:2.2rem; }
#faq .faq_call .call a::after {width: 40px; height: 40px; line-height: 40px; font-size:20px; right:-50px; top:1px; font-weight:400}
#faq .faq_call p { font-weight: 400; }



#banner_car .basic_in{padding:40px 0}



}
/*******************************************************************************
    @media ~480px               
*******************************************************************************/
@media all and (max-width:480px){


#banner_car .img_area{width:80%; left:10%}


}
/*******************************************************************************
    @media ~360px
*******************************************************************************/
@media all and (max-width:360px){

/* -- visual -- */
.visual_02 dd {min-width:72px}


}