body {background-color:#3458fa;}
#wrap {display: grid;align-content:space-between;min-width:320px;width:100%;height:100%;overflow-y: auto;}
#main {width:80%;background:#ffffff url('../img/vestMailIco.png') 87% 60% no-repeat;background-size:18%;border-radius:0 0 70px 0;padding:10% 10% 8%;}
.mainTitle {width:70%;}    
.mainTitle p {font-size:1.2rem;margin-bottom:8px;color:#3458fa;font-weight:bold;}
    .mainTitle h1 {font-weight:bold;font-size:2.22rem;line-height:1.35; letter-spacing:-0.25rem;}
    .mainTitle p:last-child {margin-top:20px;color:#93b2c0;font-size:1.2rem;line-height:1.4;}
    .highlight {position: relative;height:5px;background: linear-gradient(to top, #b2c6cf 20%, transparent 20%);}  
#characteristic {width:90%;padding:7% 5% 5%; }
#characteristic>h2 {color:#c3ecff;font-size:1.40rem;margin:7px 0 30px;text-align:center;letter-spacing:-0.08rem;}
.chartList {border-radius:25px;background-color:#ffffff;padding:5px 25px;width:calc(95% - 50px);margin:0 auto;box-shadow: 0px 0px 15px 4px rgb(6, 39, 190);}
    .chartList li {overflow:hidden;border-bottom:1px dashed #dedede;padding:25px 0;}
    .chartList li:last-child {border-bottom:0;}
    .chartList li:first-child div p{vertical-align:middle;display:table-cell;height:42px;}
    .chartList li .icoImg {float:left;width:18px;border-radius:10px;padding:8px;background-color:#d9edf1;}
    .chartList li div {width:calc(100% - 55px);float:left;margin-left:15px;margin-top:-5px;color:#797979;}
    .chartList li div p:first-child {color:#1429a0;font-size:1.18rem;font-weight:700;line-height:1.4;letter-spacing:-0.08rem;}
    .chartList li div p {font-size:0.9rem;margin:5px 0;line-height:1.2;}
    .chartList li div p.downTxt {font-size:1rem;}
    .chartList li div p.downTxt>span {width:calc(100% - 70px);margin-top:3px;}
    .txtBlk {color:#000000;font-weight:700;}
    a.moreBtn {display:block;width:90px;padding:10px 5px;margin:15px 0 20px;text-align:center;border-radius:5px;font-size:0.85rem;background-color:#1d1d1d;color:#ffffff;box-shadow:0 2px 4px #919191;}
    .copyright {width:100%;padding:10px 0 20px;}
      .copyright>p {color:#849aff;font-size:1.2rem;margin:0 auto ;text-align: center;}
@media (max-width: 375px) {
    #main {width:84%;padding:13% 8% 10%;} 
    #characteristic {padding:5% 5%;}   
    #characteristic>h2 {font-size:1.30rem;margin:16px 0 30px;}
    .mainTitle h1 {font-size:1.85rem;}
    .mainTitle p {font-size:1.0rem;}
    .mainTitle p:last-child {width:80%;font-size:0.90rem;}
    .chartList {width:calc(95% - 40px);padding:20px 20px;}
        .chartList li {padding:15px 0;}
        .chartList li div p:first-child {font-size:1.12rem}
        .chartList li .icoImg {float:left;width:14px;border-radius:10px;padding:8px;background-color:#d9edf1;}
        .chartList li div {margin-top:-5px;}
        .chartList li:first-child div p{height:36px;}
        .copyright>p {font-size:0.8rem;}
}

@media all and (min-width:768px){
    #main {background:#ffffff url('../img/vestMailIco.png') 88% 70% no-repeat;background-size:19%;border-radius:0 0 70px 0;padding:10% 10% 8%;}
        .mainTitle p {font-size:1.8rem;}
        .mainTitle h1 {font-size:3.0rem;}
        .mainTitle p:last-child {width:70%;font-size:1.50rem;}    
    #characteristic {padding:5% 5% ;}
    #characteristic>h2 {font-size:2.05rem;margin:7px 0 42px;}
    .chartList {border-radius:40px;width:calc(95% - 100px);padding:20px 50px;}
    .chartList li .icoImg {width:30px;padding:13px;}
    .chartList li div {width:calc(100% - 82px);margin-left:25px;}
    .chartList li div p:first-child {font-size:1.60rem;}
    .chartList li div p,.chartList li div p.downTxt {font-size:1.35rem;}
    a.moreBtn {display:block;width:150px;padding:15px 10px;margin:15px 0;border-radius:5px;font-size:1.15rem;}    
}