/*活動用*/ body{ margin:0; padding: 0; } .full-width{width: 100%; } .fixed-width{ width: 1280px; margin: auto; } /*額外設定大小網*/ .only_pc{ display: inline; } .only_m{ display: none; } /*額外設定大小網*/ /*社群*/ #content_all .contentCon .community{ background-color: #e6e6e6; position: relative; margin:0 auto; width: 100%; overflow: auto; } #content_all .contentCon .community .itembox{ width: 464px; padding: 0; margin:0 auto; } #content_all .contentCon .community .itembox a{ display: block; width: 80px; height: 80px; margin:45px 18px; border-radius: 90px; background:url(../images/community.png)no-repeat center 0; float: left; transition: none; -webkit-transition: none; -moz-transition: none; -o-transition: none; cursor: pointer; } #content_all .contentCon .community .itembox a:hover{ opacity: 1; } #content_all .contentCon .community .itembox a:nth-of-type(1){ background-position: 0 0; } #content_all .contentCon .community .itembox a:nth-of-type(2){ background-position: 0 -80px; } #content_all .contentCon .community .itembox a:nth-of-type(3){ background-position: 0 -160px; } #content_all .contentCon .community .itembox a:nth-of-type(4){ background-position: 0 -240px; } #content_all .contentCon .community .itembox a:nth-of-type(1):hover{ background-position: -80px 0; } #content_all .contentCon .community .itembox a:nth-of-type(2):hover{ background-position: -80px -80px; } #content_all .contentCon .community .itembox a:nth-of-type(3):hover{ background-position: -80px -160px; } #content_all .contentCon .community .itembox a:nth-of-type(4):hover{ background-position: -80px -240px; } /*社群*/ /*loading*/ .page-loader{ position: fixed; z-index: 9999; left: 0; top: 0; background: rgba(0,0,0, 1); width: 100vw; height: 100vh; } .spinner { background: transparent; -moz-animation: rotate 1.5s linear infinite; -webkit-animation: rotate 1.5s linear infinite; animation: rotate 1.5s linear infinite; } .spinner { border: 4px solid; border-radius: 50%; content: ""; display: inline-block; position: absolute; width: 70px; height: 70px; top: 50%; margin-top: -35px; left: 50%; margin-left: -35px; z-index: 2; } .spinner:after { border: 4px solid; border-radius: 50%; content: ""; display: inline-block; position: absolute; width: 62px; height: 62px; top: 50%; margin-top: -35px; left: 50%; margin-left: -35px; z-index: 0; } .spinner { border-color: #21357f rgba(0,0,0, 0.07) #21357f rgba(0,0,0, 0.07); } .spinner:after { border-color: transparent rgba(255,255,255,0.8) transparent rgba(255,255,255,0.8); -moz-animation: rotate 4s linear infinite; -webkit-animation: rotate 4s linear infinite; animation: rotate 4s linear infinite; } @-moz-keyframes rotate { 0% { -moz-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); transform: rotate(360deg); } } @-webkit-keyframes rotate { 0% { -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -webkit-transform: rotate(360deg); transform: rotate(360deg); } } @keyframes rotate { 0% { -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { -moz-transform: rotate(360deg); -ms-transform: rotate(360deg); -webkit-transform: rotate(360deg); transform: rotate(360deg); } } /*loading /*小叮嚀*/ #pspoint{ position: absolute; top: -50px; } .note{ width: 100%; padding:0px 0 70px; margin: 0 auto; float: left; position: relative; z-index: 2; } #btn_note{ width: 1200px; font-size: 30px; font-weight: 400; letter-spacing: 4px; color: #FFFFFF; margin: 0px auto 30px; text-align: left; } #btn_note2{ width: 1200px; font-size: 30px; font-weight: 400; letter-spacing: 4px; color: #FFFFFF; margin: 70px auto 50px; text-align: left; } #btn_note3{ width: 1200px; font-size: 30px; font-weight: 400; letter-spacing: 4px; color: #FFFFFF; margin: 70px auto 50px; text-align: left; } #btn_note span { display: block; width: 100%; height:100%; color: #000000; float: left; padding-left: 25px; } .note_box{ display: block; width: 1070px; margin: 0px auto; padding: 0px 0px 0 26px; font-size:15px; font-weight:normal; font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', Arial, '蘋果儷中黑', 'Apple LiGothic Medium', '儷黑 Pro', 'LiHei Pro', sans-serif; list-style-position: outside; position: relative; overflow: hidden; transition: all 0.2s; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; -o-transition: all 0.2s; } .note_box ul{ margin: 0px;} .note_box ul li{ font-size: 22px; color:#FFFFFF; font-weight:normal; line-height:36px; list-style-position: outside; list-style-type: Square; text-align:justify; } .note_box ul a{ color:#ffffff; text-decoration: underline;} .note_box ul li ol li{ margin-left:20px; list-style-type: upper-roman; font-size: 22px; } .note_box ul li ol li ul li{ margin-left:20px; list-style-type:square; font-size: 22px; } .note_box ul li ol li ul li ol li{ margin-left:20px; list-style-type: upper-roman; font-size: 22px; } /*小叮嚀*/ /***PC版***/ /*** container ***/ #container { margin: 0 auto; background-color:#FFFFFF; position: relative; overflow: hidden; } #content_all { min-width: 1280px; color:#FFFFFF; position: relative; } #content_all a{text-decoration: none;} #content_all>h1,#content_all>h2,#content_all>p,#content_all>b,#content_all>i { position: absolute; left: 0; top:20px; font-size: 30px; } /*** container END ***/ /* HeaderCon PC */ #content_all .headerCon { width: 100%; height: 618px; position: relative; margin:0 auto; background: url(../images/pc/2022member_kvbg.jpg) no-repeat center top; background-size: 1920px 618px; overflow: hidden; } #content_all .headerCon .light { width: 1540px; height: 560px; background: url(../images/pc/outdoorcinemas_lihgt.png)no-repeat center top; position: absolute; left: -700px; top: -200px; z-index: 10; opacity: 0.2; animation: yiscroll 2.5s linear 0s infinite alternate; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; } #content_all .headerCon .light2 { width: 1540px; height: 560px; background: url(../images/pc/outdoorcinemas_lihgt2.png)no-repeat center top; position: absolute; right: -700px; top: -200px; z-index: 10; opacity: 0.21; animation: yiscroll2 2.5s linear 0s infinite alternate; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; } #content_all .headerCon .kvbox { width: 1280px; height: 100%; margin: 0 auto 0; padding: 0; position: relative; overflow: hidden; } #content_all .headerCon .kvbox .icon { width: 180px; height: 140px; font-size: 0; background: url(../images/pc/outdoorcinemas_kvicon.png)no-repeat center top; background-size: 100%; position: fixed; right: 2%; top:2%; z-index: 99; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; } #content_all .headerCon .kvbox .icon a { display: block; width:100%; height: 100%; } #content_all .headerCon .kvbox .h1{ width: 415px; height: 270px; font-size: 0; background: url(../images/pc/2022member_kvh1.png)no-repeat center top; background-size: 415px 270px; position: relative; margin: 128px 150px 60px; z-index: 99; } #content_all .headerCon .kvbox .h1 a{ display: block; width: 100%; height:100%; } #content_all .headerCon .kvbox p { width: 100%; line-height: 35px; font-size: 30px; text-align: center; color: #ffcc99; font-weight: normal; position: absolute; left: 0; top: 467px; z-index: 1; } #content_all .headerCon .kvbox p span { font-size: 26px; } /* HeaderCon PC End */ /* contentCon PC */ #content_all .contentCon { position: relative; margin: 0 auto; background:url(../images/pc/2022member_kvbg2.jpg)repeat center top; } #content_all .contentCon a{ color:#FFFFFF; text-decoration: underline; } #content_all .contentCon .itembox{ width: 1100px; height: 100%; margin: 0 auto; padding: 20px 0; position: relative; } #content_all .contentCon .itembox .point { position: absolute; width: 100%; } #content_all .contentCon .item01{ position: relative; margin: 0 auto; padding:0; } #content_all .contentCon .item01 h2 { width: 100%; height: 90px; font-size: 0; font-weight: normal; text-align: center; background: url(../images/pc/2022member_itemh2.png)no-repeat center 5px; background-size: 270px 80px; background-color: #4198fa; } #content_all .contentCon .item01 .itembox { padding: 40px 0 0; background: url(../images/pc/2022member_item01icon.png)no-repeat 570px 55px; background-size: 510px 553px; } #content_all .contentCon .item01 .itembox .point{ font-size: 0; } #content_all .contentCon .item01 .itembox h3 { width: 100%; height: 70px; line-height: 70px; font-size: 0; font-weight: normal; text-align: center; margin: 0 auto 30px; background: url(../images/pc/2022member_itemh2.png)no-repeat left top; background-size: 221px 210px; } #content_all .contentCon .item01 .itembox h3:nth-of-type(2) { background-position: left -70px; margin-top: 50px; } #content_all .contentCon .item01 .itembox h3:nth-of-type(3) { background-position: left -140px; margin-top: 50px; } #content_all .contentCon .item01 .itembox h3:nth-of-type(4) { background-position: left -210px; margin-top: 50px; } #content_all .contentCon .item01 .itembox p { width:100%; line-height: 36px; font-size: 22px; font-weight: normal; text-align: left; color: #FFFFFF; margin-bottom: 30px; } #content_all .contentCon .item01 .itembox p span { color: #ffcc99; } #content_all .contentCon .item01 .itembox p span:nth-of-type(2) { font-size: 18px; } #content_all .contentCon .item01 .itembox ul li { width:100%; line-height: 35px; font-size: 22px; font-weight: normal; text-align: justify; color: #FFFFFF; margin-bottom: 30px; } @keyframes yiscroll { 0% { /*opacity: 0;*/ -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { /*opacity: 1;*/ -moz-transform: rotate(50deg); -ms-transform: rotate(50deg); -webkit-transform: rotate(50deg); transform: rotate(50deg); } } @keyframes yiscroll2 { 0% { /*opacity: 0;*/ -moz-transform: rotate(0deg); -ms-transform: rotate(0deg); -webkit-transform: rotate(0deg); transform: rotate(0deg); } 100% { /*opacity: 1;*/ -moz-transform: rotate(-50deg); -ms-transform: rotate(-50deg); -webkit-transform: rotate(-50deg); transform: rotate(-50deg); } } @keyframes yishadow { 0% { background-color: transparent; box-shadow: 0 0 0 rgba(0,0,0,0); opacity: 0; } 100% { background-color: #FFFFFF; box-shadow: 0px 0px 18px 10px rgba(255,255,255,0.5); opacity: 0.6; } } /***手機版***/ /***手機版***/ /***手機版***/ @media screen and (max-width: 1100px) { #header_m a.logo_img2 { display: block; width: 94px; height: 30px; font-size: 0; background: url(../images/logo_friday2.png) no-repeat center top; background-size: 93%; float: left; margin: 0 10px 0 0; } /*額外設定大小網*/ .only_pc{ display: none; } .only_m{ display: block; } /*額外設定大小網*/ /*小叮嚀*/ #pspoint{ position: absolute; top: -50px; } .note{ width: 100%; padding:0px 0 50px; margin: 0 auto; float: left; position: relative; z-index: 2; } #btn_note{ display: block; width: 640px; height: 70px; line-height: 70px; font-size: 36px; font-weight: 400; margin: 0px auto; padding: 0 20px; text-align: center; } #btn_note2{ display: block; width: 640px; height: 70px; line-height: 70px; font-size: 36px; font-weight: 400; margin: 40px auto 20px; padding: 0 20px; } #btn_note3{ display: block; width: 640px; height: 70px; line-height: 70px; font-size: 36px; font-weight: 400; margin: 40px auto 10px; padding: 0 20px; } #btn_note span { display: block; width: 100%; height:100%; margin-right: 18px; margin-left: 0px; float: left; } .note_box{ display: block; width: 640px; margin: 0px auto; padding:0; font-size:25px;font-weight:normal; font-family: 'Noto Sans TC', '微軟正黑體', 'Microsoft JhengHei', Arial, '蘋果儷中黑', 'Apple LiGothic Medium', '儷黑 Pro', 'LiHei Pro', sans-serif; list-style-position: outside;} .note_box ul { margin: 10px 0px; } .note_box ul li{ font-size: 22px;line-height: 40px; font-weight:normal; list-style-position: outside; list-style-type: Square; text-align:justify; margin: 0 25px 10px 50px; } .note_box ul li ol li{ margin-left:20px; list-style-type: upper-roman; font-size: 22px; margin-right: 0; } .note_box ul li ol li ul { margin: 0 auto; } .note_box ul li ol li ul li{ margin-left:20px; list-style-type:square; font-size: 22px; margin-bottom: 0; } .btn_click { width: 70px; height: 40px; color: #FFFFFF; background: #e54033; font-size: 22px; text-align: center; line-height: 40px; cursor: pointer; position: absolute; right: 27px; bottom:0; } .btn_click2 { display: none; width: 70px; height: 40px; color: #FFFFFF; background: #e54033; font-size: 22px; text-align: center; line-height: 40px; cursor: pointer; position: absolute; right: 27px; bottom:0; } /*小叮嚀*/ #container { } #content_all{ font-size:30px; font-weight: bold; text-align: center; position: relative; width: 100%; max-width: 1100px; min-width: 640px; height: 100%; } #container .kv_bg2{ width: 100%; height: 535px; position: absolute; top:53px; left:0; font-size: 0; background: url(../images/mo/goodmovie_kvbg_m.png) no-repeat center top; z-index: 5;} /* HeaderCon PC */ #content_all .headerCon { width: 100%; height: 940px; position: relative; margin:0 auto; background: url(../images/mo/2022member_kvbg.jpg) no-repeat center top; background-size: 1100px 940px; overflow: hidden; } #content_all .headerCon .kvbox { width: 640px; height: 100%; margin: 0 auto 0; padding: 0; position: relative; overflow: hidden; } #content_all .headerCon .kvbox .icon { width: 160px; height: 124px; font-size: 0; background: url(../images/pc/outdoorcinemas_kvicon.png)no-repeat center top; background-size: 100%; position: fixed; right: 0%; top:0%; z-index: 99; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; } #content_all .headerCon .kvbox .icon a { display: block; width:100%; height: 100%; } #content_all .headerCon .kvbox .h1{ width: 100%; height: 340px; font-size: 0; position: relative; background: url(../images/mo/2022member_kvh1.png)no-repeat center top; background-size: 440px 340px; margin: 58px auto 0; z-index: 99; } #content_all .headerCon .kvbox p { width: 100%; line-height: 35px; font-size: 30px; text-align: center; color: #ffcc99; font-weight: normal; position: absolute; left: 0; top: 710px; z-index: 1; } #content_all .headerCon .kvbox p span { font-size: 26px; } #content_all .headerCon .kvbox .lightpoint { width: 15px; height: 15px; background-color: rgba(255,255,255,1); border-radius: 20px; position: absolute; left: 119px; top: 86px; animation: yishadow 1.5s linear 0s infinite alternate; transition: all 0.3s; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; } #content_all .headerCon .kvbox .lightpoint:nth-last-of-type(2) { left: 472px; top: 76px; } #content_all .headerCon .kvbox .lightpoint:nth-last-of-type(3) { left: 421px; top: 394px; } /* HeaderCon PC End */ /* contentCon PC */ #content_all .contentCon { position: relative; margin: 0 auto; } #content_all .contentCon a{ color:#FFFFFF; text-decoration: none; } #content_all .contentCon .itembox{ width: 640px; height: 100%; margin: 0 auto; padding: 20px 0; position: relative; } .point1 { position: absolute; left: 0; bottom: 530px; } #content_all .contentCon .item01{ position: relative; margin: 0 auto; padding:0; } #content_all .contentCon .item01 h2 { width: 100%; height: 90px; font-size: 0; font-weight: normal; text-align: center; background: url(../images/pc/2022member_itemh2.png)no-repeat center 5px; background-size: 270px 80px; background-color: #4198fa; } #content_all .contentCon .item01 .itembox { padding: 40px 35px 0; background: url(../images/pc/2022member_item01icon.png)no-repeat 35px 460px; background-size: 570px 618px; } #content_all .contentCon .item01 .itembox .point{ font-size: 0; } #content_all .contentCon .item01 .itembox h3 { width: 100%; height: 90px; line-height: 90px; font-size: 0; font-weight: normal; text-align: center; margin: 0 auto 30px; background: url(../images/mo/2022member_itemh2.png)no-repeat left top; background-size: 284px 270px; } #content_all .contentCon .item01 .itembox h3:nth-of-type(2) { background-position: left -90px; margin-top: 50px; } #content_all .contentCon .item01 .itembox h3:nth-of-type(3) { background-position: left -180px; margin-top: 50px; } #content_all .contentCon .item01 .itembox h3:nth-of-type(4) { background-position: left -270px; margin-top: 50px; } #content_all .contentCon .item01 .itembox p { width: 100%; line-height: 40px; font-size: 24px; font-weight: normal; text-align: left; color: #FFFFFF; margin-bottom: 30px; } #content_all .contentCon .item01 .itembox p:nth-of-type(1) { margin-bottom: 620px; } #content_all .contentCon .item01 .itembox p span { color: #ffcc99; } #content_all .contentCon .item01 .itembox p span:nth-of-type(2) { font-size: 22px; } #content_all .contentCon .item01 .itembox ul li { width:100%; line-height: 40px; font-size: 24px; font-weight: normal; text-align: justify; color: #FFFFFF; margin-bottom: 30px; } }/*手機版end*/