/*============ 固定變數CSS ============*/
/*全域*/
:root{
    /*============ 文字 ============*/
    /* 字型 */
    --font-family-tw:"微軟正黑體", "Microsoft JhengHei", sans-serif, Helvetica, Arial;

    /* 字級 */
    /* 由大至小排列 */
    --font-h1:2.5rem;
    --font-h2:2rem;
    --font-h3:1.75rem;
    --font-h4:1.5rem;
    --font-h5:1.3rem;
    --font-h6:1.2rem;
    /* 常用內文與輔助小字 */
    --font-primary:1.1rem;
    --font-secondary:1rem;
    --font-note:0.9rem;

    /* 行高 */
    --line-height-h1:3rem;
    --line-height-h2:2.4rem;
    --line-height-h3:2.2rem;
    --line-height-h4:2rem;
    --line-height-h5:1.6rem;
    /* 常用行高 */
    --line-height-primary:1.8rem;
    --line-height-secondary:1.6rem;
    --line-height-small:1.5rem;
    /* 無行高 */
    --line-height-normal:normal;

    /* 字型樣式：刪除線、預設樣式 */
    --font-weight-bold:bold;
    --font-weight-nor:normal;
    --text-line-through:line-through;
    --text-underline:underline;

    /*============ 顏色 ============*/
    /* 基本色：此處為CIS固定色(勿更動) */
    --color-black-a1:#000000;
    --color-black-a2:#333333;
    --color-black-b1:#555555;
    --color-black-b2:#828282;
    --color-black-c1:#b4b4b4;
    --color-black-c2:#e1e1e1;
    
    /* LOGO 基本三色：此處為CIS固定色(勿更動) */
    --color-purple-logo:#c029ff;
    --color-orange-logo:#ffaa44;
    --color-green-logo:#45d488;

    /* 紫色：此處為CIS固定色(勿更動) */
    --color-purple-a1:#9600be;
    --color-purple-a2:#c029ff;
    --color-purple-b1:#d300ff;
    --color-purple-b2:#dc64ff;
    --color-purple-c1:#dc64ff;
    --color-purple-c2:#e696ff;
    --color-purple-d1:#e696ff;
    --color-purple-d2:#f5d2ff;
    --color-purple-e1:#f5d2ff;
    --color-purple-e2:#fff5ff;

    /* 橘色：此處為CIS固定色(勿更動) */
    --color-orange-a1:#ca6600;
    --color-orange-a2:#ffa71a;
    --color-orange-b1:#ffa71a;
    --color-orange-b2:#ffb450;
    --color-orange-c1:#ffb450;
    --color-orange-c2:#ffc579;
    --color-orange-d1:#ffc579;
    --color-orange-d2:#ffd6a3;
    --color-orange-e1:#ffd6a3;
    --color-orange-e2:#ffffeb;

    /* 綠色：此處為CIS固定色(勿更動) */
    --color-green-a1:#00af50;
    --color-green-a2:#00d782;
    --color-green-b1:#00d782;
    --color-green-b2:#64d78c;
    --color-green-c1:#64d78c;
    --color-green-c2:#82e196;
    --color-green-d1:#82e196;
    --color-green-d2:#96ebb4;
    --color-green-e1:#96ebb4;
    --color-green-e2:#e6faf0;

    /* 設計師自行添加區塊 */
    /* 日本命理館黑色 */
    --color-gray-jpa1: #666666;
    --color-gray-jpa2:#888888;
    --color-gray-jpa3:#f3f3f3;
    --color-gray-jpa4:#d6d6d6;

    /* 日本命理館藍色 */
    --color-blue-jpa1:#5C92BF;
    --color-blue-jpa2:#D6E4ED;
    --color-blue-jpa3:#EFF9F9;
    --color-blue-jpa4:#60B3C6;

    /* 日本命理粉紅色 */
    --color-pink-jpa1:#E88282;
    --color-pink-jpa2:#FBC2BF;
    --color-pink-jpa3:#F48787;

    /* 日本命理館紅色 */
    --color-red-jpa1:#D86A6A;

    /* 日本命理館綠色 */
    --color-green-jpa1:#7AB75A;

    /* 日本命理館紫色 */
    --color-purple-jpa1:#A475D1;
    --color-purple-jpa2:#E4D6EA;
    --color-purple-jpa3:#A462BC;

    /* 日本命理館棕色 */
    --color-brown-jpa1:#D6A469;
    --color-brown-jpa2:#967769;

    /* 日本命理館橘色 */
    --color-orange-jpa1: #F48800;

    --color-section-jpa1:#F8F4E9;
    --color-section-jpa2:#F7EFDF;
    --color-section-jpa3: #B29079;

    /*LINE 官方綠色*/
    --color-LINE:#00B900;

    /* 科技紫微品牌區塊 */
    --color-brown-jpa0:#9D6F58;

    /*============ 動態轉場效果 ============*/
    --trans-effect-e1:.3s ease;
    --trans-effect-e2:.3s ease-in;
    --trans-effect-e3:.3s ease-in-out;

    /*============ 其他 ============*/
    
    /* 區塊陰影 */
    --box-shadow: 0px 0px 10px 1px rgba(0, 0, 0, .1);
    --box-shadow-2: 0px 0px 15px 10px rgba(0, 0, 0, .1);
    --box-shadow-3: 0px 0px 5px 1px rgba(0, 0, 0, .8);
    --box-shadow-white: 0px 0px 0px 1px rgba(255, 255, 255, 1);

    /* 間距 */
    --blank-lv10:10px;
    --blank-lv20:20px;
    --blank-lv40:40px;
    --blank-lv60:60px;

    /* 圓角 */
    --border-radius:25px;
    --border-radius-small:15px;
    --border-radius-smaller:10px;
    --border-radius-round:999px;

    /* 陰影 */
    --box-shadow:0px 0px 15px -2px #cccccc;
    --box-shadow-2:0px 0px 15px -2px #555555;
    --box-shadow-menu-mb: 0px -6px 15px -5px rgba(0, 0, 0, .2);
    --box-shadow-topmenu-mb: 0px 6px 15px -5px rgba(0, 0, 0, .2);
    
    /*========= 設計師自訂變數區塊 =========*/
}

/*============ 字級 ============*/
/* h1 - h5 */
.PC h1{
    font-size: var(--font-h1);
    line-height: var(--line-height-h1);
}

.PC h2{
    font-size: var(--font-h2);
    line-height: var(--line-height-h2);
}

.PC h3{
    font-size: var(--font-h3);
    line-height: var(--line-height-h3);
}

.PC h4{
    font-size: var(--font-h4);
    line-height: var(--line-height-h4);
}

.PC h5{
    font-size: var(--font-h5);
    line-height: var(--line-height-h5);
}

/* 一般內文 1.1rem */
.txt-primary{
    font-size:var(--font-primary);
    line-height: var(--line-height-secondary);
}

/* 一般內文2 1rem */
.txt-secondary{
    font-size:var(--font-secondary);
    line-height: var(--line-height-normal);
}

/* 備註說明小字 0.9rem */
.txt-note{
    font-size:var(--font-note);
    line-height: var(--line-height-primary);
}

.txt-description{
    font-size: 0.8rem;
    line-height: var(--line-height-normal);
}

/* 粗體 */
.PC .txt-bold{
    font-weight: var(--font-weight-bold);
}

/* 間距 */
.PC .blank-lv10{height:var(--blank-lv10);}
.PC .blank-lv20{height:var(--blank-lv20);}
.PC .blank-lv40{height:var(--blank-lv40);}
.PC .blank-lv60{height:var(--blank-lv60);}

/*============ MEDIA QUERY ============*/
/* iPad 1, 2, Mini and Air Portrait */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: portrait) 
  and (-webkit-min-device-pixel-ratio: 1) {
    .PC #v108{
        width:100%;
        height: auto;
    }
}

/* iPad 1, 2, Mini and Air Landscape */
@media only screen 
  and (min-device-width: 768px) 
  and (max-device-width: 1024px) 
  and (orientation: landscape) 
  and (-webkit-min-device-pixel-ratio: 1) {
}

/* iPad Pro 12.9 */
@media only screen 
  and (min-device-width: 1024px) 
  and (max-device-width: 1366px)
  and (-webkit-min-device-pixel-ratio: 2) {

}