@charset "UTF-8";

/* setting word */

	.maincolor {  
		color: #2855A5;
	}

	.logored {  
		color: #C43932;
	}

	.gray66 {  
		color: #666666;
	}

	.gray48 {  
		color: #484848;
	}

	.white {  
		color: #FFFFFF;
	}


	.green {  
        color: #41b263;
	}



/*--- title ---*/

	.bannertxt {  
		font-size: 3em;
        font-weight: bold;
		line-height: 145%;
        text-align: center;
        text-shadow: 2px 2px 4px #FFF;
	}

	.bannersubtxt {  
		font-size: 2.2em;
        font-weight: bold;
		line-height: 145%;
        text-align: center;
        text-shadow: 2px 2px 4px #333;
	}

	.hisstory_datetitle {  
		font-size: 2.2em;
        font-weight: bold;
		line-height: 145%;
	}

	.title1 {  
		font-size: 2em;	
        line-height: 260%;
        line-height: 135%;
	}

	.title1-b {  
		font-size: 2em;		
		font-weight: bold;
        line-height: 135%;
	}

	.title2 {  
		font-size: 1.4em;	
	}

	.title2-b {  
		font-size: 1.4em;		
		font-weight: bold;
	}

	.title3 {  
		font-size: 1.7em;	
	}

	.title3-b {  
		font-size: 1.7em;		
		font-weight: bold;
	}

	.title4 {  
		font-size: 1.2em;	
	}

	.title4-b {  
		font-size: 1.2em;		
		font-weight: bold;
	}

	.title5 {  
		font-size: 1.3em;	
	}

	.title5-b {  
		font-size: 1.3em;		
		font-weight: bold;
	}

	.title6 {  
		font-size: 1.2em;	
	}

	.title6-b {  
		font-size: 1.2em;		
		font-weight: bold;
	}



/*--- 內文 ---*/

	.txt1 {  
		font-size: 1.1em;
		line-height: 155%;
	}

	.txt1-b {  
		font-weight: bold;
		font-size: 1.1em;
		line-height: 155%;
	}

	.txt2 {  
		font-size: 1em;	
	}

	.txt2-b {  
		font-weight: bold;
		font-size: 1em;
	}

	.txt3 {  
		font-size: 1.3em;	
	}

	.txt3-b {  
		font-weight: bold;
		font-size: 1.3em;
	}

	.txt4 {  
		font-size: 1.2em;	
	}

	.txt4-b {  
		font-weight: bold;
		font-size: 1.2em;
	}

	.txt5 {  
		font-size: 1.1em;
	}

	.txt5-b {  
		font-weight: bold;
		font-size: 1.1em;
	}

	.txt5 {  
		font-size: 0.9em;
	}

	.txt5-b {  
		font-weight: bold;
		font-size: 0.9em;
	}



/*-- 六角型div設定 --*/


.title-bor-drw {
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: auto;
    height: auto;
    padding: 0.6em 1.5em;
    border-top:solid 1.5px #2855A5;
    border-bottom: solid 1.5px #2855A5;
    box-sizing: border-box;  /* 避免 padding 影響寬度 */
    clip-path: polygon(87% 0, 100% 50%, 87% 100%, 55% 100%, 36% 87%, 0 87%, 0 0);
    z-index: 1;
}

    .title-bor-drw::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 36px;
        top: 25%;
        left: 82%;
        transform: rotate(55deg);
    }

    .title-bor-drw::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 36px;
        bottom: 25%;
        left: 82%;
        transform: rotate(-55deg);
    }


.title-bor-drw-wh {
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: auto;
    height: auto;
    padding: 0.6em 1.5em;
    border-top:solid 1.5px #FFF;
    border-bottom: solid 1.5px #FFF;
    box-sizing: border-box;  /* 避免 padding 影響寬度 */
    clip-path: polygon(87% 0, 100% 50%, 87% 100%, 55% 100%, 36% 87%, 0 87%, 0 0);
    z-index: 1;
}

    .title-bor-drw-wh::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #FFF;
        width: 36px;
        top: 25%;
        left: 82%;
        transform: rotate(55deg);
    }

    .title-bor-drw-wh::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #FFF;
        width: 36px;
        bottom: 25%;
        left: 82%;
        transform: rotate(-55deg);
    }



.title-bor-subblue {
    display: inline-flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto;
    width: 10em;
    height: auto;
    padding: 0.5em 2em 0.5em 0.5em;
    border-top:solid 1.5px #2855A5;
    border-bottom: solid 1.5px #2855A5;
    box-sizing: border-box;  /* 避免 padding 影響寬度 */
    clip-path: polygon(85% 0, 92.5% 50%, 85% 100%, 55% 100%, 36% 85%, 0 85%, 0 0);
    z-index: 10;
    background: #FFF;
}

    .title-bor-subblue::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 35px;
        top: 24%;
        left: 82%;
        transform: rotate(55deg);
    }

    .title-bor-subblue::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 35px;
        bottom: 24%;
        left: 82%;
        transform: rotate(-55deg);
    }


.title-bor-subblue1 {
    display: inline-flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto;
    width: auto;
    height: auto;
    padding: 0.5em 2em 0.5em 0.5em;
    border-top:solid 1.5px #2855A5;
    border-bottom: solid 1.5px #2855A5;
    box-sizing: border-box;  /* 避免 padding 影響寬度 */
    clip-path: polygon(93.7% 0, 99% 50%, 93.7% 100%, 90% 100%, 36% 93.7%, 0 93.7%, 0 0);
    z-index: 10;
    background: #FFF;
}

    .title-bor-subblue1::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 35px;
        top: 24%;
        left: 92%;
        transform: rotate(55deg);
    }

    .title-bor-subblue1::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 35px;
        bottom: 24%;
        left: 92%;
        transform: rotate(-55deg);
    }


.title-bor-subblue2 {
    display: inline-flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto;
    width: 13em;
    height: auto;
    padding: 0.5em 2em 0.5em 0.5em;
    border-top:solid 1.5px #2855A5;
    border-bottom: solid 1.5px #2855A5;
    box-sizing: border-box;  /* 避免 padding 影響寬度 */
    clip-path: polygon(84% 0, 90% 50%, 84% 100%, 55% 100%, 36% 84%, 0 84%, 0 0);
    z-index: 10;
    background: #FFF;
}

    .title-bor-subblue2::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 35px;
        top: 24%;
        left: 82%;
        transform: rotate(55deg);
    }

    .title-bor-subblue2::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 35px;
        bottom: 24%;
        left: 82%;
        transform: rotate(-55deg);
    }


.title-bor-subblue3 {
    display: inline-flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto;
    width: 7em;
    height: auto;
    padding: 0.5em 2em 0.5em 0.5em;
    border-top:solid 1.5px #2855A5;
    border-bottom: solid 1.5px #2855A5;
    box-sizing: border-box;  /* 避免 padding 影響寬度 */
    clip-path: polygon(78.6% 0, 90% 50%, 78.6% 100%, 90% 100%, 70% 100%, 0 78.6%, 0 0);
    z-index: 10;
    background: #FFF;
}

    .title-bor-subblue3::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 35px;
        top: 24%;
        left: 75%;
        transform: rotate(55deg);
    }

    .title-bor-subblue3::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 35px;
        bottom: 24%;
        left: 75%;
        transform: rotate(-55deg);
    }



.title-bor-subblue4 {
    display: inline-flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto;
    width: 8em;
    height: auto;
    padding: 0.5em 2em 0.5em 0.5em;
    border-top:solid 1.5px #2855A5;
    border-bottom: solid 1.5px #2855A5;
    box-sizing: border-box;  /* 避免 padding 影響寬度 */
    clip-path: polygon(78.6% 0, 88% 50%, 78.6% 100%, 90% 100%, 70% 100%, 0 78.6%, 0 0);
    z-index: 10;
    background: #FFF;
}

    .title-bor-subblue4::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 35px;
        top: 24%;
        left: 75%;
        transform: rotate(55deg);
    }

    .title-bor-subblue4::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 35px;
        bottom: 24%;
        left: 75%;
        transform: rotate(-55deg);
    }

.title-bor-subblue5 {
    display: inline-flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto;
    width: 6em;
    height: auto;
    padding: 0.5em 2em 0.5em 0.5em;
    border-top:solid 1.5px #2855A5;
    border-bottom: solid 1.5px #2855A5;
    box-sizing: border-box;  /* 避免 padding 影響寬度 */
    clip-path: polygon(77% 0, 89% 50%, 77% 100%, 90% 100%, 55% 100%, 0 77%, 0 0);
    z-index: 10;
    background: #FFF;
}

    .title-bor-subblue5::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 35px;
        top: 24%;
        left: 72%;
        transform: rotate(55deg);
    }

    .title-bor-subblue5::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 35px;
        bottom: 24%;
        left: 72%;
        transform: rotate(-55deg);
    }



.title-bor-subblue2r {
    display: inline-flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto;
    width: 14em;
    height: auto;
    padding: 0.5em 2em 0.5em 0.5em;
    border-top:solid 1.5px #2855A5;
    border-bottom: solid 1.5px #2855A5;
    box-sizing: border-box;  /* 避免 padding 影響寬度 */
    clip-path: polygon(75% 0, 83% 50%, 75% 100%, 90% 100%, 55% 100%, 0 75%, 0 0);
    z-index: 10;
    background: #FFF;
}

    .title-bor-subblue2r::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 52px;
        top: 24%;
        left: 72%;
        transform: rotate(55deg);
    }

    .title-bor-subblue2r::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 52px;
        bottom: 24%;
        left: 72%;
        transform: rotate(-55deg);
    }




/* 2字 */
.title-bor-proinfc {
    display: inline-flex;
    position: relative;
    justify-content: center;
    align-items: center;
    margin: 0 auto;
    width: 8.5em;
    height: auto;
    padding: 0.5em 2em 0.5em 1em;
    border-top:solid 1px #2855A5;
    border-bottom: solid 1px #2855A5;
    box-sizing: border-box;  /* 避免 padding 影響寬度 */
    clip-path: polygon(81.5% 0, 91% 50%, 81.5% 100%, 55% 100%, 36% 81.5%, 0 81.5%, 0 0);
    z-index: 10;
    background: #FFF;
}

    .title-bor-proinfc::before {
        content: "";
        position: absolute;
        height: 1px;
        background-color: #2855A5;
        width: 35px;
        top: 24%;
        left: 78%;
        transform: rotate(55deg);
    }

    .title-bor-proinfc::after {
        content: "";
        position: absolute;
        height: 1px;
        background-color: #2855A5;
        width: 35px;
        bottom: 24%;
        left: 78%;
        transform: rotate(-55deg);
    }








/*-- more設定 --*/

.more1 {  
	display: inline-block;
    cursor: pointer;
    color: #333;
}

    .more1:hover {  
        color: #2855A5;
    }

    .more1 a {  
        color: #666;
    }

    .more1 a:hover {  
        color: #2855A5;
    }


	.morebt1 {  
		display: inline-block;
        position: relative;
		margin: 0 auto 0 0.5em;
		width: 40px;
        height: 20px;
        border: solid 0.5px #666;
        border-radius: 20px;
        transform: translateY(4px);
	}

	    .morebt1ab {  
		    display: inline-block;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0%, -50%);
		    width: 25px;
            height: 1px;
            border-bottom: solid 0.5px #666;
            z-index: 3;
	    }  

	        .morebt1ab::before {  
                content: "";
                position: absolute;
                top: 50%;
                left: 23px;
                transform: translate(0, -50%);
                border: solid 4px #666;
                clip-path: polygon(0 0, 50% 50%, 0 100%);
                z-index: 1;
	        }

	        .morebt1ab::after {  
                content: "";
                position: absolute;
                top: 50%;
                left: 23px;
                transform: translate(0, -50%);
                border: solid 3px #FFF;
                clip-path: polygon(0 0, 50% 50%, 0 100%);
                z-index: 2;
	        }


	    .more1:hover .morebt1 {  
            width: 60px;
            border: solid 0.5px #2855A5;
		    color: #2855A5;
            -webkit-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
	    }

	    .more1:hover .morebt1ab {  
            width: 40px;
            border-bottom: solid 0.5px #2855A5;
            -webkit-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
	    }

	    .more1:hover .morebt1ab::before {  
            left: 40px;
            border-bottom: solid 4px #2855A5;
            -webkit-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
	    }

	    .more1:hover .morebt1ab::after {  
            left: 40px;
            border-bottom: solid 3px #FFF;
            -webkit-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
	    }



.more2_wh {  
	display: inline-block;
    cursor: pointer;
    color: #FFF;
}

    .more2_wh:hover {  
        color: #FFF;
    }

    .more2_wh a {  
        color: #FFF;
    }

    .more2_wh a:hover {  
        color: #FFF;
    }


	.more2_wh_bt1 {  
		display: inline-block;
        position: relative;
		margin: 0 auto 0 0.5em;
		width: 40px;
        height: 20px;
        border: solid 0.5px #FFF;
        border-radius: 20px;
        transform: translateY(4px);
	}

	    .more2_wh_ab {  
		    display: inline-block;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0%, -50%);
		    width: 25px;
            height: 1px;
            border-bottom: solid 0.5px #FFF;
            z-index: 3;
	    }  

	        .more2_wh_ab::before {  
                content: "";
                position: absolute;
                top: 50%;
                left: 23px;
                transform: translate(0, -50%);
                border: solid 4px #FFF;
                clip-path: polygon(0 0, 50% 50%, 0 100%);
                z-index: 1;
	        }

	        .more2_wh_ab::after {  
                content: "";
                position: absolute;
                top: 50%;
                left: 23px;
                transform: translate(0, -50%);
                border: solid 3px #2855A5;
                clip-path: polygon(0 0, 50% 50%, 0 100%);
                z-index: 2;
	        }


	    .more2_wh:hover .more2_wh_bt1 {  
            width: 60px;
            border: solid 0.5px #FFF;
		    color: #FFF;
            -webkit-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
	    }

	    .more2_wh:hover .more2_wh_ab {  
            width: 40px;
            border-bottom: solid 0.5px #FFF;
            -webkit-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
	    }

	    .more2_wh:hover .more2_wh_ab::before {  
            left: 40px;
            border-bottom: solid 4px #FFF;
            -webkit-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
	    }

	    .more2_wh:hover .more2_wh_ab::after {  
            left: 40px;
            border-bottom: solid 3px #FFF;
            -webkit-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
	    }



.moreg {  
	display: inline-block;
    cursor: pointer;
    color: #333;
}

    .moreg:hover {  
        color: #2855A5;
    }

    .moreg a {  
        color: #666;
    }

    .moreg a:hover {  
        color: #2855A5;
    }


	.moregbt1 {  
		display: inline-block;
        position: relative;
		margin: 0 auto 0 0.5em;
		width: 40px;
        height: 20px;
        border: solid 0.5px #666;
        border-radius: 20px;
        transform: translateY(4px);
	}

	    .moregbt1ab {  
		    display: inline-block;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0%, -50%);
		    width: 25px;
            height: 1px;
            border-bottom: solid 0.5px #666;
            z-index: 3;
	    }  

	        .moregbt1ab::before {  
                content: "";
                position: absolute;
                top: 50%;
                left: 23px;
                transform: translate(0, -50%);
                border: solid 4px #666;
                clip-path: polygon(0 0, 50% 50%, 0 100%);
                z-index: 1;
	        }

	        .moregbt1ab::after {  
                content: "";
                position: absolute;
                top: 50%;
                left: 23px;
                transform: translate(0, -50%);
                border: solid 3px #e5e5e5;
                clip-path: polygon(0 0, 50% 50%, 0 100%);
                z-index: 2;
	        }


	    .moreg:hover .moregbt1 {  
            width: 60px;
            border: solid 0.5px #2855A5;
		    color: #2855A5;
            -webkit-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
	    }

	    .moreg:hover .moregbt1ab {  
            width: 40px;
            border-bottom: solid 0.5px #2855A5;
            -webkit-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
	    }

	    .moreg:hover .moregbt1ab::before {  
            left: 40px;
            border-bottom: solid 4px #2855A5;
            -webkit-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
	    }

	    .moreg:hover .moregbt1ab::after {  
            left: 40px;
            border-bottom: solid 3px #FFF;
            -webkit-transition: all 0.2s ease-in-out;
	        transition: all 0.2s ease-in-out;
	    }



.more3 {  
	display: inline-block;
    cursor: pointer;
    color: #333;
}

    .more3:hover {  
        color: #2855A5;
    }

    .more3 a {  
        color: #666;
    }

    .more3 a:hover {  
        color: #2855A5;
    }


	.morebt3 {  
		display: inline-block;
        position: relative;
		margin: 0 auto 0 0.5em;
		width: 40px;
        height: 20px;
        border: solid 0.5px #666;
        border-radius: 20px;
        transform: translateY(4px);
	}

	    .morebt3ab {  
		    display: inline-block;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0%, -50%);
		    width: 25px;
            height: 1px;
            border-bottom: solid 0.5px #666;
            z-index: 3;
	    }  

	        .morebt3ab::before {  
                content: "";
                position: absolute;
                top: 50%;
                left: 23px;
                transform: translate(0, -50%);
                border: solid 4px #666;
                clip-path: polygon(0 0, 50% 50%, 0 100%);
                z-index: 1;
	        }

	        .morebt3ab::after {  
                content: "";
                position: absolute;
                top: 50%;
                left: 23px;
                transform: translate(0, -50%);
                border: solid 3px #FFF;
                clip-path: polygon(0 0, 50% 50%, 0 100%);
                z-index: 2;
	        }


	    .more3:hover .morebt3 {  
            width: 60px;
            border: solid 0.5px #2855A5;
		    color: #2855A5;
            background: #2855A5;
            -webkit-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
	    }

	    .more3:hover .morebt3ab {  
            width: 40px;
            border-bottom: solid 0.5px #FFF;
            -webkit-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
	    }

	    .more3:hover .morebt3ab::before {  
            left: 40px;
            border-bottom: solid 4px #FFF;
            -webkit-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
	    }

	    .more3:hover .morebt3ab::after {  
            left: 40px;
            border-bottom: solid 3px #FFF;
            -webkit-transition: all 0.3s ease-in-out;
	        transition: all 0.3s ease-in-out;
	    }


.more4 {  
	display: inline-block;
    padding: 0 0.5em 0 0;
    background: #FFF;
    color: #333;
    z-index: 10;
}

	.morebt4 {  
		display: inline-block;
        position: relative;
		margin: 0 auto 0 0.5em;
		width: 40px;
        height: 20px;
        border: solid 0.5px #666;
        border-radius: 20px;
        transform: translateY(4px);
	}

	    .morebt4word {  
		    display: none;
            position: relative;
            width: auto;
	    }  

	    .morebt4ab {  
		    display: inline-block;
            position: absolute;
            top: 50%;
            left: 0;
            transform: translate(0%, -50%);
		    width: 25px;
            height: 1px;
            border-bottom: solid 0.5px #666;
            z-index: 5;
	    }  

	        .morebt4ab::before {  
                content: "";
                position: absolute;
                top: 50%;
                left: 23px;
                transform: translate(0, -50%);
                border: solid 4px #666;
                clip-path: polygon(0 0, 50% 50%, 0 100%);
                z-index: 1;
	        }

	        .morebt4ab::after {  
                content: "";
                position: absolute;
                top: 50%;
                left: 23px;
                transform: translate(0, -50%);
                border: solid 3px #FFF;
                clip-path: polygon(0 0, 50% 50%, 0 100%);
                z-index: 12;
	        }


.title-bor-subblue4 {
    width: 8em;
    height: auto;
    padding: 0.5em 2em 0.5em 0.5em;
    box-sizing: border-box;  /* 避免 padding 影響寬度 */
    clip-path: polygon(78.6% 0, 88.5% 50%, 78.6% 100%, 90% 100%, 70% 100%, 0 78.6%, 0 0);
    z-index: 10;
    background: #FFF;
}

    .title-bor-subblue4::before {
        content: "";
        width: 35px;
        top: 24%;
        left: 75%;
    }

    .title-bor-subblue4::after {
        content: "";
        width: 35px;
        bottom: 24%;
        left: 75%;
    }






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


	
}

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

	.bannertxt {  
		font-size: 2.8em;
        font-weight: bold;
		line-height: 140%;
	}

	.title3 {  
		font-size: 1.6em;	
	}

	.title3-b {  
		font-size: 1.6em;		
		font-weight: bold;
	}
    
    
    
    
    
    
    
/*-- 六角型div設定 --*/
    
.title-bor-subblue {
    clip-path: polygon(86.2% 0, 94% 50%, 86.2% 100%, 55% 100%, 36% 86.2%, 0 86.2%, 0 0);
}

    .title-bor-subblue::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 36px;
        top: 25%;
        left: 83%;
        transform: rotate(55deg);
    }

    .title-bor-subblue::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 36px;
        bottom: 25%;
        left: 83%;
        transform: rotate(-55deg);
    }
    

    
.title-bor-subblue2 {
    clip-path: polygon(85.3% 0, 91.5% 50%, 85.3% 100%, 55% 100%, 36% 85.3%, 0 85.3%, 0 0);
}

    .title-bor-subblue2::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 36px;
        top: 25%;
        left: 83%;
        transform: rotate(55deg);
    }

    .title-bor-subblue2::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 36px;
        bottom: 25%;
        left: 83%;
        transform: rotate(-55deg);
    }
    
    
.title-bor-subblue3 {
    width: 7em;
    padding: 0.5em 2em 0.5em 0.5em;
    clip-path: polygon(79.5% 0, 91% 50%, 79.5% 100%, 90% 100%, 65% 100%, 0 79.5%, 0 0);
}

    .title-bor-subblue3::before {
        content: "";
        width: 35px;
        top: 24%;
        left: 75%;
    }

    .title-bor-subblue3::after {
        content: "";
        width: 35px;
        bottom: 24%;
        left: 75%;
    }
    
    
    


.title-bor-subblue2r {
    display: inline-flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto;
    width: 14em;
    height: auto;
    padding: 0.5em 2em 0.5em 0.5em;
    border-top:solid 1.5px #2855A5;
    border-bottom: solid 1.5px #2855A5;
    box-sizing: border-box;  /* 避免 padding 影響寬度 */
    clip-path: polygon(75.1% 0, 83.5% 50%, 75.1% 100%, 90% 100%, 55% 100%, 0 75.1%, 0 0);
    z-index: 10;
    background: #FFF;
}

    .title-bor-subblue2r::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 52px;
        top: 24%;
        left: 72%;
        transform: rotate(55deg);
    }

    .title-bor-subblue2r::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 52px;
        bottom: 24%;
        left: 72%;
        transform: rotate(-55deg);
    }

    
    
    
    
    

/* 2字 */
.title-bor-proinfc {
    clip-path: polygon(81.5% 0, 91% 50%, 81.5% 100%, 55% 100%, 36% 81.5%, 0 81.5%, 0 0);
}

    .title-bor-proinfc::before {
        height: 1px;
        width: 35px;
        top: 24%;
        left: 77.5%;
        transform: rotate(55deg);
    }

    .title-bor-proinfc::after {
        height: 1px;
        width: 35px;
        bottom: 24%;
        left: 77.5%;
        transform: rotate(-55deg);
    }  
    
    
    
}


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

	.bannertxt {  
		font-size: 2.5em;
        font-weight: bold;
		line-height: 140%;
	}
    
    
	.title1 {  
		font-size: 1.8em;	
	}

	.title1-b {  
		font-size: 1.8em;		
		font-weight: bold;
	}

	.title2 {  
		font-size: 1.3em;	
	}

	.title2-b {  
		font-size: 1.3em;		
		font-weight: bold;
	}
	
	.title3 {  
		font-size: 1.5em;	
	}

	.title3-b {  
		font-size: 1.5em;		
		font-weight: bold;
	}

	.title4 {  
		font-size: 1.2em;	
	}

	.title4-b {  
		font-size: 1.2em;		
		font-weight: bold;
	}

	.title5 {  
		font-size: 1.25em;	
	}

	.title5-b {  
		font-size: 1.25em;		
		font-weight: bold;
	}
    

	.title6 {  
		font-size: 1.2em;	
	}

	.title6-b {  
		font-size: 1.2em;		
		font-weight: bold;
	}  
	
    
    

	.txt1 {  
		font-size: 1.1em;
		line-height: 155%;
	}

	.txt1-b {  
		font-weight: bold;
		font-size: 1.1em;
		line-height: 155%;
	}

	.txt2 {  
		font-size: 1em;	
	}

	.txt2-b {  
		font-weight: bold;
		font-size: 1em;
	}

	.txt3 {  
		font-size: 1.1em;	
	}

	.txt3-b {  
		font-weight: bold;
		font-size: 1.1em;
	}
    
	.txt5 {  
		font-size: 1.1em;
	}

	.txt5-b {  
		font-weight: bold;
		font-size: 1.1em;
	}

	

	
/*-- 六角型div設定 --*/

.title-bor-drw {
    clip-path: polygon(87% 0, 100% 50%, 87% 100%, 55% 100%, 36% 87%, 0 87%, 0 0);
    z-index: 1;
}

    .title-bor-drw::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 36px;
        top: 25%;
        left: 81%;
        transform: rotate(55deg);
    }

    .title-bor-drw::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 36px;
        bottom: 25%;
        left: 81%;
        transform: rotate(-55deg);
    }


.title-bor-drw-wh {
    clip-path: polygon(87% 0, 100% 50%, 87% 100%, 55% 100%, 36% 87%, 0 87%, 0 0);
    z-index: 1;
}

    .title-bor-drw-wh::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #FFF;
        width: 36px;
        top: 25%;
        left: 81%;
        transform: rotate(55deg);
    }

    .title-bor-drw-wh::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #FFF;
        width: 36px;
        bottom: 25%;
        left: 81%;
        transform: rotate(-55deg);
    }

	
.title-bor-subblue {
    clip-path: polygon(86.5% 0, 94.5% 50%, 86.5% 100%, 55% 100%, 36% 86.5%, 0 86.5%, 0 0);
}

    .title-bor-subblue::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 36px;
        top: 25%;
        left: 83%;
        transform: rotate(55deg);
    }

    .title-bor-subblue::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 36px;
        bottom: 25%;
        left: 83%;
        transform: rotate(-55deg);
    }
    
    
.title-bor-subblue2 {
    clip-path: polygon(85.4% 0, 92% 50%, 85.4% 100%, 55% 100%, 36% 85.4%, 0 85.4%, 0 0);
}

    .title-bor-subblue2::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 36px;
        top: 25%;
        left: 83%;
        transform: rotate(55deg);
    }

    .title-bor-subblue2::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 36px;
        bottom: 25%;
        left: 83%;
        transform: rotate(-55deg);
    }
    

    
.title-bor-subblue2r {
    display: inline-flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto;
    width: 14em;
    height: auto;
    padding: 0.5em 2em 0.5em 0.5em;
    border-top:solid 1.5px #2855A5;
    border-bottom: solid 1.5px #2855A5;
    box-sizing: border-box;  /* 避免 padding 影響寬度 */
    clip-path: polygon(75.5% 0, 84.4% 50%, 75.5% 100%, 90% 100%, 55% 100%, 0 75.5%, 0 0);
    z-index: 10;
    background: #FFF;
}

    .title-bor-subblue2r::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 52px;
        top: 24%;
        left: 72%;
        transform: rotate(55deg);
    }

    .title-bor-subblue2r::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 52px;
        bottom: 24%;
        left: 72%;
        transform: rotate(-55deg);
    }
 
    
    
    

/* 2字 */
.title-bor-proinfc {
    clip-path: polygon(82% 0, 92% 50%, 82% 100%, 55% 100%, 36% 82%, 0 82%, 0 0);
}

    .title-bor-proinfc::before {
        height: 1px;
        width: 35px;
        top: 24%;
        left: 77.5%;
        transform: rotate(55deg);
    }

    .title-bor-proinfc::after {
        height: 1px;
        width: 35px;
        bottom: 24%;
        left: 77.5%;
        transform: rotate(-55deg);
    }
    
    
    
    

	
}


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

/* font */
    
	.bannertxt {  
		font-size: 2.2em;
        font-weight: bold;
		line-height: 140%;
	}
    
    
	.title1 {  
		font-size: 1.5em;	
	}

	.title1-b {  
		font-size: 1.5em;		
		font-weight: bold;
	}

	.title2 {  
		font-size: 1.2em;	
	}

	.title2-b {  
		font-size: 1.2em;		
		font-weight: bold;
	}	
	
	.title4 {  
		font-size: 1.2em;	
	}

	.title4-b {  
		font-size: 1.2em;		
		font-weight: bold;
	}

	.title5 {  
		font-size: 1.25em;	
	}

	.title5-b {  
		font-size: 1.25em;		
		font-weight: bold;
	}
	
	.title6 {  
		font-size: 1.15em;	
	}

	.title6-b {  
		font-size: 1.15em;		
		font-weight: bold;
	}    
    
    
    
    
    

	.txt1 {  
		font-size: 1.1em;
		line-height: 155%;
	}

	.txt1-b {  
		font-weight: bold;
		font-size: 1.1em;
		line-height: 155%;
	}

	.txt2 {  
		font-size: 1em;	
	}

	.txt2-b {  
		font-weight: bold;
		font-size: 1em;
	}

	.txt3 {  
		font-size: 1em;	
	}

	.txt3-b {  
		font-weight: bold;
		font-size: 1em;
	}

	.txt5 {  
		font-size: 1.1em;
	}

	.txt5-b {  
		font-weight: bold;
		font-size: 1.1em;
	}

    
	
	
/*-- 六角型div設定 --*/

.title-bor-drw {
    clip-path: polygon(86% 0, 100% 50%, 86% 100%, 55% 100%, 36% 86%, 0 86%, 0 0);
    z-index: 1;
}

    .title-bor-drw::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 36px;
        top: 25%;
        left: 80%;
        transform: rotate(55deg);
    }

    .title-bor-drw::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 36px;
        bottom: 25%;
        left: 80%;
        transform: rotate(-55deg);
    }


.title-bor-drw-wh {
    clip-path: polygon(86% 0, 100% 50%, 86% 100%, 55% 100%, 36% 86%, 0 86%, 0 0);
    z-index: 1;
}

    .title-bor-drw-wh::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #FFF;
        width: 36px;
        top: 25%;
        left: 80%;
        transform: rotate(55deg);
    }

    .title-bor-drw-wh::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #FFF;
        width: 36px;
        bottom: 25%;
        left: 80%;
        transform: rotate(-55deg);
    }
    
}


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

.title-bor-subblue1 {
    padding: 0.5em 2em 0.5em 1em;
    box-sizing: border-box;  /* 避免 padding 影響寬度 */
    clip-path: polygon(91.2% 0, 99.5% 50%, 91.2% 100%, 90% 100%, 36% 91.2%, 0 91.2%, 0 0);
    z-index: 10;
    background: #FFF;
}

    .title-bor-subblue1::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 65px;
        top: 17%;
        left: 85%;
        transform: rotate(55deg);
    }

    .title-bor-subblue1::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 65px;
        bottom: 17%;
        left: 85%;
        transform: rotate(-55deg);
    }

}

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

/* font */

	.title1 {  
		font-size: 1.5em;	
	}

	.title1-b {  
		font-size: 1.5em;		
		font-weight: bold;
	}

	.title2 {  
		font-size: 1.25em;	
	}

	.title2-b {  
		font-size: 1.25em;		
		font-weight: bold;
	}	
	
	.title3 {  
		font-size: 1.25em;	
	}

	.title3-b {  
		font-size: 1.25em;		
		font-weight: bold;
	} 
	
	.title6 {  
		font-size: 1.1em;	
	}

	.title6-b {  
		font-size: 1.1em;		
		font-weight: bold;
	}   
    
    
    
    
    
	.txt1 {  
		font-size: 1em;
		line-height: 155%;
	}

	.txt1-b {  
		font-weight: bold;
		font-size: 1em;
		line-height: 155%;
	}

	.txt2 {  
		font-size: 0.9em;	
	}

	.txt2-b {  
		font-weight: bold;
		font-size: 0.9em;
	}

	.txt5 {  
		font-size: 1em;
	}

	.txt5-b {  
		font-weight: bold;
		font-size: 1em;
	}
  
    

.title-bor-subblue1 {
    padding: 0.5em 2em 0.5em 1em;
    clip-path: polygon(94.7% 0, 100% 50%, 94.7% 100%, 90% 100%, 36% 94.7%, 0 94.7%, 0 0);
    z-index: 10;
    background: #FFF;
}

    .title-bor-subblue1::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 35px;
        top: 24%;
        left: 92%;
        transform: rotate(55deg);
    }

    .title-bor-subblue1::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 35px;
        bottom: 24%;
        left: 92%;
        transform: rotate(-55deg);
    }

    
    
	
/*-- 六角型div設定 --*/

.title-bor-drw {
    clip-path: polygon(87% 0, 100% 50%, 87% 100%, 55% 100%, 36% 87%, 0 87%, 0 0);
    z-index: 1;
}

    .title-bor-drw::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 36px;
        top: 25%;
        left: 81%;
        transform: rotate(55deg);
    }

    .title-bor-drw::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 36px;
        bottom: 25%;
        left: 81%;
        transform: rotate(-55deg);
    }


.title-bor-drw-wh {
    clip-path: polygon(87% 0, 100% 50%, 87% 100%, 55% 100%, 36% 87%, 0 87%, 0 0);
    z-index: 1;
}

    .title-bor-drw-wh::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #FFF;
        width: 36px;
        top: 25%;
        left: 81%;
        transform: rotate(55deg);
    }

    .title-bor-drw-wh::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #FFF;
        width: 36px;
        bottom: 25%;
        left: 81%;
        transform: rotate(-55deg);
    }
    
    
.title-bor-subblue {
    clip-path: polygon(87.5% 0, 96.5% 50%, 87.5% 100%, 55% 100%, 36% 87.5%, 0 87.5%, 0 0);
}

    .title-bor-subblue::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 36px;
        top: 25%;
        left: 83%;
        transform: rotate(55deg);
    }

    .title-bor-subblue::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 36px;
        bottom: 25%;
        left: 83%;
        transform: rotate(-55deg);
    }

    
 .title-bor-subblue2 {
    clip-path: polygon(86.5% 0, 93.5% 50%, 86.5% 100%, 55% 100%, 36% 86.5%, 0 86.5%, 0 0);
}

    .title-bor-subblue2::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 36px;
        top: 25%;
        left: 83%;
        transform: rotate(55deg);
    }

    .title-bor-subblue2::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 36px;
        bottom: 25%;
        left: 83%;
        transform: rotate(-55deg);
    }
    
    
 .title-bor-subblue3 {
    width: 7em;
    padding: 0.5em 2em 0.5em 0.5em;
    clip-path: polygon(81% 0, 94% 50%, 81% 100%, 90% 100%, 65% 100%, 0 81%, 0 0);
}

    .title-bor-subblue3::before {
        content: "";
        width: 35px;
        top: 24%;
        left: 75%;
    }

    .title-bor-subblue3::after {
        content: "";
        width: 35px;
        bottom: 24%;
        left: 75%;
    }
    
    
 .title-bor-subblue4 {
    width: 8em;
    height: auto;
    padding: 0.5em 2em 0.5em 0.5em;
    box-sizing: border-box;  /* 避免 padding 影響寬度 */
    clip-path: polygon(80.5% 0, 91.8% 50%, 80.5% 100%, 90% 100%, 70% 100%, 0 80.5%, 0 0);
    z-index: 10;
    background: #FFF;
}

    .title-bor-subblue4::before {
        content: "";
        width: 35px;
        top: 24%;
        left: 75%;
    }

    .title-bor-subblue4::after {
        content: "";
        width: 35px;
        bottom: 24%;
        left: 75%;
    }

    
   
.title-bor-subblue2r {
    display: inline-flex;
    position: relative;
    justify-content: flex-start;
    align-items: center;
    margin: 0 auto;
    width: 14em;
    height: auto;
    padding: 0.5em 2em 0.5em 0.5em;
    border-top:solid 1.5px #2855A5;
    border-bottom: solid 1.5px #2855A5;
    box-sizing: border-box;  /* 避免 padding 影響寬度 */
    clip-path: polygon(76.5% 0, 86.5% 50%, 76.5% 100%, 90% 100%, 55% 100%, 0 76.5%, 0 0);
    z-index: 10;
    background: #FFF;
}

    .title-bor-subblue2r::before {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 52px;
        top: 24%;
        left: 72%;
        transform: rotate(55deg);
    }

    .title-bor-subblue2r::after {
        content: "";
        position: absolute;
        height: 1.5px;
        background-color: #2855A5;
        width: 52px;
        bottom: 24%;
        left: 72%;
        transform: rotate(-55deg);
    } 
    
    
    
    
    

/* 2字 */
.title-bor-proinfc {
    clip-path: polygon(79.6% 0, 90% 50%, 79.6% 100%, 55% 100%, 36% 79.6%, 0 79.6%, 0 0);
}

    .title-bor-proinfc::before {
        height: 1px;
        width: 35px;
        top: 24%;
        left: 74%;
        transform: rotate(55deg);
    }

    .title-bor-proinfc::after {
        height: 1px;
        width: 35px;
        bottom: 24%;
        left: 74%;
        transform: rotate(-55deg);
    }
    
    
    
    
    
    
	
}

@media screen and (max-width: 736px) {      /* 736 */

	.bannertxt {  
		font-size: 1.7em;
        font-weight: bold;
		line-height: 140%;
	}
	
}



@media screen and (max-width: 600px) {
	
	.bannertxt {  
		font-size: 1.5em;
        font-weight: bold;
		line-height: 140%;
	}

}


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

	.bannertxt {  
		font-size: 1.3em;
        font-weight: bold;
		line-height: 140%;
	}
    
    
    
	.title1 {  
		font-size: 1.2em;	
	}

	.title1-b {  
		font-size: 1.2em;
		font-weight: bold;
	}
	
	
	.title5 {  
		font-size: 1.1rem;	
		line-height: 150%;
	}

	.title5-b {  
		font-size: 1.1rem;	
		line-height: 150%;
		font-weight: bold;
	}
	
	

}

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

 	.bannertxt {  
		font-size: 1em;
        font-weight: bold;
		line-height: 130%;
	}
       
    
    
    


}