@charset "GBK";

/*! normalize.css v4.0.0 | MIT License | github.com/necolas/normalize.css */

html { font-family: sans-serif; -ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; }



body { margin: 0; }



article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary { display: block; }



audio, canvas, progress, video { display: inline-block; }



audio:not([controls]) { display: none; height: 0; }



progress { vertical-align: baseline; }



template, [hidden] { display: none; }



a { background-color: transparent; }



a:active, a:hover { outline-width: 0; }



abbr[title] { border-bottom: none; text-decoration: underline; text-decoration: underline dotted; }



b, strong { font-weight: inherit; }



b, strong { font-weight: bolder; }



dfn { font-style: italic; }



h1 { font-size: 2em; margin: 0.67em 0; }



mark { background-color: #ff0; color: #000; }



small { font-size: 80%; }



sub, sup { font-size: 75%; line-height: 0; position: relative; vertical-align: baseline; }



sub { bottom: -0.25em; }



sup { top: -0.5em; }



img { border-style: none; }



svg:not(:root) { overflow: hidden; }



code, kbd, pre, samp { font-family: monospace, monospace; font-size: 1em; }



figure { margin: 1em 40px; }



hr { box-sizing: content-box; height: 0; overflow: visible; }



button, input, select, textarea { font: inherit; }



optgroup { font-weight: bold; }



button, input, select { overflow: visible; }



button, input, select, textarea { margin: 0; }



button, select { text-transform: none; }



button, [type="button"], [type="reset"], [type="submit"] { cursor: pointer; }



[disabled] { cursor: default; }



button, html [type="button"], [type="reset"], [type="submit"] { -webkit-appearance: button; }



button::-moz-focus-inner, input::-moz-focus-inner { border: 0; padding: 0; }



button:-moz-focusring, input:-moz-focusring { outline: 1px dotted ButtonText; }



fieldset { border: 1px solid #c0c0c0; margin: 0 2px; padding: 0.35em 0.625em 0.75em; }



legend { box-sizing: border-box; color: inherit; display: table; max-width: 100%; padding: 0; white-space: normal; }



textarea { overflow: auto; }



[type="checkbox"], [type="radio"] { box-sizing: border-box; padding: 0; }



[type="number"]::-webkit-inner-spin-button, [type="number"]::-webkit-outer-spin-button { height: auto; }



[type="search"] { -webkit-appearance: textfield; }



[type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; }



/* unit========================================= */

.ro_logo, .weixin, .title, .videoBox .videoBtn, .btnBox > a:nth-child(1) i { display: block; text-indent: 100%; white-space: nowrap; overflow: hidden; color: transparent; }



#topBar .gnjoy_logo, #topBar .btn_box .btn_login i, #topBar .btn_box .btn_signin i { display: inline-block; vertical-align: top; text-indent: 100%; white-space: nowrap; overflow: hidden; color: transparent; }



footer .leftFooter div ul li, .btnBox > a, .socialBox > a, #control > a { display: inline-block; vertical-align: top; *vertical-align: auto; *zoom: 1; *display: inline; }



.btnBox > a:nth-child(1), .btnBox > a:nth-child(2), .btnBox > a:nth-child(3), .btnBox > a:nth-child(5), .btnBox > a:nth-child(7), .btnBox > a:nth-child(8), .btnBox > a:nth-child(9), .socialBox > a, #control > a { text-indent: 100%; white-space: nowrap; overflow: hidden; }



.ro_logo, .weixin, .title, .videoBox, .btn_officialSite, nav, .btnBox > a:nth-child(1) i, .btnBox > a:nth-child(4), .btnBox > a:nth-child(6), .ch_L, .ch_L > i, .ch_R, .ch_R > i, .socialBox, #bgBox, #bgBox:before, #bgBox:after, #bgBox .pic, #control { position: absolute; }



footer .leftFooter, footer .leftFooter div ul { text-align: center; }



.videoBox .videoBtn:before, .videoBox .videoBtn:after, .btn_officialSite:before, .btn_officialSite:after, .btnBox > a:nth-child(3):before, .btnBox > a:nth-child(5):before, #bgBox:before, #bgBox:after { content: ''; display: block; position: absolute; left: 0; top: 0; transition: all .3s; }



strong, .btn_officialSite > div, .btnBox > a { font-family: "\5FAE\8F6F\96C5\9ED1", Verdana, arial; font-weight: bold; }



h1, h2, h3, h4, h5, h6 { font-family: "\5FAE\8F6F\96C5\9ED1", Verdana, arial; }



/* myReset========================================= */

*, *:before, *:after { -moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box; }



html, body { height: 100%; font-family: "\5FAE\8F6F\96C5\9ED1", Microsoft JhengHei, Verdana, arial; line-height: 1.5; color: #4a3d1d; min-width: 320px; font-size: 14px; min-width: 1000px; overflow-x: hidden; }



body { min-width: 320px; }



li, p { text-align: justify; }



li { margin: 5px 0; }



p { margin: 10px 0; }



.wrap { position: relative; clear: both; width: 1200px; margin: 0 auto; }



h1, h2, h3, h4, h5, h6 { padding: 0; margin: 0; color: #4a3d1d; }



h1 { font-size: 42px; }



h2 { font-size: 32px; }



h3 { font-size: 30px; }



h4 { font-size: 18px; }



h5 { font-size: 18px; }



h6 { font-size: 20px; }



p, li { padding: 0; font-size: 15px; letter-spacing: 1px; font-weight: 600; font-family: '微軟正黑體'; }



ul, ol { padding: 0; margin: 0; list-style: none; }



a { text-decoration: none; color: #0097b9; outline: none; }



/* Footer */

footer { width: 100%; margin: 0 auto; padding: 33px 0; background-color: white; }



footer:after { display: block; content: ""; clear: both; }



footer .leftFooter { padding: 0 0.52083rem; }

@media (min-width: 768px) { footer .leftFooter { float: left; margin-right: 33px; margin-left: 80px; } }



footer .leftFooter:after { display: block; content: ""; clear: both; }



@media (min-width: 768px) { footer .leftFooter img { float: left; margin-right: 15px; } }



footer .leftFooter div { padding-top: 10px; }

@media (min-width: 768px) { footer .leftFooter div { float: left; } }



footer .leftFooter div ul:after { display: block; content: ""; clear: both; }



footer .leftFooter div ul li { padding-right: 4px; margin-right: 4px; margin-top: 0; margin-bottom: 0; background: url("../img/common/bar_footerUtil.gif")/*tpa=http://www.diyamoli.com/img/common/bar_footerUtil.gif*//*tpa=http://www.diyamoli.com/img/common/bar_footerUtil.gif*/ no-repeat 100% 50%; }

@media (min-width: 768px) { footer .leftFooter div ul li { padding-right: 16px; margin-right: 16px; } }



footer .leftFooter div ul li.last { padding-right: 0; margin-right: 0; background: none; }



footer .leftFooter div ul li a { font-size: 11px; color: #888888; }



footer .leftFooter div p { font-size: 9px; color: #888888; margin: 0; }



footer .leftFooter div p span { color: #00aecd; }



footer .rightFooter { padding: 16px 0.52083rem 0; }

@media (min-width: 768px) { footer .rightFooter { float: left; } }



footer .rightFooter:after { display: block; content: ""; clear: both; }



footer .rightFooter img { float: left; width: 1.25rem; margin-right: 0.41667rem; border: 1px rgba(128, 128, 128, 0.4) solid; }

@media (min-width: 768px) { footer .rightFooter img { width: 33px; margin-right: 9px; } }



footer .rightFooter div { float: left; width: 7.29167rem; }

@media (min-width: 768px) { footer .rightFooter div { width: auto; } }



footer .rightFooter div p { font-size: 12px; margin-top: 0; margin-bottom: 0; }

@media (min-width: 768px) { footer .rightFooter div p { color: #888888; } }



/* index */

#content { position: relative; margin: 0 auto; width: 100%; height: 940px; background-position: center top; }



.wrap { height: 100%; }



.ro_logo { left: 20px; top: 20px; width: 200px; height: 171px; background-image: url("../img/moli_logo.png")/*tpa=http://www.diyamoli.com/img/moli_logo.png*/; z-index: 2000; }



.title { left: 300px; top: 300px; width: 647px; height: 330px; background-image: url("../img/title.png")/*tpa=http://www.diyamoli.com/img/title.png*/; z-index: 3000; }



.videoBox { left: 760px; top: 408px; z-index: 3000; }

.videoBox .videoBtn { position: absolute; left: 0; top: 0; background-color: rgba(0, 0, 0, 0.7); width: 80px; height: 80px; border-radius: 50%; }

.videoBox .videoBtn:before { animation: videoBtn 4.5s infinite linear; background-image: url("../img/play_circle4bc1.png-1468991506.png")/*tpa=http://www.diyamoli.com/img/play_circle4bc1.png?1468991506*/; background-size: 100%; left: 10px; top: 10px; width: 60px; height: 60px; }

.videoBox .videoBtn:after { background-image: url("../img/play_play4bc1.png-1468991506.png")/*tpa=http://www.diyamoli.com/img/play_play4bc1.png?1468991506*/; background-size: 100%; left: 10px; top: 10px; width: 60px; height: 60px; }



@-moz-keyframes videoBtn { 0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); } }

@-webkit-keyframes videoBtn { 0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); } }

@keyframes videoBtn { 0% { transform: rotate(0deg); }

  100% { transform: rotate(360deg); } }

/**/

.btn_officialSite { left: 505px; top: -85px; width: 160px; height: 160px; -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); background-color: white; overflow: hidden; -moz-transition: all, 0.2s; -o-transition: all, 0.2s; -webkit-transition: all, 0.2s; transition: all, 0.2s; }

.btn_officialSite:hover { transform: scale(1.1) rotate(45deg); -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px; }

.btn_officialSite:hover > div { color: white; text-shadow: 0 0 10px rgba(226, 127, 24, 0.3); }

.btn_officialSite:hover:before { transform: translateY(0); }

.btn_officialSite:hover:after { transform: translateX(0); }

.btn_officialSite:before { width: 100%; height: 100%; transform: translateY(100%); background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9Ii0wLjA5MTUwNiIgeTE9IjAuMTU4NDk0IiB4Mj0iMS4wOTE1MDYiIHkyPSIwLjg0MTUwNiI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZjE1YSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmYmU3YSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -moz-linear-gradient(330deg, #fff15a, #ffbe7a); background-image: -webkit-linear-gradient(330deg, #fff15a, #ffbe7a); background-image: linear-gradient(120deg, #fff15a, #ffbe7a); }

.btn_officialSite:after { width: 100%; height: 100%; transform: translateX(100%); z-index: -1; background-image: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9Ii0wLjA5MTUwNiIgeTE9IjAuMTU4NDk0IiB4Mj0iMS4wOTE1MDYiIHkyPSIwLjg0MTUwNiI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZjE1YSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2ZmYmU3YSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background-size: 100%; background-image: -moz-linear-gradient(330deg, #fff15a, #ffbe7a); background-image: -webkit-linear-gradient(330deg, #fff15a, #ffbe7a); background-image: linear-gradient(120deg, #fff15a, #ffbe7a); }

.btn_officialSite > div { padding-left: 10px; line-height: 160px; font-size: 35px; text-align: center; -moz-transform: rotate(-45deg); -ms-transform: rotate(-45deg); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); color: #6889df; }



/**/

nav { left: 0; bottom: -20px; width: 100%; height: 180px; background-color: #6889df; z-index: 1000; }



.btnBox { padding-top: 60px; position: relative; }

.btnBox > a { font-size: 18px; color: white; text-align: center; padding-top: 5px; background-repeat: no-repeat; background-position: center; position: absolute; -moz-transition: all, 0.1s; -o-transition: all, 0.1s; -webkit-transition: all, 0.1s; transition: all, 0.1s; }

.btnBox > a:hover { -moz-border-radius: 3px; -webkit-border-radius: 3px; border-radius: 3px; background-color: black; }

.btnBox > a:nth-child(1) { display: none; width: 174px; background-image: url("../img/btn_014bc1.png-1468991506.png")/*tpa=http://www.diyamoli.com/img/btn_014bc1.png?1468991506*/; cursor: default; }

.btnBox > a:nth-child(1) i { left: -38px; top: -8px; width: 148px; height: 78px; background-image: url("../img/open.png")/*tpa=http://www.diyamoli.com/img/open.png*//*tpa=http://www.diyamoli.com/img/open.png*/; background-repeat: no-repeat; animation-name: upDown; -webkit-animation-duration: 1s; animation-duration: 1s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-iteration-count: infinite; z-index: 2000; }

.btnBox > a:nth-child(2) { width: 160px; margin-right: 50px; background-image: url("../img/btn_024bc1.png-1468991506.png")/*tpa=http://www.diyamoli.com/img/btn_024bc1.png?1468991506*/; left: 0; }

.btnBox > a:nth-child(3) { width: 120px; margin-right: 144px; position: relative; font-size: 24px; padding-top: 0; background-image: url("../img/btn_034bc1.png-1468991506.png")/*tpa=http://www.diyamoli.com/img/btn_034bc1.png?1468991506*/; overflow: visible; left: 394px; }

.btnBox > a:nth-child(3):before { top: -42px; left: -4px; width: 125px; height: 125px; background-color: rgba(255, 255, 255, 0.2); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.btnBox > a:nth-child(4) { font-size: 13px; width: 80px; height: 20px; line-height: 20px; background-color: black; text-align: center; left: 412px; top: 98px; font-weight: normal; padding-top: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; left: 412px; }

.btnBox > a:nth-child(5) { width: 120px; margin-right: 30px; font-size: 24px; padding-top: 0; position: relative; background-image: url("../img/btn_044bc1.png-1468991506.png")/*tpa=http://www.diyamoli.com/img/btn_044bc1.png?1468991506*/; overflow: visible; left: 390px; }

.btnBox > a:nth-child(5):before { top: -42px; left: -3px; width: 125px; height: 125px; background-color: rgba(255, 255, 255, 0.2); -moz-transform: rotate(45deg); -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); }

.btnBox > a:nth-child(6) { font-size: 13px; width: 80px; height: 20px; line-height: 20px; background-color: black; text-align: center; left: 675px; top: 98px; padding-top: 0; -moz-border-radius: 5px; -webkit-border-radius: 5px; border-radius: 5px; font-weight: normal; }

.btnBox > a:nth-child(7) { width: 118px; background-image: url("../img/btn_054bc1.png-1468991506.png")/*tpa=http://www.diyamoli.com/img/btn_054bc1.png?1468991506*/; left: 200px; }

.btnBox > a:nth-child(8) { width: 140px; background-image: url("../img/btn_064bc1.png-1468991506.png")/*tpa=http://www.diyamoli.com/img/btn_064bc1.png?1468991506*/; left: 830px; }

.btnBox > a:nth-child(9) { width: 118px; background-image: url("../img/btn_074bc1.png-1468991506.png")/*tpa=http://www.diyamoli.com/img/btn_074bc1.png?1468991506*/; left: 1000px; }

/**/

.ch_L { left: -90px; top: -135px; width: 511px; height: 173px; background-image: url("../img/ch_L.png")/*tpa=http://www.diyamoli.com/img/ch_L.png*//*tpa=http://www.diyamoli.com/img/ch_L.png*/; }

.ch_L > i { display: block; }

.ch_L .music { left: 170px; top: -5px; }

.ch_L .laugh { left: 8px; top: 15px; }

.ch_L .heart { left: 265px; top: -12px; }



.ch_R { right: -30px; top: -130px; width: 465px; height: 167px; background-image: url("../img/ch_R.png")/*tpa=http://www.diyamoli.com/img/ch_R.png*//*tpa=http://www.diyamoli.com/img/ch_R.png*/; }

.ch_R > i { display: block; }

.ch_R .heart { left: -10px; top: 25px; }

.ch_R .laugh { left: 147px; top: -12px; }

.ch_R .heyhey { left: 212px; top: 22px; }

.ch_R .music { left: 410px; top: 68px; }



/**/

.socialBox { right: 20px; top: 20px; width: 220px; height: 60px; text-align: right; z-index: 5000; }

.socialBox > a:hover { -webkit-filter: brightness(1.1); filter: brightness(1.1); }

.socialBox > a:nth-child(1) { width: 37px; height: 37px; background-image: url("../img/btn_fb.png")/*tpa=http://www.diyamoli.com/img/btn_fb.png*//*tpa=http://www.diyamoli.com/img/btn_fb.png*/; margin-right: 8px; }

.socialBox > a:nth-child(2) { width: 37px; height: 37px; background-image: url("../img/btn_baha.png")/*tpa=http://www.diyamoli.com/img/btn_baha.png*//*tpa=http://www.diyamoli.com/img/btn_baha.png*/; margin-right: 10px; }

.socialBox > a:nth-child(3) { margin-top: 5px; margin-left: 10px; width: 62px; height: 27px; background-image: url("../img/btn_share.png")/*tpa=http://www.diyamoli.com/img/btn_share.png*//*tpa=http://www.diyamoli.com/img/btn_share.png*/; }



@keyframes upDown { 0% { transform: translateY(0); }

  50% { transform: translateY(5px); }

  100% { transform: translateY(0); } }

@keyframes zoomOut { 0% { transform: scale(1.3); }

  100% { transform: scale(1); } }

#bgBox { width: 100%; height: 100%; overflow: hidden; }

#bgBox:before { left: 0; top: 0; width: 100%; height: 100%; background-image: url("../img/repeatBG4bc1.png-1468991506.png")/*tpa=http://www.diyamoli.com/img/repeatBG4bc1.png?1468991506*/; z-index: 19; }

#bgBox:after { left: 0; top: 0; width: 100%; height: 100%; background-image: url("../img/white_bg4bc1.png-1468991506.png")/*tpa=http://www.diyamoli.com/img/white_bg4bc1.png?1468991506*/; background-repeat: no-repeat; background-position: center bottom; z-index: 20; }

#bgBox .pic { left: 0; top: 0; width: 100%; height: 100%; z-index: 0; background-position: center top; }

#bgBox .pic.on { background-repeat: no-repeat; animation-name: zoomOut; -webkit-animation-duration: 5s; animation-duration: 5s; -webkit-animation-fill-mode: both; animation-fill-mode: both; animation-direction: alternate; }

#bgBox .pic:nth-child(1) { background-image: url("../img/pic_19bc1.jpg-1468992056.jpg")/*tpa=http://www.diyamoli.com/img/pic_19bc1.jpg?1468992056*/; }

#bgBox .pic:nth-child(2) { background-image: url("../img/pic_29bc1.jpg-1468992056.jpg")/*tpa=http://www.diyamoli.com/img/pic_29bc1.jpg?1468992056*/; }

#bgBox .pic:nth-child(3) { background-image: url("../img/pic_39bc1.jpg-1468992056.jpg")/*tpa=http://www.diyamoli.com/img/pic_39bc1.jpg?1468992056*/; }



#control { top: 34px; right: 250px; z-index: 6000; }

#control > a { width: 10px; height: 10px; margin-right: 15px; -moz-border-radius: 50%; -webkit-border-radius: 50%; border-radius: 50%; background-color: white; }

#control > a.on { background-color: #6889DF; }



.sound { position: absolute; top: 65px; right: 20px; cursor: pointer; z-index: 5100; }



.sound a { display: block; width: 85px; height: 20px; color: #fff; background: url("../img/soundd958.gif-1468990974.gif")/*tpa=http://www.diyamoli.com/img/soundd958.gif?1468990974*/ no-repeat right 3px; }



.sound a.pause { background-image: url("../img/sound_offd758.gif-1468991091.gif")/*tpa=http://www.diyamoli.com/img/sound_offd758.gif?1468991091*/; }



/* Sprite */

/* TopBar */

#topBar { clear: both; background-color: white; height: 35px; box-shadow: 0 1px 10px rgba(0, 0, 0, 0.1); }

#topBar > .wrap { padding-top: 5px; }

#topBar a { font-size: 12px; color: #4d4d4d; }

#topBar .gnjoy_logo { width: 90px; height: 23px; background-image: url("../img/topBar/gnjoy_logo.png")/*tpa=http://www.diyamoli.com/img/topBar/gnjoy_logo.png*//*tpa=http://www.diyamoli.com/img/topBar/gnjoy_logo.png*/; margin-right: 30px; }

#topBar ul { display: inline-block; vertical-align: top; padding-top: 2px; }

#topBar ul > li { display: inline-block; vertical-align: top; margin-right: 20px; line-height: 1; }

#topBar .btn_box { float: right; width: 130px; text-align: right; }

#topBar .btn_box .btn_login, #topBar .btn_box .btn_signin { display: inline-block; width: 60px; height: 30px; line-height: 30px; }

#topBar .btn_box .btn_login i, #topBar .btn_box .btn_signin i { vertical-align: top; width: 20px; height: 25px; background-image: url("../img/topBar/gn_icon.png")/*tpa=http://www.diyamoli.com/img/topBar/gn_icon.png*//*tpa=http://www.diyamoli.com/img/topBar/gn_icon.png*/; background-repeat: no-repeat; background-position: left -10%; background-size: 100% auto; margin-right: 6px; }

#topBar .btn_box .btn_signin i { background-position: left 103%; }