@charset "utf-8";

/* main CSS Document */

#wrap {
    min-width: 360px;
    max-width: 1920px;
    margin: 0 auto;
    overflow: hidden;
}
.inner {
    position: relative;
    width: 100%;
    margin: 0 auto;
    max-width: 1400px;
}


#container {
    width: 100%;
    margin: 0 auto;
}

a:hover {transition: 0.3s ease .1s;}

.intro_wrap { width:100%; position:relative; height:890px;background: url("/layout/images/qosk/vis_1.jpg") center top no-repeat;}
.logo_area {width:100%; padding-top:40px;}
.logo_area h1 { float:left;}
.logo_area h1 a { display:block; color:#fff; font-size:15px; }
.logo_area h1 a span {display:block; text-align:center; line-height:1; margin-bottom:10px;}
.logo_area h2 { float:right; width:293px;}
.logo_area h2 img { height:auto;}

.logo_area .btn_area {float:right; margin-right:20px;}
.logo_area .btn_area a {float:left; display:block; width:60px; height:60px; line-height:60px; background:#25aae1 url("/layout/images/qosk/main_sp.png") 0 0 no-repeat; margin-right:10px; text-align:center; border-radius:50%;}
.logo_area .btn_area a:hover { margin-top:-5px;}
.logo_area .btn_area a.blog { background-position:-766px -8px; font-size:0}
.logo_area .btn_area a.insta { background-position:-846px -8px;font-size:0}
.logo_area .btn_area a.en { background-image:none; color:#fff; font-size:15px;font-weight: 500;}

.text_area {float:left; margin-top:120px;color:#fff;width:100%;}
.text_area h3 { font-size:41px; font-weight:500; letter-spacing:-0.5px; margin-bottom:45px;}
.text_area ul { font-weight:300;}
.text_area ul li { margin-bottom:10px; position:relative; padding-left:12px;text-shadow: 1px 2px 4px #222;}
.text_area ul li::after {content: ""; display: block; position:absolute; width:4px; height:4px; background-color:#25aae1; top:14px; left:0;box-shadow: 1px 1px #333;}
.text_area .btn_area {float:left; margin-top:40px;}
.text_area .btn_area a {float:left;font-weight:300; font-size:21px; display:block; text-align:center; padding:18px 25px; color:#fff; margin-right:15px;min-width: 165px;}
.text_area .btn_area a.org { background-color:#ea5516;}
.text_area .btn_area a.blue { background-color:#25aae1;}
.text_area .btn_area a:hover { background-color:#000;}

.solution_wrap { width:100%; position:relative; min-height:600px;background: url("/layout/images/qosk/vis_2.jpg") center top no-repeat; padding:100px 0; display:inline-block;}
.solution_wrap h3 { font-size:41px; font-weight:500; letter-spacing:-0.5px; text-align:center;color:#fff;}
.solution_wrap h2 {text-align:center;padding-top:45px;}
.solution_wrap ul {width:100%; margin-top:60px;}
.solution_wrap ul li { width:19.2%; margin-right:1%; float:left; text-align:center;}
.solution_wrap ul li:last-child {margin-right:0}
.solution_wrap ul li span.b_titie { font-size:33px; font-weight:600; background-color:#fef650; width:100%; padding:20px 0; display:block; border-radius:30px 30px 30px 0;letter-spacing:-1px;}
.solution_wrap ul li .txt_box { width:92%; background-color:#4d4d4d; color:#fff; border-radius:30px 30px 30px 0; margin-top:6px; padding:30px 4% 20px; height:250px;}
.solution_wrap ul li .txt_box .ico { display:block; height:47px; margin:0 auto 22px; background: url("/layout/images/qosk/main_sp.png") 0 0 no-repeat;}
.solution_wrap ul li.so_1 .ico { width:41px; background-position:-16px -11px;}
.solution_wrap ul li.so_2 .ico { width:59px; background-position:-85px -11px;}
.solution_wrap ul li.so_3 .ico { width:38px; background-position:-174px -11px;}
.solution_wrap ul li.so_4 .ico { width:42px; background-position:-250px -11px;}
.solution_wrap ul li.so_5 .ico { width:65px; background-position:-317px -11px;}
.solution_wrap ul li .txt_box .s_title {font-size:30px; color:#ff8601; font-weight:500; padding-bottom:15px; width:100%; border-bottom:2px solid #ececec; display: block; margin-bottom:15px;}
.solution_wrap ul li .txt_box p {display: block; font-weight: 400;}
.solution_wrap span.next { display: inline-block;}

/*
.adm_wrap { width:100%; position:relative; height:890px;background: #fde87d url("/layout/images/qosk/vis_3.jpg") left bottom no-repeat;}
.adm_wrap h3 { font-size:41px; font-weight:600; letter-spacing:-0.5px; text-align:center;padding-top:110px;}
.adm_wrap .num_box { width:815px; float:right; margin-top:70px; position:relative;}
.adm_wrap .num_box ul { width:100%;}
.adm_wrap .num_box ul li { display:block; text-indent:-9999px; position:absolute;background: url("/layout/images/qosk/main_sp.png") 0 0 no-repeat;}
.adm_wrap .num_box ul li.num_1 { background-position:0 -106px; width:815px; height:217px;}
.adm_wrap .num_box ul li.num_2 { background-position:0 -336px; width:415px; height:297px; top:230px;}
.adm_wrap .num_box ul li.num_3 { background-position:-415px -336px; width:400px; height:297px; top:230px; left:415px;}
*/


.adm_wrap { width:100%; position:relative; min-height:600px;background: #fde87d url("/layout/images/qosk/vis_3.jpg") left bottom no-repeat; display:inline-block; padding:100px 0;}
.adm_wrap h3 { font-size:41px; font-weight:600; letter-spacing:-0.5px; text-align:center;}
.adm_wrap .adm_box { float:left; width:42%;background: url("/layout/images/qosk/vis_3_pc.png") left bottom no-repeat;background-size: contain; min-height:360px; padding-top:170px;}
.adm_wrap .num_box { width:56%; float:right; margin-top:70px; position:relative;}
.adm_wrap .num_box > ul { width:100%;}
.adm_wrap .num_box > ul > li { position: relative; color:#fff;border-radius:28px; margin-bottom:10px; float:left;}
.adm_wrap .num_box > ul li.num_1 { background-color:#2b0f65; width:100%; height:217px; }
.adm_wrap .num_box > ul li.num_2 { background-color:#11367e; width:49%; height:297px; margin-right:2%;}
.adm_wrap .num_box > ul li.num_3 { background-color:#090b3b; width:49%; height:297px;}
.adm_wrap .num_box > ul li strong { font-size:32px;letter-spacing: -0.5px; font-weight:500; display:block; margin-left:40px; margin-top:38px; border-bottom:1px solid #fff;line-height: 1.1;}
.adm_wrap .num_box > ul li p { font-size:20px;margin-left:40px;margin-top:20px;margin-right: 40px;}
span.yel { color:#ffff00;}
span em { font-size:24px;}
.adm_wrap .num_box > ul li span.num { position:absolute; font-size:67px; font-weight:600; opacity:0.5; right:20px;}
.adm_wrap .num_box > ul li.num_1 span.num { top:28px;}
.adm_wrap .num_box > ul li.num_2 span.num { top:63px;}
.adm_wrap .num_box > ul li.num_3 span.num { top:63px;}
.adm_wrap .num_box > ul li ul { margin:20px 0 0 40px;}
.adm_wrap .num_box > ul li ul li { position:relative; padding-left:10px;}
.adm_wrap .num_box > ul li ul li:after {content: ""; display: block; width: 2px; height: 2px; position: absolute; left: 0; top: 15px; background-color:#fff;}
.num_box span.next { display:block;}



.client_wrap { width:100%; position:relative; height:790px;background: url("/layout/images/qosk/vis_4.jpg") center top no-repeat; padding-top:100px;}
.client_wrap h3 { font-size:43px; font-weight:500; letter-spacing:-0.5px; text-align:center;color:#fff; }
.client_wrap ul.brand_list { margin:50px auto 0; text-align:center;}
.client_wrap ul.brand_list li { display:inline-block; margin: 0 0.6% 15px; width:15%}
.client_wrap ul.brand_list li a { display:block; text-align:center; background-color:#fff; border-radius:25px;line-height: 1;padding: 12px 0; position:relative; border:1px solid #fff;}
.client_wrap ul.brand_list li a:hover {border:1px solid #ea5516;}
.client_wrap ul.brand_list li a img { vertical-align:middle; height:23px;}
.client_wrap .rental_list { width:98%; background-color:#fff; border-radius:60px; margin:30px auto 0; text-align:center; padding:30px 0;}
.client_wrap .rental_list ul { display:inline-block; }
.client_wrap .rental_list ul li { display:inline-block; margin:0 15px;}

.client_wrap .inner > a:hover { background-color:#000;}

.client_wrap .btn_area {width:100%; position:relative;height: 100px; display: inline-block; margin-top: 180px;}
.client_wrap .btn_area a {font-weight: 300; font-size: 21px; display: block; text-align: center; padding: 18px 25px; color: #fff;background-color: #25aae1; width:165px; position:absolute; right:0; top:0;}
.client_wrap .btn_area a:hover { background-color:#000;}
.client_wrap .btn_area p {font-weight: 400; font-size: 21px; color:#fff; position:absolute; right:0; top:70px;}





.guide_wrap {width:100%; position:relative; min-height:600px;background: #0d1d35 url("/layout/images/qosk/vis_5.png") right bottom no-repeat; padding:100px 0; display:inline-block;}
.guide_wrap h3 { font-size:43px; font-weight:500; letter-spacing:-0.5px; text-align:center; color:#fff; }
.con_box {width:100%; margin-top:70px;}
.con_box > div {margin: 0 auto;}
.con_box .box_left { height:390px; width:100%; background-color:#fff;overflow: hidden;}
.con_box .box_right ul { padding-top:20px;} 
.con_box .box_right ul li { color:#fff; font-weight:400; font-size: 25px;margin-bottom: 17px; margin-right:50px; float:left;}
.con_box .box_right ul li span a {color:#fff}
.con_box .box_right ul li span { display:inline-block; vertical-align:middle;}
.con_box .box_right ul li span.ico { width:55px; height:55px; background:#ea5516 url("/layout/images/qosk/main_sp.png") 0 0 no-repeat; margin:0 auto; border-radius:50%; margin-right:15px;}
.con_box .box_right ul li.call span.ico { background-position:-463px -11px;}
.con_box .box_right ul li.website span.ico { background-position:-536px -12px;}
.con_box .box_right ul li.email span.ico { background-position:-614px -12px;}
.con_box .box_right ul li.address span.ico { background-position:-687px -12px;}
.con_box .box_right ul li span.txt2 { display:block; margin-left:70px;}
.con_box .box_right ul li span.txt { width:auto;}

.footer { color:#fff; padding:70px 0; background-color:#373a40; text-align:center;}
.footer span { display:block; line-height:1.6;}
.footer span.download a {background-color: #25aae1; color:#fff;  position:absolute; right:0; top:0; width: 120px;height: 55px; line-height:55px;display: block;}
.footer span.next { display:inline-block;} 


@media screen and (max-width: 1400px) {
	.inner { width:96%;}
	.adm_wrap .next { display:block;}
	.adm_wrap h3 { line-height:1.2;}
	.text_area h3 {font-size:39px;}
	.client_wrap ul.brand_list li {width: 20%;}
	.adm_wrap .adm_box {width: 32%;}
	.adm_wrap .num_box {width: 66%;}
	.adm_wrap .num_box > ul li.num_1 {height: 210px;}
	.adm_wrap .num_box > ul li.num_2 {width: 100%;height: 250px;}
	.adm_wrap .num_box > ul li.num_3 {width: 100%;height: 250px;}
	.adm_wrap .num_box span.next { display:inline-block;}
	.adm_wrap .num_box > ul li.num_2 span.num {top: 30px;}
	.adm_wrap .num_box > ul li.num_3 span.num {top: 30px;}
	.client_wrap .rental_list ul li {margin: 0 5px;}
	.client_wrap .inner > a {right: 8%; bottom: -137px;}
	.solution_wrap ul li span.b_titie {font-size: 27px;}
	.solution_wrap ul li .txt_box .s_title {font-size: 25px;}
	.solution_wrap ul li .txt_box p {font-size: 18px;}
	.solution_wrap span.next { display:inline-block;}
}

@media screen and (max-width: 1100px) {
	.solution_wrap {background-size: cover;}
	.solution_wrap ul li {width: 32.3%;margin-right: 1%;margin-bottom: 10px;}
	.solution_wrap ul li .txt_box {height: 230px;}
	.adm_wrap .adm_box {width: 28%; padding-top:0;}
	.adm_wrap .num_box {width: 70%;}
	.client_wrap .rental_list ul li {margin: 0 25px;}
	.client_wrap .rental_list {padding: 20px 0;}
	.client_wrap .btn_area {margin-top: 60px;}
	.client_wrap ul.brand_list li {width: 23%;}
	.footer span.download a { position:relative;margin: 0 auto;}
	.footer span.download { text-align:center;margin-top: 10px;}
	
}

@media screen and (max-width: 980px) {
	.logo_area h2 { width:250px;}
	.text_area h3 {font-size: 36px;}
	.adm_wrap .adm_box { display:none;}
	.adm_wrap .num_box {width: 100%;}
}

@media screen and (max-width: 820px) {
	.logo_area h2 {width: 220px;}
	.logo_area .btn_area {margin-right: 15px;}
	.logo_area .btn_area a {width: 50px; height: 50px;margin-right: 5px; background-size: 800px;line-height: 50px;}
	.logo_area .btn_area a.blog {background-position: -612px -5px;}
	.logo_area .btn_area a.insta {background-position: -676px -5px;}
	.text_area h3 { line-height:1.2;}
	.solution_wrap ul li.so_1, .solution_wrap ul li.so_2 { width:49%;}
	.client_wrap ul.brand_list li a img {height: 20px;}
	.client_wrap .rental_list ul li img { max-width:85%;}
	.client_wrap .rental_list ul li {margin: 0 15px}
	.con_box .box_right ul li span.ico {width: 45px; height: 45px; background-size: 700px;}
	.con_box .box_right ul li.call span.ico {background-position: -320px -5px}
	.con_box .box_right ul li.website span.ico {background-position: -372px -6px}
	.con_box .box_right ul li.email span.ico {background-position: -427px -6px}
	.con_box .box_right ul li.address span.ico {background-position: -478px -6px;}
	.footer span.next { display:block;} 
	
}

@media screen and (max-width: 740px) {
	.inner {width: 94%;}
	.logo_area h1 img {    max-width: 85%; height:auto;}
	.logo_area h2 { float:left; margin-left: 100px;  width: 200px; text-align: right;}
	.logo_area .btn_area { margin-right:0}
	.text_area h3 {font-size: 37px; text-shadow: 1px 2px 4px #222;} 
	.text_area ul li { font-size:19px;}
	.text_area .btn_area {float: none; text-align: center;}
	.text_area .btn_area a {font-size: 19px; padding: 12px 25px; display: inline-block;min-width: 140px;float: none;}
	.solution_wrap h3 {line-height: 1.2; font-size: 37px;}
	.solution_wrap h3 span.next { display: block;}
	.solution_wrap ul li { width:49%;}
	.solution_wrap ul li .txt_box .ico { display:none;}
	.solution_wrap ul li .txt_box {height: 160px;}
	.adm_wrap h3 {font-size: 36px;}
	.adm_wrap .num_box { margin-top:40px;}
	.adm_wrap .num_box > ul li strong {font-size: 24px; margin-left:30px;}
	.adm_wrap .num_box > ul li span.num { display:none;}
	.adm_wrap .num_box > ul li.num_1 {height: 240px;}
	.client_wrap ul.brand_list li {width: 30%;margin: 0 0.2% 10px;}
	.client_wrap ul.brand_list li a img {height: 18px;}
	.client_wrap .rental_list ul li { margin:0;}
	.client_wrap .rental_list {width: 100%;border-radius:0;margin: 20px auto 0;}
	.client_wrap .rental_list ul li img { max-width: 80%;}
	.client_wrap .btn_area {margin-top: 40px;}
	.client_wrap .btn_area a { font-size: 19px; padding: 12px 25px; width: 150px;}
	.con_box {margin-top: 40px;}
	.con_box .box_right ul li { float:none; margin-right:0; margin-bottom:7px;}
	.con_box .box_right ul li span.txt {width: 87%; font-size: 21px;}
	.con_box .box_right ul li span.txt2 {font-size: 21px; margin-left:60px;}
	.footer {font-size: 18px;padding: 40px 0;}
	.solution_wrap, .guide_wrap, .adm_wrap {padding: 80px 0;}
	.client_wrap {padding-top: 80px;}
	.client_wrap h3, .guide_wrap h3 {font-size: 36px;}

}

@media screen and (max-width: 520px) {
	.logo_area h1 { margin-left:10px;}
	.logo_area h1 img {max-width: 80%;}
	.logo_area {padding-top: 30px; position: relative;}
	.logo_area h2 {float: right;width: 150px; text-align: right; margin:0;}
	.logo_area .btn_area {position: absolute; margin-right: 0; margin-top: 55px; right: 0;}
	.text_area h3 {font-size: 30px;margin-bottom: 30px; }
	.text_area ul li {font-size: 18px; line-height:1.5;}
	.text_area .btn_area a {font-size: 17px; padding: 12px 12px; min-width: 0; margin: 0 5px;}
	.solution_wrap h3 {font-size: 30px;}
	.solution_wrap h2 {padding-top: 25px; margin: 0 auto;width: 220px;}
	.solution_wrap ul {margin-top: 40px;}
	.adm_wrap h3 {    letter-spacing: -1px; font-size: 27px;}
	.solution_wrap ul li {width: 100% !important;}
	.solution_wrap ul li span.b_titie {font-size: 25px;padding: 10px 0;}
	.solution_wrap ul li .txt_box {height: 130px;padding: 20px 4% 20px;}
	.solution_wrap h2 img { height:auto}
	.adm_wrap .num_box > ul li strong {margin-left: 20px;margin-top: 28px;}
	.adm_wrap .num_box > ul li p {font-size: 18px;margin-left: 20px; margin-top: 15px; margin-right: 20px;}
	.adm_wrap .num_box > ul li ul {margin: 20px 0 0 20px;}
	.adm_wrap .num_box span.next { display:block;}
	.adm_wrap .num_box {margin-top: 30px}
	.client_wrap ul.brand_list {margin: 30px auto 0;}
	.client_wrap ul.brand_list li {width: 31%; margin: 0 0.1% 6px;}
	.client_wrap ul.brand_list li a {border-radius:0;}
	.client_wrap .rental_list {margin: 10px auto 0;}
	.client_wrap .btn_area p { display:none;}
	.client_wrap .btn_area a {font-size: 17px; padding: 12px 12px; width: 140px; left: 50%;margin-left: -82px;}
	.con_box .box_right ul li span.txt {width: 80%; font-size: 16px;line-height: 1.5;}
	.con_box .box_right ul li span.next { display:block;}
	.client_wrap h3, .guide_wrap h3 {font-size: 30px;}
	.con_box .box_right ul li span.txt2 {line-height: 1.5;font-size: 16px; margin-left: 58px; width: 80%;}
	.footer {font-size: 16px; letter-spacing:-0.5px;}
	.logo_area .btn_area a {background-size: 700px;width: 40px; height: 40px;line-height: 40px; font-size: 14px;}
	.logo_area .btn_area a.blog {background-position: -537px -6px;}
	.logo_area .btn_area a.insta {background-position: -594px -6px;}
	
}

@media screen and (max-width: 370px) {
	.intro_wrap {    height: 780px;}
	.logo_area h2 {width: 130px; margin-right: 10px;}
	.logo_area h1 img {max-width: 70%;}
	.logo_area .btn_area {margin-right: 5px; margin-top: 45px;}
	.text_area h3, .solution_wrap h3 {font-size: 27px;}
	.solution_wrap, .guide_wrap, .adm_wrap {padding: 50px 0;}
	.client_wrap {padding-top: 50px;}
	.solution_wrap ul li span.b_titie {font-size: 23px; padding: 6px 0;}
	.solution_wrap ul li .txt_box {height: 120px;}
	.solution_wrap ul li .txt_box p {line-height: 1.5;}
	.adm_wrap .num_box > ul li p {line-height: 1.5;}
	.adm_wrap .num_box > ul li ul li {font-size: 18px; line-height: 1.6;}
	.adm_wrap .num_box > ul li ul li:after {top: 13px;}
	.adm_wrap .num_box > ul li.num_2, .adm_wrap .num_box > ul li.num_3 {height: 240px}
	.client_wrap ul.brand_list li {width: 32%; margin: 0 0.05% 4px}
	.client_wrap ul.brand_list li a img { height:17px;}
	.con_box .box_right ul li span.ico {width: 40px; height: 40px;}
	.con_box .box_right ul li.call span.ico {background-position: -323px -7px;}
	.con_box .box_right ul li.website span.ico { background-position: -375px -8px;}
	.con_box .box_right ul li.email span.ico {background-position: -429px -8px;}
	.con_box .box_right ul li.address span.ico {background-position: -480px -8px;}
}