.wrapper-scroll { -webkit-overflow-scrolling: touch; overflow-scrolling: touch; overflow: auto; position: absolute; top: 0; bottom: 0; left: 0px; right: 0; } .communitycontent { width: 5000px; width: -moz-max-content; width: -webkit-max-content; width: -o-max-content; width: -ms-max-content; width: max-content; height:100%; } .wrapper-scroll2 { display:none; -webkit-overflow-scrolling: touch; overflow-scrolling: touch; overflow: auto; position: absolute; top: 100%; bottom: -100%; left: 0px; right: 0; } .communitycontent2 { width: 5000px; width: -moz-max-content; width: -webkit-max-content; width: -o-max-content; width: -ms-max-content; width: max-content; height:100%; } /***** * @Miscellaneous *****/ /***** CSS3 SCROLL BAR Styles *****/ ::-webkit-scrollbar { width: 6px;background:transparent;} /* Track */ ::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.2);border-radius:3px;} /* Handle */ ::-webkit-scrollbar-thumb { background: #f79521;background:transparent; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); border-radius: 3px;} @media screen and (max-width: 600px) { .section_detail .innerpagecontent{height:calc(100% - 80px);margin-top:0px;} .section_detail .innerpagecontent .leftareacontent{width:100%;height:50%;} .section_detail .innerpagecontent .leftareacontent .showtitlearea{width:calc(100% - 20px);padding:17px 10px 17px 10px;border-bottom:1px solid #D52D27;font-size:16px;line-height:24px;} .section_detail .innerpagecontent .leftareacontent .showsummaryarea_1{width:calc(100% - 20px);padding:10px 10px 0px 10px;height:calc(100% - 10px - 85px);} .section_detail .innerpagecontent .leftareacontent .showsummaryarea_2{width:calc(100% - 20px);padding:10px 10px 0px 10px;height:calc(100% - 10px - 59px);} .section_detail .innerpagecontent .leftareacontent .showsummaryarea_3{width:calc(100% - 20px);padding:10px 10px 0px 10px;height:calc(100% - 10px - 59px);} .section_detail .innerpagecontent .leftareacontent .showtitlelist .showviewwebsite .viewicon{margin-top:6px;margin-left:10px;} } @media screen and (min-width: 600px) and (max-width: 1100px){ .section_detail .innerpagecontent{height:calc(100% - 1px - 80px);margin-top:0px;border-top:1px solid #D52D27;} .section_detail .innerpagecontent .leftareacontent{width:64%;height:100%;} .section_detail .innerpagecontent .leftareacontent .showtitlearea{width:calc(100% - 30px - 1px - 60px);margin-left:30px;padding:17px 30px 17px 30px;border-left:1px solid #D52D27;border-bottom:1px solid #D52D27;font-size:40px;line-height:70px;} .section_detail .innerpagecontent .leftareacontent .showsummaryarea_1{width:calc(100% - 30px - 1px - 60px);margin-left:30px;padding:30px 30px 0px 30px;border-left:1px solid #D52D27;height:calc(100% - 30px - 105px);} .section_detail .innerpagecontent .leftareacontent .showsummaryarea_2{width:calc(100% - 30px - 1px - 60px);margin-left:30px;padding:30px 30px 0px 30px;border-left:1px solid #D52D27;height:calc(100% - 30px - 105px);} .section_detail .innerpagecontent .leftareacontent .showsummaryarea_3{width:calc(100% - 30px - 1px - 60px);margin-left:30px;padding:30px 30px 0px 30px;border-left:1px solid #D52D27;height:calc(100% - 30px - 105px);} .section_detail .innerpagecontent .leftareacontent .showtitlelist .showviewwebsite .viewicon{margin-top:29px;margin-left:15px;} } @media screen and (min-width: 1100px){ .section_detail .innerpagecontent{height:calc(100% - 1px - 82px - 80px);margin-top:82px;border-top:1px solid #D52D27;} .section_detail .innerpagecontent .leftareacontent{width:64%;height:100%;} .section_detail .innerpagecontent .leftareacontent .showtitlearea{width:calc(100% - 30px - 1px - 60px);margin-left:30px;padding:17px 30px 17px 30px;border-left:1px solid #D52D27;border-bottom:1px solid #D52D27;font-size:40px;line-height:70px;} .section_detail .innerpagecontent .leftareacontent .showsummaryarea_1{width:calc(100% - 30px - 1px - 60px);margin-left:30px;padding:30px 30px 0px 30px;border-left:1px solid #D52D27;height:calc(100% - 30px - 105px);} .section_detail .innerpagecontent .leftareacontent .showsummaryarea_2{width:calc(100% - 30px - 1px - 60px);margin-left:30px;padding:30px 30px 0px 30px;border-left:1px solid #D52D27;height:calc(100% - 30px - 105px);} .section_detail .innerpagecontent .leftareacontent .showsummaryarea_3{width:calc(100% - 30px - 1px - 60px);margin-left:30px;padding:30px 30px 0px 30px;border-left:1px solid #D52D27;height:calc(100% - 30px - 105px);} .section_detail .innerpagecontent .leftareacontent .showtitlelist .showviewwebsite .viewicon{margin-top:29px;margin-left:15px;} } .section_detail{position:relative;float:left;width:100%;left: 0;top:0;height:100%;} .section_detail .innerpagecontent{float:left;width:100%;} .section_detail .innerpagecontent .leftareacontent{float:left;} .section_detail .innerpagecontent .leftareacontent .showtitlearea{float:left;font-weight:700px;color:#D52D27;} .section_detail .innerpagecontent .leftareacontent .showtitlelist{float:left;width:100%;} .section_detail .innerpagecontent .leftareacontent .showtitlelist .showtitle{float:left;} .section_detail .innerpagecontent .leftareacontent .showtitlelist .showviewwebsite{float:right;margin-right:8px;} .section_detail .innerpagecontent .leftareacontent .showtitlelist .showviewwebsite .viewwebsite{float:left;font-size: 16px;font-weight: 700;background: linear-gradient(90.52deg, #FF2E00 8.48%, #271D01 100.65%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-fill-color: transparent;} .section_detail .innerpagecontent .leftareacontent .showtitlelist .showviewwebsite .viewicon{float:left;} .section_detail .innerpagecontent .leftareacontent .showtitlelist .showviewwebsite .viewicon img{height:12px;} .section_detail .innerpagecontent .leftareacontent .showsummaryarea_1{float:left;overflow-y:auto;} .section_detail .innerpagecontent .leftareacontent .showsummaryarea_2{float:left;overflow-y:auto;} .section_detail .innerpagecontent .leftareacontent .showsummaryarea_3{float:left;overflow-y:auto;} .section_detail .innerpagecontent .leftareacontent .showsummarylist{float:left;width:100%;font-size:16px;line-height:30px;font-weight:400px;} @media screen and (max-width: 600px) { .detailsecondpageshowtitlearea{width:calc(100% - 20px);margin-left:0px;padding:17px 10px 17px 10px;border-bottom:1px solid #D52D27;font-size:16px;line-height:24px;} .detailsecondpageshowtitlearea .showviewwebsite .viewicon{margin-top:6px;margin-left:10px;} .detailsecondpageshowsummaryarea{width:calc(100% - 20px);padding:10px 10px 0px 10px;height:calc(100% - 10px - 85px);} } @media screen and (min-width: 600px) and (max-width: 1100px){ .detailsecondpageshowtitlearea{width:calc(100% - 30px - 1px - 60px);margin-left:30px;padding:17px 30px 17px 30px;border-left:1px solid #D52D27;border-bottom:1px solid #D52D27;font-size:40px;line-height:70px;} .detailsecondpageshowtitlearea .showviewwebsite .viewicon{margin-top:29px;margin-left:15px;} .detailsecondpageshowsummaryarea{width:calc(100% - 30px - 1px - 60px);margin-left:30px;padding:30px 30px 0px 30px;border-left:1px solid #D52D27;height:calc(100% - 30px - 105px);} } @media screen and (min-width: 1100px){ .detailsecondpageshowtitlearea{width:calc(100% - 30px - 1px - 60px);margin-left:30px;padding:17px 30px 17px 30px;border-left:1px solid #D52D27;border-bottom:1px solid #D52D27;font-size:40px;line-height:70px;} .detailsecondpageshowtitlearea .showviewwebsite .viewicon{margin-top:29px;margin-left:15px;} .detailsecondpageshowsummaryarea{width:calc(100% - 30px - 1px - 60px);margin-left:30px;padding:30px 30px 0px 30px;border-left:1px solid #D52D27;height:calc(100% - 30px - 105px);} } .detailsecondpageshowtitlearea{float:left;font-weight:700px;color:#215031;} .detailsecondpageshowtitlearea .showtitle{float:left;} .detailsecondpageshowtitlearea .showviewwebsite{float:right;margin-right:8px;} .detailsecondpageshowtitlearea .showviewwebsite .viewwebsite{float:left;font-size: 16px;font-weight: 700;background: linear-gradient(90.52deg, #208F46 8.48%, #271D01 100.65%);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;text-fill-color: transparent;} .detailsecondpageshowtitlearea .showviewwebsite .viewicon{float:left;} .detailsecondpageshowtitlearea .showviewwebsite .viewicon img{height:12px;} .detailsecondpageshowsummaryarea{float:left;overflow-y:auto;} .detailsecondpageshowsummarylist{float:left;width:100%;font-size:16px;line-height:30px;font-weight:400px;} @media screen and (max-width: 600px) { .section_detail .innerpagecontent .rightareacontent{width:100%;height:calc(50% + 1px);margin-top:-1px;} .section_detail .innerpagecontent .rightareacontent .inneractionpage{width:100%;height:100%;} .section_detail .innerpagecontent .rightareacontent .actiontitle .subtitle1_icon{margin-left: 5px;margin-right: 5px;margin-top: 6px;} .section_detail .innerpagecontent .rightareacontent .actiontitle .subtitle2_icon{margin-left: 5px;margin-right: 5px;margin-right: 5px;margin-top: 2px;} .section_detail .innerpagecontent .rightareacontent .actiontitle .subtitle3_icon{margin-left: 5px;margin-top: 5px;} } @media screen and (min-width: 600px) and (max-width: 1100px){ .section_detail .innerpagecontent .rightareacontent{width:36%;height:calc(100% + 1px);margin-top:-1px;} .section_detail .innerpagecontent .rightareacontent .inneractionpage{width:calc(100% - 30px);height:100%;} .section_detail .innerpagecontent .rightareacontent .actiontitle .subtitle1_icon{margin-left: 15px;margin-top: 18px;} .section_detail .innerpagecontent .rightareacontent .actiontitle .subtitle2_icon{margin-left: 15px;margin-top: 18px;} .section_detail .innerpagecontent .rightareacontent .actiontitle .subtitle3_icon{margin-left: 15px;margin-top: 18px;} } @media screen and (min-width: 1100px){ .section_detail .innerpagecontent .rightareacontent{width:36%;height:calc(100% + 1px);margin-top:-1px;} .section_detail .innerpagecontent .rightareacontent .inneractionpage{width:calc(100% - 30px);height:100%;} .section_detail .innerpagecontent .rightareacontent .detailstep2_1{line-height:20px;} .section_detail .innerpagecontent .rightareacontent .detailstep2_2{line-height:20px;} .section_detail .innerpagecontent .rightareacontent .detailstep2_3{line-height:20px;} .section_detail .innerpagecontent .rightareacontent .actiontitle .subtitle1_icon{margin-left: 15px;margin-top: 18px;} .section_detail .innerpagecontent .rightareacontent .actiontitle .subtitle2_icon{margin-left: 15px;margin-top: 18px;} .section_detail .innerpagecontent .rightareacontent .actiontitle .subtitle3_icon{margin-left: 15px;margin-top: 18px;} } .section_detail .innerpagecontent .rightareacontent{float:left;overflow:hidden;} .section_detail .innerpagecontent .rightareacontent .inneractionpage{float:left;} .section_detail .innerpagecontent .rightareacontent .detailstep2_1{cursor:pointer;float:left;width:100%;height:calc(100% - 100px - 2px);color:white;text-align:center;background:url(./images/museumofcontemporaryart_01.jpg) center center / cover no-repeat;} .section_detail .innerpagecontent .rightareacontent .detailstep2_2{cursor:pointer;float:left;width:100%;height:50px;border-top:1px solid gray;color:white;text-align:center;background:url(./images/museum_craft_01.jpg) center center / cover no-repeat;} .section_detail .innerpagecontent .rightareacontent .detailstep2_3{cursor:pointer;float:left;width:100%;height:50px;border-top:1px solid gray;color:white;text-align:center;background:url(./images/sample_108.jpg) center center / cover no-repeat;} .section_detail .innerpagecontent .rightareacontent .actiontitle{float:left;width:100%;height:100%;background-color:rgba(0,0,0,0.5);} .section_detail .innerpagecontent .rightareacontent .actiontitle .subinnerbox{display: flex;flex-direction: row;justify-content: center;align-items: center;float:left;width:100%;height:100%;} .section_detail .innerpagecontent .rightareacontent .actiontitle .subtitlenormal_text{float:left;} .section_detail .innerpagecontent .rightareacontent .actiontitle .subtitle1_icon{float: left;} .section_detail .innerpagecontent .rightareacontent .actiontitle .subtitle2_icon{float: left;} .section_detail .innerpagecontent .rightareacontent .actiontitle .subtitle3_icon{float: left;} .section_detail .innerpagecontent .rightareacontent .detailpagetwo_1{float:left;width:100%;height:100%;background:url(./images/museum_pantianshoumemorial_1.jpg) center center / cover no-repeat;} @media screen and (max-width: 600px) { .footerareabackcontent{height:79px;border-top:1px solid #D52D27;} .footerareabackcontent .innerbacksubarea{font-size: 16px;line-height: 20px;margin-top:18px;} .footerareabackcontent .innerbacksubarea .backtext{margin-left:10px;margin-bottom:10px;} } @media screen and (min-width: 600px) and (max-width: 1100px){ .footerareabackcontent{height:79px;border-top:1px solid #D52D27;} .footerareabackcontent .innerbacksubarea{font-size: 20px;line-height: 23px;margin-top:28px;} .footerareabackcontent .innerbacksubarea .backtext{margin-left:20px;} } @media screen and (min-width: 1100px){ .footerareabackcontent{height:79px;border-top:1px solid #D52D27;} .footerareabackcontent .innerbacksubarea{font-size: 20px;line-height: 23px;margin-top:28px;} .footerareabackcontent .innerbacksubarea .backtext{margin-left:29px;} } .footerareabackcontent{float:left;width:100%;height:79px;border-top:1px solid #D52D27;} .footerareabackcontent .innerbacksubarea{display:flex;justify-content:center;float:left;width:100%;font-weight: 400;color: black;} .footerareabackcontent .floatleft{cursor:pointer;float:left;} .footerareabackcontent .innerbacksubarea .backicon{float:left;width:21px;} .footerareabackcontent .innerbacksubarea .backicon img{float:left;width:21px;height:21px;margin-top:1px;} .footerareabackcontent .innerbacksubarea .backtext{float:left;}