@charset "utf-8";

.fc-auto{display: inline-block;width: auto;} 
.title{position: relative;padding: 15px 0px;}
.title h3{font-weight: 600;position: relative;z-index: 0;display: inline-block;}
.title h3::before{background-color: #ffe300;width: 80%;height: 10px;display: inline-block;content: "";position: absolute;z-index: -1;left: 10%; top:25px;}
.title.bgY h3::before{background-color: rgba(255,255,255,0.8);}
.title svg{width: 30px;height: 30px;position: absolute;left: 0px;}

.title.fordog h3{padding-left: 35px;}
.title.fordog h3::before{width: 100%;left: 0px;}

.zindex1{position: relative;z-index: 1;}
.va_T{vertical-align: top;}

/*按鈕樣式*/
.mainbtn , a.mainbtn{
	border-radius: 15px;
	font-size: 0.8em;
	color: #333;
	line-height: 20px;
	margin: 5px;
	padding: 5px 15px;
	box-sizing: border-box;
	border-style: none;
	transition: all 0.5s;
	font-family: Arial, "微軟正黑體", "新細明體";
	display: inline-block;box-sizing: border-box;
}
.mainbtn:hover{color: #333;}
.bg_green{background-color: #3CC;}
.bg_green:hover{background-color: #2eb7b7;}
.bg_orange{background-color: #F90;}
.bg_orange:hover{background-color: #eb8d01;}
.bg_blue{background-color: #0CF;}
.bg_blue:hover{background-color: #03bae8;}
.bg_yellow{background-color: #fbe600;}
.bg_yellow:hover{background-color: #e0ce01;}
.bg_black , a.bg_black{background-color: #333;color: #FFF;}
.bg_black:hover{background-color: #2e374b;color: #FF0;}
.bg_gray{background-color: #CCC;}
.bg_gray:hover{background-color: #b7b6b6;}
.bg_red , a.bg_red{background-color: #ff7373;}
.bg_red:hover , a.bg_red:hover{background-color: #d84f4f;color: #FFF;}
.bg_lightblue{background-color: #95d9f0;}
.bg_lightblue:hover{background-color: #89c8dd;} 
.bg_deepblue{background-color: #174387;color: #fff;}
.bg_deepblue:hover{background-color: #05223A;color: #fff;} 
.bg_white{background-color: #fff;}

a.btn_goback{background-color: #CCC;font-size: 0.6em;float: right;}
a.btn_goback:hover{background-color: #b7b6b6;}
 
/*按鈕樣式 END*/


.layoutBox{padding: 10px;border-radius: 5px;background-color: #fff;box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);}
.layoutBox .layout_top{background-color:#91EEFD;padding: 8px;margin: -10px;margin-bottom: 10px;}
.layoutBox .layout_header{font-size: 1.2em;font-weight: 600;border-bottom: solid 1px #d4d4d4;padding: 10px;}

.main_Table{
	box-sizing: border-box;
	background: rgba(255,255,255,0.7);
	padding: 5px;
	width:100%; 
}

.main_Table th {
	padding: 5px 0px;
	color: #f45203;
	font-weight: bold;
	font-size: 1em;
	text-align: center;line-height: 18px;
	border-bottom: 1px solid #FF5D5C;
	background-color: rgba(255,255,255,0.5);
}
.main_Table th small{font-size: 0.5em;display: block;}
.main_Table td{
	text-align: center;
   padding: 5px;
}  
.main_Table .inLeft {
	text-align: left;
	padding-left: 8px;
}
.main_Table .goCenter {
    margin:0 auto;
}
.main_Table tr:nth-child(even)  {background-color: #efefef;}
.main_Table tr:nth-child(odd) {background-color: #fff;}
 
.main_Table th.td-head{background-color: #FF5D5C;color: #fff;}
.main_Table tr:nth-child(even) td.td-head  {background-color: #666;color: #fff;}
.main_Table tr:nth-child(odd) td.td-head {background-color: #ccc;}
 

 


.Table_List {
	box-sizing: border-box;
	padding: 10px; border-spacing: 2px;border-collapse: separate;
	width:100%;background-color: #efefef;border-radius: 8px;
}
.Table_List th{
	padding: 10px;
	text-align: center;
	padding-right: 8px; 
	color: #333;
	font-weight: 600;
    width: 150px;
    background-color: #d4d4d4;
}
.Table_List td{
	padding:5px; text-align:left;background-color: #fff;
}



/*頁數樣式*/
.pageArea{margin-top: 10px;}
.pageArea:after{display: block;content: "";clear: both;}
.pagesTitle{line-height: 45px;}
.pageArea select , .pageArea input[type=text]{height: 28px;vertical-align: middle;margin: 0px 2px;}
.pageArea input.pageinput{display: inline-block;width: 40px;}
.pages{ 
	display: inline-block;
	box-sizing: border-box;margin: 5px 0px;
}
 
.pages  a , .pages  a.current , .pages  span , .pages  span.current{
	font-size: 0.8em;
    box-sizing: border-box;
	border: solid 1px #efefef;
	display: inline-block;
	margin: 0px;
	color: #333;
	padding: 5px 12px;
	margin-left: -1px;
}
.pages  a:hover , .pages  span:hover{
	background-color: #fff;
}
.pages  a.current , .pages  a.current:hover , .pages  span.current , .pages  span.current:hover{
	background-color: #1440CD;
	border: solid 1px #1440CD;
	color: #fff;
}
/*頁數樣式  END*/

/*首頁*/
.vision_index{width: 100%;height: 95vh;background-color: #fff;background-size:cover;background-image: url("images/vision_index.jpg");background-repeat: no-repeat;background-color: #fff; background-position: center bottom;position: relative;}
.indexTitleFont{font-size: 3em;font-weight: 600;line-height: 3em;}
.indexFont{font-size: 1.2em;line-height: 1.6em;}

.vision_index{ animation-duration: 3s;animation-timing-function: ease-out;animation-name: visionAnimat;}

@keyframes visionAnimat {
    0% {background-size: 130%;} 
    40%{background-size: 110%; }
     100%{background-size: 100%; }
  }


.newsArea{}
.newsArea li:first-child{min-height: 450px;background-image: url("images/index_news_BG.jpg");background-size: cover;background-position: center center;}
.newsArea .hTitle{height: 100%;display: flex;align-items:center; justify-content:center;color: #fff;text-shadow: 0px 0px 3px rgba(0,0,0,0.75);}
 
.newsbox{padding: 10px;}
.newsbox dl{position: relative;padding-left: 150px;margin: 5px;border-bottom: dashed 1px #d4d4d4;}
.newsbox dt{position: absolute;left: 0px;width: 140px;padding: 10px; text-align: center;background-color:#ffe300; }
.newsbox dd{padding: 10px;background-color: #fff; overflow:hidden;white-space: nowrap;text-overflow: ellipsis;transition: all 0.5s;}
.newsbox dd:hover{background-color:#9AE3F5; }
.newsbox dd  a{color: #000;transition: all 0.5s;}
.newsbox dd  a:hover{color: #1A40F3;}

.govArea{font-size: 1em;}
.govArea ul{}
.govArea li:first-child{background-color: #ffe300;background-image: url("images/govBG.png");background-repeat: no-repeat;background-position: center center;background-size: 60%;}
.govArea li:last-child{min-height: 420px;background-image: url("images/index_gov_BG.jpg");background-size: cover;}
.govbox{margin: 20px 10%;}
.govbox .hTitle{line-height: 2.5em;}


.dogArea{padding: 30px 0px;}
.dogArea .hTitle{text-align: center;line-height: 2em;position: relative;}
.dogArea .hTitle::after{display: block; width: 200px;height: 200px;content: "";position: absolute;left: calc(50% - 230px);top:0px;background-image: url("images/dogAreatitle.png");background-size: 80%;background-repeat: no-repeat; z-index: 1;}

.dogArea ul.slickitems{padding: 0px;margin: 10px 60px;}
.dogArea ul.slickitems li{padding:5px;} 
.dogArea ul.slickitems .slick-arrow.slick-next {right: -50px;}
.dogArea ul.slickitems .slick-arrow.slick-prev{left: -50px;z-index: 1;}
.dogArea ul.slickitems .slick-dots{bottom: 0px;}

.dogboxshow{position: relative;max-height: 600px;}  
.dogboxshow a{display: block; transition: all 0.5s;width: 100%;height: 450px;border-radius: 20px;background-repeat: no-repeat;background-position: center center;background-size: cover;background-color: #efefef;}
.dogboxshow a:hover{opacity: 0.6;border-radius: 50px; 
    animation-duration: 0.5s;
    animation-timing-function: ease;
	animation-name: doganimatrun; }
.dogboxshow .dogname{position: absolute;width: 100%;text-align: center; bottom: 30px;left: 0px;color: #fff;font-size: 2em;font-weight: 600; text-shadow: 0px 0px 3px rgba(0,0,0,0.75),0px 0px 3px rgba(0,0,0,0.75),0px 0px 3px rgba(0,0,0,0.75);}  
 
@keyframes doganimatrun {
    20% {border-radius: 20px;transform: scale(1.1);}
    50% {border-radius: 15px;transform: scale(0.95);}  
    100%{border-radius: 50px;transform: scale(1); }
  }

/*最新消息*/
.vision_page{width: 100%;height: 400px;background-color: #fff;background-size: cover;display: flex;
align-items:center;
 justify-content:center; 
}
.vision_page h2{text-align: center;font-size: 2.8em;font-weight: 600;color: #000;margin-top: 5%;background-color:rgba(255,255,255,0.9);padding: 10px 30px;border-bottom: solid 5px #174387;}
.vision_page.v_news{background-image: url("images/vision_news.jpg");}

.newsListArea{font-size: 1.2em;padding-top: 50px;}
.newsListArea li{padding: 10px;}
a.newsList{display: block;background-color: #fff;height: 100%;color: #333;border: solid 1px #d4d4d4;background-color: #fff;transition: all 0.5s;}
a.newsList .imgbox{width: calc(100% + 2px);;height: 250px;background-position: center center;background-size: 120%;background-repeat: no-repeat;position: relative;left: -1px;top:-1px;transition: all 0.5s;}
.newsList dl{}
.newsList dt{border-bottom: dotted 1px #d4d4d4;padding: 8px;color: #1440CD;}
.newsList dd{padding: 10px;color: #333;}
a.newsList:hover{background-color: #ffe300;}
a.newsList:hover .imgbox{background-size: 110%;}

.news_date{color: #1440CD;border-bottom: dotted 1px #d4d4d4;font-size: 1.2em;} 
.news_title{font-size: 2em;line-height: 2em;font-weight: 600;}  
.news_con{padding: 10px;font-size: 1.2em;line-height: 1.5em;}

/*組織簡介*/
.vision_page.v_info{background-image: url("images/vision_gov.jpg");}
.infoimg{position: relative;text-align: center;}
.infoimg::before{display: block; width: 80%; max-width: 250px;height: 400px;background-color: #efefef;content: "";position: absolute;top:-50px;left: 15%; transform: rotate(75deg);z-index: -1;}
.infoimg.bgW::before{background-color: rgba(255,255,255,0.7);}
.infoimg img{width: 80%;max-width: 500px;position: relative;}
.infotxt{padding: 20px;font-size: 1.2em;line-height: 1.6em;}
.doghistorybox{background-color: #fff;border-radius: 25px;padding: 20px;}
.doghistorybox .ht{font-size: 1.5em;font-weight: 600;border-bottom: dashed 1px #d4d4d4;padding-bottom: 10px;}
ul.ProgressBar{text-align: left;font-size: 1em;margin-top: 10px;}
ul.ProgressBar li{padding-left: 60px;position: relative;vertical-align: top;position: relative;padding-bottom: 20px;padding-top: 10px;}  
ul.ProgressBar li::before{content: "";border-left: solid 2px #010194;position: absolute;top: 12px;left: 25px;height: 100%;}
ul.ProgressBar li:last-child::before{display: none;} 
ul.ProgressBar li .num{display: block;width: 50px;height: 50px;text-align: center;position: absolute;border-radius: 50%;background-color: #010194;left: 0px;top: 0px;font-size: 0.8em;line-height: 15px;padding-top: 10px;font-weight: 600;color: #fff;} 

.cutebox{border-radius: 30px;}
.cutebox h3.title{padding: 10px;padding-top: 30px; padding-left: 30px;}
.cutebox h3.title::before{display: none;}
.AdoptBG{height: 100%;position: relative;padding-bottom: 20px;margin-top: 10px;}
.AdoptBG .title h3{padding-left: 80px;}

 .AdoptBG .title h3::before{display: none;} 
.AdoptBG.BG_01::before{width: 100px;height: 100px;content: "";display: block;position: absolute;left: 10px;top: -15px;background-image: url("images/AdoptBG_01.png");background-size: cover;}
.AdoptBG.BG_02::before{width: 100px;height: 100px;content: "";display: block;position: absolute;left: 10px;top: -15px;background-image: url("images/AdoptBG_02.png");background-size: cover;}

/*犬隻介紹*/
.vision_page.v_dogInfo{background-image: url("images/vision_dogs.jpg");}

.dogimg{width: 100%;height: 550px;background-position: center center;background-size: cover;position: relative;}
.dogimg a.d_link{position: absolute;background-color: #fff;display: inline-block;border-radius: 60px;width: 180px;font-size: 1.5em;font-weight: 600;color: #333;
box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.1);bottom: 20px;left:calc(50% - 90px);padding: 10px 0px;text-align: center; }
.dogimg a.d_link svg{width: 30px;height: 30px;transform: scale(1.2); }
.dogimg a.d_link:hover{background-color: #6CC7F9;}

/* 相簿區 */
.dogphotoBox{background-color: #efefef;padding: 5px;} 
.dogphotoBox .flexslider.main .dataimg{width:100%;height: 400px;background-repeat: no-repeat;background-size: cover;background-position: center center;}
.dogphotoBox .flexslider.list .dataimg{width:100%;height: 120px;background-repeat: no-repeat;background-size: cover;background-position: center center;}
/* 輪播div 置中 */
.dogphotoBox .flexslider .slick-track {
display: flex;
justify-content: center;
align-items: center;
}

/* 所有圖片 */
.dogphotoBox .flexslider img {
display: block;
margin: auto;
height: auto;
max-width: 100%;
}

/* 顯示的大張圖 */
.dogphotoBox .flexslider.slider-for img {width: auto;max-height: 600px;}
.dogphotoBox .flexslider.slider-for .slick-slide {pointer-events: none;}
.dogphotoBox .flexslider.slider-for .slick-slide.slick-current.slick-active {pointer-events: all;}

/* 縮圖 */
.dogphotoBox .flexslider.slider-nav .slick-slide img {opacity: 0.5;}
.dogphotoBox .flexslider.slider-nav .slick-slide img:hover {cursor: pointer;}

/* 被選中的縮圖 */
.dogphotoBox .flexslider.slider-nav .slick-slide.slick-current img {opacity: 1;}
.dogphotoBox .flexslider.slider-nav .slick-slide, .dogphotoBox .flexslider.slider-nav img {max-height: 100px;}
.dogphotoBox .slick-prev {left: 5px;z-index: 100;}
.dogphotoBox .slick-next {right: 5px;}
.dogphotoBox .slick-prev ,  .dogphotoBox .slick-next{width: 30px;height: 30px;}
.dogphotoBox .slick-prev:before, .dogphotoBox .slick-next:before {
background-color: rgba(255,255,255,0.7);
border: solid 1.5px #333; 
border-radius: 3px;
width: 30px;height: 30px;
}

@media only screen and (max-width:1200px) {
.dogphotoBox .flexslider.slider-for img {max-height: 500px;}
}

@media only screen and (max-width:768px) {
.dogphotoBox .flexslider.slider-for .slick-list {width: 100%;}

.dogphotoBox .flexslider.slider-for .slick-slide,
.dogphotoBox .flexslider.slider-for img {max-height: 300px;}

.dogphotoBox .flexslider.slider-nav .slick-slide,
.dogphotoBox .flexslider.slider-nav img {max-height: 66px;}
}

.slickmovieBox{padding: 30px 65px;background-color: #efefef;height:508px;}
.slickmovie{}
.slickmovie li{}
.slickmovie iframe{width: 100%;height: 400px;}

.slickmovie .dogVedeo{width: 100%;height: 400px;}

.dogfater{width: 100%;max-width: 320px;margin: 15px auto;position: relative;}
.dogfater img{width: 100%;max-height: 400px;border-radius: 10px;}
.dogfater .na{font-size: 1.2em;font-weight: 600;color: #fff;text-shadow: 0px 0px 3px rgba(0,0,0,0.75),0px 0px 3px rgba(0,0,0,0.75),0px 0px 3px rgba(0,0,0,0.75);
position: absolute;bottom: 10px;display: block;width: 100%;text-align: center;}

.dogdata{background-color: rgba(255,255,255,0.8);padding: 10px;width: 100%;font-size: 1.2em;border-radius: 10px;}
.dogdata th{padding: 10px 20px;width: 150px; border-bottom: solid 5px #0851B3;text-align: center;}
.dogdata td{padding: 10px 20px;border-bottom: solid 5px #89DBF8;}






/*地圖區*/
.MapArea{width: 100%;position: relative;} 
.MapArea .mapPanel{box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);background-color: #fff;width: 100%;max-width: 350px; border-radius: 10px; position: absolute;}
.MapArea .panelbox{}
.MapArea .mapPanel .head{position: relative;padding: 10px;padding-right: 40px;border-bottom: solid 1px #2B70C1;}
.MapArea .mapPanel .panelbox:first-child .head{border-top-left-radius: 10px;border-top-right-radius: 10px;}
.MapArea .mapPanel .btn_clo{border-style: none;background-color:transparent;position: absolute;top:15px;right: 5px;cursor: pointer;font-size: 1.5em;color: #010194;transition: all 0.5s;}
.MapArea .mapPanel .btn_clo:hover{color: #40A5F8;}
.MapArea .mapPanel .btn_clo.onoff{transform: rotate(90deg);}
.MapArea .mapPanel .panelCon{padding: 10px;max-height: 600px; overflow-y: auto;}
.MapArea .mapPanel .panelCon img{width: 100%;}
.MapArea .mapPanel .panelCon .tt{padding: 10px 0px;font-weight: 600;}

.MapArea .vplayer{background-color: #fff;box-shadow: 0px 0px 8px 0px rgba(0,0,0,0.3);position: absolute;top:10px;left:10px;padding: 3px;height: 36px; border-radius: 30px;}
.MapArea .vplayer .tt{display: inline-block;line-height: 20px;vertical-align: middle;font-size: 1.05em;font-weight: 600;margin-left: 10px;}

.MapArea.searchMap{height: 800px;} 
.MapArea.searchMap .mapRightBlock{width: 100%;height: 100%;position: relative;}

.MapArea.searchMap .mapLeftBlock{background-color: #efefef;position: absolute;top:0px;left: 0px;width: 360px; height: 100%;}
.MapArea.searchMap .mapLeftBlock .vplayer{position: relative;top:auto;left:auto;border-radius: 0px;box-shadow: 0px 5px 5px 0px rgba(0,0,0,0.1);border-top: solid 1px #efefef;padding: 8px;height: auto;}
.MapArea.searchMap .mapLeftBlock .mapPanel{position: relative;margin: 5px;width: calc(100% - 10px);max-width: none; border-radius: 3px;box-sizing: border-box;}
.MapArea.searchMap .mapLeftBlock .head{padding-right: 10px;}
.MapArea.searchMap .mapLeftBlock .mapPanel .panelCon{max-height: 680px;height: 680px; }
 
@media only screen and (max-width:768px) {
.MapArea.searchMap{height: auto;} 
.MapArea.searchMap .mapRightBlock{height: 450px;}    
.MapArea.searchMap .mapLeftBlock{position: relative;width: 100%; height: auto;} 
    .MapArea.searchMap .mapLeftBlock .mapPanel{}  
    .MapArea.searchMap .mapLeftBlock .mapPanel .panelCon{max-height: none;height: auto; }
}

.forMap3DTop{padding-top: 90px;height:100vh;overflow: hidden;}
.MapArea.Map3D{height: 100%;}
.MapArea.Map3D .mapPanel{top:10px;left: 10px;background-color: #ffe300;padding: 8px 0px;}
 
@media only screen and (max-width:768px) {
    .forMap3DTop{padding-top:45px;}
}


.MapArea.Map3D .mapPanel .head{background-color: #ffe300;font-weight: 600;font-size: 1.2em;padding: 10px;}
.MapArea.Map3D .mapPanel .btn_clo{top:10px;}
.MapArea.Map3D .mapPanel .panelCon{max-height: 450px;background-color: #fff; }
.MapArea.Map3D .mapPanel .panelCon.dogtrainList{max-height:480px;display: none;margin-bottom: -8px;border-bottom-left-radius: 10px;border-bottom-right-radius: 10px;}

.MapArea.Map3D .mapPanel .panelCon.dogtrainList ul{}
.MapArea.Map3D .mapPanel .panelCon.dogtrainList ul li{padding: 1px 0px;position: relative;}
.MapArea.Map3D .mapPanel .panelCon.dogtrainList ul li .tt{display: inline-block;width: 90px;font-size: 1.1em;text-align: center;}

/*後台管理*/ 
.systemBg{width: 100%;background-color: #fff;padding-top: 100px;}

.uploadimgbox{display: inline-block;position: relative;border:solid 1px #efefef;background-color: #fff; width: 180px;text-align: center;}
.uploadimgbox img{width:100%;}
.uploadimgbox .btn-close{position: absolute;top:0px;right: 0px;display: inline-block;padding: 0px 5px; cursor: pointer;background-color: #fff;border-style: none;}
.uploadimgbox .btn-close:hover{background-color: #F47A7C;}

.upmov{padding: 5px;position: relative;}
.upmov input{padding-right: 80px;}
.upmov .btn{position: absolute;right: 8px;top:5px;width: 50px;}


/* switch滑動切換鈕==============================Start */
.MapArea .vplayer .move_switch_div{
    position: relative;
	width: 70px;
	height: 30px;
	display: inline-block;
    vertical-align: middle;
}
.move_switch input {display:none;}

/* The slider */
.move_slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  -webkit-transition: .4s;
  transition: .4s;
   border-radius: 50px;  
}

.switch_slider{background-color: #FF4F38;}
.switch_slider:before {
  position: absolute;
  content: "";
  height: 23px;
  width: 23px;
  border-radius: 30px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

.switch_slider:after{
	content: "OFF";
	line-height: 30px;
	font-weight: 600;
	text-align: right;
	display: block;
	color: #fff;
	font-size: 0.9em;
	padding-right: 10px;
	font-family: Arial, "微軟正黑體", "新細明體";
}
input:checked + .switch_slider{
  background-color: #37F600;
}

input:focus + .switch_slider {
  box-shadow: 0 0 1px #37F600;
}

input:checked + .switch_slider:before {
  -webkit-transform: translateX(40px);
  -ms-transform: translateX(40px);
  transform: translateX(40px);
}

input:checked + .switch_slider:after{ 
text-align: left;line-height: 28px;
padding-left: 10px;
	color: #333;
	font-weight: 600;
content:"ON";}


.btn_close{ color: #fff;position: absolute;top:0px;right: 0px;width: 30px;height: 30px; background-color: #FB5659;border-style: none; }
.btn_close:hover{background-color: #962B2D;}

.carousel-control-next, .carousel-control-prev{border-style: none;background-color: transparent;}

.dogtrainImg{margin: 0px auto;}
.dogtrainImg-m{display: none;} 

.btn_doglife{width: 110px;height: 110px; text-align: center;cursor: pointer;border-radius: 80px;border:dotted 3px #ccc;color: #666; padding-top: 15px;transition: all 0.5s;}
.btn_doglife:hover{color: #FB9400;border:dotted 3px #FB9400;}
.btn_doglife i {display: block;font-size: 2em;margin-bottom: 5px;}
.btn_doglife span{font-size: 1.25em;font-weight: 600;display: block;}


@media only screen and (max-width:768px) {
.dogtrainImg{display: none;}
.dogtrainImg-m{display:block;width: 100%;max-width: 360px;margin: 0px auto;}

.btn_doglife{width:auto;height: auto;padding-top: 0px;padding: 3px 15px; border-radius: 30px;}
.btn_doglife i , .btn_doglife span {display: inline-block;font-size: 1.2em;}
}