@charset "utf-8";

@import url('reset.css');


.web_wrapper .hr_top { position:fixed; top:0; width:100%; background-color:#fff; height:70px; z-index:200;}
.web_wrapper .hr_top .hr_wr { position:relative; margin:0 auto; max-width:1000px; padding-top:17px; text-align:right;}
.web_wrapper .hr_top .hr_wr .logo { position:absolute; left:0;}
.web_wrapper .hr_top .hr_wr .logo img{ width:114px;}
.web_wrapper .hr_top .hr_wr .appbtn, .gt_ad .appbtn {display: inline-block; height: 45px;border: 1px dashed #2a6fd4; border-radius: 30px;padding:6px 30px 0 60px; color: #081236;position: relative; font-weight:600; text-align:left;vertical-align:middle;}
.gt_ad .appbtn {height:60px;padding:15px 30px 0 60px; margin-top:30px; background:#2a6fd4; border:none;}
.web_wrapper .hr_top .hr_wr .appbtn:before,  .gt_ad .appbtn:before {content: ""; display: inline-block; width: 20px; height: 20px; position: absolute; left: 25px; top: 50%; transform:translateY(-50%); background: url('../images/logo_google.png') no-repeat; background-size:20px;}
.web_wrapper .hr_top .hr_wr .appbtn em{ display:block; font-size:12px;}
.web_wrapper .hr_top .hr_wr .appbtn span{ display:block; font-size:16px;}
.gt_ad .appbtn span{ display:block; font-size:24px; color:#fff}
.web_wrapper .hr_top .hr_wr .sct_menu { display:inline-block; vertical-align:middle;}
.web_wrapper .hr_top .hr_wr .sct_menu li { display:inline-block; font-size:20px; font-weight:700; margin-left:30px;}
.web_wrapper .hr_top .hr_wr .sct_menu li.on a { color:#2a6fd4; }


section.gt_about{ position:relative; padding-top:120px; background:url(../images/web_bgimg.png) no-repeat center 40% #f1f4f9; height:1062px; }
section .sct_wr, footer .sct_wr { margin:auto; width:100%; max-width:900px;}
.gt_about .sct_wr .text { text-align:center; font-size:24px; font-weight:600; color:#081236; margin-bottom:50px; }
.gt_about .sct_wr .text .h1 { font-size:36px; font-weight:400; margin-bottom:20px;}
.gt_about .sct_wr .text .h1 strong {font-size:40px; font-weight:900;}
.gt_about .sct_wr .text .h1 strong em { color:#ff6800;}
.gt_about .sct_wr .img img { width:100%;}
.gt_about .sct_wr .text02 { text-align:center; font-size:24px; font-weight:600; color:#081236; padding-bottom:40px;}
.gt_about .sct_wr:after { content:''; position:absolute; width:0;  left:50%; transform:translateX(-50%); bottom:-50px;border-top: 50px solid #f1f4f9; border-left: 50px solid transparent;border-right: 50px solid transparent;}


section.gt_drive { background:#e2e5f0; padding:150px 0 80px; text-align:center; height:1094px;}
.gt_drive .sct_wr .h1 { font-size:40px; color:#081236; margin-bottom:70px;}
.gt_drive .sct_wr .h1 span { font-weight:800; }
.gt_drive .sct_wr .text, .gt_ad .sct_wr .text { font-size:19px; color:#444b65; font-weight:600; line-height:1.6;}
.gt_drive .sct_wr .text strong, .gt_ad .sct_wr .text strong { color:#2a6fd4;}
.flex { display:flex; }
.gt_drive .flex .unit { width:35%;margin-top:70px;}
.gt_drive .flex .unit + .unit { margin-left:5%; width:60%;}
.gt_drive .flex .unit .imgWr .img { padding-bottom:30px;}
.gt_drive .flex .unit .imgWr .img img { width:100%; border-radius:10px;}
section .h2 {font-size:27px; color:#081236; text-align:center; line-height:1.3; font-weight: 700; padding:0 0 30px;}
.gt_drive .checkTt { color:#2a6fd4; font-size:18px; font-weight:800;display: inline-block; background:url(../images/img_checkbox.png) no-repeat; background-size:43px auto; padding:14px 0 10px 35px;}
.gt_drive .flex .unit .step { margin:20px 0 40px 0;}
.gt_drive .flex .unit .step li { display:inline-block; position:relative; width:100px; height:100px; margin:0 6% 20px 0; background:#ffffff; border-radius:100%; box-sizing: content-box;vertical-align: top;}
.gt_drive .flex .unit .step li .num { display:block; color:#053162; font-weight:800; font-size:16px; margin-top:15px;}
.gt_drive .flex .unit  .step li p { font-size:15px; color:#000; font-weight:700;margin-top:10px;padding: 0 10px;}
.gt_drive .flex .unit  .step li .line {background: linear-gradient(180deg,rgba(255,255,255,0) 70%, #d7dfed 30%);}
.gt_drive .flex .unit  .step li.fin { background:#2a6fd4;}
.gt_drive .flex .unit  .step li.fin .num { color:#b0cdff;}
.gt_drive .flex .unit  .step li.fin p { color:#fff; background:url(../images/benefit_icon_car.png) no-repeat top center; background-size:31px auto; padding-top:22px; }
.gt_drive .flex .unit  .step li:after { position:absolute; top:50%; right:-20%; width:9px; height:17px; background:url(../images/ico_arrow_right.png) no-repeat; background-size:9px auto; content:''; }
.gt_drive .flex .unit  .step li:last-of-type:after { display:none;}

.mt80 { margin-top:150px;}
section.gt_ad { padding:150px 0 150px; text-align:center;height:1330px;}
.gt_ad .sct_wr .h1 { font-size:40px; color:#081236; margin-bottom:70px; font-weight:600;}
.gt_ad .sct_wr .h1 span {font-weight:800;  }
.gt_ad .sct_wr .img { width:50%;}
.gt_ad .sct_wr .img img { width:100%;}
.gt_ad .sct_wr .infotx { width:45%; margin-left:5%; text-align:left;}
.gt_ad .sct_wr .infotx .h2 { text-align:left;}
.gt_ad .sct_wr .infotx p { margin-top:40px;}
.gt_ad .flex { margin-bottom:100px;}

footer { background:#1a2242; padding:70px 0; color:#d7dfed ;}
footer .sct_wr { position:relative;}
footer .h3 {font-size:22px; color:#d7dfed ; line-height:1.3; font-weight: 500; margin:0 0 30px; padding-bottom:10px; border-bottom:1px solid #3e4654;}
footer .guide .cs { display:inline-block;text-align:left;}
footer .guide .cs a, address a{color:#d7dfed ;}
footer .guide .cs + .cs { margin-left:80px;}
footer .guide .cs li { margin-bottom:10px;}
footer .guide .cs li .agreeView { cursor:pointer;}

address { position:absolute; right:0; top:0; border:1px solid #3e4654; padding:20px;}
address p { padding-bottom:10px;}
.appbtn_down  { display:none;}

.modal_wrap .modalPop { max-width:600px;}

/*TopBtn*/
.gotoScroll {position:fixed; z-index:10; bottom:80px; right:20%; line-height:1.0; width:40px; height:60px; margin-bottom:10px; background: rgba(8 18 53 / 20%); border:3px solid #fff; border-radius:50px;}
.gotoScroll:before {position: absolute; top: 10px; left: 50%; content: '';width: 6px; height: 6px; margin-left: -3px; background-color: #fff; border-radius: 100%;-webkit-animation: sdb 2s infinite;animation: sdb 2s infinite; box-sizing: border-box;}
.gotoScroll:after { position: absolute; bottom: -18px;left: 50%; width: 18px; height: 18px; content: ''; margin-left: -9px;border-left: 1px solid  rgba(8 18 53 / 20%); border-bottom: 1px solid  rgba(8 18 53 / 20%); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); box-sizing: border-box;
}
.gotoScroll .text {display:block; font-size:0; margin-top:0px;}
/*.gotoScroll,.gotoScroll:focus {box-shadow:0 3px 6px rgba(0,0,0,0.3);}*/
.gotoScroll {display:none;}
.gotoScroll.active {display:block; animation: ani_fadeIn 0.4s ease-out 0s 1 alternate;}

@-webkit-keyframes sdb {
  0% {
    -webkit-transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    -webkit-transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}
@keyframes sdb {
  0% {
    transform: translate(0, 0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translate(0, 20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}


@media screen and (max-width:600px) {
	.web_wrapper .hr_top { height:50px;}
	.web_wrapper .hr_top .hr_wr { max-width:100%; padding:20px 10px 0 0;}
	.web_wrapper .hr_top .hr_wr .logo { position:absolute; left:5px; top:5px;}
	.web_wrapper .hr_top .hr_wr .logo img{ width:100px;}
	.web_wrapper .hr_top .hr_wr .appbtn  {display:none;}
	.web_wrapper .hr_top .hr_wr .sct_menu li { font-size:16px; font-weight:700; margin-left:15px;}
	
	section.gt_about{ padding-top:100px; background-position:center 50%; background-size:auto 100px; height:790px; }
	section .sct_wr, footer .sct_wr { max-width:100%;}
	.gt_about .sct_wr .text { margin-bottom:20px; }
	.gt_about .sct_wr .text .h1 { font-size:30px; font-weight:400; margin-bottom:30px;}
	.gt_about .sct_wr .text .h1 strong {font-size:32px;}
	.gt_about .sct_wr .text02 {font-size:21px; padding:50px 0;}
	.gt_about .sct_wr:after { bottom:-30px;border-top: 30px solid #f1f4f9; border-left: 30px solid transparent;border-right: 30px solid transparent;}
	
	section.gt_drive {padding:80px 0; height:1500px;}
	.gt_drive .sct_wr .h1 { font-size:32px; margin:0 20px 20px;}
	.gt_drive .sct_wr .text, .gt_ad .sct_wr .text { font-size:16px; padding:0 20px; }
	.payback {background: #e2e5f0;}
	.flex { display:block; }
	.gt_drive .flex .unit { width:100%;margin-top:30px;}
	.gt_drive .flex .unit + .unit { margin-left:0; width:100%;}
	.gt_drive .flex .unit .imgWr { margin:0 20px;}
	.gt_drive .flex .unit .imgWr .img { padding-bottom:10px;}
	section .h2 {font-size:18px; padding:0 20px 30px;}
	.driver .h2 {font-size:22px; padding:0 0 20px;}
	
	.gt_drive .flex .unit .step { margin: 20px auto 40px auto; max-width:360px;}
	.gt_drive .flex .unit .step li { width:80px; height:80px;}
	.gt_drive .flex .unit .step li .num { margin-top:5px;}
	.gt_drive .flex .unit .step li p {margin-top:0}
	
	.mt80 { margin-top:30px;}
	section.gt_ad { padding:100px 0;height:1200px;}
	.gt_ad .sct_wr .h1 { font-size:32px; margin:0 20px 40px; font-weight:600;}
	.gt_ad .sct_wr .img { width:100%;}
	.gt_ad .sct_wr .img img { width:100%;}
	.gt_ad .sct_wr .infotx { width:100%; margin-left:0;text-align:left;}
	.gt_ad .sct_wr .infotx .h2 {  padding:0;}
	.gt_ad .sct_wr .h2 { font-size:22px; padding:0 20px;}
	.gt_ad .sct_wr .infotx p { margin-top:20px;}
	.gt_ad .flex { margin-bottom:50px;}
	.gt_ad .appbtn { display:none;}
	
	footer { background:#1a2242; padding:40px 10px 160px ; color:#d7dfed ;}
	footer .h3 {font-size:16px; margin:0 0 20px;}
	footer .guide { display:flex;justify-content: space-around;}
	footer .guide .cs {font-size:12px;}
	footer .guide .cs + .cs { margin-left:10px;}
	footer .guide .cs li { margin-bottom:10px;}
	
	address { position:relative;  border:1px solid #3e4654; padding:15px; margin-top:20px;}
	address p { padding-bottom:10px;}
	
	.appbtn_down  { position:fixed; bottom:30px; left:50%; transform:translateX(-50%); display: block; width:80%; height: 60px; background:#2a6fd4; border-radius: 30px;padding:15px 30px 0 60px; margin:0 auto;  font-weight:600; text-align:left; z-index:1000;box-shadow: 0px 10px 18px rgb(0 0 0 / 20%) !important;}
	.appbtn_down:before {content: ""; display: inline-block; width: 20px; height: 20px; position: absolute; left: 25px; top: 50%; transform:translateY(-50%); background: url('../images/logo_google.png') no-repeat; background-size:20px;}
	.appbtn_down em {font-size:12px; vertical-align:middle;color: #fff;}
	.appbtn_down span {font-size:22px; vertical-align:middle; color: #fff;}
	
	/*gotoScroll*/
	.gotoScroll {right:10%; width:30px; height:50px; bottom:100px;}
	.gotoScroll:after { position: absolute; bottom: -14px;left: 50%; width: 10px; height: 10px; content: ''; margin-left: -5px;border-left: 1px solid  rgba(8 18 53 / 20%); border-bottom: 1px solid  rgba(8 18 53 / 20%); -webkit-transform: rotate(-45deg); transform: rotate(-45deg); box-sizing: border-box;
	}
	.gotoScroll .text {display:block; font-size:0; margin-top:0px;}
	/*.gotoScroll,.gotoScroll:focus {box-shadow:0 3px 6px rgba(0,0,0,0.3);}*/
	.gotoScroll {display:none;}
	.gotoScroll.active {display:block; animation: ani_fadeIn 0.4s ease-out 0s 1 alternate;}

}