/* common */
.subpage { overflow: hidden; position:relative; }
.subpage > section {padding: 100px 0;}
.subpage > section:nth-of-type(even) {background: #eef2f5;}
.subpage section article + article {margin-top: 100px;}
.sub_inner { max-width: 1400px; width: 100%; margin:0 auto; position: relative; padding:0 50px; }
.sub_title h3 {color:#0055a2; border-bottom: 2px solid #0055a2; display: inline-block; line-height: 1.25; margin-bottom:20px; }
.top_line_title {margin-bottom: 40px;}
.top_line_title::before {content: ''; display: block; width: 46px; height: 5px; background-color: #0055a2; margin:0 auto 20px; }
.left_line_title {position: relative; padding-left: 20px; text-align: left; margin-bottom: 40px; }
.left_line_title::before {content: ''; display: block; width: 4px; height: 34px; background-color: #0055a2; position: absolute; left: 0; top:4px; }
/* font size */
.fs_60 {font-size: 60px; font-weight: 700; line-height: 1.3; color:#000; }
.fs_42 {font-size: 42px; font-weight: 600; line-height: 1.43; color:#000; letter-spacing: -1.05px;}
.fs_35 {font-size: 35px; font-weight: 600; line-height: 1.43; color:#000; letter-spacing: -.88px; }
.fs_30 {font-size: 30px; font-weight: 600; line-height: 1.43; color:#000; letter-spacing: -.75px; }
.fs_24 {font-size: 24px; font-weight: 400; line-height: 1.83; color:#000; }
.fs_22 {font-size: 22px; font-weight: 700; line-height: 1.5; color:#000; }
.fs_20 {font-size: 20px; font-weight: 300; line-height: 2; color:#000; }
.fs_18 {font-size: 18px; font-weight: 300; line-height: 1.83; color:#000; }

/* btns */
.link_btns {display: flex ;text-align: center; margin: 40px 0 90px; justify-content: center;}
.link_btns li {flex:1; margin-right: 20px; max-width: 244px; }
.link_btns li:last-child { margin-right: 0;}
.link_btns a {display: flex; align-items: center; justify-content: center; font-size: 18px; font-weight: 400; color:#000; transition:all .3s; border-radius: 32.5px;
line-height: 1.5; height:65px; width: 100%;  position: relative; cursor: pointer;background: #fff; letter-spacing: -.18px; border:2px solid #ddd; padding:0 10px;}
.link_btns a.active,
.link_btns a:hover {background-color: #0055a2; color:#fff; border-color: #0055a2; }
/* dot_list */
.dot_list li {position: relative; padding-left: 15px; text-align: left; }
.dot_list li::before {content: ''; display: block; width: 5px; height: 5px; border-radius: 50%; position: absolute; left: 0; top:12px; background: #a4bed6; }
.dot_list li:nth-child(n+2) {margin-top: 5px; }
/* dot_p */
.dot_p {position: relative; padding-left: 18px; text-align: left; margin-top: 30px; font-weight: 500; }
.dot_p::before {content: ''; display: block; width: 7px; height: 7px; border-radius: 50%; position: absolute; left: 0; top:17px; background: #0055a2; }
/* round */
h5.round {font-size: 16px; font-weight: 600; color:#fff;display: flex; align-items: center; justify-content: center; width: 130px; height: 36px;
border-radius: 18px; flex-shrink: 0; margin-right: 55px; background-color: #0055a2;}
/* col2 */
.col2 {display: flex; flex-wrap: wrap; }
.col2 > li {width: calc(50% - 20px); margin-right: 40px;  text-align: left; }
.col2 > li:nth-child(even) {margin-right: 0;}
.col2 > li:nth-child(n+3) {margin-top: 40px; }
.col2 .img {overflow: hidden; border-radius: 10px;}
.col2 .img.gif { padding-bottom: 64.8%; position: relative;}
.col2 .img.gif img {width: 100%; height: 100%; position: absolute; left: 0; top:0; object-fit: cover;}
/* num_list */
.num_list li {display: flex; align-items: flex-start; }
.num_list li:nth-child(n+2) {margin-top:25px; }
.num_list li i {display: flex; align-items: center; justify-content: center; width: 31px; height: 31px; border-radius: 50%; font-style: normal; flex-shrink: 0;
margin-right: 12px; font-size: 18px; font-weight: 800; color:#fff; background-color: #0055a2; position: relative; top:4px;}


/*Content CSS*/
.subpage {text-align: center;}
/* banner */
#smart_store {position: fixed; z-index: 10; right:50px; top: 40%;  transform: translateY(-50%); }
#smart_store a {display: flex; align-items: center; justify-content: center; flex-direction: column; width: 115px; height: 115px; border-radius: 50%;
box-shadow: 0 0 13px 0 rgba(0, 0, 0, 0.15); transition: background-color .3s; background-color: #fff;}
#smart_store a i {display: block; width: 29px; height: 29px; background:url("../img/store.png") 50%/contain no-repeat; transition: background-image .3s; }
#smart_store a p {font-size: 14px; font-weight: 400; color:#000; letter-spacing: -.14px; margin-top: 7px; transition: color .3s; }
#smart_store a:hover {background-color:#151c2b;}
#smart_store a:hover i {background-image:url("../img/store_hv.png");}
#smart_store a:hover p {color:#fff;}

/* sec1 */
#sec1 .arti1 .cont .box {display: flex; padding: 45px 0; border-top: 4px solid #ccc; margin-top: 30px; text-align: left; border-bottom: 1px solid #ccc; }
#sec1 .arti1 .cont .box > div {width: 50%;}
#sec1 .arti1 .cont .box > div:nth-child(2) {padding-left: 60px; border-left: 1px solid #dfdee3;}
#sec1 .arti1 .cont .box .flex {display: flex; align-items: flex-start; }
/* sec1 arti2 */
#sec1 .arti2 .flex {display: flex; align-items: center; }
#sec1 .arti2 .flex .txt {padding-left: 60px; text-align: left; }
#sec1 .arti2 .col2 {margin-top: 90px; }







@media screen and (max-width:1600px){
    #smart_store {right: 20px;}
    #smart_store a {width: 90px; height: 90px;}
    #smart_store a p {font-size: 12px;}
}
@media screen and (max-width:1400px){
    /* common */
    .subpage br:not(.space) {display: none;}

    /* content */

    h5.round {margin:0 0 20px;}
    /* sec1 */
    #sec1 .arti1 .cont .box > div:nth-child(1) {padding-right: 60px;}
    #sec1 .arti1 .cont .box .flex {display: block; }
    /* arti2 */
    #sec1 .arti2 .flex .img {width: 60%;}


}

@media screen and (max-width:1024px){
    /* common */
    .subpage {text-align: center;}
    .subpage > section {padding:70px 0;}
    .sub_inner {padding: 0 30px;}
    .sub_title h3 {margin-bottom: 15px;}
    .left_line_title::before {height: 24px;}
    /* fs */
    .fs_60 {font-size: 40px;}
    .fs_42 {font-size: 26px;}
    .fs_35 {font-size: 24px; }
    .fs_30 {font-size: 22px; }
    .fs_24 {font-size: 18px;}
    .fs_22 {font-size: 17px;}
    .fs_20 {font-size: 16px;}
    .fs_18 {font-size: 15px;}

    .link_btns {flex-wrap: wrap; justify-content: center; margin:40px auto 50px;  max-width: 610px;}
    .link_btns li {flex: inherit; width:calc(33.3% - 10px); margin-right: 15px;}
    @media screen and (min-width:641px){
        .link_btns li:nth-child(3n) {margin-right: 0;}
        .link_btns li:nth-child(n+4) {margin-top: 15px;}
    }
    .link_btns a {height: 55px; font-size: 15px; }

    .dot_list li::before {top:9px;}
    .dot_p {margin-top: 20px;}
    .dot_p::before {top:11px;}
    h5.round {font-size: 15px; height: 32px; margin:0 0 15px;}
    .num_list li:nth-child(n+2) {margin-top: 20px;}
    .num_list li i {top:0;}
    /* col2 */
    .col2 > li {width: calc(50% - 10px); margin-right: 20px;}

    /*Content CSS*/
    #smart_store {top:auto; transform: none; bottom: 85px;}
    #smart_store a {width: 50px; height: 50px;}
    #smart_store a i {width: 25px; height: 25px; }
    #smart_store a p {display: none; }

    #sec1 .arti1 .cont .box {display: block; text-align: center; padding: 30px 0;}
    #sec1 .arti1 .cont .box > div {width: 100%;}
    #sec1 .arti1 .cont .box > div:nth-child(1) {padding-right: 0;}
    #sec1 .arti1 .cont .box > div:nth-child(2) {padding-left: 0; padding-top: 30px; margin-top: 30px; border:0; border-top: 1px solid #dfdee3;}
    @media screen and (min-width:641px){
        #sec1 .arti1 .cont .box .dot_list {display: flex; flex-wrap: wrap; }
        #sec1 .arti1 .cont .box .dot_list li {width: 50%;}
        #sec1 .arti1 .cont .box .dot_list li:nth-child(2) {margin:0; }
    }
    /* arti2 */
    #sec1 .arti2 .flex {display: block; }
    #sec1 .arti2 .flex .img {width: 100%; text-align: left; }
    #sec1 .arti2 .flex .txt {padding-left: 0; margin-top: 40px; }




}

@media screen and (max-width:640px){
    /* common */
    .sub_inner {padding: 0 20px;}
    .subpage > section {padding:50px 0;}
    .subpage section article + article {margin-top: 70px;}
    .top_line_title::before {height: 4px; width: 40px;  margin: 0 auto 15px}
    .top_line_title {margin-bottom: 30px;}
    .left_line_title {margin-bottom: 30px; padding-left: 15px; }
    .left_line_title::before {height: 22px; top:3px;}
    /* fs */
    .fs_60 {font-size: 35px;}
    .fs_42 {font-size: 23px;}
    .fs_35 {font-size: 20px; }
    .fs_30 {font-size: 19px; }
    .fs_24 {font-size: 17px;}
    .fs_22 {font-size: 16px;}
    .fs_20 {font-size: 14px;}
    .fs_18 {font-size: 13px;}

    .link_btns {flex-wrap: wrap; justify-content: flex-start; margin:30px 0 40px;  }
    .link_btns li { width:calc(50% - 5px); margin-right:10px; max-width: 100%;}
    .link_btns li:nth-child(2n) {margin-right: 0;}
    .link_btns li:nth-child(n+3) {margin-top: 10px;}
    .link_btns a {height: auto; font-size: 13px; line-height: 1.4; padding: 10px 5px; height: 100%; }

    .dot_list li {padding-left: 10px; }
    .dot_list li::before {top:9px; width: 4px; height: 4px;}
    .dot_p {padding-left: 12px; margin-top: 15px; line-height: 1.5; }
    .dot_p::before {width: 5px; height: 5px; top:8px;}
    h5.round {font-size: 13px; height: 30px; margin:0 0 15px; width: 110px;}
    /* num_list */
    .num_list li i {width: 22px; height: 22px; font-size: 14px; top:3px;}
    .num_list li:nth-child(n+2) {margin-top: 10px;}
    /* col2 */
    .col2 > li {width:100%; margin-right: 0;}
    .col2 > li:nth-child(n+2) {margin-top: 30px;}



    /*Content CSS*/
    #sec1 .arti1 .cont .box {margin-top: 20px;}
    /* arti2 */
    #sec1 .arti2 .flex .txt {margin-top: 20px;}
    #sec1 .arti2 .col2 {margin-top:50px;}

}