@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+TC:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+SC&display=swap');

:root {
    --scroll-bar-size: 10px;
    --scroll-bar-thumb-background-color: rgba(0, 0, 0, 0.2);
    --scroll-bar-thumb-background-color-active: rgba(0, 0, 0, 0.5);
}
html{font-size: 10px;}
body { 
	font-family:Arial,'Noto Sans TC','微軟正黑體', 'Microsoft JhengHei', sans-serif;
	font-size: 10px;
	color:#fff;
	background: #efefef;
    line-height: 1.25em;
    font-weight: 400;
	-webkit-text-size-adjust: 100%; 
    height: 100%;
}

@media screen and (max-width: 1600px) {
    html,body{
        font-size: .625vw;
    }
}


@media screen and (max-width: 990px) {
    html,body{
        font-size: 7px;
    }
}

@media screen and (max-width: 640px) {
    html,body{
        font-size: 1vw;
    }
}



.btn{cursor: pointer;}
:root{
	--clr-red:#ca2420;
	--clr-yellow:#f89829;
	--clr-yellow2:#f7b048;
	--clr-blue:#00539b;
	--clr-gray:#6c6c6c;
}
.c-white{color: #fff;}
.c-red{color: #ca2420;}
.c-yellow{color: #f89829;}
.c-yellow2{color: #f7b048;}
.c-blue { color:#00539b; }
.c-gray {color: #6c6c6c;}
.fw-bold { font-weight:bold; }

.fs-s { font-size:0.875rem; }
.fs-b { font-size:1.75rem; }
.fs-l { font-size:2rem; }

.l-h12 { line-height: 1.2em; }
.l-h14 { line-height: 1.4em; }
.l-h16 { line-height: 1.6em; }
.l-h18 { line-height: 1.8em; }
.l-s-01 { letter-spacing:-0.1px; }
.l-s-02 { letter-spacing:-0.2px; }
.l-s-03 { letter-spacing:-0.3px; }
.l-s-04 { letter-spacing:-0.4px; }
.l-s-05 { letter-spacing:-0.5px; }
.l-s-1 { letter-spacing:-1px; }
.l-s-2 { letter-spacing:-2px; }
.l-s-3 { letter-spacing:-3px; }
.l-s-4 { letter-spacing:-4px; }
.l-s1 { letter-spacing:1px; }
.l-s-em-05 { letter-spacing:0.05em; }
.l-s-em-05 { letter-spacing:0.06em; }
.v-a-t { vertical-align:top; }
.t-justify { text-align: justify; text-justify: distribute; }
.m-b100 { margin-bottom:100px!important; }
.m-b90 { margin-bottom:90px!important; }
.m-b80 { margin-bottom:80px!important; }
.m-b70 { margin-bottom:70px!important; }
.m-b65 { margin-bottom:65px!important; }
.m-b60 { margin-bottom:60px!important; }
.m-b50 { margin-bottom:50px!important; }
.m-b40 { margin-bottom:40px!important; }
.m-b45 { margin-bottom:45px!important; }
.m-b35 { margin-bottom:35px!important; }
.m-b30 { margin-bottom:30px!important; }
.m-b25 { margin-bottom:25px!important; }
.m-b20 { margin-bottom:20px!important; }
.m-b15 { margin-bottom:15px!important; }
.m-b10 { margin-bottom:10px!important; }
.m-b5 { margin-bottom:5px!important; }
.m-t60 { margin-top:60px!important; }
.m-l5{ margin-left:5px; }
.m-l10{ margin-left:10px; }
.m-r5{ margin-right:5px; }
.m-r10{ margin-right:10px; }
.m-auto { margin:0 auto; }
.t-a-c { text-align:center!important; }
.t-a-r { text-align:right!important; }
.t-a-l { text-align:left!important; }
.d-table { display:table; }
.u-s-non { user-select: none; }

.row-l { display:flex; flex-direction:row; }
.row-r { display:flex; flex-direction:row-reverse; }
.flex-start{ justify-content:flex-start; }
.flex-end{ justify-content:flex-end; }
.center{ justify-content:center; }
.space-between{ justify-content:space-between; }
.space-around{ justify-content:space-around; }
.t-c{text-align: center;}
.t-d-u{
	text-decoration: underline;
}
nav a { user-select: none; }

.pc{ display:initial; }
.mb{display:none;}



.nonscroll {
    position: static;
    overflow-y: hidden;
    overflow: hidden;
}

/*header*/

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

}
@media screen and (max-width: 900px) {
    .menu nav>ul>li>a{
        padding: 0 .5em;
    }
}
@media screen and (max-width: 800px) {
    .pc{ display:none; }
    .mb{display:initial;}
}

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

    /*html,body{font-size: 8px;}*/
    
    .m-b50 { margin-bottom:3.125rem!important; }
    .m-b40 { margin-bottom:2.5rem!important; }
    .m-b45 { margin-bottom:2.8125rem!important; }
    .m-b35 { margin-bottom:2.1875rem!important; }
    .m-b30 { margin-bottom:1.875rem!important; }
    .m-b25 { margin-bottom:1.5625rem!important; }
    .m-b20 { margin-bottom:1.25rem!important; }
    .m-b15 { margin-bottom:0.9375rem!important; }
    .m-b10 { margin-bottom:0.625rem!important; }
    .m-b5 { margin-bottom:0.3125rem!important; }
    .m-t60 { margin-top:3.75rem!important; }

}

@media screen and (max-width: 375px) {
    /*html,body{font-size: 12px;}*/
}


h2{font-size: 32px;text-align: center;line-height: 1em;margin-bottom: .5em;font-weight: bold;}

.calculator h2{color:#EFAC26 }
.temozolomide h2{color:#C95050 }
section{
    height: 100%;
	padding: 50px 0 50px 0;
    overflow: hidden;
    position: relative;
}
.container{
    width: 100%;max-width: 1280px;
    margin:0 auto;
}
.con{
	width: 1450px;
    max-width: 100%;
	position: relative;
	margin:0 auto;
	padding: 0 25px;
}


select, input {
    width: 100%;
    height: 100%;
    color: #fff;
    font-size: 20px;
    border-radius: 0px;
    
    border-width: initial;
    border-style: none;
    border-color: initial;
    border-image: initial;
    outline: none;
}
small{font-size: .5em;vertical-align: super;}

/*calculator*/

.calculator .input-box{
    font-size: 21px;
    color: #000;
    background: #F4D76E;
    display: flex;
    justify-content: center;align-items: center;
    width: 500px;
    height: 45px;
    margin:0 auto;
    border-radius: 10px;
    box-shadow: 2px 2px 0px 0px #F1C868;
}
.calculator .input-box input{width: 80px;height: 30px;margin:0 .5em;color: #000;text-align: center;}
.tip{color:#000;text-align: center;font-size: 14px;width: 100%;display: block;line-height: 2em;margin:.5em 0;}

.result{
    height: 58px;
    border-radius: 29px;
    background: #FFF5D9;
    width: fit-content;
    padding-right: 1.5em;
    margin:0 auto;
    font-size: 21px;
    color: #000;
    display: flex;align-items: center;
    font-weight: bold;
}
.bsa-button{
    background: rgba(244, 215, 110, 1);
    width: 156px;
    height: 58px;
    border-radius: 29px;
    position: relative;
    box-shadow: 3px 3px 0px 0px rgba(241, 200, 104, 1);
    top: -2px;
    font-size: 21px;
    margin-right: 1em;
    cursor: pointer;
    line-height: 58px;
    padding-left: 38px;
}
.bsa-button i{
    position: absolute;
    display: block;
    background: #fff;
    border-radius: 50%;
    width: 47px;
    height: 47px;
    right: 5px;
    top: 5px;
    display: flex;
    justify-content: center;align-items: center;
}

/*temozolomide*/

.temo-list{display: flex;justify-content: center;align-items: center;}

.temo-box{
    width: 33.333%;
    background: #FFEEC5;
    height: 655px;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding-top: 36px;
}

.temo-box:nth-child(even){
    background: #FFF5D9;
}


.temo-box h3{
    background: #C95050;
    box-shadow: 3px 3px 0px 0px #A34343;
    font-size: 21px;
    line-height: 2.2em;
    font-weight: bold;
    padding: 0 1.5em 0 5px;
    border-radius: 22px;
    display: flex;
    justify-content: center;align-items: center;
    margin-bottom: 30px;
}
.temo-box h3 i{
    font-size: 29px;
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 18px;
    color:  #C95050;
    box-shadow: 2px 2px 0px 0px #DCDDDD;
    display: flex;
    justify-content: center;align-items: center;
    margin-right: .5em;
}
.temo-box2 h3 i,.temo-box3 h3 i{
    font-size: 20px;
}
.temo-detail{
    display: flex;flex-direction: column;align-items: center;
    font-size: 21px;
    color: #000;
    font-weight: 300;
    line-height: 1em;
    margin-bottom: .5em;
}
.temo-detail label{
    color: #C95050;
    font-weight: bold;
    margin-bottom: .5em;
}
.temo-detail p,.total-con p{
    margin-bottom: .75em;
}

.temo-detail p span,.check-box span,.result span,.total-con span{
    border-bottom: 1px solid #000;
    padding: 0 .5em;
    min-width: 2em;
    display: inline-block;
    text-align: center;
    line-height: 1.25em;
}
.temo-detail p span,.result span{
    color: #C95050;
}
.check-box span,.total-con span{border-bottom-color: #fff;}
#cycles4{
    width: 2em;
    background: transparent;
    border-bottom:1px solid #fff;
    text-align: center;
}

.check-box{
    background: #64B8C8;
    font-size: 21px;
    font-weight: 300;
    padding: .5em;
    line-height: 1.5em;
}
input[type=checkbox]{
    width: 20px;height: 20px;
    border:none;
    outline:none;

}
.check-box-row{
    width: 100%;
    display: flex;
    justify-content: flex-start;align-items: center;
    
}
.temo-box3 .check-box-row{
    margin:.25em 0;
}
.top-btn{
    width: 128px;
    height: 47px;
    flex-shrink: 0;
    position: relative;
    margin: 50px auto;
    cursor: pointer;
}

.top-btn p{
    color: #FFF;
    font-size: 14px;
    position: absolute;
    line-height: 47px;
    margin-left: 1em;
    font-weight: 400;
}

.btn-top-arrow{
    width: 36px;
    height: 36px;
    background: #fff;
    border-radius: 18px;
    position: absolute;
    top: 4px;
    right: 8px;
    display: flex;
    justify-content: center;align-items: center;
}

.total-area{
    background: #C95050;
    width: 500px;
    height: 170px;
    margin:50px auto;
    display: flex;
    justify-content: center;align-items: center;
    box-shadow: 3px 3px 0px 0px #A34343;
    border-radius: 15px;
}
.total-area > div{margin:0 40px;}

.total-con{
    font-size: 21px;
    color: #fff;
    line-height: 1.25em;
    text-align: center;
}

.total-con .check-box{background: none;padding-top: 0;padding-bottom: 1em;}

.total-con p:last-child{margin-bottom: 0;}
footer {
	padding: 1rem 0; 
	background-color:#F4D76E;
	line-height: 1.25em;
	z-index: 1;
	/*font-weight: bold;*/
	position: relative; 
	margin: 0 auto;
    color: #A38F4D;
    font-family: Inter;
    font-size: 12px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
	/*border-top: 8px solid #ca2420;*/
}
footer>div { width:930px;  margin: auto; }

footer p{font-size: 18px;color: #fff;line-height: 1.5em;color: #707070;}
footer p span{font-size: 12px;display: block;color: #AEAEAE}
.footer-logo{
    width: 15rem;
    margin: 2rem auto;
}
.footer-logo img{width: 100%;}
footer .footer-copyright{text-align: center;width: 100%;padding: 1em;line-height: 1em;color: #fff;letter-spacing: .125em;}

.fixed-btns{

    position: absolute;
    right: 0;
    top: 10%;
    display: flex;
    flex-direction: column;
    z-index: 3;

}
.fixed-btns a{
    margin:8px 0;
    color: #FFF;
    font-size: 16px;
    font-weight: 400;
    display: flex;
    justify-content: center;align-items: center;
    padding: 5px;
    border-radius: 25px 0 0 25px;padding-right: 2em;
}
.fixed-btns a i{
    width: 40px;
    height: 40px;
    border-radius: 20px;
    background: #fff;
    display: flex;
    justify-content: center;align-items: center;
}
.fixed-btns a span{
    width: 11em;display: block;margin-left: .5em;line-height: 1.25em;
    text-shadow: 3px 3px 3px rgba(0, 0, 0, 0.75);
}
/*.fixed-btns a:nth-child(1){background:#7EBDDE; box-shadow: 3px 3px 0px 0px #68A5BE}*/
.fixed-btns a:nth-child(1){background:#F1C868; box-shadow: 3px 3px 0px 0px #D8B25F}
.fixed-btns a:nth-child(2){background:#689C6F; box-shadow: 3px 3px 0px 0px #57815C}


@media screen and (max-width: 1100px) {
    .temo-list{flex-direction: column;}
    .temo-box{width: 100%;height: auto;padding-bottom: 36px;}
    .fixed-btns{position: relative;margin-top: 50px;width: 100%;display: flex;flex-direction: column;justify-content: center;align-items: center;}
    .fixed-btns a{width: fit-content;}
}
@media screen and (max-width: 768px) {
    footer{padding: 1em;}
    footer .container{}
}

@media screen and (max-width: 750px) {
    .calculator .input-box p{width: 100%;line-height: 1.5em;text-align: center;margin:.5em 0;}
    .calculator .input-box{height: auto;width: calc(100% - 30px);flex-direction: column;}
    section{padding: 25px 0;}
    h2{font-size: 24px;}
    .bsa-button,.result,select, input,.temo-detail,.calculator .input-box,.check-box,.total-con{font-size: 18px;}
    input[type=checkbox]{width: 18px;height: 18px;}
    .result{
        height: calc(58px * 18 / 21);
        border-radius: calc(29px * 18 / 21);
        width: calc(387px * 18 / 21);
    }
    .bsa-button{
        width: calc(156px * 18 / 21);
        height: calc(58px * 18 / 21);
        border-radius: calc(29px * 18 / 21);
        line-height: calc(58px * 18 / 21);
        padding-left: calc(38px * 18 / 21);
    }
    .bsa-button i{
        width: calc(47px * 18 / 21);
        height: calc(47px * 18 / 21);
        right: 4px;
        top: 4px;
    }
    .bsa-button i svg{
        width: 16px;
    }
    .total-area{width: calc(100% - 30px);margin:25px auto;}
    .total-area > div{margin: 0 15px;}
    .total-area i{width: 32px;}
    .total-area i svg{width: 100%;}
    .top-btn{margin: 25px auto;}
    footer p{font-size: 14px;}

}
@media screen and (max-width: 375px) {
    h2{font-size: 22px;}
    .total-area i{width: 24px;}
    .bsa-button,.result,select, input,.temo-detail,.calculator .input-box,.check-box,.total-con{font-size: 16px;}
    input[type=checkbox]{width: 16px;height: 16px;}
     .result{
        height: calc(58px * 16 / 21);
        border-radius: calc(29px * 16 / 21);
        width: calc(387px * 16 / 21);
    }
    .bsa-button i svg{
        width: 14px;
    }
    .bsa-button{
        width: calc(156px * 16 / 21);
        height: calc(58px * 16 / 21);
        border-radius: calc(29px * 16 / 21);
        line-height: calc(58px * 16 / 21);
        padding-left: calc(38px * 16 / 21);
    }
}
@media screen and (max-width: 320px) {
    h2{font-size: 20px;}
}
::-webkit-scrollbar {
    width: var(--scroll-bar-size);
    height: var(--scroll-bar-size);
    background: transparent;
    cursor: pointer;
}
::-webkit-scrollbar-thumb {
    background-color: var(--scroll-bar-thumb-background-color);
    border-radius: var(--scroll-bar-size);
    border-color: transparent;
    border-style: solid;
    border-width: calc(var(--scroll-bar-size)/3);
    background-clip: padding-box;
}
::-webkit-scrollbar-thumb:active {
    background-color: var(--scroll-bar-thumb-background-color-active);
}
::-webkit-scrollbar-thumb:hover,
::-webkit-scrollbar-thumb:active {
    border-width: 1px;
    background-color: var(--scroll-bar-thumb-background-color-active);
    cursor: pointer;
}