@charset "UTF-8";

main{ position: relative;}

/**********************************************/
/* === 1st Section === */

#sec_01{
    display: flex; flex-flow: column nowrap; justify-content: center; align-items: center; 
background: no-repeat bottom/cover url(/static/html/img/user/sub/powders_sec_01.jpg); }
#sec_01.chn{
background: no-repeat bottom/cover url(/static/html/img/user/sub/powders_sec_01_chn.jpg); }

/**********************************************/
/* === 2nd Section === */
#sec_02 .wrap{display:flex; flex-direction: column;}

#sec_02 .top{
    display:flex;
    align-items: center; 
}

#sec_02 .top button{
    width: 100px;
    height: 36px;
    color: #FFFFFF;
    background: #232323;
    border-radius: 3px;
    margin-left: 25px;
    margin-right: 8px;
}

#sec_02 .middle .wrap_ul{
    border: 1.5px solid #828282;
    box-shadow: 0px 4px 4px rgba(167, 167, 167, 0.25);
    border-radius: 40px;
}

#sec_02 .middle .wrap_ul ul{
    width: 100%;
    display: flex;
    align-items: center;
}

#sec_02 .middle .wrap_ul ul:nth-of-type(1){
    margin-top: 10px;
    margin-bottom: 20px;
}

#sec_02 .middle .wrap_ul ul:nth-of-type(n+2){
    margin-bottom: 25px;
}

#sec_02 .middle > .wrap_ul ul li{
    display:flex;
    justify-content: center;
    align-items: center;
    width: 14.2%;
    height: 42px;
    text-align: center;
}

#sec_02 .middle ul li:nth-of-type(1){width: 25%;}
#sec_02 .middle ul li:nth-of-type(2){width: 20%;}
#sec_02 .middle ul li:nth-of-type(3){width: 20%;}
#sec_02 .middle ul li:nth-of-type(4){width: 20%;}
#sec_02 .middle ul li:nth-of-type(5){width: 20%;}
#sec_02 .middle ul li:nth-of-type(6){width: 20%;}

#sec_02 .middle ul li:nth-of-type(2) select{width: 90%;}

#sec_02 .middle ul li:nth-of-type(5) button{
    background-color:#FFDD63;
    border: 0;
}
#sec_02 .middle ul li:nth-of-type(5) button:last-child{
    display: none;

}
#sec_02 .middle ul li:nth-of-type(6) button{
    background: #4472C4;
    color: #FFFFFF;
}

#sec_02 .middle ul li button{
    border: 1.5px solid #4472C4;
    border-radius: 11px;
    width: 70%;
    height: 42px;
}

#sec_02 .middle ul li input[type="number"]{
    border: 1.5px solid #4472C4;
    border-radius: 11px;
    text-align: center;
    width: 70%;
    height: 42px;
}

#sec_02 .middle p:nth-of-type(1){
    color:#4A4A4A;
    margin-top: 20px;
    display: block;
}
#sec_02 .middle p:nth-of-type(2){
    color:#4A4A4A;
    margin-top: 10px;
    display: block;
}

#sec_02 .middle ul li .info{
    padding: 2px;
}

#sec_02 .middle .wrap_ul ul:nth-of-type(1) :is(li:nth-of-type(4),li:nth-of-type(5)){
    position: relative;
}

#sec_02 .middle .info + span{
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 2px 2px 10px rgba(157, 157, 157, 0.25);
    border: 2px solid rgba(227, 227, 227, 0.7);
    border-radius: 18px;
    padding: 30px 10px;
    position: absolute;
    top: -90px;
    left: 50%;
    font-size: 13px;
    z-index: 9;
    white-space: nowrap;
    display: none;
  }

  #sec_02 .middle .info:nth-of-type(2) + span{
    top: -90px;
  }

  #sec_02 .middle .info:hover + span{
    display: block;
  }

#sec_02 .bottom{
    margin-top: 80px;
}

#sec_02 .bottom .wrap_ul{
    border: 1.5px solid #828282;
    box-shadow: 0px 4px 4px rgba(167, 167, 167, 0.25);
    border-radius: 20px;
    margin: 0 10px;
    min-height: 124px;
}

#sec_02 .bottom .wrap_ul ul{
    width: 100%;
    display: flex;
    align-items: center;
    height: 50px;
}

#sec_02 .bottom .wrap_ul ul:nth-of-type(1){
    height: 62px;
    background-color: #232323;
    border-radius: 20px 20px 0 0;
    margin-bottom: 20px;
}

#sec_02 .bottom .wrap_ul ul:nth-last-of-type(1){
    margin-bottom: 20px;
}

#sec_02 .bottom .wrap_ul ul:nth-of-type(1) li{
    color: #FFFFFF;
}

#sec_02 .bottom > .wrap_ul ul li{
    display:flex;
    justify-content: center;
    align-items: center;
    width: 14.2%;
    height: 100%;
    text-align: center;
}

#sec_02 .bottom .wrap_ul ul:nth-of-type(n+2) li{
    border-right: 1px solid #E3E3E3;
}

#sec_02 .bottom ul li:nth-of-type(1){width: 20%;}
#sec_02 .bottom ul li:nth-of-type(2){width: 20%;}
#sec_02 .bottom ul li:nth-of-type(3){width: 20%;}
#sec_02 .bottom ul li:nth-of-type(4){width: 20%;}
#sec_02 .bottom ul li:nth-of-type(5){width: 30%;}
#sec_02 .bottom ul li:nth-of-type(6){width: 30%;}

#sec_02 .bottom ul li:nth-of-type(6) button{
    width: 90%;
    max-width: 136px;
    height: 40px;
    background: #E64747;
    color: #FFFFFF;
    border-radius: 11px;
}

#sec_02 .bottom .purchase_request{
    width: 245px;
    height: 50px;
    background:#FFEBA4;
    border-radius: 11px;
    display: block;
    margin: 0 auto;
    margin-top: 40px;
}


/**********************************************/
/* === 3rd Section === */
#sec_03 ul{ border-top: 8px solid  #373737;}
#sec_03 li{ width: 100%; }
#sec_03 li button{
    position: relative; flex-flow: row wrap;
    border: 1px solid rgba(205, 205, 205, 0.7);
}
#sec_03 li:nth-of-type(2n-1) button{ background-color: #F9F9F9; }

#sec_03 li button:before{
    position: absolute;
    display: inline-block; background: #E1E1E1; border-radius: 50%;
    content: 'Q'; text-align: center;
}
#sec_03 li button p{ flex: 1; padding-right: 12px; text-align: left; color: #1A1A1A; font-weight: 500; }

#sec_03 li button:after{
    width: 28px; height: 16px; background: no-repeat url('/html/img/user/sub/ico_detail2.svg') center;
}
#sec_03 li button span{
    width: 100%; margin-top: 2px;
    text-align: left; color: rgba(26, 26, 26, 0.4); font-weight: 700; font-size: 1rem;
}
#sec_03 li button +  pre{ display: none; }
#sec_03 li button.active +  pre{ display: block; }
#sec_03 li > pre{
    position: relative;
    border: 1px solid rgba(205, 205, 205, 0.7); border-top: none; background: #FFFCF3;
    font-weight: 700; color: rgba(26, 26, 26, 0.8); white-space: pre-line;
    transition: .3s ease-in; transition-delay: .2s;
}
#sec_03 li > pre img{ max-width: 100%;}
#sec_03 li > pre p{ word-break: break-all;}
/**********************************************/
/* ========================== responsive */
@media screen and (min-width: 1025px){
    /* === nav_side === */
    #nav_side{ height: 35.64vw; max-height: 532px; min-height: 485px; }
    #nav_side.active{top: 32vh;}
    #btn_top, #btn_bottom{ height: 102px; padding: 26px 0; }

    /* === 1st Section === */
    #sec_01{   height: 450px;}
    /* === 2nd Section === */
    #sec_02 .top{
        margin-top: 60px;
        margin-bottom: 38px;
    }

    /* === 3rd Section === */
    /* #sec_03{ padding: 112px 0 120px;} */
    #sec_03{ padding: 120px 0;}
    /* #sec_03 h2{ margin-bottom: 90px;} */
    #sec_03 h2{ margin-bottom: 34px;}

    #sec_03 li button{ padding: 23px 52px 23px 82px; }
    #sec_03 li button:before{ top: 24px; left: 36px; width: 32px; line-height: 32px; }
    #sec_03 li button p{ font-size: 1.375rem; }

    #sec_03 li > pre{ padding: 48px 104px 75px; font-size: 1.25rem; line-height: 2rem;}

    #sec_03 .pagenate{ margin-top: 52px; }
}
/* ========================== */
@media screen and (max-width: 1600px){
    /* === 2nd Section === */

}
@media screen and (max-width: 1024px){
    #sec_01{
    background:no-repeat center/cover url(/html/img/user/sub/powders_sec_01_m.jpg);
    height: 100%;
}
    #sec_01.chn{
    background: no-repeat center/cover url(/html/img/user/sub/powders_sec_01_chn_m.jpg); }

    /* === 1st Section === */
    #sec_01{ height: 350px;}

    /* === 2nd Section === */

    #sec_02 .top{
        flex-wrap: wrap;
        width: 90%;
        margin: 0 auto;
        margin-top: 30px;
        margin-bottom: 15px;
    }

    #sec_02 .middle .wrap_ul{
        margin: 0 10px;
    }
    
    #sec_02 .middle .wrap_ul ul:nth-of-type(1){
        margin-top: 20px;
        margin-bottom: 10px;
    }

    #sec_02 .top button{
        margin-left: 0;
    }
    section h2{
        width: 100%;
        margin-bottom: 10px;
    }

    #sec_02 .middle ul:nth-of-type(n+2) li:nth-of-type(1) span.mobile{text-decoration: underline; cursor: pointer;}

    #sec_02 .middle ul li:nth-of-type(3){display:none;}

    #sec_02 .middle ul li .info{
        width: 10px;
    }


    #sec_02 .bottom{margin-top: 20px;}
    
    #sec_02 .bottom ul li:nth-of-type(7) button{
        width: 100%;
        height: 35px;
    }

    #sec_02 .middle ul li button{
        width: 90%;
    }

    #sec_02 .middle ul li:nth-of-type(2) select{
        width: 100%;
    }

    #sec_02 .middle ul li .info{padding: 0;}
    #sec_02 .middle .info + span{font-size: 11px; left:-4px; top:-77px;}
    #sec_02 .middle li:nth-of-type(5) .info + span{
        top:-65px;
        left:-70px;
    }
   
    #sec_02 .middle ul li:nth-of-type(2), #sec_02 .middle ul li:nth-of-type(4){
        letter-spacing: -1px;
    }

    #sec_02 .btn_quote + input{
        font-size: 13px;
    }
    
    /* === 3rd Section === */
    #sec_03{ padding: 94px 50px 60px; }
    #sec_03 h2{ margin-bottom: 50px;}

    #sec_03 li{ margin-bottom: 10px;}
    #sec_03 li button{ padding: 15px 12px 18px 48px; }
    #sec_03 li button:before{ left: 14px; top: 15px; width: 26px; line-height: 26px;}
    #sec_03 li button p{font-size: 1.33rem;}
    #sec_03 li button:after{ width: 20px; height: 20px;}

    #sec_03 li > pre{ padding: 24px 42px;}
    #sec_03 .pagenate{ margin-top: 30px; }
}
@media screen and (max-width: 768px){
    /* === 2nd Section === */

}
@media screen and (max-width: 560px){
    /* === 2nd Section === */


    /* === 3rd Section === */
    #sec_03{ padding: 94px 20px 60px; }
    #sec_03 li > pre{ padding: 18px 36px;}
    #sec_03 li button:after{ width: 15px; height: 15px;}
}
@media screen and (max-width: 375px){
    /* === 2nd Section === */

}
@media screen and (max-width: 320px){
    /* === 2nd Section === */


    /* === 3rd Section === */
    #sec_03{ padding: 64px 15px 40px; }
}


#sec_03 li button span{
    display:none;
}


#btn_reset{display: none;width: 80px;height: 40px;/* margin: 0; */border-radius: 3px;border: 2px solid #E3E3E3;color: #1A1A1A;font-size: 13px;margin-right: 30px;margin-top: 10px;margin-left: auto;margin-right: 20px;border-radius: 20px;}
#btn_reset.active{ display: block;}