@charset "utf-8";

html {background-color:#202020;height:100%;}
body {position:relative;max-width:640px;/*height:100%;overflow-y:auto;*/min-height:100%;margin:0 auto;background:url('../img/layout_bg01.jpg') no-repeat center top;background-size:cover;}

.wrapper {width:calc(100% - 40px);margin:0 auto;}

@media(max-width:379px){
    .wrapper {width:calc(100% - 30px);}
}
@media(max-width:330px){
    .wrapper {width:calc(100% - 20px);}
}

#LAYOUT_HEAD {z-index:10;position:relative;height:50px;padding:0 15px;}
#LAYOUT_HEAD a {display:block;font-size:0;height:50px;width:30px;background-repeat:no-repeat;background-position:center center;background-size:auto 17px;}
#LAYOUT_HEAD > .fl {}
#LAYOUT_HEAD > .fl:after {display:block;content:"";clear:both;}
#LAYOUT_HEAD > .fl > .back {float:left;background-image:url('../img/layout_head_back01.png');}
#LAYOUT_HEAD > .fl > .mic  {float:left;background-image:url('../img/layout_head_mic01.png');}
#LAYOUT_HEAD > .fr {}
#LAYOUT_HEAD > .fr > .search {background-image:url('../img/layout_head_search01.png');}

#LAYOUT_BODY {max-width:640px;box-sizing:border-box;}
#LAYOUT_BODY.capture {/*height:100%;transform:translateY(-50px);*/}

#POPUP_MIO {z-index:300;position:fixed;left:0;right:0;top:0;bottom:0;display:none;}
#POPUP_MIO.ing {display:block;opacity:0;transform:translateX(30%);transition:all .5s;}
#POPUP_MIO.on  {opacity:1;transform:translateX(0);}
#POPUP_MIO > iframe {display:block;width:100%;height:100%;border:0;}

.capture-wrap {z-index:1;position:absolute;left:0;top:0;width:100%;height:100%;/*display:flex;flex-direction:column;justify-content:space-evenly;align-items:center;*/}
.capture-wrap > .box {position:relative;height:50%;min-height:352px;display:flex;justify-content:center;align-items:center;/*width:230px;max-width:35%;padding:10%;display:flex;justify-content:center;align-items:center;display:none;*/}
.capture-wrap > .box:first-child:after {position:absolute;left:5px;right:5px;bottom:0;display:block;content:"";height:1px;background-color:#aaa;}
.capture-wrap > .box:last-child {}
.capture-wrap > .box > .wrp {width:230px;max-width:35%;padding:10%;}
.capture-wrap > .box > .wrp > a {display:block;width:100%;font-size:0;background:no-repeat center center;background-size:contain;}
.capture-wrap > .box > .wrp > a:before {display:block;content:"";padding-bottom:100%;}
.capture-wrap > .box > .wrp > a.camera {background-image:url('../img/sub_capture_camera02.png');}
.capture-wrap > .box > .wrp > a.voice  {background-image:url('../img/sub_capture_voice02.png');}

.capture-wrap > .box:first-child > .wrp {transform:translateY( 5%);}
.capture-wrap > .box:last-child  > .wrp {transform:translateY(-5%);}


.search-wrap {padding:50px 0;}
.search-wrap > form {position:relative;background-color:rgba(255,255,255,0.1);border-radius:20px;}
.search-wrap > form > input[type=text] {display:block;width:100%;height:45px;padding:0 10px 0 45px;font-size:1em;color:#fff;border:0;outline:none;background-color:transparent;box-sizing:border-box;}
.search-wrap > form > input[type=submit] {position:absolute;left:5px;top:0;width:40px;height:45px;font-size:0;border:0;background:transparent url('../img/common_icon_search01.png') no-repeat center center;background-size:auto 45%;}
.search-wrap > .result {margin-top:30px;}
.search-wrap > .result > h2 {font-size:1.2em;color:#a3a3a3;text-align:center;}
.search-wrap > .result > .lst {margin-top:20px;line-height:35px;font-size:0.85em;color:#ebebeb;white-space:nowrap;border-top:1px solid #515050;}
.search-wrap > .result > .lst > .itm {display:block;padding:10px 30px;border-bottom:1px solid #515050;}
.search-wrap > .result > .lst > .itm:after {display:block;content:"";clear:both;}
.search-wrap > .result > .lst > .itm > span {float:left;display:block;}
.search-wrap > .result > .lst > .itm > .unf {float:left;position:relative;width:35px;height:35px;}
.search-wrap > .result > .lst > .itm > .unf > .uniform {position:absolute;left:50%;top:calc(50% - 2px);transform:translate(-50%,-50%) scale(0.4);}
.search-wrap > .result > .lst > .itm > .tlogo {width:35px;height:35px;}
.search-wrap > .result > .lst > .itm > .name {margin-left:15px;width:calc(100% - 35px - 15px - 25px);overflow:hidden;text-overflow:ellipsis;}
.search-wrap > .result > .lst > .itm > .pos {float:right;width:25px;font-weight:bold;color:#8a8989;text-align:center;}
.search-wrap > .result > .lst > .itm.tt > .name {width:calc(100% - 35px - 15px);}
.search-wrap > .result > .lst > .itm.tt > .pos {display:none;}
.search-wrap > .result > .lst > .itm:hover,
.search-wrap > .result > .lst > .itm.on {font-weight:bold;color:#262626;background-color:rgba(255,255,255,0.45);}
.search-wrap > .result > .lst > .itm:hover > .pos,
.search-wrap > .result > .lst > .itm.on > .pos {color:#262626;}
.search-wrap > .result > .lst > .skeleton {display:none;}
.search-wrap > .result > .nodata {padding:100px 0;font-size:1em;color:#666;font-weight:500;text-align:center;}

@media(max-width:379px){
    .search-wrap > .result > .lst > a {padding:10px 20px;}
}
@media(max-width:330px){
    .search-wrap > .result > .lst {font-size:0.8em;}
    .search-wrap > .result > .lst > a {padding:10px 10px;}
}

.information {padding:30px 0 50px;text-align:center;}
.information > .head {}
.information > .head > .dsc {line-height:16px;font-size:16px;font-weight:100;color:#a1a1a1;}
.information > .head > .bdy {display:flex;justify-content:center;align-items:center;}
.information > .head > .bdy > .wrp {position:relative;margin-top:5px;max-width:calc(100% - 80px);}
.information > .head > .bdy > .wrp > .tit {line-height:30px;font-size:20px;font-weight:500;color:#ebebeb;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.information > .head > .bdy > .wrp > .tlogo {position:absolute;left:-40px;top:50%;transform:translateY(-50%);display:block;width:30px;height:30px;}
.information > .head > .bdy > .wrp > .unf {position:absolute;left:-40px;top:50%;transform:translateY(-50%);display:block;width:30px;height:30px;}
.information > .head > .bdy > .wrp > .unf > .uniform {position:absolute;left:50%;top:calc(50% - 2px);transform:translate(-50%,-50%) scale(0.35);}
.information > .rank {position:relative;margin-top:50px;display:flex;justify-content:space-around;}
.information > .rank:after {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1px;height:100%;display:block;content:"";background-color:#b5b5b5;}
.information > .rank > .itm {padding:10px 0;}
.information > .rank > .itm > .tit {line-height:16px;font-size:16px;color:#a1a1a1;}
.information > .rank > .itm > .val {position:relative;margin-top:5px;line-height:36px;font-size:36px;color:#ebebeb;font-weight:500;}
.information > .rank > .itm > .val.up:after,
.information > .rank > .itm > .val.dn:after {position:absolute;right:-15px;top:50%;transform:translateY(-50%);display:block;content:"";width:12px;height:100%;background:no-repeat center center;background-size:contain;}
.information > .rank > .itm > .val.up:after {background-image:url('../img/common_icon_rank01_up.png');}
.information > .rank > .itm > .val.dn:after {background-image:url('../img/common_icon_rank01_dn.png');}
.information > .rank.single:after {display:none;content:none;}
.information > .rank.single > .itm > .tit {font-weight:500;}
.information > .rank.single > .itm > .val {line-height:65px;font-size:65px;}
.information > .summary {margin-top:50px;display:flex;justify-content:center;}
.information > .summary > .itm {margin-left:15px;line-height:40px;font-weight:500;color:#ebebeb;}
.information > .summary > .itm:first-child {margin-left:0;}
.information > .summary > .itm > .val {display:inline;font-size:40px;}
.information > .summary > .itm > .tit {display:inline;font-size:20px;}
.information > .detail {margin-top:50px;}
.information > .detail > .tit {line-height:16px;font-size:16px;font-weight:500;color:#a1a1a1;}
.information > .detail > .chart {position:relative;margin-top:10px;}
.information > .detail > .chart:after {display:block;content:"";padding-bottom:60%;}
.information > .detail > .chart > .wrp {position:absolute;left:0;top:0;right:0;bottom:0;/*background-color:#333;*/}
.information > .detail > .match {position:relative;margin-top:10px;white-space:nowrap;}
.information > .detail > .match > .swiper {/*margin:0 50px;*/overflow:hidden;}
.information > .detail > .match > .btn {z-index:100;position:absolute;top:0;width:50px;height:100%;font-size:0;background:no-repeat center center;background-size:12px auto;-webkit-tap-highlight-color:rgba(255,255,255,0);}
.information > .detail > .match > .btn.swiper-button-disabled {opacity:0;}
.information > .detail > .match > .btn.prev {left :0;background-image:url('../img/common_icon_swipe01_prev.png');}
.information > .detail > .match > .btn.next {right:0;background-image:url('../img/common_icon_swipe01_next.png');}
.information > .detail > .match .itm {display:flex;justify-content: space-evenly;padding:0 50px;box-sizing:border-box;}
.information > .detail > .match .itm > .team {padding-top:28px;width:60px;}
.information > .detail > .match .itm > .team > .tlogo {height:60px;}
.information > .detail > .match .itm > .team > .tname {margin-top:10px;line-height:25px;font-size:14px;font-weight:500;color:#f0f0f0;border:1px solid #fff;border-radius:12.5px;}
.information > .detail > .match .itm > .info {padding:0 5%;}
.information > .detail > .match .itm > .info > .round {line-height:14px;font-size:12px;color:#868686;}
.information > .detail > .match .itm > .info > .score {line-height:60px;font-size:36px;font-weight:500;color:#ea5854;letter-spacing:-0.06em;}
.information > .detail > .match .itm > .info > .rating {margin-top:15px;}
.information > .detail > .match .itm > .info > .rating > .tit {line-height:12px;font-size:12px;color:#868686;}
.information > .detail > .match .itm > .info > .rating > .val {margin-top:5px;line-height:30px;font-size:30px;color:#ebebeb;font-weight:500;}
.information > .detail > .match .itm > .info > .vs {line-height:85px;font-size:40px;font-weight:500;color:#ea5854;}
.information > .tail {margin-top:50px;display:flex;justify-content: center;}
.information > .tail > a {display:block;padding-bottom:3px;line-height:18px;font-size:18px;font-weight:500;color:#f0f0f0;border-bottom:1px solid #e5e5e5;}


@media(max-width:379px){
}
@media(max-width:330px){
    .information > .head > .bdy > .wrp > .tlogo {left:-35px;}
    .information > .detail > .match > .btn {width:30px;}
    .information > .detail > .match .itm {padding:0 30px;}
}

/*
 * 음성검색 팝업
 */
.popup-voice-search {display:none;z-index:200;position:fixed;left:0;right:0;top:0;bottom:0;background-color:rgba(0, 0, 0, 0.95);transition:opacity .3s;}
.popup-voice-search > .btn-close {position:absolute;top:0;right:0;display:flex;justify-content:center;align-items:center;width:50px;height:50px;font-size:26px;color:#c4c4c4;}
.popup-voice-search > .txt {opacity:0.5;position:absolute;left:0;right:0;top:25%;transform:translateY(-50%);padding:0 10px;line-height:1;font-size:2.2em;color:#9aa0a6;text-align:center;word-break:break-word;transition:opacity .3s;}
.popup-voice-search > .visual {opacity:0.4;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:35%;max-width:130px;transition:opacity .3s;}
.popup-voice-search > .visual:before {display:block;content:"";padding-bottom:100%;}
.popup-voice-search > .visual > .out {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;background-color:#fff;border-radius:50%;opacity:0;}
.popup-voice-search > .visual > .in  {position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:100%;height:100%;background-color:#fff;border-radius:50%;display:flex;justify-content:center;align-items:center;}
.popup-voice-search > .visual > .in > svg {display:block;width:50%;height:50%;}
.popup-voice-search > .visual > .in > svg * {fill:#ff4444;}
.popup-voice-search > .visual.ing > .out {transform:translate(-50%,-50%) scale(1.1);opacity:1;animation-name:speach-recognition;animation-duration:1.5s;animation-iteration-count:infinite;animation-direction: alternate;}
.popup-voice-search > .visual.ing > .in  {background-color:#ff4444;}
.popup-voice-search > .visual.ing > .in > svg * {fill:#fff;}
.popup-voice-search.ing         {display:block;opacity:0;}
.popup-voice-search.loading     {display:block;opacity:1;}
.popup-voice-search.on          {display:block;opacity:1;}
.popup-voice-search.on > .txt    {opacity:1;}
.popup-voice-search.on > .visual {opacity:1;}
@keyframes speach-recognition { 
      0% { transform:translate(-50%,-50%) scale(1.0); }
     17% { transform:translate(-50%,-50%) scale(1.3); }
     34% { transform:translate(-50%,-50%) scale(1.1); }
     51% { transform:translate(-50%,-50%) scale(1.6); }
     68% { transform:translate(-50%,-50%) scale(1.0); }
     85% { transform:translate(-50%,-50%) scale(1.4); }
    100% { transform:translate(-50%,-50%) scale(1.1); }
}


/*
 * 이미지검색
 */
.popup-img-search {display:none;z-index:100;position:fixed;left:0;right:0;top:0;bottom:0;background-color:rgba(0, 0, 0, 0.8);transition:opacity .3s;}
.popup-img-search > .btn-close {position:absolute;top:0;right:0;display:flex;justify-content:center;align-items:center;width:50px;height:50px;font-size:26px;color:#c4c4c4;}

.popup-img-search.ing    {display:block;opacity:0;}
.popup-img-search.loading{display:block;opacity:1;}
.popup-img-search.on     {display:block;opacity:1;}

.popup-img-search .search_vid{position:fixed;height:100%;width:100%;object-fit:cover;filter:FlipH;} /* 좌우반전 줘야함. */

.popup-img-search .controller div{font-size: 16px;text-align: center;position: fixed;}
.popup-img-search .controller div > img {width:90px;height:90px;}
.popup-img-search .controller div:nth-child(1){bottom: 30px;left:calc(50% - 45px);}
.popup-img-search .btn-close{z-index:110;position:fixed;font-size:30px;right:15px;top:15px;}

.popup-img-search-select {display:none;z-index:110;position:fixed;left:0;right:0;top:0;bottom:0;background-color:rgba(0, 0, 0, 0.8);transition:opacity .3s;}
.popup-img-search-select .cva_canvas{position:fixed;height:100%;width:100%;object-fit: cover;/*transform:scaleX(-1);filter:FlipH;*/}
.popup-img-search-select .controller{display:block;width:100%;position:fixed;bottom:0px;background:black;text-align:center;height:80px;}
.popup-img-search-select .controller div{display:block;width:50%;float:left;height:100%;color:white;font-size:22px;font-weight:500;line-height:80px;}
.popup-img-search-select .controller div:after{display:block;content:"";clear:both;}

.popup-img-search-select.ing    {display:block;opacity:0;}
.popup-img-search-select.loading{display:block;opacity:1;}
.popup-img-search-select.on     {display:block;opacity:1;}