/* CSS Document */

body {	-webkit-text-size-adjust:100%; font-family: 'Noto Sans TC', sans-serif; overflow-x: hidden; position: relative; }
img {	border:0; }

/* Reset ================================================================================= */

a { text-decoration:none; transition: all 0.4s ease-out 0s; }
a:hover { text-decoration:none; }

* { box-sizing: border-box;}

.content-Box { max-width:1440px; width: 100%; margin:0 auto; text-align:left; position:relative; clear:both;}

#content { font-size: 16px; line-height:1.7; color: #333; letter-spacing: 0.05rem;  padding-top: 160px;font-weight: 400;}
#content p{ margin-bottom: 0px; margin-top: 0; padding-bottom: 30px; font-size: 16px;line-height:1.7;  font-weight: 400; }
p, td, li, label { font-size: 16px;line-height:1.7;  font-weight: 400; }

.photo-fit img { object-fit: cover; width: 100%; height: 100%; position: absolute; z-index: 1; left: 0; top: 0;}

.photo {line-height: 0; height: 0; padding-bottom: 40%; overflow: hidden; position: relative; z-index: 1; margin-bottom: 0px;}
.imgCenter {position: absolute; top: 0; left: 0; right: 0; bottom: 0; line-height: 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 2;}
.imgCenter img {max-height: 100%; }

.demo-section { padding-left: 5%; padding-right: 5%;}


.banner { position:relative; /*margin-bottom: calc(20px + 2%);*/ }
.banner-pc { }
.banner-mobile { display: none !important;}

.amg_banner_wrap {position: relative; z-index: 2; height: 0; padding-bottom: 36.45%; overflow: hidden; margin-bottom: calc(20px + 2%);}
.amg_banner_wrap > div {position: absolute!important; top: 0!important; left: 0!important; right: 0!important; bottom: 0!important;}
@media only screen and (max-width:1279px){/*依照banner手機版RWD尺寸進行變動*/
    .amg_banner_wrap {padding-bottom: 50.311%;}
}

.loop { }
.loop .owl-item {position: relative; }
.loop .owl-nav { position: absolute; top:44%; transform: translateY(-50%); left: 0; width: 100%; z-index: 11;}
.loop .owl-prev, .loop .owl-next { position:absolute; z-index:100; top:0;  background:rgba(255,255,255,1) !important; width: 40px; height: 40px; border: 0px solid rgba(255,255,255,1) !important; border-radius: 100% !important; transition: all 0.4s ease-out 0s;}
.loop .owl-prev:hover, .loop .owl-next:hover { transform: scale(0.8);}
.loop .owl-prev:hover, .loop .owl-prev:hover:before, .loop .owl-next:hover:before { }
.loop .owl-prev { left:2%; }
.loop .owl-next { right:2%;}
.loop .owl-prev:before, .loop .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 1;transition: all 0.4s ease-out 0s;width:8px; height: 8px; background-size: contain; display: block; border-width: 1px 1px 0 0; border-style: solid; border-color: #666; position: absolute; top:37%; left: 50%; transform: translate(-50%, -50%);}
/*.loop .owl-prev:after, .loop .owl-next:after { content: ""; width: 18px; height: 1px; position: absolute; background: #fff;}*/
.loop .owl-prev:before { content: ""; transform: rotate(-135deg); margin-left: -2px;}
.loop .owl-next:before { content: ""; transform: rotate(45deg);margin-left: -5px;}
.loop .owl-prev:after { left: 14px !important; }
.loop .owl-next:after { right: 14px !important;}
.loop .owl-prev:hover:before, .loop .owl-next:hover:before { opacity: 1;}
.loop .owl-stage-outer {z-index: 2;}
.loop .owl-dots { position: absolute; z-index: 100; bottom: 20px; width: auto; left: 50%; transform: translateX(-50%);text-align: center !important; padding: 0 0px; display: none;}
.loop .owl-dots .owl-dot span, .loop  .owl-dots .owl-dot span { background: #fff !important; width: 15px !important; height: 15px !important; border-radius: 100%; opacity: 0.5;}
.loop .owl-dots .owl-dot.active span, .loop  .owl-dots .owl-dot:hover span { opacity: 1; }

.title01 { margin-bottom: calc(15px + 2%); position: relative; text-align: center;}
.title01 > div { display: inline-block; padding: 0 30px; background: #fff; color: #666666; font-size: clamp(13px, 1.2vw, 16px); text-align: center; line-height: 1.1;}
.title01 > div > span { display: block; font-weight: 500; color: #362e2b; font-size:clamp(22px, 2.2vw, 32px); padding-bottom: 3px; line-height: 1.2;}
.title01:after { content: ""; position: absolute; top:50%; transform: translateY(-50%); left: 0; width: 100%; height: 2px; background: #362e2b; z-index: -1;}

.idx-hot-1 { display: flex; flex-direction: row; flex-wrap: wrap; padding-bottom: calc(20px + 1%);}
.idx-hot-1 > a { width: 25%; padding: 0 1.5%; margin-bottom: calc(20px + 1%); display:block;}
.idx-hot-1 > a:hover .idx-hot-1-pto img { transform: scale(0.9);}
.idx-hot-1 > a:hover .idx-hot-1-pto-box { border: 1px solid #d69784;box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);}
.idx-hot-1-pto-box { padding: 5px; margin-bottom: calc(10px + 1%); position: relative; border: 1px solid #e0e0e0;transition: all 0.5s ease-out 0s;}
.idx-hot-1-pto-number { position: absolute; z-index: 3; top: 0px; left: 0px; width: 30px; height: 35px; background: #d69784; clip-path: polygon(0% 0, 100% 0%, 100% calc(100% - 10px), 50% 100%, 0% calc(100% - 10px));display: flex; flex-direction: row; flex-wrap: wrap;justify-content: center; color: #fff; font-size: 14px; font-weight: 700; padding-top: 3px; letter-spacing: 0;}
.idx-hot-1-pto { padding-bottom: 100%;}
.idx-hot-1-pto img { transition: all 0.3s ease-out 0s; width: auto !important;}
.idx-hot-1-name { font-weight: 500; line-height: 1.3; padding-bottom: 10px;}
.idx-hot-1-cash { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between; font-weight: 500; font-size: 15px; letter-spacing: 0;}
.idx-hot-1-cash-o { color: #666; text-decoration: line-through;}
.idx-hot-1-cash-s { color: #c8000f;}

.idx-hot-2 { padding-bottom: calc(20px + 4%);}
.idx-hot-2-link { display: block;}
.idx-hot-2-link:hover .idx-hot-1-pto img { transform: scale(0.9);}
.idx-hot-2-pto-box { position: relative; padding: 5px;}
.loop2 { }
.loop2 .owl-item {position: relative; }
.loop2 .owl-nav { position: absolute; top:37%; transform: translate(-50%, -50%); left: 50%; width: 100%; max-width: 1440px; z-index: 11;}
.loop2 .owl-prev, .loop2 .owl-next { position:absolute; z-index:100; top:0;  background:rgba(255,255,255,1) !important; width: 26px; height: 26px; border: 1px solid #362e2b !important; border-radius: 100% !important; transition: all 0.4s ease-out 0s; margin: 0 !important;}
.loop2 .owl-prev:hover, .loop2 .owl-next:hover { transform: scale(0.8);}
.loop2 .owl-prev:hover, .loop2 .owl-prev:hover:before, .loop2 .owl-next:hover:before { }
.loop2 .owl-prev { left:15px; }
.loop2 .owl-next { right:15px;}
.loop2 .owl-prev:before, .loop2 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 1;transition: all 0.4s ease-out 0s;width:8px; height: 8px; background-size: contain; display: block; border-width: 1px 1px 0 0; border-style: solid; border-color: #666; position: absolute; top:37%; left: 50%; transform: translate(-50%, -50%);}
/*.loop2 .owl-prev:after, .loop2 .owl-next:after { content: ""; width: 18px; height: 1px; position: absolute; background: #fff;}*/
.loop2 .owl-prev:before { content: ""; transform: rotate(-135deg); margin-left: -2px;}
.loop2 .owl-next:before { content: ""; transform: rotate(45deg);margin-left: -5px;}
.loop2 .owl-prev:after { left: 14px !important; }
.loop2 .owl-next:after { right: 14px !important;}
.loop2 .owl-prev:hover:before, .loop2 .owl-next:hover:before { opacity: 1;}
.loop2 .owl-stage-outer {z-index: 2;}
.loop2 .owl-dots { position: absolute; z-index: 100; bottom: 20px; width: auto; left: 50%; transform: translateX(-50%);text-align: center !important; padding: 0 0px; display: none;}
.loop2 .owl-dots .owl-dot span, .loop2  .owl-dots .owl-dot span { background: #fff !important; width: 15px !important; height: 15px !important; border-radius: 100%; opacity: 0.5;}
.loop2 .owl-dots .owl-dot.active span, .loop2  .owl-dots .owl-dot:hover span { opacity: 1; }

.idx-hot-2-name { font-weight: 500; line-height: 1.3; padding-bottom: 10px; text-align: center;}
.idx-hot-2-cash { display: flex; flex-direction: column; flex-wrap: wrap; align-items: center; font-weight: 500; font-size: 15px; letter-spacing: 0;}

.ad-type-1 { margin-bottom: 25px;}

.ad-type-2-a { margin-bottom: 25px; display: flex; flex-direction: column; flex-wrap: nowrap;}
.ad-type-2-a > a { margin-bottom: 25px; display: block;}

.loop3 { padding-bottom: calc(20px + 4%); margin-bottom: 35px;}
.loop3 .owl-item {position: relative; }
.loop3 .owl-nav { position: absolute; bottom:90px; left: 0; width: 100%; z-index: 11;}
.loop3 .owl-prev, .loop3 .owl-next { position:absolute; z-index:100; top:0;  background:rgba(255,255,255,.4) !important; width: 62px; height: 62px; border: 0px solid rgba(255,255,255,1) !important; border-radius: 100% !important; transition: all 0.4s ease-out 0s;}
.loop3 .owl-prev:hover, .loop3 .owl-next:hover { background:rgba(255,255,255, 1) !important;}
.loop3 .owl-prev:hover, .loop3 .owl-prev:hover:before, .loop3 .owl-next:hover:before { border-color: #c37b47;}
.loop3 .owl-prev { left:2%; }
.loop3 .owl-next { right:2%;}
.loop3 .owl-prev:before, .loop3 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 1;transition: all 0.4s ease-out 0s;width: 20px; height: 20px; background-size: contain; display: block; border-width: 2px 2px 0 0; border-style: solid; border-color: #fff; position: absolute; top:21px;}
/*.loop3 .owl-prev:after, .loop3 .owl-next:after { content: ""; width: 18px; height: 1px; position: absolute; background: #fff;}*/
.loop3 .owl-prev:before { content: ""; transform: rotate(-135deg); left: 25px !important; }
.loop3 .owl-next:before { content: ""; transform: rotate(45deg); right: 25px !important;}
.loop3 .owl-prev:after { left: 14px !important; }
.loop3 .owl-next:after { right: 14px !important;}
.loop3 .owl-prev:hover:before, .loop3 .owl-next:hover:before { opacity: 1;}
.loop3 .owl-stage-outer {z-index: 2;}
.loop3 .owl-dots { position: absolute; z-index: 100; bottom: 10px; width: auto; left: 50%; transform: translateX(-50%);text-align: center !important; padding: 0 0px; margin: 0 !important; }
.loop3 .owl-dots .owl-dot span, .loop3  .owl-dots .owl-dot span { background: #d2d2d2 !important; width: 12px !important; height: 12px !important; border-radius: 100%; }
.loop3 .owl-dots .owl-dot.active span, .loop3  .owl-dots .owl-dot:hover span { background: #362e2b !important; }

.loop4 { margin-bottom: calc(20px + 4%); padding-left: 25px; padding-right: 25px;}
.loop4 .owl-item {position: relative; }
.loop4 .owl-nav { position: absolute; top:calc(50% - 26px); transform: translate(-50%, -50%); left: 50%; width: 100%; z-index: 11;}
.loop4 .owl-prev, .loop4 .owl-next { position:absolute; z-index:100; top:0;  background:rgba(255,255,255,1) !important; width: 26px; height: 26px; border: 1px solid #362e2b !important; border-radius: 100% !important; transition: all 0.4s ease-out 0s; margin: 0 !important;}
.loop4 .owl-prev:hover, .loop4 .owl-next:hover { transform: scale(0.8);}
.loop4 .owl-prev:hover, .loop4 .owl-prev:hover:before, .loop4 .owl-next:hover:before { }
.loop4 .owl-prev { left:0px; }
.loop4 .owl-next { right:0px;}
.loop4 .owl-prev:before, .loop4 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 1;transition: all 0.4s ease-out 0s;width:8px; height: 8px; background-size: contain; display: block; border-width: 1px 1px 0 0; border-style: solid; border-color: #666; position: absolute; top:37%; left: 50%; transform: translate(-50%, -50%);}
/*.loop4 .owl-prev:after, .loop4 .owl-next:after { content: ""; width: 18px; height: 1px; position: absolute; background: #fff;}*/
.loop4 .owl-prev:before { content: ""; transform: rotate(-135deg); margin-left: -2px;}
.loop4 .owl-next:before { content: ""; transform: rotate(45deg);margin-left: -5px;}
.loop4 .owl-prev:after { left: 14px !important; }
.loop4 .owl-next:after { right: 14px !important;}
.loop4 .owl-prev:hover:before, .loop4 .owl-next:hover:before { opacity: 1;}
.loop4 .owl-stage-outer {z-index: 2;}
.loop4 .owl-dots { position: absolute; z-index: 100; bottom: 20px; width: auto; left: 50%; transform: translateX(-50%);text-align: center !important; padding: 0 0px; display: none;}
.loop4 .owl-dots .owl-dot span, .loop4  .owl-dots .owl-dot span { background: #fff !important; width: 15px !important; height: 15px !important; border-radius: 100%; opacity: 0.5;}
.loop4 .owl-dots .owl-dot.active span, .loop4  .owl-dots .owl-dot:hover span { opacity: 1; }

.category-type-1 { display: block;}
.category-type-1:hover { transform: scale(0.9);}
.category-type-1-pto {  padding-bottom: 73%; margin-bottom: 5px;}
.category-type-1-title {  font-weight: 500; text-align: center;}


.loop5 { margin-bottom: calc(20px + 4%); padding-left: 25px; padding-right: 25px;}
.loop5 .owl-item {position: relative; }
.loop5 .owl-nav { position: absolute; top:calc(50% - 26px); transform: translate(-50%, -50%); left: 50%; width: 100%; z-index: 11;}
.loop5 .owl-prev, .loop5 .owl-next { position:absolute; z-index:100; top:0;  background:rgba(255,255,255,1) !important; width: 26px; height: 26px; border: 1px solid #362e2b !important; border-radius: 100% !important; transition: all 0.4s ease-out 0s; margin: 0 !important;}
.loop5 .owl-prev:hover, .loop5 .owl-next:hover { transform: scale(0.8);}
.loop5 .owl-prev:hover, .loop5 .owl-prev:hover:before, .loop5 .owl-next:hover:before { }
.loop5 .owl-prev { left:0px; }
.loop5 .owl-next { right:0px;}
.loop5 .owl-prev:before, .loop5 .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 1;transition: all 0.4s ease-out 0s;width:8px; height: 8px; background-size: contain; display: block; border-width: 1px 1px 0 0; border-style: solid; border-color: #666; position: absolute; top:37%; left: 50%; transform: translate(-50%, -50%);}
/*.loop5 .owl-prev:after, .loop5 .owl-next:after { content: ""; width: 18px; height: 1px; position: absolute; background: #fff;}*/
.loop5 .owl-prev:before { content: ""; transform: rotate(-135deg); margin-left: -2px;}
.loop5 .owl-next:before { content: ""; transform: rotate(45deg);margin-left: -5px;}
.loop5 .owl-prev:after { left: 14px !important; }
.loop5 .owl-next:after { right: 14px !important;}
.loop5 .owl-prev:hover:before, .loop5 .owl-next:hover:before { opacity: 1;}
.loop5 .owl-stage-outer {z-index: 2;}
.loop5 .owl-dots { position: absolute; z-index: 100; bottom: 20px; width: auto; left: 50%; transform: translateX(-50%);text-align: center !important; padding: 0 0px; display: none;}
.loop5 .owl-dots .owl-dot span, .loop5  .owl-dots .owl-dot span { background: #fff !important; width: 15px !important; height: 15px !important; border-radius: 100%; opacity: 0.5;}
.loop5 .owl-dots .owl-dot.active span, .loop5  .owl-dots .owl-dot:hover span { opacity: 1; }

.category-type-2 { display: block;  border-radius: 100%; position: relative;}
.category-type-2:before { display: block; border: 1px dashed #cccccc; border-radius: 103%; position: absolute; content: ""; z-index: 3; top: 0;left: 0; width: 100%; height: 100%;transition: all 0.4s ease-out 0s;}
.category-type-2:hover { transform: scale(0.9);}
.category-type-2:hover:before { animation-name: circle-animate;animation-duration: 8s; animation-timing-function: linear; animation-iteration-count: infinite;}
.category-type-2-pto {  padding-bottom: 80%; margin-bottom: 0px;}
.category-type-2-pto img {  max-width: 80px;}
.category-type-2-title {  font-weight: 500; text-align: center; font-size: 15px; position: relative; top: -14px;}

.loop6a { margin-bottom: calc(25px + 5%);}
.loop6a .owl-item {position: relative; }
.loop6a .owl-nav { position: absolute; bottom:90px; left: 0; width: 100%; z-index: 11;}
.loop6a .owl-prev, .loop6a .owl-next { position:absolute; z-index:100; top:0;  background:rgba(255,255,255,.4) !important; width: 62px; height: 62px; border: 0px solid rgba(255,255,255,1) !important; border-radius: 100% !important; transition: all 0.4s ease-out 0s;}
.loop6a .owl-prev:hover, .loop6a .owl-next:hover { background:rgba(255,255,255, 1) !important;}
.loop6a .owl-prev:hover, .loop6a .owl-prev:hover:before, .loop6a .owl-next:hover:before { border-color: #c37b47;}
.loop6a .owl-prev { left:2%; }
.loop6a .owl-next { right:2%;}
.loop6a .owl-prev:before, .loop6a .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 1;transition: all 0.4s ease-out 0s;width: 20px; height: 20px; background-size: contain; display: block; border-width: 2px 2px 0 0; border-style: solid; border-color: #fff; position: absolute; top:21px;}
/*.loop6a .owl-prev:after, .loop6a .owl-next:after { content: ""; width: 18px; height: 1px; position: absolute; background: #fff;}*/
.loop6a .owl-prev:before { content: ""; transform: rotate(-135deg); left: 25px !important; }
.loop6a .owl-next:before { content: ""; transform: rotate(45deg); right: 25px !important;}
.loop6a .owl-prev:after { left: 14px !important; }
.loop6a .owl-next:after { right: 14px !important;}
.loop6a .owl-prev:hover:before, .loop6a .owl-next:hover:before { opacity: 1;}
.loop6a .owl-stage-outer {z-index: 2;}
.loop6a .owl-dots { position: absolute; z-index: 100; bottom: -40px; width: auto; left: 50%; transform: translateX(-50%);text-align: center !important; padding: 0 0px; margin: 0 !important; }
.loop6a .owl-dots .owl-dot span, .loop6a  .owl-dots .owl-dot span { background: #d2d2d2 !important; width: 12px !important; height: 12px !important; border-radius: 100%; }
.loop6a .owl-dots .owl-dot.active span, .loop6a  .owl-dots .owl-dot:hover span { background: #362e2b !important; }

.idx-recommend-1 { margin-bottom: calc(20px + 1%); display:block;}
.idx-recommend-1:hover .idx-hot-1-pto img { transform: scale(0.9);}
.idx-recommend-1:hover .idx-hot-1-pto-box { border: 1px solid #d69784;box-shadow: 0px 0px 20px 0px rgba(0,0,0,0.2);}

.loop6b { margin-bottom: calc(20px + 4%); padding-left: 25px; padding-right: 25px;}
.loop6b .owl-item {position: relative; }
.loop6b .owl-nav { position: absolute; top:calc(50% - 26px); transform: translate(-50%, -50%); left: 50%; width: 100%; z-index: 11;}
.loop6b .owl-prev, .loop6b .owl-next { position:absolute; z-index:100; top:0;  background:rgba(255,255,255,1) !important; width: 26px; height: 26px; border: 1px solid #362e2b !important; border-radius: 100% !important; transition: all 0.4s ease-out 0s; margin: 0 !important;}
.loop6b .owl-prev:hover, .loop6b .owl-next:hover { transform: scale(0.8);}
.loop6b .owl-prev:hover, .loop6b .owl-prev:hover:before, .loop6b .owl-next:hover:before { }
.loop6b .owl-prev { left:0px; }
.loop6b .owl-next { right:0px;}
.loop6b .owl-prev:before, .loop6b .owl-next:before { font-family: 'Font Awesome 5 Free';font-weight: 900 !important;font-size:70px; color: #fff; opacity: 1;transition: all 0.4s ease-out 0s;width:8px; height: 8px; background-size: contain; display: block; border-width: 1px 1px 0 0; border-style: solid; border-color: #666; position: absolute; top:37%; left: 50%; transform: translate(-50%, -50%);}
/*.loop6b .owl-prev:after, .loop6b .owl-next:after { content: ""; width: 18px; height: 1px; position: absolute; background: #fff;}*/
.loop6b .owl-prev:before { content: ""; transform: rotate(-135deg); margin-left: -2px;}
.loop6b .owl-next:before { content: ""; transform: rotate(45deg);margin-left: -5px;}
.loop6b .owl-prev:after { left: 14px !important; }
.loop6b .owl-next:after { right: 14px !important;}
.loop6b .owl-prev:hover:before, .loop6b .owl-next:hover:before { opacity: 1;}
.loop6b .owl-stage-outer {z-index: 2;}
.loop6b .owl-dots { position: absolute; z-index: 100; bottom: 20px; width: auto; left: 50%; transform: translateX(-50%);text-align: center !important; padding: 0 0px; display: none;}
.loop6b .owl-dots .owl-dot span, .loop6b  .owl-dots .owl-dot span { background: #fff !important; width: 15px !important; height: 15px !important; border-radius: 100%; opacity: 0.5;}
.loop6b .owl-dots .owl-dot.active span, .loop6b  .owl-dots .owl-dot:hover span { opacity: 1; }

.ad-type-3 { padding-bottom: 14px; display: flex; flex-direction: row; flex-wrap: wrap; justify-content: space-between;}
.ad-type-3 > a { display: block; margin-bottom: 12px; width: calc(33.33% - 6px);}

.ad-type-4 { padding-bottom: calc(20px + 4%);}

.idx-2a { padding: 5% ; background: #f5f5f5; margin-bottom: 80px;}
.idx-2a > div{ display: flex;flex-wrap: wrap;}
.idx-2a > div .logo-pic{ width: 50%; padding-right: 5%;}
.idx-2a > div .idx-txt{ width: 50%; }
.idx-2a > div .idx-txt .tit{ font-size: clamp(22px, 2.2vw, 32px); font-weight: 600;margin-bottom: 30px; }
.idx-2a > div .idx-txt .idx-2a-btn { text-align: right; margin: 20px 0 0;}
.idx-2a > div .idx-txt .idx-2a-btn a{ color: #004D1E;font-weight: 600; padding: 5px 25px; background: #efd1c7; border-radius: 20px; }
.idx-2a > div .idx-txt .idx-2a-btn a:hover{ color: #FFF; background: #006837; }

.idx-B-1 {  padding: 5% 0; }
.idx-B-1 > div{ display: flex;flex-wrap: wrap;align-items: center;}
.idx-B-1 > div > div:nth-child(1) {width: 15%;}
.idx-B-1 > div > div:nth-child(2) {width: 35%;padding: 0 30px;}
.idx-B-1 > div > div:nth-child(3) {width: 50%;}
.idx-B-1 > div .idx-txt .tit{ font-size: clamp(22px, 2.2vw, 32px); font-weight: 600; margin-bottom: 30px; color: #006837; }
.idx-B-1 > div .idx-txt .tit span { display: block; font-size: 24px; font-weight: 600; padding-top: 20px; color: #2B558B; }

.idx-B-2{ background: url("/images/theme-c67/index/idx-b2-bg.jpg") top center; background-size: cover;padding: 50px 0 31.5%;margin-bottom: 40px;}
.idx-B-2 .idx-txt { text-align: center; }
.idx-B-2 .idx-txt .tit{ font-size: clamp(22px, 2.2vw, 32px); font-weight: 600; margin-bottom: 30px; color: #006837; }
.idx-B-2 .idx-txt .tit span { display: block; font-size: clamp(16px, 1.5vw, 24px); font-weight: 600; color: #888; letter-spacing: 2px;  }
.idx-B-2 .idx-b2-list {list-style: none; display: flex;flex-wrap: wrap; max-width: 1200px; padding: 30px 16px; margin: 0 auto;}
.idx-B-2 .idx-b2-list li {width: 50%; padding: 0 20px; margin-bottom: 30px; }
.idx-B-2 .idx-b2-list li .tit { font-size:  clamp(18px, 1.5vw, 24px);; font-weight: 600; color: #006837; letter-spacing: 2px; margin-bottom: 20px;}
.idx-B-2 .idx-b2-list li .tit span { display: inline-block; position: relative; letter-spacing: 0px; font-size:  clamp(14px, 1vw, 18px);; font-weight: 600; color: #888; margin-right: 20px;}
.idx-B-2 .idx-b2-list li .tit span::after { content: ""; display: block; position: absolute; width: 30px; height: 2px; top: -3px;left: 0;background: #888; }

.idx-B-3 { border: 2px solid #006837; padding: 40px 5% 40px 15%; position: relative; display: flex;flex-wrap: wrap;}
.idx-B-3::after {content: ""; display: block; background: #f5f5f5; width: 100%; height: 300px; position: absolute;top: -30px;left: 30px; z-index: -1;}
.idx-B-3 .idx-B3-cat{ position: absolute; top: -15%; left: 10%; width: 230px; height: auto;}
.idx-B-3 .idx-txt { color: #006837; padding-left: 26%; width: 70%; }
#content .idx-B-3 > div .idx-txt p{ font-size: clamp(16px, 1.15vw,24px); }
.idx-B-3 .idx-txt .tit{ font-size: clamp(30px, 2.2vw, 48px); font-weight: 600; margin-bottom: 30px; display: flex; align-items: center;}
.idx-B-3 .idx-txt .tit a{ display: inline-block; padding: 5px; color: #FFF; background: #006837; font-size: 16px;border-radius: 20px;margin-left: 20px;}
.idx-B-3 .line-qr{ width: 150px;}



@keyframes circle-animate {
  0% {
    transform: rotate(0);
  }
  100% {
    transform: rotate(180deg);
  }
}

@media only screen and (max-width: 1279px) {
    #content { padding-top: 80px;}
    #content, #content p, p, td, li, label { }
	
	.banner-pc { display: none !important;}
	.banner-mobile { display: block !important;}

	
}
@media only screen and (max-width: 1024px) {
    .idx-B-2{ background: url("/images/theme-c67/index/idx-b2-bg-m.jpg") bottom center; padding: 50px 0 31.5%;}
    .idx-B-2 .idx-b2-list {list-style: none; display: flex;flex-wrap: wrap; max-width: 1200px; padding: 30px 16px; margin: 0 auto;}
    .idx-B-2 .idx-b2-list li {width: 100%; margin-bottom: 30px; padding: 20px; background: rgba(256, 256, 256, .5); }
    
    .idx-B-3 .idx-B3-cat{ top: 0%; left: 0%; width: 150px; }
    .idx-B-3 .idx-txt { padding-left: 16%; width: 70%; }
    .idx-B-3 .line-qr{ padding-left: 30px;}
}

@media only screen and (max-width: 980px) {
	.idx-hot-1 > a { width: 33.33%; }
	.idx-hot-1 > a:last-child { display: none;}
	
	.idx-2a { padding: 40px 20px ; }
    .idx-2a > div .logo-pic{ width: 100%; max-width: 500px; padding-right: 0; margin: 0 auto 50px;}
    .idx-2a > div .idx-txt{ width: 100%; }
    .idx-2a > div .idx-txt .tit{ text-align: center; }
    .idx-2a > div .idx-txt .idx-2a-btn { text-align: center;}
    
    .idx-B-1 {  padding: 40px 0; }
    .idx-B-1 > div > div:nth-child(1) {width: 30%; margin-bottom: 30px;}
    .idx-B-1 > div > div:nth-child(2) {width: 70%;  }
    .idx-B-1 > div > div:nth-child(3) {width: 100%;}

}
@media only screen and (max-width: 768px) {
	.idx-B-3 {justify-content: center;align-items: center; padding: 30px 20px;}
    .idx-B-3::after {height: 100%;}
    .idx-B-3 .idx-B3-cat{  top: auto; left: auto; position: relative; order: 2;}
    .idx-B-3 .idx-txt { order: 1; text-align: center; padding-left: 0; width: 100%; }
    .idx-B-3 .idx-txt .tit{ justify-content: center;}
    .idx-B-3 .line-qr{ order: 3;}
}
@media only screen and (max-width: 640px) {
	.idx-hot-1 > a { width: 50%; }
	.idx-hot-1 > a:last-child { display: block;}
	

}
@media only screen and (max-width: 570px) {
	.loop .owl-nav { top:35%;}
	.loop .owl-prev, .loop .owl-next { transform: scale(0.65);}
	
	.loop3 .owl-dots { bottom: -10px;}
	
	.ad-type-3 > a { width: 100%;}
	.ad-type-3 > a img { width: 100%;}
    
    .idx-2a { margin-bottom: 50px; }
}

@media only screen and (max-width: 414px) {
	.category-type-2-pto img {  max-width: 60px;}
    .idx-B-1 > div > div:nth-child(1) { display: none;}
    .idx-B-1 > div > div:nth-child(2) {width: 100%; padding: 0;  }
    .idx-B-2 .idx-b2-list li .tit span { display: block; margin-bottom: 8px; }
    .idx-B-3 .idx-txt .tit { flex-direction: column;}
    .idx-B-3 .idx-txt .tit a{  margin: 20px 0 0;}
    .idx-B-3 .line-qr{ order: 2;}
    .idx-B-3 .idx-B3-cat{ order: 3;}
}

@media only screen and (max-width: 320px) {
	.idx-hot-1 > a { width: 100%; }
	
	.category-type-2-pto img {  max-width: 40px;}
	
}