body, html, .wrap {
    width: 100%;
    height: 100%;
    position: relative;
    font-family: /*"Noto Sans TC",*/ "Microsoft JhengHei", \5FAE\8EDF\6B63\9ED1\9AD4, \65B0\7D30\660E\9AD4;
    color: #231815;
}

body {
    background-image: url(../img/bg.jpg);
    background-repeat: repeat;
    background-position: center top;
}

.body_b {
    background-image: url(../img/bg2.jpg);
}

.body_c {
    background-image: url(../img/bg3.jpg);
}

.wrap {
    padding: 46px 0;
    text-align: center;
    height: 85%;
    max-width: 1300px;
    margin: auto;
    height: auto;
}

.logo {
    position: absolute;
    left: 0;
    right: 0;
    z-index: 10;
    margin: auto;
    background-image: url(../img/logo.png);
    background-repeat: no-repeat;
    background-position: center top;
}

.logo_top {
    margin-top: 20px;
    height: 140px;
    /*	width:306px;
        height:181px;*/
    display: block;
    background-size: contain;
}

.logo_intro {
    background-image: url(../img/logo.png), url(../img/logo_season.png), url(../img/logo_2.png);
    left: inherit;
    top: 35%;
    right: 2%;
}

.logo_top a {
    width: 306px;
    height: 181px;
    display: block;
}

.logo_mv {
    width: 416px;
    height: 246px;
}

.logo_mv a {
    width: 416px;
    height: 246px;
    display: block;
}

.bg_decoration {
    background-repeat: no-repeat;
    background-position: center top;
    width: 50px;
    height: 100%;
    position: absolute;
    z-index: 1;
    background-size: contain;
}

.bg_ltop {
    background-image: url(../img/bg_ltop.png);
    background-position: left;
    left: 0;
}

.bg_rtop {
    background-image: url(../img/bg_rtop.png);
    background-position: right;
    right: 0;
}

a {
    font-size: 120%;
    color: #231815;
    font-weight: bold;
    text-decoration: blink;
    opacity: 1;
    filter: alpha(opacity=100);
    top: 0;
    position: relative;
    transition: opacity 1s, filter 1s, top 0.8s;
    -moz-transition: opacity 1s, filter 1s, -moz-transform 1s, top 0.8s; /* Firefox 4 */
    -webkit-transition: opacity 1s, filter 1s, -webkit-transform 1s, top 0.8s; /* Safari and Chrome */
    -o-transition: opacity 1s, filter 1s, -o-transform 1s, top 0.8s; /* Opera */
}

a:hover {
    opacity: 0.7;
    filter: alpha(opacity=70);
    top: -5px;
    transition: opacity 1s, filter 1s, top 0.8s ease-out;
    -moz-transition: opacity 1s, filter 1s, -moz-transform 1s, top 0.8s ease-out; /* Firefox 4 */
    -webkit-transition: opacity 1s, filter 1s, -webkit-transform 1s, top 0.8s ease-out; /* Safari and Chrome */
    -o-transition: opacity 1s, filter 1s, -o-transform 1s, top 0.8s ease-out; /* Opera */
}

.in {
    width: 96%;
    margin: auto;
    z-index: 9;
    position: relative;
    left: 0;
    right: 0;
    max-width: 1600px;
}

.in img, .in1, .in3 {
    display: inline-block;
}

.in1 img {
    height:;
    width: 100%;
}

.in3 img {
    height:;
    width: 100%;
}

.in4 img {
    height:;
    width: 33%;
}

.in3 {
    margin-left: 10px;
    width: 73%;
}

.in1 {
    margin-top: 180px;
    width: 24%;
}

.in2 {
}

.in4 {
    width: 100%;
    text-align: left;
    margin-top: 11px;
    position: relative;
}

.in2 img {
    height:;
    margin-top: 10px;
}

.content {
    padding-top: 40px;
}

.write_page_tit {
    padding-top: 40px;
}

.write_page_sub {
    padding: 20px;
}

.write_page_sub2 {
    width: 79%;
    text-align: left;
    margin: auto;
}

.write_page_sub2 img {
    height: 42px;
}

.write_page4_box {
    padding: 8% 0 2%;
}

.write_page_mark_top {
    height: 16%;
}

.write_page_mark {
    background-image: url(../img/write_page.png), url(../img/gif/write_page.gif), url(../img/gif/write_page2.gif);
    width: 662px;
    height: 537px;
    margin: auto;
    background-size: contain;
}

.write_start {
    padding-top: 50px;
}

.write_trial {
    margin-top: 50px;
    background-image: url(../img/write_trial.png);
    background-size: cover;
    width: 366px;
    height: 46px;
    margin: auto;
    text-align: center;
}

.write_trial2 {
    background-image: url(../img/write_trial2.png);
    background-size: cover;
    width: 212px;
    height: 46px;
    margin: auto;
    text-align: center;
    position: absolute;
    bottom: -20%;
}

.write_trial img {
    width: 5%;
    margin: 0 3%;
}

.write_works {
    margin: 20px auto;
    position: inherit;
}

.fb_profilePic {
    background-color: #ddd;
    width: 195px;
    height: 195px;
    position: relative;
    top: 4%;
    left: 50%;
}

.fb_profilePic img {
    width: 100%;
    height: 100%;
}

.fb_profilePic2 {
    background-color: #FFF;
    width: 90%;
    height: 84%;
    position: relative;
    top: 2%;
    left: 3%;
}
.write_page4_box .fb_profilePic2 {
    width: 95%;
	top: 0;
    left: 0;
}
.fb_profilePic3 {
    width: 14%;
    position: absolute;
    top: -50px;
    left: 3%;
    z-index: 11;
    border: solid 5px #FFF;
}
.fb_profilePic3 img, .fb_profilePic2 img {
    width: 100%;
}

.card_txt {
    position: absolute;
    left: -1px;
    bottom: -1%;
    z-index: 10;
    width: 80%;
    background-color: rgba(255, 255, 255, 1);
    padding: 0 0 0 22%;
    font-size: 80%;
    text-align: left;
    line-height: 140%;
}

.card_tit { /* position:absolute; margin-top:-4%; */
    font-size: 120%;
    font-weight: bold;
    line-height: 180%;
}

.rotation {
    transform: rotate(-9.6deg);
    -ms-transform: rotate(-9.6deg); /* IE 9 */
    -webkit-transform: rotate(-9.6deg); /* Safari and Chrome */
    -o-transform: rotate(-9.6deg); /* Opera */
    -moz-transform: rotate(-9.6deg); /* Firefox */
}

.select_card {
    width: 330px;
    height: 512px;
    margin: auto;
    display: inline-block;
    background-size: cover;
    margin: 0 1%;
}

.select_card_ap {
    position: absolute;
    display: block;
}

.select_card_bg {
    background-image: url(../img/select_card_00.png);
    z-index: 1;
}

.select_card0 {
    background-image: url(../img/select_card_0.png);
}

.select_card1 {
    background-image: url(../img/select_card_01.png);
}

.select_card2 {
    background-image: url(../img/select_card_02.png);
}

.select_card3 {
    background-image: url(../img/select_card_03.png);
}

.card_pic {
    background-color: #ddd;
    width: 78%;
    height: 46%;
    position: relative;
    top: 5.6%;
    left: 9.4%;
    z-index: 2;
}

.card_pic img {
    width: 100%;
}

.logo_pasta {
    position: absolute;
    bottom: 0;
    left: 5%;
    z-index: 11;
    background-image: url(../img/gif/logo_pasta2.png) /*,url(../img/gif/logo_pasta.gif);*/
    background-size: contain;
}

.logo_pasta a:hover {
    opacity: 1;
    filter: alpha(opacity=100);
    top: 0;
    position: relative;
    transition: opacity 1s, filter 1s, top 0.8s;
    -moz-transition: opacity 1s, filter 1s, -moz-transform 1s, top 0.8s; /* Firefox 4 */
    -webkit-transition: opacity 1s, filter 1s, -webkit-transform 1s, top 0.8s; /* Safari and Chrome */
    -o-transition: opacity 1s, filter 1s, -o-transform 1s, top 0.8s; /* Opera */
}

.btn_write_page {
    position: absolute;
    bottom: 20px;
    right: 5%;
    z-index: 11;
}

.btn_write_page a {
    margin: 0 20px;
}

.select_music {
    width: 330px;
    margin: 5% 1%;
    display: inline-block;
}

.select_music img {
    width: 100%;
}

.tracks {
    width: 70%;
    margin: auto;
    position: relative;
    background-image: url(../img/gif/tracks_1.gif);
    background-size: cover;
}

.tracks_hi {
    background-image: url(../img/gif/mt2.png), url(../img/gif/mt2.gif);
}

.tracks img {
    width: 100%;
}

.keyboard_box {
    width: 80%;
    margin: auto;
    position: relative;
    z-index: 10;
}

.keyboard_box img {
    width: 100%;
    max-height: 70px;
}

.text_input {
    font-family: "Microsoft JhengHei", \5FAE\8EDF\6B63\9ED1\9AD4, \65B0\7D30\660E\9AD4;
    margin: -4px 0 20px -4px;
    padding: 0 10px;
    height: 30px;
    width: 77.6%;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
    border: solid 2px #aaa;
    font-size: 120%;
}

.footer {
    position: relative;
    height: 140px;
}

.footer4 {
    margin-top: -30px;
}

.card_box {
    width: 1000px;
    position: relative;
    margin: auto;
    padding-top: 50px;
}

.btn_control_04 {
    position: absolute;
    right: -20px;
    z-index: 3;
    transform: rotate(9.8deg);
    -ms-transform: rotate(9.8deg);
    -webkit-transform: rotate(9.8deg);
    -o-transform: rotate(9.8deg);
    -moz-transform: rotate(9.8deg);
    display: none;
}

.card_edit {
    width: 212px;
    position: absolute;
    text-align: justify;
    right: -30px;
    top: 40%;
}

.card_edit img {
    width: 100%;
}

.btn_card {
    margin-top: 20px;
}

/*.card_edit .btn_writing{ width:47%;}*/
/*.card_edit .btn_color{ width:47%;position: relative;}*/

.play_icons {
    position: absolute;
    width: 10%;
    margin-top: -4%;
    right: 3%;
    z-index: 12;
	display:none;
}

.play_icons a {
    margin: 10%;
}

.play_icons img {
    width: 30%;
}

.write_trial_icon {
    position: absolute;
    margin-top: -20px;
    width: 100px;
}

.write_trial_icon img {
    width: 20%;
    margin: 0 5%;
}

.card_bg {
    background-image: url(../img/card_bg.png);
    width: 685px;
    height: 730px;
    background-size: cover;
    position: relative;
}
.body_b .card_bg {
    background-image: url(../img/card_bg2.png);
}
.body_c .card_bg {
    background-image: url(../img/card_bg3.png);
}
.card_bgfb {
    width: 180px;
    height: 192px;
    padding: 5px;
    display: inline-block;
}

.write_txt {
    position: relative;
    display: inline-block;
    width: 60%;
    line-height: 180%;
    font-size: 100%;
    text-align: left;
    padding-left: 2%;
}

.write_txt input {
    margin: -10px 0 0px 10px;
    padding: 0 10px;
    width: 40%;
}

.write_txt strong {
    font-size: 140%;
}

.fb_share {
    position: absolute;
    top: 40%;
    left: -54%;
}
.fb_share .write_trial_icon { position: relative; margin-left:auto; margin-right:auto; padding-bottom:10px; margin-top:-30px;}
.edit_card {
    position: absolute;
    z-index: 13;
    top: 55%;
    right: 0px;
    transition: all 4s ease-in-out;
}

.body_b .edit_card {
    top: 45%;
}

.body_c .edit_card {
    top: 45%;
}

.edit_card_hi {
    display: none;
    z-index: 0;
    transition: all 0.4s ease-in-out;
    opacity: 0;
}

.edit_card_pic {
    position: relative;
    width: 100%;
    text-align: center;
}

.edit_card_pic img {
    width: 20%;
    margin: 0.6%;
}

.body_b .edit_card_pic img {
    width: 34%;
    margin: 0.6%;
}

.body_c .edit_card_pic img {
    width: 34%;
    margin: 0.6%;
}

.edit_txt {
    position: absolute;
    z-index: 13;
    top: -82%;
    width: 47%;
    text-align: center;
    background-color: #FFF;
    padding: 10% 0;
    transition: all 0.4s ease-in-out;
}

.edit_txt_family {
    position: relative;
    text-align: center;
    padding: 0 0 3%;
}

.edit_txt_family font {
    margin: 0 0 10%;
    font-size: 140%;
    display: block;
}

.edit_txt_family font a {
    font-weight: normal;
}

.edit_txt_family font a:hover {
    font-weight: normal;
    text-decoration: underline;
}

.bgbk {
    background-color: rgba(255, 255, 255, 0.9);
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 12;
    transition: all 0.4s ease-in-out;
    opacity: 1;
    filter: alpha(opacity=100);
}

.edit_txt_hi {
    transition: all 0.4s ease-in-out;
    z-index: 0;
    opacity: 0;
    filter: alpha(opacity=0);
}

.bgbk_hi {
    background-color: rgba(255, 255, 255, 0);
    transition: all 0.4s ease-in-out;
    z-index: 0;
}

.top_menu {
    width: 40px;
    height: 40px;
    display: block;
    position: relative;
    cursor: pointer;
    margin: auto;
    top: 8px;
    transition: color 1s;
    color: #2A2A2A;
}

.top_menu:hover {
    color: #C00;
    transition: color 1s;
}

.top_menu:hover .icon-bar {
    background-color: #C00;
    height: 2px;
    margin: 6px 0;
    transition: background-color 1s;
}

.icon-bar {
    display: block;
    border-radius: 1px;
    background-color: #444;
    height: 1px;
    margin: 7px 0;
    transition: background-color 1s;
}

.icon-bar {
    -webkit-transition: background-color .35s, -webkit-transform .175s cubic-bezier(.215, .61, .355, 1), opacity .175s cubic-bezier(.215, .61, .355, 1);
    transition: background-color .35s, transform .175s cubic-bezier(.215, .61, .355, 1), opacity .175s cubic-bezier(.215, .61, .355, 1);
    -webkit-transform: translateY(0) translateZ(0);
    transform: translateY(0) translateZ(0);
}

.root_menu_closed .menu_line_1 {
    -webkit-transform: translateY(8px) rotate(45deg);
    -ms-transform: translateY(8px) rotate(45deg);
    transform: translateY(8px) rotate(45deg);
}

.root_menu_closed .menu_line_2 {
    opacity: 0;
}

.root_menu_closed .menu_line_3 {
    -webkit-transform: translateY(-8px) rotate(-45deg);
    -ms-transform: translateY(-8px) rotate(-45deg);
    transform: translateY(-8px) rotate(-45deg);
}

.mt_bg {
    background-image: url(../img/gif/tracks_2.gif);
    background-size: cover;
    width: 0;
    height: 100%;
    position: absolute;
    max-width: 100%;
    overflow: hidden;
    transition: width 1s ease-in-out;
}

.body_b .mt_bg {
    background-image: url(../img/gif/b/tracks_2.gif);
}

.body_c .mt_bg {
    background-image: url(../img/gif/c/tracks_2.gif);
}

.mt_bg2 {
    width: 100%;
}

.mt1_bg {
    background-image: url(../img/gif/mt1.png), url(../img/gif/mt1.gif);
}

.body_b .mt1_bg {
    background-image: url(../img/gif/b/mt1.png), url(../img/gif/b/mt1.gif);
}

.body_c .mt1_bg {
    background-image: url(../img/gif/c/mt1.png), url(../img/gif/c/mt1.gif);
}

.write_stop_hi {
    display: none;
}

.message {
    position: absolute;
    bottom: -3px;
    left: -2px;
    width: 101%;
    height: 12%;
}

.in_write_page_mark {
    position: absolute;
    width: 8%;
    margin: 3.6% 0 0 18.8%;
	z-index:1;
}

.in_write_page_mark img {
    width: 100%;
}

.not_a a {
    display: inline-block;
}

.not_a a:hover ,.not_a:hover{
    opacity: 1;
    filter: alpha(opacity=100);
    top: 0;
    position: relative;
    transition: opacity 1s, filter 1s, top 0.8s;
    -moz-transition: opacity 1s, filter 1s, -moz-transform 1s, top 0.8s; /* Firefox 4 */
    -webkit-transition: opacity 1s, filter 1s, -webkit-transform 1s, top 0.8s; /* Safari and Chrome */
    -o-transition: opacity 1s, filter 1s, -o-transform 1s, top 0.8s; /* Opera */
}

.not_a a:hover .select_card_play {
    animation: myfirst 1s cubic-bezier(0.45, 0.05, 0.55, 0.95); /*animation-iteration-count:infinite;*/
    -moz-animation: myfirst 1s cubic-bezier(0.45, 0.05, 0.55, 0.95); /*animation-iteration-count:infinite;*/ /* Firefox */
    -webkit-animation: myfirst 1s cubic-bezier(0.45, 0.05, 0.55, 0.95); /*animation-iteration-count:infinite;*/ /* Safari and Chrome */
    -o-animation: myfirst 1s cubic-bezier(0.45, 0.05, 0.55, 0.95); /*animation-iteration-count:infinite;*/ /* Opera */
}

@keyframes myfirst {
    0% {
    }
    50% {
        margin: 2% 0 0 1%;
        transform: rotate(5deg);
        -ms-transform: rotate(5deg); /* IE 9 */
        -webkit-transform: rotate(5deg); /* Safari and Chrome */
        -o-transform: rotate(5deg); /* Opera */
        -moz-transform: rotate(5deg); /* Firefox */
    }
    100% {
    }
}

@-moz-keyframes myfirst /* Firefox */
{
    0% {
    }
    50% {
        margin: 2% 0 0 1%;
        transform: rotate(5deg);
        -ms-transform: rotate(5deg); /* IE 9 */
        -webkit-transform: rotate(5deg); /* Safari and Chrome */
        -o-transform: rotate(5deg); /* Opera */
        -moz-transform: rotate(5deg); /* Firefox */
    }
    100% {
    }
}

@-webkit-keyframes myfirst /* Safari and Chrome */
{
    0% {
    }
    50% {
        margin: 2% 0 0 1%;
        transform: rotate(5deg);
        left: 1%;
        -ms-transform: rotate(5deg); /* IE 9 */
        -webkit-transform: rotate(5deg); /* Safari and Chrome */
        -o-transform: rotate(5deg); /* Opera */
        -moz-transform: rotate(5deg); /* Firefox */
    }
    100% {
    }
}

@-o-keyframes myfirst /* Opera */
{
    0% {
    }
    50% {
        margin: 2% 0 0 1%;
        transform: rotate(5deg);
        -ms-transform: rotate(5deg); /* IE 9 */
        -webkit-transform: rotate(5deg); /* Safari and Chrome */
        -o-transform: rotate(5deg); /* Opera */
        -moz-transform: rotate(5deg); /* Firefox */
    }
    100% {
    }
}

.not_a a:hover .select_card_play2 {
    animation: myfirst2 1s cubic-bezier(0.45, 0.05, 0.55, 0.95); /*animation-iteration-count:infinite;*/
    -moz-animation: myfirst2 1s cubic-bezier(0.45, 0.05, 0.55, 0.95); /*animation-iteration-count:infinite;*/ /* Firefox */
    -webkit-animation: myfirst2 1s cubic-bezier(0.45, 0.05, 0.55, 0.95); /*animation-iteration-count:infinite;*/ /* Safari and Chrome */
    -o-animation: myfirst2 1s cubic-bezier(0.45, 0.05, 0.55, 0.95); /*animation-iteration-count:infinite;*/ /* Opera */
}

@keyframes myfirst2 {
    0% {
    }
    50% {
        margin-left: -4%;
    }
    100% {
    }
}

@-moz-keyframes myfirst2 /* Firefox */
{
    0% {
    }
    50% {
        margin-left: -4%;
    }
    100% {
    }
}

@-webkit-keyframes myfirst2 /* Safari and Chrome */
{
    0% {
    }
    50% {
        margin-left: -4%;
    }
    100% {
    }
}

@-o-keyframes myfirst2 /* Opera */
{
    0% {
    }
    50% {
        margin-left: -4%;
    }
    100% {
    }
}
.mt_play {
    animation: mt_play_animation 1s cubic-bezier(0.45, 0.05, 0.55, 0.95); animation-iteration-count:infinite;
    -moz-animation: mt_play_animation 1s cubic-bezier(0.45, 0.05, 0.55, 0.95); animation-iteration-count:infinite; /* Firefox */
    -webkit-animation: mt_play_animation 1s cubic-bezier(0.45, 0.05, 0.55, 0.95); animation-iteration-count:infinite; /* Safari and Chrome */
    -o-animation: mt_play_animation 1s cubic-bezier(0.45, 0.05, 0.55, 0.95); animation-iteration-count:infinite; /* Opera */
}

@keyframes mt_play_animation {
    0% {
    }
    50% {
    opacity: 0.7;
    filter: alpha(opacity=70);
    }
    100% {
    }
}

@-moz-keyframes mt_play_animation /* Firefox */
{
    0% {
    }
    50% {
    opacity: 0.7;
    filter: alpha(opacity=70);
    }
    100% {
    }
}

@-webkit-keyframes mt_play_animation /* Safari and Chrome */
{
    0% {
    }
    50% {
    opacity: 0.7;
    filter: alpha(opacity=70);
    }
    100% {
    }
}

@-o-keyframes mt_play_animation /* Opera */
{
    0% {
    }
    50% {
    opacity: 0.7;
    filter: alpha(opacity=70);
    }
    100% {
    }
}
.video_poen_box {
    transition: height 1s ease-in-out;
    width: 98%;
    height: 96px;
    margin: 10px auto;
    overflow: hidden;
}

.video_poen_hi {
    transition: height 1s ease-in-out;
    height: 0;
}

.top_link {
    position: absolute;
    right: 2%;
    top: 2%;
    /*font-size: 12px;*/
    z-index: 99;
}
.top_link_fb {
	text-align:right;
}

.top_link a {
    margin: 0 10px;
}

.privacy {
    width: 53%;
    margin: auto;
    text-align: left;
    line-height: 160%;
}

.privacy ol {
    margin-left: 1.2em;
}

.works_wrap {
    width: 80%;
    margin: 2% auto;
    max-width: 1060px;
}

.works_wrap .card_bg {
    width: 260px;
    height: 280px;
    margin: 0 2%;
    display: inline-block;
}

.works_wrap .card_bg .fb_profilePic3 {
    top: -30%;
}
.works_wrap .card_bg .fb_profilePic6 {
	top: 10px;
    right: 22px;
    left: initial;
    position: fixed;
    border-width: 3px;
	}


.cf_p {
    position: relative;
    margin: 50px auto 0;
    width: 280px;
}

.write_trial .cf_p img {
    width: 100%;
    margin: 0;
}

.cf_p a {
    position: absolute;
}

.intro_div {
    width: 100%;
    position: relative;
    text-align: center;
}

.intro_div img {
    width: 98%;
}

.logo_intro .pic {
    position: relative;
    top: 70%;
    width: 50%;
}

.top_link a {
    background-size: contain;
    width: 100px;
    height: 14px;
    background-repeat: no-repeat;
    background-position: center;
    display: inline-block;
    margin: 0;
    padding: 0;
    color: rgba(35, 24, 21, 0);
}

.btn_top1 {
    background-image: url(../img/btn_top1.png);
}

.btn_top2 {
    background-image: url(../img/btn_top2.png);
}

.btn_top3 {
    background-image: url(../img/btn_top3.png);
}

.in img {
    background-size: cover;
    background-repeat: no-repeat;
}

.in_pic_bg1 {
    background-image: url(../img/in/1.jpg);
}

.in_pic_bg2 { /* background-image:url(../img/in/2.jpg);*/
}

.in_pic_bg3 {
    background-image: url(../img/in/3.jpg);
}

.in_pic_bg4 {
    background-image: url(../img/in/4.jpg);
}

.in_pic_bg5 {
    background-image: url(../img/in/5.png), url(../img/in/cf2/2.jpg);
    /*animation:myfirst_cf2 12s;animation-iteration-count:infinite;
    -moz-animation:myfirst_cf2 12s;animation-iteration-count:infinite;
    -webkit-animation:myfirst_cf2 12s;animation-iteration-count:infinite;
    -o-animation:myfirst_cf2 12s;animation-iteration-count:infinite;
    }
    @keyframes myfirst_cf2
    {
    0% {background-image:url(../img/in/cf2/2.jpg);}
    33% { background-image:url(../img/in/cf2/3.jpg);}
    66% {background-image:url(../img/in/cf2/4.jpg);}
    100% {background-image:url(../img/in/cf2/2.jpg);}
    }

    @-moz-keyframes myfirst_cf2
    {
    0% {background-image:url(../img/in/cf2/2.jpg);}
    33% { background-image:url(../img/in/cf2/3.jpg);}
    66% {background-image:url(../img/in/cf2/4.jpg);}
    100% {background-image:url(../img/in/cf2/2.jpg);}
    }

    @-webkit-keyframes myfirst_cf2
    {
    0% {background-image:url(../img/in/cf2/2.jpg);}
    33% { background-image:url(../img/in/cf2/3.jpg);}
    66% {background-image:url(../img/in/cf2/4.jpg);}
    100% {background-image:url(../img/in/cf2/2.jpg);}
    }

    @-o-keyframes myfirst_cf2
    {
    0% {background-image:url(../img/in/cf2/2.jpg);}
    33% { background-image:url(../img/in/cf2/3.jpg);}
    66% {background-image:url(../img/in/cf2/4.jpg);}
    100% {background-image:url(../img/in/cf2/2.jpg);}
    */
}

.in_pic_bg6 {
    background-image: url(../img/in/6.png), url(../img/in/cf3/2.jpg);
    /*animation:myfirst_cf3 12s;animation-iteration-count:infinite;
    -moz-animation:myfirst_cf3 12s;animation-iteration-count:infinite;
    -webkit-animation:myfirst_cf3 12s;animation-iteration-count:infinite;
    -o-animation:myfirst_cf3 12s;animation-iteration-count:infinite;
    }
    @keyframes myfirst_cf3
    {
    0% {background-image:url(../img/in/cf3/2.jpg);}
    33% { background-image:url(../img/in/cf3/3.jpg);}
    66% {background-image:url(../img/in/cf3/4.jpg);}
    100% {background-image:url(../img/in/cf3/2.jpg);}
    }

    @-moz-keyframes myfirst_cf3
    {
    0% {background-image:url(../img/in/cf3/2.jpg);}
    33% { background-image:url(../img/in/cf3/3.jpg);}
    66% {background-image:url(../img/in/cf3/4.jpg);}
    100% {background-image:url(../img/in/cf3/2.jpg);}
    }

    @-webkit-keyframes myfirst_cf3
    {
    0% {background-image:url(../img/in/cf3/2.jpg);}
    33% { background-image:url(../img/in/cf3/3.jpg);}
    66% {background-image:url(../img/in/cf3/4.jpg);}
    100% {background-image:url(../img/in/cf3/2.jpg);}
    }

    @-o-keyframes myfirst_cf3
    {
    0% {background-image:url(../img/in/cf3/2.jpg);}
    33% { background-image:url(../img/in/cf3/3.jpg);}
    66% {background-image:url(../img/in/cf3/4.jpg);}
    100% {background-image:url(../img/in/cf3/2.jpg);}
    */
}

.in_pic_bg7 {
    background-image: url(../img/in/7.jpg);
}

.in_pic_bg8 {
    background-image: url(../img/in/8.jpg);
}

.policies li {
    list-style: none;
    margin: 20px 0;
}

.mtx {
    background-image: url(../img/gif/mtx_a.png);
    background-size: cover;
}
.card_txt_word { max-height:35px; overflow:auto;}

footer {
    position: absolute;
    bottom: 0;
    width: 100%; 
    min-height: 54px;
    color: #454545;
    background-color: white;
    padding: 1rem 0;
	margin-bottom: -80px;
	font-size:11px;
}
.footer_off { display:none;}
footer table { margin:auto; padding:4px;}
footer table img{ margin:0 20px;}
caption, th, td {
    text-align: left;
    font-weight: normal;
    vertical-align: middle;
}
.select_music_test { position:absolute; background-image:url(../img/select_music_test.png);background-size: contain;
    background-repeat: no-repeat; width:100%; height:30px; top:16px;}
.write_works_body footer{ bottom:initial; margin-top:20px;}

.write_set_who {    
    position: absolute;
    width: 330px;
    top: 30px;
    left: 145px;
    height: 300px;
    overflow: auto;
    font-size: 18px;
    background-color: #fff;
    z-index: 1;
	padding:5px 0;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
-webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
}
.write_set_who img{ width:40px; margin:5px 10px; vertical-align:middle;}
.write_set_who .fb_pic_name:hover { background-color:#365898; color:#FFF; cursor:pointer;}
	}
	
@media screen and (max-height: 650px) {
footer {
    position: relative;
	margin-top:100px;
}
}
@media screen and (max-width: 2000px) {
    .write_page_mark_top {
        height: 12%;
        margin-top: 4%;
    }

    .write_page_mark {
        width: 430px;
        height: 348px;
        background-size: cover;
    }

    .fb_profilePic {
        width: 126px;
        height: 126px;
    }

    .wrap {
        padding: 0; /*height:100%;*/
    }

    .write_page_tit {
        padding-top: 5%;
    }

    .write_page_sub {
        padding: 2%;
    }

    .write_page_sub2 {
        padding: 10px;
    }

    .write_page_tit img {
        height: 30px;
    }

    .write_page_sub img {
        height: 16px;
    }

    .write_page_sub2 img {
        height: 42px;
    }

    .content {
        padding-top: 1%;
        position: relative;
        z-index: 10;
    }

    .select_card {
        width: 243px;
        height: 380px;
    }

    .works .select_card {
        margin-bottom: -120px;
    }

    .footer2 {
        margin-top: -7%;
    }

    .footer3 {
        margin-top: -60px;
    }

    .footer4 {
        margin-top: -60px;
    }

    .logo_pasta img {
        height: 90px;
    }

    .btn_write_page img {
        height: 14px;
    }

    .select_music {
        width: 230px;
        margin: 1% 0% 1% 3%;
    }
    .select_music p a{ display:block; width:120px; overflow:hidden; margin-left:11px; }
    .select_music p a img{ width:230px;}

    .card_pic {
        top: 6%;
        left: 9.6%;
    }

    .card_box {
        width: 600px;
    }

    .card_edit {
        width: 110px;
        right: 0;
    }

    .card_bg {
        width: 420px;
        height: 450px;
    }

    .card_bgfb {
        width: 115px;
        height: 122px;
        padding: 5px;
        display: inline-block;
    }

    .write_start {
        text-align: center;
        width: 220px;
        margin: auto;
    }

    .write_start img {
        width: 100%;
    }

    .write_trial {
        margin-top: 50px;
        width: 290px;
        height: 36px;
    }

    .write_trial2 {
        bottom: -35%;
        left: -22%;
        width: 162px;
        height: 35px;
    }

    .write_works {
        margin: 20px auto;
        position: inherit;
    }

    .fb_share {
        top: 20%;
		line-height: 160%;
    }

    /*.card_tit { margin-top: -8%;}*/
    .logo_top {
        margin-top: 20px;
        height: 140px;
    }

    .in {
        max-width: 1100px;
    }

    .in1 {
        margin-top: 140px;
        width: 22.4%;
    }

    .in3 {
        width: 68%;
        position: relative;
    }

    .edit_card {
        top: 57%;
    }

    .body_b .edit_card {
        top: 48%;
    }

    .body_c .edit_card {
        top: 48%;
    }

    .edit_card_pic {
        width: 100%;
    }

    .edit_card_pic img {
        width: 20%;
    }

    .body_b .edit_card_pic img {
        width: 34%;
    }

    .body_c .edit_card_pic img {
        width: 34%;
    }

    .body_b .mtx {
        background-image: url(../img/gif/mtx_b.png);
    }

    .body_c .mtx {
        background-image: url(../img/gif/mtx_c.png);
    }

    .edit_txt {
        top: -86%;
    }

    .edit_txt_family font {
        margin: 0 0 10%;
        font-size: 80%;
        display: block;
    }

    .fb_profilePic3 {
        top: -30%;
    }
.fb_profilePic4 {position: absolute; top: 2%; left: 82%;}
.fb_profilePic5 { width: 16%;position: relative;float: left;margin:6px 0.5%; border-width: 3px;top: 0;}

    .message {
        position: absolute;
        bottom: 0;
        width: 101%;
        height: 18%;
    }

    .card_txt {
        width: 80%;
        word-wrap: break-word;
        word-break: normal;
    }

    .top_menu {
        width: 20px;
        height: 20px;
    }

    .write_txt {
        font-size: 90%;
    }

    .cf_p {
        position: relative;
        margin: 36px auto 0;
        width: 220px;
    }

    .video_poen_box {
        width: 91%;
    }
.privacy_top {
    margin-top: -100px;
}

}


@media screen and (max-width: 800px) and (min-width: 320px) {
    .logo_top {
        height: 50px;
    }

    .in1 {
        margin-top: 70px;
        width: 130px;
    }

    .in3 {
        width: 392px;
    }

    .video_poen_box {
        width: 526px;
    }

    .write_page_mark {
        width: 270px;
        height: 219px;
    }

    .fb_profilePic {
        width: 78px;
        height: 78px;
        top: 10px;
        left: 136px;
    }

    .write_start {
        padding-top: 25px;
    }

    /*.top_link a {
        margin: 0 0 0 20px;
        font-size: 12px;
    }*/
    .write_page_sub img {
        height: 12px;
    }

    .select_card {
        width: 145px;
        height: 227px;
    }

    .logo_pasta img {
        height: 60px;
    }

    .btn_write_page {
        bottom: 10px;
        right: 2%;
    }

    .btn_write_page img {
        height: 10px;
    }

    .footer {
        height: 80px;
    }

    .select_music {
        width: 130px;
    }
    .select_music p a{ width:100%; margin-left:0; overflow: visible; }
    .select_music p a img{ width:100%;}

    .write_page_sub2 img {
        height: 24px;
    }

    .keyboard_box {
        width: 98%;
    }

    .text_input {
        margin: -4px 0 6px;
        height: 20px;
        font-size: 80%;
    }

    .footer3 {
        margin-top: -40px;
    }

    .write_page_sub2 {
        padding: 0 0 10px;
    }

    .write_trial {
        margin-top: 10px;
    }

    .card_box {
        width: 380px;
        padding-top: 30px;
        padding-bottom: 36px;
    }

    .card_edit {
        top: 14%;
    }

    .btn_card {
        margin-top: 2px;
    }

    .card_bg {
        width: 200px;
        height: 258px;
        font-size: 12px;
    }

    .write_page4_box.fb_profilePic2 {
        top: -3%;
        left: -2%;
        width: 99%;
        height: 90%;
    }

    .works_wrap .card_bg {
        width: 200px;
        height: 256px;
    }
	.works_wrap .fb_profilePic2 {
    	width: 94%;
	}
	.fb_profilePic2 {
    	width: 94%;
	}
    .card_bgfb {
        width: 65px;
        height: 69px;
    }

    .edit_card {
        top: 44%;
    }

    .body_b .edit_card {
        top: 42%;
    }

    .body_c .edit_card {
        top: 42%;
    }

    .edit_card_pic img {
        width: 23%;
        margin: 5% 0.6%;
    }

    .write_trial2 {
        bottom: -27%;
        left: -7%;
        width: 125px;
        height: 27px;
    }

    .edit_txt {
        top: 0;
        left: -60px;
    }

    .edit_txt_family font {
        margin: 0 0 30%;
    }

    .fb_share {
        top: 60px;
        width: 222px;
        height: 24px;
        font-size: 12px;
        line-height: 160%;
    }

    .cf_p {
        position: relative;
        margin: 16px auto 0;
        width: 150px;
    }

    .logo_intro {
        top: 25%;
        width: 150px;
        height: 80px;
    }

    .logo_top a {
        width: 166px;
        height: 40px;
    }

    .intro_div .logo_intro .pic {
        top: 180%;
        width: 40%;
    }

    .intro_wrap { /* padding:0;*/
    }

    .intro_div {
        width: 100%;
    }

    .video .video-word-s {
        width: 130px;
        height: 24px;
    }

    .works_wrap {
        width: 100%;
    }

    .fb_profilePic3 {
        border: solid 2px #FFF;
    }

    .top_link a {
        width: 60px;
        height: 10px;
    }

    .in_pic_bg1 {
        background-image: url(../img/in/m/1.jpg);
    }

    .in_pic_bg2 {
        background-image: url(../img/in/m/2.jpg);
    }

    .in_pic_bg3 {
        background-image: url(../img/in/m/3.jpg);
    }

    .in_pic_bg4 {
        background-image: url(../img/in/m/4.jpg);
    }

    .in_pic_bg5 {
        background-image: url(../img/in/m/5.png), url(../img/in/cf2/0.gif);
    }

    .in_pic_bg6 {
        background-image: url(../img/in/m/6.png), url(../img/in/cf3/0.gif);
    }

    .in_pic_bg7 {
        background-image: url(../img/in/m/7.jpg);
    }

    .in_pic_bg8 {
        background-image: url(../img/in/m/8.jpg);
    }

    .play_icons {
        width: 26%;
        margin-top: -9%;
        right: 1%;
		display:block;
    }

    .video_poen_box {
        height: 47px;
    }

    .video_poen_hi {
        height: 0;
    }

    .privacy_top {
        margin-top: 0;
    }
	.privacy {
		width: 91%;
	}	
footer {
	margin-bottom: -160px;
}
.write_set_who {
    width: 196px;
    top: 26px;
    left: 134px;
    height: 100px;
    font-size: 14px;
}
}

@media screen and (max-width: 480px) and (min-width: 320px) {
    .in1 {
        width: 110px;
    }

    .in3 {
        width: 332px;
    }
}

@media screen and (min-height: 900px) and (max-height: 1200px) {
    .wrap {
        padding-top: 140px;
    }
}

@media screen and (min-height: 700px) and (max-height: 900px) {
    .wrap {
        padding-top: 80px;
    }
}

@media screen and (min-height: 500px) and (max-height: 700px) {
    .wrap {
        padding-top: 20px;
    }
}

@media screen and (min-height: 321px) and (max-height: 500px) {
    .wrap {
        padding-top: 40px;
    }
}

@media screen and (min-height: 200px) and (max-height: 310px) {
    .wrap {
        padding-top: 20px;
    }
}

@media screen and (min-height: 900px) and (max-height: 1200px) {
    .intro_wrap {
        padding-top: 120px;
		width:90%;
    }
}

@media screen and (min-height: 700px) and (max-height: 900px) {
    .intro_wrap {
        padding-top: 110px;
		width:90%;
    }
}

@media screen and (min-height: 500px) and (max-height: 700px) {
    .intro_wrap {
        padding-top: 52px;
		width:70%;
    }
}

@media screen and (min-height: 321px) and (max-height: 500px) {
    .intro_wrap {
        padding-top: 50px;
		width:75%;
    }
}

@media screen and (min-height: 200px) and (max-height: 320px) {
    .intro_wrap {
        padding-top: 15px;
		width:75%;
    }
}

@media screen and (max-width: 480px) and (max-height: 320px) {
    .intro_wrap {
        padding-top: 30px;
		width:90%;
    }
}

.font_1 {
    font-family: 'Noto Sans TC', 'cwTeXHei';
}

.font_2 {
    font-family: 'cwTeXFangSong';
}

.font_3 {
    font-family: 'cwTeXYen';
}

.font_4 {
    font-family: 'cwTeXMing';
}

.font_5 {
    font-family: 'cwTeXKai';
}

@font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 100;
    src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff2) format('woff2'),
    url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.woff) format('woff'),
    url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Thin.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 300;
    src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff2) format('woff2'),
    url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.woff) format('woff'),
    url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Light.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 400;
    src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff2) format('woff2'),
    url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.woff) format('woff'),
    url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Regular.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 500;
    src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff2) format('woff2'),
    url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.woff) format('woff'),
    url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Medium.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 700;
    src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff2) format('woff2'),
    url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.woff) format('woff'),
    url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Bold.otf) format('opentype');
}

@font-face {
    font-family: 'Noto Sans TC';
    font-style: normal;
    font-weight: 900;
    src: url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff2) format('woff2'),
    url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.woff) format('woff'),
    url(//fonts.gstatic.com/ea/notosanstc/v1/NotoSansTC-Black.otf) format('opentype');
}

/*����*/
@font-face {
    font-family: 'cwTeXHei';
    font-style: normal;
    font-weight: 500;
    src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot);
    src: url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.eot?#iefix) format('embedded-opentype'),
    url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff2) format('woff2'),
    url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.woff) format('woff'),
    url(//fonts.gstatic.com/ea/cwtexhei/v3/cwTeXHei-zhonly.ttf) format('truetype');
}

@font-face {
    /*�駺*/
    font-family: 'cwTeXFangSong';
    font-style: normal;
    font-weight: 500;
    src: url(//fonts.gstatic.com/ea/cwtexfangsong/v3/cwTeXFangSong-zhonly.eot);
    src: url(//fonts.gstatic.com/ea/cwtexfangsong/v3/cwTeXFangSong-zhonly.eot?#iefix) format('embedded-opentype'),
    url(//fonts.gstatic.com/ea/cwtexfangsong/v3/cwTeXFangSong-zhonly.woff2) format('woff2'),
    url(//fonts.gstatic.com/ea/cwtexfangsong/v3/cwTeXFangSong-zhonly.woff) format('woff'),
    url(//fonts.gstatic.com/ea/cwtexfangsong/v3/cwTeXFangSong-zhonly.ttf) format('truetype');
}

@font-face {
    /*����*/
    font-family: 'cwTeXYen';
    font-style: normal;
    font-weight: 500;
    src: url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.eot);
    src: url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.eot?#iefix) format('embedded-opentype'),
    url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.woff2) format('woff2'),
    url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.woff) format('woff'),
    url(//fonts.gstatic.com/ea/cwtexyen/v3/cwTeXYen-zhonly.ttf) format('truetype');
}

@font-face {
    /*����*/
    font-family: 'cwTeXMing';
    font-style: normal;
    font-weight: 500;
    src: url(//fonts.gstatic.com/ea/cwtexming/v3/cwTeXMing-zhonly.eot);
    src: url(//fonts.gstatic.com/ea/cwtexming/v3/cwTeXMing-zhonly.eot?#iefix) format('embedded-opentype'),
    url(//fonts.gstatic.com/ea/cwtexming/v3/cwTeXMing-zhonly.woff2) format('woff2'),
    url(//fonts.gstatic.com/ea/cwtexming/v3/cwTeXMing-zhonly.woff) format('woff'),
    url(//fonts.gstatic.com/ea/cwtexming/v3/cwTeXMing-zhonly.ttf) format('truetype');
}

@font-face {
    /*����*/
    font-family: 'cwTeXKai';
    font-style: normal;
    font-weight: 500;
    src: url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.eot);
    src: url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.eot?#iefix) format('embedded-opentype'),
    url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.woff2) format('woff2'),
    url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.woff) format('woff'),
    url(//fonts.gstatic.com/ea/cwtexkai/v3/cwTeXKai-zhonly.ttf) format('truetype');
}

#words {
    background-color: #fff;
    font-size: 100%;
}

#colorTab {
    opacity: 1;
    filter: alpha(opacity=0);
    position: absolute;
    z-index: 13;
    width: 330px;
    left: 58px;
    bottom:104.2%;
    text-align: center;
    background-color: #FFF;
    padding: 10%;
    display: none
}

#colorTab > a {
    display: inline-block;
    position: relative;
    width: 30px;
    height: 30px;
}

#btn_color {
    float: right;
}

.picker {
    position: relative;
    display: inline-block;
    width: 47%;
}

.picker > img {
    width: 100%;
}

#mobileAlert {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    background-color: rgba(255, 255, 255, 0.7);
    background-repeat: no-repeat;
    background-position: center;
    background-image: url(../img/overturn.png);
    display: none;
    z-index: 999999;
}

@media screen and (orientation: portrait) {
    /* alert樣式 */
    #mobileAlert.show {
        display: block;
    }
}