@charset "utf-8";
html {font-family: Lato, sans-serif;font-size: 16px;font-weight: 400;line-height: 1.5;-webkit-text-size-adjust: 100%;-ms-text-size-adjust: 100%;text-size-adjust: 100%;}
html, body {width: 100%;height: 100%;margin: 0;padding: 0;box-sizing: border-box;}
body {/* background-color: #ddd; */}
body * {box-sizing: border-box;}
button, input, optgroup, select, textarea { font-family: sans-serif; }
textarea { display: block; margin: 0; outline: 0; font-family: inherit; font-size: inherit; line-height: inherit; -webkit-appearance: none; -moz-appearance: none; appearance: none; }
blockquote, body, dd, dl, fieldset, figure, h1, h2, h3, h4, h5, h6, hr, legend, ol, p, pre, ul { margin: 0; padding: 0; }
button { cursor: pointer; }
ol, ul { margin: 0; padding: 0; list-style-type: none; }
li>ol, li>ul { margin-bottom: 0; }
img {/* background-color:rgba(255, 0, 0, 0.3); *//* width:100px; *//* height:100px; */border: 0;display: inline-block;max-width: 100%;border-style: none;}

.view-main {max-width: 1140px;margin: 0 auto;/* border: 1px solid #ccc; */position: relative;padding: 100px 0 0 0;background-color: white;}
.view-main:after { content:''; clear:both; display:block; }
.view-main * {}
.view-main .view {/* border: 1px solid #ddd; */width: 100%;float: left;}
.fixed {position: fixed;}

.width-rate {position:relative;width:100%;padding-bottom:100%;overflow: hidden;}
.width-rate.H75 { padding-bottom:75%; }
.width-rate.H60 { padding-bottom:60%; }
.width-rate.H50 { padding-bottom:50%; }
.width-rate>* {position:absolute;width: 100%;height:100%;/* overflow: auto; */}
.width-rate>img:before {/* content:''; */width:100%;height:100%;overflow: auto;}
.width-rate>img {/* position: relative; */bottom: 0;margin: 0;}

.width-rate .rate100 { height:100%; }
.width-rate .rate75 { height:75%; }
.width-rate .rate60 { height:60%; }
.width-rate .rate50 { height:50%; }

.view-main .content-list {}
.view-main>.content-list {max-height: 450px;white-space: nowrap;overflow: hidden;/* margin-bottom: 1em; */}
.view-main>*.ut-hidden { display:none; }
.view-main>.content-list img {width:100%;height:100%;position: relative;}
.view-main>.content-list img:first-child {/* margin-left:-1900px */}
.view-main>.content-list:after {content:'';clear: both;display: block;}

.view h1 {}
.view h2 {height: 110px;font-size: 1.8em;/* padding: 0px 0px 0px 0.5em; *//* background-color: #FF9800; */margin: 0;line-height: 66px;position: relative;padding-top: 16px;font-weight: 900;}
.view h3 {line-height: 1.1;color: #444;font-weight: 400;font-size: 0.9em;max-height: 4.4em;overflow: hidden;}
.view h4 {}
.view h5 {}

.view h2 .more { cursor: pointer; }
.view h2 .more:after { content:'>'; margin-left:0.2em; }
.view h2 .bottom-bar {height: 16px;background-color: rgba(255, 255, 255, 0.9);background-image: url(../images/bottom-bar-2.png);background-size: 100px 100%;background-repeat: no-repeat;width: 100%;position: absolute;bottom: 20px;left: 0;}

.view.header {height: 100px;background-color: rgba(18, 34, 57, 1);top: 0;width: 1140px;z-index: 1;}
.view.contest {/*max-height: 510px;*/overflow: hidden;margin-bottom: 20px;}
.view.contest .content {max-height: 400px;}
.view.notice {max-height: 400px;overflow:hidden;}
.view.notice .content {max-height: 280px;height: 280px;}
.view.notice .content-list img {height: 70%;}
.view.popular {width: 68%;max-height: 1260px;overflow: hidden;padding-right: 3%;}
.view.popular .content {/* max-height: 390px; */}
.view.popular .content>.width-rate { padding-bottom: 108%; }
.view.latest {width: 32%;max-height: 1260px;}
.view.latest .content {height: 110px;margin-bottom: 4.5%;width: 100%;}
.view.ranking { margin-bottom: 1em; }
.view.ranking .content {height: 170px;padding-bottom: 20px;padding-top: 20px;overflow: hidden;padding-left: 10px;}
.view.ranking .content:hover { background-color:#e6eaee; cursor:pointer; }
.view.banner {max-height: 210px;background-color: rgba(235,235,235,1);padding-top: 20px;padding-left: 0;text-align: center;}
.view.banner>* {/* float:left; */width: 30.5%;margin: 0 1%;display: inline-block;}
.view.banner:after { content:''; display:block;  }
.view.footer { height: 80px; background-color: rgba(18, 34, 57, 1); }

.slide, .card1, .card2 {/* background-color: rgba(188,213,216,1); */overflow: hidden;position: relative;}
.slide.inmage-only img {width:100%;/* height:100%; */}
.slide.image-only .tag1, .slide.image-only h3 { display:none; }
.slide img {width:100%;height:auto;height: 100%;margin-bottom: 0.5em;object-fit: cover;}
.slide.hori {}
.slide.hori img {width: 40%;}
.slide .tag1 {font-size: 0.8em;margin-bottom: 0.5em;margin-top: 0.5em;}
.slide.hori .tag1 {position:absolute;left: 42%;top: 0;color: rgb(118,118,118);font-weight: bold;white-space: nowrap;text-overflow: ellipsis;width: 68%;}
.slide .tag1 .language {background-color: #3F51B5;color: white;padding: 0.2em 0.6em 0.2em 0.6em;margin-right: 0.6em;border-radius: 2.5em;line-height: 0;font-weight: bold;}
.slide .tag1 .language.en:before { content:'English'; }
.slide .tag1 .language.zh:after { content:'中国语'; }
.slide .tag1 .language.ko:after { content:'한국어'; }
.slide .tag1 .language.ja:after { content:'日本語'; }
.slide .tag1 .language.ru:after { content:'Русский'; }
.slide .tag1 .language.es:after { content:'español'; }
.slide .tag1 .language.fr:after { content:'Français'; }
.slide .tag1 .language.vi:after { content:'Tiếng Việt'; }
.slide .tag1 .language.de:after { content:'Deutsch'; }
.slide .tag1 .language.ar:after { content:'العربية'; }

.slide.hori h3 {position:absolute;left: 44%;top: 2.2em;max-height: 4.2em;}
.content-list.split-2:after { clear: both; display: block; content: ''; }
.content-list.split-2>* {float:left;width: 48%;margin-left: 4%;margin-bottom: 2px;}
.content-list.split-2>*:nth-child(odd) {margin-left: 0;}
.content-list.split-3:after { clear: both; display: block; content: ''; }
.content-list.split-3>* {float:left;width: 32.2%;margin-left: 1.7%;}
.content-list.split-3>:nth-child(3n+1) {margin-left: 0;}
.content-list.split-4:after { clear: both; display: block; content: ''; }
.content-list.split-4>* {float:left;width: 23%;margin-left: 2.6%;/* margin-bottom: 20px; */}
.content-list.split-4>*:nth-child(4n+1) {margin-left: 0;}

.card1 .rank {position:absolute;width: 50px;height: 50px;background-color: rgba(38,52,73,1);border-radius: 50% 50%;font-size: 2em;color: white;text-align: center;left: 0;}
.card1 .author-level {position:absolute;width: 46px;height: 46px;background-repeat: no-repeat;background-size: 100% 100%;left: 140px;top: 60px;}
.author-level.level01, .author-level.level-G1 { background-image:url(../images/level01.png); }
.author-level.level02, .author-level.level-G2 { background-image:url(../images/level02.png); }
.author-level.level03, .author-level.level-G3 { background-image:url(../images/level03.png); }
.author-level.level04, .author-level.level-G4 { background-image:url(../images/level04.png); }
.author-level.level05, .author-level.level-G5 { background-image:url(../images/level05.png); }
.card1 .main {width: 130px;height:130px;border-radius: 50%;}
.card1 .main[src="/TalkTalkKorea/image/photo/nopic"] { background-color:#f9f3e6; }
.card1 .ago {position: absolute;top: 26px;left: 140px;color: rgb(118,118,118);font-size: 0.8em;}
.card1 .ago:before {content:'Latest update : ';}
.card1 .author {position: absolute;top: 50px;left: 186px;font-weight: bold;line-height: 1.3em;font-size: 1.2em;max-height: 2.6em;overflow: hidden;}
.card1 .country {position: absolute;top: 98px;left: 186px;font-size: 0.8em;color: hsla(0, 0%, 41%, 1);}
.card1 .posts-count {color: rgb(118,118,118);font-size: 0.8em;position: absolute;top: 116px;left: 186px;}

.view.ranking .card1 .ago { display:block; }

.card1 .rank:after { content:'1'; }
.card1 + .card1 .rank:after { content:'2'; }
.card1 + .card1 + .card1 .rank:after { content:'3'; }
.card1 + .card1 + .card1 + .card1 .rank:after { content:'4'; }
.card1 + .card1 + .card1 + .card1 + .card1 .rank:after { content:'5'; }
.card1 + .card1 + .card1 + .card1 + .card1 + .card1 .rank:after { content:'6'; }
.card1 + .card1 + .card1 + .card1 + .card1 + .card1 + .card1 .rank:after { content:'7'; }
.card1 + .card1 + .card1 + .card1 + .card1 + .card1 + .card1 + .card1 .rank:after { content:'8'; }
.card1 + .card1 + .card1 + .card1 + .card1 + .card1 + .card1 + .card1 + .card1 .rank:after { content:'9'; }

.co-common--list-view .card2 {width: 49%;float: left;margin-right: 2%;border-bottom: 1px solid rgba(118, 118, 118, 1);height: 160px;padding: 20px 0;cursor: pointer;}
.co-common--list-view .card2:nth-child(2n) {margin-right: 0;}
.co-common--list-view:after { content:''; display:block; clear:both; }
.card2 table {width: 100%;table-layout: fixed;}
.card2 table td { text-align:center; padding:15px; position:relative;}
.card2 .photo>img {width: 100px;height:100px;border-radius:50%;}
.card2 .active {font-size: 1.3em;font-weight: 900;line-height: 1.2em;}
.card2 .active:after {content:'RANK';position:absolute;top: 8px;width: 70%;background-color:rgb(0,0,0);color:white;border-radius: 0.4em;font-weight: 900;font-size: 0.8em;line-height: 1.5em;padding-bottom: 0.2em;margin: 0 auto;display: block;}
.card2 .post {font-size: 1.6em;font-weight: 900;}
.card2 .post:after, .card2 .like:after, .card2 .name .country { position: absolute;bottom: 16px;font-size: 0.7em;color: rgb(118,118,118);width: 100%;left: 0;text-align: center;}
.card2 .post:after { content:'POST'; }
.card2 .like {font-size: 1.6em;font-weight: 900;}
.card2 .like:after { content:'LIKE'; }
.card2 .name {color: #333;font-weight: bold;line-height: 1.2em;padding: 15px 0;}
.card2 .name .country {font-size: 1em;}

.author-info {
    position: absolute;
    top: 50px;
    left: 186px;
    font-weight: bold;
    line-height: 1.2em;
    font-size: 1.2em;
    /* max-height: 2.6em; */
    /* overflow: hidden; */
    /* background-color: red; */
    /* width: 100px; */
    /* height: 100px; */
}
.card1 .author-info>p {
    line-height: 1.2em;
    max-height: none;
}
.author-info p.author {
    position: static;
    line-height: inherit;
}
.author-info p.country {
    position: static;
}
.author-info p.posts-count {
    position: static;
}

@media (max-width: 1199px) {
    .view-main {width: 960px;}
    .co-common--list-view .card2 { width:100%; }
}
@media (max-width:992px) {
    .view-main { width: 720px; padding-top:50px; }
    .view-main {max-width: 720px; padding-top: 50px;}
    .view.notice .content { width: 31%; }
    .view h3 { max-height:2.2em; }
    .view.latest .content {font-size: 0.7em;height: 72px;}
    .content-list.split-3>* { width: 48%; }
    .co-common--list-view .card2 { width:100%; }
}
@media (max-width:768px) {
    .view-main { width: 540px; padding-top:50px; }
    .view.notice .content { width: 48%; }
    .content-list.split-4>*:nth-child(2n+1) {margin-left: 0;}
    .view.notice { max-height: initial; }
    .view.popular { width: 100%; }
    .view.latest { width:100%; }
    .view.latest .content {width:50%;float:left;font-size: 0.9em;height: 71px;}
    .content-list.split-3>* { width: 48%; }
    .card1 .ago:before {content: 'Latest update : ';/* display: block; */}
    .card1 .ago {  }
}
@media (max-width:576px) {
    .view-main {width:100%;padding-top: 50px;}
    .view.contest { max-height: initial;margin-bottom: 1em;}
    .view.notice { max-height: initial;margin-bottom: 1em;}
    .view.notice .content {max-height: initial;margin-bottom:1.5em;width: 100%;}
    .view.popular { max-height: initial;width:100%; }
    .view.popular .content { max-height: initial; margin-bottom:1.5em; }
    .view.latest { max-height: initial;width:100%; }
    .view.latest .content {max-height: initial;height: auto;font-size: 1em;width: 100%;}
    .view.ranking { max-height: initial;width:100%; }
    .view.banner {max-height: initial;width:100%;padding: 1em;}
    .view.banner>* {width:100%;display: block;margin-bottom: 1em;}
    .content-list.split-2>* {width: 100%;margin-left: 0;margin-bottom: 0.0em;}
    .content-list.split-3>* {width: 100%;margin-left: 0;margin-bottom: 0.0em;}
    .content-list.split-4>* {width: 100%;margin-left: 0;margin-bottom: 0.0em;}
    .slide .tag1 { padding: 0 1em; }
    .view h3 {padding: 0 1em;white-space: initial;}
    .view h2 { padding-left:0.3em; }
    .view h2 .bottom-bar { background-position-x: 0.3em; }
    .width-rate, .width-rate.H75, .view.popular .content>.width-rate { padding: 0; }
    .width-rate>* { position: initial; width: 100%; height: auto; }
    .view.ranking .card1 .ago {left: 186px;}
    .co-common--list-view .card2 { width:100%; }
    .card2 .name .country {left: 0;/* width: auto; */top: 3em;}
    .card2 table {font-size: 0.8em;}
    .card2 .name {position: absolute;width: calc( ( 100% - 130px ) / 3 * 2);/* text-align: left; */top: 50%;}
    .card2 .active, .card2 .post, .card2 .like {position: absolute;bottom: 0;width: calc( (100% - 130px) / 3 );height: 50%;}
    .card2 .active {left: 130px;top: 0;width: calc( (100% - 130px) / 3 * 2 );padding-bottom: 0;padding-top: 40px;}
    .card2 .post {left: auto;right: 0;top: 0;bottom: auto;}
    .card2 .like { left: calc(130px + (100% - 130px) / 3 * 2 ); }
}

.ago { display:none }

.view-main>.content-list.slide {
    padding-bottom:40%;
}
.view-main>.content-list.slide>img {position:absolute;left:0;width:100%;height:100%;top:0;object-fit: cover;}
.view-main>.content-list.slide>img:first-child {/* position:relative; */z-index:1;}

.fade-in {
    animation: fadein 3s;
    -moz-animation: fadein 3s; /* Firefox */
    -webkit-animation: fadein 3s; /* Safari and Chrome */
    -o-animation: fadein 3s; /* Opera */
}
@keyframes fadein { from { opacity:0; } to { opacity:1; } }
@-moz-keyframes fadein { /* Firefox */ from { opacity:0; } to { opacity:1; } }
@-webkit-keyframes fadein { /* Safari and Chrome */ from { opacity:0; } to { opacity:1; } }
@-o-keyframes fadein { /* Opera */ from {  opacity:0; } to { opacity: 1; } }

.fade-out {
    animation: fadeout 3s;
    -moz-animation: fadeout 3s; /* Firefox */
    -webkit-animation: fadeout 3s; /* Safari and Chrome */
    -o-animation: fadeout 3s; /* Opera */
}
@keyframes fadeout { from { opacity:1; } to { opacity:0; } }
@-moz-keyframes fadeout { /* Firefox */ from { opacity:1; } to { opacity:0; } }
@-webkit-keyframes fadeout { /* Safari and Chrome */ from { opacity:1; } to { opacity:0; } }
@-o-keyframes fadeout { /* Opera */ from {  opacity:1; } to { opacity: 0; } }


a.slide-point-right {
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: red;
    z-index: 2;
    background: url(../../images/ic_angle_right.png) no-repeat;
    background-color: rgba(128,128,128,0.5);
    background-size: 40px 40px;
    background-position: center;
    top: 40%;
    right: 10px;
}

a.slide-point-left {
    position: absolute;
    width: 60px;
    height: 60px;
    background-color: red;
    z-index: 2;
    background: url(../../images/ic_angle_left.png) no-repeat;
    background-color: rgba(128,128,128,0.5);
    background-size: 40px 40px;
    background-position: center;
    top: 40%;
    left: 10px;
}

[goUrl] { cursor:pointer; }

[lang=Russian] .co-gnb__mainmenu ul.main>li>a {
    word-break: keep-all;
    max-width: 160px;
    white-space: initial;
    line-height: 1em;
    padding-top: 30px;
}