/*Content CSS*/
#guide2 {width: 100%; overflow: hidden; position: relative;}
#guide2 > article{padding: 100px 0;}
#guide2 > article:nth-of-type(2){padding-top: 0;}
/* #guide2 > article:last-of-type{padding-bottom: 125px;} */

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

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

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

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

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

/* sec1 */
/* text_wrap */
#guide2 .sec1 .text_wrap{margin-top: 40px;}
#guide2 .sec1 .text_wrap h4{padding-bottom: 31px; margin-bottom: 31px; border-bottom: solid 1px #ddd; position: relative;}
#guide2 .sec1 .text_wrap h4::before{content: ''; display: block; width: 15%; height: 3px; max-width: 128px; background-color: #222; position: absolute; bottom: -2px; left: 0;}
#guide2 .sec1 .text_wrap p{color: #222; font-weight: 600;}

/* icon_wrap */
#guide2 .sec1 .icon_wrap{display: flex; align-items: center; background-color: rgb(71, 47, 28, .11); padding: 53px 84px; border-radius: 10px; margin-top: 50px;}
#guide2 .sec1 .icon_wrap i{flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 121px; height: 121px; border-radius: 50%; background-color: rgba(91, 70, 54, .5); position: relative;}
#guide2 .sec1 .icon_wrap i::before{content: ''; display: block; width: 93px; height: 93px; border-radius: 50%; background-color: #5b4636; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
#guide2 .sec1 .icon_wrap i img{position: relative; z-index: 1; transition: .5s;}
#guide2 .sec1 .icon_wrap .txt{margin-left: 44px;}
#guide2 .sec1 .icon_wrap .txt h5{font-weight: 600; margin-bottom: 11px;}
#guide2 .sec1 .icon_wrap .txt h5 b{font-size: 1.25em; color: #472f1c;}
#guide2 .sec1 .icon_wrap .txt p{color: #333;}
#guide2 .sec1 .icon_wrap .txt p + p{margin-top: 7px;}

/* table_wrap */
#guide2 .scroll_wrap{margin-top: 40px;}
#guide2 .scroll_wrap > i{display: none; text-align: right; font-size: 25px; }
#guide2 .table_wrap::-webkit-scrollbar {width: 8px; height: 8px;}
#guide2 .table_wrap::-webkit-scrollbar-track{border-radius: 10px; background-color: #eee;}
#guide2 .table_wrap::-webkit-scrollbar-thumb {background: #aaa; border-radius: 10px;}

#guide2 .table_wrap table{width: 100%; border-collapse: collapse; table-layout: fixed;}
#guide2 .table_wrap table tbody tr:first-child th, #guide2 .table_wrap table tbody tr:first-child td{border-top: solid 3px #222;}
#guide2 .table_wrap table tbody tr th{background-color: #472f1c; color: #fff; font-weight: 600; padding: 10px; height: 58px; width: 13%;}
#guide2 .table_wrap table tbody tr td{padding: 10px 30px; border: solid 1px #ccc; height: 58px;}
#guide2 .table_wrap table tbody tr td:nth-of-type(1){background-color: #f7f7f7; text-align: center; font-weight: 500; width: 13%;}
#guide2 .table_wrap table tbody tr td:nth-of-type(2){background-color: #fff; color: #444;}
#guide2 .table_wrap table tbody tr td:first-of-type{border-left: 0;}
#guide2 .table_wrap table tbody tr td:last-of-type{border-right: 0;}

/* sec2 */
#guide2 .sec2 .step_wrap{position:relative; margin-top: 40px;}
#guide2 .sec2 .step_wrap .box{display: flex;}
#guide2 .sec2 .step_wrap .box + .box{margin-top: 80px;}

#guide2 .sec2 .step_wrap .box .left{flex-shrink: 0; margin-right: 100px;}
#guide2 .sec2 .step_wrap .box .left h6{display: flex; align-items: center; justify-content: center; min-height: 40px; min-width: 133px; padding: 5px 10px; color: #fff; font-weight: 700; border-radius: 5px; position:relative;}
#guide2 .sec2 .step_wrap .box .left h6::after{content: ''; display: block; width: 10px; height: 14px; background: 50% / cover no-repeat; position: absolute; right: -8px; top: 50%; transform: translateY(-50%);}

#guide2 .sec2 .step_wrap .box .right{display: flex; flex-wrap: wrap; flex-grow: 1; }
#guide2 .sec2 .step_wrap .box .right li{display: flex; align-items: stretch; width: 20%; border-bottom: solid 1px #ccc;}
#guide2 .sec2 .step_wrap .box .right li .num{font-family: 'Poppins'; font-weight: 700; display: block; min-width: 58px; display: flex; align-items: center; justify-content: center;}
#guide2 .sec2 .step_wrap .box .right li p{padding: 15px; background-color: #fff; font-weight: 500; width: 100%;}
#guide2 .sec2 .step_wrap .box .right li:nth-child(-n + 5){border-top: solid 2px #222;}

/* color */
#guide2 .sec2 .step_wrap .box:nth-child(odd) .left h6{background-color: #03508a;}
#guide2 .sec2 .step_wrap .box:nth-child(odd) .left h6::after{background-image: url('../img/blue_tri.png');}
#guide2 .sec2 .step_wrap .box:nth-child(odd) .right li .num{background-color: #e5f0f8; }
#guide2 .sec2 .step_wrap .box:nth-child(even) .left h6{background-color: #472f1c;}
#guide2 .sec2 .step_wrap .box:nth-child(even) .left h6::after{background-image: url('../img/brown_tri.png');}
#guide2 .sec2 .step_wrap .box:nth-child(even) .right li .num{background-color: #e5e3e1; }

#guide2 .sec2 .step_wrap .progress_wrap{position: absolute; top: 0; left: 180px; width: 3px; height: 100%; background-color: #ddd; display: flex; flex-direction: column; align-items: center;}
#guide2 .sec2 .step_wrap .progress_wrap .bar{width: 3px; height: 0; background-color: #03508a; }
#guide2 .sec2 .step_wrap .progress_wrap .dot{display: flex; align-items: center; justify-content: center; width: 23px; height: 23px; border-radius: 50%; background-color: #adc5d6;}
#guide2 .sec2 .step_wrap .progress_wrap .dot::before{content: ''; display: block; width: 13px; height: 13px; border-radius: 50%; background-color: #03508a;}

#guide2 .sec2 .step_wrap .progress_wrap.even .bar{background-color: #472f1c; }
#guide2 .sec2 .step_wrap .progress_wrap.even .dot{background-color: #e5e3e1;}
#guide2 .sec2 .step_wrap .progress_wrap.even .dot::before{background-color: #472f1c;}

@media screen and (min-width: 1900px) {

    #guide2 .cont::before{width: calc(100% + 340px);}
    #guide2 .sec1 .icon_wrap .txt h5 b{font-size: 27px;}
    #guide2 .sec2 .step_wrap .box .left{margin-right: 122px;}
    #guide2 .sec2 .step_wrap .box .right li p{padding: 15px 25px;}
    #guide2 .table_wrap table tbody tr th{width: 192px;}
    #guide2 .table_wrap table tbody tr td:nth-of-type(1){width: 205px; text-align: right;}
}

@media screen and (min-width: 1025px) {
    #guide2 .sec1 .icon_wrap:hover i img{transform: rotateY(180deg);}

}
@media screen and (max-width: 1600px) {
    #guide2 > article:nth-of-type(2){padding-bottom: 0;}
    /* cont */
    #guide2 .cont::before{border-radius: 0; width: calc(100vw + 15px);}
}

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

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

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

    /* sec1 */
    /* text_wrap */
    #guide2 .sec1 .text_wrap{margin-top: 30px;}
    #guide2 .sec1 .text_wrap h4{padding-bottom: 25px; margin-bottom: 25px}

    /* icon_wrap */
    #guide2 .sec1 .icon_wrap{padding: 30px 50px; margin-top: 40px;}
    #guide2 .sec1 .icon_wrap i{width: 115px; height: 115px; }
    #guide2 .sec1 .icon_wrap i::before{width: 85px; height: 85px; }
    #guide2 .sec1 .icon_wrap i img{width: 28px;}
    #guide2 .sec1 .icon_wrap .txt{margin-left: 35px;}
    #guide2 .sec1 .icon_wrap .txt h5{margin-bottom: 8px;}
    #guide2 .sec1 .icon_wrap .txt p + p{margin-top: 5px;}

    /* sec2 */
    #guide2 .sec2 .step_wrap .box .right li{width: 50%;}
    #guide2 .sec2 .step_wrap .box .right li:nth-child(-n + 5){border-top: 0;}
    #guide2 .sec2 .step_wrap .box .right li:nth-child(-n + 2){border-top: solid 2px #222;}

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

    /* table_wrap */
    #guide2 .table_wrap table tbody tr td{padding: 10px 15px;}

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

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

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

    /* sec1 */
    /* text_wrap */
    #guide2 .sec1 .text_wrap{text-align: center;}
    #guide2 .sec1 .text_wrap h4::before{left: 50%; transform: translateX(-50%);}

    /* icon_wrap */
    #guide2 .sec1 .icon_wrap{padding: 30px; margin-top: 30px; display: block;}
    #guide2 .sec1 .icon_wrap i{width: 90px; height: 90px; margin: 0 auto 15px;}
    #guide2 .sec1 .icon_wrap i::before{width: 65px; height: 65px; }
    #guide2 .sec1 .icon_wrap i img{width: 25px;}
    #guide2 .sec1 .icon_wrap .txt{margin: 0; text-align: center;}

    /* table_wrap */
    #guide2 .scroll_wrap{margin-top: 30px; }

    #guide2 .table_wrap table tbody tr th{width: 102px;}
    #guide2 .table_wrap table tbody tr td:nth-of-type(1){width: 102px;}

    /* sec2 */
    #guide2 .sec2 .step_wrap{margin-top: 30px}
    #guide2 .sec2 .step_wrap .box + .box{margin-top: 50px;}
    #guide2 .sec2 .step_wrap .box .left{margin-right: 50px;}
    #guide2 .sec2 .step_wrap .box .left h6{min-width: 100px;}
    #guide2 .sec2 .step_wrap .box .right li:last-child:nth-child(odd){flex-grow: 1}
    #guide2 .sec2 .step_wrap .box .right li .num{min-width: 45px;}
    #guide2 .sec2 .step_wrap .box .right li p{padding: 10px;}

    #guide2 .sec2 .step_wrap .progress_wrap{left: 125px;}
    #guide2 .sec2 .step_wrap .progress_wrap .dot{width: 16px; height: 16px;}
    #guide2 .sec2 .step_wrap .progress_wrap .dot::before{width: 8px; height: 8px;}

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

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

    /* sec1 */
    /* icon_wrap */
    #guide2 .sec1 .icon_wrap{padding: 25px 20px;}

    /* sec2 */
    #guide2 .sec2 .step_wrap{margin-top: 20px}
    #guide2 .sec2 .step_wrap .box{display: block;}
    #guide2 .sec2 .step_wrap .box .left{margin-right: 0; margin-bottom: 25px;}

    #guide2 .sec2 .step_wrap .box .left h6{min-width: 100%;}
    #guide2 .sec2 .step_wrap .box .left h6::after{left: 50%; transform: translateX(-50%) rotate(90deg); top: initial; bottom: -10px;}
    #guide2 .sec2 .step_wrap .box .right li{width: 100%;}
    #guide2 .sec2 .step_wrap .box .right li:nth-child(2){border-top: 0;}

    #guide2 .sec2 .step_wrap .box .right li .num{min-width: 45px;}
    #guide2 .sec2 .step_wrap .box .right li p{padding: 10px;}

    #guide2 .sec2 .step_wrap .progress_wrap{display: none;}

}

@media screen and (max-width: 480px) {
    /* table_wrap */
    #guide2 .scroll_wrap > i{display: block;}
    #guide2 .table_wrap{overflow-x: scroll; padding-bottom: 20px;}
    #guide2 .table_wrap table{min-width: 480px;}
}