.image01 { background:url(../images/header/01.jpg); } .image02 { background:url(../images/header/02.jpg); } .image03 { background:url(../images/header/03.jpg); } @media (prefers-color-scheme: dark) { .image03 { background:url(../images/header/03d.jpg); } } .image04 { background:url(../images/header/04.jpg); } .image05 { background:url(../images/header/05.jpg); background-position:right !important; } .image06 { background:url(../images/header/06.jpg); } .image07 { background:url(../images/header/07.jpg); } .image08 { background:url(../images/header/08.jpg); } .image09 { background:url(../images/header/09.jpg); } .image10 { background:url(../images/header/10.jpg); } #layout { text-align: center; background:; font-size:5.2rem; line-height:100px;} #layout ul { display:none;} @media screen and (max-width: 1200px) { #layout { line-height:120px;} } @media screen and (max-width: 550px) { #layout { line-height:110px; font-size:4.2rem; }} @media screen and (max-width: 380px) { #layout { font-size:4rem; }} @media screen and (max-width: 390px) { #layout { font-size:3.8rem; }} @media screen and (max-width: 374px) { #layout { line-height:40px; top:12px; }} @media screen and (max-width: 414px) { } #image { height:calc(100vh - 100px - 50px); box-shadow: 0 0 10px 4px rgba(136,136,136,0.50), inset 0px 1px 1px rgba(136,136,136,0.50);} @media screen and (max-width: 1200px) { #image { height:calc(100vh - 120px - 100px); } } @media screen and (max-width: 550px) { #image { height:calc(100vh - 110px - 100px); } } @media screen and (max-height: 768px) { #image { height:0px } } /* , options */ #options-equal ul li { width:calc((100% / 6 ) - 1px) ; } .opt-e-scroll ul li { float:left; width:calc(((100% - 50px) / 6 ) - 1px)!important; margin-right:1px !important; height:50px;} .opt-e-scroll ul li:nth-of-type(5) { width: 49px !important; } #options-equal ul li:nth-of-type(1) { width:0px ; margin-right:0px; overflow:; opacity:0; display:none; } @media screen and (max-width: 925px) { #options-equal ul li:nth-of-type(7) span { display: block !important;} #options-equal ul li:nth-of-type(7) { line-height:17px !important; height:50px; position:relative !important; top:8px ; }} @media screen and (max-width: 667px) { /* for horizontal iphone 6 and lower */ #options-equal ul li a { font-size:2rem !important} } @media screen and (max-width: 568px) { /* for horizontal iphone 6 and lower */ .opt-e-scroll ul li:nth-of-type(2) { width:calc((55% - 25px) / 32 * 13 - 1px) !important ;} .opt-e-scroll ul li:nth-of-type(3) { width:calc((55% - 25px) / 32 * 10 - 1px) !important ;} .opt-e-scroll ul li:nth-of-type(4) { width:calc((55% - 25px) / 32 * 9 - 1px)!important ;} .opt-e-scroll ul li:nth-of-type(5) { width:calc((50px) - 1px)!important ;} .opt-e-scroll ul li:nth-of-type(6) { width:calc((45% - 25px - 55px) / 11 * 5 - 1px) !important;} .opt-e-scroll ul li:nth-of-type(7) { width:calc((45% - 25px - 55px) / 11 * 6 - 1px)!important ;} .opt-e-scroll ul li:nth-of-type(8) { width:calc(55px - 1px)!important ;} } @media screen and (max-width: 508px) { /* for horizontal iphone 6 and lower */ #options-equal ul li:nth-of-type(1) { display:block; } #options-equal ul li:nth-of-type(2) { width:calc((60% - 0px) / 32 * 13 - 1px) ;} #options-equal ul li:nth-of-type(3) { width:calc((60% - 0px) / 32 * 10 - 1px) ;} #options-equal ul li:nth-of-type(4) { width:calc((60% - 0px) / 32 * 9 - 1px) ;} #options-equal ul li:nth-of-type(5) { display:none;} #options-equal ul li:nth-of-type(6) { width:calc((40% - 0px - 50px) / 11 * 5 - 1px) ;} #options-equal ul li:nth-of-type(7) { width:calc((40% - 0px - 50px) / 11 * 6 - 1px) ;} #options-equal ul li:nth-of-type(8) { width:calc(50px - 1px) ;} .opt-e-scroll ul li:nth-of-type(1) { width: calc(50px - 1px) !important; } .opt-e-scroll ul li:nth-of-type(2) { width:calc((60% - 25px) / 32 * 13 - 1px) !important ;} .opt-e-scroll ul li:nth-of-type(3) { width:calc((60% - 25px) / 32 * 10 - 1px) !important ;} .opt-e-scroll ul li:nth-of-type(4) { width:calc((60% - 25px) / 32 * 9 - 1px)!important ;} .opt-e-scroll ul li:nth-of-type(5) { display:none;} .opt-e-scroll ul li:nth-of-type(6) { width:calc((40% - 25px - 50px) / 11 * 5 - 1px) !important;} .opt-e-scroll ul li:nth-of-type(7) { width:calc((40% - 25px - 50px) / 11 * 6 - 1px)!important ;} .opt-e-scroll ul li:nth-of-type(8) { width:calc(50px - 1px)!important ;} } @media screen and (max-width: 450px) { /* for horizontal iphone 6 and lower */ #options-equal ul li:nth-of-type(6) { width:calc((40% - 0px) / 11 * 5 - 1px) ;} #options-equal ul li:nth-of-type(7) { width:calc((40% - 0px) / 11 * 6 - 1px) ;} #options-equal ul li:nth-of-type(8) { display:none;} .opt-e-scroll ul li:nth-of-type(6) { width:calc((40% - 25px - 0px) / 11 * 5 - 1px) !important;} .opt-e-scroll ul li:nth-of-type(7) { width:calc((40% - 25px - 0px) / 11 * 6 - 1px)!important ;} } @media screen and (max-width: 375px) { /* for horizontal iphone 6 and lower */ #options-equal ul li:nth-of-type(1) { display:block; } #options-equal ul li:nth-of-type(2) { width:calc((100% - 0px) / 39 * 11 - 1px) ;} #options-equal ul li:nth-of-type(3) { width:calc((100% - 0px) / 39 * 10 - 1px) ;} #options-equal ul li:nth-of-type(4) { width:calc((100% - 0px) / 39 * 9 - 1px) ;} #options-equal ul li:nth-of-type(5) { display:none;} #options-equal ul li:nth-of-type(6) { display:none;} #options-equal ul li:nth-of-type(7) { width:calc((100% - 0px) / 39 * 9 - 1px) ;} #options-equal ul li:nth-of-type(8) { display:none;} .opt-e-scroll ul li:nth-of-type(1) { width: calc(50px - 1px) !important; } .opt-e-scroll ul li:nth-of-type(2) { width:calc((100% - 50px) / 39 * 11 - 1px) !important ;} .opt-e-scroll ul li:nth-of-type(3) { width:calc((100% - 50px) / 39 * 10 - 1px) !important ;} .opt-e-scroll ul li:nth-of-type(4) { width:calc((100% - 50px) / 39 * 9 - 1px)!important ;} .opt-e-scroll ul li:nth-of-type(7) { width:calc((100% - 50px) / 39 * 9 - 1px)!important ;} } @media screen and (max-width: 320px) { /* for horizontal iphone 6 and lower */ #options-equal ul li:nth-of-type(1) { display:none; } #options-equal ul li:nth-of-type(2) { width:calc((100% - 0px) / 39 * 11 - 1px) ;} #options-equal ul li:nth-of-type(3) { width:calc((100% - 0px) / 39 * 10 - 1px) ;} #options-equal ul li:nth-of-type(4) { width:calc((100% - 0px) / 39 * 9 - 1px) ;} #options-equal ul li:nth-of-type(5) { display:none;} #options-equal ul li:nth-of-type(6) { display:none;} #options-equal ul li:nth-of-type(7) { width:calc((100% - 0px) / 39 * 9 - 1px) ;} #options-equal ul li:nth-of-type(8) { display:none;} .opt-e-scroll ul li:nth-of-type(2) { width:calc((100% - 0px) / 39 * 11 - 1px) !important ;} .opt-e-scroll ul li:nth-of-type(3) { width:calc((100% - 0px) / 39 * 10 - 1px) !important ;} .opt-e-scroll ul li:nth-of-type(4) { width:calc((100% - 0px) / 39 * 9 - 1px)!important ;} .opt-e-scroll ul li:nth-of-type(7) { width:calc((100% - 0px) / 39 * 9 - 1px)!important ;} } /* , options */ /** Arrow **/ #scroll {width: 80px; height: 80px; border-radius: 150px; position: fixed; left:calc(50% - 50px); background:rgba(30,30,30,0.30); bottom:20px; z-index:3000; box-shadow: 0px 0px 5px rgba(220,220,220,01.0); } #scroll div {width: 30px; height: 30px; top:calc(50% - 25px); left:calc(50% - 15px); position:absolute; background: none; border-color: rgba(255,255,255,1.00); border-style: solid; border-width: 0px 5px 5px 0px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); -o-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg);} .scroll{ -webkit-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px); opacity:0; bottom: -100px !important; } .hide{ -webkit-filter: blur(5px); -moz-filter: blur(5px); filter: blur(5px); opacity:0.2; } #p1c {height:430px !important; width:312px !important; max-width:40vw; padding-top:0px; float:left; } #p1c div:first-child {height:500px; width: 5500px; background:url(../images/camera.png); float:right ; background-position:right !important; background-size: 500px !important; background-repeat:no-repeat; z-index:80;} #p1c div:last-child {height:210px; width: 210px; top:193px; right:101px ; position: absolute; background-size:cover !important; z-index:79;} #content > div:first-child { min-height:500px; } .cameraimage01 { background:url(../images/camera/01.jpg) !important; } .cameraimage02 { background:url(../images/camera/02.jpg) !important; } .cameraimage03 { background:url(../images/camera/03.jpg) !important; } .cameraimage04 { background:url(../images/camera/04.jpg) !important; } #p3c {height:400px !important; width:40px !important; float:left } #p3c div {height:400px; width: 200px; background:url(../images/header/01.jpg); float:right ;} #p4c {height:250px !important; width:150px !important; top: 50px; float:right; } #p4c div {height:200px; width: 200px; background:url(../images/header/02.jpg); float:left ;} footer .center ul li a { display:none; }