@import url(http://fonts.googleapis.com/earlyaccess/cwtexfangsong.css);

@import url(http://www.ruby.com.tw/css/layout.css);
@import url(http://www.ruby.com.tw/css/inside.css);
@import url(http://www.ruby.com.tw/css/font.css);
@import url(http://www.ruby.com.tw/css/bootstrap/bootstrap.min.css);
@import url(http://www.ruby.com.tw/css/bootstrap/bootstrap-theme.min.css);

html,body{
	padding:0px;
	margin:0px;
	color:#000;
	font-family:Arial,'Microsoft JhengHei', Adobe 繁黑體 Std B,新細明體,MSJHL,Arial,Avant Garde Medium BT, sans-serif, Gotham, "Helvetica Neue", Helvetica !important;
	font-size:12pt;
	line-height:20px;
	width:100%;
    height:100%;
    background: url(../images/bgPg-01.png);
}

@font-face {
	font-family: AdobeSongStdLight;
    font-family: DFHeiBlack01;
    font-family: DFHsiuShow01;
    font-family: DFLiKingHei01;
    font-family: DFLiSong01;
    src: url(fonts/AdobeSongStdLight.ttf) format("opentype");
    src: url(fonts/DFHeiBlack01.ttf) format("opentype");
    src: url(fonts/DFHsiuShow01.ttf) format("opentype");
    src: url(fonts/DFLiKingHei01.ttf) format("opentype");
  	src: url(fonts/DFLiSong01.ttf) format("opentype");
}

@font-face {
    font-family: DFHsiuShow01;
    src: url(fonts/DFHsiuShow01.ttf) format("opentype"); }
@font-face {
    font-family: AdobeSongStdLight;
    src: url(fonts/AdobeSongStdLight.ttf) format("opentype"); }

.flleft{float: left;}
.flright{float:right;}
.flclear{clear:both;content: '';width:100%;height:0;display:table;}
.flclear:after{clear:both;content: '';width:100%;height:0;display:table;}

.contentBox{width:1200px;margin:auto;display:block;}
.banner{display:block;position:relative;}
.formBox{
    display:block;margin-top:10px;}
.formBox:after{clear:both;content: '';width:100%;height:0;display:table;}
.formBoxLeft{display:block;width: 45%;vertical-align: top;float:left;}
.formBoxRight{display:block;width: 54.5%;margin-left:0.5%;vertical-align: top;float:left;}

.formBoxRight h1{font-family: 'Microsoft JhengHei';font-size:22px;margin-top:10px;margin-bottom:10px;text-align:center;}

.imgBox{display:inline-block;margin:0;vertical-align: top;top:0px;border:1px solid #ccc;}
.imgBox img{width:100%;vertical-align: top;}

.tbBox{display:block;background: #e60a84;border-radius: 6px;
    -webkit-border-radius:6px; -o-border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px;
    border-bottom-left-radius: 0;border-bottom-right-radius: 0;}

.tbBox img{width:130px;display:inline-block;}
.tbBox h2{margin:0;padding:0;font-size:22px;display:inline-block;padding-top:10px;padding-bottom:5px;color:#e60a84;font-weight:500;}
.tbTit{display:inline-block;width:44px;background: url(../images/titBg-01.png) top left no-repeat;background-size:cover;
    text-align:center;font-family: "Microsoft JhengHei";line-height: 44px; }
.tbBox .tbcol:first-child{width:22%;padding:10px 5px;}
.tbBox .tbcol:last-child{width:74%;}
.tbrow{display: block;border-bottom: 1px solid #40220f;}
.tbcol{display:inline-block;text-align:left;vertical-align: top;}

.inputBox{font-family:"Microsoft JhengHei";font-size:16px;background: #fff;display:block;color:#000;border:1px solid #e60a84;
    padding:5px;}
.inputBox label{text-align:left;padding-left:5px;line-height: 40px; vertical-align:middle;font-family: 'Microsoft JhengHei';
font-size:20px;font-weight:500;}
.inputBox input[type=text]{min-height:30px;width:99%;border:0px;background:#ffc2e0;margin: 5px 0px 5px 0px;color:#000;
    padding-left:2px;}
.inputBox select{border:0;font-size:16px;background: transparent;height:40px;margin-top:2px;width:100%;}
.inputBox .tbrow .tbcol:first-child{width:39%;}
.inputBox .tbrow .tbcol:nth-child(2){width:60%;}
.txtDesc{height:50px;}

.btnDef{
    background:linear-gradient(#e61673,#821341);
    border:1px solid #fff;
    font-family:Microsoft JhengHei;
    color:#fff;
    font-size: 22px;
    padding:15px 20px;
    border-radius: 10px;
    -webkit-border-radius:10px; -o-border-radius:10px; -moz-border-radius:10px; -ms-border-radius:10px;
    position: relative;
    margin:6px;
    min-width:300px;
}
.rubyicon{display:inline-block;width:30px;vertical-align: top;}
.btnTit{display:inline-block;vertical-align: top;}
.rubyicon img{width:100%;padding-top:0px;}
.btnDef:hover{background:linear-gradient(#e61673,#e61673);cursor:pointer;}
.btnBlue{background:linear-gradient(#16cee6,#137182);}
.btnBlue:hover{background:linear-gradient(#16cee6,#16cee6);cursor:pointer;}
.btnSpanBg{position: absolute;padding:0px;margin:0px;width:100%;top:0;left:0;}
.btnSpan{background:linear-gradient(rgba(255,255,255,0.6),rgba(255,255,255,0));width: 97%;
    border-radius: 6px;top:0px;left:0px;padding:10px;margin:auto;margin-top:3px;
    -webkit-border-radius:6px; -o-border-radius:6px; -moz-border-radius:6px; -ms-border-radius:6px;
    display:block;}
.iframeBox{width:1200px;height:674px;}

.mgnTop{margin-top:12px;}

.actBox{display:block;text-align:left;padding:10px;}
.actBox img{width:100%;}
.actxt{display:none;padding-top:20px;}
.actxtTop{display:block;}

.readicon{
    position: fixed;
    z-index:1000;
    display:block;
    bottom:10%;
    right: 2%;
    width:90px;
    height:100px;
    background: url(../images/readicon-01.png) top left no-repeat;
    color:#e61673;
    font-family:'Microsoft JhengHei';
    font-size:20px;
    line-height:21px;
    display:none;
    }

.readicon:hover{background: url(../images/Webp.net-gifmaker.gif) top left no-repeat;text-decoration:none;
    color:#ff3366;font-weight:bold;}
.flex-control-nav{bottom:20px;}
.hr1{display:block;margin:0;padding:0;background: url(../images/hr1-01.png) top left repeat-x;height:8px;width: 100%;}
.msgH1{color:#12a0ba;font-size:33px;margin-top:30px;font-family:'Microsoft JhengHei';text-align:center;line-height:36px;}
.noteH1{color:#e60a84;}
.actMsgP{margin:0;padding:0;font-family: 'Microsoft JhengHei';padding:10px;font-size:20px;}
.actMsgImg{padding:20px;}
.btnRow{display:block;text-align:center;margin:auto;}
.pgtxt{padding:10px;display:block;}
.iframeDiv{display:block;margin:auto;text-align:center;}
@media only screen and (max-width: 1280px){
    .contentBox{width:100%;}
    .iframeBox{width:100%;}
    .formBox{padding:10px;}
    .iframeBox{width:1024px;height:575px;margin:auto;}
}
@media only screen and (max-width: 1024px){
    .inputBox .tbrow .tbcol:first-child{width:100%;border-bottom:1px dotted #000;}
    .tb1 .tbrow .tbcol:first-child{background:#ffd4e2;}
    .inputBox .tbrow .tbcol:nth-child(2){width:100%;}
    .formBoxLeft{width:100%;text-align:center;display:auto;display:none;}
    .imgBox{width:80%;text-align:center;display:auto;}
    .formBoxRight{width:100%;}
    .iframeBox{width:990px;height:556px;margin:auto;}
    .msgH1{font-size:26px;line-height:28px;}
    .imgBox{width:98%;text-align:center;display:auto;}
}
@media only screen and (max-width: 990px){
    .iframeBox{width:750px;height:421px;margin:auto;}
    .msgH1{font-size:20px;line-height:22px;}
    .actMsgP{font-size:16px;}
}
@media only screen and (max-width: 750px){ 
    .iframeBox{width:600px;height:337px;margin:auto;}
}
@media only screen and (max-width: 600px){
    .iframeBox{width:400px;height:225px;margin:auto;}
    .formBoxRight h1{font-size:18px;}
    .tbBox h2{font-size:18px;}
    .tbTit{width:30px;line-height:30px;}
    .inputBox label{font-size:16px;}
    .readicon{font-size:16px;width:70px;background-size:100%;background-position:0px 10px;}
    .readicon:hover{background-size:100%;background-position:0px 10px;}
    .tbBox .tbcol:first-child{width:28%;}
    .tbBox .tbcol:last-child{width:68%;}
}
@media only screen and (max-width: 400px){
    .iframeBox{width:300px;height:169px;margin:auto;}
}