@charset "utf-8";
/* CSS Document */
/*default page set for田尾玫瑰園*/
body{background:url("../images/bgimg1.jpg") repeat-x top, url("../images/bgimg2.jpg") repeat-x bottom;}
.dhotpro{display:flex; flex-wrap:wrap;}
#container{display:flex; width:100%; justify-content: center;}
#container .pgwid{display:flex; flex-wrap: wrap; max-width:1200px; width:100%; justify-content: space-between;}
.centerblk{width:calc(100% - 500px); order:2;}
.leftblk{width:225px; order:1;}
.rightblk{width:225px; order:3;}
#footerTs{width:100%; order:4; background:rgba(0,0,0,0.3); color:#fff; margin-top:40px;}
#footerTs a{color:#fff;}
#footerTs .websitename, #footerTs .company{color:#fff;}

.dtit{color:#166b2b;}
.dtit::before{content:""; width:45px; height:45px; background:url("../images/dtit-icon.png"); display: block; position:absolute; bottom:auto; top:-45px; left:50%; transform:translateX(-50%);}
.dtit::after{content:""; width:100%; height:4px; background:linear-gradient(90deg,rgba(22,107,43,1),rgba(22,107,43,0),rgba(22,107,43,0),rgba(22,107,43,1)); display: block; position:absolute; bottom:auto; top:50%; left:50%; transform:translateX(-50%);}



/*Df326-for news */
.Df326 {padding:30px 2%;}
.Df326 .page{background:#fff; border-radius:1em; border:3px solid #417e2e; padding:0; overflow: hidden;}
.Df326 .dtit{background:#417e2e; color:#fff; margin:0; padding:3px; font-weight:500;}
.Df326 .dtit::before,.Df326 .dtit::after{display:none;}
.Df326 .list .frm{border-bottom:2px dotted #ccc;}
.Df326 .list .frm section{display:flex; flex-wrap:nowrap; width:100%; justify-content: space-between; flex-direction: row; align-items: center;}
.Df326 .list h3.subject{font-weight:400; font-size:14px; width:calc(100% - 7em); order:2;}


.Df893{background:#f6f4f4; padding:15px;}
.Df893 .list .frm .subject span{display:block; width:100%; background:#60886a; color:#fff; text-align:center; border-radius:1em; font-size:18px; letter-spacing: 1px; padding:5px; font-weight:700;}
.Df893 .list .frm .subject{font-size:15px; color:#000; font-weight:400;}
.Df893 .list .frm:hover .subject{color:#60886a;}

.Df400,.Df742{padding:40px 0;}
.Df400 .list .frm,.Df742 .list .frm{ border-radius:5px; overflow: hidden; background:#fff; box-shadow:0 0 5px rgba(0,0,0,0.3); border-bottom:5px solid #166b2b; padding-bottom:10px !important;}
.Df400 .list .frm .subject,.Df742 .list .frm .subject{font-weight:400; color:#000; font-size:13px; text-align: center; padding:10px 10px 0 10px;}
.Df400 .list .frm .innerhtml,.Df742 .list .frm .innerhtml{text-align:center;}
@media screen and (max-width:767px){/*phone*/
.Df400 .list,.Df742 .list{width:50% !important;}
}
.Df271 .list .frm section{text-align:center; padding:10px 5px; color:#000;}
.Df271 .list .frm .subject{font-size:15px; color:#000; font-weight:400; display:inline;}
.Df271 .list .frm .innerhtml{display:inline; width:auto; float:none; padding-left:5px;}
@media screen and (max-width:767px){/*phone*/
.Df271 .list{width:50% !important;}
}
@media screen and (max-width:960px){/*desktop-small pad*/
.centerblk{width:calc(100% - 360px); padding:0 5px;}
.centerblk .page{padding:0;}
.leftblk{width:180px; order:1;}
.rightblk{width:180px; order:3;}
}

.Df893 .list .frm .subject span{font-size:16px;}
.Df893 .list .frm .subject{font-size:14px;}

@media screen and (max-width:767px){/*phone*/
.centerblk{width:100%;}
.leftblk,.rightblk{display:none;}
.Df400 .dhotpro .list,.Df742 .dhotpro .list,.Df271 .dhotpro .list{width:50% !important;}
}
/*=====================default page set end=====================*/
/*=====================cust page set start=====================*/
.custpg{margin-top:2em;}
.custpg .page{background:#fff; min-height:500px;}
.product .main .list h3.subject{font-size:15px; color:#000;}
.product .main .list .frm{border:1px solid #ccc;}
@media screen and (max-width:767px){/*phone*/
.product .main .list{width:50%;}	
}

/*-----product.aspx 左側分類選單：比照首頁「商品目錄」(.Df893) 風格-----*/
/*外框：同首頁 .Df893 的淺灰底*/
.product .side #submenu{background:#f6f4f4; padding:15px; border-radius:5px; overflow:visible;}
.product .sidetit{color:#166b2b; font-size:18px; font-weight:700; padding:0 0 .4em .1em;}
/*大分類 → 首頁的綠色膠囊標題*/
.product .subnav > ul > li{border-bottom:none; margin-bottom:4px;}
.product .subnav > ul > li > a{display:block; width:100%; background:#60886a; color:#fff; text-align:center; border-radius:1em; font-size:18px; letter-spacing:1px; padding:5px; font-weight:700;}
.product .subnav > ul > li > a:hover{background:#4e7358; color:#fff;}
.product .subnav > ul > li > a::after,.product .subnav > ul > li > a:hover::after{display:none !important;}
/*分類項目 → 首頁的「･xxx」條列*/
.product .subnav > ul > li > ul.sub{margin:8px 0 14px;}
.product .subnav > ul > li > ul.sub > li{border-bottom:none;}
.product .subnav > ul > li > ul.sub > li > a{font-size:15px; color:#000; font-weight:400; line-height:1.6; padding:3px 4px; background:none; border:none; border-radius:0;}
.product .subnav > ul > li > ul.sub > li > a::before{content:"･"; padding-right:2px;}
.product .subnav > ul > li > ul.sub > li > a:hover,.product .subnav > ul > li > ul.sub > li > a.hit{color:#60886a; background:none;}
@media screen and (max-width:767px){/*phone*/
.product .side #submenu{background:#f6f4f4; padding:10px;}
.product .subtoggle{color:#166b2b; font-weight:700; border-bottom:1px solid #dcd9d9;}
.product .subnav > ul > li > a{font-size:16px;}
.product .subnav > ul > li > ul.sub > li > a{font-size:14px; border-bottom:none; color:#000; padding:3px 4px;}
}
.news .main .list{width:100%; padding:0;}
.news .main .list .frm{flex-wrap: wrap; padding:10px; border-bottom:1px dotted #ccc; cursor: pointer; width:100%;}
.news .main .list .frm:hover{background:#efefef;}
.news .main .list .frm section{width:100%; display:flex; flex-direction:row; }
.news .main .list h3.subject{width:calc(100% - 7em); padding:0; font-size:16px;}
.news .main .list .path{width:7em; margin:0; font-size:14px;}
.news .main .list .more{width:4em;}
.qa td:nth-of-type(1){font-size:20px; font-weight:700; width:30px;}
.qa a{color:#000;}
.qa .ans{font-size:16px; line-height:1.4em; font-weight:300;}

.contact .page{display:flex; flex-wrap: wrap;}
.contact .side{align-content:flex-start; width:400px;}
@media screen and (max-width:767px){/*phone*/
.contact .side{order:2; width:100%;}

}
/*A0501*/
.A0501 .main .list .frm{background:#fff; box-shadow:0 0 10px rgba(0,0,0,0); border:1px solid #ccc;}
.A0501 .main .list .innerhtml{padding-left:30px; border-top:1px solid #ccc;}
/*Contact4*/

.Contact4{padding-bottom:0;}
.Contact4 .gmap .page{max-width:100%; width:100%; padding:0; min-height:auto;}
/*QALayout*/
.QALayout .main .list h3.subject{text-indent:-30px; margin-left:30px;}