@charset "utf-8";

@-webkit-keyframes vibes2{
    0%,40%,100% {-webkit-transform:translateY(0)}
    20%,60% {-webkit-transform:translateY(-6px)}
}
@keyframes vibes2{
    0%,40%,100% {transform:translateY(0)}
    20%,60% {transform:translateY(-6px)}
}


body.introbody {overflow:hidden height:100%; }

* {box-sizing:border-box;word-break: keep-all;}

.intro {position:relative; width:100%; height:100%; min-height:100vh; padding:30px; text-align:center;}
body.introbody .intro {height:100vh; }

.layout {width:100%; max-width:1200px; margin:0 auto; }
.clear:after {display:block; clear: both; visibility:hidden; content:''; }

.intro.fade {position:fixed; left:0; top:0; z-index:99;}
.intro .group {overflow:hidden; position:relative; height:100% ;min-height:calc(100vh - 60px); border-radius:40px; background:#1b957d; }
.intro .group .logo {position:absolute; left:40px; top:40px;}
.intro .copy{position:absolute;left:0;bottom:20px;width:100%;padding: 0 20px;font-size:14px;color:#fff;}
.intro .inner {position:absolute; left:0; top:50%;  width:100%; transform:translateY(-50%); -webkit-transform:translateY(-50%);}
.intro .inner .title {position:relative;}
.intro .inner .title:before {display:block;position:absolute;left:50%;bottom:0;content:'';width:1317px;height:301px;background:url(/images/ipsi/roadmap/obj.png)no-repeat;transform: translateX(-56%); -webkit-transform: translateX(-56%);}
.intro .inner .title > div {display:inline-block;position:relative;left: 50px;text-align:left;}
.intro .inner .title > div span {display:inline-block;position: relative;padding: 6px 40px;margin: 0 0 30px;border-radius: 5px;background:#166455;font-size:24px;font-family:'gmarket';color:#fff;-webkit-animation: vibes2 1.8s ease infinite;animation: vibes2 1.8s ease infinite;}
.intro .inner .title > div span:before {display:block;position:absolute;left: 20px;bottom: -18px;content:'';border-right:20px solid transparent;border-top:20px solid #166455;}
.intro .inner .title > div strong {display:block;}
.intro .inner .title p {line-height: 1.5;margin:55px 0 0;color:#fff;font-size: 18px;}
.intro .inner .morebtn {display:block;width:190px;height:53px;line-height:49px;margin:120px auto 0;padding: 0 30px;border:2px solid #fff;border-radius:50px;background: transparent;color:#fff;font-size: 17px;text-align: left;box-shadow: 6px 6px 8px rgba(0,0,0,.1);transition:all 0.3s;-webkit-transition:all 0.3s;}
.intro .inner .morebtn:after {display:block; clear:both; visibility:hidden; content:'';}
.intro .inner .morebtn span {display:inline-block;float:right;width:14px;height:10px;margin-top: 18px;background:url(/images/ipsi/roadmap/arr.png)no-repeat;}
.intro .inner .morebtn:hover,
.intro .inner .morebtn:focus {background:#fff; color:#1d1d1d;}
.intro .inner .morebtn:hover span,
.intro .inner .morebtn:focus span {background:url(/images/ipsi/roadmap/arr2.png)no-repeat;}

.intro .maincont {margin: 75px 0 100px;}
.intro .maincont .title {}
.intro .maincont .title span {display:inline-block;position: relative;padding: 6px 25px;margin:0 0 10px -230px;border-radius: 5px;background:#166455;font-size:15px;font-family:'gmarket';color:#fff;-webkit-animation: vibes2 1.8s ease infinite;animation: vibes2 1.8s ease infinite; }
.intro .maincont .title span:before {display:block;position:absolute;left:10px;bottom: -10px;content:'';border-right:10px solid transparent;border-top:10px solid #166455;}
.intro .maincont .title strong {display:block;}
.intro .maincont .title strong img {height:80px;}
.intro .maincont .title p {margin:20px 0 0; font-size:18px; color:#fff; }
.intro .maincont .cont {margin:55px 0 0;}
.intro .maincont .cont ul {}
.intro .maincont .cont ul:after {display:block; clear:both; visibility:hidden; content:'';}
.intro .maincont .cont ul li {float:left; width:20%; margin:0 0 45px }
.intro .maincont .cont ul li a {display:block; width:100%; color:#fff; font-family:'gmarket'; font-size:20px; }
.intro .maincont .cont ul li .ico {display:block; position:relative; width:210px; height:210px; margin:0 auto 15px; background:url(/images/ipsi/roadmap/ico_ir.png)no-repeat;}
.intro .maincont .cont ul li .ico:before {display:block; opacity:0; position:absolute; content:''; width:100%; height:100%; border-radius:50%; background:rgba(27,149,125,.7); transition:all 0.3s; -webkit-transition:all 0.3s;}
.intro .maincont .cont ul li .ico:after {display:block; opacity:0; position:absolute; content:''; width:100%; height:100%; background:url(/images/ipsi/roadmap/check.png)no-repeat center; transition:all 0.3s; -webkit-transition:all 0.3s;}
.intro .maincont .cont ul li a:hover .ico:before,
.intro .maincont .cont ul li a:focus .ico:before,
.intro .maincont .cont ul li a:hover .ico:after,
.intro .maincont .cont ul li a:focus .ico:after {opacity:1;}
.intro .maincont .cont ul li .ico2 {background-position:-330px 0;}
.intro .maincont .cont ul li .ico3 {background-position:-660px 0;}
.intro .maincont .cont ul li .ico4 {background-position:-990px 0;}
.intro .maincont .cont ul li .ico5 {background-position:0 -300px;}
.intro .maincont .cont ul li .ico6 {background-position:-330px -300px;}
.intro .maincont .cont ul li .ico7 {background-position:-660px -300px;}
.intro .maincont .cont ul li .ico8 {background-position:-990px -300px;}
.intro .maincont .cont ul li .ico9 {background-position: 0 -600px;}

@media(max-width: 1279px){
    .layout {max-width:100%; padding:0 30px;}
    
    .intro .inner .title:before {bottom:10px;width: 1098px;height: 250px;background-size:auto 100%;transform: translateX(-56%);-webkit-transform: translateX(-56%);}
    .intro .inner .title > div span {padding: 8px 35px;font-size:18px;}
    .intro .inner .title > div strong img {height:110px;}
    .intro .inner .morebtn {margin: 50px auto 0;}
    
    .intro .maincont {margin:100px 0;}
    .intro .maincont .cont ul li a {font-size:18px;}
    .intro .maincont .cont ul li .ico {width:175px; height:175px; background-size:auto 675px; }
    .intro .maincont .cont ul li .ico2 {background-position:-275px 0;}
    .intro .maincont .cont ul li .ico3 {background-position:-550px 0;}
    .intro .maincont .cont ul li .ico4 {background-position:-825px 0;}
    .intro .maincont .cont ul li .ico5 {background-position:0 -250px;}
    .intro .maincont .cont ul li .ico6 {background-position:-275px -250px;}
    .intro .maincont .cont ul li .ico7 {background-position:-550px -250px;}
    .intro .maincont .cont ul li .ico8 {background-position:-825px -250px;}
    .intro .maincont .cont ul li .ico9 {background-position:0 -500px;}
}

@media(max-width:1023px){
    .intro .group {}
    .intro .inner {}
    .intro .inner .title:before {display:none;}
    .intro .inner .title > div {left:0}
    .intro .inner .title p {margin:30px 0 0;}
    .intro .maincont .cont ul li {width:33.33%;}
    .intro .maincont .cont ul li .ico {width:154px; height:154px; background-size:auto 592px; }
    .intro .maincont .cont ul li .ico2 {background-position:-241px 0;}
    .intro .maincont .cont ul li .ico3 {background-position:-482px 0;}
    .intro .maincont .cont ul li .ico4 {background-position:-723px 0;}
    .intro .maincont .cont ul li .ico5 {background-position:0 -218px;}
    .intro .maincont .cont ul li .ico6 {background-position:-241px -218px;}
    .intro .maincont .cont ul li .ico7 {background-position:-482px -218px;}
    .intro .maincont .cont ul li .ico8 {background-position: -724px -218px;}
    .intro .maincont .cont ul li .ico9 {background-position: 0 -438px;}

}

@media(max-width:767px){
    .layout {padding:0 20px;}
    
    .intro {padding:15px;}
    .intro .group {min-height: calc(100vh - 30px);padding: 0 20px;border-radius:30px;}
    .intro .group .logo img {height:20px;}
    .intro .inner {position:static;margin: 140px 0 100px;transform:none;-webkit-transform:none;}
    .intro .inner .title > div {text-align:center;}
    .intro .inner .title > div span {padding: 8px 25px; font-size:15px;}
    .intro .inner .title > div span:before {left: 13px;bottom: -13px;border-right:13px solid transparent;border-top:13px solid #166455;}
    .intro .inner .title > div strong img {height:auto;max-height: 80px;}
    .intro .inner .title p {font-size:16px;}
    .intro .inner .morebtn {width: 160px;height: 48px;line-height: 45px;padding: 0 25px;font-size: 15px;}
    
    .intro .maincont .title span {margin: 0 0 10px -120px;}
    .intro .maincont .title strong img {height:60px;}
    .intro .maincont .title p {font-size:15px;}
    .intro .maincont .cont ul li a {font-size: 15px;}
    .intro .maincont .cont ul li .ico {width:116px; height:116px; background-size:auto 448px; }
    .intro .maincont .cont ul li .ico2 {background-position:-183px 0;}
    .intro .maincont .cont ul li .ico3 {background-position:-365px 0;}
    .intro .maincont .cont ul li .ico4 {background-position:-547px 0;}
    .intro .maincont .cont ul li .ico5 {background-position:0 -166px;}
    .intro .maincont .cont ul li .ico6 {background-position:-183px -166px;}
    .intro .maincont .cont ul li .ico7 {background-position:-365px -166px;}
    .intro .maincont .cont ul li .ico8 {background-position:-547px -166px;}
    .intro .maincont .cont ul li .ico9 {background-position:0 -332px;}
}

@media(max-width:580px){
    .intro .inner .title > div strong img {max-height: 60px;}
    
    .intro .maincont .title span {margin:0 0 10px;}
    .intro .maincont .cont ul li {width:50%;}
}

@media(max-width:380px){
    .intro .maincont .cont ul li {float:none; width:100%;}
}







.roadMap {position: relative;padding:0 30px 30px;background:#1b957d;}
.roadMap:before {display:block; position:absolute;left:0;bottom:0; content:''; width:143px; height:303px; background:url(/images/ipsi/roadmap/obj2.png)no-repeat; }
.roadMap .header {position:relative; height:90px; text-align:center;}
.roadMap .header .logo {padding:40px 0 0;}
.roadMap .header .left_con {position:absolute;left:15px;bottom: 10px;}
.roadMap .header .left_con a {display:inline-block; line-height:30px; padding:5px 20px 5px 5px; border-radius:30px;  background:#086150; color:#fff; font-size:15px; }
.roadMap .header .left_con a span {display:inline-block; width:30px; height:30px; margin:0 10px 0 0; border-radius:50%; background:#fff url(/images/ipsi/roadmap/home.png)no-repeat center; vertical-align:middle; }
.roadMap .header .left_con a em {display:inline-block; width:14px; height:10px; margin-left:10px;  background:url(/images/ipsi/roadmap/arr.png)no-repeat;  vertical-align:middle; }
.roadMap .header .right_con {position:absolute; right:15px; bottom:20px;}
.roadMap .header .right_con ul {}
.roadMap .header .right_con ul li {display:inline-block; position:relative; margin:0 20px;}
.roadMap .header .right_con ul li:not(:last-child):before {display:block; position:absolute; right:-22px; top:6px; content:''; width:1px; height:10px; background:rgba(255,255,255,.3); }
.roadMap .header .right_con ul li a {display:inline-block; font-size:15px; color:#fff; }

.roadMap .body_layout {padding: 20px;border-radius:30px;background:#f5f9f8;}

.roadMap .toplink {position:relative;margin: 0 0 20px;padding:15px 0;padding-left:250px; padding-right: 200px;}
.roadMap .toplink .title {position:absolute;left:35px;top: 48px;}
.roadMap .toplink .title > span {display:block; width:206px; height:26px; background:url(/images/ipsi/roadmap/txt.png)no-repeat; font-size:0}
.roadMap .toplink .title strong {display:block; font-size:26px; font-family:'gmarket'; color:#1b957d;}
.roadMap .toplink .title strong span {display:inline-block; font-size:26px; font-weight:normal; font-family:'gmarket'; color:#1b957d;}
.roadMap .toplink ul {}
.roadMap .toplink ul:after {display:block; clear:both; visibility:hidden; content:''; }
.roadMap .toplink ul li {float:left; width:10.5%; }
.roadMap .toplink ul li a {display:block;line-height: 1.3;font-size:16px;color:#333;text-align:center;}
.roadMap .toplink ul li .ico {display:block;position:relative;width:80px;height:80px;margin: 0 auto 20px;border-radius:50%;background:#f3f7f6 url(/images/ipsi/roadmap/ico_ir2.png)no-repeat;box-shadow:-6px -6px 8px #fff;}
.roadMap .toplink ul li .ico:before {display:block; position:absolute; left:0; top:0; content:''; width:100%; height:100%; border-radius:50%; box-shadow:6px 6px 8px rgba(0,0,0,.1);}
.roadMap .toplink ul li .ico2 {background-position:-80px 0;}
.roadMap .toplink ul li .ico3 {background-position:-160px 0;}
.roadMap .toplink ul li .ico4 {background-position:-240px 0;}
.roadMap .toplink ul li .ico5 {background-position:-400px 0;}
.roadMap .toplink ul li .ico6 {background-position:-480px 0;}
.roadMap .toplink ul li .ico7 {background-position:-560px 0;}
.roadMap .toplink ul li .ico8 {background-position:-320px 0;}
.roadMap .toplink ul li .ico9 {background-position:-638px 0;}

.roadMap .toplink ul li.on a {color:#1b957d; font-weight:bold;}
.roadMap .toplink ul li.on .ico {background:#1b947d url(/images/ipsi/roadmap/check.png)no-repeat center; background-size:31px 24px; }
.roadMap .toplink ul li.on .ico:after {display:block; position:absolute; left:50%; top:50%; content:''; width:100%; height:100%; border-radius:50%;border:14px solid #cbe6e1; transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%);}


#tab_wrap {}
#tab_wrap:after {display:block; clear:both; visibility:hidden; content:'';}
#tab_wrap .menu_wrap {float:right;position:relative;width:310px;padding: 40px 30px 160px;border-radius:30px;border: 2px solid #48a359;background: #fff url(/images/ipsi/roadmap/logo2.png)no-repeat right bottom;}
#tab_wrap .menu_wrap:before {display:block;position:absolute;top: -113px;right:15px;content:'';width:168px;height:125px;background:url(/images/ipsi/roadmap/obj3.png)no-repeat;}
#tab_wrap .menu_wrap:after {display:block;position:absolute;right: 145px;top:-100px;content:'';width:24px;height:33px;background:url(/images/ipsi/roadmap/obj4.png)no-repeat;-webkit-animation: vibes2 1.8s ease infinite;animation: vibes2 1.8s ease infinite;}
#tab_wrap .menu_wrap li {border-bottom:1px solid #e7eaef;}
#tab_wrap .menu_wrap li a {display:block;position: relative;z-index: 1;padding: 12px 20px;font-size:17px;color:#515151;transition: none;-webkit-transition: none;}
#tab_wrap .menu_wrap li a:before {display:block;left:5px;top: 20px;position:absolute;content:'';width:7px;height:7px;border-radius:50%;background:#e7eaef;}
#tab_wrap .menu_wrap li span{display:inline-block;position:relative;z-index: 2;}
#tab_wrap .menu_wrap li span:before {display:block; opacity:0;position:absolute; z-index:-1; left:-5px; right:-5px; bottom:0; content:''; width:auto; height:10px; background:#eaf5ec;  }

#tab_wrap .menu_wrap li a.ov {background:url(/images/ipsi/roadmap/check2.png)no-repeat 95% center; color:#126521; font-weight:bold; }
#tab_wrap .menu_wrap li a.ov:before {background:#1b957d; }
#tab_wrap .menu_wrap li a.ov span:before {opacity:1;}

#tab_wrap .con_wrap {float:left;width:calc(100% - 330px); border-radius:30px; border: 2px solid #e3e3e3;background: #fff;}
#tab_wrap .con_wrap .con {width:100%;max-width:1200px;margin:0 auto;padding: 65px 0;}


.plusbtn {display: none; }


@media(max-width:1709px){
    .roadMap .toplink {width:100%;margin: 0 0 20px;}
    #tab_wrap .con_wrap .con {max-width:100%; padding:65px 30px;}
    #tab_wrap .con_wrap .con img {width:100%;}

}

@media(max-width:1579px){
    .roadMap .toplink {padding:15px 0;}
    .roadMap .toplink .title {position:static;margin: 0 0 30px;text-align:center;}
    .roadMap .toplink .title > span {display:inline-block;width: 135px;margin-right: 10px;vertical-align:middle;}
    .roadMap .toplink .title strong {display:inline-block;vertical-align:middle;}

    #tab_wrap .menu_wrap:before,
    #tab_wrap .menu_wrap:after {display:none;}
    #tab_wrap .menu_wrap {width: 270px;padding:40px 20px 160px;}
    #tab_wrap .menu_wrap li a {font-size:16px;}

    #tab_wrap .con_wrap {width:calc(100% - 290px); text-align:center;}

    .plusbtn {display:inline-block;  width:100%; max-width:200px; height:auto; line-height:50px; margin:30px auto 0; border:1px solid #ccc; }
}

@media(max-width:1199px){
    .roadMap .toplink .title {margin:0 0 10px;}
    .roadMap .toplink ul li {width:25%;margin: 25px 0 0;}
    #tab_wrap .menu_wrap {float:none;width:100%;padding: 20px 20px;margin: 0 0 20px;background: #fff;}
    #tab_wrap .menu_wrap li {display:inline-block; border:none;}
    #tab_wrap .menu_wrap li a.ov {background: none;}
    #tab_wrap .con_wrap {float:none; width:100%; }
    #tab_wrap .con_wrap .con {padding:35px 20px;}
}

@media(max-width:767px){
    .roadMap {padding:0 15px 20px}
    .roadMap:before {display:none;}
    .roadMap .header .left_con,
    .roadMap .header .right_con {display:none;}
    .roadMap .toplink ul li {padding:0 20px}
    .roadMap .toplink ul li .ico {width:60px; height:60px; background-size:auto 60px;}
    .roadMap .toplink ul li .ico2 {background-position:-60px 0;}
    .roadMap .toplink ul li .ico3 {background-position:-120px 0;}
    .roadMap .toplink ul li .ico4 {background-position:-180px 0;}
    .roadMap .toplink ul li .ico5 {background-position:-240px 0;}
    .roadMap .toplink ul li .ico6 {background-position:-300px 0;}
    .roadMap .toplink ul li .ico7 {background-position:-360px 0;}
    .roadMap .toplink ul li .ico8 {background-position:-420px 0;}
    .roadMap .toplink ul li .ico9 {background-position:-480px 0;}
    .roadMap .toplink ul li.on .ico {margin:0 auto 15px;background-size:auto 18px; }
    .roadMap .toplink ul li.on .ico:after {border:10px solid #cbe6e1;}

    .roadMap .body_layout {padding:15px;}
    #tab_wrap .menu_wrap li a {padding: 8px 20px;font-size:15px;}
    #tab_wrap .menu_wrap li a:before {top: 17px;width:5px;height:5px;}

}

@media(max-width:640px){
    .roadMap .toplink ul li {width:33.33%;height: 120px;padding: 0;}
}

@media(max-width:440px){
    .roadMap .toplink ul li {width:50%;}
}