/***********************ALL*******************/ html{min-height:100%;font-size:100%;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;font-family:Arial,"文泉驛正黑","WenQuanYi Zen Hei","儷黑 Pro","LiHei Pro",Meiryo,"微軟正黑體","Microsoft JhengHei","Microsoft JhengHei",DFKai-SB, sans-serif;position:relative; } body{margin:0 0 55px;margin:0\0;padding:0;color:#fff;background:#000;font-size:14px; font-size:0.875rem;} .ie10 body{margin:0} /* ------------normalize------------ */ article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block;} audio,canvas,progress,video{display:inline-block;vertical-align:baseline;} :after,:before, div, span, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a,em,img,b,u,i,center,strong,dl,dt,dd,ol,ul,li,form,label,table,caption,tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,embed,figure,figcaption,footer,header,hgroup,menu,nav,ruby,section,audio,video{background-repeat:no-repeat;background-position:center;}img{border:0;}a{background-color:transparent;}a,a:focus,a:active,a:hover{outline:0;text-decoration:none;}figure{margin:1em 40px;}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0;}button,htmlinput[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer;}button[disabled],html input[disabled]{cursor:default;}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0;}input{line-height:normal;}input[type="checkbox"],input[type="radio"]{box-sizing:border-box;padding:0;}textarea{overflow:auto;}table{border-collapse:collapse;border-spacing:0;}td,th{padding:0;}:after,:before{content:"";display:block;position:absolute;}h1{font-size:2em;margin:0.67em 0;} a{text-decoration:none;color:#fff;} a:hover{text-decoration:none;} /* scrollbar */ html::-webkit-scrollbar-track,nav::-webkit-scrollbar-track{border-radius:5px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.3);box-shadow:inset 0 0 6px rgba(0,0,0,0.3);background:rgba(45,45,50,1)} html::-webkit-scrollbar,nav::-webkit-scrollbar{width:15px;background:rgba(45,45,50,1)} html::-webkit-scrollbar-thumb,nav::-webkit-scrollbar-thumb{border-radius:7px;border:2px solid rgba(85,85,85,1);border:3px solid rgba(50,50,50,1);background:rgba(15,15,15,1);background:rgba(115,115,115,1);} html::-webkit-scrollbar-thumb:hover,html::-webkit-scrollbar-thumb:active,nav::-webkit-scrollbar-thumb:hover,nav::-webkit-scrollbar-thumb:active{background:rgba(155,155,155,1);} /* body FULLbackground style */ video{position:fixed;right:0;bottom:0;width:auto;min-width:100%;height:auto;min-height:100%;z-index:-2;background:#000;background-size:cover;} body>.pattern{position:fixed;top:0;left:0;width:100%;height:100%;overflow:auto;opacity:0.5;background:rgba(225,225,35,0.0) url(../images/dot.png) repeat;z-index:-1;} canvas{position:fixed;z-index:-3;top:0;bottom:0;left:0;right:0;-webkit-filter: blur(15px);filter:url('#blur');filter:blur(15px);background:#010101;display:none;} @media (max-width:640px){ video,body>.pattern{display:none;} canvas{display:block;} } /* body HEADER style */ body>header{width:100%;height:67px;background:rgba(45,45,50,1);border-bottom:2px solid rgba(155,205,50,1);box-shadow:0 1px 0px 0px rgba(45,45,50,1);position:relative;z-index:2;} body>header:before{display:none;width:100%;height:500px;top:-380px;background:rgba(176,176,176,1); background:-moz-radial-gradient(center, ellipse cover, rgba(176,176,176,1) 0%, rgba(176,176,176,1) 8%, rgba(1,1,1,0) 78%, rgba(1,1,1,0) 100%);background:-webkit-gradient(radial, center center, 0px, center center, 100%, color-stop(0%, rgba(176,176,176,1)), color-stop(8%, rgba(176,176,176,1)), color-stop(78%, rgba(1,1,1,0)), color-stop(100%, rgba(1,1,1,0)));background:-webkit-radial-gradient(center, ellipse cover, rgba(176,176,176,1) 0%, rgba(176,176,176,1) 8%, rgba(1,1,1,0) 78%, rgba(1,1,1,0) 100%);background:-ms-radial-gradient(center, ellipse cover, rgba(176,176,176,1) 0%, rgba(176,176,176,1) 8%, rgba(1,1,1,0) 78%, rgba(1,1,1,0) 100%);background:radial-gradient(ellipse at center, rgba(176,176,176,1) 0%, rgba(176,176,176,1) 8%, rgba(1,1,1,0) 78%, rgba(1,1,1,0) 100%);filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b0b0b0', endColorstr='#010101', GradientType=1 );} body>header h1{margin:0;height:50px;white-space:nowrap;overflow:hidden;position:absolute;z-index:1;left:35px;top:8px; } body>header h1 a{display:block;width:185px;height:100%;background:url(../images/logo.svg) no-repeat center;background-size:contain;text-indent:-9000px;} /* header NAV style */ body>header nav{width:calc(100%-435px);padding:0;margin:0 185px 0 250px;overflow-x:hidden;} body>header nav>a{display:none;width:24px;height:21px;position:absolute;top:15px;right:15px;cursor:pointer;z-index:2;background:rgba(0,0,0,0);padding:15px 12px 10px;} body>header nav>a i{display:block;width:100%;height:5px;height:3px;background:#fff;margin:6px auto;margin:2px auto;backface-visibility:hidden;transition-duration:0.3s;} body>header nav a.on i:nth-child(1){-webkit-transform:rotate(45deg) translate(5px,5px);transform:rotate(45deg) translate(5px,5px);} body>header nav a.on i:nth-child(2){opacity:0;} body>header nav a.on i:nth-child(3){-webkit-transform:rotate(-45deg) translate(2px, -2px);transform:rotate(-45deg) translate(2px, -2px);} body>header ul:after{content:"";clear:both;position:relative;} body>header ul{list-style:none;margin:0;padding:0;text-align:center;} body>header ul li{float:left;} body>header nav ul li{width:calc(100%/6);width: 16%\0;} body>header nav ul li:nth-child(7),body>header nav ul li:nth-child(8),body>header nav ul li:nth-child(9),body>header nav ul li:nth-child(10),body>header nav ul li:nth-child(11),body>header nav ul li:nth-child(12),body>header nav ul li:nth-child(13){display:none;} body>header nav ul li a{display:block;padding:0.875rem 0 0.5rem;} body>header nav ul li a span{position:relative;} body>header nav ul li a span:nth-child(1){color:rgba(255,255,255,.5);font-family:"Times New Roman", Times;-moz-transform:scale(0.75);-webkit-transform:scale(0.75);-ms-transform:scale(0.75);-o-transform:scale(0.75);transform:scale(0.75);display:inline-block;} body>header nav ul li a span:nth-child(1):before{border-bottom:1px solid rgba(155,205,50,1);width:0%;display:inline-block;position:absolute;top:1.25rem;left:50%;margin-left:-45%; -moz-transform-origin:50% 50%;-webkit-transform-origin:50% 50%;-ms-transform-origin:50% 50%;-o-transform-origin:50% 50%;transform-origin:50% 50%;-moz-transition:all .35s;-webkit-transition:all .5s;-ms-transition:all .5s;-o-transition:all .5s;transition:all .5s;} body>header nav ul li a span:nth-child(2){line-height:1.875rem;width:100%;display:inline-block;} body>header nav ul li:hover a span:nth-child(1):before, body.news>header nav li:nth-child(1) a span:nth-child(1):before, body.newscon>header nav li:nth-child(1) a span:nth-child(1):before, body.artists>header nav li:nth-child(2) a span:nth-child(1):before, body.artistscon>header nav li:nth-child(2) a span:nth-child(1):before, body.album>header nav li:nth-child(3) a span:nth-child(1):before, body.albumcon>header nav li:nth-child(3) a span:nth-child(1):before, body.schedule>header nav li:nth-child(4) a span:nth-child(1):before, body.member>header nav li:nth-child(5) a span:nth-child(1):before, body.member_login>header nav li:nth-child(5) a span:nth-child(1):before, body.cultural>header nav li:nth-child(7) a span:nth-child(1):before {border-bottom:1px solid rgba(155,205,50,1);width:90%;} /* header SUBNAV style */ body>header div.subnav{position:absolute;top:0;right:0px;background:rgba(45,45,50,1);z-index:1; margin:0\0;padding:0\0;right:60px\0;} .ie10 body>header div.subnav{right:60px;} body>header div.subnav ul{background:rgba(45,45,50,1);} body>header div.subnav ul li{border-left:1px solid rgba(255,255,255,.15)} body>header>div.subnav>ul li a{text-indent:-1000px;white-space:nowrap;width:60px;height:67px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#2e2d32;} body>header>div.subnav>ul li a:before{top:25px;left:18px;width:24px;height:24px;background:url(../images/youtube.svg) no-repeat center;} body>header>div.subnav>ul li.weixin a:before{left:20px;width:20px;background-image:url(../images/weixin.svg);} body>header>div.subnav>ul li.language a:before{left:16px;width:26px;background-image:url(../images/language.svg);} body>header>div.subnav>ul li a:hover:before {animation:zoom .5s .1s ease-in-out;animation-delay:.3s;} @keyframes zoom{50%{transform:scale(2);opacity:.2;}} body>header>div.subnav>ul li a:after {height:150px;width:220px;top:0;left:-220px;position:absolute; background:linear-gradient(120deg,rgba(255,255,255,0) 20%,rgba(255,255,255,0.2) 30%,rgba(255,255,255,0.45) 50%,rgba(255,255,255,0.25) 65%,rgba(255,255,255,0) 85%);display:none\0;} body>header>div.subnav>ul li a:hover:after{animation:shine 5.2s ease-in-out forwards;animation-delay:-4.5s;} @keyframes shine { 85%{left:-220px;} 100%{left:100%;}} body>header>div.subnav>ul li:hover a {background:transparent;} .weixin-qrcode{height:0px;transition:height 0.8s ease-in-out;overflow:hidden; position:absolute; z-index:3; left:0; background:rgba(155,205,50,1);} .weixin:hover>.weixin-qrcode{height:250px;transition:height 0.8s ease-in-out;} @media (max-width:640px){ body>header{position:static;background:none;border:none;box-shadow:none;} body>header div.subnav{display:none;} body>header h1{left:25px;} body>header h1 a{width:165px; text-indent:-9000px;} body>header nav{margin:0;transition:all 0.5s ease;height:100%;width:100%;position:absolute;} body>header nav.on{opacity:1;display:block;z-index:2;background:rgba(0,0,0,0.9);} body>header nav>a{display:block;} body>header nav ul{margin:4em auto;} body>header nav ul.hidden,body>main.hidden{display:none;} body>header nav ul li{float:none;width:100%;} body>header nav ul li a{line-height:3rem;width:100%;font-size:1.5rem;padding:.7rem 0 .4rem;transition-duration:0.3s;} body>header nav ul li a span:nth-child(1){color:rgba(155,205,50,1);letter-spacing:.5rem;font-size:.75rem;text-indent:0.4rem;display:block;line-height:1rem;} body>header nav.on li{border-bottom:1px solid rgba(255,255,255,.2);} body>header nav.on li:nth-of-type(odd) a{animation:fadeInLeft 0.5s ease;} body>header nav.on li:nth-of-type(even) a{animation:fadeInRight 0.5s ease;} body>header nav ul li:nth-child(8),body>header nav ul li:nth-child(9),body>header nav ul li:nth-child(10),body>header nav ul li:nth-child(11),body>header nav ul li:nth-child(12),body>header nav ul li:nth-child(13),body>header nav ul li:nth-child(14){display:block;} body>header nav ul li:hover a span:nth-child(1):before, body.news>header nav li:nth-child(1) a span:nth-child(1):before, body.newscon>header nav li:nth-child(1) a span:nth-child(1):before, body.artists>header nav li:nth-child(2) a span:nth-child(1):before, body.artistscon>header nav li:nth-child(2) a span:nth-child(1):before, body.album>header nav li:nth-child(3) a span:nth-child(1):before, body.albumcon>header nav li:nth-child(3) a span:nth-child(1):before, body.schedule>header nav li:nth-child(4) a span:nth-child(1):before, body.member>header nav li:nth-child(5) a span:nth-child(1):before, body.member_login>header nav li:nth-child(5) a span:nth-child(1):before, body.cultural>header nav li:nth-child(7) a span:nth-child(1):before {border:none;} body>header nav ul li:hover a span:nth-child(1), body.news>header nav li:nth-child(1) a span:nth-child(2), body.newscon>header nav li:nth-child(1) a span:nth-child(2), body.artists>header nav li:nth-child(2) a span:nth-child(2), body.artistscon>header nav li:nth-child(2) a span:nth-child(2), body.album>header nav li:nth-child(3) a span:nth-child(2), body.albumcon>header nav li:nth-child(3) a span:nth-child(2), body.schedule>header nav li:nth-child(4) a span:nth-child(2), body.member>header nav li:nth-child(5) a span:nth-child(2), body.member_login>header nav li:nth-child(5) a span:nth-child(2), body.cultural>header nav li:nth-child(7) a span:nth-child(2){color:rgba(155,205,50,1);} body>header:before{display:block;} } @keyframes fadeInLeft{0%{transform:translateX(-100%);}100%{transform:translateX(0);}} @keyframes fadeInRight{0%{transform:translateX(100%);}100% {transform:translateX(0);}} @media (max-width:1150px) and (min-width:641px){ body>header{height:134px;} body>header h1{position:relative;width:calc(100% - 35px);border-bottom:1px solid rgba(150,150,150,.3);padding:5px 0 10px;margin:0 0 5px;} body>header nav{width:100%;padding:0;margin:0;} } @media (min-width:1600px){ body>header nav ul li a{padding-top:1.125rem;} body>header nav ul li a span:nth-child(1){color:rgba(155,205,50,1);width:50%;} body>header nav ul li a span:nth-child(1):before{left:inherit;right:50%;margin-right:-45%;} body>header nav ul li a span:nth-child(2){width:50%;color:#fff;text-align:left;} } /* H2 & Header */ main>h2,main>header h2,.album> .linkinfo.videoLB h6{font-size:1rem;letter-spacing:1.0rem;text-indent:1.0rem;z-index:1;} main>h2,.album> .linkinfo.videoLB h6{position:relative;text-align:center;margin:0px 0 25px;padding:60px 0 0;z-index:1;overflow:hidden;} main>h2 span,main>header h2 span,.album> .linkinfo.videoLB h6 span{font-family:"Times New Roman",Times,serif;font-size:.75rem;letter-spacing:2px;letter-spacing:3px;text-indent:3px;-webkit-transform:scale(0.85);transform:scale(0.85);position:absolute;} main>h2 span,.album> .linkinfo.videoLB h6 span{width:100%;top:30px;right:0;} main>h2 span:after,main>header h2 span:after,.album> .linkinfo.videoLB h6 span:after{width:50px;height:1px;border-bottom:1px solid rgba(155,205,50,1);left:50%;margin-left:-25px;top:20px;} main>header{position:relative;min-height:160px;width:100%;} main>header h1{width:calc(73% - 85px);padding:20px 0;margin:0 0 0 85px;line-height:1.3em;font-size:2rem;font-weight:normal;letter-spacing:3px;float:right;} .artistscon main>header h1{text-align:center;font-size:3.5rem;margin:0;letter-spacing:0.35em;} main>header h2{width:calc(27% - 6em);text-align:right;margin:0;position:relative;padding:4rem 6rem 0 0;float:left;} main>header h2 span{right:1rem;display:inline;} .artists>main>h2{position:absolute;left:50%;margin-left:-4rem;top:80px;} /*DECORATION style*/ main>div.decoration,main>header div{font-family:"Times New Roman",Times,serif;font-style:italic;height:40px;line-height:40px;background: -prefix-linear-gradient(to right,rgba(155,205,50,1) 0%,rgba(155,205,50,1) 30%,rgba(155,205,50,.7) 70%,rgba(155,205,50,0) 100%);background:linear-gradient(to right,rgba(155,205,50,1) 0%,rgba(155,205,50,1) 30%,rgba(155,205,50,.7) 70%,rgba(155,205,50,0) 100%);-ms-filter:"progid:DXImageTransform.Microsoft.gradient(startColorStr='#9bcd32', EndColorStr='#384128',GradientType=1)";} main>div.decoration{width:75%;margin-left:25%;position:relative;} main>div.decoration span,main>header div span{display:block;font-size:4rem;color:rgba(135,175,40,1);letter-spacing:0.5em;font-weight:bold;overflow:hidden;} main>header div span {display:inline-block;} main>header div{font-size:2rem;clear:both;display:block;position:absolute;right:0;bottom:0;width:calc(73% + 10px); vertical-align:top;} /* after & before */ main>div.decoration:before,main>header div:before{top:0px;left:-25px;width:0px;height:0px;border-style:solid;border-width:0 0 40px 25px;border-color:transparent transparent rgba(155,205,50,1) transparent;} main>div.decoration:after,main>header div:after{left:15px;bottom:0;width:10px;height:160px;background-color:transparent;-ms-transform:skewX(-32deg);-webkit-transform:skewX(-33deg);transform:skewX(-33deg);border-right:1px solid rgba(155,205,50,1);z-index:-1;} .newscon>main>header time em,.artistscon>main>header div em{display:inline-block;width:15px;} @media (max-width:1150px){ .artists>main>h2{position:relative;left:inherit;margin-left:0;top:0px;} } @media (max-width:970px){ main>header div{top:105px;bottom:inherit;width:calc(73% + 10px);} main>header h2{width:100%;float:none;text-align:center;padding:4rem 0rem 0 0;margin:0px 0 25px;} main>header h2 span{width:100%;top:30px;right:0;} main>header h1{width:100%;float:none;margin:80px 0 0;padding:0;} } @media (max-width:640px){ main>h2,main>header h2{line-height:4.25rem;padding:0;padding-top:2rem;} main>h2 span,main>header h2 span{font-size:4.25rem;transform:none;color:#333;z-index:-1;} main>div.decoration,main>h2 span:after,main>header h2 span:after{display:none;} } /* socialnetwork */ ul.socialnetwork_link{margin:0;padding:0;list-style:none;position:absolute;} .albumcon ul.socialnetwork_link{left:calc(33.3% - 110px);top:0;} ul.socialnetwork_link li{float:left;margin:0 10px 0 5px;padding:10px 20px;} ul.socialnetwork_link li a{display:block;width:20px;height:20px;background:url(../images/facebook.svg) no-repeat center;background-size:contain;cursor:pointer;} ul.socialnetwork_link li:nth-child(2) a{background-image:url(../images/weibo.svg);} ul.socialnetwork_link li:nth-child(3) a{background-image:url(../images/weixin.svg);} /* .home #cycle style */ /*******************************/ /*******************************/ .home:before{background:url(../images/stripe.svg) top repeat-x;height:135px;width:100%;left:0;top:160px;z-index:0;-webkit-transform:skewY(-10deg);transform:skewY(-10deg);display:none;} .home #cycle,.home #cycle>div{position:absolute;width:100%;height:100vh;background-size:cover;background-position:center;text-shadow:0 0 2px 2px rgba(0,0,0,0.2);background-repeat:no-repeat;overflow:hidden;top:0;left:0;background-color:#000;} .home #cycle>i{position:absolute;z-index:2;cursor:pointer;bottom:15%;font-weight:900;font-style:normal;opacity:0;font-size:.75rem;-moz-transition:.3s;-o-transition:.3s;-webkit-transition:.3s;transition:.3s;} .home #cycle>i:active{color:rgba(255,255,255,.3);} .home #cycle>#left{left:calc(50% - 200px);} .home #cycle>#right{right:calc(50% - 200px);} .home #cycle:hover>#left{left:calc(50% - 135px);opacity:1;} .home #cycle:hover>#right{right:calc(50% - 135px);;opacity:1;} .home #cycle>ul{padding:0;margin:0;position:absolute;left:0;bottom:15%;z-index:1;list-style:none;text-align:center;width:100%;} .home #cycle>ul>li{margin:0 6px;padding:0;width:11px;height:11px;border-radius:50%;background:rgba(255,255,255,.5);display:inline-block;cursor:pointer;-moz-transition:.3s;-o-transition:.3s;-webkit-transition:.3s;transition:.3s;} .home #cycle > ul > li.showli{background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.5); -moz-animation:boing .5s forwards;-o-animation:boing .5s forwards;-webkit-animation:boing .5s forwards;animation:boing .5s forwards;} .home #cycle > ul > li:hover{background:rgba(155,205,50,1);} .home #cycle > div.show{z-index:1;} .home #cycle>div>h2, .home #cycle>div>h3{margin:0;padding:0;opacity:0;text-align:center;height:100%;width:100%;position:absolute;font-weight:normal; -webkit-transition:0.8s all ease-in-out; -moz-transition:0.8s all ease-in-out; -ms-transition:0.8s all ease-in-out; transition:0.8s all ease-in-out;} .home #cycle>div>h2{font-size:1.2rem;letter-spacing:.5rem; -webkit-transform:translateY(-20%); -moz-transform:translateY(-20%); -ms-transform:translateY(-20%); transform:translateY(-20%);} .home #cycle>div>h3{font-size:2.5rem;letter-spacing:.5px; -webkit-transform:translateY(20%); -moz-transform:translateY(20%); -ms-transform:translateY(20%); transform:translateY(20%);} .home #cycle>div>a{position:absolute;display:block;height:100%;width:100%;top:0;left:0;} .home #cycle>div>a:before{content:"";position:absolute;display:block;left:0;top:0;width:100%;height:100%;z-index:-1;background:url(../images/dot.png) repeat;} .home #cycle>div>h2 p, .home #cycle>div>h3 p{position:absolute;margin:0;} .home #cycle>div>h2 p{left:50%;transform:translate(-50%,0);padding:5px 20px;display:inline;background:rgba(155,205,50,.7);background:linear-gradient(to left,rgba(155,205,50,0) 0%,rgba(155,205,50,0.7) 20%,rgba(155,205,50,0.7) 80%,rgba(155,205,50,0) 100%);bottom:33%;} .home #cycle>div>h3 p{width:calc(100% - 50px);left:25px;padding:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;bottom:22%;} .home #cycle>div>.showtxt{opacity:1;-webkit-transform:none;-moz-transform:none;-ms-transform:none;transform:none;} @keyframes boing{0%{transform:scale(1.2)}40%{transform:scale(.6)}60%{transform:scale(1.2)}80%{transform:scale(.8)}100%{transform:scale(1)}} @media(min-width:480px) and (max-width:1150px){ .home #cycle>ul{bottom:20%;} .home #cycle>i{bottom:20%;} .home #cycle>div>h2 p{bottom:38%;} .home #cycle>div>h3 p{bottom:27%;} } @media (max-width:640px){ .home:before{display:block;} .home #cycle{top:100px;left:5%;right:5%;width:90%;height:calc(95vh - 80px);background-color:transparent;} .home #cycle>div{height:35vh;overflow:visible;} .home #cycle>div>a{height:100vh;} .home #cycle>i{display:none;} .home #cycle>div>h2 p, .home #cycle>div>a:before{background:none;} .home #cycle>ul>li{border-radius:0;transform:rotate(45deg);border:4px solid rgba(0,0,0,.9);background:rgba(255,255,255,.8)} .home #cycle>ul>li.showli{background:rgba(155,205,50,1);box-shadow:0px 0px 0px 1px rgba(255,255,255,.3)} .home #cycle>div>h2 p{bottom:-30%;width:100%;font-size:1rem;line-height:1.5rem;} .home #cycle>div>h3 p{bottom:-75%;white-space:inherit; height:6.25rem;font-size:2.25rem;} } /*******************************/ /*******************************/ /*******************************/ /*******************************/ /* body>main */ /*******************************/ /*******************************/ /*******************************/ /*******************************/ body#contain:after{bottom:0;left:0;width:100%;height:calc(100% - 205px);background:rgba(0,0,0,0.7);z-index:-1;} body>main{position:relative;width:calc(100% - 50px);margin:0;padding:0 25px;/**************/max-width:1500px;margin:0 auto;} /* main>article */ body#contain main>article{position:relative;padding:0 0 25px;margin:0;height:100%;} body#contain main>article p{margin-bottom:1rem;} body#contain>main>article .ckf iframe{max-width:650px;width:100%;margin:0 auto;} body#contain>main>article .ckf{width:100;margin:30px auto 0;} @media (max-width:640px){ body#contain main:before{background:url(../images/stripe.svg) top repeat-x;height:120px;width:100%;left:0;top:130px;z-index:0;} body#contain main:after{width:300px;height:65px;background:url(../images/stripe_light.png) top no-repeat;top:95px;right:0;} body#contain>main>article .ckf{margin-top:175px;} body#contain.newscon>main>article .ckf{margin-top:30px;} } @media (max-width:480px){ body>main{width:calc(100% - 30px);padding:0 15px;} body#contain main:before,body#contain main:after{-webkit-transform:skewY(-10deg);transform:skewY(-10deg);} } /* main form */ #contain main>article input:-webkit-autofill{-webkit-box-shadow:0 0 0px 1000px rgba(155,205,50,1) inset;} #contain main>article form>div{position:relative;margin:0 0 12px;} #contain main>article form>div>label{position:absolute;z-index:1;top:2px;left:1em;text-shadow:1px 2px rgba(0,0,0,.2);} #contain main>article form div>input, #contain main>article form div select{border:1px solid rgba(255,255,255,.3);background:rgba(0,0,0,0);color:#fff;line-height:25px;} #contain main>article form>div option{background:#19272a;} #contain main>article form>div>input{width:calc(100% - 7.5em);padding-left:7.5em;} #contain main>article form>div>img{position:absolute;width:6em;height:25px;top:2px;right:0px} #contain main>article form>div>div.button{position:absolute;right:0;top:1px;width:calc(100% - 7.5em);line-height:25px;height:25px;} #contain main>article form>div>div.button>input{position:absolute;width:100%;line-height:25px;cursor:pointer;filter:alpha(opacity=0);opacity:0;} #contain main>article form>div>div.button>span{position:absolute;right:-1px;top:1px;background:#151618;width:6em;text-align:center;border-left:1px solid rgba(255,255,255,.2);} #contain main>article .submitbtn, #contain main>article .uploadbtn{text-align:center;} #contain main>article .submitbtn a, #contain main>article .uploadbtn a, .steps>main.step2 article>p label, #contain main>article label.decorationbtn{color:rgba(155,205,50,1);border:1px solid rgba(155,205,50,1);border-radius:25px;background:rgba(155,205,50,0);line-height:25px;min-width:60px;padding:0 10px;margin:0 10px;display:inline-block;cursor:pointer;} .steps>main.step2 article>p label, #contain main>article .uploadbtn a{color:#fff;border-color:rgba(135,230,210,1);background:rgba(135,230,210,.5);} #contain main>article .submitbtn a:hover{background:rgba(155,205,50,.5);color:rgba(255,255,255,1);} #contain main>article div.rwithc{position:relative;height:1.8rem;line-height:1.8rem;} #contain main>article div.rwithc label{display:inline-block;width:100%;cursor:pointer;text-indent:2rem;} #contain main>article div.rwithc input{position:absolute;opacity:0;} #contain main>article div.rwithc label:after{width:16px;height:16px;border:1px solid rgba(100,100,100,1);border-radius:50%;left:0;top:5px;} #contain main>article div.rwithc input:checked + label:before{width:10px;height:10px;background:rgba(155,205,50,1);border-radius:50%;left:4px;top:9px;} .member#contain main article form select::-webkit-scrollbar{width:8px;height:8px;} .member#contain main article form select::-webkit-scrollbar-button:start:decrement{display:none;} .member#contain main article form select::-webkit-scrollbar-track-piece{background:rgba(200,200,200,.5);-webkit-border-radius:6px;} .member#contain main article form select::-webkit-scrollbar-thumb:vertical{-webkit-border-radius:6px;background:#fff;} /* main>article.sidenav */ #contain main>article.sidenav>nav{width:320px;float:left;margin:0 0 80px;} #contain main>article.sidenav>nav ul{list-style:none;margin:30px 40px 0px 0;border-right:1px solid #778c9f;} #contain main>article.sidenav>nav ul li{border-bottom:1px solid #778c9f;position:relative;} #contain main>article.sidenav>nav ul li a{min-height:65px;display:flex;align-items:center;justify-content:center;line-height:65px\0;display:inline-block\0;} .ie10 #contain main>article.sidenav>nav ul li a{display:inline-block;line-height:65px;} #contain main>article.sidenav>nav ul li:nth-last-child(1){border-bottom:none;} #contain main>article.sidenav>nav ul li:before{content:"";position:absolute;height:0;width:0;right:1px;top:50%;margin-top:-7px;border-top:6px solid rgba(155,205,50,0);border-bottom:6px solid rgba(155,205,50,0);border-right:10px solid rgba(155,205,50,0);} #contain main.join1>article.sidenav>nav ul li:nth-child(1):before, #contain main.join2>article.sidenav>nav ul li:nth-child(2):before, #contain main.join3>article.sidenav>nav ul li:nth-child(3):before, #contain.about article>nav ul.about1>li:nth-child(1):before, #contain.about article>nav ul.about2>li:nth-child(2):before, #contain.about article>nav ul.about3>li:nth-child(3):before, #contain.about article>nav ul.about4>li:nth-child(4):before, #contain.about article>nav ul.about5>li:nth-child(5):before, #contain.about article>nav ul.about6>li:nth-child(6):before, #contain main.membership2 article>nav ul li:nth-child(1):before, #contain main.membership3 article>nav ul li:nth-child(2):before, #contain main.membership4 article>nav ul li:nth-child(3):before{border-right-color:rgba(155,205,50,1);} #contain.join main.join1>article>nav ul>li:nth-child(1) a, #contain.join main.join2>article>nav ul>li:nth-child(2) a, #contain.join main.join3>article>nav ul>li:nth-child(3) a, #contain.about article>nav ul.about1>li:nth-child(1) a, #contain.about article>nav ul.about2>li:nth-child(2) a, #contain.about article>nav ul.about3>li:nth-child(3) a, #contain.about article>nav ul.about4>li:nth-child(4) a, #contain.about article>nav ul.about5>li:nth-child(5) a, #contain.about article>nav ul.about6>li:nth-child(6) a, #contain main.membership2 article>nav ul li:nth-child(1) a, #contain main.membership3 article>nav ul li:nth-child(2) a, #contain main.membership4 article>nav ul li:nth-child(3) a{color:rgba(155,205,50,1);} #contain main>article.sidenav>.ckf, #contain main>article.sidenav>.form {width:calc(100% - 320px);margin:15px 0 80px;float:left;} #contain main>article.sidenav>.form{color:#a7aca8;line-height:25px;margin-top:30px;} #contain main>article.sidenav>.form form>div{width:calc(50% - 1em);float:left;} #contain main>article.sidenav>.form form>div:nth-child(2n){margin-left:1em;} #contain main>article.sidenav>.form form>div:nth-child(2n+1){margin-right:1em;} #contain main>article.sidenav>.form form>p{clear:both;} #contain main>article.sidenav>.form form>div input[type=submit]{width:100%;padding:0;} @media (max-width:1150px){ #contain main>article.sidenav>nav{width:30%;} #contain main>article.sidenav>.ckf{width:70%;max-width:inherit;} #contain main>article.sidenav>nav, #contain main>article.sidenav>.ckf, #contain main>article.sidenav>.form{margin-bottom:150px;} } @media (max-width:960px){ #contain main>article.sidenav>.ckf, #contain main>article.sidenav>.form{width:100%;max-width:100%;} } @media (max-width:640px){ #contain main>article.sidenav>.form form{font-size:1rem;line-height:2rem;} #contain main>article.sidenav>.form form>div{width:100%;margin-bottom:20px;float:none;} #contain main>article.sidenav>.form form>div:nth-child(2n){margin-left:0;} #contain main>article.sidenav>.form form>div:nth-child(2n+1){margin-right:0;} #contain main>article.sidenav>.form form>div>input{border:none;border-bottom:1px solid rgba(255,255,255,.5);line-height:2rem;} #contain main>article.sidenav>.form form>div img,#contain main>article.sidenav>.form div>div.button>span{width:4.5em;} #contain main>article.sidenav>.form form>div:nth-last-child(2){text-align:center;} #contain main>article.sidenav>.form form>div input[type=submit]{width:6em;border:1px solid rgba(155,205,50,1);border-radius:20px;background:rgba(155,205,50,.7);} } /* .navmobile style */ .navmobile{display:none;width:80%;margin:0 auto 25px;border:1px solid rgba(155,205,50,.5);cursor:pointer;overflow:hidden;border-radius:20px;line-height:2rem;font-size:0.875rem;} #joinnav.navmobile{margin:25px auto 0px;} #about_allnav.navmobile{display:none;} .navmobile>p{position:relative;height:2rem;margin:0;padding:0;text-indent:1rem;color:rgba(155,205,50,1);} .navmobile b{position:absolute;bottom:0;top:-5px;margin:auto;right:30px;height:10px;width:12px;} .navmobile i{background:rgba(155,205,50,1);display:inline-block;height:2px;margin:auto;position:absolute;width:100%;transition: all 0.2s ease-in-out;} .navmobile i:nth-child(1){top:0;} .navmobile i:nth-child(2){top:50%;} .navmobile i:nth-child(3){top:100%;} .navmobile.exp i:nth-child(1){top:50%;} .navmobile.exp i:nth-child(3){top:50%;} .navmobile>div{height:0;overflow:hidden;transition:height 0.5s cubic-bezier(0.19,1,0.22,1);} .navmobile>div ul{list-style:none;margin:0;padding:0;} .navmobile>div li{line-height:3rem;position:relative;background:#79b400;border-bottom:1px solid rgba(155,205,50,1);} .navmobile>div li.no-link{background:rgba(120,180,0,.3);text-align:center;} .navmobile>div li.no-link a{padding:0;width:100%;} .navmobile>div li.no-link a:after,.navmobile>div li.no-link a:before{ display:none;} .navmobile>div li a{color:#fff;display:block;height:100%;width:calc(100% - 3rem);padding-left:3rem;text-decoration:none;position:relative;z-index:1;} .navmobile>div li a:before{width:8rem;height:100%;background:#79b400;top:0;left:0;z-index:-2;} .navmobile>div li a:after{top:0;left:8rem;z-index:-2;width:0;height:0;border-style:solid;border-width:3rem 3rem 0 0;border-color:#79b400 transparent transparent transparent;} .navmobile>div li img{position:absolute;top:0;transition:all 0.5s ease;right:0;height:3rem;} #artistsnav.navmobile.exp>div{height:calc(3rem * 38);} #joinnav.navmobile.exp>div{height:calc(3rem * 3);} .about1 #aboutnav.navmobile.exp>div{height:calc(3rem * 3);} .about2 #aboutnav.navmobile.exp>div{height:calc(3rem * 6);} .about3 #aboutnav.navmobile.exp>div{height:calc(3rem * 4);} .about4 #aboutnav.navmobile.exp>div{height:calc(3rem * 4);} .about5 #aboutnav.navmobile.exp>div{height:calc(3rem * 1);} .about6 #aboutnav.navmobile.exp>div{height:calc(3rem * 3);} #about_allnav.navmobile.exp>div{height:calc(3rem * 29);} .member .navmobile.exp>div{height:calc(3rem * 4);} @media (max-width:960px){ .news>main>ul, .album>main>ul.latest, .member .navmobile{margin-top:30px;} .artistsnav,article.sidenav>nav{display:none;} .navmobile{display:block;} #aboutnav.navmobile{margin:35px auto 10px;} #joinnav.navmobile{margin:50px auto 0px;} .navmobile>div li{text-align:center;} .navmobile>div li a{padding:0;width:100%;} .navmobile>div li img{display:none;} } @media (max-width:640px){ #aboutnav.navmobile, body#contain.about main>nav{display:none;} #about_allnav.navmobile, #membernav.navmobile{display:block;margin-top:180px;} } /* #lightbox style */ div#lightbox{position:fixed;top:0;right:0;left:0;height:0;z-index:5;} div#lightbox>article{position:relative;z-index:2;background:#6eb906;width:calc(100% - 100px);max-width:400px;padding:35px 20px 20px;margin:200px auto 0; -webkit-transform:translateY(-300%); -moz-transform:translateY(-300%); -ms-transform:translateY(-300%); transform:translateY(-300%); -webkit-transition:0.35s transform ease-in-out; -moz-transition:0.35s transform ease-in-out; -ms-transition:0.35s transform ease-in-out; transition:0.35s transform ease-in-out;} div#lightbox>article:after{content:"FORGOT 忘記密碼";font-size:2rem;font-weight:900;top:-1.8rem;color:#6eb906;left:20px;line-height:2rem;font-style:italic;} .membership#contain div#lightbox>article:after{content:"POINTS 累積點數";} .steps#contain div#lightbox.dot>article:after{content:"會員點數說明";} div#lightbox>input{z-index:-999;display:none;} div#lightbox>input:checked ~ article{-webkit-transform:none;-moz-transform:none;-ms-transform:none;transform:none;} div#lightbox>article>label{font-size:1.5rem;font-weight:900;position:absolute;right:-30px;top:10px;margin:0;padding:0;cursor:pointer;} div#lightbox>input:checked ~ .backdrop{bottom:0;opacity:1;z-index:1; -webkit-transition:0.3s opacity ease-in-out; -moz-transition:0.3s opacity ease-in-out; -ms-transition:0.3s opacity ease-in-out; transition:0.3s opacity ease-in-out;} div#lightbox>label{position:fixed;top:0;right:0;bottom:100%;left:0;opacity:0;background:rgba(0, 0, 0, 0.75);-webkit-transition:0.3s opacity ease-in-out, bottom 0.1s 0.3s; -moz-transition:0.3s opacity ease-in-out, bottom 0.1s 0.3s; -ms-transition:0.3s opacity ease-in-out, bottom 0.1s 0.3s; transition:0.3s opacity ease-in-out, bottom 0.1s 0.3s;} div#lightbox>article:before{width:calc(100% + 70px);height:100%;background:#6eb906;left:-35px;top:0;z-index:-1;-moz-transform:skewX(-20deg);-webkit-transform:skewX(-20deg);-o-transform:skewX(-20deg);-ms-transform:skewX(-20deg);transform:skewX(-20deg);} div#lightbox>article ul{margin:0;padding:0;list-style:inside;text-shadow:1px 2px rgba(0,0,0,.2);} div#lightbox>article ul li{line-height:1.5rem;} div#lightbox>article form div{margin-top:10px;position:relative;line-height:2rem;max-width:360px;} div#lightbox>article form div label{width:4rem;display:inline-block;} div#lightbox>article form div input{width:calc(100% - 4.2rem);border:none;height:2rem;color:#65a310;padding:0 0 0 .2rem} div#lightbox>article form div img{position:absolute;right:0;} div#lightbox>article form div a{border-radius:15px;border:1px solid #eee;display:block;margin:20px auto 0;width:5rem;text-align:center;line-height:1.5rem;} @media (max-width:640px){ div#lightbox>article>label{top:5px;right:10px;font-size:1.25rem;} div#lightbox>article:before{display:none;} div#lightbox>article:after{font-size:1.5rem;} div#lightbox>article{margin-top:125px;} } @media (max-width:400px){ div#lightbox>article ul li span{display:block;margin-left:2.5rem;} } /* PAGING style */ main>.list_paging{margin:30px 0 0 calc(100% - 390px);clear:both;background:rgba(154,205,50,0.5);position:relative;height:30px;width:390px;right:-25px;text-align:center;font-size:0.75rem;} main>.list_paging a{line-height:1.5rem;border-bottom:3px solid rgba(255,255,255,0);display:inline-block;padding:2px 5px 0;margin:0 2px;} main>.list_paging a:hover{border-bottom:3px solid #fff;} main>.list_paging:before{position:absolute;width:1px;height:610px;right:215px;bottom:-100px;border-right:1px solid #8dbd35;-webkit-transform:rotate(45deg);-ms-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);transform:rotate(45deg);z-index:-1;} main>.list_paging:after{width:0;height:0;border-bottom:30px solid rgba(154,205,50,0.5);border-left:30px solid transparent; position:absolute;left:-30px;bottom:0;} @media (max-width:480px){ main>.list_paging{width:calc(100% + 50px);margin-left:0;left:-25px;} main>.list_paging:before{display:none;} } /* FOOTER */ footer{min-height:54px;background:#000;color:#888;position:absolute;bottom:0;width:100%;border-top:1px solid #9ccf36;overflow:hidden;z-index:1;font-size:0.813rem;position:relative\0;} .ie10 footer{position:relative;} footer>a{position:absolute;top:0;left:30px;text-indent:-1000%;width:50px;height:50px;background:url(../images/him_logo.svg) no-repeat top center;background-size:contain;overflow:hidden;display:block;} footer p{position:absolute;right:10px;top:0;line-height:55px;margin:0;} footer ul{list-style:none;margin:0 0 0 100px;padding:0;} footer ul li{float:left;line-height:54px;} footer ul li a{color:#ccc;padding:0 20px;border-bottom:1px solid rgba(155,205,50,0);} footer ul li a:hover,body.about footer ul li:nth-child(1) a,body.join footer ul li:nth-child(2) a,body.privacy footer ul li:nth-child(3) a,body.contact footer ul li:nth-child(3) a,body.copyright footer ul li:nth-child(4) a{color:rgba(155,205,50,1);} body.home footer{position:fixed;border-top:1px solid #000;} @media (max-width:1150px){ body{margin:0 0 125px;margin:0\0;} .ie10 body{margin:0} body#contain:after{height:calc(100% - 270px);} footer>a{position:relative;margin:10px auto 5px;background-image:url(../images/logo.svg);width:142px;height:30px;left:0;} footer p{position:relative;right:inherit;top:inherit;text-align:center;clear:both;line-height:25px;width:80%;margin:0 auto;border-top:1px solid rgba(255,255,255,.1);font-size:0.75rem;} footer ul{margin:0 0 0 0px;text-align:center;} footer ul li{width:25%;} } @media (max-width:640px){body#contain:after{display:none;}footer p span{display:none;}} @media (max-width:480px){footer ul{display:none;}body{margin:0 0 75px;margin:0\0;}.ie10 body{margin:0;}} /* animation */ .animated{ -webkit-animation-duration:1s; -moz-animation-duration:1s; -o-animation-duration:1s; animation-duration:1s; -webkit-animation-fill-mode:both; -moz-animation-fill-mode:both; -o-animation-fill-mode:both; animation-fill-mode:both;} @-webkit-keyframes fadeInDown{0%{opacity:0;-webkit-transform:translateY(-20px);}100%{opacity:1;-webkit-transform:translateY(0);}}@-moz-keyframes fadeInDown{0%{opacity:0;-moz-transform:translateY(-20px);}100%{opacity:1;-moz-transform:translateY(0);}}@-o-keyframes fadeInDown{0%{opacity:0;-o-transform:translateY(-20px);}100%{opacity:1;-o-transform:translateY(0);}}@keyframes fadeInDown{0%{opacity:0;transform:translateY(-20px);}100%{opacity:1;transform:translateY(0);}}.animated.fadeInDown{-webkit-animation-name:fadeInDown;-moz-animation-name:fadeInDown;-o-animation-name:fadeInDown;animation-name:fadeInDown;} @-webkit-keyframes fadeInUpBig{0%{opacity:0;-webkit-transform:translateY(2000px);}100%{opacity:1;-webkit-transform:translateY(0);}}@-moz-keyframes fadeInUpBig{0%{opacity:0;-moz-transform:translateY(2000px);}100%{opacity:1;-moz-transform:translateY(0);}}@-o-keyframes fadeInUpBig{0%{opacity:0;-o-transform:translateY(2000px);}100%{opacity:1;-o-transform:translateY(0);}}@keyframes fadeInUpBig{0%{opacity:0;transform:translateY(2000px);}100%{opacity:1;transform:translateY(0);}}.animated.fadeInUpBig{-webkit-animation-name:fadeInUpBig;-moz-animation-name:fadeInUpBig;-o-animation-name:fadeInUpBig;animation-name:fadeInUpBig;}