/* 設定CSS變數 */
:root{    
    --pri01:#FFD54F; /*主色1黃*/
    --pri02:#479FAD; /*主色2綠*/
    --pri03:#B4DBE1; /*主色3淺綠*/
    --pri04:#FD3D5A; /*主色4淺紅*/
    --pri05:#A81B04; /*主色5紅*/
    --pri06:#735465; /*主色6深紅*/
    
    --gradient01: linear-gradient(0deg, var(--pri01) 0%, var(--pri02) 50%, var(--pri03) 100%); /* logo 漸層 */
    
}
/* 專案CSS */
.container{ width: 100%; max-width: 1440px; display: block; margin: 0 auto; padding: 0 20px;}
.container > .w50{ display: inline-block; width: 50%;}

header, footer{ background-color: #000; color: #FFF; width: 100%; padding: 10px 0;}
footer{ text-align: center; padding: 0;}
footer .container{ border-top: 1px solid #666; padding: 20px 0;}


header a.logo{ display: inline-block; height: 46px; line-height: 46px; padding-left: 60px; background-image: url(../Images/logo_icon.png); background-repeat: no-repeat; background-size: contain; font-size: 24px; font-weight: 700;}

h1{ display: none;}
h2{ font-size: 36px; letter-spacing: 5px; font-weight: 600; color: #333; margin-bottom: 15px; text-align: center; padding-left: 5px;}
p{ font-size: 24px; color: #333; line-height: 1.5;}

.block{width: 100%; display: block; padding: 120px 20px; font-size: 0; }
.block.KV{min-height: 500px; background-image: url(../Images/KV.jpg); background-size: auto 100%; background-repeat: no-repeat; background-position: center;}
.block.KV::after{ content: ''; display: block; padding-top: 31.25%;}

.block.s1,
.block.contact{ background-color: var(--pri01);}
.block.contact h2{ text-align: left; padding-left: 0;}
.block.contact .map{position: relative; vertical-align: middle;}
.block.contact .map::after{ content: ''; display: block; padding-top: 60%;}
.block.contact iframe{ position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.block.contact .info{ padding-left: 10%; display: inline-flex; vertical-align: middle; flex-direction: column;}

.block.s2{ background-color: #EEE;}
.block.s2 h2{ margin-bottom: 40px;}
.block.contact{ }

.mylist{ display: flex; justify-content: space-between; width: 100%;}
.mylist ul{ display: inline-block;}
.mylist ul li{width: 100%; position: relative; }
.mylist ul li.txt{font-size: 24px; text-align: center; padding: 10px 10px; color: #333;}
.mylist ul li.pic{ background-repeat: no-repeat; background-size: cover; background-position: center;}
.mylist ul li.pic::after{content: ''; display: block;}

.service-list ul{ width: calc(100%/3 - 40px);}
.service-list ul li.pic::after{ padding-top: 100%;}

.sale-list ul{ width: calc(100%/2 - 20px);}
.sale-list ul li.pic::after{ padding-top: 60%;}

@media screen and (max-width: 880px) {
    .container{ padding: 0;}
    .container > .w50{ width: 100%;}
    
    .mylist{ display: inline-block;}
    .mylist ul{ max-width: 640px; display: block; margin: 0 auto 30px;}
    .service-list ul,
    .sale-list ul{ width: 100%; }
    .service-list ul li.pic::after{ padding-top: 60%;}
    
    .block.contact .map::after{ padding-top: 100%;}
    .block.contact .info{ padding-left: 0; margin-top: 30px;}
    .block.contact h2,
    .block.contact p{ text-align: center;}
    
    
    
}