@charset "UTF-8";

html,body {font-family: sans-serif,'noto sans TC',"微軟正黑體";margin: 0;padding: 0;min-width: 320px;letter-spacing: .03em;}
a, a:hover, a:active, a:visited, a:focus {display: inline-block;color: inherit;text-decoration: none;}
.content a{display: inline-block;}
img {border: 0;}
h1,h2,h3,h4,h5,h6{margin: 0;}
h1,h2,h3,h4,h5,h6, p, li{line-height: 1.6;}
* {box-sizing: border-box;}

body{background: #000;color: #fff;}
.container{margin: 15px;}
.inline_a,.inline_a:hover,.inline_a:focus{font-weight: 600; text-decoration: underline;}

nav{margin:15px;}
.tbw_logo img{height:40px;}
.twm_logo img{height: 20px;margin-top: 10px;}

#top, #campaign, #info, #site, #note{display: block;overflow: hidden;box-sizing: border-box;margin-bottom: 80px;}

.top_img{width: 90%;}
.top_tit{width: 85%;padding-left: 15px;margin-top: -45px;max-width: 500px;}

#campaign{text-align: center;}
.section{margin: 30px 15px;border: 1px solid #fff;border-radius: 10px;padding: 15px;}
.section p{text-align: left;padding: 20px;}
.section a{background: #3E1EE6;padding: 10px;display: block;}
p.award{font-weight: 600;}
p.award:after{content: "(原價 $1,500)";font-size: 12px;font-weight: 300;letter-spacing: .05em;}

#info{background: url(../images/img_bg.png) no-repeat;background-position: top center;background-size: cover;overflow: hidden;text-align: center;}
#info{margin-bottom:0 ;}
#info h1{margin-top: 60px;}
.feature{border: 1px solid #fff;border-radius: 100%;margin: 40px auto;padding: 85px 0 50px;text-align: center;width: 300px;height: 300px;}
.feature img{width: 70%;}
.feature p{font-size: 20px;margin-top: 10px;text-shadow:0px 0px 20px #333;}
#info a{font-size: 20px;font-weight: 600;margin:70px auto 40px;border-bottom: 1px solid #fff;width: 145px;}

.section_left{background-image: linear-gradient(to bottom, #049EE0 0%, #FEC204 50%, #F60016 100%);padding: 40px 20px 30px;}
.section_left img{max-width: 250px;}
.section_right{padding: 15px;}
.section_right p{letter-spacing: 0.5em; margin-bottom: 5px;}
.section_right h3{margin: 5px auto 20px;}
.address{display: flex;}
.address a{font-size: 14px; background: #fff;color: #000; font-weight: 600; border-radius: 20px;padding: 3px 2px;width: 90px;text-align: center;margin-left: 15px;}

#note{padding: 0 15px;padding-top:30px;}
#note ol {margin-left: -1em;}
#note ol li{font-size: 14px;}

@media (min-width: 768px) and (max-width:992px){
    .feature{width: 250px;height: 250px;padding: 60px 0 50px;}
}

@media (min-width: 768px) {
    #top, #campaign, #site, #note{margin-bottom: 120px;}

    .container{max-width:992px ;margin: 15px auto;}

    nav, #top, .campaign_section, .info_secion, #site{display: flex;}
    h1{font-size: 45px;}
    h3{font-size: 24px;}

    nav{justify-content:space-between;margin:30px;}
    .tbw_logo img{height:60px;}
    .twm_logo img{height: 36px;margin-top: 24px;}

    #top{margin-bottom: 100px;}
    .top_img > img{display: none;}
    .top_img{background: url(../images/img_top.png) no-repeat;background-position: center right; background-size: cover; height: 500px;}
    .top_tit{margin: 20px 120px 0 -45px ; }

    .section{width: 50%;justify-content:space-between;}
    .section p,.section a{font-size: 18px;}
    p.award{font-size: 24px;}
    p.award:after{font-size: 16px;}
 
    .section_left{text-align: right;flex: 1;padding-top: 56px;padding-right: 40px;}
    .section_right{flex: 2;margin-left: 20px;}
    .section_right p{margin-top: 5px;}

    #note{padding-top:0px;}
}