@import url("./common.css");
html,body,div,span,applet,object,iframe,h1,h2,h3,h4,h5,h6,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,font,img,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,dl,dt,dd,fieldset,form,label,legend,caption,tfoot,thead{margin:0;padding:0;border:0;outline:0;}
blockquote,q{quotes:none}
blockquote:before,blockquote:after,q:before,q:after{content:'';content:none}
:focus{outline:0}
ins{text-decoration:none}
del{text-decoration:line-through}
/*body{font-family: 'Noto Sans TC', sans-serif;}*/
body {
    background: url("../images/1402045/1402045_icon1.png") repeat-y left 0, url(../images/1402045/1402045_icon2.png) repeat-y right 0, linear-gradient(to left, #c6b07f -10%, #f1f1f1 30%, #f1f1f1 60%, #c6b07f 110%);
  /*  background: url(../images/1402045/1402045_icon1.png) repeat-y left 0, url(../images/1402045/1402045_icon2.png) repeat-y right 0, linear-gradient(to left, #72438c -10%, #f1f1f1 30%, #f1f1f1 60%, #9f7fb1 110%);*/
    font-family: Arial, Microsoft JhengHei, "微軟正黑體", LiHei Pro, "儷黑體", PMingLiu, "新細明體", sans-serif;
}

a{text-decoration:underline;}
a:hover{text-decoration:none;}
ul,li{margin:0;padding:0;list-style-type:none;}

/*客製化從此開始*/
.bg_padding{padding:1%;}
.bgcolor0{background-color: #f5433700;linear-gradient(to left, #c6b07f -10%, #f1f1f1 30%, #f1f1f1 60%, #c6b07f 110%)}
.bgcolor1{/*background-color: #F6F6F6;*//*background-color: #ff8a00;*/background-color: #f3453700}
.bgcolor2{/*background-color: #F3F3F3;background-color: #c9bc81;*//*background-color: #ded4a6;*/background-color: #84614130;padding: 1%;}
.bgcolor3{/*background-color: #EEEEEE;*/background-color: #cddc3936;}
.bgcolor4{/*background-color: #E4E4E4;*/background-color: #734b893b}
.bgcolor5{/*background-color: #DFDFDF;*/background-color: #68467b;}
.color1{color: #b99233}
.color2{color: #F44336}
.color3{color: #c28300}
.color4{color: #13c0d6}
.color5{color: #F44336}
.color6{color: #68467b}

/*.title{font-size: 3rem;font-weight: 900;text-align: center;}*/
.title {font-weight: 900;text-align: center;font-size: 2.5em;line-height: 1.2em;font-weight: bold;font-family: "MStiffHeiHK", "Microsoft YaHei";text-shadow: 0 1px 2px #0000001f;text-shadow: rgb(255 255 255) 0px 0px 15px;letter-spacing: -3px;margin-top: 46px}
.subtitle {
    font-weight: 900;
    text-align: center;
    font-size: 2.2em;
    line-height: 1.2em;
    font-weight: bold;
    font-family: "MStiffHeiHK", "Microsoft YaHei";
    text-shadow: 0 1px 2px #0000001f;
    text-shadow: rgb(255 255 255) 0px 0px 15px;
    letter-spacing: -3px;
    border-bottom: 3px #f44336 dotted;
    display: inline-block;
    padding-bottom: 4px;
}
.subtitle i{font-size: 4rem;color: #e8960e;}
.category_link{width:1200px;margin:-50px auto 0;position: relative;}
.category_link ul{display: flex;justify-content: space-around;}
.category_link li{text-align: center;}
.category_link ul li b {font-size: 1rem;margin: 6px;vertical-align: middle;margin: 6px 0 6px 6px;}
.category_link ul a {
    /*background-color: #f54337;*/
    background-color: #72438c;
    padding: 5px 3% 7px;
    text-decoration: none;
    border-radius: 50px;
    color: #fff;
    font-size: 2.55rem;
    display: block;
    width: 170px;
    text-shadow: rgb(255 255 255) 0px 0px 15px;
    box-shadow: rgb(255 255 255) 0px 0px 15px;
    border: 4px #ffffffa3 dotted;
/*    border-left: 10px #ffffffa3 solid;
    border-right: 10px #ffffff52 solid;*/
    border-left: 10px #ffffff45 solid;
    border-right: 10px #ffffff24 solid;
}
.category_link ul a:hover{background-color: #13c0d6;}
.category_link ul li:hover .year{display:block;}

.category_link ul li .year{/*display:none;*/position: absolute;width: 146px;border-bottom: 2px #784b92 dotted;margin-left: 28px;}

.category_link ul li .year a{/*font-size: 2rem*/}
.category_link ul li .year a {
    background-color: #f54337;
    background-color: #72438c;
    padding: 5px 3% 7px;
    text-decoration: underline !important;
    border-radius: 50px;
    color: #784b91;
    font-size: 2rem;
    display: contents;
    width: 170px;
    text-shadow: rgb(255 255 255) 0px 0px 15px;
    box-shadow: rgb(255 255 255) 0px 0px 15px;
    border: 4px #ffffffa3 dotted;
    border-left: 10px #ffffff45 solid;
    border-right: 10px #ffffff24 solid;
    /*font-weight: bold;*/
}
.category_link ul li .year a:hover{font-weight: bold;}

/*.grade {
    background-color: #ffffff6e;
    border: 10px #ffffff99 solid;
    border: 10px #b992334d solid;
    border-left: 10px #b9923370 solid;
    border-right: 10px #f543376b solid;
    border-bottom: 10px #0eb6c787 solid;
    border-radius: 25px;
    margin: 2% 0;
    background: url(../../file/images/1402045/1402045_bg_0.png) no-repeat center, linear-gradient(to left, #c6b07f21 -10%, #f1f1f1 30%, #f1f1f1 60%, #c6b07f33 110%);
    background-size: 102% 100%;
}*/
.grade {
    background-color: #ffffff6e;
    border: 10px #ffffff99 solid;
    border: 10px #b992334d solid;
    border-left: 10px #b9923330 solid;
    border-right: 10px #f543376b solid;
    border-bottom: 10px #0eb6c787 solid;
    border-radius: 25px;
    margin: 2% 0;
    background: url(../../file/images/1402045/1402045_bg_0.png) no-repeat center, linear-gradient(to left, #c6b07f21 -10%, #f1f1f1 30%, #f1f1f1 60%, #c6b07f33 110%);
    background-size: 102% 100%;
    padding: 2.5% 1% 1.5% 0.5%;
}
.grade_top{padding: 1rem 0;}
.grade_list{padding: 0.5rem 0;}
.grade dt {
    font-size: 2.55rem;
    line-height: 4.2rem;
    font-family: "MStiffHeiHK", "Microsoft YaHei";
    color: #96731f;
    letter-spacing: -3px;
}
.grade dd {}
/*.grade.a1 dd {font-size: 1.75rem;color: #96731f;}*/
.grade.a1 dd {font-size: 1.5rem;line-height: 2.1rem;color: #96731f;/*margin: 0 4%;*/}
.grade.a1 b {color: #cb281d;margin-right: -10px;font-family: Verdana;}
.grade_top.b1 dd{font-size: 1.5rem;color: #96731f;}
.grade_top.b1 dd::before {
    font-family: "Font Awesome 5 Free";
    content: "\f559";
    display: inline-block;
    text-align: center;
    font-size: 1.5em;
    font-weight: 900;
    padding: 0 1%;
    margin: 0 0 0 1%;
    color: #f44336;
    vertical-align: middle;
}
.grade_top.b1 b {color: #cb281d;margin-right: -10px;font-family: Verdana;}

.grade_list{display: flex;flex-wrap: wrap;}
.grade_list dt{width: 100%;}
.grade_list dd{width: 25%;padding: 7px 0}
.grade_list dd {width: 42%;text-align: left;margin: 0 1% 0 7%}
.grade_list.b1{color: #96731f}
.grade_list.c1{color: #96731f;letter-spacing: -0.5px;}
.grade_list.c1 dd b{color: #f44336}
.grade_list.c1 dd b::before {
    font-family: "Font Awesome 5 Free";
    content: "\f559";
    display: inline-block;
    text-align: center;
    font-size: 1.5em;
    font-weight: 900;
    padding: 0 1%;
    margin: 0 0 0 1%;
    color: #f44336;
    vertical-align: middle;
}
.grade_list.c1 dd b {color: #cb281d;margin-right: -10px;font-family: Verdana;}
#event_fifth{color: #FFF}
.more_link ul{display: flex;justify-content: space-around;}
.more_link ul a{color: #fff9bf}
/*經驗談*/
.experience dl{text-align: justify;padding: 1rem 0;display: flex;flex-wrap: wrap;align-items: center;justify-content: center;margin: 0 2.5%;margin: 0 2.5% 2%;border-bottom: 5px #ffffff82 dotted}
.experience dt {
    font-size: 2.27rem;
    width: 100%;
    font-family: "microsoft yahei";
    font-weight: bolder;
    color: #ae8e00;
    text-shadow: rgb(255 255 255) 0 0 15px;
}
.experience .certificate{width: 100%;font-size: 1.45rem;}
.experience .school {margin-right: 0;font-weight: bold;font-family: "microsoft yahei";}
.experience .school b{color: #f44336}
.experience .school i {
    font-size: 4rem;
    color: #f44336;
    text-shadow: rgb(255 255 255) 0 0 15px;
    margin-right: 6px;
    margin-top: 2px;
    vertical-align: bottom;
}
.experience .winnericon {margin-bottom: -110px;margin-top: 50px;}
/* .experience .name{margin-left: 7px;} */
/*.experience .photo { width: 20%; padding: 10px 10px;position: relative;}*/
.experience .photo {/* width: 20%; */padding: 7px 10px;position: relative;text-align: center;margin-left: -22px;}
.experience .photo img {border-radius: 50%;border: 7px #12b5c4bd solid;border-left: 7px #f54337 solid;border-bottom: 7px #f54337bd solid;width: 140px}
/*.experience .photo::before {
    font-family: "Font Awesome 5 Free";
    content: "\f559";
    width: 180px;
    height: 80px;
    position: absolute;
    top: 0;
    right: 0;
    background: url(../images/1309019_rosette.png) no-repeat top / 100%; 
    font-weight: bold;
    color: #f44336;
}*/
.experience .content {width: 76%;font-size: 1.2rem;line-height: 2rem;padding-top: 18px;}
.experience .content strong {font-family: "microsoft yahei";color: #5f3b84;color: #866d00;font-weight: normal;}
.experience .content a{color: #866d00;}
.experience .more {
    background-color: #00BCD4;
    background-color: #ae8e008c;
    color: #FFF !important;
    text-decoration: none;
    border-radius: 25px;
    padding: 0px 10px;
    font-size: 1rem;
    display: inline-block;
    vertical-align: text-top;
}
.experience .more:hover{background-color:#5f3b84;}
/*土木公職*/
#public .grade_top{text-align: justify;}
/*土木所*/
/*#master .grade_list dd{width: 50%;}*/
/*#master .grade_list dd {
    width: 38%;
    text-align: left;
    margin: 10px 0% 0 9%;
    font-size: 1.6rem;
}*/
#master .grade_list dd {
    width: 41%;
    text-align: left;
    margin: 10px 0% 0 7%;
    font-size: 1.6rem;
}
/*土木技師*/

/*結構技師*/






@media all and (min-width: 1201px){
#BodyHeader_rwd,#topli{display:none;}
#BodyContentMainNavigator header h1,#BodyContentMainNavigator  a{font-size: 1.15em;}
#BodyContentMainNavigator header h1{display:inline-block;line-height:1.9em;}
#BodyContentMainNavigator header img{margin:auto 3px;}	
#BodyContainer{margin: 0 auto;text-align:center;}

/*資料集中1200px寬外框*/
#Master_title,#event_master,#event_sec,#event_third,#event_fourth,#event_fifth,#event_sixth{margin:0% auto;display:block;width:1200px;padding:30px 10px 10px;font-size:1.5rem;}
#Master_title{width: 100%;padding: 0;}
#event_fifth{padding:10px}
    
/*div section標籤段落*/
/* section p{font-size:1.8rem;line-height:1.9em;text-align:left;} */

/* bodyHeader */
#BodyHeader #header-share {line-height: 2;margin: 0 auto;/*background-color: #FFF;*/}	
#BodyHeader #header-share img {margin-bottom: 5px;}
#BodyHeader table{width: auto;}
#BodyHeader a,#BodyHeader{font-size: 1.2rem;}
#BodyHeader a {color: #333;}
#BodyHeader a:hover {text-decoration: none;position: relative;top: 2px;bottom: 2px;}

/* Footer */
#BodyFooter_rwd,#footer_line,#footer_address ul li,#footer_inline ul{display:inline-block;}
#BodyFooter_rwd{width:100%;margin-top: 0;background-color: #fff;padding-top: 1%;}
#footer_address,#footer_address #adinfo_out,#footer_address #adinfo{margin:0 auto;width:100%;}
#footer_inline ul,#footer_address ul{width:100%;margin:0% auto;}
#footer_inline a,#footer_address a{color:#000}
#footer_inline ul li{display:inline;margin:auto 1%;width:15%;}
#footer_address ul li{line-height:1.9em;font-size:0.95em;}
#adinfo_out #adinfo{width:50%;display:inline;margin:auto 1%;}
#footer_inline ul li img{width:10%;height:auto;vertical-align:middle;}
#footer_line{width:90%;border-top:thin solid #999;margin:2% 5%}


/* Footer end */

/*ask*/

#askarea_out,#askarea{display:inline-block;}
#askarea_out{background-color:#869240;width: 100%;padding-top:2%;}
#askarea{width: 100%;}
#askarea p {margin:0 auto;margin: 0.5rem 0;}
#askarea .asktitle {font-size: 1.6rem;color: #FFF;text-align: center;}
#askarea #formlist,#askarea input[type="submit"],#askarea input[type="reset"]{font-size: 1em;color: #FFF;}
#askarea #formlist{width: 1200px;margin:2% auto;padding-bottom: 0;text-align: left;font-size: 1.3rem;}
#askarea SELECT,#askarea input{border-radius: 7px;}
#askarea SELECT{width: 22%;background-color: #FFF;border: #FFF;padding: 0.5%;margin:auto 1% 1% auto;font-size: 1.2rem;}
#askarea input{background-color: #FFF;border: #FFF;padding: 0.5%;margin:auto auto 1% 1%;color: #585858;font-size: 1.2rem;}
#askarea input[type="submit"],#askarea input[type="reset"]{background-color: #eb543f;padding:0.5em;}
#askarea input[name="sContent"]{width:82%;}
#askarea input[name="sName"],#askarea input[name="sTelephone"],#askarea input[name="sEmail"]{width:24%;}
#askarea input[name="sRandomCode"]{width:10%;}
#askarea img {height: auto;}
/*ask END*/
#noie{color: #FFF;width: 100%;height:60px;text-align: center;border: 1px solid #006699;background-color: #3399CC;_z-index: 9999;z-index: 9999;	position:fixed; _top:expression(documentElement.scrollTop+"px");/*讓選單覆蓋內容不會隨著捲軸滑動而消失專用*/left: 0;top: 0;}
#noie a{color: #FC0;}
.hottxt{ color: #ffd942; font-size: 1.0em;}
}

@media all and (min-width: 1px) and (max-width: 1200px){
    /*隱藏的區塊*/
    #BodyHeader,.hottxt,#noie,#BodyContentMainNavigator,#BodyContentAd,#BodyMenu{display:none;}
    /*會撐開的版面控制*/
    #BodyContent,#BodyContainer_event,#BodyContentMainDetail_learning{width: 100%;}
    #BodyContent {padding:0;}
    #BodyContentMainDetail_learning{float:left;	margin:0;}
    /* Header */
    #BodyHeader_rwd {text-align: center;width:100%;height: auto;margin:0 auto;background-color:#FFF;position:fixed;top:0;float:left;z-index:9;}
    @media screen and (orientation:portrait){#BodyHeader_rwd img{max-width:50%;margin:2.5% auto;}}

    @media screen and  (orientation:landscape) {#BodyHeader_rwd img {max-width: 25%;margin:2% auto 2% auto;}}
    /*body*/
    #Master_title{display:inline-block;width:100%;padding:0;}/*主圖位置ID*/
    @media all and (orientation : portrait){#Master_title{margin-top: 15%;}}
    @media screen and  (orientation:landscape) {#Master_title{margin-top: 8%;}}
    
    /*資料集中寬外框*/
    #event_master,#event_sec,#event_third,#event_fourth,#event_fifth,#event_sixth{margin:0% auto;display:inline-block;width:98%;padding:1%;}
    /*div section標籤段落*/
    section p,div p{font-size:1.3rem;line-height:1.9em;text-align:left;}
    .category_link{width: 100%;}
    /* Footer */
    #BodyFooter_rwd {float: left;width: 100%;background-color: #FFF;margin-top: 0;padding-top: 20px;}
    #BodyFooter_rwd #footer_line {width: 100%;margin-bottom: 3%;margin-top: 5%;display: block;float: left;height: auto;text-align: center;border-top-width: thin;	border-top-style: solid;border-top-color: #999;}
    #BodyFooter_rwd #footer_inline a {color: #000;line-height: 2em;}
    #BodyFooter_rwd #footer_inline ul{float: left;padding:0;width:100%;margin-bottom: 1%;text-align:center;}
    #BodyFooter_rwd #footer_inline ul li img{max-width:40%;height:auto;	margin-bottom: 2%;}
    #BodyFooter_rwd #footer_inline ul li{float: left;display: inline-block;	margin-right: auto;	line-height: 2em;font-size: 1em;clear: both;width: 100%;}
    #BodyFooter_rwd #footer_address{margin-top: 0%;	float: left;width: 100%;margin-right: auto;text-align: center;margin-left: auto;}
    #BodyFooter_rwd #footer_address a {color: #000;line-height: 2em;}
    #BodyFooter_rwd #footer_address ul{float: left;padding:0;text-align: center;margin: 0.5%;width: 100%;clear: both;}
    #BodyFooter_rwd #footer_address ul li{float: left;display: block;width: 100%;line-height: 2em;text-align: center;font-size: .8em;}
    /* Footer end */
    
    /*ask*/
    #askarea{background-color:#869240;width: 98%;height: auto;float: left;padding:4% 1% 2% 1%;}
    #askarea .asktitle,#askarea .asktitle p{text-align: center;}
    #askarea .asktitle{font-size: 1.0em;color: #FFF;margin-bottom:5%;}
    #askarea p {margin: 0% auto auto 5%;width: 90%;font-size: 1rem;line-height: 1.5rem;}
    #formlist{width: 99%;float: left;margin:3% auto auto 0%;padding-right:1%;font-size: 0.8em;color: #FFF;}
    input[name="sContent"]{width:50%;}
    input[type="text"]{	width:99%;}
    SELECT,input{border-radius: 7px;font-size: 1.0em;margin:auto 1% 7% auto;background-color: #FFF;height:30px;}
    SELECT{width:100%;border: #FFF;	padding: 0.5%;}
    input{border: #FFF;padding: 1%;color: #585858;}
    input[type="submit"],input[type="reset"]{color:#FFF;background-color:#eb543f;-webkit-appearance:none;/*ios系統專用，默認的系統樣式*/font-size:1em;margin-top:5%;padding:1%;height:auto}
    input[type="radio"]{width:1em;height:1em;margin-left: 3%;}
    /*ask END*/
    
    /*TOP按鈕*/
    #topli,#topli a{color: #fff;text-decoration: none;line-height:50px;}
    #topli{width:50px;height:50px;text-align:center;border-radius: 9999em;background-color:#000;opacity:0.4;position:fixed;font-size: 15px;}
    @media screen and  (orientation:portrait) {#topli{right:1%;bottom:8%;}}
    @media screen and  (orientation:landscape){#topli{right:1%;bottom:15.8%;}}
    }
    
    
@media (min-width:992px) and (max-width:1199px) { 


}
    
@media (min-width:768px) and (max-width:991px) { 
    #BodyHeader_rwd{height: 130px;}
    #Master_title{margin-top:130px;}
}


@media (min-width:600px) and (max-width:767px) {


}

@media (max-width:600px) {
    #BodyHeader_rwd{height: 60px;}
    #Master_title{margin-top:60px;}
    @media (min-width:540px) {
        #BodyHeader_rwd{height: 80px;}
        #Master_title{margin-top:80px;}
    }
}
@media (max-width:767px) {
    .wrap_all{
    word-break: keep-all;
    overflow-wrap: break-word;
    -webkit-hyphens: auto;
    -moz-hyphens: auto;
    hyphens: auto;
    -webkit-text-size-adjust: 100%;
    }
    .nowrap{text-wrap: nowrap}
    .mb_noshow{display: none !important}
    .br_mb{display: block}
    body {background: url(../images/1402045/1402045_icon1.png) repeat-y left 0, url(../images/1402045/1402045_icon0.png) repeat-y right 0, linear-gradient(to left, #c6b07f -10%, #f1f1f1 30%, #f1f1f1 60%, #c6b07f 110%);}
    article img {max-width: 157% !important;height: auto;margin-left: -31% !important;}
    .title {
        font-size: 1.9rem;
        /* margin-top: 16px; */
        /* margin-bottom: 12px; */
        letter-spacing: -1px;
        width: 100%;
        margin: 10px auto;
    }
    .title_top{width: 75%;margin-top: 9%}
    .subtitle i {font-size: 3rem;}
    .category_link {margin: -25px auto 0;width: auto;}
    .category_link ul a {
    background-color: #72438c;
    padding: 5px 0% 7px;
    text-decoration: none;
    border-radius: 25px;
    color: #fff;
    font-size: 1.4rem;
    line-height: 1.7rem;
    display: block;
    width: 112px;
    text-shadow: rgb(255 255 255) 0px 0px 15px;
    box-shadow: rgb(255 255 255) 0px 0px 15px;
    border: 3px #ffffff36 dotted;
    border-left: 5px #ffffff45 solid;
    border-right: 5px #ffffff45 solid;
    text-align: center;
    }
    .category_link ul li b {font-size: 0.8rem;margin: 6px 0 6px 9px;}
    .category_link ul li .year a{font-size: 1.5rem !important}
    .category_link ul li .year {width: auto;}
    .category_link ul li .year{margin-left: 10px;}
    
    /*.grade dt {font-size: 1.6rem;line-height: 2rem;font-weight: bold;letter-spacing: -2px;text-indent: -25px;margin-left: 38px;}*/
    .grade {background-size: 106% 100%;}
    .grade dt {
        font-size: 1.5rem;
        line-height: 1.8rem;
        font-weight: bold;
        letter-spacing: -1px;
        text-indent: -25px;
        margin-left: 27px;
        margin-right: 1%;
        margin-bottom: 3px;
        white-space: break-spaces;
    }
    #master .grade_list dd {width: 100%;text-align: left;font-size: 1.2rem;margin-left: 4%;}
    
    .grade.a1 b {display: inline-block;}
    .grade.a1 dd {font-size: 1.25rem;margin: 0 0%;}
    .grade_top.b1 dd {
    font-size: 1.28rem;
    line-height: 1.6rem;
    color: #96731f;
    margin-bottom: 10px;
    margin-left: 32px;
    margin-right: 10px;
    text-indent: -16px;
    text-align: left;        
}
    .subtitle {
    font-size: 2.2rem;
    line-height: 2.3rem;
    padding-bottom: 7px;
    letter-spacing: -2px;}
    .experience dl{}
    .experience dt{font-size: 1.4rem;}
    .experience .photo{width: 25%;}
    .experience .photo {padding: 0px 10px 7px;text-align: center;margin-left: 0px;margin-top: ;}
    .experience .photo img {width: 120px;}
    .experience .content{width: 95%;font-size: 1.15rem;line-height: 1.7rem;}
    .experience .certificate {width: 100%;font-size: 1.15rem;}
    .experience .winnericon {margin-bottom: 0;margin-top: 0;float: left;}
    .grade_list dd {width: 47%;text-align: left;margin-left: 3% !important;font-size: 1.2rem !important;line-height: 1.7rem !important;}
    .more_link ul {display: flex;flex-direction: column;align-items: center;text-align: center;}
    

}