.feature-box { margin: 0 auto; max-width: 1000px; width: 1000px; border: 1px solid #ddd; box-shadow: 0 0 5px #ccc; box-sizing: border-box; margin-top: 20px; margin-bottom: 20px; box-shadow: 0, 0, 5px, #333; } .feature-box * { box-sizing: border-box; } .feature-box input, .feature-box textarea, .feature-box .input, .feature-box .textarea { border: dotted; border-width: 1px; outline: 0; min-width: 20px; background: transparent; padding: 0; margin: 0; /* overflow: hidden !important; */ } .feature-box .input, .feature-box .textarea{ border: none !important; overflow: hidden !important; width:100%; height: 100%; } .feature-box .head-box { max-height: 130px; height: 130px; background: url('http://img.oytour.com/feature/t1/top_bg.png'); position: relative; } .feature-box .head-box .left { width: 246px; height: 1px; display: inline-block; vertical-align: top; } .feature-box .head-box .left .left-img { position: absolute; left: 0; top: 0; width: 246px; height: 180px; z-index: 23; } .feature-box .head-box .middle-content { display: inline-block; margin:16px 0 0 5px; font-family: 'fdbsjw'; vertical-align: top; } .feature-box .head-box .middle-content .h2 { font-size: 36px; color: #FBF0DC; font-family: '方正大标宋简体'; width: 542px; text-align: center; height: 46px !important; } .feature-box .head-box .middle-content .p { width: 542px; margin-top: 5px; padding-top: 5px; border-top: 1px dotted #FBF0DC; height: 60px; } .feature-box .head-box .middle-content .p textarea, .feature-box .head-box .middle-content .p .textarea { font-size: 20px; width: 100%; height: 60px !important; line-height: 24px; color: #FBF0DC; font-family: '方正宋三简体'; text-align: center; } .feature-box .head-box .right-content { display: inline-block; width: 191px; height: 39px; top: 36px; right: 10px; position: absolute; } .feature-box .head-box .right-content img { width: 100%; height: 100%; } .feature-box .head-box .feature-tips { width: 179px; height: 50px; position: absolute; bottom: -10px; right: 0px; z-index: 5; } .feature-box .head-box .feature-tips .content { text-align: center; height: 40px; line-height: 40px; font-size: 34px; color: #FFF; background: #A5851E; font-family: '方正大标宋简体'; } .feature-box .head-box .feature-tips .arr-dwon { height: 10px; text-align: center; } .feature-box .head-box .feature-tips .arr-dwon img { height: 40px; margin-top: -16px; } .feature-box .foot-box { height: 68px; margin-top: 30px; position: relative; background: #FFF; } .feature-box .foot-box .line { left: 0; right: 0; height: 21px; top: 15px; background: url(http://img.oytour.com/feature/t1/line.png); position: absolute; } .feature-box .foot-box .kouhao { top: 24px; left: 64px; color: #666666; font-size: 18px; font-family: '微软雅黑'; position: absolute; letter-spacing: 6px; } .feature-box .foot-box .right-log { top: 0; right: 0; width: 68px; height: 68px; background: url(http://img.oytour.com/feature/t1/bottom_pic.png); position: absolute; } .feature-box .foot-box .line-info { right: 68px; height: 36px; line-height: 36px; background: rgba(230, 230, 230, 1); padding: 0 10px; font-size: 24px; color: #666666; font-family: '微软雅黑'; position: absolute; top: 16px; } .feature-box .body-box { margin: 0 51px 0 41px; position: relative; } .feature-box .body-box::before { width: 28px; height: 100%; position: absolute; left: 1px; top: 0; display: block; content: ' '; background: url(http://img.oytour.com/feature/t1/line1.png) } .feature-box .body-box::after { width: 30px; height: 100%; position: absolute; right: 1px; top: 0; display: block; content: ' '; background: url(http://img.oytour.com/feature/t1/line1.png) } .feature-box .body-box .vdr{ position: absolute; } .feature-box .body-box .hotel-first-box { margin-top: 29px; width: 880px; height: 460px; padding: 10px; margin-left: 27px; background: #fff; z-index: 1; position: relative; border: 1px solid rgba(183, 170, 127, 1); } .feature-box .body-box .hotel-first-box .img-box { width: 860px; height: 320px; position: relative; overflow: hidden; } .feature-box .body-box .img-box { display: none; overflow: hidden; background: #ddd; } .feature-box .body-box .img-box .vdr { cursor: move; } /* .feature-box .body-box .img-box .tool-ze{ z-index: 3; position: absolute; top: 0; right: 0; left: 0; bottom: 0; background: rgba(0,0,0,.3); } */ .feature-box .body-box .hotel-first-box .img-box { display: block; } .feature-box .body-box .hotel-first-box .img-box img { width: 860px; min-height: 320px; } .feature-box .body-box .type { width: 88px; height: 88px; top: 0; right: 0; position: absolute; background: url(http://img.oytour.com/feature/t1/tag_bg1.png); z-index: 2; display: none; } .feature-box .body-box .type span { transform: rotate(45deg); top: 14px; right: 1px; text-align: center; letter-spacing: 2px; font-size: 24px; color: #FFF; position: absolute; } .feature-box .body-box .remark { left: -41px; top: 227px; width: 126px; height: 126px; position: absolute; background: url(http://img.oytour.com/feature/t1/title_bg.png); padding: 23px 41px 41px 29px; line-height: 31px; font-size: 28px; color: #000; font-family: '方正大标宋简体'; z-index: -1; } .feature-box .body-box .hotel-first-box .remark { z-index: 3; } .feature-box .body-box .hotel-first-box .hotelInfo { margin-top: 10px; } .feature-box .body-box .hotel-first-box .hotelInfo .name-box { display: inline-block; vertical-align: top; margin-left: -20px; max-width: 326px; } .feature-box .body-box .name-box .name { width: auto; padding-right: 40px; background: #9C0003 url(http://img.oytour.com/feature/t1/title2-bg.png) no-repeat right 0; height: 47px; /* display: inline-block; */ } .feature-box .body-box .name-box .name input, .feature-box .body-box .name-box .name .input { height: 47px; line-height: 47px; font-size: 28px; color: #FFF; margin-left: 10px; font-family: '方正大标宋简体'; } .feature-box .body-box .hotel-first-box .hotelInfo .name-box .cityName { width: auto; padding-right: 30px; background: #A5851E url(http://img.oytour.com/feature/t1/bg_title.png) no-repeat right 0; height: 35px; margin-top: 4px; display: inline-block; } .feature-box .body-box .name-box .cityName input, .feature-box .body-box .name-box .cityName .input { height: 36px; line-height: 36px; font-size: 24px; color: #FFF; margin-left: 10px; font-family: '方正大标宋简体'; } .feature-box .body-box .star-box { width: 26px; height: 27px; background: url(http://img.oytour.com/feature/t1/stone2.png); vertical-align: top; display: inline-block; margin: 26px 19px 0 17px; } .feature-box .body-box .hotel-first-box .hotelInfo .txt-content { width: 481px; vertical-align: top; display: inline-block; /* height: 110px; */ height: 106px; font-size:15px; word-break: break-all; } .feature-box .body-box .txt-content textarea { height: 100%; width: 100%; color: #333333; font-size: 15px; /* line-height: 20px; */ overflow: auto; font-family: '微软雅黑'; } .feature-box .body-box .hotel-second-box { width: 852px; margin: 0px 28px 0 27px; background: #fff; padding-top: 58px; height: 308px; position: relative; } .feature-box .body-box .hotel-second-box::before { content: ' '; display: block; position: absolute; top: 0px; background: #fff; right: -28px; height: 29px; width: 33px; z-index: 1; } .feature-box .body-box .hotel-second-box .hotelInfo { width: 432px; height: 250px; background: rgba(255, 251, 240, 1); border: 1px solid rgba(183, 170, 127, 1); padding-top: 97px; padding-left: 22px; } .feature-box .body-box .hotel-second-box .hotelInfo .txt-content { width: 240px; height: 146px; font-size:15px; } .feature-box .body-box .hotel-second-box .name-box { top: 87px; left: 0px; position: absolute; height: 48px; z-index: 5; width: 507px; } .feature-box .body-box .hotel-second-box .name-box .name { width: auto; background: #9C0003; position: absolute; top: 0; left: 170px; z-index: 1; padding-right: 0px; } .feature-box .body-box .name-box .name .right-bg { height: 47px; right: -40px; top: 0; width: 40px; position: absolute; background: url(http://img.oytour.com/feature/t1/title2-bg1.png) no-repeat; } .feature-box .body-box .name-box .cityName { width: auto; background: #A5851E; height: 36px; } .feature-box .body-box .hotel-second-box .name-box .cityName { position: absolute; top: 6px; right: 327px; z-index: 2; padding-right: 10px; } .feature-box .body-box .name-box .cityName .left-bg { width: 20px; height: 36px; left: -19px; top: 0px; position: absolute; background: url(http://img.oytour.com/feature/t1/bg_title_2_2.png) no-repeat; } .feature-box .body-box .hotel-second-box .remark { z-index: 3; top: -21px; left: 118px; } .feature-box .body-box .hotel-second-box .img-box { width: 581px; height: 279px; right: 0px; bottom: 0px; display: block; position: absolute; overflow: hidden; border: 1px solid #A5851E; border-left: none; } .feature-box .body-box .r { padding: 3px 5px; background: #000; color: gray; position: absolute; font-size: 12px; top: -20px; left: 0px; display: block; } .feature-box .body-box .hotel-second-box .img-box .ze { width: 161px; height: 279px; background: url(http://img.oytour.com/feature/t1/pic_bg_04_2.png) no-repeat; position: absolute; z-index: 4; top: -1px; } .feature-box .body-box .hotel-second-box .img-box img { width: 581px; min-height: 279px; } .feature-box .body-box .hotel-three-box { margin: 0 30px 0 0; padding-top: 30px; width: 876px; height: 270px; box-sizing: content-box; background: #fff; position: relative; z-index: 2; } .feature-box .body-box .hotel-three-box .name-box { top: 84px; right: -25px; position: absolute; height: 48px; z-index: 5; width: 507px; } .feature-box .body-box .hotel-three-box .name-box .name { width: auto; background: #9C0003; position: absolute; top: 0; left: 188px; z-index: 1; padding-right: 0px; } .feature-box .body-box .hotel-three-box .name-box .cityName { position: absolute; top: 6px; right: 310px; z-index: 2; padding-right: 10px; } .feature-box .body-box .hotel-three-box .img-box { display: inline-block; width: 628px; height: 268px; outline: 1px solid #A5851E; position: relative; box-sizing: content-box; display: inline-block; vertical-align: top; } /* .feature-box .body-box .hotel-three-box .img-box .vdr{ margin-top: 1px !important; } */ .feature-box .body-box .hotel-three-box .img-box img { width: 630px; min-height: 268px; } .feature-box .body-box .hotel-three-box .img-box .type { transform: rotate(270deg); left: 0; right: auto; top: 0; } .feature-box .body-box .hotel-three-box .hotelInfo { display: inline-block; vertical-align: top; margin: 109px 5px 0 5px; } .feature-box .body-box .hotel-three-box .txt-content { width: 232px; height: 147px; font-size:15px; } .feature-box .body-box .hotel-three-box .remark { z-index: 3; top: -24px; left: 528px; } .feature-box .body-box .spot-first-box { margin: 0 0 0 15px; padding-top: 49px; width: 890px; background: #FFF; position: relative; z-index: 1; box-sizing: content-box; } .feature-box .body-box .spot-first-box .img-box { display: inline-block; vertical-align: top; width: 630px; height: 330px; outline: 1px solid #A5851E; position: relative; box-sizing: content-box; } .feature-box .body-box .spot-first-box .img-box img { width: 630px; min-height: 330px; } .feature-box .body-box .spot-first-box .img-box .type { left: 0; right: auto; transform: rotate(270deg); } .feature-box .body-box .spot-first-box .remark { z-index: 3; top: 25px; left: 504px; background: url(http://img.oytour.com/feature/t1/title_bg2.png); position: absolute; } .feature-box .body-box .spot-first-box .name-box { top: 25px; right: -42px; position: absolute; height: 48px; z-index: 5; width: 507px; } .feature-box .body-box .spot-first-box .name-box .name { width: auto; background: #9C0003; position: absolute; top: 30px; right: 40px; z-index: 1; padding-right: 0px; } .feature-box .body-box .spot-first-box .name-box .cityName { position: absolute; top: 0px; right: 50px; z-index: 2; padding-right: 10px; } .feature-box .body-box .spot-first-box .hotelInfo { margin: 25px 0 0 15px; display: inline-block; vertical-align: top; } .feature-box .body-box .spot-first-box .hotelInfo .star-box { margin: 0px; margin-left: 10px; } .feature-box .body-box .spot-first-box .hotelInfo .txt-content { width: 239px; height: 259px; margin-top: 10px; font-size:15px; word-break: break-all; } .feature-box .body-box .spot-two-box { margin: 0 0 0 28px; padding-top: 40px; width: 880px; background: #FFF; position: relative; z-index: 2; box-sizing: content-box; } .feature-box .body-box .spot-two-box .img-box { display: inline-block; vertical-align: top; width: 629px; height: 329px; outline: 1px solid #A5851E; position: relative; box-sizing: content-box; } .feature-box .body-box .spot-two-box .img-box img { width: 630px; min-height: 329px; } .feature-box .body-box .spot-two-box .img-box .type { left: 0; right: auto; transform: rotate(270deg); } .feature-box .body-box .spot-two-box .remark { z-index: 3; top: -2px; right: -29px; background: url(http://img.oytour.com/feature/t1/title_bg_2_2.png); position: absolute; left: auto; padding: 23px 29px 41px 41px; } .feature-box .body-box .spot-two-box .name-box { top: 40px; left: 0px; position: absolute; height: 48px; z-index: 5; width: 507px; } .feature-box .body-box .spot-two-box .name-box .name { width: auto; background: #9C0003; position: absolute; top: 30px; left: 0px; z-index: 1; padding-right: 0px; } .feature-box .body-box .spot-two-box .name-box .cityName { position: absolute; top: 0px; left: -10px; z-index: 2; padding-right: 10px; } .feature-box .body-box .spot-two-box .hotelInfo { display: inline-block; vertical-align: top; margin-top: 39px; } .feature-box .body-box .spot-two-box .hotelInfo .star-box { margin: 0px; margin-left: 160px; } .feature-box .body-box .spot-two-box .hotelInfo .txt-content { width: 244px; height: 245px; margin-top: 10px; padding: 15px; font-size:15px; word-break: break-all; } .feature-box .body-box .spot-three-box { margin: 0 0 0 28px; padding-top: 49px; width: 877px; background: #FFF; position: relative; z-index: 1; box-sizing: content-box; } .feature-box .body-box .spot-three-box .img-box { display: inline-block; vertical-align: top; width: 617px; height: 330px; outline: 1px solid #A5851E; position: relative; box-sizing: content-box; } .feature-box .body-box .spot-three-box .img-box img { width: 617px; min-height: 330px; } .feature-box .body-box .spot-three-box .img-box .type { left: 0; right: auto; transform: rotate(270deg); } .feature-box .body-box .spot-three-box .remark { z-index: 3; top: 25px; left: 504px; background: url(http://img.oytour.com/feature/t1/title_bg2.png); position: absolute; } .feature-box .body-box .spot-three-box .name-box { top: 25px; right: -42px; position: absolute; height: 48px; z-index: 5; width: 507px; } .feature-box .body-box .spot-three-box .name-box .name { width: auto; background: #9C0003; position: absolute; top: 30px; right: 40px; z-index: 1; padding-right: 0px; } .feature-box .body-box .spot-three-box .name-box .cityName { position: absolute; top: 0px; right: 50px; z-index: 2; padding-right: 10px; } .feature-box .body-box .spot-three-box .hotelInfo { margin: 25px 0 0 15px; display: inline-block; vertical-align: top; } .feature-box .body-box .spot-three-box .hotelInfo .star-box { margin: 0px; margin-left: 10px; background: url(http://img.oytour.com/feature/t1/stone2_2.png) } .feature-box .body-box .spot-three-box .hotelInfo .txt-content { width: 239px; height: 260px; font-size:15px; margin-top: 10px; word-break: break-all; } .feature-box .body-box .meal-first-box { padding: 30px 10px 0 18px; background: #FFF; position: relative; z-index: 1; box-sizing: content-box; } .feature-box .body-box .meal-first-box .img-box { display: inline-block; vertical-align: top; width: 880px; height: 390px; outline: 1px solid rgba(183, 170, 127, 1); outline: 1px solid #A5851E; position: relative; } .feature-box .body-box .meal-first-box .img-box .img-parent { width: 860px; height: 370px; top: 10px; left: 10px; position: absolute; overflow: hidden; } .feature-box .body-box .meal-first-box .img-box .img-parent img { width: 860px; min-height: 480px; } .feature-box .body-box .meal-first-box .img-box .type { top: 10px; right: 10px; } .feature-box .body-box .meal-first-box .remark { z-index: 3; top: 321px; left: 97px; background: url(http://img.oytour.com/feature/t1/title_bg2.png); position: absolute; } .feature-box .body-box .meal-first-box .name-box { top: 429px; left: 20px; right: auto; position: absolute; height: 48px; z-index: 5; right: 0; } .feature-box .body-box .meal-first-box .name-box .name { width: auto; background: #9C0003; position: absolute; top: 0; left: 149px; z-index: 1; padding-right: 0px; } .feature-box .body-box .meal-first-box .name-box .cityName { position: absolute; top: 6px; right: 728px; z-index: 2; padding-right: 10px; } .feature-box .body-box .meal-first-box .hotelInfo { margin: 69px 0 0 0; display: block; } .feature-box .body-box .meal-first-box .hotelInfo .star-box { top: 449px; left: 529px; margin: 0px; position: absolute; background: url(http://img.oytour.com/feature/t1/stone2.png) } .feature-box .body-box .meal-first-box .hotelInfo .txt-content { display: block; height: 82px; } .feature-box .body-box .meal-second-box { padding: 32px 10px 0 18px; width: 880px; background: #FFF; position: relative; z-index: 1; box-sizing: content-box; } .feature-box .body-box .meal-second-box .img-box { display: inline-block; vertical-align: top; width: 630px; height: 320px; outline: 1px solid #A5851E; position: relative; box-sizing: content-box; } .feature-box .body-box .meal-second-box .img-box img { width: 630px; min-height: 320px; } .feature-box .body-box .meal-second-box .img-box .type { left: 0; right: auto; transform: rotate(270deg); } .feature-box .body-box .meal-second-box .remark { z-index: 3; top: 30px; right: 33px; background: url(http://img.oytour.com/feature/t1/title_bg_2_2.png); position: absolute; left: auto; padding: 23px 29px 41px 41px; } .feature-box .body-box .meal-second-box .name-box { top: 75px; right: 77px; position: absolute; height: 48px; z-index: 5; width: 326px; } .feature-box .body-box .meal-second-box .name-box .name { width: auto; background: #9C0003; position: absolute; top: 46px; right: 40px; z-index: 1; padding-right: 10px; padding-left: 0px; } .feature-box .body-box .meal-second-box .name-box .name .left-bg { height: 47px; left: -40px; top: 0; width: 40px; position: absolute; background: url(http://img.oytour.com/feature/t1/title2-bg-2-2.png) } .feature-box .body-box .meal-second-box .name-box .cityName { position: absolute; top: 0px; right: 121px; z-index: 2; padding-right: 10px; } .feature-box .body-box .meal-second-box .hotelInfo { margin: 25px 0 0 15px; display: inline-block; vertical-align: top; } .feature-box .body-box .meal-second-box .hotelInfo .star-box { margin: 0px; top: 58px; right: 156px; left: auto; position: absolute; background: url(http://img.oytour.com/feature/t1/stone2_2.png) } .feature-box .body-box .meal-second-box .hotelInfo .txt-content { width: 229px; height: 167px; margin-top: 126px; } .feature-box .body-box .ts { position: relative; } .feature-box .body-box.read-only .tools { display: none; } .feature-box .body-box .ts .tools { width: 30px; background: #000; position: absolute; top: 32px; right: -83px; } .feature-box .body-box .ts .tools i { font-size: 20px; display: block; text-align: center; color: #eee; cursor: pointer; } .feature-box .body-box .ts .tools i:hover { background: #333; } .common-scenic-qie { position: absolute; top: 45%; width: 40px; z-index:999; display: none; cursor: pointer; background-color: gray; color:#fff; font-size: 18px; height: 40px; text-align: center; line-height: 40px; border-radius: 50%; } .ts :hover .common-scenic-qie{ display: block; } .scenic-leftqie{left:20px;} .scenic-leftqieSecond{left:160px;} .scenic-rightqie{right:35px;}