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

#container {margin-top:120px;}

h2 {font-size: 80px; font-weight: 800; color:#111; margin-top: -15px;}
h3 {font-size: 48px; margin: 110px 0 50px; font-weight: 500; color:#003087;}
h3 span {color:#00ad1d; font-weight: 600;}
h4 {font-size: 30px; font-weight: 600; color: #343434; margin-bottom: 20px;}

.tit_wrap {display: flex; justify-content: space-between; flex-wrap: wrap;}
.tit_wrap .visual {position: relative; display: flex; flex-direction: column; gap:3px; align-items: end; justify-content: end; width: 100%; max-width: 720px; height: 190px; border-radius: 10px; background: linear-gradient(to bottom, #2442b0 15%, #34c2d3); padding: 33px 28px; color: #fff; overflow: hidden; z-index: 1;}
.tit_wrap .visual::before {content:''; position: absolute; top:0; left:0; width: 100%; height: 100%; background-repeat: no-repeat; background-size: contain; z-index: -1;}
.tit_wrap .visual.company::before {background-image: url('../images/sub/visual_01_.png');}
.tit_wrap .visual.guide::before {background-image: url('../images/sub/visual_02.png');}
.tit_wrap .visual.franchise::before {background-image: url('../images/sub/visual_03.png');}
.tit_wrap .visual.faq::before {background-image: url('../images/sub/visual_04.png');}
.tit_wrap .visual strong {font-size: 30px;} 
.tit_wrap .visual span {font-size: 16px; font-weight: 600; letter-spacing: 0;} 

/* company */
.company_intro {margin-top: 70px; padding: 0 125px; font-size: 20px; color: #343434; word-break: keep-all; line-height: 1.6;}
.company_map {width: 100%; height: 570px; overflow: hidden;}
.company_map img {object-fit: cover; width: 100%; height: 100%;}
.company_add {margin-top: 65px; border-bottom: 1px solid #454545;}
.company_add li {display: flex; align-items: center; flex-wrap: wrap; gap: 10px 45px; color: #343434; font-size: 24px; margin-bottom: 25px;}
.company_add li strong {width:105px; letter-spacing: 0; font-size: 24px; font-weight: 800;}

/* guide */
.product_list {display: flex; gap: 15px 17px; flex-wrap: wrap;}
.product_list li {width: calc(25% - (calc(17px * 4 / 3)));}
.product_list li a {display: block;}
.product_list li img {width: 100%;}
.guide_txt {font-size: 30px; color: #003087; font-weight: 500; line-height: 1.9; margin-top: 90px;}
.guide_tbl {margin-top: 95px;}
.guide_tbl table {border-top: 2px solid #454545; border-bottom: 2px solid #454545;}
.guide_tbl th, .guide_tbl td {height: 68px; border-bottom: 1px solid #a1a1a1; font-size: 24px; color: #232323;}
.guide_tbl tr:last-child th, .guide_tbl tr:last-child td {border-bottom: none;}
.guide_tbl th {width: 20%; background: #f5f5f5; font-weight: 500;}
.guide_tbl td {padding-left: 35px;}
.container .caution {font-size: 18px; font-weight: 500; color: #ed5f00; margin-top: 35px;}
.guide_info {position: relative; display: flex; flex-wrap: wrap; justify-content: space-between; padding: 50px 0 70px; margin-top: 65px;}
.guide_info::before {content:''; position: absolute; top:0; left: 50%; transform: translateX(-50%); width: 100vw; height: 100%; background: #f4f9fe; z-index: -1;}
.guide_info h3 {margin-top: 20px;}
.guide_info2 li {font-size: 24px; color:#232323; margin-bottom: 20px;}
.cont_wrap {display: flex; gap:50px; margin-top: 55px; padding-top: 60px; border-top: 1px solid #1d1d1d;}
.guide_info3 {width: calc(50% - 25px); display: flex; gap:30px 65px;}
.guide_info3 h3 {margin: 0; display: inline-flex; flex-direction: column; gap:30px; align-items: center; width: fit-content; min-width: 85px;}
.guide_info3 h3 img {width: fit-content;}
.guide_info3 ul {margin-top: 10px;}
.guide_info3 li {font-size: 36px; color: #232323; font-weight: 300;}
.guide_info3 li ~ li {margin-top:17px;}

/* franchise */
.franchise_info1 .txt1 {padding-left: 130px; font-size: 24px; color:#343434; line-height: 1.8;}
.franchise_info1 ul {margin-top: 80px; display: flex; gap: 25px; flex-wrap: wrap;}
.franchise_info1 li {width: calc(25% - (calc(25px * 3 / 4)));}
.franchise_info1 .process_circle {position: relative; height: 100%;}
.franchise_info1 .img {display: block;}
.franchise_info1 .img img {width: 100%;}
.franchise_info1 .tit {position: absolute; bottom: 13%; width: 100%; color: #2a2a2a; font-size: 30px; font-weight: 500; text-align: center;}
.franchise_info1 .txt2 {margin-top: 68px; font-size: 40px; font-weight: 500; text-align: center; line-height: 1.7; color: #003087;}
.franchise_info1 .txt2 span {color: #2fb828; display: block;}
.franchise_info2 {display: flex; flex-wrap: wrap; gap:50px 110px; margin-top: 140px; color: #343434;}
.franchise_info2 strong {font-size: 60px; font-weight: 500; width:28%; word-break: keep-all;}
.franchise_info2 p {flex: 1; font-size: 24px; line-height: 1.9; word-break: keep-all;}
.franchise_info3 {position: relative; display: flex; gap:20px 50px; padding:25px 0; margin-top: 100px;}
.franchise_info3::before {content:''; position: absolute; top:0; left:50%; transform: translateX(-50%); width: 100vw; height: 100%; background: #f4f9fe; z-index: -1;}
.franchise_info3 .img {width: 31.6%; height: 238px; border-radius: 15px; overflow: hidden;}
.franchise_info3 .img img {width: 100%; height:100%; object-fit: cover;}
.cs_wrap {display: flex; gap:22px; flex-wrap: wrap; flex:1;}
.cs_wrap .cs_box {display: flex; flex-direction: column; justify-content: space-between; width: calc(50% - 11px); background: #fff; height: 238px; border-radius: 15px; border: 1px solid #d8d8d8; padding: 30px 22px 9px;}
.cs_wrap .cs_box .inner {padding-left:19px; color: #343434;}
.cs_wrap .cs_box .cs_txt1 {font-size: 30px; line-height: 1.3;}
.cs_wrap .cs_box .cs_txt2 {font-size: 24px; line-height: 1.6;}
.cs_wrap .cs_box span {display: flex; align-items: center; justify-content: center; width: 100%; height: 40px; background: #003087; border-radius: 20px; text-align: center; font-size: 18px; color:#fff; line-height: 1.2; padding: 0 10px;}
.franchise_list {display: flex; flex-wrap: wrap; gap: 44px 30px;}
.franchise_list > li {position: relative; width: calc(25% - (calc(30px * 3 / 4)));}
.franchise_list > li::before {content:''; position: absolute; top:0; left:0; width: 100%; height: 100%; border-radius: 15px; background: #f8fafb; border: 1px solid #bbc7cd; z-index: -1;}
.franchise_list dl {padding: 18px 18px 38px;}
.franchise_list dt .area {display: inline-block; width: 85px; line-height: 30px; text-align: center; font-size: 18px; font-weight: 600; color: #fff; border-radius: 15px; background: #002067; margin-bottom: 15px;}
.franchise_list dt h4 {padding: 0 5px;}
.franchise_list dd ul {padding: 0 5px; margin-top: -10px;}
.franchise_list dd li {display: flex; flex-wrap: wrap; font-size: 18px; color: #232323; padding: 17px 0;}
.franchise_list dd li:first-child {min-height: 91px;}
.franchise_list dd li ~ li {border-top: 1px solid #c2c2c2;}
.franchise_list dd li strong {width: 83px; font-weight: 600; line-height: 1.6;}
.franchise_list dd li p {line-height: 1.6;}
.franchise_list dd .btn {position: absolute; bottom:10px; display: block; width: calc(100% - 36px); line-height: 30px; border-radius: 15px; padding: 0 20px; text-align: center; font-size: 18px; font-weight: 600; color: #fff; background: #209e1b;}
.franchise_list dd .btn:hover,
.franchise_list dd .btn:focus {background: #002067;}
.franchise_list > li .banner {width: 100%; height: 100%; border-radius: 15px; padding-top: 270px; color: #232323; overflow: hidden; text-align: center; background: #a9d5ff url(../images/sub/franchise_img6.png) no-repeat top center;}
.franchise_list > li .banner .tit {font-size: 36px; font-weight: 600; margin-bottom: 10px; word-break: keep-all;}
.franchise_list > li .banner .txt {font-size: 24px; word-break: keep-all; padding: 0 50px;}

/* faq */
.accordion {margin-top: 110px; border-top: 2px solid #000;}
.heading {position: relative; display: flex; color: #111; font-size:24px; border-bottom: 1px solid #7a7a7a; padding: 24px 20px; cursor: pointer;}
.heading:hover {background: #faf9f9;}
.heading::before {content: ''; position: absolute; right:15px; top: calc(50% - 6px); width: 19px; height: 12px; display: inline-block; background: url(../images/sub/faq_icon.png) no-repeat; transform: rotate(0); transition: all 0.5s;}
.active.heading::before {transform: rotate(-180deg);}
.not-active.heading::before {transform: rotate(0deg);}
.accordion span {display: inline-block; font-size: 24px; font-weight: 800; margin-right: 50px;}
.heading span {color: #1744c4;}
.contents span {color: #1ab201;} 
.contents {display: none; background: #FFFAFA; padding: 38px 60px 38px 20px; color: #111; font-size: 24px; line-height: 1.5; border-bottom: 1px solid #7a7a7a;}
.contents .inner {position: relative; display: flex;}
.contents .inner::before {content: '';  position: absolute; right:-45px; top: calc(50% - 6px); width: 19px; height: 12px; display: inline-block; background: url(../images/sub/faq_icon.png) no-repeat; transform: rotate(-180deg);}
.contents .inner div {cursor: pointer; width: 100%; display: block;}
.contents .inner h3 {margin-top: -5px;}
.contents .inner .tit2 {font-size: 30px; font-weight: 600; color: #323232; margin-top: 60px; margin-bottom: 35px; border-top: 1px solid #dadada; padding-top: 60px;}
.contents .inner .tit2.first {margin-top: 0; border-top: none; padding-top: 0;}
.contents .inner .tit3 {font-size: 24px; font-weight: bold; color: #003087; margin-top: 48px; margin-bottom: 25px;}
.contents .inner .list_st li {position: relative; padding-left: 20px; font-size: 24px; color: #343434; line-height: 40px;}
.contents .inner .list_st li::before {content:"-"; position: absolute; left:0; top:0;}
.contents .inner .list_st2 li {position: relative; padding-left: 25px; font-size: 21px; color: #343434; line-height: 35px;}
.contents .inner .list_st2 li::before {content:"▶"; position: absolute; left:0; top: 0%;}
.contents .inner .tbl_st {width: 100%;}
.contents .inner .tbl_st table {border-top: 1px solid #494949; width: 100%;}
.contents .inner .tbl_st th {height: 55px; font-size: 24px; color: #343434; font-weight: 500; background: #f9f9f9; border-left: 1px solid #494949; border-bottom: 1px solid #494949;}
.contents .inner .tbl_st td {padding: 30px 20px; border-left: 1px solid #494949; border-bottom: 1px solid #494949;}
.contents .inner .tbl_st th:first-child,
.contents .inner .tbl_st td:first-child {border-left: none;}
.contents .inner .img img {width: 100%;}


@media (max-width: 1440px) {
    .tit_wrap .visual {max-width: calc(100% - 670px);} 
} 

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

@media (max-width: 1240px) {
    .tit_wrap {gap:15px;}
    .tit_wrap .visual {max-width: 100%; height: auto;} 

    /* guide */
    .cont_wrap {flex-direction: column; gap:50px;}
    .guide_info3 {width: 100%;}

    .contents .inner div {display: grid;}
    .contents .inner .tbl_st.scroll_gr {overflow-x: auto;}
    .contents .inner .tbl_st table {width:1240px;}
}

@media (max-width: 1100px) {
    /* franchise */
    .franchise_info3 {flex-direction: column;}
    .franchise_info3 .img {width: 100%;}
    .franchise_list > li .banner .txt {padding: 0 20px;}
}

@media (max-width: 768px) {
    #container {margin-top:50px;}

    h2 {font-size: 35px;}
    h3 {font-size: 28px; margin: 40px 0 20px;}
    h4 {font-size: 20px; margin-bottom: 10px;}

    .tit_wrap .visual {padding: 20px;}
    .tit_wrap .visual strong {font-size: 25px;} 
    .tit_wrap .visual span {font-size: 15px;}  

    /* company */
    .company_intro {margin-top: 30px; padding: 0 20px; font-size: 18px;}
    .company_intro p br {display: none;}
    .company_map {height: 350px;}
    .company_add {margin-top: 30px;}
    .company_add li {gap:5px 20px; font-size: 18px; margin-bottom: 20px;}
    .company_add li strong {width:80px; font-size: 18px;}

    /* guide */
    .product_list li {width: calc(50% - (calc(17px / 2)));}
    .guide_txt {font-size: 20px; line-height: 1.8; margin-top: 30px;}
    .guide_tbl {margin-top: 40px;}
    .guide_tbl th, .guide_tbl td {height: 38px; font-size: 18px; padding: 10px 0;}
    .guide_tbl th {width: 15%; min-width: 100px;}
    .guide_tbl td {padding-left: 15px;}
    .container .caution {font-size: 16px; margin-top: 20px;}
    .guide_info {padding: 20px 0 30px; margin-top: 40px;}
    .guide_info h3 {margin-top: 0; }
    .guide_info2 li {font-size: 18px; margin-bottom: 15px;}
    .cont_wrap {gap:30px; margin-top: 40px; padding-top: 30px;}
    .guide_info3 { gap:30px 20px;}
    .guide_info3 h3 {gap:10px; font-size: 26px; letter-spacing: -1.5px;}
    .guide_info3 h3 img {width: 40%;}
    .guide_info3 ul {margin-top: 0;}
    .guide_info3 li {font-size: 20px; letter-spacing: -1.5px;}
    .guide_info3 li ~ li {margin-top:10px;}

    /* franchise */
    .franchise_info1 .txt1 {padding-left: 20px; font-size: 18px; line-height: 1.7;}
    .franchise_info1 ul {margin-top: 30px; display: flex; gap: 20px;}
    .franchise_info1 li {width: calc(50% - 10px);}
    .franchise_info1 .tit {font-size: 20px;}
    .franchise_info1 .txt2 {margin-top: 30px; font-size: 22px; line-height: 1.6;}
    .franchise_info2 {gap:20px 110px; margin-top: 50px;}
    .franchise_info2 strong {font-size: 40px; width:100%;}
    .franchise_info2 p {font-size: 18px; line-height: 1.8; }
    .franchise_info3 {gap:20px 50px; margin-top: 40px;}
    .franchise_info3 .img {width: 100%; height: 200px;}
    .cs_wrap {gap:15px;}
    .cs_wrap .cs_box {width: 100%; height: auto; padding: 20px 20px 9px;}
    .cs_wrap .cs_box .inner {padding-left:10px; padding-bottom: 10px;}
    .cs_wrap .cs_box .cs_txt1 {font-size: 20px;}
    .cs_wrap .cs_box .cs_txt2 {font-size: 18px; line-height: 1.4;}
    .cs_wrap .cs_box span {font-size: 16px;}
    .franchise_list {display: flex; flex-wrap: wrap; gap: 20px 30px;}
    .franchise_list > li {width: 100%;}
    .franchise_list dl {padding: 18px 18px 38px;}
    .franchise_list dt .area {line-height: 30px; font-size: 16px;}
    .franchise_list dd li {font-size: 16px; padding: 15px 0;}
    .franchise_list dd li:first-child {min-height: 0;}
    .franchise_list dd li strong {width: 70px;}
    .franchise_list dd .btn {font-size: 16px;}
    .franchise_list > li .banner {padding: 150px 0 20px; background-size: 230px;}
    .franchise_list > li .banner .tit {font-size: 25px;}
    .franchise_list > li .banner .txt {font-size: 18px;}

    /* faq */
    .accordion {margin-top: 40px;}
    .heading {font-size:18px; padding: 15px 40px 15px 15px;}
    .heading::before {width: 15px; height: 10px; background-size: contain;}
    .accordion span {font-size: 18px; margin-right: 15px;}
    .contents {padding: 25px 15px 15px; font-size: 18px; line-height: 1.5; border-bottom: 1px solid #7a7a7a;}
    .contents .inner::before {right:0; top: -15px; width: 15px; height: 10px; background-size: contain;}
    .contents .inner .tit2 {font-size: 20px; margin-top: 30px; margin-bottom: 15px; padding-top: 30px;}
    .contents .inner .tit3 {font-size: 18px; margin-top: 20px; margin-bottom: 10px;}
    .contents .inner ul li {font-size: 16px;}
    .contents .inner .list_st li {padding-left: 17px; font-size: 16px; line-height: 1.3; padding-bottom: 10px;}
    .contents .inner .list_st2 li {padding-left: 22px; font-size: 16px; line-height: 1.3; padding-bottom: 10px;}
    .contents .inner .list_st2 li::before {content:"▶"; position: absolute; left:0; top: 0%;}
    .contents .inner .tbl_st th {height: 40px; font-size: 18px;}
    .contents .inner .tbl_st td {padding: 20px 10px; 0}
}

@media (max-width: 350px) {
    .guide_info3 {flex-direction: column; gap:10px;}
    .guide_info3 h3 img {display: none;}
}