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, hr { margin: 0; padding: 0; border: 0; font: inherit; vertical-align: baseline; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }

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

html { height: 100%; }

body { height: 100%; line-height: 1; }

ol, ul { list-style: none; }

blockquote, q { quotes: none; }

blockquote:before, blockquote:after, q:before, q:after { content: ''; content: none; }

table { border-collapse: collapse; border-spacing: 0; }

body { background: #fff; font-size: 20px; font-family: 微軟儷黑體, 微軟正黑體, Arial, Helvetica, Geneva, sans-serifs; line-height: 25px; color: #333333; text-decoration: none; user-select: none; -moz-user-select: none; /* for Firefox */ -webkit-user-select: none; /* for Chrome */ }

a { text-decoration: none; outline: medium none !important; border: none; }
a:focus, a:link, a:visited, a:hover, a:active { border: none; outline: medium none !important; }
a, a:link, a:visited { color: #e3316b; }
a:hover, a:active { color: #e44b7d; }

#wrap { background: #fdf4da; position: relative; width: 100%; max-width: 1220px; height: auto; margin: 0 auto; overflow: hidden; -webkit-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); -moz-box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1); }

#ttt { background: url(../images/ttt.png) no-repeat 0px 0px; display: block; position: fixed; width: 40px; height: 40px; bottom: 10px; left: 50%; margin-left: -20px; }

.btn { display: inline-block; position: relative; width: 80%; max-width: 200px; height: auto; margin: 5px auto 0 auto; padding: 9px 10px 11px 25px; font-size: 22px; line-height: 30px; text-align: center; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-border-radius: 7px; -moz-border-radius: 7px; -ms-border-radius: 7px; -o-border-radius: 7px; border-radius: 7px; }
.btn, .btn:link, .btn:visited { background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #d3ad4e), color-stop(100%, #ffe29a)); background-image: -webkit-linear-gradient(to bottom, #d3ad4e, #ffe29a); background-image: -moz-linear-gradient(to bottom, #d3ad4e, #ffe29a); background-image: -o-linear-gradient(to bottom, #d3ad4e, #ffe29a); background-image: linear-gradient(to bottom, #d3ad4e, #ffe29a); }
.btn:hover, .btn:active { background-image: -webkit-gradient(linear, to bottom, to top, color-stop(0%, #ffe29a), color-stop(100%, #d3ad4e)); background-image: -webkit-linear-gradient(to bottom, #ffe29a, #d3ad4e); background-image: -moz-linear-gradient(to bottom, #ffe29a, #d3ad4e); background-image: -o-linear-gradient(to bottom, #ffe29a, #d3ad4e); background-image: linear-gradient(to bottom, #ffe29a, #d3ad4e); }
.btn, .btn:link, .btn:visited, .btn:hover, .btn:active { color: #493713; font-weight: bold; }

.arr { display: inline-block; position: relative; width: 20px; height: 30px; vertical-align: bottom; margin-left: 10px; }
.arr > img { position: absolute; width: 20px; height: 30px; left: 0px; top: 1px; animation: arrAni 0.8s infinite linear; -webkit-animation: arrAni 0.8s infinite linear; }

@media (max-width: 480px) { .btn { width: 90%; } }
@keyframes arrAni { from { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; left: 0px; }
  75% { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; left: 3px; }
  to { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; left: 5px; } }

#wmark { background: #fc0; position: fixed; left: 0; top: 0; width: auto; height: auto; padding: 5px 10px; }

.wmarkitem { display: none; }

@media (max-width: 1100px) { .wmarkitem { display: none; }
  .xxl { display: block; } }
@media (max-width: 900px) { .wmarkitem { display: none; }
  .xl { display: block; } }
@media (max-width: 768px) { .wmarkitem { display: none; }
  .l { display: block; } }
@media (max-width: 640px) { .wmarkitem { display: none; }
  .m { display: block; } }
@media (max-width: 480px) { .wmarkitem { display: none; }
  .s { display: block; } }
@media (max-width: 360px) { .wmarkitem { display: none; }
  .xs { display: block; } }
@media (max-width: 320px) { .wmarkitem { display: none; }
  .xxs { display: block; } }
#vs { position: relative; width: 100%; height: auto; margin: 0 auto; }
#vs .vs { position: relative; width: 100%; height: auto; margin: 0 auto; display: block; }
#vs .vsm { position: relative; width: 100%; height: auto; margin: 0 auto; display: none; }
#vs .ctr { position: absolute; width: 40%; max-width: 488px; height: auto; left: 22%; top: 25%; }
#vs .ctr .tit { position: relative; width: 90%; margin: 0 auto; margin-left: -15%; }
#vs .ctr .sbt { position: relative; width: 100%; max-width: 380px; margin: 0 auto; }
#vs .logo { display: block; position: absolute; width: 30%; height: auto; left: 5%; top: 0%; }
#vs .logo img { position: relative; width: 100%; height: auto; }

@media (max-width: 1100px) { #vs .ctr { width: 45%; left: 19%; top: 24%; } }
@media (max-width: 900px) { #vs .ctr { width: 48%; left: 17%; top: 23%; } }
@media (max-width: 900px) { #vs .ctr { width: 51%; left: 15%; top: 22%; } }
@media (min-width: 768px) { .kv2{ display: none;} }
@media (max-width: 768px) { #vs .ctr { width: 54%; left: 13%; top: 21%; } }
@media (max-width: 768px) { #vs .vs { display: none; }
  #vs .vsm { display: block; }
  #vs .ctr { width: 60%; left: 12%; top: 35%; }
  #vs .ctr .tit { margin-bottom: 10px; }
  #vs .logo { width: 42%; left: 2%; top: 5%; }
  .kv1 { display: none; } }
@media (max-width: 640px) { #vs .ctr { width: 62%; left: 10%; top: 32%; }
  #vs .ctr .tit { margin-bottom: 5px; }
  #vs .logo { width: 47%; left: 0%; top: 3%; } }
@media (max-width: 480px) { #vs .ctr { width: 72%; left: 12%; top: 30%; }
  #vs .ctr .tit { margin-bottom: 0px; }
  #vs .logo { width: 52%; left: -3%; top: 1%; } }
#nav { position: relative; width: 100%; height: auto; margin: 0 auto; margin-top: -210px; }
#nav .ctr { position: relative; width: 100%; height: auto; margin: 0 auto; text-align: center; }
#nav .ctr .item { position: relative; display: inline-block; width: 160px; height: 160px; margin: 0px 15px 20px 0px; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.3s; -moz-transition-duration: 0.3s; -o-transition-duration: 0.3s; transition-duration: 0.3s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; -webkit-border-radius: 50%; -moz-border-radius: 50%; -ms-border-radius: 50%; -o-border-radius: 50%; border-radius: 50%; border: 5px solid #e6d181; -webkit-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.1); -moz-box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.1); box-shadow: 10px 10px 5px rgba(0, 0, 0, 0.1); filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0); opacity: 0; }
#nav .ctr .item .ic { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; }
#nav .ctr .item .arr { display: block; position: absolute; width: 30px; height: 30px; left: 50%; margin-left: -15px; bottom: 3px; }
#nav .ctr .item .arr > img { position: absolute; width: 30px; height: 30px; left: 0px; top: 0px; animation: navArrAni 0.8s infinite linear; -webkit-animation: navArrAni 0.8s infinite linear; }
#nav .ctr .item1, #nav .ctr .item1:link, #nav .ctr .item1:visited { background: #d9679b; }
#nav .ctr .item1:hover, #nav .ctr .item1:active { background: #ec70a8; }
#nav .ctr .item2, #nav .ctr .item2:link, #nav .ctr .item2:visited { background: #61c3c9; }
#nav .ctr .item2:hover, #nav .ctr .item2:active { background: #7ccdd2; }
#nav .ctr .item3, #nav .ctr .item3:link, #nav .ctr .item3:visited { background: #a986c6; }
#nav .ctr .item3:hover, #nav .ctr .item3:active { background: #b69acd; }
#nav .ctr .item4, #nav .ctr .item4:link, #nav .ctr .item4:visited { background: #9060b3; }
#nav .ctr .item4:hover, #nav .ctr .item4:active { background: #9c73ba; }
#nav .ctr .item5, #nav .ctr .item5:link, #nav .ctr .item5:visited { background: #654496; }
#nav .ctr .item5:hover, #nav .ctr .item5:active { background: #7453a4; }
#nav .ctr .item6 { margin-right: 0px; }
#nav .ctr .item6, #nav .ctr .item6:link, #nav .ctr .item6:visited { background: #8fb73c; }
#nav .ctr .item6:hover, #nav .ctr .item6:active { background: #9ec64b; }

@keyframes navArrAni { from { top: 0px; }
  50% { top: 5px; }
  to { top: 0px; } }

@media (max-width: 1120px) { #nav { margin-top: -160px; }
  #nav .ctr { max-width: 80%; }
  #nav .ctr .item { margin-bottom: 15px; }
  #nav .ctr .item3 { margin-right: 15px; }
  #nav .ctr .item { width: 14%; height: auto; margin-right: 2%; margin-bottom: 10px; }}
@media (max-width: 1020px) { #nav { margin-top: -150px; } }
@media (max-width: 920px) { #nav { margin-top: -130px; } }
@media (max-width: 820px) { #nav { margin-top: -110px; } }
  #nav .ctr { max-width: 100%; }
  #nav .ctr .item { width: 14%; height: auto; margin-right: 2%; margin-bottom: 10px; }
@media (max-width: 720px) { #nav { margin-top: -380px; }
  #nav .ctr .item { width: 140px; height: 140px; }
  #nav .ctr .item { width: 31%; height: auto; margin-right: 2%; margin-bottom: 10px; }}
@media (max-width: 768px) { #nav { margin-top: -100px; } }
@media (max-width: 640px) { #nav { margin-top: -80px; }
  #nav .ctr .item { margin-right: 10px; }
  #nav .ctr .item { width: 35%; height: auto; margin-right: 2%; margin-bottom: 10px; }}
@media (max-width: 520px) { #nav { margin-top: -70px; }
  #nav .ctr { width: 90%; }
  #nav .ctr .item { width: 35%; height: auto; margin-right: 2%; margin-bottom: 10px; }
  #nav .ctr .item .arr { bottom: -2px; }}
@media (max-width: 420px) { #nav { margin-top: -50px; } }
.blk { display: block; position: relative; width: 90%; max-width: 1000px; height: auto; margin: 0 auto; margin-top: 80px; padding: 20px; }
.blk .bg { background: white; position: absolute; width: 100%; height: 100%; left: 0px; top: 0px; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=80); opacity: 0.8; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; -webkit-box-shadow: 0px 0px 20px rgba(113, 96, 47, 0.2); -moz-box-shadow: 0px 0px 20px rgba(113, 96, 47, 0.2); box-shadow: 0px 0px 20px rgba(113, 96, 47, 0.2); }
.blk .tit { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; margin-top: -60px; }
.blk .tit img { display: block; position: relative; width: 400px; height: auto; margin: 0 auto; }
.blk .gly { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; text-align: center; }
.blk .gly .bk { display: inline-block; position: relative; height: auto; text-align: center; vertical-align: top; }
.blk .gly .bk .vs { display: inline-block; position: relative; height: auto; vertical-align: middle; overflow: hidden; }
.blk .gly .bk .vs img { display: block; position: relative; width: 100%; max-width: 360px; height: auto; margin: 0 auto; }
.blk .gly .bk .cnt { display: inline-block; position: relative; height: auto; vertical-align: middle; text-align: left; }
.blk .gly .bk .cnt .name { display: block; position: relative; width: 100%; height: auto; font-size: 28px; line-height: 35px; font-weight: bold; padding-bottom: 5px; color: #6c4f14; }
.blk .gly .bk .cnt .txt { display: block; position: relative; width: 100%; height: auto; font-size: 20px; line-height: 25px; padding-bottom: 5px; margin: 0 auto; }
.blk .gly .bk .cnt .txt span { display: inline-block; }
.blk .gly .bk .cnt .txt div { display: block; position: relative; width: calc(100% - 15px); height: auto; margin-left: 25px; margin-bottom: 5px; }
.blk .gly .bk .cnt .txt div:before { content: url("../images/prolistic.png"); display: block; position: absolute; width: 20px; height: auto; left: -22px; top: 3px; }
.blk .gly .bk .cnt .spot { display: block; position: relative; width: 100%; height: auto; font-size: 22px; line-height: 28px; font-style: italic; color: #e3316b; font-weight: bold; padding-bottom: 10px; }
.blk .func { position: relative; width: 100%; height: auto; margin: 0 auto; padding-bottom: 30px; text-align: center; }
.blk .func .btn { max-width: 320px; }

#pro1 .gly .bk { width: 48%; padding-bottom: 30px; }
#pro1 .gly .bk .vs { margin-left: -20px; }
#pro1 .gly .bk .cnt { width: 50%; margin-left: -40px; }
#pro1 .gly .bk .cnt .spot .hide { display: none; }
#pro1 .gly .bk1 .cnt { margin-top: 60px; }
#pro1 .gly .bk2 .cnt { margin-top: 60px; }

#pro2 .gly .bk { width: 48%; }
#pro2 .gly .bk .vs { width: 100%; margin-bottom: 15px; }
#pro2 .gly .bk .cnt { width: 100%; }
#pro2 .gly .bk .cnt .name { text-align: center; }
#pro2 .gly .bk .cnt .txt { width: 78%; }
#pro2 .gly .bk .cnt .spot { text-align: center; }
#pro2 .gly .bk .cnt .spot br { display: none; }

#pro2_2 .gly .bk { width: 48%; }
#pro2_2 .gly .bk .vs { width: 100%; margin-bottom: 15px; }
#pro2_2 .gly .bk .cnt { width: 100%; }
#pro2_2 .gly .bk .cnt .name { text-align: center; }
#pro2_2 .gly .bk .cnt .txt { width: 78%; }
#pro2_2 .gly .tit { margin-top: -60px; }
#pro2_2 .gly .bk .cnt .spot { text-align: center; }
#pro2_2 .gly .bk .cnt .spot br { display: none; }
#pro2_2 .gly2 .bkbg { background: #694899; display: block; position: absolute; width: 100%; height: 100%; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10); opacity: 0.1; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; }
#pro2_2 .gly2 .bk { width: 32%; }
#pro2_2 .gly2 .bk .vs { width: 100%; margin-bottom: 15px; }
#pro2_2 .gly2 .bk .vs img { margin-top: -20px; }
#pro2_2 .gly2 .bk .cnt { width: 100%; }

#pro3 .gly1 .bk { width: 48%; padding-bottom: 30px; }
#pro3 .gly1 .bk .cnt { margin-left: -20px; margin-top: 20px; width: 78%;}
#pro3 .gly2 .bkbg { background: #694899; display: block; position: absolute; width: 100%; height: 100%; filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=10); opacity: 0.1; -webkit-border-radius: 20px; -moz-border-radius: 20px; -ms-border-radius: 20px; -o-border-radius: 20px; border-radius: 20px; }
#pro3 .gly2 .bk { width: 32%; }
#pro3 .gly2 .bk .vs { width: 100%; margin-bottom: 15px; }
#pro3 .gly2 .bk .vs img { margin-top: -20px; }
#pro3 .gly2 .bk .cnt { width: 100%; }
#pro3 .gly1 .bk .cnt .name { text-align: center; }
#pro3 .gly2 .bk .cnt .txt { width: 88%; }
#pro3 .gly1 .bk .cnt .spot { text-align: center; }
#pro3 .gly2 .bk .cnt .spot { text-align: center; }
#pro3 .gly2 .bk .cnt .spot .hide { display: none; }
#pro3 .gly1 .bk4 .cnt { text-align: center; }
#pro3 .gly2 .bk5 { display: none; }

#pro4 .gly .bk { width: 48%; padding-bottom: 30px; }
#pro4 .gly .bk1 .cnt { width: 61%; margin-left: -10px; margin-top: 20px; }
#pro4 .gly .bk .cnt { width: 67%; margin-left: -10px; margin-top: 20px; }
#pro4 .gly1 .bk .cnt .name { text-align: center; }

@media (max-width: 1100px) { .blk .gly .bk .vs img { width: 300px; }
  #pro1 .gly .bk .vs { width: 100%; margin-bottom: 15px; margin-left: auto; }
  #pro1 .gly .bk .cnt { width: 100%; margin-left: auto; }
  #pro1 .gly .bk .cnt .name { text-align: center; }
  #pro1 .gly .bk .cnt .txt { width: 80%; }
  #pro1 .gly .bk .cnt .spot { text-align: center; }
  #pro1 .gly .bk .cnt .spot .hide { display: inline-block; }
  #pro1 .gly .bk .cnt .spot br { display: none; }
  #pro1 .gly .bk1 .cnt { margin-top: 0px; }
  #pro1 .gly .bk2 .cnt { margin-top: 0px; }
  #pro2_2 .gly2 .bk .cnt .txt { width: 80%; }
  #pro3 .gly1 .bk { width: 48%; }
  #pro3 .gly1 .bk .cnt { margin-left: auto; }
  #pro3 .gly2 .bk .cnt .txt { width: 80%; }
  #pro4 .gly .bk { width: 48%; } }
@media (max-width: 900px) { .blk { width: 90%; }
  #pro1 .gly .bk, #pro2 .gly .bk, #pro3 .gly .bk, #pro4 .gly .bk { width: 45%; padding-bottom: 20px; }
  #pro1 .gly .bk .vs, #pro2 .gly .bk .vs, #pro3 .gly .bk .vs, #pro4 .gly .bk .vs { width: 100%; margin-bottom: 15px; margin-left: 0px; }
  #pro1 .gly .bk .vs img, #pro2 .gly .bk .vs img, #pro3 .gly .bk .vs img, #pro4 .gly .bk .vs img { width: 300px; }
  #pro1 .gly .bk .cnt, #pro2 .gly .bk .cnt, #pro3 .gly .bk .cnt, #pro4 .gly .bk .cnt { width: 100%; text-align: center; }
  #pro1 .gly .bk .cnt .name, #pro2 .gly .bk .cnt .name, #pro3 .gly .bk .cnt .name, #pro4 .gly .bk .cnt .name { text-align: center; }
  #pro1 .gly .bk .cnt .txt, #pro2 .gly .bk .cnt .txt, #pro3 .gly .bk .cnt .txt, #pro4 .gly .bk .cnt .txt { width: 78%; }
  #pro1 .gly .bk .cnt .txt div, #pro2 .gly .bk .cnt .txt div, #pro3 .gly .bk .cnt .txt div, #pro4 .gly .bk .cnt .txt div { text-align: left; }
  #pro1 .gly .bk .cnt .spot, #pro2 .gly .bk .cnt .spot, #pro3 .gly .bk .cnt .spot, #pro4 .gly .bk .cnt .spot { text-align: center; }
  #pro1 .gly .bk1 { margin-right: 20px; }
  #pro2 .gly .bk1 { margin-right: 20px; }
  /*#pro2_2 .gly .bk1 { margin-right: 20px; }*/
  /* #pro3 .gly1 .bk1 .cnt { margin-top: 0px; } */
  #pro2_2 .gly2 .bk2 { margin-right: 20px; width: 44%; }
  #pro2_2 .gly2 .bk3 { margin-right: 20px; width: 44%; }
  #pro2_2 .gly2 .bk3 .cnt .spot br { display: none; }
  #pro2_2 .gly2 .bk3 .cnt .spot .hide { display: inline-block; }
  #pro2_2 .gly2 .bk4 { margin-right: 20px; width: 44%; }
  #pro2_2 .gly2 .bk5 { display: inline-block; }
  #pro3 .gly2 .bk2 { margin-right: 20px; }
  #pro3 .gly2 .bk3 .cnt .spot br { display: none; }
  #pro3 .gly2 .bk3 .cnt .spot .hide { display: inline-block; }
  #pro3 .gly2 .bk4 { margin-right: 20px; }
  #pro3 .gly2 .bk5 { display: inline-block; }
  #pro4 .gly .bk .cnt { margin-top: 0px; } }
@media (max-width: 768px) { .blk .gly .bk .cnt .name { font-size: 25px; line-height: 30px; }
  #pro1 .gly .bk .vs img, #pro2 .gly .bk .vs img, #pro2_2 .gly .bk .vs img, #pro3 .gly .bk .vs img, #pro4 .gly .bk .vs img { width: 100%; }
  #pro1 .gly .bk .cnt .spot br, #pro2 .gly .bk .cnt .spot br, #pro2_2 .gly .bk .cnt .spot br, #pro3 .gly .bk .cnt .spot br, #pro4 .gly .bk .cnt .spot br { display: block; }
  #pro1 .gly .bk .cnt .spot .hide, #pro2 .gly .bk .cnt .spot .hide, #pro2_2 .gly .bk .cnt .spot .hide, #pro3 .gly .bk .cnt .spot .hide, #pro4 .gly .bk .cnt .spot .hide { display: none; } }
@media (max-width: 640px) { .blk { width: 80%; }
  .blk .tit { margin-top: -50px; }
  .blk .tit img { width: 80%; }
  #pro1 .gly .bk, #pro2 .gly .bk, #pro2_2 .gly .bk, #pro3 .gly .bk, #pro4 .gly .bk { width: 90%; padding-bottom: 30px; margin-right: auto; }
  #pro1 .gly .bk .vs img, #pro2 .gly .bk .vs img, #pro2_2 .gly .bk .vs img, #pro3 .gly .bk .vs img, #pro4 .gly .bk .vs img { max-width: 260px; }
  #pro1 .gly .bk .cnt .spot br, #pro2 .gly .bk .cnt .spot br, #pro2_2 .gly .bk .cnt .spot br, #pro3 .gly .bk .cnt .spot br, #pro4 .gly .bk .cnt .spot br { display: none; }
  #pro1 .gly .bk .cnt .spot .hide, #pro2 .gly .bk .cnt .spot .hide, #pro2_2 .gly .bk .cnt .spot .hide, #pro3 .gly .bk .cnt .spot .hide, #pro4 .gly .bk .cnt .spot .hide { display: inline-block; }
  #pro2_2 .gly2 .tit { margin-top: -50px; }
  #pro2_2 .gly2 .bk3 .vs img { margin-top: -40px; }
  #pro2_2 .gly2 .bk4 .vs img { margin-top: -40px; }
  #pro2_2 .gly2 .bk5 { display: none; }
  #pro3 .gly2 .bk3 .vs img { margin-top: -40px; }
  #pro3 .gly2 .bk4 .vs img { margin-top: -40px; }
  #pro3 .gly2 .bk5 { display: none; } }
@media (max-width: 480px) { .blk { width: 90%; }
  .blk .tit img { width: 100%; }
  #pro1 .gly .bk, #pro2 .gly .bk, #pro2_2 .gly .bk, #pro3 .gly .bk, #pro4 .gly .bk { width: 100%; padding-bottom: 20px; }
  #pro1 .gly .bk .vs img, #pro2 .gly .bk .vs img, #pro2_2 .gly .bk .vs img, #pro3 .gly .bk .vs img, #pro4 .gly .bk .vs img { width: 90%; }
  #pro1 .gly .bk .cnt .txt, #pro2 .gly .bk .cnt .txt, #pro2_2 .gly .bk .cnt .txt, #pro3 .gly .bk .cnt .txt, #pro4 .gly .bk .cnt .txt { width: 96%; }
  #pro1 .gly .bk .cnt .spot br, #pro2 .gly .bk .cnt .spot br, #pro2_2 .gly .bk .cnt .spot br, #pro3 .gly .bk .cnt .spot br, #pro4 .gly .bk .cnt .spot br { display: block; }
  #pro1 .gly .bk .cnt .spot .hide, #pro2 .gly .bk .cnt .spot .hide, #pro2_2 .gly .bk .cnt .spot .hide, #pro3 .gly .bk .cnt .spot .hide, #pro4 .gly .bk .cnt .spot .hide { display: none; }
  #pro2_2 .gly2 .tit { margin-top: -30px; }
  #pro2_2 .gly2 .bk .cnt .txt { width: 90%; }
  #pro2_2 .gly2 .bk .cnt .txt div { width: 90%; }
  #pro3 .gly2 .bk .cnt .txt { width: 90%; }
  #pro3 .gly2 .bk .cnt .txt div { width: 90%; } }
@media (max-width: 300px) { .blk { width: 90%; }
  #pro2_2 .gly2 .tit { margin-top: -20px; } }

#mode .gly { padding-bottom: 20px; }
#mode .gly .bk { width: 46%; }
#mode .gly .bk .vs { width: 100%; }
#mode .gly .bk .vs img { max-width: 400px; }
#mode .gly .bk .cnt { width: 100%; }
#mode .gly .bk .cnt .name { margin-bottom: 10px; }
#mode .gly .bk .cnt .txt { line-height: 28px; }
#mode .gly .bk1 { padding-right: 35px; border-right: 1px solid #d4b962; }
#mode .gly .bk2 { padding-left: 35px; } 


@media (max-width: 1100px) { #mode .gly .bk .vs img { width: 100%; } }
@media (max-width: 900px) { #mode .gly .bk { width: 48%; }
  #mode .gly .bk1 { padding-right: 20px; }
  #mode .gly .bk2 { padding-left: 20px; } }
@media (max-width: 640px) { #mode .gly .bk { width: 90%; }
  #mode .gly .bk1 { padding-right: 0px; padding-bottom: 20px; border-right: none; border-bottom: 1px solid #d4b962; }
  #mode .gly .bk2 { padding-left: 0px; padding-top: 20px; } }
@media (max-width: 480px) { #mode .gly .bk { width: 100%; } }
#qa .gly { padding-top: 30px; padding-bottom: 25px; }
#qa .gly .bk { width: 32%; }
#qa .gly .bk .vs { width: 100%; }
#qa .gly .bk .cnt { width: 100%; }
#qa .gly .bk .cnt .name { margin-bottom: 10px; }
#qa .gly .bk .cnt .txt { line-height: 28px; }
#qa .gly .bk1 { width: 28%; padding-right: 15px; border-right: 1px solid #d4b962; }
#qa .gly .bk1 .vs img { max-width: 170px; }
#qa .gly .bk2 { width: 35%; padding-left: 15px; padding-right: 15px; border-right: 1px solid #d4b962; }
#qa .gly .bk2 .vs img { max-width: 300px; }
#qa .gly .bk3 { width: 33%; padding-left: 15px; }
#qa .gly .bk3 .vs img { max-width: 170px; }

@media (max-width: 1100px) { #qa .gly .bk .vs img { width: 100%; } }
@media (max-width: 900px) { #qa .gly .bk { width: 96%; }
  #qa .gly .bk .txt { width: 65%; margin-left: 0px; }
  #qa .gly .bk .vs { position: absolute; width: 35%; right: 0; }
  #qa .gly .bk1 { padding-right: 0px; padding-bottom: 20px; border-right: none; border-bottom: 1px solid #d4b962; }
  #qa .gly .bk1 .vs { top: -10px; }
  #qa .gly .bk2 { padding-right: 0px; padding-left: 0px; padding-bottom: 20px; padding-top: 20px; border-right: none; border-bottom: 1px solid #d4b962; }
  #qa .gly .bk2 .txt { width: 55%; }
  #qa .gly .bk2 .vs { width: 50%; top: 55px; right: -20px; }
  #qa .gly .bk3 { padding-left: 0px; padding-top: 20px; }
  #qa .gly .bk3 .vs { top: 20px; } }
@media (max-width: 640px) { #qa .gly .bk { width: 100%; }
  #qa .gly .bk .txt { width: 100%; margin-left: auto; }
  #qa .gly .bk .vs { position: relative; width: 100%; right: auto; }
  #qa .gly .bk1 .vs { top: auto; }
  #qa .gly .bk2 .vs { top: auto; right: auto; }
  #qa .gly .bk3 .vs { top: auto; } }
#video1, #video2 { background: #000; display: block; position: relative; width: 100%; height: auto; margin: 0 auto; overflow: hidden; -webkit-border-radius: 10px; -moz-border-radius: 10px; -ms-border-radius: 10px; -o-border-radius: 10px; border-radius: 10px; }
#video1 img, #video2 img { display: block; position: relative; width: 100%; height: auto; margin: 0 auto; -webkit-transition-property: all; -moz-transition-property: all; -o-transition-property: all; transition-property: all; -webkit-transition-duration: 0.2s; -moz-transition-duration: 0.2s; -o-transition-duration: 0.2s; transition-duration: 0.2s; -webkit-transition-timing-function: ease-out; -moz-transition-timing-function: ease-out; -o-transition-timing-function: ease-out; transition-timing-function: ease-out; }
#video1 .play, #video2 .play { display: block; position: absolute; width: 100px; height: 100px; left: 50%; top: 50%; margin-left: -50px; margin-top: -50px; }
#video1 .play, #video1:link .play, #video1:visited .play, #video2 .play, #video2:link .play, #video2:visited .play { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=100); opacity: 1; -webkit-transform: scale(1, 1); -moz-transform: scale(1, 1); -ms-transform: scale(1, 1); -o-transform: scale(1, 1); transform: scale(1, 1); }
#video1:hover .vdovs, #video1:active .vdovs, #video2:hover .vdovs, #video2:active .vdovs { -webkit-transform: scale(1.1, 1.1); -moz-transform: scale(1.1, 1.1); -ms-transform: scale(1.1, 1.1); -o-transform: scale(1.1, 1.1); transform: scale(1.1, 1.1); -webkit-transition-duration: 3s; -moz-transition-duration: 3s; -o-transition-duration: 3s; transition-duration: 3s; }
#video1:hover .play, #video1:active .play, #video2:hover .play, #video2:active .play { filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=40); opacity: 0.4; -webkit-transform: scale(0.8, 0.8); -moz-transform: scale(0.8, 0.8); -ms-transform: scale(0.8, 0.8); -o-transform: scale(0.8, 0.8); transform: scale(0.8, 0.8); }

#video1 { background: #f9c8dd; }

#video2 { background: #a1d396; }

#video1yt, #video2yt { display: none; }

@media (max-width: 900px) { #video1, #video2 { display: none; }
  #video1yt, #video2yt { display: block; position: relative; width: 100%; height: auto; padding-bottom: 54%; margin: 0 auto; }
  #video1yt iframe, #video2yt iframe { display: block; position: absolute; width: 100%; height: 100%; left: 0; top: 0; } }
#ftr { display: block; position: relative; width: 100%; height: auto; text-align: center; padding-top: 35px; padding-bottom: 35px; }
#ftr .bg { display: block; position: absolute; width: 100%; height: 20px; left: 0; top: 50%; margin-top: 5px; }
#ftr a { display: inline-block; position: relative; width: 220px; height: auto; margin: 0 auto; }
#ftr a img { display: block; position: relative; width: 100%; height: auto; }

@media (max-width: 360px) { #ftr .bg { margin-top: 0px; }
  #ftr a { width: 180px; } }