.proban { margin-top: 80px; } .proban .secbant { color: #fff; left: 400px; top: 220px; } .proban .secbant span:nth-child(1) { font-size: 3rem; line-height: 120%; font-family: Arial, Helvetica, sans-serif; } .proban .secbant span:nth-child(2) { font-size: 1.1rem; } .proban .secbant span:nth-child(3) { font-size: 1.3rem; margin-top: 40px; } .gcpd { width: 100%; height: auto; overflow: hidden; } .gcrow { width: 100%; height: auto; overflow: hidden; background: #fff; margin-top: 25px; } .gcp { width: 56%; height: 560px; overflow: hidden; float: left; margin: 25px; position: relative; } .gcp a { display: block; position: absolute; width: 100%; height: 100%; left: 100%; top: 0; overflow: hidden; } .gcp a img { display: block; width: 100%; height: 100%; object-fit: contain; } .gcc { width: 30%; height: auto; overflow: hidden; float: right; margin: 90px 3% 0 0; } .gct { height: 90px; font-size: 1.6rem; font-weight: bold; color: #666; } .gcli span { display: block; line-height: 180%; font-size: 1.2rem; cursor: pointer; } .gcli span.on { font-weight: bold; } .gcli span:hover, .gcli span.on { color: #002856; } .gcb { display: block; margin-top: 80px; width: 38px; height: 38px; overflow: hidden; border: 1px solid #999; } .gcb .svg { width: 50%; height: 50%; object-fit: contain; margin: 25%; display: block; } .gcb .svg path { fill: #999; } .gcrow2 .gcb { position: absolute; margin-top: 0; right: 60px; bottom: 60px; } .gcb:hover { border: 1px solid #002856; } .gcb:hover .svg path { fill: #002856; } .gcrow2 { width: calc(50% - 10px); height: 590px; float: left; background: #fff; overflow: hidden; margin-top: 25px; position: relative; } .gcrow2:nth-child(even) { margin-left: 20px; } .gcrow2 p { display: block; width: 100%; height: 420px; overflow: hidden; } .gcrow2 span { display: block; margin-left: 65px; line-height: 150%; color: #666; } .gcrow2 span:nth-child(2) { margin-top: 40px; font-size: 2rem; font-family: Arial, Helvetica, sans-serif; font-weight: bold; } .gcrow2 span:nth-child(3) { font-size: 1.2rem; } a.bkmore { display: block; width: 100%; height: 45px; line-height: 45px; text-align: center; background: #ddd; margin-top: 80px; } .bkbox.probk, .hzbox { margin-top: 80px; } .probox { width: 100%; height: auto; overflow: hidden; } .pros { width: 30%; height: 390px; float: left; background: #fff; margin-right: 3%; margin-bottom: 30px; position: relative; } .pros.w2 { width: 63%; overflow: hidden; } .pros img { display: block; width: auto; height: auto; max-height: 90%; position: absolute; right: -40px; bottom: -30px; z-index: 1; } .pros.w2 img { width: 100%; height: 100%; max-height: 100%; right: 0; bottom: 0; object-fit: cover; } .pros span { display: block; padding-top: 70px; line-height: 150%; font-size: 1.5rem; color: #666; position: absolute; left: 50px; top: 0; z-index: 2; } .pros.w2 span { color: #555; } .pros span strong { display: block; margin-bottom: 10px; font-size: 1.6rem; font-family: Arial, Helvetica, sans-serif; } .pros .gcb { position: absolute; width: 30px; height: 30px; left: 50px; bottom: 90px; z-index: 3; } .pros .gcb { border: 1px solid #666; } .pros .gcb .svg path { fill: #666; } .pros .gcb:hover { border: 1px solid #002856; } .pros .gcb:hover .svg path { fill: #002856; } .hzbox { width: 100%; height: auto; overflow: hidden; background: #fff; } .hz { margin: 40px 150px 60px 150px; overflow: hidden; } .hz p { display: block; width: calc(20% - 40px); height: 80px; margin: 20px; float: left; overflow: hidden; border-radius: 5px; } .hz p:hover { -moz-box-shadow: 0 0 25px rgba(0, 0, 0, 0.2); -webkit-box-shadow: 0 0 25px rgba(0, 0, 0, 0.2); box-shadow: 0 0 25px rgba(0, 0, 0, 0.2); } .lybox { width: 100%; height: auto; overflow: hidden; background: #efefef; padding: 80px 0; text-align: center; } .lybk { width: 35%; height: auto; overflow: hidden; display: inline-block; vertical-align: top; text-align: left; } .lyt { line-height: 50px; font-size: 1.8rem; color: #002856; font-weight: bold; text-align: center; } .lyc { border: 1px solid #002856; padding: 50px; overflow: hidden; margin-top: 30px; } .lyc input.inp, .lyc select { width: calc(50% - 20px); height: 55px; margin: 20px 10px; float: left; padding: 0 20px; font-size: 1rem; border: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } .lyc b { display: block; width: 50%; line-height: 55px; float: left; margin: 40px 0 0 25%; background: #002856; color: #fff; font-size: 1rem; text-align: center; cursor: pointer; } .telt, .telc { margin-left: 90px; } .telt { margin-top: 80px; font-size: 1.6rem; line-height: 50px; font-weight: bold; color: #666; } .telc { line-height: 170%; margin-top: 30px; } @media screen and (max-width: 1680px) { .proban { margin-top: 70px; } .proban .secbant { left: 360px; top: 180px; } .proban .secbant span:nth-child(1) { font-size: 2.6rem; } .proban .secbant span:nth-child(2) { font-size: 1rem; } .proban .secbant span:nth-child(3) { font-size: 1.2rem; } .gcp { height: 480px; } .gcc { margin: 80px 3% 0 0; } .gct { height: 70px; font-size: 1.5rem; } .gcli span { font-size: 1.1rem; } .gcb { margin-top: 60px; width: 35px; height: 35px; } .gcrow2 { height: 550px; } .gcrow2 p { height: 390px; } a.bkmore { height: 45px; line-height: 45px; margin-top: 60px; } .bkbox.probk, .hzbox { margin-top: 60px; } .pros { height: 350px; } .pros span { padding-top: 70px; font-size: 1.4rem; left: 50px; } .pros span strong { font-size: 1.6rem; } .hz { margin: 30px 120px 50px 120px; } .lyc input.inp, .lyc select { height: 50px; } .lyc b { line-height: 50px; } } @media screen and (max-width: 1440px) { .proban { margin-top: 60px; } .proban .secbant { left: 300px; top: 160px; } .gcp { height: 420px; } .gcc { margin: 70px 3% 0 0; } .gcb { margin-top: 50px; width: 30px; height: 30px; } .gcrow2 { height: 520px; } .gcrow2 p { height: 360px; } a.bkmore { height: 40px; line-height: 40px; margin-top: 50px; } .bkbox.probk, .hzbox { margin-top: 50px; } .pros { height: 320px; } .pros span { font-size: 1.4rem; padding-top: 60px; left: 50px; } .pros .gcb { width: 25px; height: 25px; left: 50px; bottom: 70px; } .hz { margin: 20px 80px 40px 80px; } .hz p { width: calc(20% - 40px); height: 70px; margin: 20px; float: left; overflow: hidden; border-radius: 5px; } .lybk { width: 38%; } .lyc input.inp, .lyc select { height: 45px; } .lyc b { line-height: 45px; } } @media screen and (max-width: 1280px) { .proban { margin-top: 40px; } .proban .secbant { left: 260px; top: 130px; } .gcp { height: 400px; } .gcc { margin: 60px 3% 0 0; } .gcrow2 { height: 480px; } .gcrow2 p { height: 330px; } .pros { height: 280px; } .pros span { padding-top: 60px; left: 40px; } .pros .gcb { left: 40px; bottom: 50px; } .hz { margin: 10px 50px 30px 50px; } .hz p { height: 60px; } .lybox { padding: 60px 0; } .lybk { width: 40%; } .lyc { padding: 40px; } .lyc input.inp, .lyc select { height: 40px; } .lyc b { line-height: 40px; } }