@charset "UTF-8"; .mainArea.ins .wrap .roomList li .item .roomLeftBox, .mainArea.ins .wrap .roomList li .item .roomRightBox .Txt h3 a { -webkit-transition: all .5s; -o-transition: all .5s; transition: all .5s; } .classNote { padding-bottom: 10px; font-size: 15px; color: #222; text-align: center; line-height: 1.8; } ul.roomList li { padding: 0 15px 30px 15px; } ul.roomList li .Img { position: relative; overflow: hidden; } ul.roomList li .Img img { display: block; width: 100%; } ul.roomList li .Txt { background: #FFF; } ul.roomList li .Txt h3 { color: #4d7ead; } ul.roomList li .Txt h3 strong { font-weight: normal; } ul.roomList li .Txt h3 strong a { display: block; width: 100%; white-space: nowrap; font-size: 20px; color: #333; } /******內頁******/ .contentBox .leftBox .Img img { width: 100%; } .contentBox .leftBox h3 { margin: 10px 0 20px 0; border: none; } .contentBox .rightBox .link { margin-bottom: 40px; } .contentBox .rightBox .link a { display: inline-block; padding: 10px 15px; font-size: 16px; color: #FFF; -webkit-box-shadow: 2px 2px 2px #CCC; box-shadow: 2px 2px 2px #CCC; border-radius: 3px; text-align: center; -webkit-transition: none; -o-transition: none; transition: none; } .classBox { padding: 20px 0 60px; } .mainArea.ins .wrap { max-width: none; padding: 0; } .mainArea.ins .wrap .roomList li { padding: 0 0 140px; } .mainArea.ins .wrap .roomList li .item { display: -webkit-box; display: -ms-flexbox; display: flex; } .mainArea.ins .wrap .roomList li .item .roomLeftBox { width: 60%; max-width: 1150px; } .mainArea.ins .wrap .roomList li .item .roomLeftBox:hover { opacity: .7; } .mainArea.ins .wrap .roomList li .item .roomRightBox { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 70px; } .mainArea.ins .wrap .roomList li .item .roomRightBox .Txt { max-width: 340px; padding: 0; } .mainArea.ins .wrap .roomList li .item .roomRightBox .Txt:hover:hover h3 a { padding-left: 5px; color: #C0985D; } .mainArea.ins .wrap .roomList li .item .roomRightBox .Txt h3 a { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; margin-bottom: 30px; font-size: 26px; font-weight: 300; letter-spacing: 2.6px; color: #111; } .mainArea.ins .wrap .roomList li .item .roomRightBox .Txt h3 a span { padding-left: 5px; padding-top: 6px; font-size: 15px; font-weight: 300; letter-spacing: 1.5px; color: #C0985D; } .mainArea.ins .wrap .roomList li .item .roomRightBox .Txt p.ellipsis { font-size: 15px; font-weight: 300; letter-spacing: .75px; line-height: 28px; color: #444; } .mainArea.ins .wrap .roomList li:nth-of-type(2n+0) .item { -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-flow: row-reverse; flex-flow: row-reverse; } .mainArea.ins .wrap .roomList li:nth-of-type(2n+0) .item .roomRightBox { padding-left: 0; padding-right: 70px; } @media (max-width: 1366px) { .mainArea.ins .wrap .roomList li { padding-bottom: 70px; } } @media (max-width: 1180px) { .classBox { padding: 40px 0; } .mainArea.ins .wrap .roomList li .item .roomRightBox { padding-right: 20px; } .mainArea.ins .wrap .roomList li:nth-of-type(2n+0) .item .roomRightBox { padding-left: 20px; } ul.roomList li .Txt h3 strong a { display: inline-block; } ul.roomList li .Txt h3 strong a span { white-space: initial; } } @media (max-width: 860px) { .mainArea.ins .wrap .roomList li .item .roomRightBox { padding-left: 30px; padding-right: 20px; } .mainArea.ins .wrap .roomList li:nth-of-type(2n+0) .item .roomRightBox { padding-left: 20px; } } @media (max-width: 767px) { .mainArea.ins .wrap .roomList li { padding-bottom: 30px; } .mainArea.ins .wrap .roomList li .item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } .mainArea.ins .wrap .roomList li .item .roomLeftBox { margin-bottom: 30px; } .mainArea.ins .wrap .roomList li .item .roomRightBox { padding: 0 20px; } .mainArea.ins .wrap .roomList li:nth-of-type(2n+0) .item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-flow: column; flex-flow: column; } .mainArea.ins .wrap .roomList li:nth-of-type(2n+0) .item .roomRightBox { padding: 0 20px; } } @media (max-width: 640px) { .mainArea.ins .wrap .roomList li .item .roomLeftBox { width: 80%; } } @media (max-width: 480px) { .mainArea.ins .wrap .roomList li { padding-bottom: 40px; } .mainArea.ins .wrap .roomList li .item .roomLeftBox { width: 90%; margin-bottom: 40px; } .mainArea.ins .wrap .roomList li .item .roomRightBox .Txt h3 a { font-size: 22px; margin-bottom: 10px; } .mainArea.ins .wrap .roomList li .item .roomRightBox .Txt p.ellipsis { height: 86px; } } .btnMore { display: inline-block; color: #8a8a8a; margin-top: 35px; font-size: 15px; font-weight: 400; letter-spacing: .75px; position: relative; } .btnMore:hover { padding-left: 5px; color: #C0985D; } .btnMore:hover:before { background-color: #C0985D; } .btnMore:before { content: ''; top: 50%; left: 120%; position: absolute; display: block; width: 35px; height: 1px; background-color: #aaa; }