@import url(http://fonts.googleapis.com/css?family=Oswald:400,700,300);
@font-face {
    font-family: 'dinbold';
    src: url('../fonts/din_bold-webfont.eot');
    src: url('../fonts/din_bold-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/din_bold-webfont.woff2') format('woff2'),
         url('../fonts/din_bold-webfont.woff') format('woff'),
         url('../fonts/din_bold-webfont.ttf') format('truetype'),
         url('../fonts/din_bold-webfont.svg#dinbold') format('svg');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'dinmedium';
    src: url('../fonts/din_medium-webfont.eot');
    src: url('../fonts/din_medium-webfont.eot?#iefix') format('embedded-opentype'),
         url('../fonts/din_medium-webfont.woff2') format('woff2'),
         url('../fonts/din_medium-webfont.woff') format('woff'),
         url('../fonts/din_medium-webfont.ttf') format('truetype'),
         url('../fonts/din_medium-webfont.svg#dinmedium') format('svg');
    font-weight: normal;
    font-style: normal;
}
h2 em {color: #f29703;}
a{color:#15957c;}
a:hover{color:#4cc5ad; text-decoration:underline;}
.header .home-btn {
    background-color:#f29703;
}
.header .home-btn {
    background-color:#f29703;
}
.transaction-section ol i{
    color:#4cc5ad;
    border:3px solid #4cc5ad;
}
.footer-section {
    background-color:#3f3f3f;
    color:#fff;
}
.uibutton {
    background-color:#f29703;
}
.uibutton:hover {
    background-color:#f5c020;
}
.uibutton:active {
    background-color:#d8a50a;
}
.header-section h1 em{
color:#f29703;
}
.message-section {
    background: #48bea7; /* Old browsers */
    /* IE9 SVG, needs conditional override of 'filter' to 'none' */
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPHJhZGlhbEdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgY3g9IjUwJSIgY3k9IjUwJSIgcj0iNzUlIj4KICAgIDxzdG9wIG9mZnNldD0iMCUiIHN0b3AtY29sb3I9IiM0OGJlYTciIHN0b3Atb3BhY2l0eT0iMSIvPgogICAgPHN0b3Agb2Zmc2V0PSIxMDAlIiBzdG9wLWNvbG9yPSIjMjQ3MzY0IiBzdG9wLW9wYWNpdHk9IjEiLz4KICA8L3JhZGlhbEdyYWRpZW50PgogIDxyZWN0IHg9Ii01MCIgeT0iLTUwIiB3aWR0aD0iMTAxIiBoZWlnaHQ9IjEwMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
    background: -moz-radial-gradient(center, ellipse cover, #48bea7 0%, #247364 100%); /* FF3.6+ */
    background: -webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%,#48bea7), color-stop(100%,#247364)); /* Chrome,Safari4+ */
    background: -webkit-radial-gradient(center, ellipse cover, #48bea7 0%,#247364 100%); /* Chrome10+,Safari5.1+ */
    background: -o-radial-gradient(center, ellipse cover, #48bea7 0%,#247364 100%); /* Opera 12+ */
    background: -ms-radial-gradient(center, ellipse cover, #48bea7 0%,#247364 100%); /* IE10+ */
    background: radial-gradient(ellipse at center, #48bea7 0%,#247364 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#48bea7', endColorstr='#247364',GradientType=1 ); /* IE6-8 fallback on horizontal gradient */
}


/* Basic
----------------------------------------------------------------------------------------------------*/
p,
dl,
hr,
h1,
h2,
h3,
h4,
h5,
h6,
ol,
ul,
pre,
table,
address,
fieldset,
figure {
  margin-bottom: 15px;
}


/* Clear Floated Elements
----------------------------------------------------------------------------------------------------*/
/* http://sonspring.com/journal/clearing-floats */
.clear {
  clear: both;
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

/* http://www.yuiblog.com/blog/2010/09/27/clearfix-reloaded-overflowhidden-demystified */
.clearfix:before,
.clearfix:after {
  content: '\0020';
  display: block;
  overflow: hidden;
  visibility: hidden;
  width: 0;
  height: 0;
}

.clearfix:after {
  clear: both;
}

/*
  The following zoom:1 rule is specifically for IE6 + IE7.
  Move to separate stylesheet if invalid CSS is a problem.
*/

.clearfix {
  zoom: 1;
}


/* Common
----------------------------------------------------------------------------------------------------*/
*{	padding: 0;
	margin: 0;
	outline: none;
	background-repeat:no-repeat;
	border:none;
    -webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.scrollto {}
.localscroll {}
img{border: 0;}


/* Platforms */
.visible-phone{ }
.visible-tablet{}
.visible-desktop{}
.hidden-phone{}
.hidden-tablet{}
.hidden-desktop{}

/* Layout */
.mt1{ margin-top:10px;}
.mt2{ margin-top:20px;}
.mt3{ margin-top:30px;}
.mt4{ margin-top:40px;}
.ml1{  margin-left:10px;}
.ml2{  margin-left:20px;}
.ml3{  margin-left:30px;}
.ml4{  margin-left:40px;}
.mb1 { margin-bottom:10px;top: 0px;left:0px; }
.mb2 { margin-bottom:20px;top: 0px;left:0px; }
.mb3 { margin-bottom:30px;top: 0px;left:0px; }
.mb4 { margin-bottom:40px;top: 0px;left:0px; }
.pt1 { padding-top:10px; }
.pt2 { padding-top:20px; }
.pb1 { padding-bottom:10px; }
.pb2 { padding-bottom:20px; }
.bb1{ border-bottom:1px #ccc solid;}
.bt1{ border-top:1px #ccc solid;}
.bl1{ border-left:1px #ccc solid;}
.br1{ border-right:1px #ccc solid;}

.full-width{ width:100% !important; margin-left:0 !important; margin-right:0!important; }
.padding{ padding:10px;}
.alignCenter{ margin-left:auto; margin-right:auto;}
.textAlignCenter {text-align:center}
.textAlignRight{text-align:right}
.left{ float:left;}
.right {float:right}
.upper-case{text-transform: uppercase;}
.lower-case{text-transform:lowercase;}

/*grid_percent*/
.grid_percent,
.grid_left,
.grid_right{
	display:inline;
	float: left;
	position: relative;
	margin-left: 0;
	margin-right: 0;
	-webkit-box-sizing: border-box; /* Safari/Chrome, other WebKit */
	-moz-box-sizing: border-box;    /* Firefox, other Gecko */
	box-sizing: border-box;         /* Opera/IE 8+ */
}
.grid_percent.right{ float:right;}
.grid_percent.d1{width:100%;}
.grid_percent.d2{width:50%;*width:49.9%}
.grid_percent.d3{width:33.3%;*width:33.3%}
.grid_percent.d4{width:25%;*width:24.9%}
.grid_percent.d5{width:20%;*width:19.9%}

.grid_percent.p25{width:25%;*width:24.9%}
.grid_percent.p50{width:50%;*width:49.8%}
.grid_percent.p75{width:75%;*width:74.9%}

/*Multiple Columns Text*/
.two-col {
       -moz-column-count: 2;
       -moz-column-gap: 20px;
       -webkit-column-count: 2;
       -webkit-column-gap: 20px;
}
.three-col {
       -moz-column-count: 3;
       -moz-column-gap: 20px;
       -webkit-column-count: 3;
       -webkit-column-gap: 20px;
}
/* transition*/
.transition-background-color a,
.transition-background-color select{
    transition: background-color 0.2s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    -moz-transition: background-color 0.2s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Firefox 4 */
    -webkit-transition: background-color 0.2s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Safari and Chrome */
    -o-transition: background-color 0.2s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Opera */
}
.transition-all{
    transition:all 0.2s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    -moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Firefox 4 */
    -webkit-transition:all 0.2s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Safari and Chrome */
    -o-transition:all 0.2s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Opera */
}
.transition-width{
    transition: width 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    -moz-transition:width 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Firefox 4 */
    -webkit-transition:width 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Safari and Chrome */
    -o-transition:width 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Opera */
}
.transition-height{
	transition: height 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s;
	-moz-transition: height 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s;  /* Firefox 4 */
	-webkit-transition: height 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s;  /* Safari and Chrome */
	-o-transition: height 0.5s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Opera */
}

::-webkit-input-placeholder { color:#ccc; }
::-moz-placeholder { color:#ccc; } /* firefox 19+ */
:-ms-input-placeholder { color:#ccc; } /* ie */
input:-moz-placeholder { color:#ccc; }


/* -------------------------------------------------------------------------------------------------------------------------------------------- oversixty */
/*General*/
html {overflow-x:hidden;}
body{
    font-family:Arial, Verdana, sans-serif,新細明體;
    font-size:13px;
    line-height:18px;
	background-color: transparent;
	color: #4b4b4b;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
	font-weight:400;
	font-style: normal;
	}
pre,
code {
  font-family: 'DejaVu Sans Mono', Monaco, Consolas, monospace;
}
hr {
  border-top: 1px #e5e6e6 solid;
  clear: both;

}
h1,h2,h3,h4,h5,h6{}
h1 {font-size:42px; line-height:1.2em; font-weight:700; text-transform:uppercase; font-family:"dinbold"; }
h2 {font-size:24px; line-height:1.3em; font-weight:400; text-transform:uppercase; font-family:"dinbold";color:#333; margin-bottom:25px;}

h3 {font-size:17px; line-height:1.2em; font-weight:400; text-align:center;font-family:"dinbold"; text-transform:uppercase; color:#333 }
h4 {font-size:16px; line-height:1.2em; font-weight:400; font-family:"dinbold"; text-transform:uppercase; color:#333 }

a{ text-decoration:none;}
a:hover{
cursor:pointer;
transition: color .2s,background-color .2s;
-moz-transition: color .2s,background-color .2s; /* Firefox 4 */
-webkit-transition: color .2s,background-color .2s; /* Safari and Chrome */
-o-transition: color .2s,background-color .2s; /* Opera */
}
.block {
    float:left;
    width:100%;
    padding-top:40px;
    padding-bottom:40px;
    transition:all 0.2s cubic-bezier(0.8, 0, 0.2, 1) 0s;
    -moz-transition: all 0.2s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Firefox 4 */
    -webkit-transition:all .8s cubic-bezier(0.8, 0, 0.2, 1) .5s; /* Safari and Chrome */
    -o-transition:all 0.2s cubic-bezier(0.8, 0, 0.2, 1) 0s; /* Opera */
}
.row:before, .row:after {
content: " ";
display: table;
}
.row:after {
clear: both;
}
input.text {
    background:#fff;
    height:50px;
    padding-left:1em;
    padding-right:1em;
    font-size:18px;
}
.call-to-action{
    margin-top:40px;
    text-align:center;
}

/*header-section*/
.header-section {
    height:279px;
    background:url(../images/hero-1.jpg) center center;
    background-size:cover;
    padding-top:0 !important;
}
.header {
    background:url(../images/70black.png) repeat;
    height:100px;
}
.header .logo {
    margin-top:25px;
    margin-left:87px;
}
.header .brand {
    float: right;
    margin-top: 25px;
    margin-right: 27px;
}
.header .home-btn {
    top:0;
    position:absolute;
    width:30px;
    height:30px;
}
.header .home-btn img {
    top:9px;
    left:9px;
    position:absolute;
}
.header-section h1{
    text-align:center;
    margin-top:76px;
    color:#fff;
    font-weight:300;
    font-size: 23px;
}
.header-section h1 span{
    background:url(../images/70black.png) repeat;
    padding:25px 20px 22px;
}
.header-section h1 sup{
    display: inline-block;
    margin-top: -5px;
    font-size: 15px;
}
.header-section h1 em{
    font-weight:400;
}

/*curency-section*/
.curency-point {
    margin-bottom: 20px;
    text-align:center;
}
.ico-bg {
    width:154px;
    height:115px;
    display:block;
    margin-left:auto;
    margin-right:auto;
    margin-bottom:15px;
}
.ico-bg.curency-img img {
    margin-top: 13px;
}
/*grey-section*/
.grey-section {
    background-color:#f1f1f1;
}
.grey-section h2 {
    text-align: center;
}
.grey-section .call-to-action {
    margin-top:15px;
}
/*transaction-section*/
.transaction-section p sup {
    display: inline-block;
    margin-top: -4px;
    font-size: 10px;
}
.transaction-section .list-content {
    margin: 20px 0 25px;
    padding-left: 15px;
}
.transaction-section .list-content li {
    list-style: inherit;
    margin-bottom:3px;
}
.transaction-section .list-content p {
    margin-bottom: 0;
}
.transaction-section h3 {
    text-align: left;
}
.transaction-section .call-to-action {
    margin-top: 30px;
    text-align: left;
}
.transaction-section .value {
    margin: 42px 0 15px;
}
.transaction-section .card,
.transaction-section .value {
    padding-left: 34px;
}
.transaction-section .value img {
    display: inline-block;
}
.transaction-section .value .fees {
    width: 65%;
}
.transaction-section .value .value-item {
    width: 26%;
    margin-left:3%;
    margin-right:3%;
}

/*footer-section*/
.footer-section {
    padding-left:10px;
    padding-right:10px;
    color:#fff;
}
.footer-section p{
    font-size:10px;
    text-align:center;
    margin:auto auto 18px;
    line-height:15px;
}
.footer-section p sup{
    display: inline-block;
    margin-top: -2px;
    font-size: 10px;
}


/* ------------------------------------------------------------------------------------------------------------------------------------------------------ Tablet 1009*/
@media (max-width:1009px) {
    .uibutton {
        padding-top: 0;
    }
    /*header-section*/
    .header-section h1{
        /*font-size:38px;*/
        margin-top: 46px;
        padding: 10px 5px;
        background: url(../images/70black.png);
        font-size: 30px;
    }
    .header-section h1 span{
        background: none;
    }
    /*transaction-section*/
    .transaction-section .card .uibutton {
        width:100%;
    }
    .transaction-section .card img {
        width:100%;
        margin-bottom:30px;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------ Mobile 767*/
@media (max-width: 767px) {
    h2 {font-size:18px; margin-bottom:25px;}
    h2 em {display:block}
    h3 {font-size:16px;}
    .two-col {-webkit-column-count:1; text-align:center;}
    .block { padding-top:30px; padding-bottom:30px;}
    .uibutton {width:100%;}

    /*header*/
    .header {
        height:60px;
    }
    .header .logo {
        margin-left:50px;
        width:65px;
        margin-top:15px;
    }
    .header .brand {
        width: 65px;
        margin-top: 10px;
        margin-right: 0;
    }
    /*header-section*/
    .header-section {
        height:310px;
    }
    .header-section h1 {
        font-size:30px;
        width:110%;
        margin-left:-5%;
        line-height:30px;
        margin-top:80px;
    }
    .header-section h1 span {
        background:none;
        padding: 0;
    }

    /*curency-section*/
    .curency-point {
        margin-bottom:30px;
    }
    .ico-bg {
        width:80px;
        height:80px;
    }
    .ico-bg img{
        width:80px;
    }

    /*transaction-section*/
    .transaction-section .list-content {
        width:100%;
        margin-top:20px;
    }
    .transaction-section .card,
    .transaction-section .value {
        padding-left: 0;
        text-align:center;
    }
    .transaction-section .card img {
        max-width:300px;
        margin-left:auto;
        margin-right:auto;
    }
    .transaction-section .value .fees,
    .transaction-section .value .value-item {
        width: auto;
        max-width: 100%;
    }
}

/* ------------------------------------------------------------------------------------------------------------------------------------------------------ Mobile 480*/
@media (max-width: 480px) {
    .header-section h1 {
        margin-top: 70px;
    }