/* ported page css: probability */


    
        a{
        color: #333;
        text-decoration: none; 
        outline: none;   
    }
    a:hover, a:active{
        text-decoration: none; 
        color: #333;  
    }

    @media all and (min-width:0px) and (max-width:999px){
        .probability_text{
            width: 92%;
            height:4rem;
            max-width: 100rem;
            margin:auto;
            margin-top:5rem;

            
            display:flex;
            align-items: center;
            font-size: 2rem;
            
            color:#000;
        }

        
        #desktop_probability{
            display:none;
        }

        #mobile_probability{
            width:92%;
            max-width:100rem;
            margin:auto;
            border:1px solid black;
            border-bottom:none;
            border-right:none;
            margin-top:0.5rem;
            margin-bottom:2rem;
            font-size:1.3rem;
        }

        #mobile_probability .line{
            width:100%;
            display:flex;
            border-bottom:1px solid black
        }

        #mobile_probability .line .setting_probability{
            background:rgb(221,235,248);
            font-size:1.4rem;
            

        }
        #mobile_probability .line .blockchain_probability{
            background:rgb(227,238,221);
            font-size:1.4rem;
            
        }
        #mobile_probability .line .difference{
            background:rgb(254,228,214);
            font-size:1.4rem;
            
        }
        #mobile_probability .line  .ground{
            font-size:1.5rem;
            
        }
        #mobile_probability .line  .ground_x{color:#FFD100}
        #mobile_probability .line  .ground_a{color:#8A3DDC}
        #mobile_probability .line  .ground_b{color:#FF4D4F}
        #mobile_probability .line  .ground_c{color:#00A6E9}
        #mobile_probability .line  .ground_d{color:#22AC38}
        #mobile_probability .line  .ground_e{color:#727171}

        #mobile_probability .line .percent{
            font-size:1.4rem;
        }


        #mobile_probability .line_element{
            width:25%;
            height:3rem;
            display:flex;
            align-items: center;
            justify-content: center;
            border-right:1px solid black;
        }
        #mobile_probability .line_element img{
            width:70%;
        }
        #mobile_probability .top_line{
            height:4rem;
            text-align: center;
        }

        .hashbox_list{
            width:92%;
            display:flex;
            flex-flow: wrap;
            margin:auto;
            margin-top: 7rem;
            margin-bottom: 5rem;
        }
        .hashbox_list .hashbox{
            width:33.3%;
            max-width:20rem;
            position:relative;
            cursor:pointer;
            margin-bottom: 6rem;
        }
        .hashbox_list .hashbox .text{
            position: absolute;
            margin-top: 1rem;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            font-size: 1.4rem;
            text-align: center;
            border-radius: 3rem;
            padding: 0.35rem 0;
            border: 1px solid #ddd;
            color: #969696;
        }
        .hashbox_list .hashbox .text.master.active{
            background-color: #A53836;
            color: white;
        }
        .hashbox_list .hashbox .text.dia.active{
            background-color: #D251D0;
            color: white;
        }
        .hashbox_list .hashbox .text.platinum.active{
            background-color: #589346;
            color: white;
        }
        .hashbox_list .hashbox .text.gold.active{
            background-color: #41385B;
            color: white;
        }
        .hashbox_list .hashbox .text.silver.active{
            background-color: #8F8F8D;
            color: white;
        }
        .hashbox_list .hashbox .text.bronze.active{
            background-color: #917D66;
            color: white;
        }
        .hashbox_list .hashbox .text.event_bronze.active{
            background-color: #917D66;
            color: #fff;
        }
        .hashbox_list .hashbox img{
            position: relative;
            width:100%;
            height:auto;
        }



        .division_probability_text{
            width: 92%;
            height:4rem;
            max-width: 100rem;
            margin:auto;
            display:flex;
            justify-content: space-between;
            margin-top:5rem;
            margin-bottom:1rem;
            border-bottom:1px solid rgb(35,35,35)
        }


        .division_probability_text .box_division{
            
            display:flex;
            align-items: center;
            font-size: 2rem;
            
            color:#000;
        }
        .division_probability_text .joint_probability{
            font-size:1.2rem;
            height:4rem;
            display:flex;
            align-items: center;
            justify-content: center;
        }


        .probability_section{
            width:92%;
            max-width:100rem;
            margin:auto;

        }

        .probability_section .probability_division{
            display:flex;
        }


        .probability_section .probability_division .division_section{
            display:none
        }

        .mobile_division{
            display:block;
            margin-top:2rem;
            margin-bottom:1rem;
        }
        .mobile_division.mobile_division_ground_text{
            font-size:1.5rem;
            
            
        }

        .mobile_division.ground_x_division{color:#FFD100}
        .mobile_division.ground_a_division{color:#8A3DDC}
        .mobile_division.ground_b_division{color:#FF4D4F}
        .mobile_division.ground_c_division{color:#00A6E9}
        .mobile_division.ground_d_division{color:#22AC38}
        .mobile_division.ground_e_division{color:#727171}


        .probability_section .probability_division .element_probability_section{
            width:100%;
            font-size:1.1rem;
            
            border-top:1px solid black;
            border-left:1px solid black;
            border-bottom:none;
            border-right:none;

        }
        .probability_section .probability_division .element_probability_section .product_element{
            width:100%;
            min-height:3rem;
            display:flex;
            justify-content: space-between;
            align-items: center;
            border-bottom:1px solid black;
        }
        .probability_section .probability_division .element_probability_section .product_element .product_name{
            width: 60%;
            min-height:3rem;
            display:flex;
            align-items: center;
            padding-left:0.5rem;
            border-right:1px solid black;

            overflow: hidden;                   /* 넓이 86.66%를 넘는 내용에 대해 말줄임 */
            text-overflow: ellipsis;            /* 보여줄 내용이 길면 내용의 일부만 표여주고 ...표시 */
            white-space: normal;                /*  white-space와 overflow: hidden 제거되면 text-overflow가 적용되지 않음 */
                                                /* 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리*/
            text-align: left;                   /* 텍스트 정렬*/
            word-wrap: break-word;              

            display: -webkit-box;
            -webkit-line-clamp:1;
            -webkit-box-orient:vertical;
            text-align:center;
            line-height:3rem;
            padding: 0 2%;
        }
        .probability_section .probability_division .element_probability_section .product_element .product_price{
            width:25%;
            min-height:3rem;
            display:flex;
            align-items: center;
            justify-content: center;
            border-right:1px solid black;
        }
        .probability_section .probability_division .element_probability_section .product_element .product_probability{
            width:14%;
            min-height:3rem;
            display:flex;
            align-items: center;
            justify-content: center;
            border-right:1px solid black;
        }



    }
    

    @media all and (min-width:1000px){
        .probability_text{
            width: 92%;
            height:4rem;
            max-width: 100rem;
            margin:auto;
            margin-top:10rem;
            display:flex;
            align-items: center;
            font-size: 2.4rem;
            color:black;
        }

        #mobile_probability{
            display:none
        }
        #desktop_probability{
            width:100%;
            max-width:100rem;
            margin:auto;
            border:1px solid black;
            border-bottom:none;
            border-right:none;
            margin-top:1rem;
            margin-bottom:1rem;
        }

        #desktop_probability .line{
            display:flex;
            border-bottom:1px solid black
        }
        #desktop_probability .line .side{
            width:20rem;
            height:3rem;
            display:flex;
            align-items: center;
            justify-content: center;
            border-right:1px solid black;
            font-size:1.4rem;
            color:black;
            
        }
        #desktop_probability .line .setting_probability{
            background:rgb(221,235,248);
        }
        #desktop_probability .line .blockchain_probability{
            background:rgb(227,238,221);
        }
        #desktop_probability .line .difference{
            background:rgb(254,228,214);
        }

        #desktop_probability .line .side img{
            width:10rem;
        }
        #desktop_probability .line .value{
            width:16rem;
            height:3rem;
            display:flex;
            align-items: center;
            justify-content: center;
            border-right:1px solid black;
        }
        #desktop_probability .line .ground{
            font-size:1.5rem;
            
            
        }
        #desktop_probability .line .ground_x{
            color: #FFD100;
        }
        #desktop_probability .line .ground_a{
            color: #8A3DDC;
        }
        #desktop_probability .line .ground_b{
            color: #FF4D4F;
        }
        #desktop_probability .line .ground_c{
            color: #00A6E9;
        }
        #desktop_probability .line .ground_d{
            color: #22AC38;
        }
        #desktop_probability .line .ground_e{
            color: #727171;
        }


        #desktop_probability .line .percent{
            font-size:1.4rem;
            
        }

        .hashbox_list{
            width:100rem;
            display:flex;
            margin:auto;
            margin-top: 5rem;
            margin-bottom: 5rem;
        }
        .hashbox_list .hashbox{
            width:20%;
            position:relative;
            cursor:pointer;
            margin: 1rem;
        }
        .hashbox_list .hashbox .text{
            position: absolute;
            margin-top: 1rem;
            left: 50%;
            transform: translateX(-50%);
            width: 90%;
            font-size: 1.6rem;
            text-align: center;
            border-radius: 3rem;
            padding: 0.2rem 0;
            border: 1px solid #ddd;
            color: #969696;
        }
        .hashbox_list .hashbox .text.master.active{
            background-color: #A53836;
            color: white;
        }
        .hashbox_list .hashbox .text.dia.active{
            background-color: #D251D0;
            color: white;
        }
        .hashbox_list .hashbox .text.platinum.active{
            background-color: #589346;
            color: white;
        }
        .hashbox_list .hashbox .text.gold.active{
            background-color: #41385B;
            color: white;
        }
        .hashbox_list .hashbox .text.silver.active{
            background-color: #8F8F8D;
            color: white;
        }
        .hashbox_list .hashbox .text.bronze.active{
            background-color: #917D66;
            color: white;
        }
        .hashbox_list .hashbox .text.event_bronze.active{
            background-color: #917D66;
            color: #fff;
        }
        .hashbox_list .hashbox img{
            position: relative;
            width:100%;
            height:auto;
        }

        .division_probability_text{
            width: 100%;
            height:5rem;
            max-width: 100rem;
            margin:auto;
            display:flex;
            justify-content: space-between;
            margin-top:10rem;
            border-bottom:1px solid rgb(35,35,35);
            padding-bottom:1rem;
        }

        .division_probability_text .box_division{
            
            display:flex;
            align-items: center;
            font-size: 2.4rem;
            
            color:#000;
        }

        .division_probability_text .joint_probability{
            height:5rem;
            display:flex;
            align-items: center;
            justify-content: center;
            font-size:1.4rem;
            color:black;
        }



        .probability_section{
            width:100%;
            max-width:100rem;
            margin:auto;
            border-left:1px solid black;

        }

        .probability_section .probability_division{
            display:flex;
        }


        .probability_section .probability_division .division_section{
            width:16rem;
            display:flex;
            align-items: center;
            justify-content: center;
            font-size:1.5rem;
            
            border-right:1px solid black;
            border-bottom:1px solid black
        }

        .mobile_division{
            display:none
        }

        .probability_section .probability_division .division_section.X{
            color:#FFD100
        }
        .probability_section .probability_division .division_section.A{
            color:#8A3DDC
        }
        .probability_section .probability_division .division_section.B{
            color:#FF4D4F
        }
        .probability_section .probability_division .division_section.C{
            color:#00A6E9
        }
        .probability_section .probability_division .division_section.D{
            color:#22AC38
        }
        .probability_section .probability_division .division_section.E{
            color:#727171
        }


        .probability_section .probability_division .element_probability_section{
            width:84rem;
            font-size:1.4rem;
            
            border-bottom:none;
            border-right:none;
        }
        .probability_section .probability_division .element_probability_section .product_element{
            width:100%;
            height:3rem;
            display:flex;
            justify-content: space-between;
            align-items: center;
            border-bottom:1px solid black;
            color:black;
        }
        .probability_section .probability_division .element_probability_section .product_element .product_name{
            width:52rem;
            height:3rem;
            display:flex;
            align-items: center;
            padding-left:2rem;
            border-right:1px solid black;

            overflow: hidden;                   /* 넓이 86.66%를 넘는 내용에 대해 말줄임 */
            text-overflow: ellipsis;            /* 보여줄 내용이 길면 내용의 일부만 표여주고 ...표시 */
            white-space: normal;                /*  white-space와 overflow: hidden 제거되면 text-overflow가 적용되지 않음 */
                                                /* 공백문자가 있는 경우 줄바꿈하지 않고 한줄로 나오게 처리*/
            text-align: left;                   /* 텍스트 정렬*/
            word-wrap: break-word;              

            display: -webkit-box;
            -webkit-line-clamp:1;
            -webkit-box-orient:vertical;
            text-align:center;
            line-height:3rem;
        }
        .probability_section .probability_division .element_probability_section .product_element .product_price{
            width:16rem;
            height:3rem;
            display:flex;
            align-items: center;
            justify-content: center;
            border-right:1px solid black;
        }
        .probability_section .probability_division .element_probability_section .product_element .product_probability{
            width:16rem;
            height:3rem;
            display:flex;
            align-items: center;
            justify-content: center;
            border-right:1px solid black;
        }

    }
    

    .temp_explain{
        font-size:1.6rem;
        
        text-align:center;
        margin-top:1rem;

    }

    

    .alert{
        width:92%;
        max-width:100rem;
        margin:auto;
        margin-top:0;
        font-size:1.3rem;
        padding:0;
    }
    .alert .red{
        color:#BF1A20;
    }


    .hashbox_complicated{
        width:100%;
        max-width:100rem;
        /* border:2px solid rgb(245,245,245); */
        margin-bottom:3rem;
        margin:auto;
    }


    
    @media all and (min-width:0px) and (max-width:1260px){
        .hashbox_complicated{
            margin-top: -2rem;
        }
        .hashbox_complicated .complicated_list{
            width:92%;
            margin:auto;
            display:flex;
            flex-flow:wrap;
            justify-content: flex-start;
        }
        .hashbox_complicated .complicated_list .complicated{
            width:18%;
            min-width:8rem;
            margin-right:1rem;
            margin-top:0.5rem;
            margin-bottom:0.5rem;
            height:4rem;
            display:flex;
            align-items: center;
            justify-content: center;
            border:1px solid #EBEBEB;
            border-radius:5px;
            cursor:pointer;
            font-size:1.3rem;
        }
    }
    @media all and (min-width:1260px){
        .hashbox_complicated .complicated_list{
            display:flex;
            flex-flow:wrap;
            padding-top:2rem;
        }
        .hashbox_complicated .complicated_list .complicated{
            width:18%;
            margin-right:1rem;
            height:4rem;
            display:flex;
            align-items: center;
            justify-content: center;
            border:1px solid #EBEBEB;
            border-radius:5px;
            cursor:pointer;
            font-size:1.4rem;
            color:black;
        }
    }

    .complicated_list .complicated.active{
        background:black;
        color:white;
    }

    /* 이벤트 박스는 X/A/B 리스트를 내려주지 않으므로, 이벤트 선택 시
       Ground X/A/B 구획(및 모바일 라벨)을 숨긴다. (일반 박스는 그대로 노출) */
    .probability_section.is-event .probability_division.X,
    .probability_section.is-event .probability_division.A,
    .probability_section.is-event .probability_division.B,
    .probability_section.is-event .mobile_division.ground_x_division,
    .probability_section.is-event .mobile_division.ground_a_division,
    .probability_section.is-event .mobile_division.ground_b_division{
        display: none !important;
    }





    @media all and (min-width:0px) and (max-width:1259px){
        .additional_info{
            width:92%;
            max-width:100rem;
            margin:auto;
            
            font-size:1.2rem;
            margin-top:2rem;

        }
    }

    @media all and (min-width:1260px){
        .additional_info{
            width:100%;
            max-width:100rem;
            margin:auto;
            
            font-size:1.4rem;
            margin-top:2rem;
            color:#969696;
        }
    }