@charset "utf-8";

/* --------------------------------------------
 * Main Visual
/* ------------------------------------------ */
.main_visual_wrapper{position: relative; background-color:#373737; overflow: hidden;}
.main_visual_sizer{padding-top: 33.5%;}
.main_visual_sizer::after{content:''; opacity: 1; position: absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; z-index: 1; background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.7)); transition: opacity 3s cubic-bezier(.23,1,.32,1),height 3s cubic-bezier(.23,1,.32,1); z-index: 1;}
.main_visual_vid{position: absolute; width:100%; top:0; left:0; right:0; bottom:0;}
.main_visual_vid img, .main_visual_vid video{width:100%; position: absolute; top:50%; transform: translateY(-50%);}
.main_visual_text{position: absolute; bottom:150px; left:27.5%; color:#fff; z-index: 2;}
.main_visual_text .sub_sbj{font-weight: 400; font-size: 20px;}
/* 20191108 추가 // */
body[lang="ko"] .main_visual_text .sub_sbj{font-size: 18px;}
body[lang="zh"] .main_visual_text .sub_sbj{font-size: 18px;}
/* // 20191108 추가 */
.main_visual_text .main_sbj{font-weight: 700; font-size: 50px;}

/* --------------------------------------------
 * WCG2019 SUMMARY
/* ------------------------------------------ */

/* SUMMARY */
.summary_wrapper{margin-top:-200px; z-index: 3;}

/* NEWS */
.news_wrapper{position: relative; float: left; width: calc(25% - 10px); padding-top:52%; padding-top:calc(25% + 371px);/*magic number*/margin-right:10px; background-image: url('../images/main/news_bg.jpg'); background-size: cover; background-position: center; background-repeat: no-repeat;}
body[lang="ko"] .news_wrapper{padding-top: calc(25% + 364px)}
body[lang="zh"] .news_wrapper{padding-top: calc(25% + 364px)}
.news_text{position: absolute; top:0; left:0; padding:70px 9% 70px; color:#fff;}
.news_date{font-size: 20px; margin-bottom:20px;}
/* 20191125 수정 // */
.news_sbj{font-size: 30px; font-size: calc(15px + (35 - 15) * ((100vw - 500px) / (1920 - 500)));  font-weight: 700; margin-bottom:40px; text-transform: uppercase; word-break: keep-all;}
body[lang="ko"] .news_sbj{font-size: calc(15px + (25 - 15) * ((100vw - 500px) / (1920 - 500)));}
body[lang="zh"] .news_sbj{font-size: calc(15px + (30 - 15) * ((100vw - 500px) / (1920 - 500))); word-break: break-all;}
/* // 20191125 수정 */
.news_desc{ line-height: 1.4; font-weight: 400; font-size: calc(13px + 0.1vw);}
body[lang="ko"] .news_desc{font-size: calc(12px + 0.1vw); line-height:1.8}
body[lang="zh"] .news_desc{font-size: calc(12px + 0.1vw); line-height:1.8}
.news_btn{display: inline-block; font-size: 15px;font-weight: 400; position: relative; left:-18%; background-color: #122552; color:#fff; text-align: center; padding:16px 45px; margin-top:20px; z-index: 10;}
.news_pic{position: absolute; width:86%; bottom:3.6%; left:6%; }

/* CHAMPIONS */
.allChampions_wrapper{float: left; width:75%; position: relative; padding-top:100px;}
.gChampions_wrapper{width:100%; height:100px; background: rgba(0,0,0,0.8);}
.gChampions_wrapper p{width:28%; padding-left:20px; float: left; line-height: 100px; font-size: 26px; font-weight: 700; color: #fff; text-transform: uppercase;}
body[lang="ko"] .gChampions_wrapper p{font-size:21px;}
body[lang="zh"] .gChampions_wrapper p{font-size:21px;}
.gChampions_list{width:72%; float: left;}
.gChampions_list li{float: left;line-height: 100px;width:33.333%; }
.gChampions_list li img{vertical-align: middle; width:66%;}
.champions_wrapper{padding:35px 10px; margin-top:10px; width:100%; background: #fff;;}
.champions_list{width:100%;}
.champions_list>li{float: left; width:16.666%; text-align: center;}
.champions_list ul{margin-top:34px;}
.champ_pic img{width:56%; display: inline-block!important;}
.champ_name{margin-top:15px; font-size: 16px;}
body[lang="ko"] .champ_name{font-size: 14px;}
body[lang="zh"] .champ_name{font-size: 14px;}
.game_sbj{padding:0 2px 2px; border-bottom:2px solid #999; color:#333; font-size: 16px;}
body[lang="ko"] .game_sbj{font-size: 14px;}
body[lang="zh"] .game_sbj{font-size: 14px;}
.slick-slider .slick-list{overflow: hidden; margin:0 17%;}
.slick-slider .slick-list .champ_pic img{width:95%; padding:0 5%}
.slick-next.slick-arrow, .slick-prev.slick-arrow{width:30px; height:30px; position: absolute; top:48.5%; margin-top:-15px; background-size: 12px 19px; background-repeat: no-repeat; background-position: center; text-indent: -9999px; z-index: 10;}
.slick-next.slick-arrow{background-image: url('../images/main/btn_champ_right.png'); right:6%;}
.slick-prev.slick-arrow{background-image: url('../images/main/btn_champ_left.png'); left:6%;}

/* BANNER */
.mainBanner_wrapper{margin-top:10px;}
.mainBanner{position: relative; float: left; width:calc((99.99% - 20px) / 3); margin-right:10px; overflow: hidden;}
.mainBanner:last-child{margin-right: 0;;}
.mainBanner_sizer{padding-top:59%;}
.mainBanner_bg{position: absolute; top:0; left:0; width:100%; transition: transform 12s cubic-bezier(.23,1,.32,1);}
.mainBanner_bg img{width:100%;}
.mainBanner_bg video{width: 105%;}
.mainBanner.mainBanner_vid .mainBanner_sizer::after{opacity: 1;}
.mainBanner .mainBanner_sizer::after{content:''; opacity: 1; position: absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; z-index: 1; background: linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.7)); transition: opacity 3s cubic-bezier(.23,1,.32,1),height 3s cubic-bezier(.23,1,.32,1);}
.mainBanner .mainBanner_text{position: absolute; top:50%; left:50%; transform: translate(-50%, -50%); color:#fff; font-weight: 700; font-size: 30px; text-transform: uppercase; z-index: 2; white-space: nowrap;} /* 20191125 수정 */
.mainBanner:hover .mainBanner_sizer::after{opacity: 0;}
.mainBanner:hover .mainBanner_bg{-webkit-transform: scale(1.1) rotate(0.003deg); -ms-transform: scale(1.1) rotate(0.003deg); transform: scale(1.1) rotate(0.003deg);}

/* --------------------------------------------
 * HISTORY
/* ------------------------------------------ */
/* TITLE */
.mainTitle_wrapper{text-align: center; padding:100px 0; position: relative;}
.mainTitle_cate{color:#0e3b93; font-weight: 700; font-size: 26px; text-transform: uppercase; margin-bottom: 10px;}
body[lang="ko"] .mainTitle_cate{font-size:24px;}
body[lang="zh"] .mainTitle_cate{font-size:24px;}
.mainTitle_main{color:#333; font-weight: 700; font-size: 40px; text-transform: uppercase}
body[lang="ko"] .mainTitle_main{font-size:32px; font-weight: 400;}
body[lang="zh"] .mainTitle_main{font-size:32px; font-weight: 400;}
.mainTitle_btn{display: inline-block; margin-top:25px;}
.mainTitle_btn_clicker{position: absolute; width:5%; height:1.2rem; bottom:0; left:50%; -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); transform: translateX(-50%); background: rgba(0,0,0,0); text-indent: -9999px; z-index: 10;}

/* HISTORY SLIDER */
.historySlider_wrapper{position: relative; width:100%;overflow: hidden; padding-bottom: 100px; margin-top:-90px;}
.historySlider_container{width:100%;  padding-top:139px; color:#fff;text-align:center; }
.historySlider_wrapper .slider_slide{ width:17%;transition: 0.4s; float: left; position: relative;}
.historySlider_wrapper .slider_slide img{width:100%; position: relative;}
.historySlider_wrapper .slider_slide .gr{position: absolute; top:0; left:0; transition: .6s; width: 100%; }
.historySlider_wrapper .slider_slide .gr p{text-align: center; font-size: 40px; font-weight: 800; line-height: 300px;}
.historySlider_wrapper .slider_slide .desc{height:139px;opacity: 0; position: absolute; bottom:0; left:0; width:100%; background: #fff; color:#0064c8; padding:50px 0 20px 20%; text-align: left; transition: .3s; box-shadow: 8px 12px 25px -5px rgba(0,0,0,0.25); }
.historySlider_wrapper .slider_slide .desc .country{position: absolute; left:5%; top:0; transform:translateY(-50%); width:17%; box-shadow: 1px 1px 2px rgba(0,0,0,0.2);}
.historySlider_wrapper .slider_slide .desc.desc_twoLine{padding-top:11px;}
.historySlider_wrapper .slider_slide .desc .location{font-weight: 800; width:110%; border-bottom:2px solid #0064c8; font-size:36px; line-height: 1; padding-bottom:5px; text-transform: uppercase; white-space: nowrap;}
body[lang="ko"] .historySlider_wrapper .slider_slide .desc .location{font-size: 32px;}
body[lang="zh"] .historySlider_wrapper .slider_slide .desc .location{font-size: 32px;}
.historySlider_wrapper .slider_slide .desc .date{padding-top:5px; color:#0064c8; white-space: nowrap;}
body[lang="ko"] .historySlider_wrapper .slider_slide .desc .date{font-size:12px;}
body[lang="zh"] .historySlider_wrapper .slider_slide .desc .date{font-size:12px;}
.historySlider_wrapper .slider_slide:hover{ box-shadow: 8px 12px 25px -5px rgba(0,0,0,0.3); -webkit-transform: translateY(-139px); -ms-transform: translateY(-139px); transform: translateY(-139px);}
.historySlider_wrapper .slider_slide:hover .gr{opacity: 0;}
.historySlider_wrapper .slider_slide:hover .desc{opacity: 1; bottom:-139px;}

/* --------------------------------------------
 * TILE
/* ------------------------------------------ */
.mainTile_wrapper{ overflow: hidden; }
.mainTile_row{width:66.6666%; float: left; }
.mainTile_row:last-child{width:33.3334%;}
.mainTile{overflow: hidden; border:2px solid #fff; border-left:0; border-bottom: 0;}
.mainTile_row .mainTile:first-child{border-top:0;}
.mainTile_row:last-child .mainTile{border-right: 0;}
.mainTile_big{width:100%; float: left; position: relative;}
.mainTile_small{width:50%; float: left; position: relative;}
.mainTile_row:last-child .mainTile_small{width:100%;}
.mainTile_sizer{padding-top:56.25%;}
.mainTile_row:last-child .mainTile_sizer{padding-top:calc(56.25% - 1.5px)}
.mainTile_bg{position: absolute; top:0; left:0; width:100%; overflow: hidden;}
.mainTile_bg img{width:100%; transition: transform 12s cubic-bezier(.23,1,.32,1);}
.mainTile_bg video{width:100%;  transition: transform 12s cubic-bezier(.23,1,.32,1);}
.mainTile_text{position: absolute; bottom:40px; left:40px; z-index: 10;}
.mainTile_sbj{font-size: 20px; font-weight: 700; color:#fff; text-transform: uppercase;}
/* 20191108 수정 // */
body[lang="ko"] .mainTile_sbj{font-size: 18px;}
body[lang="zh"] .mainTile_sbj{font-size: 18px;}
/* // 20191108 수정 */
.mainTile_desc{color:#ccc; padding-top:2px;}
body[lang="ko"] .mainTile_desc{font-size: 12px;}
body[lang="zh"] .mainTile_desc{font-size: 12px;}
.mainTile .mainTile_sizer::after{content:''; opacity: 1; position: absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; z-index: 1; background: linear-gradient(rgba(0,0,0,0),rgba(0,0,0,.05),rgba(0,0,0,.1),rgba(0,0,0,.5),rgba(0,0,0,8)); transition: opacity 3s cubic-bezier(.23,1,.32,1),height 3s cubic-bezier(.23,1,.32,1);}
.mainTile .mainTile_sizer::before{content:'';position: absolute; top:0; left:0; bottom:0; right:0; width:100%; height:100%; opacity: 0; background: linear-gradient(rgba(0,0,0,.3),rgba(0,0,0,.7)); transition: opacity 3s cubic-bezier(.23,1,.32,1); z-index: 2;}
.mainTile:hover .mainTile_bg img, .mainTile:hover .mainTile_bg video{-webkit-transform: scale(1.1) rotate(0.003deg); -ms-transform: scale(1.1) rotate(0.003deg); transform: scale(1.1) rotate(0.003deg);}
.mainTile:hover .mainTile_sizer::before{opacity: 1;}

/* --------------------------------------------
 * HALL OF FAME
/* ------------------------------------------ */
.fameSlider_container{overflow: hidden;} /* 20200122 수정 */
.fameSlider_container .slider_slide {float: left; position: relative; }
.fameSlider_container .slider_slide img{width:100%;transition: .4s;}
.fameSlider_container .slider_slide .gr{position: absolute; top:0; left:0;}
.fameSlider_container .slider_slide:hover .gr{opacity: 0;}

/* 20200122 추가 // */
/* --------------------------------------------
 * FEEDS
/* ------------------------------------------ */
.feed_container{margin:100px 0 150px;}
.feed_wrapper{width:calc((100% - 40px) / 3); margin-right: 20px;  float: left;}
.feed_wrapper:last-child{margin-right: 0;}
.feed_channelName_wrapper{text-align: center; margin-bottom: 20px;}
.feed_channelName{font-weight: 700; font-size: 30px; line-height: 31px; color:#333;} /* 20200204 수정 */
.feed_channelName img{margin-right: 3px;}
.feed_scroll_wrapper{padding:40px 0; background: #fff;}
.feed_scroll{height: 820px; width:100%; overflow: hidden;}
.feed_item_wrapper{ padding:0 50px 0 30px;}
.feed_item{position: relative; margin-bottom: 40px;}
.feed_item:last-child{margin-bottom: 0;}
.feed_fb_profileWrapper{margin-bottom: 17px;}
.feed_fb_profilePicWrapper{width:40px; margin-right: 8px; float: left;} 
.feed_fb_profilePic img{border-radius: 50%; display: block; width: 40px; height:40px; border: 1px solid #cdcdcd; }
.feed_fb_nameWrapper{float: left; width:calc(100% - 48px);}
.feed_fb_name{padding-bottom:2px;}
.feed_fb_name a{color:#385898; font-family:Helvetica, Arial, sans-serif; font-weight: 600; font-size: 16px;}
.feed_fb_date p{color:#616770; font-size: 14px;font-family:Helvetica, Arial, sans-serif; }
.feed_fb_text p{font-family:Helvetica, Arial, sans-serif;}
.feed_fb_text p a{color:#46639e;}
.feed_fb_visual{margin-top:15px;}
.feed_img_bg{padding-top:56.25%; background-position: top center; background-size: 100%; background-repeat: no-repeat;}
.feed_flickr_text{position: absolute; left:20px; bottom: 20px;}
.feed_flickr_sbj{font-size: 16px; color:#fff;}
.feed_flickr_user{font-size: 14px; color:#ccc;}
.feed_iframe{ position: relative; width: 100%; padding-bottom: 56.25%; z-index: 5;}
.feed_iframe iframe { position: absolute; width: 100%; height: 100%;}
.feed_container .scrollbar-outer > .scroll-element.scroll-y{right:10px;}
.feed_container.scrollbar-outer > .scroll-element.scroll-y .scroll-element_outer{width:10px;}
.feed_container .scrollbar-outer > .scroll-element.scroll-y .scroll-bar{height:70px!important}
.feed_container .scrollbar-outer > .scroll-element .scroll-element_track{background: 0;}
.feed_container .scrollbar-outer > .scroll-content.scroll-scrolly_visible{left:0; margin-left:0;}
/* // 20200122 추가 */


/* 20200417 추가 :: S */
/* --------------------------------------------
 * popup
/* ------------------------------------------ */
.main_pop {position:absolute;top: 77px;right: 5%;z-index: 9;overflow: hidden;width: 19%;}
.main_pop a.popclose{display: block;float: right;margin-bottom: 3%;}
.main_pop a.popclose img{width: 80%;}
/* 20200417 추가 :: E */