.sub01 #side-block p.txt-img{background-image: url(/sabo/share/img/sub01_sideblock_icon.png);}
.sub02 #side-block p.txt-img{background-image: url(/sabo/share/img/sub02_sideblock_icon.png);}
.sub03 #side-block p.txt-img{background-image: url(/sabo/share/img/sub03_sideblock_icon.png);}
.sub04 #side-block p.txt-img{background-image: url(/sabo/share/img/sub04_sideblock_icon.png);}
.sub05 #side-block p.txt-img{background-image: url(/sabo/share/img/sub05_sideblock_icon.png);}
.sub06 #side-block p.txt-img{background-image: url(/sabo/share/img/sub06_sideblock_icon.png);}
.sub07 #side-block p.txt-img{background-image: url(/sabo/share/img/sub07_sideblock_icon.png);}

.sub01_01 #sub-banner{background-image: url(/sabo/2021_vol86/img/s1_1_sub_banner.jpg);}
.sub01_02 #sub-banner{background-image: url(/sabo/2021_vol86/img/s1_2_sub_banner.jpg);}
.sub01_03 #sub-banner{background-image: url(/sabo/2021_vol86/img/s1_3_sub_banner.jpg);}
.sub02_01 #sub-banner{background-image: url(/sabo/2021_vol86/img/s2_1_sub_banner.jpg);}
.sub02_02 #sub-banner{background-image: url(/sabo/2021_vol86/img/s2_2_sub_banner.jpg);}
.sub02_03 #sub-banner{background-image: url(/sabo/2021_vol86/img/s2_3_sub_banner.jpg);}
.sub02_04 #sub-banner{background-image: url(/sabo/2021_vol86/img/s2_4_sub_banner.jpg);}
.sub03_01 #sub-banner{background-image: url(/sabo/2021_vol86/img/s3_1_sub_banner.jpg);}
.sub03_02 #sub-banner{background-image: url(/sabo/2021_vol86/img/s3_2_sub_banner.jpg);}
.sub03_03 #sub-banner{background-image: url(/sabo/2021_vol86/img/s3_3_sub_banner.jpg);}
.sub03_04 #sub-banner{background-image: url(/sabo/2021_vol86/img/s3_4_sub_banner.jpg);}
.sub04_01 #sub-banner{background-image: url(/sabo/2021_vol86/img/s4_1_sub_banner.jpg);}
.sub04_02 #sub-banner{background-image: url(/sabo/2021_vol86/img/s4_2_sub_banner.jpg);}
.sub04_03 #sub-banner{background-image: url(/sabo/2021_vol86/img/s4_3_sub_banner.jpg);}
.sub05_01 #sub-banner{background-image: url(/sabo/2021_vol86/img/s5_1_sub_banner.jpg);}
.sub05_02 #sub-banner{background-image: url(/sabo/2021_vol86/img/s5_2_sub_banner.jpg);}
.sub05_03 #sub-banner{background-image: url(/sabo/2021_vol86/img/s5_3_sub_banner.jpg);}
.sub06_01 #sub-banner{background-image: url(/sabo/2021_vol86/img/s6_1_sub_banner.jpg);}
.sub06_02 #sub-banner{background-image: url(/sabo/2021_vol86/img/s6_2_sub_banner.jpg);}
.sub06_03 #sub-banner{background-image: url(/sabo/2021_vol86/img/s6_3_sub_banner.jpg);}
.sub06_04 #sub-banner{background-image: url(/sabo/2021_vol86/img/s6_4_sub_banner.jpg);}
.sub07_01 #sub-banner{background-image: url(/sabo/2021_vol86/img/s7_1_sub_banner.jpg);}

.mt10{margin-top: 1rem !important}
.mt20{margin-top: 2rem !important}
.mt30{margin-top: 3rem !important}
.mt40{margin-top: 4rem !important}
.mt50{margin-top: 5rem !important}
.mt60{margin-top: 6rem !important}
.mt70{margin-top: 7rem !important}
.mt80{margin-top: 8rem !important}
.mt90{margin-top: 9rem !important}

.mr10{margin-right: 1rem !important}
.mr20{margin-right: 2rem !important}
.mr30{margin-right: 3rem !important}
.mr40{margin-right: 4rem !important}
.mr50{margin-right: 5rem !important}
.mr60{margin-right: 6rem !important}
.mr70{margin-right: 7rem !important}
.mr80{margin-right: 8rem !important}
.mr90{margin-right: 9rem !important}

.rad30{border-radius: 3rem !important;}
.overflow-h{overflow:hidden}
.txt-center{text-align: center !important;}
.txt-left{text-align: left !important;}
.txt-right{text-align: right !important;}
.line-h-18{line-height: 1.8 !important;}
.flex{display: flex;}
.flex.space-b{justify-content: space-between;}
.flex.juctify-c{justify-content: center;}
.flex.align-c{align-items: center;}
.flex.col{flex-wrap: wrap;}
.flex.col02 > div{width: calc(50% - 15px);}
.flex.col03 > div{width: calc(33.333% - 15px);}
.flex.coloum{flex-direction: column;}
.dis-block{display: block;}
.pos-relative{position: relative;}
.pos-absolute{position: absolute}

.wrapper{max-width: 1400px; margin: 0 20px 0 15.5%;}
#sub .bg{background-repeat: no-repeat;}
hr.dashed{border: 1px dashed #ddd;}
hr.solid{border: 1px solid #ddd;}
img{width: 100%;}
.bold{ font-family: 'NEXON Lv1 Gothic OTF Bold';}
.blue{ font-family: 'NEXON Lv1 Gothic OTF Bold'; color: #183a9d;}
.img.desc-box{position: relative;}
.img.desc-box > p.desc{font-size: 1.6rem;position: absolute; background-color: rgb(0 0 0 / 70%); color: #fff; display: flex; justify-content: center; align-items: center;text-align: center; padding: 12px 10px; line-height: 1.2;}
.img.desc-box > p.desc.bottom{width: 100%; bottom: 0; left: 0;}
.wid100{width: 100% !important;}

#sub #sub-banner{height: 500px; background-color: #aaa; position: relative; background-position: center; background-size: cover; margin-left: 15.5%;;}
#sub #sub-banner #sub-tab-container{position: absolute; bottom: 0; left: 0; background-color: #fff;}
#sub #sub-banner #sub-tab-container li{float: left; width: 180px;height: 90px; border-bottom: 1px solid #d2d2d2;}
#sub #sub-banner #sub-tab-container li a{display: flex;justify-content: center;align-items: center;width: 100%; height: 100%;line-height: 1.6; transition: 0.2s;}
#sub #sub-banner #sub-tab-container li.on{border-bottom: 2px solid #183a9d;}
#sub #sub-banner #sub-tab-container li.on a{color: #183a9d; font-family: 'NEXON Lv1 Gothic OTF Bold';}
#sub #sub-banner #sub-tab-container li a:hover{background-color: #6683db; color: #fff;}
#sub-content{padding: 0 0 120px 0;}

h2{margin-top: 100px; font-size: 3.6rem; color: #183a9d; position: relative;}
h2 span.color-bg{position: relative;font-family: 'NEXON Lv1 Gothic OTF Bold'; vertical-align: baseline; z-index: 1;}
h2 span.color-bg::before{width: 102%; height: 60%; display: block; content: ''; position: absolute;background-color: #cef098; z-index: -1; transform: translate(-50%, 3%); left: 50%; bottom: 0}
h2 > div.part-tag{position: absolute; transform: translateY(-50%); top: 50%; right: 0; }
h2 > div.part-tag span{display: inline-block;background: #f6f6f6 url(/sabo/share/img/h2_parttag_icon.png)no-repeat left 25px top 50%;color: #666; padding: 15px 30px 12px 60px; font-size: 1.8rem;border-radius: 50px; }
h2 > div.part-tag b{vertical-align: bottom;}
h2 > div.sub-tit span{background-color: #1b238d; color: #fff; font-size: 26px; padding: 5px 8px 2px; border-radius: 5px; display: inline-block; margin-bottom: 0.5rem;}
h2.red{color: #9a1486;}
h2.red span.color-bg::before{background-color: #f9f871; }
h2.green{color: #006a0a;}
h2.green span.color-bg::before{background-color: #f9f871; }
h2.brown{color: #59493f;}
h2.brown span.color-bg::before{background-color: #f6e3f4; }
h2.red2{color: #d6033a;}
h2.red2 span.color-bg::before{background-color: #fff674; }
h2 span.no-color{color: #333}
h2.sky{color: #0155ff;}
h2.sky span.color-bg::before{background-color: #c5ffff; }

p{line-height: 1.7; letter-spacing: 0.03rem; font-size: 1.8rem; color: #333; word-spacing: -0.1rem;}
h2 + p{margin-top: 4.5rem}

h3.dot{padding-left: 2rem;position: relative; font-size: 2.4rem;  font-family: 'NEXON Lv1 Gothic OTF Bold'; color: #000;}
h3.dot::before{position: absolute; left: 0; top: 7px; background-color: #fff100; width: 15px; height: 15px;border-radius: 50%; display: block ; content: '';}

h4{font-size: 3.6rem; color: #183a9d;font-family: 'NEXON Lv1 Gothic OTF Bold'; position: relative;}
h4 > span.dot-txt{margin-left: 15px; padding-left: 40px; position: relative; font-size: 2.4rem;font-family: 'NEXON Lv1 Gothic OTF Bold'; color: #333;}
h4 > span.dot-txt::before{position: absolute; transform: translateY(-50%); top: 50%; content: ""; width: 25px; height: 5px; background-color: #333; border-radius: 50px; display: block; left: 0;}

h4.box-txt{color: #fff;font-family: 'NEXON Lv1 Gothic OTF Bold'; padding: 1.2rem; font-size: 1.8rem; display: inline-block;}
h4.box-txt.purple{background-color: #8074c3; }

.writer-txt{color: #666; font-size: 1.6rem; padding-left: 30px; background: url(/sabo/share/img/writer_txt_icon.png)no-repeat left 50%; }
.writer-txt.center{background: none; padding-left: 0; text-align: center;}
.writer-txt span{background: url(/sabo/share/img/writer_txt_icon.png)no-repeat left 50%; padding-left: 20px;}

.vetical-bar{background-color: #a0a0a0; height: 4.2rem; width: 1px; margin: 0 auto;}

.img-wrap.with-more-btn{position: relative;}
.img-wrap.with-more-btn a.more-btn{background: #fff url(/sabo/share/img/more-btn.png)no-repeat center;position: absolute;width: 35px; height: 35px;bottom: 5px;right: 5px; display: none; border-radius: 2px;border: 2px solid #555;}

.grey-box{margin-top: 3rem; background-color: #f4f4f4; padding: 40px 50px; line-height: 1.8;}

.shadow-border-box{border: 2px solid; padding: 50px 45px; background-color: #fff;box-shadow: 10px 10px 0 0 rgb(0 0 0 / 10%);}
.shadow-border-box.green-box{border-color:#007e61;}
.shadow-border-box.blue-box{border-color:#1b238d;}

.shadow-border-box .tit span{ color: #fff; border-radius: 50px; padding: 10px 20px 6px 45px; background-repeat: no-repeat; background-position: 10px center; display: inline-block; font-size: 1.9rem;}
.shadow-border-box.green-box .tit span{background-color: #007e61; background-image: url(/sabo/share/img/shadow_border_box_tit_green.png);}
.shadow-border-box.blue-box .tit span{background-color: #1b238d; background-image: url(/sabo/share/img/shadow_border_box_tit_blue.png);}

.shadow-border-box b.bold-colored{font-family: 'NEXON Lv1 Gothic OTF Bold';}
.shadow-border-box.green-box b.bold-colored{color: #007e61}
.shadow-border-box.blue-box b.bold-colored{color: #1b238d}

.dot-list > li{display: flex; align-items: center; margin-top: 10px;}
.dot-list > li:first-child{margin-top:0;}
.dot-list > li > span{margin-right: 1rem; display: inline-block; display: flex; align-items: center; justify-content: center;}



@media (max-width: 1240px){
    h2{margin-top: 80px; font-size: 28px;}
    h2 > div.part-tag { margin-top: 10px;position: static;transform: translateY(0%);}
    h2 > div.part-tag span{background: #f6f6f6 url(/sabo/share/img/h2_parttag_icon.png)no-repeat left 20px top 50%;padding: 10px 25px 8px 50px;    font-size: 15px;}
    h2 > div.sub-tit span{font-size: 22px;}
    .wrapper{margin: auto; padding: 0 20px;}
    .grey-box {padding: 25px 40px;}
    .flex.mid-break{display: block;}
    .flex.col02 > div{width: calc(50% - 10px);}
    .flex.col03 > div{width: calc(33.333% - 10px);}

    h3.dot::before{top: 8px; width: 10px; height: 10px}

    #sub-content{padding: 0 0 110px 0;}
    #sub #sub-banner{height: 400px; margin-left: auto;}
    #sub #sub-banner #sub-tab-container li {width: 170px;height: 65px;}
}

@media (max-width: 768px){

    .wrapper{padding: 0 15px;}
    .flex.col02 > div{width: calc(100% - 0px);}
    .flex.col02 > div:last-child{margin-top: 2rem;}
    .flex.col03 > div{width: calc(50% - 10px);}
    .img-wrap.with-more-btn a.more-btn{display: block;}
    h3.dot{font-size: 18px;}
    h3.dot::before{width: 8px; height: 8px; top: 6px;}
    .writer-txt{font-size: 14px;}

    #sub-content{padding: 0 0 100px 0;}

    #sub #sub-banner{height: 300px;}
    #sub #sub-banner #sub-tab-container{width: 100%;}
    #sub #sub-banner #sub-tab-container li{width: 33.333%; height: 54px;}
    #sub #sub-banner #sub-tab-container ul.col01 li{width: 100%;}
    #sub #sub-banner #sub-tab-container ul.col04 li{width: 25%;}
    #sub #sub-banner #sub-tab-container ul.col02 li{width: 50%;}
    #sub #sub-banner #sub-tab-container li a{font-size: 13px;}

    h2{margin-top: 50px; font-size: 22px;}
    h2 > div.sub-tit span{font-size: 18px;}
    h2 > div.part-tag span{    font-size: 13px;}
    

    p{font-size: 15px; line-height: 1.8;}

    h2 + p {margin-top: 6.5rem;}
    h2 + p br{display: none;}
    h4{font-size:3.8rem ;}
    h4.box-txt{font-size: 16px;}
    h4 > span.dot-txt {margin-left: 0;padding-left: 35px;font-size: 2.4rem;display: block; margin-top: 10px;}

    .grey-box {padding: 25px 20px; font-size: 14px;}

    .shadow-border-box {padding: 30px 20px}
    .shadow-border-box .tit span{font-size: 15px;}
    .dot-list > li{font-size: 14px;}
    .img.desc-box > p.desc{font-size: 14px;}
}

@media (max-width: 480px){
    /* h2 {font-size: 3.2rem;} */
    .wrapper{padding: 0 10px;}

    .flex.col03 > div{width: calc(100% - 0px);}
}