/*Content CSS*/
#guide1 {width: 100%; overflow: hidden; position: relative;}
#guide1 > article{padding: 100px 0;}
#guide1 > article:nth-of-type(even){background-color: #f7f7f7;}
#guide1 > article:last-of-type{padding-bottom: 125px;}

#guide1  .sub_inner{width: 100%; max-width: 1500px; padding: 0 50px; margin: 0 auto;}

/* font-style */
#guide1 .fs_60{font-size: 60px; font-weight: 800; line-height: 1.4;}
#guide1 .fs_40{font-size: 40px; font-weight: 700; line-height: 1.4; color: #000;}
#guide1 .fs_35{font-size: 35px; line-height: 1.5;}
#guide1 .fs_30{font-size: 30px; line-height: 1.6;}
#guide1 .fs_23{font-size: 23px; line-height: 1.6;}
#guide1 .fs_22{font-size: 22px; line-height: 1.6;}
#guide1 .fs_20{font-size: 20px; line-height: 1.7;}
#guide1 .fs_19{font-size: 19px; line-height: 1.7;}
#guide1 .fs_18{font-size: 18px; line-height: 2;}
#guide1 .fs_17{font-size: 17px; line-height: 1.7;}
#guide1 .fs_16{font-size: 16px; line-height: 2; color: #222; }

/* bar_tit */
#guide1 .bar_tit{position: relative; padding-left: 17px; }
#guide1 .bar_tit::before{content: ''; display: block; width: 5px; height: 70%; max-height: 34px; position: absolute; top: 11px; left: 0; background-color: #472f1c; }

/* bor_tit */
#guide1 .bor_tit{display: flex; align-items: center; margin-bottom: 40px;}
#guide1 .bor_tit h4{flex-shrink: 0; margin-right: 29px; font-weight: 800}
#guide1 .bor_tit i{flex-grow: 1; height: 1px; background-color: #ddd; position: relative;}
#guide1 .bor_tit i::after{content: ''; display: block; width: 20%; max-width: 242px; height: 5px; background-color: #472f1c; position: absolute; right: 0; top: -2px;}
#guide1 > article:nth-of-type(even) .bor_tit i::after{background-color: #03508a;}

/* tab_list */
#guide1 .tab_list{display: flex; margin-top: 35px;}
#guide1 .tab_list li{width: 25%; position: relative;}
#guide1 .tab_list li a{display: flex; width: 100%; height: 70px;  align-items: center; justify-content: center; position: relative; border: solid 1px #ddd; color: #555; transition: .3s;}
#guide1 .tab_list li a::after{content: ''; display: block; width: 16px; height: 9px; background: url('../img/brown_tri.png') 50% / cover no-repeat; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); opacity: 0; transition: .3s;}
#guide1 .tab_list li.active a{color: #472f1c; border-color: #472f1c;}
#guide1 .tab_list li.active a::after{opacity: 1;}
#guide1 .tab_list li + li a{border-left-color: transparent;}

/* cont */
#guide1 .cont{position: relative; padding: 80px 0; z-index: 2;}
#guide1 .cont::before{content: ''; display: block; width: 100%; height: 100%; border-radius: 30px; position: absolute; top: 0; left: 50%; transform: translateX(-50%); z-index: -1;}

#guide1 .cont.gray::before{background-color: #f7f7f7;}

/* tab */
#guide1 .tab{scroll-margin-top: 100px;}
#guide1 .tab .img_list{display: flex; flex-wrap: wrap; column-gap: 29px;}
#guide1 .tab .img_list li{width: calc((100% - 29px) / 2); }
#guide1 .tab .img_list li:nth-child(n+3){margin-top: 43px;}
#guide1 .tab .img_list li .img{border-radius: 10px; overflow: hidden;}
#guide1 .tab .img_list li .img img{transition: .3s;}
#guide1 .tab .img_list li p{position: relative; padding-left: 22px; font-size: 1.02em; font-weight: 600; margin-top: 27px;}
#guide1 .tab .img_list li p::before{content: ''; display: block; width: 11px; height: 11px; background-color: #472f1c; position: absolute; top: 12px; left: 0;}

/* sec1 */
#guide1  .sec1 .tab{margin-top: 60px;}


@media screen and (min-width: 1900px) {
    #guide1 .cont::before{width: calc(100% + 340px);}

}

@media screen and (min-width: 1025px) {
    #guide1 .tab_list li:hover a{border-color: #472f1c; color: #472f1c;}
    #guide1 .tab_list li.active + li:hover a{border-left-color: transparent;}
    #guide1 .tab_list li.prev_active a{border-right-color: transparent;}
    #guide1 .tab_list li:hover a::after{opacity: 1}

    #guide1 .tab .img_list li .img:hover img{transform: scale(1.1);}

}
@media screen and (max-width: 1600px) {
    /* cont */
    #guide1 .cont::before{border-radius: 0; width: calc(100vw + 15px);}
}

@media screen and (max-width: 1400px) {
    #guide1 > article{padding: 80px 0;}
    #guide1 > article:last-of-type{padding-bottom: 80px;}

    /* font-style */
    #guide1 .fs_60{font-size: 55px;}
    #guide1 .fs_40{font-size: 38px;}
    #guide1 .fs_35{font-size: 32px;}
    #guide1 .fs_30{font-size: 28px;}
    #guide1 .fs_23{font-size: 22px;}
    #guide1 .fs_22{font-size: 21px;}
    #guide1 .fs_20{font-size: 19px;}
    #guide1 .fs_18{font-size: 18px;}
    #guide1 .fs_18{font-size: 17px; line-height: 1.7;}
    #guide1 .fs_17{font-size: 16px;}
    #guide1 .fs_16{font-size: 15px; line-height: 1.7;}
    /* bar_tit */
    #guide1 .bar_tit{padding-left: 15px;}
    #guide1 .bar_tit::before{max-height: 31px; top: 10px;}

    /* cont */
    #guide1 .cont{padding: 50px 0;}

    /* tab_list */
    #guide1 .tab_list li a{height: 60px;}

    /* tab */
    #guide1 .tab .img_list{column-gap: 20px;}
    #guide1 .tab .img_list li{width: calc((100% - 20px) / 2); }
    #guide1 .tab .img_list li:nth-child(n+3){margin-top: 30px;}
    #guide1 .tab .img_list li p{padding-left: 18px; margin-top: 20px;}
    #guide1 .tab .img_list li p::before{width: 9px; height: 9px; top: 12px;}


}
@media screen and (max-width: 1280px) {
    /* font-style */
    #guide1 .fs_60{font-size: 50px;}
    #guide1 .fs_40{font-size: 36px;}
    #guide1 .fs_35{font-size: 30px;}
    #guide1 .fs_30{font-size: 26px;}
    #guide1 .fs_23{font-size: 21px;}
    #guide1 .fs_22{font-size: 20px;}
    #guide1 .fs_20{font-size: 18px;}
    #guide1 .fs_19{font-size: 17px;}
    #guide1 .fs_18{font-size: 16px;}
    #guide1 .fs_17{font-size: 15px;}
    #guide1 .fs_16{font-size: 14px;}

}
@media screen and (max-width: 1024px) {
    #guide1 > article{padding: 50px 0;}
    #guide1 > article:last-of-type{padding-bottom: 50px;}
    #guide1  .sub_inner{padding: 0 30px;}

    /* font-style */
    #guide1 .fs_60{font-size: 45px;}
    #guide1 .fs_40{font-size: 32px;}
    #guide1 .fs_35{font-size: 28px;}
    #guide1 .fs_30{font-size: 25px;}
    #guide1 .fs_23{font-size: 20px;}
    #guide1 .fs_22{font-size: 19px;}
    #guide1 .fs_20{font-size: 17px;}
    #guide1 .fs_19{font-size: 16px;}
    #guide1 .fs_18{font-size: 15px;}

    /* bar_tit */
    #guide1 .bar_tit::before{max-height: 30px; top: 8px;}

    /* bor_tit */
    #guide1 .bor_tit{margin-bottom: 30px;}
    #guide1 .bor_tit h4{margin-right: 15px;}

    /* tab_list */
    #guide1 .tab_list{margin-top: 30px;}
    #guide1 .tab_list li a{height: 50px;}

    /* tab */
    #guide1 .tab .img_list{column-gap: 15px;}
    #guide1 .tab .img_list li{width: calc((100% - 15px) / 2); }
    #guide1 .tab .img_list li:nth-child(n+3){margin-top: 20px;}
    #guide1 .tab .img_list li p{padding-left: 15px; margin-top: 10px;}
    #guide1 .tab .img_list li p::before{width: 8px; height: 8px; top: 11px;}

    /* sec1 */
    #guide1 .sec1 .tab{margin-top: 50px;}

}
@media screen and (max-width: 786px) {

}
@media screen and (max-width: 640px) {
    #guide1  .sub_inner{padding: 0 20px;}

    /* tab_list */
    #guide1 .tab_list{margin-top: 20px}
    #guide1 .tab_list{flex-wrap: wrap; gap: 10px;}
    #guide1 .tab_list li{width: calc(50% - 5px);}
    #guide1 .tab_list li:last-child:nth-child(odd){width: 100%;}
    #guide1 .tab_list li + li a{border-left-color: #ddd;}


    /* tab */
    #guide1 .tab .img_list{column-gap: 0;}
    #guide1 .tab .img_list li{width: 100%; }
    #guide1 .tab .img_list li:nth-child(n+2){margin-top: 20px;}


}

@media screen and (max-width: 480px) {

}