/*活動用*/ body{ margin:0; padding: 0; background: #000000; } .full-width{width: 100%;} .fixed-width{width: 1366px; margin: auto; } .pull-left { float: left; } .pull-right { float: right; } .clear-float { clear: both;} .pull-center{ margin:0 30px;} .pull-center2{ margin: 0 auto;} .letter-spacing{ letter-spacing :2px;} .letter-spacing2{ letter-spacing :2px;} .ls_2{letter-spacing :-2px;} /***PC版***/ #container_pc{ min-width: 1366px; margin: 0 auto; overflow: hidden; background: url(../images/pc/TFF_bg.jpg) center 53px no-repeat; background-size: 1920px 2668px; background-color: #1a424a; position: absolute; left:0; top:0; z-index: -2;} #content_pc { min-width: 1366px; color:#FFFFFF; } /*共用end*/ /* HeaderCon PC */ #content_pc .headerCon { max-width: 1366px; position: relative; margin: 0 auto; padding: 230px 0 70px; } #content_pc .headerCon img{ width: 100%; height: 100%; } #content_pc .headerCon .logo{ width: 422px; height: 200px; position: absolute; right: 20px; top:20px; } #content_pc .headerCon h1{ width: 830px; height: 100px; margin:0 auto 30px; float: none; position: relative; } #content_pc .headerCon h1 img{ margin: 0 0 30px; position: absolute; left: 0; top:0; opacity: 0; } #content_pc .headerCon p{ width: 100%; margin:0 auto; color:#FFFFFF; font-weight: normal; font-size: 32px; line-height: 36px; letter-spacing: 1px; position: relative; opacity: 0; } #content_pc .headerCon p span{ color: #49b0a2; font-weight: bold; font-size: 36px; position: absolute; left:421px; top:3px; } #content_pc .headerCon a.freebtn{ display: block; width: 200px; height: 48px; line-height: 43px; border: 3px solid #FFFFFF; font-size: 28px; font-weight: bold; margin: 34px auto 0; background: rgba(0,0,0,0.5); color:#FFFFFF; opacity: 0;} #content_pc .headerCon a.btn1_2{ display: block; width: 250px; height: 80px; line-height: 30px; border: 3px solid #FFFFFF; font-size: 26px; font-weight: bold; padding: 7px 0 0 0px; margin: 34px auto 0; background: rgba(0,0,0,0.5); color:#FFFFFF; opacity: 0;} #content_pc .headerCon a:hover{ background: rgba(255,255,255,1); color:#000000; } /* HeaderCon PC End */ /* contentCon PC */ #content_pc .contentCon { position: relative; margin: 0 auto; } /*#content_pc .contentCon { max-width: 1366px; position: relative; margin: 0 auto; }*/ #content_pc .contentCon a{ width: 100%; height: 100%; display: block; color:#FFFFFF; text-decoration: none; } #content_pc .contentCon nav{ width: 100%; height: 96px; background: #5db8a9; } #content_pc .contentCon nav ul{ max-width: 1366px; height: 100%; position: relative; margin: 0 auto; } #content_pc .contentCon nav ul li{ width: 33.3%; height: 100%; float: left; background: url(../images/pc/TFF_menu.png)no-repeat 100% 100%; } #content_pc .contentCon nav ul li:nth-child(1){ background-position: 0 0 } #content_pc .contentCon nav ul li:nth-child(2){ background-position: 0 -96px; } #content_pc .contentCon nav ul li:nth-child(3){ background-position: 0 -192px;} #content_pc .contentCon nav ul li:hover,#content_pc .contentCon nav ul li.here{ background-position-x:-455px; background-color: #f9c164; } #content_pc .contentCon nav ul li a{ display: block; width: 100%; height: 100%; font-size: 0; } #content_pc .contentCon .item01{ width: 100%; padding-top: 50px;} #content_pc .contentCon .item01 .post_box{ max-width: 965px; position: relative; margin: 0 auto; padding: 0 0 60px 0; } #content_pc .contentCon .item01 .post_box h2{ font-size:30px; font-weight: 500; line-height:36px;letter-spacing:5px; color:#ffffff; text-align:left; display:block; } #content_pc .contentCon .item01 div.tagpg02{ } #content_pc .contentCon .item01 div.tagpg02 ul.tag02zone01{ width:965px; margin:0px auto; padding:25px 0px 0px 0px; opacity: 1;} #content_pc .contentCon .item01 div.tagpg02 ul.tag02zone01 li{ text-align:left; cursor:pointer; float: left; margin-right: 10px; width: 185px; height: 266px;} #content_pc .contentCon .item01 div.tagpg02 ul li:nth-child(5){ margin-right: 0; } #content_pc .contentCon .item01 .tag02zone01 li{ position: relative} #content_pc .contentCon .item01 .tag02zone01 li img{ width: 100%; height: 100%; } #content_pc .contentCon .item01 div.tagpg02 ul:hover li::before{content: ''; position:absolute; background-color:#000000; width:185px; height:266px; left:0px; top:0px;opacity: 0.5;} #content_pc .contentCon .item01 div.tagpg02 ul li:hover::before, div.tagpg02 ul.mobgblack01 li::before{content: ''; opacity: 0;} #content_pc .contentCon .item01 div.tagpg02 ul li .momainall{ position:relative; float: left; width: 458px; height: 100%; padding: 50px 20px 0 20px; text-align: left; } #content_pc .contentCon .item01 div.tagpg02 ul li h4{ font-size:20px; line-height:28px; display:block; color:#f9c164; font-weight: normal; } #content_pc .contentCon .item01 div.tagpg02 ul li h5{ font-size:22px; line-height:30px; display:block; color:#ffffff; font-weight: normal; } #content_pc .contentCon .item01 div.tagpg02 ul li h6{ font-size:22px; line-height:30px; display:block; color:#ffffff; font-weight: normal; margin-top: 20px;} #content_pc .contentCon .item01 div.tagpg02 ul li p{ font-size:16px; line-height:24px; display:block; color:#ffffff; font-weight:normal; margin-bottom: 30px; } #content_pc .contentCon .item01 div.tagpg02 a{ position: relative; width: 120px; height: 32px; line-height: 26px; font-size: 18px; font-weight: normal; text-align: center; float: left;} #content_pc .contentCon .item01 div.tagpg02 a.nowopenmain{ border:3px solid #f9c164; color:#f9c164; position: absolute; left:20px; bottom:20px; } #content_pc .contentCon .item01 div.tagpg02 a.nowopenmain:hover{ background-color: #f9c164; color:#000000; border:3px solid #f9c164; } #content_pc .contentCon .item01 div.tagpg02 a.seemore{ background-color: #f9c164; color:#000000; border:3px solid #f9c164; text-align: left; padding-left: 17px; position: absolute; left:160px; bottom:20px; } #content_pc .contentCon .item01 div.tagpg02 a:hover{ text-decoration: none; } #content_pc .contentCon .item01 .closebtn{background-image: url(../images/lvx.gif); width:25px; height:25px; text-indent:-99999px; position:absolute; top:20px ; right:20px; display:block;z-index:3;cursor: pointer;} #content_pc .contentCon .item01 div.tagpg02 ul li .mianpic{ float:left; width: 490px; height: 320px; } #content_pc .contentCon .item01 .mobgblack01{height:0px; width:965px; display:block; overflow:hidden; position:relative;transition: height 0.5s; margin:0px auto ; padding:0px; background-color:#000000; overflow:hidden} #content_pc .contentCon .item01 .mobgblack01 li{ position:absolute; width:100%; height:100%; display:block;border-top:#FFFFFF 4px solid; border-bottom:#FFFFFF 10px solid; background-color:#000; overflow: hidden; opacity: 0;} #content_pc .contentCon .item01 div ul li.viewliall{opacity: 1 ;transition: opacity 0.5s; z-index:1} #content_pc .contentCon .item01 .guetblack{height:320px;transition: height 0.5s;} #content_pc .contentCon .item01 .nowpicone img { border:#FFFFFF 4px solid; border-bottom:0px } /*箭頭右-邊框*/ .momainall a .arrow_r_out{ width:0px; height:0px; border-width:6px; border-style:solid; border-color: transparent transparent transparent #f9c164; position:absolute; bottom:7px; left:95px; } .momainall a.nowopenmain .arrow_r_out{ width:0px; height:0px; border-width:6px; border-style:solid; border-color: transparent transparent transparent #f9c164; position:absolute; bottom:7px; left:90px; } .momainall a.nowopenmain:hover .arrow_r_out{ width:0px; height:0px; border-width:6px; border-style:solid; border-color: transparent transparent transparent #000000; position:absolute; bottom:7px; left:90px; } .momainall a.seemore .arrow_r_out{ width:0px; height:0px; border-width:6px; border-style:solid; border-color: transparent transparent transparent #000000; position:absolute; bottom:7px; left:97px; } .momainall a:hover .arrow_r_out{ width:0px; height:0px; border-width:6px; border-style:solid; border-color: transparent transparent transparent #000000; position:absolute; bottom:7px; left:97px; } /*箭頭右-邊框*/ #content_pc .contentCon .item01 .box1 ul{ position: relative; width: 965px; height: 265px; padding: 0; margin:25px auto 0px;} #content_pc .contentCon .item01 .box1 ul> div{ float: left; margin-right: 10px; } #content_pc .contentCon .item01 .box1 ul> div:nth-child(5){ float: left; margin-right: 0px; } #content_pc .contentCon .item01 .box1 ul li{ width: 185px; height: 266px; position: relative; } /*片單滑過特效*/ #content_pc .contentCon .item01 .box1 .view {width: 100%;height: 100%; float: left;overflow: hidden;position: relative;text-align: center; cursor: default;} #content_pc .contentCon .item01 .box1 .view .mask{width: 100%;height: 100%;position: absolute;overflow: hidden;top: 0;left: 0;} #content_pc .contentCon .item01 .box1 .view img { display: block;position: relative; width: 185px; height: 266px;} #content_pc .contentCon .item01 .box1 .view .info { display: inline-block; text-decoration: none; width:185px; height:266px; font-size: 20px;line-height: 24px; padding: 40px 10px 20px 10px; overflow: hidden;color:#12242a;text-align: left; position:absolute; left: 0; top: 0; opacity:0;-moz-transform:scale(0,0);-webkit-transform:scale(0,0);-o-transform:scale(0,0);-ms-transform:scale(0,0);transform:scale(0,0);-webkit-transition: -webkit-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;-moz-transition: -moz-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;-o-transition: -o-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;-ms-transition: -ms-transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;transition: transform 0.2s 0.1s ease-in, opacity 0.1s ease-in-out;} #content_pc .contentCon .item01 .box1 .second-effect .mask {opacity: 0;overflow:visible;border:0px solid rgba(255,255,255,0.9);-moz-box-sizing:border-box;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-transition: all 0.1s ease-in-out;-moz-transition: all 0.1s ease-in-out;-o-transition: all 0.1s ease-in-out;-ms-transition: all 0.1s ease-in-out;transition: all 0.1s ease-in-out;} #content_pc .contentCon .item01 .box1 .second-effect:hover .mask {opacity: 1;border:120px solid rgba(255,255,255,0.9);} #content_pc .contentCon .item01 .box1 .second-effect:hover .info { border:0px solid rgba(196,186,172,.7); top:-120px; left:-121px; opacity:1; -moz-transform:scale(1,1); -webkit-transform:scale(1,1); -o-transform:scale(1,1); -ms-transform:scale(1,1); transform:scale(1,1); -moz-transition-delay:0.1s; -webkit-transition-delay:0.1s; -o-transition-delay:0.1s; -ms-transition-delay:0.1s; transition-delay:0.1s;} #content_pc .contentCon .item01 .box1 .second-effect .info h3{ font-size: 20px; padding: 0 10px; margin: 0; color:#200024; font-weight: 100; text-align: center; } #content_pc .contentCon .item01 .box1 .second-effect .info p{ height: 85px; line-height: 22px; font-size: 16px; padding: 0 10px; margin: 0; color:#000000; font-weight: 100; text-align: justify; overflow: hidden; } #content_pc .contentCon .item01 .box1 .second-effect .info a.link1{ position: relative; width: 120px; height: 32px; line-height: 24px; font-size: 16px; font-weight: 100; border:3px solid #12242a; text-align: center; margin:20px auto; color:#200024; } #content_pc .contentCon .item01 .box1 .second-effect .info a.link1:hover{ background-color: #12242a; color:#FFFFFF; font-weight: 100;} #content_pc .contentCon .item01 .box1 .second-effect .info a.link2{ position: relative; background-color: #12242a; color:#FFFFFF; width: 120px; height: 32px; line-height: 24px; font-size: 16px; font-weight: 100; border:3px solid #12242a; text-align: center; margin: 20px auto 10px auto; } #content_pc .contentCon .item01 .box1 .second-effect .info a.link2:hover{ background-color: #12242a; color:#FFFFFF; font-weight: 100;} /*片單滑過特效*/ /*箭頭右-邊框*/ .second-effect .info a .arrow_r_out{ width:0px; height:0px; border-width:6px; border-style:solid; border-color: transparent transparent transparent #12242a; position:absolute; bottom:7px; left:95px; } .second-effect .info a.link1 .arrow_r_out{ width:0px; height:0px; border-width:6px; border-style:solid; border-color: transparent transparent transparent #12242a; position:absolute; bottom:7px; left:86px; } .second-effect .info a.link1:hover .arrow_r_out{ width:0px; height:0px; border-width:6px; border-style:solid; border-color: transparent transparent transparent #FFFFFF; position:absolute; bottom:7px; left:86px; } .second-effect .info a.link2 .arrow_r_out{ width:0px; height:0px; border-width:6px; border-style:solid; border-color: transparent transparent transparent #FFFFFF; position:absolute; bottom:7px; left:95px; } .second-effect .info a:hover .arrow_r_out{ width:0px; height:0px; border-width:6px; border-style:solid; border-color: transparent transparent transparent #FFFFFF; position:absolute; bottom:7px; left:95px; } /*箭頭右-邊框*/ #content_pc .contentCon .item02{ width: 100%; height: 100%; padding-top: 50px; background: #FFFFFF;} #content_pc .contentCon .item02 .post_box{ max-width: 1186px; height: 420px; position: relative; margin: 0 auto 30px; } #content_pc .contentCon .item02 .post_box:nth-child(2){ height: 274px; margin: 0 auto 40px;} #content_pc .contentCon .item02 .post_box>div a{ display: block; width: 100%; height: 100%; } #content_pc .contentCon .item02 .post_box>div a h2{ width: 100%; line-height: 26px; font-size: 18px; color:#2e0037; font-weight: normal; margin-top:15px; } #content_pc .contentCon .item02 .post_box>div a:hover h2{ text-decoration: underline; } #content_pc .contentCon .item02 .post_box>div a p{ width: 100%; line-height: 26px; font-size: 14px; color:#2e0037; font-weight: normal; } #content_pc .contentCon .item02 .peobox1>div{ width: 560px; height: 100%; float: left; } #content_pc .contentCon .item02 .peobox1>div:nth-child(1){ margin-right: 66px; } /*#content_pc .contentCon .item02 .peobox1>div a img{ width: 100%; height: 340px; }*/ #content_pc .contentCon .item02 .peobox2>div{ width: 338px; height: 100%; float: left; } #content_pc .contentCon .item02 .peobox2>div:nth-child(2){ margin: 0 86px; } /* 圖片滑過縮放位移效果 */ #content_pc .imgmove_out{ width: 560px; height: 340px; background: rgba(255,255,255,0.8); } #content_pc .imgmove { position: relative; overflow: hidden; width: 560px; height: 340px; } #content_pc .imgmove .overlay { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #000; opacity: 0.2; -webkit-transition: opacity 0.4s linear; -moz-transition: opacity 0.4s linear; -o-transition: opacity 0.4s linear; transition: opacity 0.4s linear; } #content_pc .imgmove img { width: 580px; height: 352px; -webkit-transform: translate(-6px, -6px); -moz-transform: translate(-6px, -6px); -o-transform: translate(-6px, -6px); transform: translate(-6px, -6px); -webkit-transition: width 0.4s linear, height 0.4s linear, -webkit-transform 0.4s linear; -moz-transition: width 0.4s linear, height 0.4s linear, -moz-transform 0.4s linear; -o-transition: width 0.4s linear, height 0.4s linear, -o-transform 0.4s linear; transition: width 0.4s linear, height 0.4s linear, transform 0.4s linear; } #content_pc .imgmove:hover img { width: 560px; height: 340px; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } #content_pc .imgmove:hover .overlay { opacity: 0; } /* 圖片滑過縮放位移效果 */ /* 圖片滑過縮放位移效果 */ #content_pc .peobox2 .imgmove_out{ width: 338px; height: 205px; background: rgba(255,255,255,0.8); } #content_pc .peobox2 .imgmove_out .imgmove { position: relative; overflow: hidden; width: 338px; height: 205px; } #content_pc .peobox2 .imgmove_out .imgmove .overlay { display: block; position: absolute; width: 100%; height: 100%; top: 0; left: 0; background-color: #000; opacity: 0.2; -webkit-transition: opacity 0.4s linear; -moz-transition: opacity 0.4s linear; -o-transition: opacity 0.4s linear; transition: opacity 0.4s linear; } #content_pc .peobox2 .imgmove_out .imgmove img { width: 358px; height: 217px; -webkit-transform: translate(-6px, -6px); -moz-transform: translate(-6px, -6px); -o-transform: translate(-6px, -6px); transform: translate(-6px, -6px); -webkit-transition: width 0.4s linear, height 0.4s linear, -webkit-transform 0.4s linear; -moz-transition: width 0.4s linear, height 0.4s linear, -moz-transform 0.4s linear; -o-transition: width 0.4s linear, height 0.4s linear, -o-transform 0.4s linear; transition: width 0.4s linear, height 0.4s linear, transform 0.4s linear; } #content_pc .peobox2 .imgmove_out .imgmove:hover img { width: 338px; height: 205px; -webkit-transform: translate(0, 0); -moz-transform: translate(0, 0); -o-transform: translate(0, 0); transform: translate(0, 0); } #content_pc .peobox2 .imgmove_out .imgmove:hover .overlay { opacity: 0; } /* 圖片滑過縮放位移效果 */ #content_pc .contentCon .item03{ width: 100%; height: 100%; padding-top: 50px; } #content_pc .contentCon .item03 h2{ width: 850px; font-size: 35px; font-weight: normal; color:#FFFFFF; padding: 15px 30px; margin:0 auto 60px; border: 1px solid #FFFFFF; } #content_pc .contentCon .item03 ol{ max-width: 1250px; height: 850px; position: relative; margin: 0 auto 30px; } #content_pc .contentCon .item03 ol li{ width: 400px; height: 270px; position: absolute; font-weight: normal;} #content_pc .contentCon .item03 ol li:nth-child(1){ left: 0; top:0; } #content_pc .contentCon .item03 ol li:nth-child(2){ left: 0; top:410px; } #content_pc .contentCon .item03 ol li:nth-child(3){ left: 426px; top:130px; } #content_pc .contentCon .item03 ol li:nth-child(4){ left: 426px; top:540px; } #content_pc .contentCon .item03 ol li:nth-child(5){ right: 0; top:0; } #content_pc .contentCon .item03 ol li:nth-child(6){ right: 0; top:410px; } #content_pc .contentCon .item03 ol li .good{ width: 50px; height: 50px; display: block; position: absolute; left:-15px; top:-30px; } #content_pc .contentCon .item03 ol li img{ width: 186px; height: 270px; display: block; float: left; } #content_pc .contentCon .item03 ol li .txt_box{ width: 214px; height: 100%; padding: 0 15px; float: left; position: relative; } #content_pc .contentCon .item03 ol li .txt_box h3{ font-size: 20px; color: #f9c164; margin-bottom: 5px; text-align: left; } #content_pc .contentCon .item03 ol li .txt_box p{ font-size: 16px; line-height: 25px; color: #FFFFFF; text-align: justify; } #content_pc .contentCon .item03 ol li .txt_box a{ position: relative; width: 120px; height: 32px; line-height: 26px; font-size: 18px; font-weight: normal; text-align: center; float: left;} #content_pc .contentCon .item03 ol li .txt_box a.nowopenmain{ border:3px solid #f9c164; color:#f9c164; position: absolute; left:15px; bottom:0px; } #content_pc .contentCon .item03 ol li .txt_box a.nowopenmain:hover{ background-color: #f9c164; color:#000000; border:3px solid #f9c164; } #content_pc .contentCon .item03 ol li .txt_box a.seemore{ background-color: #f9c164; color:#000000; border:3px solid #f9c164; text-align: left; padding-left: 17px; position: absolute; left:15px; bottom:0px; } #content_pc .contentCon .item03 ol li .txt_box a:hover{ text-decoration: none; } /*箭頭右-邊框*/ #content_pc .contentCon .item03 a .arrow_r_out{ width:0px; height:0px; border-width:6px; border-style:solid; border-color: transparent transparent transparent #f9c164; position:absolute; bottom:7px; left:95px; } #content_pc .contentCon .item03 a.nowopenmain .arrow_r_out{ width:0px; height:0px; border-width:6px; border-style:solid; border-color: transparent transparent transparent #f9c164; position:absolute; bottom:7px; left:90px; } #content_pc .contentCon .item03 a.nowopenmain:hover .arrow_r_out{ width:0px; height:0px; border-width:6px; border-style:solid; border-color: transparent transparent transparent #000000; position:absolute; bottom:7px; left:90px; } #content_pc .contentCon .item03 a.seemore .arrow_r_out{ width:0px; height:0px; border-width:6px; border-style:solid; border-color: transparent transparent transparent #000000; position:absolute; bottom:7px; left:97px; } #content_pc .contentCon .item03 a:hover .arrow_r_out{ width:0px; height:0px; border-width:6px; border-style:solid; border-color: transparent transparent transparent #000000; position:absolute; bottom:7px; left:97px; } /*箭頭右-邊框*/ #content_pc .contentCon .item03 .boss { width: 1150px; height: 182px; position: relative; margin: 0 auto 30px; } #content_pc .contentCon .item03 .boss img{ width: 182px; height: 182px; display: block; border-radius: 182px; float: left; } #content_pc .contentCon .item03 .boss .txt_box { width: 968px; height: 100%; padding:40px 30px 0 30px; float: left; text-align: justify; font-weight: normal; } #content_pc .contentCon .item03 .boss .txt_box h3{ font-size: 26px; color:#5db8a9; line-height: 35px; } #content_pc .contentCon .item03 .boss .txt_box p{ font-size: 16px; color: #FFFFFF; line-height: 25px; } /***手機版***/ /***手機版***/ /***手機版***/ @media screen and (max-width: 1000px) { #container_pc{ display: none;} #container_m{ display: block; width: 100%; max-width: 1000px; min-width: 640px; } #header_m{ display:block; width: 100%; height: 53px; padding: 16px 16px; background:url(http://video.friday.tw/eventcom/images/header_top.jpg) repeat-x top; } #content_m{ font-size:30px; font-weight: bold; text-align: center; display:block; position: relative; overflow: hidden; } #content_m a:hover{ text-decoration: none;} #container_m .bg{ position: absolute; left: 0; top:0px; width: 100%; height: 100%; z-index: -1; min-width: 640px; background-color: #173c44; } #container_m .bg img{ width: 100%; height: 2700px; } #content_m { max-width: 1000px; min-width: 640px; height: 100%; background:url(../images/mo/TFF_bg_m.jpg) center top no-repeat; background-color: #173c44;} /* HeaderCon */ #content_m .logo{ width: 307px; height: 145px; position: absolute; right: 40px; top:10px; } #content_m .logo img{ width: 100%; height: 100%; } #content_m .headerCon { max-width: 640px; height: 710px; position: relative; margin: 0 auto; padding-top: 200px; } #content_m .headerCon img.kvlogo{ width: 100%; height: 100%; } #content_m .headerCon h1{ width: 560px; height: 68px; margin:0 auto 10px; float: none; position: relative; } #content_m .headerCon h1 img{ margin: 0; position: absolute; left: 0; top:0; opacity: 0; } #content_m .headerCon p{ width: 100%; margin:0 auto; color:#FFFFFF; font-weight: normal; font-size: 34px; line-height: 50px; letter-spacing: 1px; position: relative; opacity: 0; } #content_m .headerCon p span{ color: #49b0a2; font-weight: bold; font-size: 42px; position: absolute; left:340px; top:2px; } #content_m .headerCon a.freebtn{ display: block; width: 200px; height: 50px; line-height: 43px; border: 3px solid #FFFFFF; font-size: 28px; font-weight: bold; margin: 15px auto 0; background: rgba(0,0,0,0.5); color:#FFFFFF; opacity: 0;} #content_m .headerCon a.btn1_2{ display: block; width: 250px; height: 100px; line-height: 35px; padding: 12px 0 0 0; border: 3px solid #FFFFFF; font-size: 28px; font-weight: bold; margin: 30px auto 0; background: rgba(0,0,0,0.5); color:#FFFFFF; opacity: 0;} #content_m .headerCon a:hover{ background: rgba(0,0,0,0.5); color:#FFFFFF; } /* HeaderCon End */ /* contentCon */ #content_m .contentCon { min-width: 640px; max-width: 1000px; position: relative; margin: 0 auto; } #content_m .contentCon .item01,#content_m .contentCon .item02,#content_m .contentCon .item03{ position: relative; padding:0; margin: 0 auto;} #content_m .contentCon > div h2{ width: 100%; height: 100px; background: url(../images/mo/TFF_menu_m.png) center top no-repeat; background-color:#5db8a9; font-size: 0; margin-bottom:3px;} #content_m .contentCon > div.item02 h2{ background-position-y: -96px; } #content_m .contentCon > div.item03 h2{ background-position-y: -192px; } #content_m .contentCon > div.item04 h2{ background-position-y: -288px; } #content_m .contentCon hr{ margin: 5px auto 15px; } #content_m .contentCon .more1_m,#content_m .contentCon .more2_m,#content_m .contentCon .more3_m{ max-width: 640px; line-height: 100px; margin: 0 auto; color:#FFFFFF; padding: 40px 0px 0; margin-bottom: 3px;} #content_m .contentCon .more1_m h3,#content_m .contentCon .more2_m h3,#content_m .contentCon .more3_m h3{ font-size:32px; font-weight: normal; line-height:36px; letter-spacing:5px; color:#ffffff; text-align:left; display:block; padding-left:25px; } #content_m .contentCon .more1_m h3{ width: 600px; padding: 15px 30px; margin:0 auto 60px; border: 1px solid #FFFFFF; text-align: center; line-height: 50px; } #content_m .contentCon .more1_m ol{ max-width: 1250px; position: relative; margin: 0 auto 30px; } #content_m .contentCon .more1_m ol li{ width: 600px; height: 417px; margin: 0 auto 55px; font-weight: normal; position: relative; } #content_m .contentCon .more1_m ol li .good{ width: 70px; height: 70px; display: block; position: absolute; left: -15px; top:-35px; } #content_m .contentCon .more1_m ol li img{ width: 290px; height: 417px; display: block; float: left; } #content_m .contentCon .more1_m ol li .txt_box{ width: 310px; height: 100%; padding: 0 15px; float: left; position: relative; } #content_m .contentCon .more1_m ol li .txt_box h4{ font-size: 30px; color: #f9c164; line-height: 45px; margin-bottom: 5px; text-align: left; overflow: hidden; } #content_m .contentCon .more1_m ol li .txt_box p{ font-size: 26px; line-height: 36px; color: #FFFFFF; text-align: justify; overflow: hidden; } #content_m .contentCon .more1_m ol li .txt_box a{ width: 280px; height: 70px; line-height: 70px; font-size: 28px; text-align: center; } #content_m .contentCon .more1_m ol li .txt_box a.nowopenmain{ border:3px solid #f9c164; color:#f9c164; position: absolute; left:15px; bottom:0px; letter-spacing: 6px; } #content_m .contentCon .more1_m ol li .txt_box a.nowopenmain:hover{ border:3px solid #f9c164; color:#f9c164; position: absolute; left:15px; bottom:0px; letter-spacing: 6px; } #content_m .contentCon .more1_m ol li .txt_box a.seemore{ background-color: #f9c164; color:#000000; border:3px solid #f9c164; position: absolute; left:15px; bottom:0px; } #content_m .contentCon .more1_m ol li .txt_box a:hover{ text-decoration: none; } /*箭頭右-邊框*/ #content_m .contentCon .more1_m a .arrow_r_out{ width:0px; height:0px; border-width:6px; border-style:solid; border-color: transparent transparent transparent #f9c164; position:absolute; bottom:22px; left:200px; } #content_m .contentCon .more1_m a.nowopenmain .arrow_r_out{ width:0px; height:0px; border-width:6px; border-style:solid; border-color: transparent transparent transparent #f9c164; position:absolute; bottom:22px; left:200px; } #content_m .contentCon .more1_m a.nowopenmain:hover .arrow_r_out{ width:0px; height:0px; border-width:6px; border-style:solid; border-color: transparent transparent transparent #f9c164; position:absolute; bottom:22px; left:200px; } #content_m .contentCon .more1_m a.seemore .arrow_r_out{ width:0px; height:0px; border-width:6px; border-style:solid; border-color: transparent transparent transparent #000000; position:absolute; bottom:22px; left:200px; } #content_m .contentCon .more1_m a:hover .arrow_r_out{ width:0px; height:0px; border-width:6px; border-style:solid; border-color: transparent transparent transparent #000000; position:absolute; bottom:22px; left:200px; } /*箭頭右-邊框*/ #content_m .contentCon .more1_m .boss { width: 600px; height: 600px; position: relative; margin: 0 20px 30px; } #content_m .contentCon .more1_m .boss img{ width: 182px; height: 182px; display: block; border-radius: 182px; margin: 0 auto; } #content_m .contentCon .more1_m .boss .txt_box { width: 600px; height: 100%; padding:20px; float: left; text-align: justify; font-weight: normal; } #content_m .contentCon .more1_m .boss .txt_box h4{ font-size: 34px; color:#5db8a9; line-height: 43px; text-align: center; margin-bottom: 10px; } #content_m .contentCon .more1_m .boss .txt_box p{ font-size: 26px; color: #FFFFFF; line-height: 40px; } /*串場動畫*/ .da-thumbs { display: block;} #da-thumbs{ display: block; list-style: none; height:1330px; position: relative; padding-left:25px; } #da-thumbs li { width: 290px; float: left; padding: 0; position: relative; margin-bottom: 10px; } #da-thumbs li:nth-child(2n){ margin-left:10px; } #da-thumbs li h4,#da-thumbs li h4 img { display: block; position: relative; width: 100%; height: 100%;font-weight: normal; font-size: 26px; text-align: center; color: #12242a; } #da-thumbs li h4 { overflow: hidden; } #da-thumbs li h4 a { width: 250px; height: 70px; line-height: 70px; font-size: 26px;} .da-thumbs li h4>div { position: absolute; background: rgba(255,255,255,1); width: 100%; height: 100%; padding: 25px 10px 0; } .da-thumbs li h4 div .title{ font-size: 33px; line-height: 120px; height: 80px; } .da-thumbs li h4 div .title2{ font-size: 33px; height: 80px; line-height:40px; padding-top: 0px; color:#000000; } .da-thumbs li h4 div p{ font-size: 26px; line-height: 40px; } .da-thumbs li h4 div span { position: relative; display: block; height: 148px; line-height: 34px; font-size: 26px; text-align: justify; padding: 0 0 5px; margin: 0 10px; text-transform: uppercase; font-weight: normal; color: rgba(0,0,0,0.9); text-shadow: 1px 1px 1px rgba(0,0,0,0.2); overflow: hidden; } .da-thumbs li h4 div a { position: absolute; width: 120px; height: 35px; line-height: 27px; font-weight:normal; border:3px solid #12242a; text-align: center; display: block; margin: 0; font-size: 16px; text-align: center; text-transform: uppercase; font-weight: normal; color: #FFFFFF; background: #000000; text-decoration: none; letter-spacing: 1px;} .da-thumbs li h4 div a:hover { opacity: 1; } .da-thumbs li h4 div a.link1 { left:20px; bottom:100px; background-color: #FFFFFF; color:#200024; } .da-thumbs li h4 div a.link2 { left:20px; bottom:50px; background-color: #12242a; color:#FFFFFF; } /*串場動畫*/ #content_m .contentCon .more3_m{ padding: 40px 25px 30px; background: #FFFFFF; } #content_m .contentCon .more3_m li { margin-bottom:10px; } #content_m .contentCon .more3_m li img{ width: 100%; height: 100%; border: 1px solid #5db8a9; } #content_m .contentCon .more3_m li a{ width: 100%; height: 100%; display: block; } #content_m .contentCon .more3_m li a h5{ font-size: 33px; line-height: 38px; margin-top: 10px; color:#2e0037; } #content_m .contentCon .more3_m li a p{ font-size: 26px; line-height: 40px; margin-bottom: 10px; color:#2e0037; } #content_m .contentCon .more4_m{ padding: 40px 25px 30px; } #content_m .contentCon .more4_m li{ list-style:decimal outside; font-size: 25px; line-height: 35px; margin: 0 25px; color: #FFFFFF; font-weight:normal; text-align: justify; } }/*手機版end*/