@import url(http://fonts.googleapis.com/css?family=Oswald:400,300,700);
@import url(http://fonts.googleapis.com/css?family=Roboto:300,400,700,900);
/* line 5, ../../../../../Ruby193/lib/ruby/gems/1.9.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline; }

/* line 22, ../../../../../Ruby193/lib/ruby/gems/1.9.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
html {
  line-height: 1; }

/* line 24, ../../../../../Ruby193/lib/ruby/gems/1.9.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
ol, ul {
  list-style: none; }

/* line 26, ../../../../../Ruby193/lib/ruby/gems/1.9.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
table {
  border-collapse: collapse;
  border-spacing: 0; }

/* line 28, ../../../../../Ruby193/lib/ruby/gems/1.9.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle; }

/* line 30, ../../../../../Ruby193/lib/ruby/gems/1.9.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
q, blockquote {
  quotes: none; }
  /* line 103, ../../../../../Ruby193/lib/ruby/gems/1.9.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
  q:before, q:after, blockquote:before, blockquote:after {
    content: "";
    content: none; }

/* line 32, ../../../../../Ruby193/lib/ruby/gems/1.9.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
a img {
  border: none; }

/* line 116, ../../../../../Ruby193/lib/ruby/gems/1.9.1/gems/compass-core-1.0.3/stylesheets/compass/reset/_utilities.scss */
article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary {
  display: block; }

/* line 88, icon/*.png */
.icon-sprite, .icon-arleft, .icon-arright, .icon-blackLogoSmbk, .icon-blackLogobk, .icon-whiteLogoSmbk, .icon-whiteLogobk {
  background-image: url('../../images/icon-sd860d1592f.png');
  background-repeat: no-repeat; }

/* line 84, ../../../../../Ruby193/lib/ruby/gems/1.9.1/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */
.icon-arleft {
  background-position: 0 0;
  height: 21px;
  width: 11px; }

/* line 84, ../../../../../Ruby193/lib/ruby/gems/1.9.1/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */
.icon-arright {
  background-position: 0 -21px;
  height: 21px;
  width: 11px; }

/* line 84, ../../../../../Ruby193/lib/ruby/gems/1.9.1/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */
.icon-blackLogoSmbk {
  background-position: 0 -42px;
  height: 21px;
  width: 132px; }

/* line 84, ../../../../../Ruby193/lib/ruby/gems/1.9.1/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */
.icon-blackLogobk {
  background-position: 0 -63px;
  height: 21px;
  width: 132px; }

/* line 84, ../../../../../Ruby193/lib/ruby/gems/1.9.1/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */
.icon-whiteLogoSmbk {
  background-position: 0 -84px;
  height: 18px;
  width: 132px; }

/* line 84, ../../../../../Ruby193/lib/ruby/gems/1.9.1/gems/compass-core-1.0.3/stylesheets/compass/utilities/sprites/_base.scss */
.icon-whiteLogobk {
  background-position: 0 -102px;
  height: 18px;
  width: 132px; }

/* line 33, ../component/sass/style.scss */
* {
  margin: 0;
  padding: 0; }

/* line 39, ../component/sass/style.scss */
.Noto {
  font-family: "notos"; }

/* line 43, ../component/sass/style.scss */
.Notolite {
  font-family: "notolight"; }

/* line 48, ../component/sass/style.scss */
html,
body {
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  background: url(/Public/Home/images/backg.jpg);background-size:100%;
  /* The html and body elements cannot have any padding or margin. */ }
@media screen and (max-width: 740px){
	body {
		background-size:500%;
	}
}
/* line 58, ../component/sass/style.scss */
body {
  font-family: "Roboto", "notolight", sans-serif;
  font-size: 0.8rem; }

/* line 70, ../component/sass/style.scss */
h1 {
  font-size: 1.6rem;
  line-height: 1.8rem; }

/* line 75, ../component/sass/style.scss */
a {
  text-decoration: none; }

/* line 80, ../component/sass/style.scss */
a:hover {
  text-decoration: none; }

/* line 83, ../component/sass/style.scss */
.osmfont {
  font-family: "Oswald", sans-serif; }

/* line 87, ../component/sass/style.scss */
.black {
  color: black; }

/* line 91, ../component/sass/style.scss */
.wrapper {
  min-height: 100%;
  height: auto;
  font-size: 0.875rem;
  line-height: 1.2rem; 
  }
  /* line 100, ../component/sass/style.scss */
  .wrapper#main {
    /*background: #10103B;*/ 
	}

/* line 110, ../component/sass/style.scss */
.container {
  max-width: 1000px; }

/* line 114, ../component/sass/style.scss */
section {
  margin-bottom: 10px; }

/* line 117, ../component/sass/style.scss */
.sidebar {
  padding-left: 15px; }

/* line 121, ../component/sass/style.scss */
.ico {
  display: inline-block; }

/* line 125, ../component/sass/style.scss */
.animate, .btn.fDark {
  -webkit-transition: all .3s;
  -moz-transition: all .3s;
  -ms-transition: all .3s;
  -ms-transition: all .3s;
  transition: all .3s;
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  /* Chrome and Safari */
  -moz-backface-visibility: hidden;
  /* Firefox */
  -ms-backface-visibility: hidden;
  /* Internet Explorer */ }

/* line 137, ../component/sass/style.scss */
.bold {
  font-weight: bold; }

/* line 141, ../component/sass/style.scss */
.btn.fDark {
  background: #343434;
  color: white; }
  /* line 146, ../component/sass/style.scss */
  .btn.fDark:hover {
    background: black; }

/* line 10, ../component/sass/_modules.scss */
.topmenu {
  margin-top: 40px;
  padding-right: 15px;
  font-size: 0.8rem; }
  /* line 16, ../component/sass/_modules.scss */
  .topmenu .menuitem {
    text-align: right;
	padding-top: 15px;
	}
    /* line 18, ../component/sass/_modules.scss */
    .topmenu .menuitem li {
      display: inline-block;
      margin-left: 20px; }

/* line 29, ../component/sass/_modules.scss */
.topmenu a {
  font-size: 16px;
  letter-spacing: 0.3em !important; }

/* line 36, ../component/sass/_modules.scss */
.main .topmenu a {
  color: white;
  font-family: 微軟正黑體; }

/* line 42, ../component/sass/_modules.scss */
.subs .topmenu {
  margin-bottom: 150px;
  position: relative;
  background: white;
  z-index: 3; }
  /* line 47, ../component/sass/_modules.scss */
  .subs .topmenu a {
    color: #FFF;
    font-family: 微軟正黑體; }
    /* line 50, ../component/sass/_modules.scss */
    .subs .topmenu a.active {
      color: #000;
      font-weight: bold; }
    /* line 55, ../component/sass/_modules.scss */
    .subs .topmenu a:hover {
      color: #000; }

/* line 61, ../component/sass/_modules.scss */
.submenu {
  margin-top: 20px; }

/* line 65, ../component/sass/_modules.scss */
.maincontent {
  margin-top: 40px; 
  }
  /* line 67, ../component/sass/_modules.scss */
  .maincontent .siteSlogan {
    font-size: 1.7rem;
    color: #727272;
    width: 320px;
    line-height: 2.8rem; }

/* line 78, ../component/sass/_modules.scss */
.subscontent {
  padding-top: 30px;
  clear:both;
  font-family: 微軟正黑體;
  }
  /* line 82, ../component/sass/_modules.scss */
  .subscontent .sidebar {
    border-top: 1px solid black;
    padding-left: 0; }

/* line 88, ../component/sass/_modules.scss */
.pagnav {
  width: 120px;
   }

/* line 95, ../component/sass/_modules.scss */
.projectDes {
  color: #FFF;
  height: 100%;
  letter-spacing: 0.1em !important; 
  text-align:center;
  font-family: 微軟正黑體;}
  /* line 100, ../component/sass/_modules.scss */
  .projectDes .title {
    color: #FFF;
    margin-top: 40px;
    margin-bottom: 40px;
    font-size: 16px;
	font-family: 微軟正黑體;
    letter-spacing: 0.1em !important; }
  /* line 108, ../component/sass/_modules.scss */
  .projectDes .description {
    font-size: 12px;
    margin-bottom: 40px;
    letter-spacing: 0.1em !important;
     }
  /* line 115, ../component/sass/_modules.scss */
  .projectDes .meta {
    font-size: 11px;
    letter-spacing: 0.1em !important; }

/* line 122, ../component/sass/_modules.scss */
.newslist {
  padding: 0;
  margin: 0; }
  /* line 125, ../component/sass/_modules.scss */
  .newslist li {
    display: block;
    margin: 25px 0;
    font-size: 15px;
    line-height: 25px;
    letter-spacing: 0.1em; }
    /* line 132, ../component/sass/_modules.scss */
    .newslist li a {
      color: #727272; }
      /* line 135, ../component/sass/_modules.scss */
      .newslist li a.active {
        color: black; }

/* line 146, ../component/sass/_modules.scss */
.rightcontent {
  color: #FFF;
  font-size: 1rem;
  line-height: 1.5rem; 
  margin: 0 auto;
  font-family: 微軟正黑體;
  }
  /* line 149, ../component/sass/_modules.scss */
  .rightcontent h2 {
    color: #10103B;
    font-size: 25px;
    letter-spacing: 0.1em;
    line-height: 30px;
    font-weight: bold;
    margin-bottom: 30px; }
  /* line 160, ../component/sass/_modules.scss */
  .rightcontent .pcontent {
    font-size: 15px;
    letter-spacing: 0.1em !important;
    line-height: 25px; 
	text-align:center;}
    /* line 164, ../component/sass/_modules.scss */
    .rightcontent .pcontent p {
      margin: 15px 0;
      letter-spacing: 0.1em !important; }
    /* line 169, ../component/sass/_modules.scss */
    .rightcontent .pcontent img {
      margin-bottom: 15px; }
  /* line 174, ../component/sass/_modules.scss */
  .rightcontent img {
    display: block;
    height: auto;
    max-width: 100%;
	margin:0 auto;}

/* line 182, ../component/sass/_modules.scss */
.shareBlack {
  font-size: .6rem;
  color: #FFF; }

/* line 187, ../component/sass/_modules.scss */
.footer {
  letter-spacing: 0.1em !important;
  width: 100%;
  padding-top:50px;
   }
  /* line 197, ../component/sass/_modules.scss */
  .footer.dark {
    color: white; }

/* line 203, ../component/sass/_modules.scss */
.elevenpx {
  font-size: 11px;
  -webkit-transform: scale(0.91);
  display: inline-block;
  margin-left: -13px; }

/* line 210, ../component/sass/_modules.scss */
.whitefooter {
  letter-spacing: 0.1em !important;
  width: 100%;
  }

/* line 219, ../component/sass/_modules.scss */
.wording {
  color: #FFF;
  padding: 15px 0;
  font-size: 12px;
  line-height: 25px;
  letter-spacing: 0.1em !important; }
  /* line 225, ../component/sass/_modules.scss */
  .wording .title {
    color: black;
    clear: both; }

/* line 231, ../component/sass/_modules.scss */
.mapping {
  position: relative;
  height: 500px; }

/* line 236, ../component/sass/_modules.scss */
#map {
  height: 100%;
  position: absolute;
  width: 100%;
  z-index: 99;
  top: 0;
  left: 20px; }

/* line 245, ../component/sass/_modules.scss */
.masonry {
  margin: 0;
  padding: 0;
  -moz-column-gap: 0em;
  -webkit-column-gap: 0em;
  font-size: .85em; }

/* line 254, ../component/sass/_modules.scss */

  /* line 263, ../component/sass/_modules.scss */
  /*.item:before {
    content: '';
    position: absolute;
    bottom: 1px;
    left: 10%;
    width: 80%;
    height: 1px;
    background: black; }*/
  /* line 273, ../component/sass/_modules.scss */
  /*.item:after {
    content: '';
    position: absolute;
    right: 0;
    top: 10%;
    height: 80%;
    width: 1px;
    background: black; }*/
  /* line 283, ../component/sass/_modules.scss */
  .item .pname {
    height: 30px;
    margin-top:10px; 
	text-align:center;
	font-family: 微軟正黑體;}
  /* line 293, ../component/sass/_modules.scss */
  .item:hover img {
    opacity: .7; }

@media only screen and (max-width: 519px) and (min-width: 320px) {
  /* line 302, ../component/sass/_modules.scss */
  .masonry {
   } 
  .item {
	width:94%;
	float:left;
	background: #fff;
	padding: 2%;
	margin: 3%;
	}
  .item:nth-child(n+1) {
    clear: both;
}
   }
@media only screen and (max-width: 1023px) and (min-width: 520px) {
  /* line 312, ../component/sass/_modules.scss */
  .masonry {
    } 
  .item {
	width:46%;
	float:left;
	background: #fff;
	padding: 2%;
	margin: 2%;
	}
  .item:nth-child(2n+1) {
    clear: both;
}
	}
@media only screen and (max-width: 1139px) and (min-width: 1024px) {
  /* line 320, ../component/sass/_modules.scss */
  .masonry {
    } 
  .item {
	width:31.33%;
	float:left;
	background: #fff;
	padding: 2%;
	margin: 1%;
	}
  .item:nth-child(3n+1) {
    clear: both;
}	
	}
@media only screen and (min-width: 1140px) {
  /* line 328, ../component/sass/_modules.scss */
  .masonry {
	} 
  .item {
	width:23%;
	float:left;
	background: #fff;
	padding: 2%;
	margin: 1%;
	}
  .item:nth-child(4n+1) {
    clear: both;
}
}
@media only screen and (max-width: 767px) {
  /* line 336, ../component/sass/_modules.scss */
  .topmenu {
    margin-top: 20px !important;
    } }
/* line 344, ../component/sass/_modules.scss */
.navigation {
  list-style: none;
  width: 100%;
  position: fixed;
  top: 40px;
  height: 0;
  overflow: hidden;
  z-index: 3;
  transition: all 0.5s; }
  /* line 356, ../component/sass/_modules.scss */
  .navigation a {
    display: block;
    background: rgba(0, 0, 0, 0.85) url(../images/arrow_right.png) no-repeat right center;
    padding: 15px 30px;
    border-bottom: 1px solid #5a5a5a;
    color: white; }
    /* line 364, ../component/sass/_modules.scss */
    .navigation a:hover {
      background-color: rgba(255, 255, 255, 0.7);
      color: #101072; }
    /* line 371, ../component/sass/_modules.scss */
    .navigation a.hoverup {
      background-color: rgba(255, 255, 255, 0.7);
      color: #101072; }
  /* line 380, ../component/sass/_modules.scss */
  .navigation .enditem {
    position: absolute;
    bottom: 30px; }

/* line 386, ../component/sass/_modules.scss */
.nav-trigger {
  position: absolute;
  clip: rect(0, 0, 0, 0); }

/* line 391, ../component/sass/_modules.scss */
label[for="nav-trigger"] {
  position: absolute;
  top: 22px;
  right: 30px;
  z-index: 4;
  width: 30px;
  height: 30px;
  cursor: pointer;
  color: black;
  fill: black; }

/* line 410, ../component/sass/_modules.scss */
.nav-trigger:checked ~ .navigation {
  height: 250px;
  top: 60px; }

/* line 425, ../component/sass/_modules.scss */
.sloganCircle {
  width: 480px;
  height: auto;
  border-radius: 50%;
  }

/* line 433, ../component/sass/_modules.scss */
.icon-whiteLogo {
  height: auto;
  width: 300px; }

/* line 438, ../component/sass/_modules.scss */
.icon-whiteLogoSm {
  background: url(../../images/iflogo_white.svg) no-repeat;
  width: 200px; }

/* line 444, ../component/sass/_modules.scss */
.icon-blackLogo {
  height: auto;
  width: 400px;}

/* line 450, ../component/sass/_modules.scss */
.icon-blackLogoSm {
  background: url(../../images/iflogo_black.svg) no-repeat;
  height: 21px;
  width: 132px; }

/* line 457, ../component/sass/_modules.scss */
.icon-barsblack {
  background: url(../images/button.png) no-repeat;
  height: 30px;
  width: 30px; }

/* line 462, ../component/sass/_modules.scss */
.icon-barswhite {
  background: url(../images/button.png) no-repeat;
  height: 30px;
  width: 30px; }

/* line 468, ../component/sass/_modules.scss */
.black.title {
  color: #FFF;
  font-size: 16px; }

@media screen and (max-width: 740px) {
  /* line 4, ../component/sass/_responsive.scss */
  .footer, .whitefooter {
    height: 20px !important; }

  /* line 8, ../component/sass/_responsive.scss */
  .mapping {
    height: 100% !important;
	padding-left:0;
	padding-right:0;
	position: relative;
    padding-bottom: 65.25%;
	height: 0;
    overflow: hidden;
	}
  .mapping iframe{
  position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  /* line 13, ../component/sass/_responsive.scss */
  #map {
    height: 100%;
    width: 100%;
    z-index: 99;
    top: 0;
    left: 0; }

  /* line 22, ../component/sass/_responsive.scss */
  .subs .topmenu {
    margin-bottom: 20px !important;
	}

  /* line 26, ../component/sass/_responsive.scss */
  .subscontent {
   }

  /* line 30, ../component/sass/_responsive.scss */
  .siteSlogan {
    width: 100% !important;
    max-width: 320px; }

  /* line 37, ../component/sass/_responsive.scss */
  .sloganCircle {
    width: 310px;
    margin-left: auto;
    margin-right: auto;
     }

  /* line 48, ../component/sass/_responsive.scss */
  .specialDes {
    margin-left: 0;
    margin-right: 0;
    padding-left: 15px;
    padding-right: 15px; } }
@media screen and (max-width: 768px) {
  /* line 61, ../component/sass/_responsive.scss */
  .showMid {
    display: none; } }
@media screen and (min-width: 768px) {
  /* line 69, ../component/sass/_responsive.scss */
  .hideMid {
    display: none; } }
@media screen and (max-width: 1024px) {
  /* line 75, ../component/sass/_responsive.scss */
  .showLarge {
    display: none; } }
@media screen and (min-width: 1024px) {
  /* line 84, ../component/sass/_responsive.scss */
  .hideLarge {
    display: none; }

  /* line 88, ../component/sass/_responsive.scss */
  .remargin {
    margin-left: 0; } }