<html><head><meta name="color-scheme" content="light dark"></head><body><pre style="word-wrap: break-word; white-space: pre-wrap;">.webapp-item .container { padding: 3%; }
.webapp-item .row { font-size: 0; padding: 30px 0 0; margin: 0; }
.webapp-item .items { display: inline-block; float: none; padding-bottom: 90px !important; font-size: 14px; vertical-align: top; }
.webapp-item .content { display: block; width: 90%; margin: 0 auto; padding: 0 15px 30px; border: 1px #dcdcdc solid; border-bottom: 3px #2eb6a9 solid; border-top-left-radius: 5px; border-top-right-radius: 5px; background: #f9f9f9; min-height: 290px; }
.webapp-item .content h3 { padding-bottom: 1em; font-weight: bold; }
.webapp-item .item { display: block; width: 90px; height: 90px; padding: 0; margin: -45px auto 30px; border-radius: 50%; background-image: url('/assets/images/g-titleicon2.png'); background-repeat: no-repeat; }
.webapp-item .items:hover .item { background-image: url('/assets/images/g-titleicon2-hover.png'); }
.webapp-item .item1 { background-position: 0 0; }
.webapp-item .item2 { background-position: -130px 0; }
.webapp-item .item3 { background-position: -260px 0; }
.webapp-item .item4 { background-position: 0 -140px; }
.webapp-item .item5 { background-position: -130px -140px; }
.webapp-item .item6 { background-position: -260px -140px; }

.webapp-compare { background: #253646; color: #fff; text-align: center; padding: 5% 0; overflow: hidden; }
.webapp-compare:before, .webapp-compare:after { content: ''; display: block; margin: 0; padding: 0; clear: both; }
.webapp-compare .container { position: relative; }
.webapp-compare .active-btn { display: none; }
.webapp-compare .compare-head { width: 100%; height: 220px; overflow: hidden; padding: 0; margin: 0; position: relative; }

.webapp-compare .topic { width: 20%; float: left; padding-right: 40px; }
.webapp-compare .compare-list { display: block; list-style: none; width: 100%; padding: 10px 0 30px; margin: 0; }
.webapp-compare .topic .compare-list li { display: block; list-style: none; width: 100%; padding: 15px 0; margin: 0; }
.webapp-compare .topic .compare-list li span {
    display: block;
    position: relative;
    width: 100%;
    height: 80px;
    line-height: 80px;
    font-size: 16px;
    font-weight: bold;
    color: #ffffff;
    box-shadow: 2px 2px 2px rgba(0,0,0,.6);
}
.webapp-compare .topic .compare-list li span:after {
    content: '';
    display: block;
    position: absolute;
    box-sizing: border-box;
    width: 0;
    height: 0;
    border: 30px transparent solid;
    border-top-width: 15px;
    border-bottom-width: 15px;
    right: -60px;
    top: 25px;
}
.webapp-compare .topic .compare-list li:nth-child(odd) span { background: #2eb6a9; }
.webapp-compare .topic .compare-list li:nth-child(odd) span:after { border-left-color: #2eb6a9; }
.webapp-compare .topic .compare-list li:nth-child(even) span { background: #2ea8b6; }
.webapp-compare .topic .compare-list li:nth-child(even) span:after { border-left-color: #2ea8b6; }

.webapp-compare .contents { width: 40%; position: relative; float: left; padding: 0 15px; background: #4d5d6c; }
.webapp-compare .contents.active { padding: 15px; margin-top: -15px; z-index: 2; background: #414f5b; box-shadow: 2px 2px 5px rgba(0,0,0,.6); }
.webapp-compare .contents h4 { font-size: 15px; }
.webapp-compare .contents p { font-size: 13px; }
#loser h4 { color: #dcdcdc; }
#loser p { color: #dcdcdc; }
#winer h4 { color: #fff100; }
#winer p { color: #ffffff; }
#winer:before { content: ''; display: block; width: 131px; height: 130px; background: url('/assets/images/pic-webapp-winer.png') right top no-repeat; position: absolute; top: -15px; right: -20px; }

.webapp-compare .contents .circle { display: block; width: 190px; height: 220px; margin: 0 auto; background-position: -190px 0; background-repeat: no-repeat; }
.webapp-compare .contents .circle.c1 { background-image: url('/assets/images/icon-webapp-1.png?v=2'); }
.webapp-compare .contents.active .circle.c1 { background-position: 0 0; }
.webapp-compare .contents .circle.c2 { background-image: url('/assets/images/icon-webapp-2.png'); }
.webapp-compare .contents.active .circle.c2 { background-position: 0 0; }

.webapp-compare .contents .compare-list li { display: block; list-style: none; width: 100%; height: 110px; padding: 15px 30px; margin: 0; border-bottom: 1px #a0a0a0 solid; position: relative; }
.webapp-compare .contents .compare-list li:last-child { border-bottom: none; }

#winer .compare-list li:hover:after { content: ''; display: block; width: 75px; height: 55px; background: url('/assets/images/pic-webapp-champion.png') right center no-repeat; position: absolute; right: 0; top: 18px; }

@media screen and (max-width:991px) {
    .webapp-compare .topic { display: none; }
    .webapp-compare .contents { width: 50%; }
}

@media screen and (max-width:799px) {
    .webapp-compare { padding: 60px 0; }
    .webapp-compare .container { height: 1030px; padding: 0 5px; margin: 0 15px; }
    .webapp-compare .active-btn { display: none; width: 30px; height: 70px; position: absolute; top: 75px; z-index: 5; cursor: pointer; }
    .webapp-compare .btn-left { left: -20px; background: url('/assets/images/arrow-s-img-l-white.png') left center no-repeat; }
    .webapp-compare .btn-right { right: -20px; background: url('/assets/images/arrow-s-img-r-white.png') right center no-repeat; }
    
    .webapp-compare .contents { width: 90%; display: block; position: absolute; top: 0; }
    .webapp-compare .contents.active { margin-top: 0; top: -15px; z-index: 2; }
    .webapp-compare .contents .compare-list li { padding: 15px 5px; }
    
    #winer .compare-list li:hover:after { display: none; }
    
    @keyframes left2top {
        0% { left: 0; z-index: 1; }
        50% { left: -80%; padding-top: 15px; padding-bottom: 15px; background: #414f5b; top: -15px; z-index: 2; box-shadow: 2px 2px 5px rgba(0,0,0,.6); }
        100% { left: 0; padding-top: 15px; padding-bottom: 15px; background: #414f5b; top: -15px; z-index: 2; box-shadow: 2px 2px 5px rgba(0,0,0,.6); }
    }
    @keyframes left2bottom {
        0% { left: 0; z-index: 2; }
        50% { left: -10%; padding-top: 0; padding-bottom: 0; background: #4d5d6c; top: 0; z-index: 1; }
        100% { left: 0; padding-top: 0; padding-bottom: 0; background: #4d5d6c; top: 0; z-index: 1; }
    }
    @keyframes right2top {
        0% { right: 0; z-index: 0; }
        50% { right: -80%; padding-top: 15px; padding-bottom: 15px; background: #414f5b; top: -15px; z-index: 1; box-shadow: -2px 2px 5px rgba(0,0,0,.6); }
        100% { right: 0; padding-top: 15px; padding-bottom: 15px; background: #414f5b; top: -15px; z-index: 2; box-shadow: -2px 2px 5px rgba(0,0,0,.6); }
    }
    @keyframes right2bottom {
        0% { right: 0; z-index: 2; }
        50% { right: -10%; padding-top: 0; padding-bottom: 0; background: #4d5d6c; top: 0; z-index: 2; }
        100% { right: 0; padding-top: 0; padding-bottom: 0; background: #4d5d6c; top: 0; z-index: 1; }
    }
    
    #winer { left: 0; }
    #winer.active { box-shadow: 2px 2px 5px rgba(0,0,0,.6); }
    #winer.activeanimate { animation: left2top 1s forwards; }
    #winer.closeanimate { animation: left2bottom 1s forwards; }
    #loser { right: 0; }
    #loser.active { box-shadow: -2px 2px 5px rgba(0,0,0,.6); }
    #loser.activeanimate { animation: right2top 1s forwards; }
    #loser.closeanimate { animation: right2bottom 1s forwards; }
}

@media screen and (max-width:480px) {
    .webapp-compare .contents h4 { font-size: 13px; }
    .webapp-compare .contents p { font-size: 11px; }
}</pre></body></html>