body { padding: 0; margin: 0 !important; } .section { position: relative; padding: 50px 0; } .section.intro { background: url(https://s3-ap-northeast-1.amazonaws.com/zerozero-storage/events/intro_bg.png) no-repeat left bottom; background-size: 40% auto; } @media screen and (max-width: 850px) { .section.intro { background-position: center bottom; background-size: auto 350px; } } .section.elec { background-image: url(https://s3-ap-northeast-1.amazonaws.com/zerozero-storage/electronic-index-deco.png); background-repeat: repeat-x; background-position: center bottom; padding-bottom: 150px; } .section.car { background-image: url(https://s3-ap-northeast-1.amazonaws.com/zerozero-storage/car_bg.png); background-repeat: repeat-x; background-size: auto 180px; background-position: center bottom -5px; padding-bottom: 150px; } .section.snow { background-image: url(https://s3-ap-northeast-1.amazonaws.com/zerozero-storage/events/snow_bg.png); background-repeat: repeat; } .section.light { background-color: #f8f8f8; } .section.gray { background-color: #a5bbc2; } .section.green { background-color: #8bdc65; } .section.red { background-color: #ff8188; } .section.yellow { background-color: #ffc500; } .section.yellow_b { border-top: 10px dashed #ffc500; border-bottom: 10px dashed #ffc500; } .section.blue { background-color: #22d3c5; } .section.arrow.light::before { border-color: #f8f8f8 transparent transparent transparent; } .section.arrow.mid::before { border-color: #dcdad6 transparent transparent transparent; } .section.arrow.dark::before { border-color: #999 transparent transparent transparent; } .section.arrow::before { position: absolute; z-index: 1; content: ""; left: 50%; top: 0px; margin-left: -15px; width: 0; height: 0; border-style: solid; border-width: 15px 15px 0px 15px; border-color: #fff transparent transparent transparent; } .section .content { width: 90%; max-width: 1200px; margin: 0 auto; } .section_title { text-align: center; position: relative; margin-bottom: 50px; } .section_title p { text-align: left; position: relative; margin-bottom: 50px; } .section_title.reverse h3 { color: #fff; } .section_title h3 { font-size: 36px; line-height: 40px; font-weight: normal; color: #333; letter-spacing: 0.1em; margin: 1em auto; } .section_title h3::before { font-family: "FontAwesome"; content: "\f192"; margin-right: 8px; color: #ffc500; } .section_title::after { content: ""; position: absolute; width: 40px; height: 4px; background: #ffc500; bottom: -25px; left: 50%; margin-left: -20px; border-radius: 2px; -moz-border-radius: 2px; -webkit-border-radius: 2px; } @media screen and (max-width: 850px) { .section_title h3 { font-size: 30px; } } .banner { position: relative; max-height: calc(100vh - 80px); overflow: hidden; } @media screen and (max-width: 850px) { .banner { max-height: calc(100vh - 50px); } } .banner .hint { position: absolute; z-index: 999; bottom: -40px; left: 50%; margin-left: -30px; width: 60px; height: 60px; background: #ffc500; border-radius: 100%; -moz-border-radius: 100%; -webkit-border-radius: 100%; -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2); font-size: 14px; text-align: center; color: #fff; animation-name: slidein; animation-duration: 2s; animation-iteration-count: infinite; } .banner .hint::before { font-family: "FontAwesome"; content: "\f063"; color: #333; display: block; font-size: 28px; line-height: 60px; } @keyframes slidein { 50% { bottom: 20px; } } .banner .small { display: none; } @media screen and (max-width: 850px) { .banner .large { display: none; } .banner .small { display: block; } } .subsidy { margin: 0 auto; background: #fff; border: 1px solid #ddd; padding: 25px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .subsidy h3 { font-size: 18px; line-height: 1.8; color: #000; margin: 1em auto; font-weight: bold; } .subsidy h3::before { font-family: "FontAwesome"; content: "\f192"; margin-right: 8px; color: #ffc500; } .subsidy p { font-size: 15px; color: #666; line-height: 1.5; margin: 1em auto; } .subsidy p span { color: #ff8188; } .subsidy p span1 { color: royalblue; } .subsidy ul { padding-left: 1em; } .subsidy ul li { font-size: 15px; line-height: 1.5; margin-bottom: 5px; color: #666; } .purchase { margin: 0 auto; text-align: center; } .purchase h3 { font-size: 36px; color: #22d3c5; line-height: 1.2; font-weight: bold; margin: 1em auto; } @media screen and (max-width: 850px) { .purchase h3 { font-size: 24px; } } .purchase p { text-align: left; font-size: 16px; color: #000; line-height: 1.5; max-width: 700px; margin: 1em auto 15px; } .purchase p span { color: #22d3c5; font-size: 20px; font-weight: bold; } .purchase p span1 { color: #332e28; font-size: 20px; font-weight: bold; } .purchase p span2 { color: #e87a7a; font-size: 20px; font-weight: bold; } .purchase p span::before { font-family: "FontAwesome"; content: "\f058"; margin-right: 8px; } .purchase p span1::before { font-family: "FontAwesome"; content: "\f058"; margin-right: 8px; } .purchase div a { display: inline-block; text-decoration: none; font-size: 18px; color: #fff; line-height: 50px; background: #333; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; margin: 5px; position: relative; width: 200px; } .purchase a:hover { background: #000; } .reservation > div { width: 20%; float: left; position: relative; } @media screen and (max-width: 850px) { .reservation > div { width: 100%; float: none; margin-bottom: 50px; } } .reservation > div span { width: 150px; height: 150px; display: block; margin: 0 auto; background: url(https://s3-ap-northeast-1.amazonaws.com/zerozero-storage/electronic-step-deco.png) no-repeat top left; background-size: 750px 150px; } .reservation > div p { text-align: center; font-size: 15px; color: #000; margin: 1em auto; } .reservation > div h3 { text-align: center; font-size: 18px; color: #22d3c5; margin: 1em auto; } @media screen and (max-width: 850px) { .reservation > div h3 { font-size: 15px; } } .reservation > div:nth-child(2) span { background-position: top left -150px; } .reservation > div:nth-child(4) span { background-position: top left -300px; } .reservation > div:nth-child(3) span { background-position: top left -450px; } .reservation > div:nth-child(5) span { background-position: top right; } .reservation > div:nth-child(5)::after { display: none; } .reservation > div::after { font-family: "FontAwesome"; content: "\f061"; width: 30px; height: 30px; line-height: 30px; text-align: center; font-size: 30px; position: absolute; right: -15px; top: 160px; color: #ffc500; } @media screen and (max-width: 850px) { .reservation > div::after { content: "\f063"; font-size: 20px; top: auto; bottom: -40px; right: 50%; margin-right: -15px; } } .reservation::after { content: ''; clear: both; display: block; visibility: hidden; height: 0; width: 100%; } .extra { text-align: center; } .extra span.caller { width: 100px; height: 100px; display: block; margin: 0 auto; background: url(https://s3-ap-northeast-1.amazonaws.com/zerozero-storage/electronic-step-deco.png) no-repeat top left -100px; background-size: 500px 100px; } .extra span.book { width: 100px; height: 100px; display: block; margin: 0 auto; background: url(https://s3-ap-northeast-1.amazonaws.com/zerozero-storage/electronic-step-deco.png) no-repeat top left; background-size: 500px 100px; } .extra h3 { color: #fff; font-size: 24px; font-weight: normal; margin: 1em auto; } .extra h3.furniture::before { font-family: "FontAwesome"; content: "\f236"; display: block; font-size: 50px; margin-bottom: 15px; } .extra h3.elec::before { font-family: "FontAwesome"; content: "\f26c"; display: block; font-size: 50px; margin-bottom: 15px; } .extra h3.car::before { font-family: "FontAwesome"; content: "\f1b9"; display: block; font-size: 50px; margin-bottom: 15px; } .extra a { display: inline-block; text-decoration: none; font-size: 18px; color: #fff; line-height: 50px; background: #333; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -webkit-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); -moz-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); margin: 5px; position: relative; width: 200px; } .extra a:hover { background: #000; } .strength .text { margin-left: 50%; width: 49%; display: inline-block; } .strength .text h3 { color: #8bdc65; font-size: 24px; line-height: 1.8; } .strength .text p { color: #333; font-size: 18px; line-height: 1.5; } .strength .text ul li { font-size: 18px; color: #333; line-height: 1.5; margin-bottom: 8px; } .strength .text ul li span { color: #8bdc65; } .strength .text ul li span::before { font-family: "FontAwesome"; content: "\f00c"; margin-right: 8px; } .strength .text ul li span::after { content: " / "; } @media screen and (max-width: 850px) { .strength { padding-bottom: 350px; } .strength .text { width: 100%; margin-left: 0; } .strength .text ul { text-align: center; } .strength .text span { display: block; } .strength .text span::after { display: none; } } .coupon .intro { width: 30%; float: left; } .coupon .intro h3 { margin-top: 0; font-size: 36px; color: #fff; font-weight: normal; margin: 1em auto; } .coupon .intro h3::before { font-family: "FontAwesome"; content: "\f006"; margin-right: 8px; } .coupon .intro p { font-size: 18px; color: #000; line-height: 1.5; margin: 1em auto; } .coupon .intro a { text-align: center; display: inline-block; text-decoration: none; font-size: 18px; color: #fff; background: #333; line-height: 50px; border-radius: 8px; -moz-border-radius: 8px; -webkit-border-radius: 8px; -webkit-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); -moz-text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4); margin: 5px; position: relative; width: 200px; } .coupon .intro a:hover { background: #000; } .coupon .img { width: 65%; float: right; border: 5px solid #fff; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; -webkit-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); -moz-box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); box-shadow: 1px 1px 4px rgba(0, 0, 0, 0.3); } .coupon .img img { width: 100%; } @media screen and (max-width: 850px) { .coupon .intro, .coupon .img { width: 100%; float: none; text-align: center; } } .coupon::after { content: ''; clear: both; display: block; visibility: hidden; height: 0; width: 100%; } *:not(.fa):not(.far):not(.fas) { font-family: "Noto Sans TC", Arial, "\\文泉驛正黑", "WenQuanYi Zen Hei", "\\儷黑Pro", "LiHei Pro", "\\微軟正黑體", "Microsoft JhengHei", sans-serif !important; word-break: break-all; } *[onclick] { cursor: pointer; } .section_mt_m35 {margin-bottom: -35px;} section div:not(#position) {line-height:30px;text-align: justify;} .fa, .fas, .far, .fal, .fad, .fab { line-height: inherit; } .icon-indent-box p{ text-indent: -14px; padding-left: 14px; } .icon-indent-box .fas{ width: 14px; text-align: center; } .container.b-clear:after{ content: ""; width: 100%; display: block; height: 1px; } /*======================================= pic-sec ========================================*/ #pic-sec .pic-content { margin: 50px 10px; } #pic-sec .logo-zero { width: 150px; margin: 20px 0; } #pic-sec .pic-content h3 { font-size: 2.15rem; color: #515151; letter-spacing: 2px; } #pic-sec .pic-content p { color: #333333; letter-spacing: 1px; font-size: 1.15rem; padding-top: 20px; } #pic-sec .icon-box { padding: 15px; } #pic-sec .icon-box .icon { display: inline-block; width: 50px; margin: auto 10px; } #pic-sec .icon-box h5 { display: inline-block; color: #fff; font-size: 1.2rem; letter-spacing: 1.5px; margin: 10px; vertical-align: middle; } /*======================================= bg-add ========================================*/ .bg-gray {background-color: #EAEAEA !important;} .bg-theme {background-color: #47BAB1 !important;} .bg-lighttheme {background-color: #81E2D7 !important;} .bg-green {background-color: #8BDC64 !important;} .bg-lightgreen {background-color: #A2EA7D !important;} .bg-lightgray {background-color: #A5BBC2 !important;} .theme-color {color: #22D3C5;} .zz-blue{color: #22d3c5} .zz-green{color: #8bdc64} .zz-black{color: #333333} .zz-gray{color: #a5bbc2} .zz-yellow{color: #e1e61e} .zz-brown{color: #ba6954} .zz-pink{color: #ff8188} /*======================================= Cards ========================================*/ @media (min-width: 576px){ .card-deck { margin-right: 0px!important; margin-left: 0px!important; } .card-deck .card { margin-right: 3px!important; margin-left: 3px!important; } } .img-bgs{ width: 100% !important; background-size: cover; background-position: center; padding-top:75%; } .pt100{ padding-top:100%!important; } .pt50{ padding-top:50%!important; }

會員中心