@charset "utf-8";
@import url('layout.css');

#header h1 span {color: #fff;}
#header nav a {color:#fff;}

#container.main {width:100%;}

/* common */
h2 {font-size: 48px; color: #003087; font-weight: 500; margin-bottom: 50px;}
h2 span {color: #00ad1d; font-weight: 600;}

/* main_visual */
.main_visual {height: auto; background: linear-gradient(to bottom, #2542b0 15%, #33c2d4);}
.main_visual .container {max-width: 1640px;}
.main_visual .imgs {position: relative; max-width: 1640px;}
.main_visual .imgs img {position: absolute; transition: all 0.3s ease-out; opacity: 0;}
.main_visual .imgs .img1 {position: relative; opacity: 1; width: 100%;}
.main_visual .imgs .img2 {width:18.4%; top: 26%; left:50%; margin-left: -40%; transform: scale(0); transition-delay: 0.4s;}
.main_visual .imgs .img3 {width: 18.75%; top: 49%; left:50%; margin-left: -35%; transform: scale(0); transition-delay: 0.7s;}
.main_visual .imgs .img4 {width: 24.25%; top: 37.25%; left:50%; margin-left: -35%; transform: scale(0); transition-delay: 1.0s;}
.main_visual .cont {width:50%; margin-left: auto; padding-top: 215px; text-align: right; word-break: keep-all;}
.main_visual .slogan {text-align: right; color: #fff; margin-bottom: 60px;}
.main_visual .slogan .txt1 {font-weight: 600; font-size: 36px;}
.main_visual .slogan .txt2 {font-weight: 600; font-size: 72px; color: #00ffae; margin: 10px 0 25px;}
.main_visual .slogan .txt3 {font-size: 24px; line-height: 1.5;}
.main_visual .cont .cont_img {filter: drop-shadow(0 0 38px rgba(0,0,0,0.2)); width: 100%; max-width: 650px;}
.start .main_visual .imgs img {opacity: 1;}
.start .main_visual .imgs .img2 {top: 16%; margin-left: -30.5%; transform: scale(1);}
.start .main_visual .imgs .img3 {top: 39%; margin-left: -45.25%; transform: scale(1);}
.start .main_visual .imgs .img4 {top: 36.25%; margin-left: -25%; transform: scale(1);}


/* product_list */
.product_wrap {margin-top: 90px;}
.product_list {display: flex; gap: 15px;}
.product_list li {flex: 1;}
.product_list li a {display: block;}
.product_list li img {width: 100%;}

/* guide_wrap */
.guide_wrap {position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 50px 0 70px; margin-top: 90px;}
.guide_wrap::before {content:''; position: absolute; top:0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background: #f4f9fe; z-index: -1;}
.guide_wrap h2 {margin-top: 20px;}
.guide_wrap .img img {width: 1093px;}

/* franchise_wrap */
.franchise_wrap {display: flex; flex-wrap: wrap; justify-content: space-between; gap:50px; margin-top: 135px;}
.franchise_wrap h2 {font-size: 60px; font-weight: 600; margin-bottom: 20px;}
.franchise_wrap h2 span {display:block; font-size: 30px;}
.franchise_wrap .cont .txt {margin-bottom: 64px; font-size: 24px; color: #1b1b1b; font-weight: 500;}
.franchise_wrap .img {flex: 1; text-align: right; height: 373px;}
.franchise_wrap .img img {width:100%; max-width: 793px; height: 100%; object-fit: cover;}

/* faq_wrap */
.faq_wrap {margin-top: 100px;}
.faq_wrap .tit_wrap {display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; margin-bottom: 45px;}
.faq_wrap h2 {margin-bottom: 0;}
.faq_list {position: relative;}
.faq_list li {position: relative;}
.faq_list::before,
.faq_list li::before {content:''; position: absolute; left: 50%; transform: translateX(-50%); width: 100vw; height: 1px; background: #ddd;}
.faq_list::before {top:0;}
.faq_list li::before {bottom: 0;}
.faq_list li a {display: flex; align-items: center; gap:30px; height: 80px;}
.faq_list li span {display: inline-flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 50%; background: #003087; color:#fff; font-size: 30px; font-weight: 800;}
.faq_list li p {flex:1; font-size: 24px; color:#171717; font-weight: 500;}

@media (max-width: 1410px) {
    /* guide_wrap */
    .guide_wrap .img {width: 100%;}
    .guide_wrap .img img {width: 100%;}
}

@media (max-width: 768px) {
    /* common */
    h2 {font-size: 28px; margin-bottom: 20px;}  
    
    /* product_list */
    .product_wrap {margin-top: 40px;}
    .product_list {flex-wrap: wrap;}
    .product_list li {flex: none; width: calc(50% - (15px / 2));}
    .product_list li a {display: block;}
    .product_list li img {width: 100%;}

    /* guide_wrap */
    .guide_wrap {padding: 25px 0 30px; margin-top: 40px;}
    .guide_wrap h2 {margin-top: 0;}

    /* franchise_wrap */
    .franchise_wrap {gap:20px; margin-top: 40px;}
    .franchise_wrap h2 {font-size: 30px; margin-bottom: 15px;}
    .franchise_wrap h2 span {font-size: 20px;}
    .franchise_wrap .cont .txt {margin-bottom: 20px; font-size: 18px;}
    .franchise_wrap .img {flex: none; width: 100%;  height: auto;}
    .franchise_wrap a {display: block; height: 37px;}
    .franchise_wrap a img {height: 100%;}

    /* faq_wrap */
    .faq_wrap {margin-top: 40px;}
    .faq_wrap .tit_wrap {gap:10px; margin-bottom: 20px;}
    .faq_wrap a {display: block; height: 37px;}
    .faq_wrap a img {height: 100%;}
    .faq_list li a {gap:15px; height: auto; padding:10px 0;}
    .faq_list li span {width: 30px; height: 30px; font-size: 20px;}
    .faq_list li p {font-size: 18px;}
}