/* IMPORT RESET */
@import url("reset.css");

/* IMPORT 12 COLUMN RESPONSIVE GS */
@import url("responsive.gs.12col.css");
body {font-family: "Microsoft JhengHei", "Helvetica", 黑體-繁, sans-serif}
@media only screen and ( max-width: 30em ) /* 320 */ {
		.container {
	max-width: 100%!important;
    background-image: url(../images/bg-m-320.png);
	background-position: 25% 100%;
    background-repeat: no-repeat;
	background-size: contain;
    padding-bottom: 0;
}
	@media only screen and ( max-width: 40em ) /* 640 */ {
		.container {
	/*max-width: 100%!important;*/
    background-image: url(../images/bg-m.png);background-position: 25% 100%;
    background-repeat: no-repeat;
	background-size: contain;
    padding-bottom: 0;
		}}
}
@media only screen and (min-width: 736px) {
	.container {
    background-image: url(../images/bg-700.png);
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
    padding-bottom: 150px;
	background-size: contain;
}
}
@media only screen and (min-width: 961px) {
	.container {
	/*max-width: 100%!important;*/
    background-image: url(../images/bg.png);
    background-position: bottom 0 right 0;
    background-repeat: no-repeat;
    padding-bottom: 270px;
	background-size: contain;
}
}

.container p { font-size: 62.5%; line-height: 1.4em;  }
.container p.left { margin-left: 1em; margin-right: 1em }
.container ol { font-size: 62.5%; line-height: 1.4em;   }
.container ol li ol.font { font-size: 100%; line-height: 1.4em; list-style-type:lower-roman; }
.container_bg p { font-size: 62.5%; line-height: 1.4em;  }
.container_bg p.left { margin-left: 1em; margin-right: 1em }
.container_bg ol { font-size: 62.5%; line-height: 1.4em;  }
.text-justify{text-align: justify}


/*================================
HEADER
================================*/
#siteID { padding: 24px 0 10px 15px; }
#siteID h1 { font-size: 4em; font-weight: 400; font-family: "Microsoft JhengHei", "Helvetica", 黑體-繁, sans-serif; }
#siteID .description { font-size: 1.4em; }
/*================================
將圖像尺寸設為100%
================================*/
img { max-width: 100%; height: auto; width /***/: auto; 　/*僅IE8適用*/
}
/*===============================
contents
===============================*/
.box {  padding: 30px 15px 65px; margin-bottom: 0; font-size: 1.5em;  word-wrap: break-word; font-family: "Microsoft JhengHei", "Helvetica", 黑體-繁, sans-serif; }
.box:after { display: block; clear: both; height: 0; content: ""; }
.box h1 { font-size: 1.5em; font-weight: lighter; border-top: 1px dashed #9FA0A0; margin-top: -5px; padding-bottom: 15px; border-bottom: 1px dashed #00A1DF; margin-bottom: 20px; padding-left: 10px; color: #9FA0A0; line-height: 1.3; text-align: center; }
.box h2 { font-size: 1.2em; color: #00A1DF; background: #EFEFEF; border-left: 2px solid #00A1DF; border-right: 2px solid #00A1DF; padding: 5px 10px; margin-left: 0; margin-bottom: 20px; line-height: 1.3; text-align: center }
.box dl.sponsor { margin-left: -5px; font-size: .62em; line-height: 1.3em; text-align: left }
dl dt { color: #00A1DF; float: left; margin-right: -5px; padding: 5px;  }
dl dd { margin: -18px 0 -28px 0; padding: 5px 0 10px 77px; }
.box h3 { font-size: 1em; font-weight: bold;padding-left: 10px; line-height: 1.3; color: #00A1DF; }
.box h3 span { line-height: 1.3em; }
.box ol.square { list-style-type: square; font-size: .85em }
.box ol.lower { list-style-type: lower-alpha; font-size: 1em; margin-left: -25px }
.box ol img { margin-bottom: 15px; margin-left: 0 auto; line-height: 1.5; float: none }
.box ol span { color: #434248; }
.box ol span.blue { color: #00A1DF; }
.box ol span.green { color: #00B050 }
.box ol span.red { color: #FF0004; }
.box ol span.title { margin: 15px 0; line-height: 1.8em; font-size: 1.2em; color: #428AA7; border: thin #9FA0A0 solid; padding: 2px; }
.box ol span.tips { margin: 15px 0; line-height: 1.8em; font-size: 1em; color: #FF0004; }
.box p { margin-bottom: 15px;  }
.box p span.blue { color: #00A1DF; }
.box p span.green { color: #00B050 }
.box p span.red { color: #FF0004; }
.box p span.titleOrange { margin: 15px 0; line-height: 1.8em; font-size: 1.2em; color: #505050; border-left: 5px #F39800  solid; padding: 2px 5px; }
.box p span.title { margin: 15px 0; line-height: 1.8em; font-size: 1.2em; color: #505050; border-left: 5px #00A1DF  solid; padding: 2px 5px; }
.box p span.tips { margin: 15px 0; line-height: 1.8em; font-size: 1em; color: #FF0004; }
.box ul li p { list-style: none; }
.box li p { width: 250px; margin: 0 30px; overflow: hidden }
.box li p.none { width: 250px; margin: auto; overflow: hidden }

.box ol.font ul.list{font-size: 0.7em; width: 100%}
.box ol.font ul.list li { float: left;color: #000000;  line-height: 1.8em; text-decoration: none; width: 40%;  margin: 10px 10px; overflow: hidden }
.box li.path a { color: #000000; font-size: 0.9em; line-height: 1.8em; text-decoration: none; width: 110px; float: left; margin: 0 22px; overflow: hidden }
.box li.path a:hover { color: #f1bb4b; }
/*===============================
表格的裝飾
===============================*/	
.text-justify{text-align: justify}	
.text-left{text-align: left}
.text-center{text-align: center}
.text-right{text-align: right}
.text-inherit{text-align: inherit}
.table-responsive {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    -ms-overflow-style: -ms-autohiding-scrollbar;
}
.box .air table { width: 99%; border: #CCC 1px solid; margin: 0 auto; }
.box .air td.start { background-color: #fff; }
.box .air td.blue { background-color: #b3dcff; }
.box .air td { vertical-align: middle; border: #CCC 1px solid; padding: 20px 10px 10px 10px; }
.box .air td p { color: #222222;     }
.box .air td ol { color: #434248;  }
.box .air td table p { line-height: 1.2em }
.box .mix table { width: 90%; border: #CCC 1px solid; margin: 0px auto 20px auto; }
.box .mix td.start { background-color: #fff; }
.box .mix td { text-align: center; vertical-align: middle; border: #CCC 1px solid }
.box .mix td p { color: #434248; margin: 2px; padding: 5px;  }
.box .mix td ol { color: #434248; line-height: 1.2em }
.box ol table p { color: #434248; font-size: 1em; line-height: 1.2em }
.box ol li { margin-left: 2em; margin-right: 0; padding: 5px 0 5px 0; }
.box ol.font li { line-height: 1.4em;}
.box ol.fontB li { line-height: 1.4em; color: #00A1DF }
.box ol.big li { margin-left: 47px; margin-right: 0; padding: 0 20px 0 0; }
/*===============================
連結的裝飾
===============================*/
/*內容類的一般連結
.box a { color: #00A1DF; text-decoration: none; }
.box a:hover { color: #090; text-decoration: underline; }*/
/*===============================
照片的裝飾
===============================*/
/* 使用陰影的照片裝飾 */
.box img {  padding: 5px; box-shadow: 0 1px 3px #aaa; -webkit-box-shadow: 0 1px 3px #aaa; -moz-box-shadow: 0 1px 3px #aaa; behavior: url(PIE.htc); }
.box img.noshadow { max-width: 90%; background: #fff; padding: 10px; box-shadow: 0 1px 3px #fff; }
.aligncenter { display: block;   margin-bottom: 2em; }
.alignleft { display: block; float: left; margin-right: 15px; margin-bottom: 1em; }
.alignright { display: block; float: right; margin-left: 15px; margin-bottom: 1em; }
.alignright0 { display: block; float: right; margin-left: 0; margin-bottom: 1em; }
/*================================
詳細按鈕用
================================*/
p.more { margin: 40px 150px 10px; }
p.more a { position: relative; display: block; padding: 5px 15px 5px; color: #fff; text-align: center; text-decoration: none; background: #f1bb4b; border: 1px solid #e8e8e8; /*圓角*/ border-radius: 8px; -webkit-border-radius: 8px; -moz-border-radius: 8px; /*方塊陰影*/ box-shadow: 2px 2px 4px #aaa; -webkit-box-shadow: 2px 2px 4px #aaa; -moz-box-shadow: 2px 2px 4px #aaa; /*漸層*/ background: #f1bb4b; background: -webkit-gradient(#f1bb4b, #FF0); background: -moz-linear-gradient(#f1bb4b, #FF0); background: linear-gradient(#f1bb4b, #FF0); -pie-background: linear-gradient(#f1bb4b, #FF0); behavior: url(PIE.htc); }
p.more a:hover { background: #f1bb4b; color: #222; background: -webkit-gradient(#f1bb4b, #FF0); background: -moz-linear-gradient(#FF0, #f1bb4b); background: linear-gradient(#FF0, #f1bb4b); -pie-background: linear-gradient(#FF0, #f1bb4b); behavior: url(PIE.htc); text-decoration: none; }
/*================================
SIDEBAR的裝飾
================================*/
#sidebar { font-size: 1.3em; }
.sideinfo { display: flex; padding-top: 0; margin-bottom: 30px; }
.sideinfo h4, .ad h4 { font-size: 1.2em; border-bottom: 2px solid #66A9DD; padding-bottom: 4px; margin-bottom: 15px; }
.ad p { font-size: 0.9em; color: #e8e8e8; padding-bottom: 4px; margin-bottom: 5px; }
.sideinfo h5 { font-weight: bold; line-height: 1.2em; font-size: 0.9em; }
.newentry img { max-width: 50%; float: left; margin: 0 20px 0 0; border: 1px solid #999; padding: 3px; }
.newentry dd { margin-top: 10px; }
.newentry h5 a { color: #00A0E9; text-decoration: none; }
.newentry h5 a:hover { color: #069; }
.newentry p { 
width: 100%;
margin-bottom: 15px;
display: inline-block;
align-items: end;
justify-content: center;}
.icon-file-text-alt { font-size: 1.1em; margin: 0 5px 0; }
/*================================
FOOTER
================================*/
#footerContainer { margin-top: 20px; background: #000; }
#footerContainer p { text-align: center; color: #fff; padding: 10px 0; }

@media ( max-width : 768px ) {
/*內容區域側邊留白之設定*/
.span_8, .span_4 { padding-left: 10px; padding-right: 10px; }
/*網站LOGO大小*/
#siteID h1 { font-size: 3em; }
/*詳細按鈕的大小設定*/
p.more { margin: 20px 20px 0; }
p.more a { padding: 10px 0; font-size: 1.3em; }
}
@media only screen and (min-width: 961px) {
.newentry img { max-width: 20%; float: left; margin: 0 20px 0 0; border: 1px solid #999; padding: 3px; }
.box h1 { font-size: 1.5em; font-weight: lighter; border-top: 1px dashed #9FA0A0; margin-top: -5px; padding-bottom: 10px; padding-top: 10px; border-bottom: 1px dashed #00A1DF; margin-bottom: 20px; padding-left: 10px; color: #9FA0A0; line-height: 1.3; text-align: center; }
}

@media only screen and (min-device-width: 320px) and (max-device-width:413px), only screen and (min-width: 320px) and (max-width:413px) {
.box { background: #fff; font-size: 1.5em;  word-wrap: break-word; }
.box:after { display: block; clear: both; height: 0; content: ""; }
.box p span.title { text-align: center; font-size: 1.2em; }
.box p span.titleOrange { text-align: center; font-size: 1.2em; }
.box li p { width: 250px; margin: auto; overflow: hidden }
.box ul.list li a { color: #000000; font-size: 0.8em; line-height: 1.8em; text-decoration: none; width: 110px; float: left; margin: 15px 12px; overflow: hidden }
.box ul.list li a img { width: 110%; }
.box li.path a { color: #000000; font-size: 0.8em; line-height: 1.8em; text-decoration: none; width: 100px; float: left; margin: 0 20px; overflow: hidden }
.box .air table { width: 99%; border: #CCC 1px solid; margin: 0px auto 20px auto;  text-align: center }
.box .mix table { width: 90%; border: #CCC 1px solid; margin: 0px auto 20px auto;  text-align: center }
.box img.noshadow { max-width: 90%; background: #fff; padding: 10px; box-shadow: 0 1px 3px #fff; }
.box ol li { }
}
/*form*/
form > div { clear: both; overflow: hidden; padding: 1px; margin: 0 0 10px 25px; }
form > div > fieldset > div > div { margin: 0 0 5px 0; }
form > div > label, legend { width: 25%; float: left; padding-right: 10px; padding-top: 5px; font-size: 0.8em; }
form > div div >, form > div > fieldset > div { width: 75%; float: right; }
form > div > div > fieldset label { font-size: 1.5em; }
label span.red { color: #FF0004; ; }
fieldset { border: 0; padding: 0; }
form > div > div > input[type=text], form > div > div > input[type=email], form > div > div > input[type=phone], form > div > div > input[type=password], form > div > div > textarea { width: 50.5%; border-top: 1px solid #ccc; border-left: 1px solid #ccc; border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; -webkit-appearance: none; }
form > div > div > input[type=text], form > div > div > input[type=email], form > div > div > input[type=phone], form > div > div > input[type=password] { width: 50%; margin: 5px; padding: 10px 5px; -webkit-appearance: none }
form > div > div > input[type=text]:focus, form > div > input[type=email]:focus, form > div > div > input[type=phone]:focus, form > div > div > input[type=password]:focus, form > div > div > textarea:focus { outline: 0; border-color: #4697e4; -webkit-appearance: none; }

@media (max-width: 600px) {
form > div > label,  legend { width: 100%; float: none; margin: 0 0 5px 0; }
form > div > div >,  form > div > fieldset > div { width: 100%; float: none; }
form > div > div > input[type=text], form > div > div > input[type=email],  form > div > div > input[type=phone],  form > div > div > input[type=password], form > div > div > textarea,  textarea,  select { width: 90%; -webkit-appearance: none; }
form > input[type="button"], input[type="submit"], input[type="reset"] {width: 90%;
-webkit-appearance: none;

}
}

@media (min-width: 1200px) {
form > div > div > label,  legend { text-align: right; }
}
/*tourArticle*/
.tourArticle { padding: 20px 0px; background: #fff; }
.tourline1 { display: block; background: url(../images/tourline_01.png) top left no-repeat; background-size: 80px auto; margin: 15px 0px 0px 0px; padding: 10px 0px 30px 70px; color: #54bfc6; font-size: 170%; }
.tourline1 span { font-size: 90%; color: #333; }

@media screen and (max-width: 1000px) {
.tourline1 { background-size: 70px auto; margin: 15px 0px 0px 0px; padding: 10px 0px 10px 60px; font-size: 170%; }
}
.tourline2 { display: block; background: url(../images/tourline_03.png) center left no-repeat; background-size: 80px auto; padding: 30px 0px 30px 70px; line-height: 1.2em; color: #54bfc6; font-size: 170%; }
.tourline2 span { font-size: 90%; color: #333; }
.tourline p { font-size: 90%; color: #333; }

@media screen and (max-width: 1000px) {
.tourline2 { background-size: 70px auto; padding: 10px 0px 10px 60px; font-size: 170%; }
.tourline p { font-size: 90%; color: #333; }
}
.tourline3 { display: block; background: url(../images/tourline_03.png) center left no-repeat; background-size: 80px auto; padding: 30px 0px 30px 70px; color: #54bfc6; font-size: 170%; }

@media screen and (max-width: 1000px) {
.tourline3 { background-size: 70px auto; padding: 10px 0px 10px 60px; font-size: 170%; }
}
.tourline4 { display: block; background: url(../images/tourline_03.png) center left no-repeat; background-size: 80px auto; padding: 30px 0px 30px 70px; color: #ffffff; font-size: 170%; }

@media screen and (max-width: 1000px) {
.tourline4 { background-size: 70px auto; padding: 10px 0px 10px 60px; font-size: 170%; }
}
.tourline5 { display: block; background: url(../images/tourline_03.png) center left no-repeat; background-size: 80px auto; padding: 30px 0px 30px 70px; color: #ffffff; font-size: 170%; }

@media screen and (max-width: 1000px) {
.tourline5 { background-size: 70px auto; padding: 10px 0px 10px 60px; font-size: 170%; }
}
.tourline6 { display: block; background: url(../images/tourline_03.png) center left no-repeat; background-size: 80px auto; padding: 30px 0px 30px 70px; color: #ffffff; font-size: 170%; }

@media screen and (max-width: 1000px) {
.tourline6 { background-size: 70px auto; padding: 10px 0px 10px 60px; font-size: 170%; }
}
.tourline7 { display: block; background: url(../images/tourline_03.png) center left no-repeat; background-size: 80px auto; padding: 30px 0px 30px 70px; color: #ffffff; font-size: 170%; }

@media screen and (max-width: 1000px) {
.tourline7 { background-size: 70px auto; padding: 10px 0px 10px 60px; font-size: 170%; }
}
.tourline { display: block; background: url(../images/tourline_02.png) top left repeat-y; background-size: 80px auto; padding: 0px 0px 0px 100px; }

@media screen and (max-width: 1000px) {
.tourline { background-size: 70px auto; padding: 0px 10px 0px 75px; ; }
}
.tourlineend { display: block; background: url(../images/tourline_05.png) top left no-repeat; background-size: 80px auto; padding: 10px 0px 10px 70px; height: 70px; }

@media screen and (max-width: 1000px) {
.tourlineend { background-size: 70px auto; padding: 10px 0px 10px 60px; }
}
.tour2017 { font-size: 110%; }
.tourlineBox { position: relative; padding: 0px 0px 10px 0px; }
.tourlineBox h3 { padding: 0px 0px 6px 0px; color: #2faaaf; }
.tourlineBox2017 { position: relative; padding: 18px 0px 18px 0px; color: #333; }
.tourlineBox2017 h2 { font-size: 130%; color: #690; padding: 0px 0px 5px 0px; }
.tourlineBox2017 h3 { padding: 2px 0px 6px 0px; color: #2faaaf; }
.tourlineBox2017:before { content: ""; position: absolute; border-style: solid; border-width: 18px 18px 18px 0px; border-color: transparent #54bfc6 transparent transparent; left: -22px; top: 50%; margin-top: -20px; z-index: 10; }
.tourlineBox2017 a { padding: 0px 0px 0px 0px; }
.tourlineSpots { display: block; margin: 0 20px 0 0; overflow: hidden; padding: 17px; background-color: #FFF; border: #54bfc6 solid 5px }
.tourlineBox a { border: 0px #FFFF00 solid; }
.tourlineBox a:hover { border: 0px #FFFF00 solid; }
.tourlineBox2017 a:hover { border: 0px #FFFF00 solid; }
.tourlineBox a:hover * { background-color: #54bfc6; color: #FFF; }
.tourlineBox2017 a:hover * { background-color: #49b9a3; color: #FFF; }
.tourlineBox a:before { content: ""; position: absolute; border-style: solid; border-width: 18px 18px 18px 0px; border-color: transparent #54bfc6 transparent transparent; left: -18px; top: 50%; margin-top: -20px; z-index: 10; }
.tourlineBox2017 a:before { content: ""; position: absolute; border-style: solid; border-width: 18px 18px 18px 0px; border-color: transparent #ffffff transparent transparent; left: -14px; top: 50%; margin-top: -20px; z-index: 10; }
.tourlineBox a:hover:before { border-color: transparent #54bfc6 transparent transparent; }
.tourlineBox2017 a:hover:before { border-color: transparent #49b9a3 transparent transparent; }
.tourlineSpotsLeft { display: block; float: left; width: 32%; }

@media screen and (max-width: 1000px) {
.tourlineSpotsLeft { display: block; float: left; width: 100%; }
}
.tourlineSpotsLeft img { width: 100%; height: auto; display: block; }
.tourlineSpotsRight { display: block; line-height: 1.2em; float: right; width: 65%; color: #333; }

@media screen and (max-width: 1000px) {
.tourlineSpotsRight { display: block; float: right; width: 100%; color: #333; }
}
.tourlineSpotsRight h2 { color: #54bfc6; padding: 0px 0px 10px 0px; }
.tourlineSpotsRight span { position: absolute; top: 10px; right: 20px; padding: 0px 10px 0px 0px; }

@media screen and (max-width: 1000px) {
.tourlineSpotsRight h2 { padding: 15px 0px 15px 0px; }

}

/*tourArticle_end*/

/*round-button*/
.round-button_logo li:hover { background: #f5f5f5; }
/* PC向けおよび大型タブレット向けのレイアウトの指定：737px～960px */
@media only screen and (min-width: 736px) {
	.alignleft { display: block; float: left; margin-bottom: 1em; width: 30% }
	.aligncenter { display: block; margin:0 auto; width: 90% }
	.tag_logo { margin: 0 0 0 3%}
ul .round-button_logo li { float: left;  }
.round-button_logo li  { width: 31%; float: left; height: 0; margin-top: 7%; margin-bottom: 1%; margin-right: 2%; padding-bottom: 30%; border-radius: 50%; border: 2px solid #f5f5f5; overflow: hidden; background: #FFF; box-shadow: 0 0 3px gray; }
	
}
/* PC向けレイアウトの指定：961px以上では固定レイアウト */
@media only screen and (min-width: 961px) {
	.box ol.font ul.list li { float: left;color: #000000;  line-height: 1.8em; text-decoration: none; width: 13%;  margin: 10px 10px; overflow: hidden }
	.alignright0 { display: block; float: right;  width: 33.3%;margin-bottom: 2em; }
	.alignleft { display: block; float: left; margin-bottom: 1em; width: 30% }
	.tag_logo { margin: 0 0 0 15%}
ul .round-button_logo li { float: left;  }
.round-button_logo li  { width: 21%; float: left; height: 0; margin-top: 7%; margin-bottom: 1%; margin-right: 10%; padding-bottom: 20%; border-radius: 50%; border: 2px solid #f5f5f5; overflow: hidden; background: #FFF; box-shadow: 0 0 3px gray; }
	
}
@media only screen and ( max-width: 40em ) /* 640 */ {
.tag_logo { margin: 0 0 0 3%}
ul .round-button_logo li { float: left;  }
.round-button_logo li  { width: 31%; float: left; height: 0; margin-top: 7%; margin-bottom: 1%; margin-right: 2%; padding-bottom: 30%; border-radius: 50%; border: 2px solid #f5f5f5; overflow: hidden; background: #FFF; box-shadow: 0 0 3px gray; }
.round-button_logo li:hover { background: #f5f5f5; }
	.round-button_logo li img { display: block; width: 100%; padding: 3%; height: auto; }}

.button {
  background-color: #00A1DF;
  border: none;
  color: #FFFFFF;
  padding: 15px 32px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
	width: 100%;
}
.button:hover {background-color: #FF8300;}

.button2 {
	border-radius: 15px;
  background-color: #4eb5f1;
  border: none;
  color: #FFFFFF;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button2:hover {background-color: #FF8300;}

.button3 {
  border-radius: 10px;
  background-color: #FF8300;
  border: none;
  color: #FFFFFF;
  padding: 5px 10px;
  text-align: center;
  text-decoration: none;
  display: inline-block;
  font-size: 16px;
  margin: 4px 2px;
  cursor: pointer;
}
.button3:hover {background-color: #4eb5f1;box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);}
.disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

@media all and (max-width:30em){
.button, .button2, .button3 {display: block;
	margin: 4px 0;}
}


/*gallery */
.align-st li{
            display: flex;
        }
        .align-st p{
            align-self:center;
            display: inline-block;
            width: 50%;
        }
        .align-st .img-link{
            width: 50%;
			height: 200px;
			float: left;
			margin:0 auto 5px auto;
            display:inline-block;
            margin-right: 20px;
        }
        .align-st img{
            max-width: 100%;
        }




.box .column {
  width: 100%;
  min-height: 0;
  margin-bottom: 0px;
}
.box .photo {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;

.box img[src="images/loader.gif"]{
  width: 32px;
  margin: 30% auto;
}

.box .navigation img[src="images/loader.gif"]{
  margin: 0 auto;
}