.rule { position: relative; padding-top: 18rem; }
.rule::before { 
    content: "";
    background: url(/assets/images/rule_bg-7a7f6877aae04fd6cd9d65e0f034953c.jpg)no-repeat;
    background-size: cover;
    position: absolute;
    top: -9rem;
    left: 50%;
    width: 384rem;
    height: 192.7rem;
    transform: translateX(-50%);
    background-position: center;
    background-size: cover;
}
.rule_title { position: relative; padding-top: 8rem; margin-bottom: 14rem; }
.rule_title::before {  
    content: "";
    background: url(/assets/images/rule_title_ic-1f75d774c6e52f3a32ed63b615334584.svg)no-repeat;
    background-size: contain;
    position: absolute;
    top: 0;
    left: 0;
    width: 4.6rem;
    height: 2rem;    
}
.rule_title h2 {  
    color: #111;
    font-size: 5.6rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -0.056rem;
}
.rule_title p {  
    margin-top: 2.2rem;
    color: #999;
    font-size: 2.4rem;
    font-weight: 600;
    line-height: 1; 
    letter-spacing: -0.024rem;
}
.rule_wrap .content .flex { 
    flex-wrap: nowrap; 
    align-items: flex-start; 
    margin-bottom: 8rem;
    padding-bottom: 8rem;
    border-bottom: 1px solid #EDEDED;
}
.rule_wrap .content .flex:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.rule_wrap .content .flex strong { 
    display: block; 
    width: 28.9rem;
    color: #111;
    font-size: 2.8rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: -0.028rem;
}
.rule_wrap .content .flex .inner { 
    width: calc(100% - 28.9rem); 
    padding-left: 11.6rem;
}
.rule_wrap .content .flex .inner h3:not(:first-child) { margin-top: 3rem; }
.rule_wrap .content .flex .inner h3 {  
    margin-bottom: 1.6rem;
    color: #111;
    font-size: 2.2rem;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -0.022rem;
}
.rule_wrap .content .flex .inner h3 span { padding-right: .4rem; }
.rule_wrap .content .flex .inner p {  
    padding-left: 2.3rem;
    color: #111;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.6; 
    letter-spacing: -0.017rem;
}
.rule_wrap .content .flex .inner li {  
    color: #111;
    font-size: 1.7rem;
    font-weight: 400;
    line-height: 1.6;
    letter-spacing: -0.17px;
}
.rule_wrap .content .flex .inner ol { margin-left: 2.3rem; margin-top: 1.6rem; }  
.rule_wrap .content .flex .inner ol>li { position: relative; padding-left: 2.5rem; margin-bottom: 1.6rem; }
.rule_wrap .content .flex .inner ol.dash_num>li { padding-left: 4.1rem; }
.rule_wrap .content .flex .inner ol>li span { display: block; position: absolute; left: 0; line-height: 1.6; }
.rule_wrap .content .flex .inner ol>li:last-child { margin-bottom: 0; }
.rule_wrap .content .flex .inner .dot_list { margin-top: 1rem; padding-left: 1rem; }
.rule_wrap .content .flex .inner .dot_list>li { position: relative; margin-bottom: .8rem; padding-left: 1rem; }
.rule_wrap .content .flex .inner .dot_list>li::before { 
    content: "·"; 
    padding-right: .6rem; 
    position: absolute;
    top: 0;
    left: 0;
    line-height: 1.6; 
}
.rule_wrap .content .flex .inner .dot_list>li:last-child { margin-bottom: 0; }

@media (max-width: 1180px) {
    .rule { padding-top: calc(100vw * (100 / 1180)); }
    .rule::before { 
        background: url(/assets/images/rule_bg_tab-2691e7c0289c7ac301036f92e29850cd.jpg)no-repeat;
        top: calc(100vw * (-120 / 1180));
        width: calc(100vw * (1180 / 1180));
        height: calc(100vw * (937 / 1180));       
        background-size: cover;
    }
    .rule_title { padding-top: calc(100vw * (80 / 1180)); margin-bottom: calc(100vw * (160 / 1180)); }
    .rule_title::before { width: calc(100vw * (46 / 1180)); height: calc(100vw * (20 / 1180)); }
    .rule_title h2 { font-size: calc(100vw * (56 / 1180)); letter-spacing: calc(100vw * (-0.56 / 1180)); }
    .rule_title p {  
        margin-top: calc(100vw * (22 / 1180));        
        font-size: calc(100vw * (24 / 1180));
        letter-spacing: calc(100vw * (-0.24 / 1180));
    }
    .rule_wrap .content .flex { 
        display: block;
        margin-bottom: calc(100vw * (80 / 1180));
        padding-bottom: calc(100vw * (80 / 1180));
    }
    .rule_wrap .content .flex strong {        
        width: 100%;
        margin-bottom: calc(100vw * (46 / 1180));
        font-size: calc(100vw * (28 / 1180));
        letter-spacing: calc(100vw * (-0.28 / 1180));
    }
    .rule_wrap .content .flex strong br { display: none; }
    .rule_wrap .content .flex .inner { 
        width: 100%; 
        padding-left: 0;
    }
    .rule_wrap .content .flex .inner h3:not(:first-child) { margin-top: calc(100vw * (30 / 1180)); }
    .rule_wrap .content .flex .inner h3 {  
        margin-bottom: calc(100vw * (16 / 1180));
        font-size: calc(100vw * (22 / 1180));
        letter-spacing: calc(100vw * (-0.22 / 1180));
    }
    .rule_wrap .content .flex .inner h3 span { padding-right: calc(100vw * (4 / 1180)); }
    .rule_wrap .content .flex .inner p {  
        padding-left: calc(100vw * (23 / 1180));
        font-size: calc(100vw * (17 / 1180));
        letter-spacing: calc(100vw * (-0.17 / 1180));
    }
    .rule_wrap .content .flex .inner li {  
        font-size: calc(100vw * (17 / 1180));
        letter-spacing: calc(100vw * (-0.17 / 1180));
    }
    .rule_wrap .content .flex .inner ol { margin-left: calc(100vw * (23 / 1180)); margin-top: calc(100vw * (16 / 1180)); } 
    .rule_wrap .content .flex .inner ol>li { padding-left: calc(100vw * (23 / 1180)); margin-bottom: calc(100vw * (16 / 1180)); }
    .rule_wrap .content .flex .inner ol.dash_num>li { padding-left: calc(100vw * (41 / 1180)); }
    .rule_wrap .content .flex .inner .dot_list { margin-top: calc(100vw * (10 / 1180)); padding-left: calc(100vw * (10 / 1180)); }
    .rule_wrap .content .flex .inner .dot_list>li { margin-bottom: calc(100vw * (8 / 1180)); padding-left: calc(100vw * (10 / 1180)); }
    .rule_wrap .content .flex .inner .dot_list>li::before { padding-right: calc(100vw * (6 / 1180)); }
       
}
@media (max-width: 767px) {
    .rule { padding-top: calc(100vw * (40 / 767)); }
    .rule::before { 
        background: url(/assets/images/rule_bg_m-4bd94ca9eee586aabe49216cccce1e11.jpg)no-repeat;
        top: calc(100vw * (-160 / 767));
        width: calc(100vw * (750 / 750));
        height: calc(100vw * (870 / 750)); 
        background-size: cover;      
    }
    .rule_title { padding-top: calc(100vw * (80 / 767)); margin-bottom: calc(100vw * (60 / 767)); }
    .rule_title::before { width: calc(100vw * (46 / 767)); height: calc(100vw * (20 / 767)); }
    .rule_title h2 { font-size: calc(100vw * (50 / 767)); letter-spacing: calc(100vw * (-0.5 / 767)); }
    .rule_title p {  
        margin-top: calc(100vw * (22 / 767));        
        font-size: calc(100vw * (24 / 767));
        letter-spacing: calc(100vw * (-0.24 / 767));
    }
    .rule_wrap .content .flex { 
        margin-bottom: calc(100vw * (120 / 767));
        padding-bottom: calc(100vw * (120 / 767));
    }
    .rule_wrap .content .flex strong {        
        margin-bottom: calc(100vw * (66 / 767));
        font-size: calc(100vw * (36 / 767));
        letter-spacing: calc(100vw * (-0.36 / 767));
    }
    .rule_wrap .content .flex .inner h3:not(:first-child) { margin-top: calc(100vw * (60 / 767)); }
    .rule_wrap .content .flex .inner h3 {  
        margin-bottom: calc(100vw * (22 / 767));
        font-size: calc(100vw * (30 / 767));
        letter-spacing: calc(100vw * (-0.3 / 767));
    }
    .rule_wrap .content .flex .inner h3 span { padding-right: calc(100vw * (4 / 767)); }
    .rule_wrap .content .flex .inner p {  
        padding-left: calc(100vw * (21 / 767));
        font-size: calc(100vw * (26 / 767));
        letter-spacing: calc(100vw * (-0.26 / 767));
    }
    .rule_wrap .content .flex .inner li {  
        font-size: calc(100vw * (26 / 767));
        letter-spacing: calc(100vw * (-0.26 / 767));
    }
    .rule_wrap .content .flex .inner ol { margin-left: calc(100vw * (23 / 767)); margin-top: calc(100vw * (22 / 767)); } 
    .rule_wrap .content .flex .inner ol>li { padding-left: calc(100vw * (35 / 767)); margin-bottom: calc(100vw * (22 / 767)); }
    .rule_wrap .content .flex .inner ol.dash_num>li { padding-left: calc(100vw * (65 / 767)); }
    .rule_wrap .content .flex .inner .dot_list { margin-top: calc(100vw * (22 / 767)); padding-left: calc(100vw * (6 / 767)); }
    .rule_wrap .content .flex .inner .dot_list>li { margin-bottom: calc(100vw * (8 / 767)); padding-left: calc(100vw * (16 / 767)); }
    .rule_wrap .content .flex .inner .dot_list>li::before { padding-right: 0; }
}