@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:wght@400;500;600;700&display=swap');

body, th, td, input, select, textarea, button {font-family: 'Chakra Petch', 'Roboto' ,HelveticaNeue-Light,AppleSDGothicNeo-Light,sans-serif !important;}


.pop-up {max-height:618px; font-family: 'Chakra Petch'; display:none; left:50%; top:50%; width:840px; transform:translate(-50%, -50%); position: fixed; z-index: 101;  background:#000; border:1px solid #689aff; }
.pop-up .pop-in {padding:3rem;}
.pop-up .pop-layout {position:relative; height:100%;}
.pop-up .pop-con {padding-bottom:3rem; }
.pop-up .pop-layout > h2 {letter-spacing:0.01rem; position:relative; color:#fff; font-size:20px; font-weight:700; padding:1.7rem; background:#689aff; top: -1px; }
.pop-up .pop-layout > h2:before {display:inline-block; position:relative; top:-1px;  vertical-align:middle; margin-right:1.2rem; content:''; width:21px; height:20px; background:url('../../images/common/clan/pop_clan_c.png') 0 0 no-repeat;}
.pop-up.vd_pop .pop-layout > h2:before {display:none;}
.pop-up.vd_pop {width:960px;}
.pop-up .pop-close {position:absolute; top:50%; right:2rem; transform:translate(0, -50%);  transition:none; width:21px; height:21px; font-size:0; background-repeat:no-repeat; background-position:0 0; background-image:url('../../images/common/clan/pop-close.png');}
.pop-up .pop-close:hover {transition:none; background-position:0 -21px;}
.pop-up .user {background:#282c32;}
.pop-up.pop-up-user .pop-layout > h2:before { background:url('../../images/common/clan/pop_clan_u.png') 0 0 no-repeat;}
.pop-up .info {background:#000;}
.pop-up .user ul {font-size:0; margin-left:-1.2rem;}
.pop-up .user ul li {display:inline-block; vertical-align:top; width:50%; padding-left:1.2rem;}
.pop-up .user ul li .desc {font-family: 'Roboto'; min-height:80px; font-size:24px; color:#f5f5f5; font-weight:700; text-align:right; background:#111111; padding:2.4rem 3.6rem; position:relative; padding-left:9rem;}
.pop-up .user ul li .desc .tit {font-family: 'Chakra Petch'; text-align:left; color:#ffee00; font-size:13px; font-weight:600; text-transform:uppercase; display:block; position:absolute; top:50%; left:2.4rem; transform:translate(0 , -50%);}
.pop-up .info ul {font-size:0; margin-left:-1px;}
.pop-up .info ul li {display:inline-block; vertical-align:top; width:calc(100%/3); padding-left:1px;}
.pop-up .info ul li .desc {padding:1.6rem 2rem 1.6rem 11rem; text-align:right; color:#fff; background:#22304d; position:relative; font-size:15px; font-weight:400; font-family:'Roboto';}
.pop-up .info ul li .desc .tit {font-family: 'Chakra Petch'; color:#ffee00; font-size:13px; font-weight:600; text-transform:uppercase; position:absolute; left:2rem; top:50%; transform:translate(0, -50%); }
.pop-up .info .tit_h3 {margin-bottom:1rem; color:#709fff; font-size:14px; font-weight:700; text-transform:uppercase;}
.pop-up .info .game {margin-bottom:3rem;}
.pop-up .info .clan ul li {width:50%; margin-bottom:1px;}
.pop-up .pop-btns {text-align:center; }
.pop-up .btn-detail {cursor:pointer; display:inline-block; position:relative; text-transform:uppercase; width:180px; height:40px; line-height:40px; text-align:center; border-radius:5px; background:rgba(0, 0, 0, 0.5); border:1px solid #689aff; font-size:14px; color:#709fff; font-weight:700; letter-spacing:0.08rem;}
.pop-up .btn-detail:before, .pop-up .btn-detail:after {position:absolute; content:''; display:block;  width:4px; height:10px; background:#689aff;}
.pop-up .btn-detail:before {bottom:0; left:1.1rem;}
.pop-up .btn-detail:after {top:0; right:1.1rem;}
.pop-up .btn-detail:hover {background:rgba(17, 47, 99, 0.7); border:1px solid #689aff; color:#fff;}
.pop-up .btn-detail:hover:before, .pop-up .btn-detail:hover:after {background:#5983d9;}


.pop-up.pop720 {width:720px;}
.pop-up .state {font-size:0; letter-spacing:0; margin-bottom:6.2rem; position:relative;}
.pop-up .state:before {background:url('../../images/common/clan/bg_logo.png') 0 0 no-repeat; background-size:contain; width:200px; height:200px; content:''; display:block; position:absolute; top:0; left:0; }
.pop-up .state .logo {width:106px; height:106px; position:relative; display:inline-block; vertical-align:top; overflow:hidden; margin:47px;}
.pop-up .state .logo img {margin-right:0;  max-width:none; position:absolute; overflow:hidden;}
.pop-up .state .logo .c_bg {z-index:1;}
.pop-up .state .logo .c_bg_line {z-index:2;}
.pop-up .state .logo .c_img {z-index:3;}
.pop-up .state .logo .c_img_line {z-index:4;}
.pop-up .state .logo img.bg {z-index:1; top:0; left:0; bottom:0; right:0; max-width:100%;}
.pop-up .state .logo img.img_logo {z-index:2; top:0; left:0; bottom:0; right:0; max-width:100%;}
.pop-up .state .info {vertical-align:top; display:inline-block; width:calc(100% - 200px); padding-left:3rem;}
.pop-up .state .info li {font-family: 'Roboto'; padding:2.4rem 3rem 2.4rem 19rem; text-align:right; position:relative; font-size:15px; color:#ffffff; background:#22304d; margin-bottom:1px; border-left:2px solid #689aff;}
.pop-up .state .info li span {font-family: 'Chakra Petch'; letter-spacing:0.04rem; position:absolute; font-size:13px; top:50%; left:3rem; transform:translate(0, -50%); color:#ffee00; font-weight:600; text-transform:uppercase;}
.pop-up .state .info li font {color:#689aff;}
.pop-up .rank {position:relative; font-family: 'Roboto'; padding:2.7rem 0 3rem;}
.pop-up .rank .lv {font-size:14px; color:#689aff; position:absolute; top:0; left:0;}
.pop-up .rank .lv img {width: 20px; height: 20px; position: relative;  vertical-align: middle; margin-right: 0.8rem;}
.pop-up .rank .per {color:#689aff; font-size:14px; position:absolute; top:0; right:0;}
.pop-up .rank .per span {color:#ffee00;}
.pop-up .rank .bar {background: url(../../images/common/clan/pop_bar.png) 0 0 repeat; width: 100%; position:relative; height:20px;}
.pop-up .rank .bar span {position:absolute; display:block; top:0; bottom:0; left:0; background:#689aff; opacity:0; animation: animate-width cubic-bezier(0.35, 0.95, 0.67, 0.99) 0.4s forwards;}


.n_more {letter-spacing: 0.08rem; position:relative; text-transform:uppercase; display:inline-block; min-width:84px; height:24px; line-height:24px; padding:0 2.4rem 0 1.2rem; color:#00ffcc; font-weight:700; font-size:11px; font-family: 'Chakra Petch'; border:1px solid #00ffcc; text-align:left;}
.n_more:before {content:''; top:50%; right:0.9rem; position:absolute; transform:translate(0, -50%); width:6px; height:10px; display:block; background-repeat:no-repeat; background-position:0 0; background-image:url('../../images/common/clan/arr_r.png');}
.n_more:hover {color:#ffff00; border-color:#ffff00;}
.n_more:hover:before { background-position:0 -10px; }


.paging ul {font-size:0;}
.paging ul li {display:inline-block; vertical-align:top; margin:0 0.3rem;}
.paging ul li a {position:relative; display:block; width:24px; height:24px; line-height:24px; text-align:center; font-size:11px; color:#00ffcc; font-weight:500; border:1px solid #00ffcc;}
.paging ul li a:hover, .paging ul li.on a  {background:rgba(0, 255, 204, 0.15);}
.paging ul li.prev a:hover, .paging ul li.next a:hover, .paging ul li.first a:hover, .paging ul li.last a:hover {border:1px solid #ffff00; background:rgba(255, 255, 0, 0.15);}
.paging ul li.prev a:before, .paging ul li.next a:before, .paging ul li.first a:before, .paging ul li.last a:before {position:absolute; left:50%; top:50%; transform:translate(-50% , -50%); content:''; display:block; width:6px; height:10px; background-repeat:no-repeat; background-position:0 0;} 
.paging ul li.first a:before, .paging ul li.last a:before {width:12px;}
.paging ul li.prev a:before {background-image:url('../../images/common/clan/page_l.png');}
.paging ul li.next a:before {background-image:url('../../images/common/clan/page_r.png');}
.paging ul li.prev a:hover:before, .paging ul li.next a:hover:before {background-position:0 -10px;}
.paging ul li.first a:before {background-image:url('../../images/common/clan/page_ll.png');}
.paging ul li.last a:before {background-image:url('../../images/common/clan/page_rr.png');}
.paging ul li.prev a:hover:before, .paging ul li.next a:hover:before, .paging ul li.first a:hover:before, .paging ul li.last a:hover:before {background-position:0 -10px;}



.clan_wrap {background: #0e090b url('../../images/common/clan/bg_clan.jpg') no-repeat center top; background-size: cover;}
.clan_wrap .sub_wrap {padding-bottom:0;}
.clan_content * {font-family: 'Roboto', sans-serif  !important;}
.clan_content {padding:0 0 6rem;  min-height:50rem; text-align: center;}

.pb_clan .pb_sub_con .inner {max-width:1800px;}
.clan_content .search_area {padding:6rem 2rem; background:url('../../images/common/clan/bg_ptn01.png') 0 0 repeat-x; background-color:rgba(0, 0, 0, 0.3) !important; margin-bottom:6rem;}
.clan_content .search_area.on {background:url('../../images/common/clan/bg_ptn01.png') 0 0 repeat-x, url('../../images/common/clan/bg_ptn01.png') 0 bottom repeat-x;}
.clan_search {font-size:0;}
.clan_search .select {letter-spacing:0.01rem; text-align:left; position:relative; z-index:1; display:inline-block; vertical-align:top;  width:220px;}
.clan_search .select .sel_on {display:block; width:100%; height:48px; line-height:48px; padding:0 2.4rem; border:1px solid #00ffcc; background:rgba(0, 255, 205, 0.2) url('../../images/common/clan/sel_arr.png') right 2.4rem center no-repeat; font-size:14px; font-weight:400; color:#00ffcc; padding:0 2.5rem;}
.clan_search .select .sel_list {position:absolute; left:0; right:0; display:none;}
.clan_search .select li {border:1px solid #00ffcc; border-top:0;}
.clan_search .select li a {transition:none; display:block; background:#000; font-size:14px; color:#00ffcc; padding:1.5rem 2.4rem;}
.clan_search .select li a:hover {transition:none; background:url('../../images/common/clan/sel_yl_lt.png') left 4px top 4px no-repeat, url('../../images/common/clan/sel_yl_rt.png') right 4px top 4px no-repeat, url('../../images/common/clan/sel_yl_lb.png') left 4px bottom 4px no-repeat, url('../../images/common/clan/sel_yl_rb.png') right 4px bottom 4px no-repeat; background-color:#000; color:#ffff00;}
.clan_search .c_s_box {position:relative;  height:48px; line-height:48px;  display:inline-block; vertical-align:top; }
.clan_search .c_s_box input {padding:0 2.4rem; border:1px solid #00ffcc; background:rgba(0, 255, 205, 0.1); border-left:0; width:313px; height:100%;   outline:none; color:#00ffcc; font-size:14px;}
.clan_search .c_s_box input:focus{background:#000;}
.clan_search .c_s_box input:-webkit-autofill, .clan_search .c_s_box input:-webkit-autofill:hover, .clan_search .c_s_box input:-webkit-autofill:focus, .clan_search .c_s_box input:-webkit-autofill:active { -webkit-text-fill-color: #00ffcc; -webkit-box-shadow: 0 0 0px 1000px rgba(0, 255, 205, 0.1) inset; transition: background-color 5000s ease-in-out 0s;}
.clan_search .c_s_box button {font-family: 'Chakra Petch'; border:1px solid #00ffcc; cursor:pointer; width:144px; margin-left:1.2rem; height:100%;  text-align:center; background:rgba(255, 255, 255, 0); font-size:14px; font-weight:700; color:#00ffcc; text-transform:uppercase; letter-spacing: 0.08rem;  background:url('../../images/common/clan/cp_gr_lt.png') left 4px top 4px no-repeat, url('../../images/common/clan/cp_gr_rt.png') right 4px top 4px no-repeat, url('../../images/common/clan/cp_gr_lb.png') left 4px bottom 4px no-repeat, url('../../images/common/clan/cp_gr_rb.png') right 4px bottom 4px no-repeat, url('../../images/common/clan/mb_yl_lr.png') left 0 top 50% no-repeat, url('../../images/common/clan/mb_yl_lr.png') right 0 top 50% no-repeat, url('../../images/common/clan/mb_yl_tb.png') left 50% top 0 no-repeat, url('../../images/common/clan/mb_yl_tb.png') left 50% bottom 0 no-repeat;}
.clan_search .c_s_box button img {vertical-align:middle; position:relative; top:-2px;}
.clan_search .c_s_box button:hover {border:1px solid #ffff00; color:#ffff00; background:url('../../images/common/clan/cp_yl_lt.png') left 4px top 4px no-repeat, url('../../images/common/clan/cp_yl_rt.png') right 4px top 4px no-repeat, url('../../images/common/clan/cp_yl_lb.png') left 4px bottom 4px no-repeat, url('../../images/common/clan/cp_yl_rb.png') right 4px bottom 4px no-repeat, url('../../images/common/clan/mb_gr_lr.png') left 0 top 50% no-repeat, url('../../images/common/clan/mb_gr_lr.png') right 0 top 50% no-repeat, url('../../images/common/clan/mb_gr_tb.png') left 50% top 0 no-repeat, url('../../images/common/clan/mb_gr_tb.png') left 50% bottom 0 no-repeat; background-color:rgba(255, 255, 0, 0.15); }
.clan_content .search_area .result .txt {color:#00ffcc; font-size:14px; margin-top:2rem;}
.clan_content .search_area .result .txt span {color:#fff;}
.clan_content .search_area .result .txt font {color:#ffff00;}
.clan_content .search_area .result .clan_board {margin-top:2rem; margin-bottom:0;}
.clan_content .search_area .result .clan_board .n_list li {background:none; border-bottom:1px solid rgba(255, 255, 255, 0.15);}
.clan_content .search_area .result .clan_board .n_list li.n_tit {border:none; background:rgba(255, 255, 255, 0.1);}
.clan_content .search_area .result .clan_board .n_list li > div {color:#aaa;}
.clan_content .search_area .result .clan_board .n_list li.n_con .date, .clan_content .search_area .result .clan_board .n_list li.n_con .master a {color:#fff;}
.clan_content .search_area .result .clan_board .n_list li.n_tit:before, .clan_content .search_area .result .clan_board .n_list li.n_tit:after, .clan_content .search_area .result .clan_board .n_list:before, .clan_content .search_area .result .clan_board .n_list:after {display:none;}
.clan_content .search_area .result .clan_board .n_list li:before, .clan_content .search_area .result .clan_board .n_list li:after, .clan_content .search_area .result .clan_board .n_list:before, .clan_content .search_area .result .clan_board .n_list:after {background:#999;}
.clan_content .search_area .result .clan_board .n_list li.n_con font {color:#ffff00;}
.clan_content .search_area .result .paging ul li a {border:1px solid #777; color:#777;}
.clan_content .search_area .result .paging ul li.on a, .clan_content .search_area .result .paging ul li a:hover {color:#dddddd; background:rgba(255, 255, 255, 0.1);}
.clan_content .search_area .result .paging ul li.prev:hover a, .clan_content .search_area .result .paging ul li.next:hover a, .clan_content .search_area .result .paging ul li.first:hover a, .clan_content .search_area .result .paging ul li.last:hover a {border:1px solid #ffff00; background:rgba(255, 255, 0, 0.15);}
.clan_content .search_area .result .paging ul li.prev a:before {background-image:url('../../images/common/clan/page_l02.png');}
.clan_content .search_area .result .paging ul li.next a:before {background-image:url('../../images/common/clan/page_r02.png');}
.clan_content .search_area .result .paging ul li.first a:before {background-image:url('../../images/common/clan/page_ll02.png');}
.clan_content .search_area .result .paging ul li.last a:before {background-image:url('../../images/common/clan/page_rr02.png');}



.clan_board {margin-top:6rem;}
.clan_board:first-child {margin-top:0;}
.clan_board .n_nodata { padding:5.5rem 0; color:#00ffcc; font-size:14px;   border: 1px solid rgba(0, 255, 204, 0.5); background: url(../../images/common/clan/ptn03.png) 0 0 repeat;}
.clan_board .n_nodata img {display:block; margin:0 auto 1.3rem;}
.clan_board .inner > .tit {position:relative; letter-spacing: 0.06rem; padding:1rem 0; margin-bottom:1rem; background:url('../../images/common/clan/tit_bar.png') 0 0 no-repeat; font-size:17px; color:#ffcc00; font-weight:700; font-family: 'Chakra Petch'; text-transform:uppercase; text-align:left;}
.clan_board .inner > .tit span {color:#aaaaaa;  font-family: 'Chakra Petch' !important;}
.clan_board .inner > .tit .n_more {position:absolute; top:0; right:0;  font-family: 'Chakra Petch' !important;}

.clan_board .n_list {position:relative;}
.clan_board .n_list:before, .clan_board .n_list:after {top:0;}
.clan_board .n_list li > div {display:inline-block; vertical-align:middle; color:#00ffcc; font-size:14px; overflow: hidden; text-overflow: ellipsis;-ms-text-overflow: ellipsis;  white-space: nowrap;  word-wrap: normal;}
.clan_board .n_list li { width:100%; background:rgba(0, 255, 204, 0.1); border-bottom:1px solid rgba(0, 255, 204, 0.15); position:relative;}
.clan_board .n_list li:before, .clan_board .n_list li:after, .clan_board .n_list:before, .clan_board .n_list:after  {content:''; display:block; position:absolute; width:4px; height:2px; background:#00ffcc; bottom:-1px;}
.clan_board .n_list li:before, .clan_board .n_list:before {left:0;}
.clan_board .n_list li:after, .clan_board .n_list:after {right:0;}
.clan_board .n_list li.n_tit:before, .clan_board .n_list li.n_tit:after, .clan_board .n_list:before, .clan_board .n_list:after {width:2px;}
.clan_board .n_list li .no, .clan_board .n_list li .date, .clan_board .n_list li .win {width:144px;}
.clan_board .n_list li .exp {width:80px;}
.clan_board .n_list li .win span {color:#fff;}
.clan_board .n_list li .name, .clan_board .n_list li .master, .clan_board .n_list li .rank {width:calc((100% - 512px) / 3); text-align:left; }
.clan_board .n_list li .no, .clan_board .n_list li .name {padding-right:2.4rem; padding-left:2.4rem;}
.clan_board .n_list li.n_tit {font-size:0; border:1px solid rgba(0, 255, 204, 0.5); background:url('../../images/common/clan/ptn01.png') 0 0 repeat; display:table; width:100%;}
.clan_board .n_list li.n_tit > div {padding-top:1.2rem; padding-bottom:1.2rem; font-size:12px; font-weight:700; letter-spacing:0.02rem; text-transform:uppercase; text-align:center; }
.clan_board .n_list li.n_con > div {padding-top:1.3rem; padding-bottom:1.3rem;}
.clan_board .n_list li.n_con .name a, .clan_board .n_list li.n_con .master, .clan_board .n_list li.n_con .exp, .clan_board .n_list li.n_con .date {color:#fff; }
.clan_board .n_list li.n_con img {width:20px; height:20px; position:relative;  vertical-align:middle; margin-right:0.8rem;}
.clan_board .n_list li.n_con:hover {background:rgba(0, 255, 204, 0.2);}
.clan_board .n_list li.n_con:last-child {border-bottom:1px solid rgba(0, 255, 204, 0.5);}
.clan_board .n_list li.n_con:hover:before, .clan_board .n_list li.n_con:hover:after {background:#ffff00;}
.clan_board .n_list li.n_con .name a, .clan_board .n_list li.n_con .master a {max-width: 100%; vertical-align:middle; color:#fff; font-weight:700; overflow: hidden; text-overflow: ellipsis;-ms-text-overflow: ellipsis;  white-space: nowrap;  word-wrap: normal;}
.clan_board .n_list li.n_con .name a:hover, .clan_board .n_list li.n_con .master a:hover {color:#ffff00; text-decoration:underline;}

.clan_board .paging {margin-top:2.4rem;}

.rank_clan > .list {font-size:0; margin-left:-2.4rem; }
.rank_clan > .list > li {width:25%; padding-left:2.4rem; display:inline-block; vertical-align:top;}
.rank_clan > .list > li .con {border:1px solid rgba(0, 255, 204, 0.5); position:relative;}
.rank_clan > .list > li .con:hover {background:rgba(0, 255, 204, 0.1);} 
.rank_clan > .list > li .con:before, .rank_clan > .list > li .con:after {content:''; display:block; position:absolute; top:-7px; width:12px; height:12px; background:url('../../images/common/clan/bg_plus02.png') 0 0 repeat;}
.rank_clan > .list > li .con:before {left:-7px;}
.rank_clan > .list > li .con:after {right:-7px;}
.rank_clan > .list > li .con .top {background:url('../../images/common/clan/ptn03.png') 0 0 repeat; padding:3.6rem 2rem 3rem; position:relative; }

.rank_clan > .list > li .con .top .num { position:absolute; font-size:25px; color:#00ffcc; font-weight:700; top:1.2rem; right:1.2rem; width:48px; height:48px; text-align:center; line-height:48px; background:url('../../images/common/clan/bg_rank.png') 0 0 no-repeat;}
.rank_clan > .list > li .con .top .name {margin:2rem 0 0; }
.rank_clan > .list > li .con .top .name a { font-size:20px; color:#fff; font-weight:700; overflow: hidden; text-overflow: ellipsis;-ms-text-overflow: ellipsis;  white-space: nowrap;  word-wrap: normal;}
.rank_clan > .list > li .con .top .name a:hover {text-decoration:underline; color:#ffff00;}
.rank_clan > .list > li .con .top .rank {font-size:14px; color:#00ffcc;}
.rank_clan > .list > li .con .top .rank img {width:20px; height:20px; margin-right:0.6rem; vertical-align:middle;}
.rank_clan > .list > li .con .bottom {background:rgba(0, 255, 204, 0.1);}
.rank_clan > .list > li .con .bottom .info li {position:relative; padding:1.5rem 2.4rem 1.5rem 8rem; text-align:right; font-size:14px; color:#fff; position:relative; border-top:1px solid rgba(0, 255, 204, 0.5);}
.rank_clan > .list > li .con .bottom .info li a {color:#fff;}
.rank_clan > .list > li .con .bottom .info li a:hover {color:#ffff00; text-decoration:underline;}
.rank_clan > .list > li .con .bottom .info li span {text-transform:uppercase; color:#00ffcc; font-size:12px; position:absolute; top:50%; left:2.4rem; transform:translate(0, -50%);}
.rank_clan > .list > li .con .bottom .info li font {color:#00ffcc;}
.rank_clan > .list > li .con .bottom .info li:before, .rank_clan > .list > li .con .bottom .info li:after {content:''; display:block; position:absolute; width:4px; height:2px; background:#00ffcc; bottom:-1px;}
.rank_clan > .list > li .con .bottom .info li:before {left:-1px;}
.rank_clan > .list > li .con .bottom .info li:after {right:-1px;}
.rank_clan > .list > li .con .bottom .info li:last-child:before, .rank_clan > .list > li .con .bottom .info li:last-child:after {bottom:-7px; width:12px; height:12px; background:url('../../images/common/clan/bg_plus02.png') 0 0 repeat;}
.rank_clan > .list > li .con .bottom .info li:last-child:before {left:-7px;}
.rank_clan > .list > li .con .bottom .info li:last-child:after {right:-7px;}
.rank_clan > .list > li .date {margin-top:2rem; text-transform:uppercase; font-size:11px; font-weight:500; color:#999999; letter-spacing:0.04rem;}
.rank_clan > .list > li .date span {color:#00ffcc; margin-left:0.7rem; padding-left:0.7rem; border-left:1px solid #999999;}
.rank_clan > .list > li.no01 .con {border:1px solid rgba(255, 255, 0, 0.5);}
.rank_clan > .list > li.no01 .con:hover {background:rgba(255, 255, 0, 0.1);} 
.rank_clan > .list > li.no01 .con .top {background:url('../../images/common/clan/ptn02.png') 0 0 repeat;}
.rank_clan > .list > li.no01 .con .top .num {font-size:34px; color:#ffff00; right:2rem; top:-1.6rem; width:68px; height:68px; line-height:68px; background:url('../../images/common/clan/bg_rank1.png') 0 0 no-repeat;}
.rank_clan > .list > li.no01 .con .top .rank{color:#ffff00;}
.rank_clan > .list > li.no01 .con .bottom {background:rgba(255, 255, 0, 0.1);}
.rank_clan > .list > li.no01 .con .bottom .info li {border-top:1px solid rgba(255, 255, 0, 0.5);}
.rank_clan > .list > li.no01 .con .bottom .info li span{color:#ffff00;}
.rank_clan > .list > li.no01 .con .bottom .info li font {color:#ffff00;}
.rank_clan > .list > li.no01 .con .bottom .info li:before, .rank_clan > .list > li.no01 .con .bottom .info li:after{background:#ffff00;}
.rank_clan > .list > li.no01 .con .bottom .info li:last-child:before, .rank_clan > .list > li.no01 .con .bottom .info li:last-child:after, .rank_clan > .list > li.no01 .con:before, .rank_clan > .list > li.no01 .con:after  {background:url('../../images/common/clan/bg_plus01.png') 0 0 no-repeat;}
.rank_clan > .list > li.no01 .date span {color:#ffff00; }

.gm_pick {border-top:2px solid #00ffcc; background:rgba(0, 255, 204, 0.1); padding:7rem 0; margin-top:6rem; margin-bottom:-6rem;}
.gm_pick > .tit {text-transform:uppercase; font-size:17px; color:#ffff00; font-weight:700; font-family: 'Chakra Petch'; letter-spacing:0.06rem;}
.gm_pick > .tit span {color:#33ffdd;}

/* new clan */
.clan_board .clan_list .list {text-align:left;}
.clan_board .clan_list .list li {margin-bottom:1.2rem;}
.clan_board .clan_list .list li:last-child {margin-bottom:0;}
.clan_board .clan_list .list .con {overflow:hidden; font-size:0; height:96px; border:1px solid #116655; background:rgba(0, 255, 204, 0.1); border-left:4px solid #00ffcc;}
.clan_board .clan_list .list .con:hover {background: rgba(0, 255, 204, 0.2);}
.clan_board .clan_list .list .con > div {  float:left; border-left:1px solid rgba(0, 255, 204, 0.2);}
.clan_board .clan_list .list .con img {vertical-align:middle; margin-right:8px; width: 20px; height: 20px;}
.clan_board .clan_list .list .info {height:100%;}
.clan_board .clan_list .list .logo {position:relative; }

.clan_board .clan_list .list .logo {position:relative; width:106px; height:106px; margin:1.2rem; overflow:hidden; border:none !important; transform: scale(0.5);     top: -17px;}
.clan_board .clan_list .list .logo img {max-width:none; position:absolute; width: auto; height: auto;}
.clan_board .clan_list .list .logo .c_bg {z-index:1;}
.clan_board .clan_list .list .logo .c_bg_line {z-index:2;}
.clan_board .clan_list .list .logo .c_img {z-index:3;}
.clan_board .clan_list .list .logo .c_img_line {z-index:4;}
.clan_board .clan_list .list .logo img.bg {z-index:1; max-width:100%; }
.clan_board .clan_list .list .logo img.img_logo {z-index:2; max-width:100%;}
.clan_board .clan_list .list .info {padding:2rem 3.6rem 0; text-align:left; }
.clan_board .clan_list .list .info .name a {max-width:100%; font-size:20px; color:#fff; font-weight:700; overflow: hidden; text-overflow: ellipsis;-ms-text-overflow: ellipsis;  white-space: nowrap;  word-wrap: normal;}
.clan_board .clan_list .list .info .name a:hover {text-decoration:underline; color:#ffff00;}
.clan_board .clan_list .list .info .rank {color:#00ffcc; font-size:14px; margin-top:5px;}
.clan_board .clan_list .list .ml {display:table; text-align:right; width:25%; height:50%; font-size:14px; color:#ffffff; position:relative; padding:0 2.4rem 0 10.6rem; word-break: break-all;}
.clan_board .clan_list .list .ml .txt {display:table-cell; vertical-align:middle;}
.clan_board .clan_list .list .ml .txt a {color:#fff;}
.clan_board .clan_list .list .ml .txt a:hover {color:#ffff00; text-decoration:underline;}
.clan_board .clan_list .list .ml span {font-size:12px; color:#00ffcc; font-weight:700; position:absolute; left:2.4rem; top:50%; transform:translate(0, -50%); text-transform:uppercase; }

.clan_board .clan_list .list .info {width:calc(50% - 130px);}
.clan_board .clan_list .list .exp, .clan_board .clan_list .list .win {border-top:1px solid rgba(0, 255, 204, 0.2); }
.clan_board .clan_list .list .win font {color:#00ffcc;}

/* rank clan */
.clan_board.rank_clan .clan_list .list .con {border-color:#555; border-left-color:#888888; background:rgba(136, 136, 136, 0.1);} 
.clan_board.rank_clan .clan_list .list .con:hover {background: rgb(136, 136, 136, 0.2);}
.clan_board.rank_clan .clan_list .list .num {width:120px; color:#bbbbbb; font-size:20px; font-weight:700; line-height:96px; text-align:center; border:none;}
.clan_board.rank_clan .clan_list .list .info {position:relative; padding-left:10.8rem; width:calc(50% - 120px);}
.clan_board.rank_clan .clan_list .list .logo {position:absolute; top:-4px; left:0; width:106px; height:106px; margin:0 auto; overflow:hidden; transform:scale(0.5);}
.clan_board.rank_clan .clan_list .list .logo img {max-width:none; position:absolute;}
.clan_board.rank_clan .clan_list .list .logo .c_bg {z-index:1;}
.clan_board.rank_clan .clan_list .list .logo .c_bg_line {z-index:2;}
.clan_board.rank_clan .clan_list .list .logo .c_img {z-index:3;}
.clan_board.rank_clan .clan_list .list .logo .c_img_line {z-index:4;}
.clan_board.rank_clan .clan_list .list .logo img.bg {z-index:1; top:0; left:0; max-width:100%;}
.clan_board.rank_clan .clan_list .list .logo img.img_logo {z-index:2; top:0; left:0; max-width:100%;}
.clan_board.rank_clan .clan_list .list .info .rank {color:#aaaaaa;}
.clan_board.rank_clan .clan_list .list .ml span {color:#bbbbbb;}
.clan_board.rank_clan .clan_list .list .con > div {border-color:#555;}
.clan_board.rank_clan .clan_list .list .win font {color:#bbbbbb;}

.clan_board.rank_clan .clan_list .list .no02 .con, .clan_board.rank_clan .clan_list .list .no03 .con {border-color: #116655; background:rgba(0, 255, 204, 0.1) url('../../images/common/clan/bar_rank02.png') 4px 0 no-repeat; border-left-color:#00ffcc; border-left-width:2px; background-size: auto 100%;}
.clan_board.rank_clan .clan_list .list .no02 .num, .clan_board.rank_clan .clan_list .list .no03 .num {font-size:25px; color:#00ffcc; background:url('../../images/common/clan/bg_rank.png') center center no-repeat;}
.clan_board.rank_clan .clan_list .list .no02 .win font, .clan_board.rank_clan .clan_list .list .no03 .win font {color: #00ffcc;}
.clan_board.rank_clan .clan_list .list .no02 .info .rank, .clan_board.rank_clan .clan_list .list .no03 .info .rank {color: #00ffcc;}
.clan_board.rank_clan .clan_list .list .no02 .ml span, .clan_board.rank_clan .clan_list .list .no03 .ml span {color: #00ffcc;}
.clan_board.rank_clan .clan_list .list .no02 .con > div, .clan_board.rank_clan .clan_list .list .no03 .con > div {border-color:rgba(0, 255, 204, 0.2);}
.clan_board.rank_clan .clan_list .list .no02 .con:hover, .clan_board.rank_clan .clan_list .list .no03 .con:hover {background: rgba(0, 255, 204, 0.2) url('../../images/common/clan/bar_rank02.png') 4px 0 no-repeat;}

.clan_board.rank_clan .clan_list .list .no01 .con {border-color: rgba(255, 255, 0, 0.2);  background:rgba(255, 255, 0, 0.1) url('../../images/common/clan/bar_rank01.png') 4px 0 no-repeat; border-left-color:#ffff00; border-left-width:2px; background-size: auto 100%;}
.clan_board.rank_clan .clan_list .list .no01 .num {font-size:25px; color: #ffff00; background:url('../../images/common/clan/bg_rank1.png') center center no-repeat; background-size:56px auto;}
.clan_board.rank_clan .clan_list .list .no01 .win font {color: #ffff00;}
.clan_board.rank_clan .clan_list .list .no01 .info .rank {color: #ffff00;}
.clan_board.rank_clan .clan_list .list .no01 .ml span {color: #ffff00;}
.clan_board.rank_clan .clan_list .list .no01 .con > div {border-color:rgba(255, 255, 0, 0.2);}
.clan_board.rank_clan .clan_list .list .no01 .con:hover {background: rgba(255, 255, 0, 0.2) url('../../images/common/clan/bar_rank01.png') 4px 0 no-repeat;}

.clan_board.rank_clan .clan_list .list .my .con {position:relative; height:108px; border:none; border-bottom:1px solid #776644; padding-top:12px; background:rgba(0, 0, 0, 0.3) url('../../images/common/clan/bg_ptn01.png') 0 0 repeat-x;}
.clan_board.rank_clan .clan_list .list .my .lg_txt {border:none; font-size:14px; position:absolute; top:50%; left:50%; transform:translate(-50% , -50%); margin-top:6px; color:#aaaaaa; text-align:center; float:none;}
.clan_board.rank_clan .clan_list .list .my .lg_txt font {color:#ffff00;}.clan_board.rank_clan .clan_list .list .my .num {color: #aa9977; }
.clan_board.rank_clan .clan_list .list .my .win font {color: #aa9977;}
.clan_board.rank_clan .clan_list .list .my .info .rank {color: #aa9977;}
.clan_board.rank_clan .clan_list .list .my .ml span {color: #aa9977;}
.clan_board.rank_clan .clan_list .list .my .name a {position:relative; padding-right:65px;}
.clan_board.rank_clan .clan_list .list .my .name a:after {top:50%; right:0; transform:translate(0 , -50%); content:''; display:block; width:56px; height:17px; background:url('../../images/common/clan/my_clan.png') 0 0 no-repeat; position:absolute;}


/* clan_info */
.clan_section .top { max-width: 1800px; width: 100%; margin: 0 auto; padding:0 2.5rem;}
.clan_section .top > .inner { position:relative; text-align:left; background:url('../../images/common/clan/bg_ptn01.png') 0 0 repeat-x,  url('../../images/common/clan/bg_top.png') center 0 no-repeat ; background-color:rgba(0, 0, 0, 0.3); padding:7.2rem 6rem 6rem; font-size:0;}

.clan_section .top .logo {position:relative; display:inline-block; vertical-align:top; width:106px; height:106px; margin:4.9rem; overflow:hidden; z-index:1;}
.clan_section .top .logo img {max-width:none; position:absolute;}
.clan_section .top .logo .c_bg {z-index:1;}
.clan_section .top .logo .c_bg_line {z-index:2;}
.clan_section .top .logo .c_img {z-index:3;}
.clan_section .top .logo .c_img_line {z-index:4;}
.clan_section .top .logo img.bg {z-index:1; top:0; left:0; bottom:0; right:0; max-width:100%;}
.clan_section .top .logo img.img_logo {z-index:2; top:0; left:0; bottom:0; right:0; max-width:100%;}

.clan_section .top .info { display:inline-block; vertical-align:top; margin-left:6rem; position:relative;}
.clan_section .top .info:before {content:''; display:block; position:absolute; top:0; left:-26.4rem; width:204px; height:204px; background:url('../../images/common/clan/bg_logo.png') 0 0 no-repeat;}

.clan_section .top .info .name {line-height:1; font-size:42px; color:#fff; font-weight:900;}
.clan_section .top .rank {color:#00ffcc; font-size:12px; padding:0 2px 0 0; margin:1rem 0 3rem;  position:relative;  margin-left:24px;}
.clan_section .top .rank:after {width:12px; height:24px; background:url('../../images/common/clan/rank_bar_r.png') 0 0 no-repeat; right:0;  top:50%; content:''; display:block; position:absolute; transform:translate(0 , -50%);}
.clan_section .top .rank:before {height:24px; width:4px; border-top:1px solid #00ffcc; border-bottom:1px solid #00ffcc; box-sizing:border-box; left:28px; top:50%; content:''; display:block; position:absolute; transform:translate(0 , -50%);}
.clan_section .top .rank img {border:2px solid #00ffcc; width:24px; height:24px; top:50%; left:-24px; position:absolute; transform:translate(0 , -50%);}
.clan_section .top .rank div {height:18px; line-height:18px; padding-left:8px;} 
.clan_section .top .rank .bar { background:url('../../images/common/clan/rank_bar.png') 0 0 repeat; width:346px;}
.clan_section .top .rank .bar_on { position:absolute; left:0; top:0; color:#000; background:#00ffcc; word-break: break-all; overflow:hidden;}
.clan_section .top.aos-animate .rank .bar_on {opacity:0; animation: animate-width cubic-bezier(0.35, 0.95, 0.67, 0.99) 0.4s forwards; animation-delay:0.3s;}
.clan_section .top .master, .clan_section .top .members {color:#fff; font-size:17px; position:relative; text-align:right; padding:1rem 0; border-bottom:1px solid #666666;}
.clan_section .top .master a {color:#fff; padding-right:28px; position:relative;}
.clan_section .top .master a:before {content:''; display:block; width:16px; height:16px; background-repeat:no-repeat; background-position:0 0; background-image:url('../../images/common/clan/btn_more.png'); position:absolute; top:50%; right:0; transform:translate(0 , -50%);}
.clan_section .top .master a:hover {color:#ffff00; text-decoration:underline;}
.clan_section .top .master a:hover:before {background-position:0 -16px;}
.clan_section .top .master span, .clan_section .top .members span {letter-spacing:0.06rem; color:#00ffcc; font-size:13px; font-weight:600; font-family: 'Chakra Petch'; text-transform:uppercase; position:absolute; left:0; top:50%; transform:translate(0 , -50%);}
.clan_section .top .members {color:#aaaaaa;}
.clan_section .top .members font {color:#00ffcc;}
.clan_section .top .date {margin-top:2.4rem; color:#ffffff; font-size:11px; font-weight:500; text-transform:uppercase;}
.clan_section .top .date span {color:#aaaaaa; display:inline-block; padding-right:6px; margin-right:6px; border-right:1px solid #aaa;}
.clan_section .top .master:before, .clan_section .top .master:after, .clan_section .top .members:before, .clan_section .top .members:after  {content:''; display:block; position:absolute; width:4px; height:2px; background:#00ffcc; bottom:-1px;}
.clan_section .top .master:before, .clan_section .top .members:before {left:0;}
.clan_section .top .master:after, .clan_section .top .members:after {right:0;}
.clan_section .top .about {position:absolute; top:7.2rem; right:6rem;}
.clan_section .top .about .tit {font-size:10px; margin-bottom:3.6rem; padding-right:1.8rem;  color:#00ffcc; font-weight:700; text-transform:uppercase; text-align:right; background:url('../../images/common/clan/tit_about_bg01.png') 0 0 no-repeat, url('../../images/common/clan/tit_about_bg02.png') right center no-repeat;}
.clan_section .top .about .desc {max-height:164px; width:335px; padding-right:4.8rem; }
.clan_section .top .about .desc .txt {font-size:14px; color:#fff; line-height:2.1;}
.clan_section .top .about .desc {overflow-y:scroll;}
.clan_section .top .about .desc::-webkit-scrollbar { width: 12px;}
.clan_section .top .about .desc::-webkit-scrollbar-thumb {height: 50%; background:url('../../images/common/clan/scroll.png') right 0 no-repeat; border-radius: 0;}
.clan_section .top .about .desc::-webkit-scrollbar-track {background: none; }
.clan_section .top .no_clan {text-align:center;}
.clan_section .top .no_clan img {vertical-align:middle;}
.clan_section .top .no_clan .con {text-align:left; vertical-align:middle; padding-left:6rem; display:inline-block; color:#fff;}
.clan_section .top .no_clan .con .txt {font-size:16px;}
.clan_section .top .no_clan .con .txt span {margin-bottom:3px; text-transform:uppercase; display:block; font-size:24px; font-weight:700; font-family: 'Chakra Petch'; letter-spacing:0.06rem;}
.clan_section .top .no_clan .con .go_clan {margin-top:2.4rem; letter-spacing: 0.08rem; position:relative; text-transform:uppercase; display:block; width:156px; height:36px; line-height:36px; padding-left:1.8rem;  color:#00ffcc; font-weight:700; font-size:14px; font-family: 'Chakra Petch'; border:1px solid #00ffcc; text-align:left;}
.clan_section .top .no_clan .con .go_clan:before {content:''; top:50%; right:0.9rem; position:absolute;  font-family: 'Chakra Petch'; letter-spacing:0.08rem; transform:translate(0, -50%); width:6px; height:10px; display:block; background-repeat:no-repeat; background-position:0 0; background-image:url('../../images/common/clan/arr_r.png');}
.clan_section .top .no_clan .con .go_clan:hover {color:#ffff00; border-color:#ffff00;}
.clan_section .top .no_clan .con .go_clan:hover:before { background-position:0 -10px; }

.clan_section .medal {margin:6rem 0 7.2rem; text-align:right;}
.clan_section .medal .inner {position:relative;}
.clan_section .medal .step {position:absolute; top:0; right:0;}
.clan_section .medal .con {text-align:left; position:relative; padding:3.6rem 4.8rem 3.6rem 30rem; background:url('../../images/common/clan/ptn01.png') 0 0 repeat; border:1px solid rgba(0, 255, 204, 0.5);}
.clan_section .medal .con:before {box-shadow:0 6px 12px rgba(0, 0, 0, 0.2); content:''; display:block; position:absolute; top:-6px; bottom:-6px; left:12.6rem; width:48px; background:url('../../images/common/clan/tit_medal_ptn.jpg') 0 0 repeat;}
.clan_section .medal .con h3 {position:absolute; top:50%; transform:translate(0, -50%); left:4.8rem; }
.clan_section .medal .chart {padding:10px 0; border-left:1px solid #00ffff; position:relative; z-index:1;}
.clan_section .medal .chart .remain {border-top:1px solid #00ffcc; border-bottom:1px solid #00ffcc; display:inline-block; font-size:18px; color:#fff; font-weight:300; height:29px; line-height:28px; padding-left:1.7rem; margin-bottom:2.2rem;}
.clan_section .medal .chart .remain font {color:#00ffcc;}
.clan_section .medal .chart .remain span {margin-left:34px;position:relative; color:#000000; display:inline-block;  background:#00ffcc;}
.clan_section .medal .chart .remain span:after, .clan_section .medal .chart .remain span:before {content:''; display:inline-block; position:absolute; top:0; bottom:0;}
.clan_section .medal .chart .remain span:before {background:url('../../images/common/clan/bg_remain01.png') 0 0 no-repeat; width:34px; left:-34px; }
.clan_section .medal .chart .remain span:after {background:url('../../images/common/clan/bg_remain02.png') 0 0 no-repeat; width:72px; right:-72px;}
.clan_section .medal .chart .graph {border-bottom:1px solid #00ffcc; position:relative; width:100%; background:url('../../images/common/clan/bar_medal_bg.png') 0 0 repeat; height:24px;}
.clan_section .medal .chart .graph:before {content:''; display:block; position:absolute; top:-12px; bottom:-12px; width:1px; right:0; background:#00ffff;}
.clan_section .medal .chart .graph .bar { position:absolute; top:0; bottom:0; background:#00ffcc url('../../images/common/clan/bar_medal_on.jpg') 0 0 no-repeat;}
.clan_section .medal .step { font-size:17px; text-transform:uppercase; line-height:32px; background:url('../../images/common/clan/ptn05.png') 0 0 repeat; color:#ffffff; font-weight:700; padding:0 1rem 0 4.2rem; position:absolute; right:7.2rem; z-index:1; top:4rem; height:32px; border-top:1px solid #ffff00; border-bottom:1px solid #ffff00; display:inline-block; min-width:116px;}
.clan_section .medal .step span {position:relative; color:#ffff00;}
.clan_section .medal .step img {position:absolute; top:0; left:-6px;}
.clan_section .medal .step:before, .clan_section .medal .step:after {content:''; display:block; position:absolute; top:-1px; bottom:0; width:6px;}
.clan_section .medal .step:before {left:-6px; background:url('../../images/common/clan/bg_step_l.png') 0 0 no-repeat;}
.clan_section .medal .step:after {right:-6px; background:url('../../images/common/clan/bg_step_r.png') 0 0 no-repeat;}
.clan_section .medal .con:after {content:''; display:block; position:absolute; top:-7px; bottom:-7px; left:-7px; right:-7px; background:url('../../images/common/clan/bg_plus02.png') 0 0 no-repeat, url('../../images/common/clan/bg_plus02.png') 0 bottom no-repeat, url('../../images/common/clan/bg_plus02.png') right top no-repeat, url('../../images/common/clan/bg_plus02.png') right bottom no-repeat;}
.clan_section .medal.aos-animate .chart .graph .bar {opacity:0; animation: animate-width cubic-bezier(0.35, 0.95, 0.67, 0.99) 0.4s forwards;  animation-delay:0.3s;}

/* community */
.clan_commu .list_top {margin-top:5rem; text-align:left; position:relative;}
.clan_search02 .select {width:144px;}
.clan_search02 .c_s_box input {padding:0 4.8rem 0 2.4rem; width:288px;}
.clan_search02 .c_s_box button {border:none; outline:none; position:absolute; top:50%;  right:1.8rem;; font-size:0; width:12px; height:12px; transform:translate(0 , -50%); background-repeat:no-repeat; background-position:0 0; background-image:url('../../images/common/clan/icon_search.png');}

.clan_commu .clan_search02 {margin-bottom:2.4rem;}
.clan_commu .go_write {text-transform:uppercase; letter-spacing:0.08rem; font-family: 'Chakra Petch'; position:absolute; top:0; right:0; width:144px; height:48px; line-height:48px; padding:0 2.4rem; border:1px solid #00ffcc; color:#00ffcc; font-size:14px; font-weight:700;}
.clan_commu .go_write:before {position:absolute; content:''; display:block; width:12px; height:12px; top:50%; right:2.4rem; transform:translate(0 , -50%); background-repeat:no-repeat; background-position:0 0; background-image:url('../../images/common/clan/icon_write.png');}
.clan_commu .go_write:hover {color:#ffff00; border-color:#ffff00; background-color:rgba(255, 255, 0, 0.2);}
.clan_commu .go_write:hover:before {background-position:0 -12px;}
.clan_commu .list_con .list {border-left:4px solid #00ffcc;}
.clan_commu .list_con .list .con {font-size:0; background:rgba(0, 255, 204, 0.1);}
.clan_commu .list_con .list .con > div {text-align:left; padding:0 2.4rem; height:60px; line-height:60px; font-size:14px; color:#fff; display:inline-block; vertical-align:top; border-bottom:1px solid #116655; border-right:1px solid #116655; overflow: hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis; white-space: nowrap; word-wrap: normal;}
.clan_commu .list_con .list li:first-child .con > div {border-top:1px solid #116655;}
.clan_commu .list_con .list .con .tit {padding-left:3.6rem; width:calc(100% - 491px); padding-right:0;}
.clan_commu .list_con .list .con .tit .txt {max-width:100%; display:inline-block; position:relative; padding-right:8rem;}
.clan_commu .list_con .list .con .tit .txt .desc {display:inline;}
.clan_commu .list_con .list .con .tit .txt .desc span {margin-left:0.3rem; display:inline; vertical-align:middle; color:#00ffcc;}
.clan_commu .list_con .list .con .tit .txt .desc .new {margin-left:1.2rem;}
.clan_commu .list_con .list .con .tit .txt .desc .new img {vertical-align:middle;}
.clan_commu .list_con .list .con .tit a {vertical-align:middle; max-width: 100%; font-size:16px; color:#fff; overflow: hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis; white-space: nowrap; word-wrap: normal;}
.clan_commu .list_con .list .con .writer { width:210px;}
.clan_commu .list_con .list .con .writer img {width:20px; height:20px; vertical-align:middle; margin-right:8px;}
.clan_commu .list_con .list .con .date {width:138px;  color:#00ffcc; text-transform:uppercase; text-align:center;}
.clan_commu .list_con .list .con .topic {padding-left:7rem; width:143px; text-transform:uppercase;  text-align:right; position:relative; }
.clan_commu .list_con .list .con .topic span {letter-spacing: 0.02rem; position:absolute; font-size:10px; font-weight:700; color:#00ffcc; top:50%; left:2.4rem; transform:translate(0 , -50%);}
.clan_commu .list_con .list .con:hover {background:rgba(0, 255, 204, 0.2);}
.clan_commu .list_con .list .con .tit a:hover {color:#ffff00; text-decoration:underline;}
.clan_commu .list_con .list.manager {border-left:4px solid #ffff00;}
.clan_commu .list_con .list.manager .con {background:rgba(255, 255, 0, 0.1);}
.clan_commu .list_con .list.manager .con > div {border-color:#777700;}
.clan_commu .list_con .list.manager li:first-child .con > div  {border-color:#777700;}
.clan_commu .list_con .list.manager .con .topic span {color:#ffff00;}
.clan_commu .list_con .list.manager .con .date {color:#ffff00;}
.clan_commu .list_con .list.manager .con:hover {background:rgba(255, 255, 0, 0.2);}
.clan_commu .list_con .tit_manager {margin-top:4.8rem; text-align:left; position:relative; font-size:14px; color:#999999; font-weight:700; font-family: 'Chakra Petch';   padding-left:1.6rem; background:url('../../images/common/clan/icon_my.png') 0 0 no-repeat; margin-bottom:1rem;}
.clan_commu .list_con .tit_manager span {color:#ffff00;}
.clan_commu .list_con .paging {margin-top:3.6rem; }
.clan_commu .result .txt {background:rgba(0, 255, 204, 0.1); border:1px solid #116655; border-left:4px solid #00ffcc; padding:15rem 2rem; font-size:14px; color:#00ffcc; margin-bottom:6rem;}
.clan_commu .result .txt font {color:#ffff00;}
.go_list {font-family: 'Chakra Petch'; border:1px solid #00ffcc; cursor:pointer; width:192px; height:60px; line-height:60px;  text-align:center; background:rgba(255, 255, 255, 0); font-size:14px; font-weight:700; color:#00ffcc; text-transform:uppercase; letter-spacing: 0.08rem;  background:url('../../images/common/clan/cp_gr_lt.png') left 4px top 4px no-repeat, url('../../images/common/clan/cp_gr_rt.png') right 4px top 4px no-repeat, url('../../images/common/clan/cp_gr_lb.png') left 4px bottom 4px no-repeat, url('../../images/common/clan/cp_gr_rb.png') right 4px bottom 4px no-repeat, url('../../images/common/clan/mb_yl_lr.png') left 0 top 50% no-repeat, url('../../images/common/clan/mb_yl_lr.png') right 0 top 50% no-repeat, url('../../images/common/clan/mb_yl_tb.png') left 50% top 0 no-repeat, url('../../images/common/clan/mb_yl_tb.png') left 50% bottom 0 no-repeat;}
.go_list img {vertical-align:middle; position:relative; top:-2px;}
.go_list:hover {border:1px solid #ffff00; color:#ffff00; background:url('../../images/common/clan/cp_yl_lt.png') left 4px top 4px no-repeat, url('../../images/common/clan/cp_yl_rt.png') right 4px top 4px no-repeat, url('../../images/common/clan/cp_yl_lb.png') left 4px bottom 4px no-repeat, url('../../images/common/clan/cp_yl_rb.png') right 4px bottom 4px no-repeat, url('../../images/common/clan/mb_gr_lr.png') left 0 top 50% no-repeat, url('../../images/common/clan/mb_gr_lr.png') right 0 top 50% no-repeat, url('../../images/common/clan/mb_gr_tb.png') left 50% top 0 no-repeat, url('../../images/common/clan/mb_gr_tb.png') left 50% bottom 0 no-repeat; background-color:rgba(255, 255, 0, 0.15); }

/* view */
.clan_commu .view .go_list {margin-top:6rem;}
.clan_commu .view .top { background:rgba(0, 255, 204, 0.1); position:relative;}
.clan_commu .view .top:before, .clan_commu .view .top:after {content:''; display:block; position:absolute; top:-7px; width:12px; height:12px; background:url('../../images/common/clan/bg_plus02.png') 0 0 repeat;}
.clan_commu .view .top:before {left:-7px;}
.clan_commu .view .top:after {right:-7px;}
.clan_commu .view .top .info:before, .clan_commu .view .top .info:after {content:''; display:block; position:absolute; bottom:-7px; width:12px; height:12px; background:url('../../images/common/clan/bg_plus02.png') 0 0 repeat;}
.clan_commu .view .top .info:before {left:-7px;}
.clan_commu .view .top .info:after {right:-7px;}
.clan_commu .view .top .tit {padding:3.6rem; background:url('../../images/common/clan/ptn03.png') 0 0 repeat; border:1px solid rgba(0, 255, 204, 0.5); font-size:18px; color:#fff; line-height:1.6;}
.clan_commu .view .top .info {border:1px solid #116655; border-top:0; text-align:left; padding:2rem 3.6rem; font-size:0;}
.clan_commu .view .top .info > div {display:inline-block; vertical-align:middle; font-size:14px;}
.clan_commu .view .top .info .writer {color:#fff; }
.clan_commu .view .top .info .writer a {color:#fff; word-break: break-all;}
.clan_commu .view .top .info .writer a:hover {text-decoration:underline; color:#ffff00;}
.clan_commu .view .top .info .writer img {width:20px; height:20px; vertical-align:middle; margin-right:8px;}
.clan_commu .view .top .info .date {color:#00ffcc; margin-left:0.8rem; padding-left:0.8rem; border-left:1px solid #00ffcc;}
.clan_commu .view .btns_view {margin:3.6rem 0 0; padding-bottom:1.2rem; text-align:center; font-size:0;}
.clan_commu .view .btns_view a {position:relative; padding-left:1.8rem; padding-right: 4.3rem; margin:0 0.6rem; text-transform:uppercase;  height:36px; line-height:36px; text-align:left; font-size:14px; font-weight:700; font-family: 'Chakra Petch';}
.clan_commu .view .btns_view a:before {content:''; display:block; width:12px; height:12px; right:1.8rem; top:50%; transform:translate(0, -50%); position:absolute; background-repeat:no-repeat; background-position:0 0;}
.clan_commu .view .btns_view .btn_modify, .clan_commu .view .btns_view .btn_reply {color:#00ffcc; border:1px solid #00ffcc;}
.clan_commu .view .btns_view .btn_delete {color:#aaaaaa; border:1px solid #aaaaaa;}
.clan_commu .view .btns_view .btn_modify:before {background-image:url('../../images/common/clan/icon_modify.png');}
.clan_commu .view .btns_view .btn_delete:before {background-image:url('../../images/common/clan/icon_delete.png');}
.clan_commu .view .btns_view .btn_reply:before {background-image:url('../../images/common/clan/icon_reply.png'); width:10px; height:10px;}
.clan_commu .view .btns_view a:hover:before {background-position:0 -12px;}
.clan_commu .view .btns_view .btn_reply:hover:before {background-position:0 -10px;}
.clan_commu .view .btns_view .btn_modify:hover , .clan_commu .view .btns_view .btn_reply:hover {background:rgba(255, 255, 0, 0.15); border:1px solid #ffff00; color:#ffff00;}
.clan_commu .view .btns_view .btn_delete:hover {background:rgba(0, 255, 204, 0.15); border:1px solid #00ffcc; color:#00ffcc;}
.clan_commu .view .con {position:relative; margin:3.6rem 0 0; padding-bottom:6rem; border-bottom:1px solid #00ffcc; word-break:break-all; font-size:16px; color:#dddddd; line-height:2.2;} 
.clan_commu .view .con:before, .clan_commu .view .con:after  {content:''; display:block; position:absolute; width:4px; height:2px; background:#00ffcc; bottom:-1px;}
.clan_commu .view .con:before {left:0;}
.clan_commu .view .con:after {right:0;}
.clan_commu .view .con table {margin:0 auto; max-width:100%; table-layout:fixed;  word-break:break-all;}
.clan_commu .view .con table td, .clan_commu .view .con table tr {width:auto !important; height:auto !important; word-break:break-all; white-space: pre-wrap;}
.clan_commu .view .con img {max-width:100% !important;  height:auto !important;}
.clan_commu .view .cmt_area {text-align:left; padding-right:3.6rem;}
.clan_commu .view .cmt_area .num {font-size:12px; color:#aaa; text-transform:uppercase; position:relative; top:-2.5rem;}
.clan_commu .view .cmt_area .num span {color:#00ffcc;}
.clan_commu .view .cmt_area .num img {vertical-align:middle; margin-right:9px; }
.clan_commu .view .cmt_area .list > li {padding-bottom:1.2rem;  border-bottom:1px solid #555555; position:relative; margin-bottom:1.2rem;}
.clan_commu .view .cmt_area .list > li:last-child {margin-bottom:0;}
.clan_commu .view .cmt_area .list > li:before, .clan_commu .view .cmt_area .list > li:after  {content:''; display:block; position:absolute; width:4px; height:2px; background:#00ffcc; bottom:-1px;}
.clan_commu .view .cmt_area .list > li:before {left:0;}
.clan_commu .view .cmt_area .list > li:after {right:0;}
.clan_commu .view .cmt_area .cmt {position:relative; border-left:4px solid #00ffcc; padding-top:2.7rem; padding-left:3.6rem; padding-bottom:3.6rem;}
.clan_commu .view .cmt_area .desc {position:relative;} 
.clan_commu .view .cmt_area .info > div {display:inline-block; vertical-align:middle; font-size:14px; position:relative; }
.clan_commu .view .cmt_area .info .writer {color:#00ffcc;}
.clan_commu .view .cmt_area .info .writer img {width:20px; height:20px; vertical-align:middle; margin-right:8px;}
.clan_commu .view .cmt_area .info .writer span {vertical-align: middle; margin-left:8px; font-family:'Roboto'; font-weight:500; letter-spacing:0.01rem; text-transform:uppercase; display:inline-block; width:50px; height:17px; line-height:16px; text-align:center; border-radius:4px; color:#00ffcc; font-size:10px; border:1px solid #00ffcc;}

.clan_commu .view .cmt_area .info .date {color:#aaaaaa; margin-left:0.8rem; padding-left:0.8rem; border-left:1px solid #aaaaaa;}
.clan_commu .view .cmt_area .txt {color:#dddddd; font-size:16px; line-height:1.8; margin:2rem 0 0; word-break: break-all;}
.clan_commu .view .cmt_area .btns_view {right:0; top:3.6rem; position:absolute; margin:0;}
.clan_commu .view .cmt_area .btns_view a { height:24px; line-height:23px; font-size:11px; padding-left:1rem;}
.clan_commu .view .btns_view a:before {right:0.8rem;}
.clan_commu .view .btns_view .btn_delete:before {width:10px; height:10px; background-size:10px auto;}
.clan_commu .view .btns_view .btn_delete:hover:before {background-position:0 -10px;}
.clan_commu .view .cmt_area .cmt .comment { position:relative;}
.clan_commu .view .cmt_area .cmt .reply {margin-bottom:3.6rem;}
.clan_commu .view .cmt_area .cmt .comment .reply {border-left:2px solid #999999; background:rgba(68, 68, 68, 0.3);  padding:3.6rem;  margin-bottom:1.2rem; position:relative; }
.clan_commu .view .cmt_area .cmt .comment .btns_view { right:3.6rem;}
.clan_commu .view .cmt_area li.on_writer .info .writer a { position:relative;}
.clan_commu .view .cmt_area li.on_writer .info .writer {padding-right:6rem;}
.clan_commu .view .cmt_area li.on_writer .info .writer:before {content:'WRITER'; display:block; position:absolute; top:50%; right:0; transform:translate(0, -50%); width:50px; height:17px; line-height:17px; text-align:center; border-radius:4px; color:#00ffcc; font-size:10px; font-weight:500; border:1px solid #00ffcc;}

.clan_commu .view .submit_area { margin:1.2rem 0; background:rgba(0, 255, 204, 0.1);  border-left:2px solid #00ffcc; padding-right:216px; position:relative;}
.clan_commu .view .submit_area textarea {line-height:2.1; position:relative; left:-2px; font-size:14px; color:#00ffcc; height:144px; padding:3.6rem; width:100%; border:none; background:none;}
.clan_commu .view .submit_area textarea:focus {background:#000; padding:3.6rem;  outline:1px solid #00ffcc;}
.clan_commu .view .submit_area .btn_submit {top:3.6rem; right:3.6rem; position:absolute; font-family: 'Chakra Petch'; border:1px solid #00ffcc; cursor:pointer; width:144px; height:72px; line-height:72px;    text-align:center; background:rgba(255, 255, 255, 0); font-size:14px; font-weight:700; color:#00ffcc; text-transform:uppercase; letter-spacing: 0.08rem;  background:url('../../images/common/clan/cp_gr_lt.png') left 4px top 4px no-repeat, url('../../images/common/clan/cp_gr_rt.png') right 4px top 4px no-repeat, url('../../images/common/clan/cp_gr_lb.png') left 4px bottom 4px no-repeat, url('../../images/common/clan/cp_gr_rb.png') right 4px bottom 4px no-repeat, url('../../images/common/clan/mb_yl_lr.png') left 0 top 50% no-repeat, url('../../images/common/clan/mb_yl_lr.png') right 0 top 50% no-repeat, url('../../images/common/clan/mb_yl_tb.png') left 50% top 0 no-repeat, url('../../images/common/clan/mb_yl_tb.png') left 50% bottom 0 no-repeat;}
.clan_commu .view .submit_area .btn_submit img {vertical-align:middle; position:relative; top:-2px;}
.clan_commu .view .submit_area .btn_submit:hover {border:1px solid #ffff00; color:#ffff00; background:url('../../images/common/clan/cp_yl_lt.png') left 4px top 4px no-repeat, url('../../images/common/clan/cp_yl_rt.png') right 4px top 4px no-repeat, url('../../images/common/clan/cp_yl_lb.png') left 4px bottom 4px no-repeat, url('../../images/common/clan/cp_yl_rb.png') right 4px bottom 4px no-repeat, url('../../images/common/clan/mb_gr_lr.png') left 0 top 50% no-repeat, url('../../images/common/clan/mb_gr_lr.png') right 0 top 50% no-repeat, url('../../images/common/clan/mb_gr_tb.png') left 50% top 0 no-repeat, url('../../images/common/clan/mb_gr_tb.png') left 50% bottom 0 no-repeat; background-color:rgba(255, 255, 0, 0.15); }
.clan_commu .view .first {border:1px solid #116655; padding:3.6rem;  margin-top:6rem; background:rgba(0, 255, 204, 0.1);}
.clan_commu .view .first .submit_area {margin-top:0; padding:0; border:none; background:none; padding-right:18rem;}
.clan_commu .view .first .submit_area textarea {height:204px; background:rgba(0, 255, 204, 0.1); left:0; }
.clan_commu .view .first .submit_area textarea:focus {background:#000;}
.clan_commu .view .first .submit_area .btn_submit {height:204px; top:0; right:0;}
.clan_commu .view .reply {position:relative;}

.clan_commu .view .clan_view_paging {margin-top:6rem;}
.clan_commu .view .clan_view_paging .view_list li {padding:0 138px 0 72px; font-size:14px; background:rgba(136, 136, 136, 0.1);  border:1px solid #555555; border-left:1px solid #cccccc; text-align:left; position:relative; height:72px; line-height:72px;}
.clan_commu .view .clan_view_paging .view_list li:last-child {border-top:0;}
.clan_commu .view .clan_view_paging .view_list .txt {height:100%; display:inline-block; max-width:100%; position:relative; padding:0 7.2rem 0 3.6rem; display:inline-block;}
.clan_commu .view .clan_view_paging .view_list .txt a {max-width: 100%; color:#cccccc; overflow: hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis; white-space: nowrap; word-wrap: normal;}
.clan_commu .view .clan_view_paging .view_list .txt span {color:#00ffcc; position:absolute; height:auto; line-height:normal; top:50%; right:3.6rem; transform:translate(0, -50%);}
.clan_commu .view .clan_view_paging .view_list .arr {position:absolute; top:0; left:0; bottom:0; display:block; width:72px; font-size:0; border-right:1px solid #555;}
.clan_commu .view .clan_view_paging .view_list .arr i {display:block; width:14px; height:8px; background-repeat:no-repeat; background-position:0 0; position:absolute; top:50%; left:50%; transform:translate(-50%, -50%);}
.clan_commu .view .clan_view_paging .view_list .prev .arr i {background-image:url('../../images/common/clan/veiw_arr_up.png');}
.clan_commu .view .clan_view_paging .view_list .next .arr i {background-image:url('../../images/common/clan/veiw_arr_down.png');}
.clan_commu .view .clan_view_paging .view_list li:hover .arr i {background-position:0 -8px;}
.clan_commu .view .clan_view_paging .view_list .date {text-transform:uppercase; text-align:center; position:absolute; top:0; bottom:0; right:0; width:138px; border-left:1px solid #555; color:#cccccc;}
.clan_commu .view .clan_view_paging .view_list .txt a:hover {color:#ffff00;}
.clan_commu .view .clan_view_paging .view_list li:hover {background:rgba(136, 136, 136, 0.2); border-left:1px solid #ffff00;}

/* write */
.clan_commu .write li {margin-bottom:3.6rem;}
.clan_commu .write li .tit {margin-bottom:1rem; font-size:14px; color:#00ffcc; text-transform:uppercase; letter-spacing:0.06rem; font-family: 'Chakra Petch'; font-weight:700; text-align:left; padding-left:1rem; position:relative;}
.clan_commu .write li .tit:before {content:''; display:block; position:absolute; top:2px; left:0; width:4px; height:12px; background:#00ffcc;}
.clan_commu .write li .txt {width:100%; border:1px solid #595959; border-left:2px solid #00ffcc;  }
.clan_commu .write li .txt input[type=text], .clan_commu .write li .txt textarea {width:100%; text-align:left; padding:2.6rem 3.6rem; font-size:16px; color:#fff; background:rgba(255, 255, 255, 0.05); border:none; outline:none;}
.clan_commu .write li .txt textarea {height:480px; padding-top:3rem; padding-bottom:3rem;}
.clan_commu .write li .txt input[type=text]:focus, .clan_commu .write li .txt textarea:focus {background:#000;}
.clan_commu .write li .txt input[type=text]:focus::placeholder, .clan_commu .write li .txt textarea:focus::placeholder {color:#fff;}
.clan_commu .write li .txt input[type=text]:-webkit-autofill, .clan_commu .write li .txt input[type=text]:-webkit-autofill:hover, .clan_commu .write li .txt input[type=text]:-webkit-autofill:focus, .clan_commu .write li .txt input[type=text]:-webkit-autofill:active { -webkit-text-fill-color: #fff; -webkit-box-shadow: 0 0 0px 1000px rgba(255, 255, 255, 0.05) inset; transition: background-color 5000s ease-in-out 0s;}
.clan_commu .write .on_notice {text-align:left; line-height:24px;}
.clan_commu .write .on_notice input[type=checkbox] {display:none;}
.clan_commu .write .on_notice input[type=checkbox] + label {position:relative; padding-left:36px; cursor:pointer; display:inline-block; font-size:16px; color:#cccccc;}
.clan_commu .write .on_notice input[type=checkbox] + label:before {position:absolute; left:0; top:0; display:inline-block; width:24px; height:24px; content:""; background:none; border:1px solid #00ffcc;}
.clan_commu .write .on_notice input[type=checkbox]:checked + label:before {background:url('../../images/common/clan/check_on.png') center center no-repeat; border:none;}
.clan_commu .write .btns_write {margin-top:3.6rem; font-size:0;}
.clan_commu .write .btns_write a {margin:0 1.2rem; font-family: 'Chakra Petch'; border:1px solid #00ffcc; cursor:pointer; width:192px; height:60px; line-height:60px;  text-align:center; background:rgba(255, 255, 255, 0); font-size:14px; font-weight:700; color:#00ffcc; text-transform:uppercase; letter-spacing: 0.08rem;  background:url('../../images/common/clan/cp_gr_lt.png') left 4px top 4px no-repeat, url('../../images/common/clan/cp_gr_rt.png') right 4px top 4px no-repeat, url('../../images/common/clan/cp_gr_lb.png') left 4px bottom 4px no-repeat, url('../../images/common/clan/cp_gr_rb.png') right 4px bottom 4px no-repeat, url('../../images/common/clan/mb_yl_lr.png') left 0 top 50% no-repeat, url('../../images/common/clan/mb_yl_lr.png') right 0 top 50% no-repeat, url('../../images/common/clan/mb_yl_tb.png') left 50% top 0 no-repeat, url('../../images/common/clan/mb_yl_tb.png') left 50% bottom 0 no-repeat;}
.clan_commu .write .btns_write a:hover {border:1px solid #ffff00; color:#ffff00; background:url('../../images/common/clan/cp_yl_lt.png') left 4px top 4px no-repeat, url('../../images/common/clan/cp_yl_rt.png') right 4px top 4px no-repeat, url('../../images/common/clan/cp_yl_lb.png') left 4px bottom 4px no-repeat, url('../../images/common/clan/cp_yl_rb.png') right 4px bottom 4px no-repeat, url('../../images/common/clan/mb_gr_lr.png') left 0 top 50% no-repeat, url('../../images/common/clan/mb_gr_lr.png') right 0 top 50% no-repeat, url('../../images/common/clan/mb_gr_tb.png') left 50% top 0 no-repeat, url('../../images/common/clan/mb_gr_tb.png') left 50% bottom 0 no-repeat; background-color:rgba(255, 255, 0, 0.15); }
.clan_commu .write .btns_write a.btn_cnacel {color:#999; border:1px solid #999; background:url('../../images/common/clan/cp_ge_lt.png') left 4px top 4px no-repeat, url('../../images/common/clan/cp_ge_rt.png') right 4px top 4px no-repeat, url('../../images/common/clan/cp_ge_lb.png') left 4px bottom 4px no-repeat, url('../../images/common/clan/cp_ge_rb.png') right 4px bottom 4px no-repeat, url('../../images/common/clan/mb_gr_lr.png') left 0 top 50% no-repeat, url('../../images/common/clan/mb_gr_lr.png') right 0 top 50% no-repeat, url('../../images/common/clan/mb_gr_tb.png') left 50% top 0 no-repeat, url('../../images/common/clan/mb_gr_tb.png') left 50% bottom 0 no-repeat;}
.clan_commu .write .btns_write a.btn_cnacel:hover {border:1px solid #00ffcc; color:#00ffcc; background:url('../../images/common/clan/cp_gr_lt.png') left 4px top 4px no-repeat, url('../../images/common/clan/cp_gr_rt.png') right 4px top 4px no-repeat, url('../../images/common/clan/cp_gr_lb.png') left 4px bottom 4px no-repeat, url('../../images/common/clan/cp_gr_rb.png') right 4px bottom 4px no-repeat, url('../../images/common/clan/mb_yl_lr.png') left 0 top 50% no-repeat, url('../../images/common/clan/mb_yl_lr.png') right 0 top 50% no-repeat, url('../../images/common/clan/mb_yl_tb.png') left 50% top 0 no-repeat, url('../../images/common/clan/mb_yl_tb.png') left 50% bottom 0 no-repeat; background-color:rgba(0, 255, 204, 0.15); }

/* record */
.clan_content .record {padding-bottom:7.2rem;}
.clan_content .record .inner {font-size:0;} 
.clan_content .record .section { border-bottom:1px solid #997700; position:relative;}
.clan_content .record .section:before, .clan_content .record .section:after {content:''; display:block; position:absolute; bottom:0; width:4px; height:2px; background:#ffcc33;}
.clan_content .record .section:before {left:0;}
.clan_content .record .section:after {right:0;}
.clan_content .record .section > .tit {height:60px; line-height:60px; letter-spacing:0.06rem; background:url('../../images/common/clan/tit_record.jpg') 0 0 repeat; font-size:17px; color:#cccccc; font-weight:700; text-transform:uppercase; font-family: 'Chakra Petch';}
.clan_content .record .section > .tit span {color:#ffcc00;}
.clan_content .record .clan_record .section > .tit span {color:#00ffcc;}
.clan_content .record .con {padding:3.6rem; background:#111111 url('../../images/common/clan/bg_record.png') center 0 no-repeat;     height: 408px;}
.clan_content .record .clan_record {width:50%; padding-right:4.8rem; display:inline-block; vertical-align:top;}
.clan_content .record .clan_record .match {position:relative; font-size:22px; color:#ffffff;  height:72px; line-height:72px; text-align:right; padding-right:2.6rem; border:1px solid #554422; background:rgba(136, 102, 34, 0.2); border-left:4px solid #bb9966; }
.clan_content .record .clan_record .match span {position:absolute; left:3rem; top:50%; transform:translate(0, -50%); letter-spacing:0.06rem; font-size:17px; color:#bb9966; font-weight:700; text-transform:uppercase; font-family: 'Chakra Petch';}
.clan_content .record .clan_record .match:before, .clan_content .record .clan_record .match:after {content:''; display:block; position:absolute; top:-1px; bottom:-1px;}
.clan_content .record .clan_record .match:before {width:2px; background:url('../../images/common/clan/tit_match_l.png') 0 0 no-repeat; left:3px;     background-size: auto 100%;}
.clan_content .record .clan_record .match:after {width:6px; background:url('../../images/common/clan/tit_match_r.png') 0 0 no-repeat; right:-1px;     background-size: auto 100%;}
.clan_content .record .clan_record .graph {margin-top:3.6rem;}
.clan_content .record .clan_record .graph ul {font-size:0; margin-left:-3rem;}
.clan_content .record .clan_record .graph li {display:inline-block; width:50%; padding-left:3rem; color:#aaaaaa; vertical-align:top;}
.clan_content .record .clan_record .graph .gr00 {position:relative;}
.clan_content .record .clan_record .graph .gr00 .bar {position:absolute; bottom:6rem; left:0; width:140px;  height:132px; margin:0 auto;}
.clan_content .record .clan_record .graph .gr01 .bar { height:138px; background:url('../../images/common/clan/img_win.png') center 0 no-repeat;}
.clan_content .record .clan_record .graph .gr02 .bar {background:url('../../images/common/clan/img_lose.png') center 0 no-repeat;}
.clan_content .record .clan_record .graph .gr03 .bar { background:url('../../images/common/clan/img_draw.png') center 0 no-repeat;}
.clan_content .record .clan_record .graph .gr00 .bar .bar_on {display:block; position:absolute;  bottom:0; left:0; right:0;}
.clan_content .record .clan_record .graph .gr01 .bar .bar_on {background:url('../../images/common/clan/img_win_on.png') center bottom no-repeat;}
.clan_content .record .clan_record .graph .gr02 .bar .bar_on {background:url('../../images/common/clan/img_lose_on.png') center bottom no-repeat;}
.clan_content .record .clan_record .graph .gr03 .bar .bar_on {background:url('../../images/common/clan/img_draw_on.png') center bottom no-repeat;}
.clan_content .record .clan_record .graph .desc {padding-left:14rem; padding-top:8rem; font-size:50px; font-weight:700; letter-spacing:-0.02rem; text-align:left; border-bottom:1px solid #666666; position:relative;}
.clan_content .record .clan_record .graph .desc:before, .clan_content .record .clan_record .graph .desc:after {content:''; display:block; position:absolute; bottom:0; width:2px; height:1px; background:#666;}
.clan_content .record .clan_record .graph .desc:before {left:0;}
.clan_content .record .clan_record .graph .desc:after {right:0;}
.clan_content .record .clan_record .graph .desc .tit {font-size:17px; text-transform:uppercase; font-family: 'Chakra Petch' !important; letter-spacing:0.04rem; display:block;}
.clan_content .record .clan_record .graph .num {padding-top:2rem; font-size:22px; margin-top:2px; border-top:2px solid #666666; word-break: break-all;}
.clan_content .record .clan_record .graph .gr01 .desc {color:#ffff00; border-color:#ffff00;}
.clan_content .record .clan_record .graph .gr01 .num {border-color:#ffff00;}
.clan_content .record .clan_record .graph .gr01 .desc:before, .clan_content .record .clan_record .graph .gr01 .desc:after {background:#ffff00;}
.clan_content .record .clan_record .graph .gr02 .desc {color:#00ffcc; border-color:#00ffcc;}
.clan_content .record .clan_record .graph .gr02 .num {border-color:#00ffcc;}
.clan_content .record .clan_record .graph .gr02 .desc:before, .clan_content .record .clan_record .graph .gr02 .desc:after {background:#00ffcc;}
.clan_content .record .clan_record.aos-animate .graph .gr00 .bar .bar_on {opacity:0; animation: animate-height cubic-bezier(0.35, 0.95, 0.67, 0.99) 0.4s forwards;  animation-delay:0.3s;}

.clan_content .record .season {width:50%;  font-size:0; display:inline-block; vertical-align:top;}
.clan_content .record .season > div {width:calc((100% - 2.4rem) / 2);  display:inline-block; vertical-align:top;}
.clan_content .record .season .total {margin-left:2.4rem;}
.clan_content .record .season .total .section > .tit {line-height:1.2; padding-top:1rem;}
.clan_content .record .season .con {overflow:hidden; background:#111;}
.clan_content .record .season .graph {float:left; width:24px;}
.clan_content .record .season .graph ul {height:228px; max-width:24px;}
.clan_content .record .season .graph li {margin-right:0; margin-left:auto;}
.clan_content .record .season .graph .bar {height:100%; width:100%; }
.clan_content .record .season .graph .gr01 {width:24px; background:url('../../images/common/clan/graph01.png') 0 bottom no-repeat; padding-bottom:25px;}
.clan_content .record .season .graph .gr01 .bar { background:url('../../images/common/clan/graph01_bg.png') 0 0 repeat;}
.clan_content .record .season .graph .gr02 {width:18px; background:url('../../images/common/clan/graph02.png') 0 bottom no-repeat; padding-bottom:19px;}
.clan_content .record .season .graph .gr02 .bar { background:url('../../images/common/clan/graph02_bg.png') 0 0 repeat;}
.clan_content .record .season .graph .gr03 {width:12px;background:url('../../images/common/clan/graph03.png') 0 bottom no-repeat; padding-bottom:12px;}
.clan_content .record .season .graph .gr03 .bar { background:url('../../images/common/clan/graph03_bg.png') 0 0 repeat;}

.clan_content .record .season .info {width:calc(100% - 60px); float:right;}
.clan_content .record .season .info li {padding-left:4px ;height:10.8rem; margin-bottom:1.2rem; color:#aaaaaa; background:rgba(170, 170, 170, 0.1); border-left:2px solid #666666;}
.clan_content .record .season .info li:last-child {margin-bottom:0;}
.clan_content .record .season .info li .desc {line-height:1; text-align:right; padding:2.4rem 2.4rem 2.4rem 2rem; border-left:1px solid #666666; height:100%; position:relative;}
.clan_content .record .season .info li .desc:before, .clan_content .record .season .info li .desc:after {content:''; display:block; position:absolute; left:0; width:1px; height:2px; background:#666;}
.clan_content .record .season .info li .desc:before {top:0;}
.clan_content .record .season .info li .desc:after {bottom:0;}
.clan_content .record .season .info li .desc .tit {font-size:14px; color:#aaaaaa; font-weight:700; text-transform:uppercase; font-family: 'Chakra Petch'; letter-spacing:0.04rem; text-align:left;}
.clan_content .record .season .info li .desc .per {color:#aaaaaa; font-weight:700; letter-spacing:-0.02rem; font-size:34px;}
.clan_content .record .season .info li .desc .num {    word-break: break-all; font-size:17px; color:#fff; margin-top:3px;}
.clan_content .record .season .info li.win {border-color:#ffff00; background:rgba(255, 255, 0, 0.1);}
.clan_content .record .season .info li.win .desc {border-color:#ffff00;}
.clan_content .record .season .info li.win .desc .tit, .clan_content .record .season .info li.win .desc .per {color:#ffff00;}
.clan_content .record .season .info li.lose {border-color:#00ffcc; background:rgba(0, 255, 204, 0.1);}
.clan_content .record .season .info li.lose .desc {border-color:#00ffcc;}
.clan_content .record .season .info li.lose .desc .tit, .clan_content .record .season .info li.lose .desc .per {color:#00ffcc;}


.clan_content .record .con .matching {margin-bottom:3.6rem; border-bottom:4px solid #bb9966; position:relative;}
.clan_content .record .con .matching .tit {margin-bottom:6px; font-family: 'Chakra Petch' !important; font-weight:700; font-size:14px; color:#bb9966; text-transform:uppercase; letter-spacing:0.04rem;}
.clan_content .record .con .matching .num {font-weight:700; position:relative; padding-bottom:1.4rem; border-bottom:1px solid #bb9966; margin-bottom:7px; font-size:22px; color:#fff;}
.clan_content .record .con .matching .num:before, .clan_content .record .con .matching .num:after {bottom:0;width:2px; height:2px; content:''; display:block; position:absolute;  background:#bb9966;}
.clan_content .record .con .matching .num:before {left:0;}
.clan_content .record .con .matching .num:after {right:0;}

.clan_content .bot_clan {padding:7rem 0; background:rgba(0, 255, 204, 0.1); border-top:1px solid #00ffcc; position:relative; margin-bottom:-6rem;}
.clan_content .bot_clan:before {content:''; display:block; position:absolute; bottom:0; right:0; width:474px; height:448px; background:url('../../images/common/clan/img_clan.png') 0 0 no-repeat;}
.clan_content .bot_clan .section {font-size:0; margin-left:-4.8rem;}
.clan_content .bot_clan .section .list {display:inline-block; display:inline-block; width:50%; padding-left:4.8rem; vertical-align:top;}
.clan_content .bot_clan .con > .tit {height:60px; line-height:60px; background:url('../../images/common/clan/ptn06.png') 0 0 repeat; position:relative; font-size:17px; font-weight:700; text-transform:uppercase; color:#33ffdd; letter-spacing:0.06rem; font-family: 'Chakra Petch';}
.clan_content .bot_clan .con > .tit:before, .clan_content .bot_clan .con > .tit:after {content:''; display:block; top:0; bottom:0; width:8px; position:absolute;}
.clan_content .bot_clan .con > .tit:before {left:0; background:url('../../images/common/clan/tit_mvp_l.png') left 0 no-repeat;}
.clan_content .bot_clan .con > .tit:after {right:0; background:url('../../images/common/clan/tit_mvp_r.png') right 0 no-repeat;}
.clan_content .bot_clan .detail {padding:4.8rem 3.6rem;  background:rgba(0, 255, 204, 0.1); height:48rem;}
.clan_content .bot_clan .rank li {text-align:right; background:rgba(0, 255, 204, 0.2); margin-bottom:1.6rem; position:relative; padding:1.9rem 2.4rem 1.9rem 21rem;}
.clan_content .bot_clan .rank li:before {top:50%; left:-4px; transform:translate(0, -50%); content:''; display:block; position:absolute; width:72px; height:72px; background-repeat:no-repeat; background-position:0 0;}
.clan_content .bot_clan .rank li.exp:before {background-image:url('../../images/common/clan/icon_star.png');}
.clan_content .bot_clan .rank li.kill:before {background-image:url('../../images/common/clan/icon_skull.png');}
.clan_content .bot_clan .rank li.shot:before {background-image:url('../../images/common/clan/icon_head.png');}
.clan_content .bot_clan .rank li.part:before {background-image:url('../../images/common/clan/icon_target.png');}
.clan_content .bot_clan .rank li.win:before {background-image:url('../../images/common/clan/icon_flag.png');}
.clan_content .bot_clan .rank li:last-child {margin-bottom:0;}
.clan_content .bot_clan .rank li .tit {position:absolute; top:50%; left:9rem; transform:translate(0, -50%); font-size:14px; font-weight:700; font-family: 'Chakra Petch'; letter-spacing:0.04rem; text-transform:uppercase; color:#00ffcc;}
.clan_content .bot_clan .rank li a { word-break: break-all; max-width: 100%; padding-top:3px; padding-bottom:3px; overflow: hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis;  white-space: nowrap; word-wrap: normal; color:#fff; font-size:16px; padding-right:4.8rem; position:relative;}
.clan_content .bot_clan .rank li a:before {right:0; top:50%; transform:translate(0, -50%); display:block; content:''; position:absolute; width:24px; height:24px; background-repeat:no-repeat; background-position:0 -24px; background-image:url('../../images/common/clan/go_mvp.png');}
.clan_content .bot_clan .rank li:hover {background:rgba(255, 255, 0, 0.2);}
.clan_content .bot_clan .rank li.exp:hover:before {background-image:url('../../images/common/clan/icon_star_on.png');}
.clan_content .bot_clan .rank li.kill:hover:before {background-image:url('../../images/common/clan/icon_skull_on.png');}
.clan_content .bot_clan .rank li.shot:hover:before {background-image:url('../../images/common/clan/icon_head_on.png');}
.clan_content .bot_clan .rank li.part:hover:before {background-image:url('../../images/common/clan/icon_target_on.png');}
.clan_content .bot_clan .rank li.win:hover:before {background-image:url('../../images/common/clan/icon_flag_on.png');}
.clan_content .bot_clan .rank li:hover .tit {color:#ffff00;}
.clan_content .bot_clan .rank li a:hover {text-decoration:underline; color:#ffff00;}
.clan_content .bot_clan .rank li:hover a:before {background-position:0 0;}

.clan_content .bot_clan .member .con > .tit span {position:absolute; font-size:14px; color:#00ffcc; font-weight:400; top:50%; right:4.8rem; transform:translate(0, -50%); line-height:1;}
.clan_content .bot_clan .member .con > .tit span font {color:#ffff00;}
.clan_content .bot_clan .over_wrap {overflow-y:scroll; max-height:380px; padding-right:14rem;}
.clan_content .bot_clan .over_wrap::-webkit-scrollbar { width: 6px;}
.clan_content .bot_clan .over_wrap::-webkit-scrollbar-thumb {height: 30%; background: #00ffcc; border-radius: 3px;}
.clan_content .bot_clan .over_wrap::-webkit-scrollbar-track {background: none; }
.clan_content .bot_clan .over_wrap li {padding:1.3rem 2.4rem; border-top: 1px solid transparent;  border-image: linear-gradient(to right, rgba(0, 255, 204, 0.3), rgba(255, 255, 255, 0));  border-image-slice: 1; text-align:left; position:relative;}
.clan_content .bot_clan .over_wrap li:last-child {border-bottom: 1px solid transparent; }
.clan_content .bot_clan .over_wrap li:before {content:''; display:block; position:absolute; top:-1px; width:4px; height:2px; background:#00ffcc;}
.clan_content .bot_clan .over_wrap li:before {left:0;}
.clan_content .bot_clan .over_wrap li a {position:relative; font-size:14px; color:#ffffff;  word-break: break-all; max-width: 100%; overflow: hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis;  white-space: nowrap; word-wrap: normal; padding-right:3.4rem;}
.clan_content .bot_clan .over_wrap li a img {width:20px; height:20px; margin-right:11px; vertical-align:middle;}
.clan_content .bot_clan .over_wrap li a:before {right:0; top:50%; transform:translate(0, -50%); display:block; content:''; position:absolute; width:16px; height:16px; background-repeat:no-repeat; background-position:0 0; background-image:url('../../images/common/clan/go_member.png');}
.clan_content .bot_clan .over_wrap li a:hover {text-decoration:underline; color:#ffff00;}
.clan_content .bot_clan .over_wrap li a:hover:before {background-position:0 -16px;}

/* clan medal */
.clan_content .clan_medal .cm_explan {text-align:left; padding:6.5rem 7.2rem; padding-right:58.8rem; border: 1px solid rgba(0, 255, 204, 0.5); background: url(../../images/common/clan/ptn03.png) 0 0 repeat; position:relative;}
.clan_content .clan_medal .cm_explan:before {content:''; display:block; position:absolute; top:-6px; bottom:-6px; right:-6px; left:-6px; background:url('../../images/common/clan/bg_plus02.png') 0 0 no-repeat, url('../../images/common/clan/bg_plus02.png') right top no-repeat, url('../../images/common/clan/bg_plus02.png') left bottom no-repeat, url('../../images/common/clan/bg_plus02.png') right bottom no-repeat;}
.clan_content .clan_medal .cm_explan .tit {margin-bottom:3rem; letter-spacing:0.04rem; font-family: 'Chakra Petch' !important; color:#ffffff; font-weight:700; font-size:34px; text-transform:uppercase; line-height:1.1;}
.clan_content .clan_medal .cm_explan .tit span {font-family: 'Chakra Petch' !important; color:#ffff00; position:relative; padding:0 8px; background:#000;}
.clan_content .clan_medal .cm_explan .tit span font {font-family: 'Chakra Petch' !important; color:#ff66ff;}
.clan_content .clan_medal .cm_explan .clan_ex_img {position:absolute; top:50%; right:0; transform:translate(0 , -50%);}
.clan_content .clan_medal .cm_explan ul { margin-left:6px;}
.clan_content .clan_medal .cm_explan ul li {padding:1.2rem 1.2rem 1.2rem 2.4rem;  word-break:keep-all; margin-bottom:1.2rem; background:rgba(0, 255, 204, 0.8); position:relative; color:#000; font-size:16px; line-height:1.5;}
.clan_content .clan_medal .cm_explan ul li:before, .clan_content .clan_medal .cm_explan ul li:after {position:absolute; content:''; display:block; top:0; bottom:0;}
.clan_content .clan_medal .cm_explan ul li:before {left:-6px; width:6px; background:url('../../images/common/clan/bg_ex_l.png') 0 0 repeat-y;}
.clan_content .clan_medal .cm_explan ul li:after {right:0; width:12px; background:url('../../images/common/clan/bg_ex_r_t.jpg') 0 0 no-repeat, url('../../images/common/clan/bg_ex_r_b.jpg') right bottom no-repeat;}
.clan_content .clan_medal .cm_explan .info {color:#00ffcc; font-size:16px; margin-top:2.4rem;}

.clan_content .clan_medal .cm_howto {margin-top:6.7rem; }
.clan_content .clan_medal .cm_howto > .tit {text-transform:uppercase; margin-bottom:3.8rem; font-size:24px; color:#fff; font-weight:700; text-transform:uppercase; letter-spacing:0.04rem; font-family: 'Chakra Petch' !important;} 
.clan_content .clan_medal .cm_howto > .tit font {font-family: 'Chakra Petch' !important; color:#ffcc00;}
.clan_content .clan_medal .cm_howto > ul {display:flex; margin-left:-3.2rem;}
.clan_content .clan_medal .cm_howto > ul > li {width:25%; flex-grow:1; padding-left:3.2rem;}
.clan_content .clan_medal .cm_howto .con {position:relative; border-bottom:1px solid #997700; height:100%; padding:4rem 2.4rem;  background:rgba(0, 0, 0, 0.8) url('../../images/common/clan/bg_howto_top.jpg') 0 0 repeat-x;}
.clan_content .clan_medal .cm_howto .con:before, .clan_content .clan_medal .cm_howto .con:after {content:''; display:block; bottom:0; width:4px; height:2px; background:#ffcc33; position:absolute; }
.clan_content .clan_medal .cm_howto .con:before {left:0;}
.clan_content .clan_medal .cm_howto .con:after {right:0;}
.clan_content .clan_medal .cm_howto .con .tit {text-transform:uppercase; letter-spacing:0.06rem; margin-bottom:3.2rem; font-family: 'Chakra Petch' !important; font-size:17px; font-weight:700; color:#cccccc;}
.clan_content .clan_medal .cm_howto .con .tit > span {font-family: 'Chakra Petch' !important; color:#ffcc00;}
.clan_content .clan_medal .cm_howto .con li {word-break: keep-all; position:relative; text-align:left; color:#ffffff; font-size:15px; line-height:1.6; padding-left:2.7rem;}
.clan_content .clan_medal .cm_howto .con li span {font-weight:500; font-size:13px; color:#000000; position:absolute; top:3px; left:0; display:inline-block; width:18px; height:18px; text-align:center; line-height:18px; border-radius:2px; background:#ffcc00; border:1px solid #ffff00; box-shadow:0 5px 10px rgba(0, 0, 0, 0.3); } 
.clan_content .clan_medal .cm_howto .con .thum {box-shadow:0 12px 30px rgba(0, 0, 0, 0.4); margin:0 auto 3.6rem;}
.clan_content .clan_medal .cm_howto .con li font {color:#ffcc00;}
.clan_content .clan_medal .cm_howto .con .howto_c {font-family: 'Chakra Petch' !important; font-size:14px; color:#00ffcc; text-align:left; margin-top:2px; line-height:1.7;}

/* summernote */
.clan_content .note-editor.note-frame .note-editing-area .note-editable {background:none; font-size:16px; color:#fff; padding: 2.6rem 3.6rem; text-align:left;}
.clan_content .modal.show .modal-dialog {}
.clan_content .modal-content {border-radius:0; border:none;  background:url('../../images/common/clan/bg_summer.jpg') 0 0 no-repeat; background-size:cover;}
.clan_content .modal-header {position:relative; border:1px solid #00ffcc; border-radius: 0; padding:0.8rem 1.8rem; background:rgba(0, 255, 204, 0.15); letter-spacing: 0.06rem;}
.clan_content .modal-header:before, .modal-header:after {content:''; display:block; top:50%; transform:translate(0 , -50%); width:2px; height:8px; background:#ffff00; position:absolute;}
.clan_content .modal-header:before {left:-1px;}
.clan_content .modal-header:after {right:-1px;}
.clan_content .modal-title {margin:0 auto !important; font-size:14px; color:#00ffcc; font-weight:700; text-transform:uppercase; }
.clan_content .modal-header .close {position:absolute;}
.clan_content .modal-body {border-left:1px solid #008866; border-right:1px solid #008866; padding:2.4rem;}
.clan_content .modal-footer {border:1px solid #008866; border-top:none; padding:0 2.4rem 2.4rem;}
.clan_content .modal-header .close {margin:0; padding:0; position:absolute; right:1.8rem; top:50%; transform:translate(0 , -50%); width:21px; height:18px; background:url('../../images/common/clan/modal_close.png') 0 0 no-repeat; font-size:0;}
.clan_content .modal-body label {display:block; text-transform:uppercase; font-size:14px; color:#00ffcc; font-weight:700; text-align:left; letter-spacing: 0.06rem;}
.clan_content .write li .txt .modal-body .form-control, .clan_content .write li .txt .modal-body input[type=file] {width:100%; font-size:14px; color:#aaaaaa; padding:1.1rem 2.4rem;  background:rgba(255, 255, 255, 0.05); border:1px solid #555558; border-left:2px solid #00ffcc; }
.clan_content .write li .txt .modal-body input[type=file] {padding-left:12px;}
.clan_content .modal-body .form-group:last-child {margin-bottom:0;}
.clan_content .modal-body .form-control:focus {color:#aaaaaa; }
.clan_content .modal .btn-primary, .clan_content .btn-primary.disabled, .clan_content .btn-primary:disabled {margin:0 auto; opacity: 1; height:36px;  text-transform:uppercase; font-size:14px; color:#00ffcc; font-weight:700; background:none; border:1px solid #00ffcc; border-radius:0;     padding: 0 2rem;}
.clan_content .modal .btn-primary:hover, .clan_content .btn-primary.disabled:hover, .clan_content .btn-primary:disabled:hover { border-color:#ffff00; color:#ffff00; background:rgba(255, 255, 0, 0.15);}
.clan_content .modal[aria-label="Help"] .modal-body {text-align:left; overflow-y:scroll !important; overflow-x: visible !important;}
.clan_content .modal[aria-label="Help"] kbd {background:#00ffcc; border-radius:3px; font-size:11px; color:#000000; font-weight:700; text-transform:uppercase;}
.clan_content .modal[aria-label="Help"] label {width:130px !important; display:inline-block; vertical-align:top;}
.clan_content .modal[aria-label="Help"] span {font-size:14px; color:#aaaaaa; vertical-align:top;}
.clan_content .modal[aria-label="Help"] .modal-footer a {font-size:14px;}
.clan_content .write li:nth-child(2) .txt {border:none;}
.clan_content .write li .modal-body .txt input[type=text], .clan_commu .write li .modal-body .txt textarea {width: 100%; font-size:14px; border: 1px solid #595959;  border-left: 2px solid #00ffcc; background: rgba(255, 255, 255, 0.05); padding: 1.1rem 2.4rem;}
.clan_content .write li .modal-body .txt input[type=text]:focus, .clan_commu .write li .modal-body .txt textarea:focus {background:#000; box-shadow:none;}
.clan_content .write li .modal-body .txt input[type=text]:focus::placeholder, .clan_commu .write li .modal-body .txt textarea:focus::placeholder {color:#fff;}
.clan_content .write li .txt .modal-body .form-control:focus, .clan_content .write li .txt .modal-body input[type=file]:focus {background:#000; box-shadow:none;}
.clan_content .write li .txt .modal-body .form-control:focus::placeholder, .clan_content .write li .txt .modal-body input[type=file]:focus::placeholder {color:#fff;}
.clan_content .write label.custom-control {padding-left:0; cursor:pointer;}
.clan_content .write .custom-control-description {font-size:14px; color:#dddddd; letter-spacing:0.01rem; font-family:'Roboto' !important; font-weight:400;}
.clan_content .write .custom-checkbox input[type=checkbox] {display:none;}
.clan_content .write .custom-checkbox input[type=checkbox] + .custom-control-indicator {position:relative; padding-left:36px; cursor:pointer; display:inline-block; font-size:14px; color:#cccccc;}
.clan_content .write .custom-checkbox input[type=checkbox] + .custom-control-indicator:before {position:absolute; left:0; top:-16px; display:inline-block; width:24px; height:24px; content:""; background:none; border:1px solid #00ffcc;}
.clan_content .write .custom-checkbox input[type=checkbox]:checked + .custom-control-indicator:before {background:url('../../images/common/clan/check_on.png') center center no-repeat; border:none;}
.clan_content .note-popover .popover-content, .clan_content .card-header.note-toolbar {text-align:left;}
.clan_content .note-editor.note-frame .note-statusbar {background-color: hsla(0,0%,50.2%,.11);  border-top: 1px solid rgba(0,0,0,.2);}
.clan_content .note-editor.note-frame {border: 1px solid #595959; background:none;}
.clan_content .note-toolbar-wrapper {background-color: #3c3c3c;   border-color: #282828;}
.clan_content .btn-group > .btn {    color: #ffffff;  background-color: #424242;  border-color: #424242;}
.clan_commu .view .con {text-align:left;}
.clan_content .table-bordered {border:1px solid #aaa;}
.clan_content .table-bordered th, .clan_content .table-bordered td {border:1px solid #aaa; color: #fff;  padding: 1rem;}
.clan_content ol, .clan_content ol li {list-style-type: decimal;}
.clan_content ol li {margin-bottom:none;}

/* clanmark */
.rank_clan > .list > li .con .top .logo {position:relative; width:106px; height:106px; margin:0 auto; overflow:hidden;}
.rank_clan > .list > li .con .top .logo img {max-width:none; position:absolute;}
.rank_clan > .list > li .con .top .logo .c_bg {z-index:1;}
.rank_clan > .list > li .con .top .logo .c_bg_line {z-index:2;}
.rank_clan > .list > li .con .top .logo .c_img {z-index:3;}
.rank_clan > .list > li .con .top .logo .c_img_line {z-index:4;}
.rank_clan > .list > li .con .top .logo img.bg {z-index:1; top:0; left:0; bottom:0; right:0; max-width:100%;}
.rank_clan > .list > li .con .top .logo img.img_logo {z-index:2; top:0; left:0; bottom:0; right:0; max-width:100%;}


.cf01 .c_bg {filter: brightness(0) saturate(100%) invert(12%) sepia(99%) saturate(2657%) hue-rotate(8deg) brightness(89%) contrast(104%);}
.cf01 .c_bg_line {filter: brightness(0) saturate(100%) invert(82%) sepia(16%) saturate(7499%) hue-rotate(357deg) brightness(98%) contrast(107%);}
.cf02 .c_bg {filter: brightness(0) saturate(100%) invert(36%) sepia(89%) saturate(1981%) hue-rotate(11deg) brightness(98%) contrast(101%);}
.cf02 .c_bg_line {filter: brightness(0) saturate(100%) invert(69%) sepia(28%) saturate(2111%) hue-rotate(9deg) brightness(102%) contrast(106%);}
.cf03 .c_bg {filter: brightness(0) saturate(100%) invert(74%) sepia(84%) saturate(657%) hue-rotate(355deg) brightness(103%) contrast(101%);}
.cf03 .c_bg_line {filter: brightness(0) saturate(100%) invert(51%) sepia(11%) saturate(7064%) hue-rotate(2deg) brightness(104%) contrast(104%);}
.cf04 .c_bg {filter: brightness(0) saturate(100%) invert(65%) sepia(99%) saturate(498%) hue-rotate(18deg) brightness(99%) contrast(106%);}
.cf04 .c_bg_line {filter: brightness(0) saturate(100%) invert(14%) sepia(99%) saturate(6523%) hue-rotate(163deg) brightness(93%) contrast(101%);}
.cf05 .c_bg {filter: brightness(0) saturate(100%) invert(73%) sepia(47%) saturate(1577%) hue-rotate(35deg) brightness(96%) contrast(102%);}
.cf05 .c_bg_line {filter: brightness(0) saturate(100%) invert(15%) sepia(80%) saturate(3173%) hue-rotate(207deg) brightness(94%) contrast(101%);}
.cf06 .c_bg {filter: brightness(0) saturate(100%) invert(48%) sepia(68%) saturate(4498%) hue-rotate(76deg) brightness(104%) contrast(105%);}
.cf06 .c_bg_line {filter: brightness(0) saturate(100%) invert(76%) sepia(72%) saturate(1684%) hue-rotate(360deg) brightness(104%) contrast(101%);}
.cf07 .c_bg {filter: brightness(0) saturate(100%) invert(68%) sepia(67%) saturate(4442%) hue-rotate(163deg) brightness(99%) contrast(104%);}
.cf07 .c_bg_line {filter: brightness(0) saturate(100%) invert(17%) sepia(99%) saturate(2030%) hue-rotate(203deg) brightness(95%) contrast(106%);}
.cf08 .c_bg {filter: brightness(0) saturate(100%) invert(26%) sepia(53%) saturate(3773%) hue-rotate(207deg) brightness(91%) contrast(102%);}
.cf08 .c_bg_line {filter: brightness(0) saturate(100%) invert(74%) sepia(61%) saturate(827%) hue-rotate(158deg) brightness(105%) contrast(101%);}
.cf09 .c_bg {filter: brightness(0) saturate(100%) invert(13%) sepia(29%) saturate(6381%) hue-rotate(211deg) brightness(90%) contrast(110%);}
.cf09 .c_bg_line {filter: brightness(0) saturate(100%) invert(70%) sepia(74%) saturate(779%) hue-rotate(3deg) brightness(97%) contrast(101%);}
.cf10 .c_bg {filter: brightness(0) saturate(100%) invert(22%) sepia(51%) saturate(1859%) hue-rotate(268deg) brightness(87%) contrast(98%);}
.cf10 .c_bg_line {filter: brightness(0) saturate(100%) invert(68%) sepia(93%) saturate(949%) hue-rotate(243deg) brightness(103%) contrast(106%);}

.cm01 .c_img {filter: brightness(0) saturate(100%) invert(12%) sepia(99%) saturate(2657%) hue-rotate(8deg) brightness(89%) contrast(104%);}
.cm01 .c_img_line {filter: brightness(0) saturate(100%) invert(88%) sepia(37%) saturate(3715%) hue-rotate(335deg) brightness(106%) contrast(101%);}
.cm02 .c_img {filter: brightness(0) saturate(100%) invert(36%) sepia(89%) saturate(1981%) hue-rotate(11deg) brightness(98%) contrast(101%);}
.cm02 .c_img_line {filter: brightness(0) saturate(100%) invert(75%) sepia(59%) saturate(1578%) hue-rotate(0deg) brightness(106%) contrast(105%);}
.cm03 .c_img {filter: brightness(0) saturate(100%) invert(74%) sepia(84%) saturate(657%) hue-rotate(355deg) brightness(103%) contrast(101%);}
.cm03 .c_img_line {filter: brightness(0) saturate(100%) invert(9%) sepia(53%) saturate(4493%) hue-rotate(353deg) brightness(101%) contrast(117%);}
.cm04 .c_img {filter: brightness(0) saturate(100%) invert(65%) sepia(99%) saturate(498%) hue-rotate(18deg) brightness(99%) contrast(106%);}
.cm04 .c_img_line {filter: brightness(0) saturate(100%) invert(30%) sepia(24%) saturate(1743%) hue-rotate(29deg) brightness(95%) contrast(101%);}
.cm05 .c_img {filter: brightness(0) saturate(100%) invert(73%) sepia(47%) saturate(1577%) hue-rotate(35deg) brightness(96%) contrast(102%);}
.cm05 .c_img_line {filter: brightness(0) saturate(100%) invert(13%) sepia(89%) saturate(4032%) hue-rotate(207deg) brightness(90%) contrast(103%);}
.cm06 .c_img {filter: brightness(0) saturate(100%) invert(48%) sepia(68%) saturate(4498%) hue-rotate(76deg) brightness(104%) contrast(105%);}
.cm06 .c_img_line {filter: brightness(0) saturate(100%) invert(19%) sepia(44%) saturate(1312%) hue-rotate(114deg) brightness(93%) contrast(102%);}
.cm07 .c_img {filter: brightness(0) saturate(100%) invert(68%) sepia(67%) saturate(4442%) hue-rotate(163deg) brightness(99%) contrast(104%);}
.cm07 .c_img_line {filter: brightness(0) saturate(100%) invert(12%) sepia(64%) saturate(2437%) hue-rotate(190deg) brightness(95%) contrast(102%);}
.cm08 .c_img {filter: brightness(0) saturate(100%) invert(26%) sepia(53%) saturate(3773%) hue-rotate(207deg) brightness(91%) contrast(102%);}
.cm08 .c_img_line {filter: brightness(0) saturate(100%) invert(69%) sepia(86%) saturate(2076%) hue-rotate(174deg) brightness(101%) contrast(101%);}
.cm09 .c_img {filter: brightness(0) saturate(100%) invert(13%) sepia(29%) saturate(6381%) hue-rotate(211deg) brightness(90%) contrast(110%);}
.cm09 .c_img_line {filter: brightness(0) saturate(100%) invert(90%) sepia(65%) saturate(1691%) hue-rotate(7deg) brightness(105%) contrast(104%);}
.cm10 .c_img {filter: brightness(0) saturate(100%) invert(22%) sepia(51%) saturate(1859%) hue-rotate(268deg) brightness(87%) contrast(98%);}
.cm10 .c_img_line {filter: brightness(0) saturate(100%) invert(46%) sepia(64%) saturate(1439%) hue-rotate(147deg) brightness(104%) contrast(101%);}

.c_img, .c_img_line, .c_bg, .c_bg_line {left:0; top:0;}

.tl0 .c_img, .tl0 .c_img_line {display:none;}
.tl00 .c_img, .tl00 .c_img_line {display:none;}
.tl01 .c_img, .tl01 .c_img_line {top:0; left:0;}
.tl02 .c_img, .tl02 .c_img_line {top:0; left:-106px;}
.tl03 .c_img, .tl03 .c_img_line {top:0; left:-212px;}
.tl04 .c_img, .tl04 .c_img_line {top:0; left:-318px;}
.tl05 .c_img, .tl05 .c_img_line {top:0; left:-424px;}
.tl06 .c_img, .tl06 .c_img_line {top:0; left:-530px;}
.tl07 .c_img, .tl07 .c_img_line {top:0; left:-636px;}
.tl08 .c_img, .tl08 .c_img_line {top:0; left:-742px;}
.tl09 .c_img, .tl09 .c_img_line {top:0; left:-848px;}

.tl10 .c_img, .tl10 .c_img_line {top:-106px; left:0;}
.tl11 .c_img, .tl11 .c_img_line {top:-106px; left:-106px;}
.tl12 .c_img, .tl12 .c_img_line {top:-106px; left:-212px;}
.tl13 .c_img, .tl13 .c_img_line {top:-106px; left:-318px;}
.tl14 .c_img, .tl14 .c_img_line {top:-106px; left:-424px;}
.tl15 .c_img, .tl15 .c_img_line {top:-106px; left:-530px;}
.tl16 .c_img, .tl16 .c_img_line {top:-106px; left:-636px;}
.tl17 .c_img, .tl17 .c_img_line {top:-106px; left:-742px;}
.tl18 .c_img, .tl18 .c_img_line {top:-106px; left:-848px;}

.tl19 .c_img, .tl19 .c_img_line {top:-212px; left:0;}
.tl20 .c_img, .tl20 .c_img_line {top:-212px; left:-106px;}
.tl21 .c_img, .tl21 .c_img_line {top:-212px; left:-212px;}
.tl22 .c_img, .tl22 .c_img_line {top:-212px; left:-318px;}
.tl23 .c_img, .tl23 .c_img_line {top:-212px; left:-424px;}
.tl24 .c_img, .tl24 .c_img_line {top:-212px; left:-530px;}
.tl25 .c_img, .tl25 .c_img_line {top:-212px; left:-636px;}
.tl26 .c_img, .tl26 .c_img_line {top:-212px; left:-742px;}
.tl27 .c_img, .tl27 .c_img_line {top:-212px; left:-848px;}

.tl28 .c_img, .tl28 .c_img_line {top:-318px; left:0;}
.tl29 .c_img, .tl29 .c_img_line {top:-318px; left:-106px;}
.tl30 .c_img, .tl30 .c_img_line {top:-318px; left:-212px;}
.tl31 .c_img, .tl31 .c_img_line {top:-318px; left:-318px;}
.tl32 .c_img, .tl32 .c_img_line {top:-318px; left:-424px;}
.tl33 .c_img, .tl33 .c_img_line {top:-318px; left:-530px;}
.tl34 .c_img, .tl34 .c_img_line {top:-318px; left:-636px;}
.tl35 .c_img, .tl35 .c_img_line {top:-318px; left:-742px;}
.tl36 .c_img, .tl36 .c_img_line {top:-318px; left:-848px;}

.tl37 .c_img, .tl37 .c_img_line {top:-424px; left:0;}
.tl38 .c_img, .tl38 .c_img_line {top:-424px; left:-106px;}
.tl39 .c_img, .tl39 .c_img_line {top:-424px; left:-212px;}
.tl40 .c_img, .tl40 .c_img_line {top:-424px; left:-318px;}
.tl41 .c_img, .tl41 .c_img_line {top:-424px; left:-424px;}
.tl42 .c_img, .tl42 .c_img_line {top:-424px; left:-530px;}
.tl43 .c_img, .tl43 .c_img_line {top:-424px; left:-636px;}
.tl44 .c_img, .tl44 .c_img_line {top:-424px; left:-742px;}
.tl45 .c_img, .tl45 .c_img_line {top:-424px; left:-848px;}

.tl46 .c_img, .tl46 .c_img_line {top:-530px; left:0;}
.tl47 .c_img, .tl47 .c_img_line {top:-530px; left:-106px;}
.tl48 .c_img, .tl48 .c_img_line {top:-530px; left:-212px;}
.tl49 .c_img, .tl49 .c_img_line {top:-530px; left:-318px;}
.tl50 .c_img, .tl50 .c_img_line {top:-530px; left:-424px;}
.tl51 .c_img, .tl51 .c_img_line {top:-530px; left:-530px;}
.tl52 .c_img, .tl52 .c_img_line {top:-530px; left:-636px;}
.tl53 .c_img, .tl53 .c_img_line {top:-530px; left:-742px;}
.tl54 .c_img, .tl54 .c_img_line {top:-530px; left:-848px;}

.tl55 .c_img, .tl55 .c_img_line {top:-636px; left:0px;}
.tl56 .c_img, .tl56 .c_img_line {top:-636px; left:-106px;}
.tl57 .c_img, .tl57 .c_img_line {top:-636px; left:-212px;}
.tl58 .c_img, .tl58 .c_img_line {top:-636px; left:-318px;}
.tl59 .c_img, .tl59 .c_img_line {top:-636px; left:-424px;}
.tl60 .c_img, .tl60 .c_img_line {top:-636px; left:-530px;}
.tl61 .c_img, .tl61 .c_img_line {top:-636px; left:-636px;}
.tl62 .c_img, .tl62 .c_img_line {top:-636px; left:-742px;}
.tl63 .c_img, .tl63 .c_img_line {top:-636px; left:-848px;}

.tl64 .c_img, .tl64 .c_img_line {top:-742px; left:0px;}
.tl65 .c_img, .tl65 .c_img_line {top:-742px; left:-106px;}
.tl66 .c_img, .tl66 .c_img_line {top:-742px; left:-212px;}
.tl67 .c_img, .tl67 .c_img_line {top:-742px; left:-318px;}
.tl68 .c_img, .tl68 .c_img_line {top:-742px; left:-424px;}
.tl69 .c_img, .tl69 .c_img_line {top:-742px; left:-530px;}
.tl70 .c_img, .tl70 .c_img_line {top:-742px; left:-636px;}
.tl71 .c_img, .tl71 .c_img_line {top:-742px; left:-742px;}
.tl72 .c_img, .tl72 .c_img_line {top:-742px; left:-848px;}

.tl73 .c_img, .tl73 .c_img_line {top:-848px; left:0px;}
.tl74 .c_img, .tl74 .c_img_line {top:-848px; left:-106px;}
.tl75 .c_img, .tl75 .c_img_line {top:-848px; left:-212px;}
.tl76 .c_img, .tl76 .c_img_line {top:-848px; left:-318px;}
.tl77 .c_img, .tl77 .c_img_line {top:-848px; left:-424px;}
.tl78 .c_img, .tl78 .c_img_line {top:-848px; left:-530px;}
.tl79 .c_img, .tl79 .c_img_line {top:-848px; left:-636px;}
.tl80 .c_img, .tl80 .c_img_line {top:-848px; left:-742px;}
.tl81 .c_img, .tl81 .c_img_line {top:-848px; left:-848px;}

.tl82 .c_img, .tl82 .c_img_line {top:-954px; left:0px;}
.tl83 .c_img, .tl83 .c_img_line {top:-954px; left:-106px;}
.tl84 .c_img, .tl84 .c_img_line {top:-954px; left:-212px;}
.tl85 .c_img, .tl85 .c_img_line {top:-954px; left:-318px;}
.tl86 .c_img, .tl86 .c_img_line {top:-954px; left:-424px;}
.tl87 .c_img, .tl87 .c_img_line {top:-954px; left:-530px;}
.tl88 .c_img, .tl88 .c_img_line {top:-954px; left:-636px;}
.tl89 .c_img, .tl89 .c_img_line {top:-954px; left:-742px;}
.tl90 .c_img, .tl90 .c_img_line {top:-954px; left:-848px;}

.tl91 .c_img, .tl91 .c_img_line {top:-1060px; left:0px;}
.tl92 .c_img, .tl92 .c_img_line {top:-1060px; left:-106px;}
.tl93 .c_img, .tl93 .c_img_line {top:-1060px; left:-212px;}
.tl94 .c_img, .tl94 .c_img_line {top:-1060px; left:-318px;}
.tl95 .c_img, .tl95 .c_img_line {top:-1060px; left:-424px;}
.tl96 .c_img, .tl96 .c_img_line {top:-1060px; left:-530px;}
.tl97 .c_img, .tl97 .c_img_line {top:-1060px; left:-636px;}
.tl98 .c_img, .tl98 .c_img_line {top:-1060px; left:-742px;}
.tl99 .c_img, .tl99 .c_img_line {top:-1060px; left:-848px;}

.tl100 .c_img, .tl100 .c_img_line {top:-1166px; left:0px;}
.tl101 .c_img, .tl101 .c_img_line {top:-1166px; left:-106px;}
.tl102 .c_img, .tl102 .c_img_line {top:-1166px; left:-212px;}
.tl103 .c_img, .tl103 .c_img_line {top:-1166px; left:-318px;}
.tl104 .c_img, .tl104 .c_img_line {top:-1166px; left:-424px;}
.tl105 .c_img, .tl105 .c_img_line {top:-1166px; left:-530px;}
.tl106 .c_img, .tl106 .c_img_line {top:-1166px; left:-636px;}
.tl107 .c_img, .tl107 .c_img_line {top:-1166px; left:-742px;}
.tl108 .c_img, .tl108 .c_img_line {top:-1166px; left:-848px;}

.tl109 .c_img, .tl109 .c_img_line {top:-1272px; left:0px;}
.tl110 .c_img, .tl110 .c_img_line {top:-1272px; left:-106px;}
.tl111 .c_img, .tl111 .c_img_line {top:-1272px; left:-212px;}
.tl112 .c_img, .tl112 .c_img_line {top:-1272px; left:-318px;}
.tl113 .c_img, .tl113 .c_img_line {top:-1272px; left:-424px;}
.tl114 .c_img, .tl114 .c_img_line {top:-1272px; left:-530px;}
.tl115 .c_img, .tl115 .c_img_line {top:-1272px; left:-636px;}
.tl116 .c_img, .tl116 .c_img_line {top:-1272px; left:-742px;}
.tl117 .c_img, .tl117 .c_img_line {top:-1272px; left:-848px;}

.tl118 .c_img, .tl118 .c_img_line {top:-1378px; left:0px;}
.tl119 .c_img, .tl119 .c_img_line {top:-1378px; left:-106px;}
.tl120 .c_img, .tl120 .c_img_line {top:-1378px; left:-212px;}
.tl121 .c_img, .tl121 .c_img_line {top:-1378px; left:-318px;}
.tl122 .c_img, .tl122 .c_img_line {top:-1378px; left:-424px;}
.tl123 .c_img, .tl123 .c_img_line {top:-1378px; left:-530px;}
.tl124 .c_img, .tl124 .c_img_line {top:-1378px; left:-636px;}
.tl125 .c_img, .tl125 .c_img_line {top:-1378px; left:-742px;}
.tl126 .c_img, .tl126 .c_img_line {top:-1378px; left:-848px;}

.tl127 .c_img, .tl127 .c_img_line {top:-1484px; left:0px;}
.tl128 .c_img, .tl128 .c_img_line {top:-1484px; left:-106px;}
.tl129 .c_img, .tl129 .c_img_line {top:-1484px; left:-212px;}
.tl130 .c_img, .tl130 .c_img_line {top:-1484px; left:-318px;}
.tl131 .c_img, .tl131 .c_img_line {top:-1484px; left:-424px;}
.tl132 .c_img, .tl132 .c_img_line {top:-1484px; left:-530px;}
.tl133 .c_img, .tl133 .c_img_line {top:-1484px; left:-636px;}
.tl134 .c_img, .tl134 .c_img_line {top:-1484px; left:-742px;}
.tl135 .c_img, .tl135 .c_img_line {top:-1484px; left:-848px;}

.tl136 .c_img, .tl136 .c_img_line {top:-1590px; left:0px;}
.tl137 .c_img, .tl137 .c_img_line {top:-1590px; left:-106px;}
.tl138 .c_img, .tl138 .c_img_line {top:-1590px; left:-212px;}
.tl139 .c_img, .tl139 .c_img_line {top:-1590px; left:-318px;}
.tl140 .c_img, .tl140 .c_img_line {top:-1590px; left:-424px;}
.tl141 .c_img, .tl141 .c_img_line {top:-1590px; left:-530px;}
.tl142 .c_img, .tl142 .c_img_line {top:-1590px; left:-636px;}
.tl143 .c_img, .tl143 .c_img_line {top:-1590px; left:-742px;}
.tl144 .c_img, .tl144 .c_img_line {top:-1590px; left:-848px;}

.tl145 .c_img, .tl145 .c_img_line {top:-1696px; left:0px;}
.tl146 .c_img, .tl146 .c_img_line {top:-1696px; left:-106px;}
.tl147 .c_img, .tl147 .c_img_line {top:-1696px; left:-212px;}
.tl148 .c_img, .tl148 .c_img_line {top:-1696px; left:-318px;}
.tl149 .c_img, .tl149 .c_img_line {top:-1696px; left:-424px;}
.tl150 .c_img, .tl150 .c_img_line {top:-1696px; left:-530px;}
.tl151 .c_img, .tl151 .c_img_line {top:-1696px; left:-636px;}
.tl152 .c_img, .tl152 .c_img_line {top:-1696px; left:-742px;}
.tl153 .c_img, .tl153 .c_img_line {top:-1696px; left:-848px;}

.tl154 .c_img, .tl154 .c_img_line {top:-1802px; left:0px;}
.tl155 .c_img, .tl155 .c_img_line {top:-1802px; left:-106px;}
.tl156 .c_img, .tl156 .c_img_line {top:-1802px; left:-212px;}
.tl157 .c_img, .tl157 .c_img_line {top:-1802px; left:-318px;}
.tl158 .c_img, .tl158 .c_img_line {top:-1802px; left:-424px;}
.tl159 .c_img, .tl159 .c_img_line {top:-1802px; left:-530px;}
.tl160 .c_img, .tl160 .c_img_line {top:-1802px; left:-636px;}
.tl161 .c_img, .tl161 .c_img_line {top:-1802px; left:-742px;}
.tl162 .c_img, .tl162 .c_img_line {top:-1802px; left:-848px;}

.tl163 .c_img, .tl163 .c_img_line {top:-1908px; left:0px;}
.tl164 .c_img, .tl164 .c_img_line {top:-1908px; left:-106px;}
.tl165 .c_img, .tl165 .c_img_line {top:-1908px; left:-212px;}
.tl166 .c_img, .tl166 .c_img_line {top:-1908px; left:-318px;}
.tl167 .c_img, .tl167 .c_img_line {top:-1908px; left:-424px;}
.tl168 .c_img, .tl168 .c_img_line {top:-1908px; left:-530px;}
.tl169 .c_img, .tl169 .c_img_line {top:-1908px; left:-636px;}
.tl170 .c_img, .tl170 .c_img_line {top:-1908px; left:-742px;}
.tl171 .c_img, .tl171 .c_img_line {top:-1908px; left:-848px;}

.tl172 .c_img, .tl172 .c_img_line {top:-2014px; left:0px;}
.tl173 .c_img, .tl173 .c_img_line {top:-2014px; left:-106px;}
.tl174 .c_img, .tl174 .c_img_line {top:-2014px; left:-212px;}
.tl175 .c_img, .tl175 .c_img_line {top:-2014px; left:-318px;}
.tl176 .c_img, .tl176 .c_img_line {top:-2014px; left:-424px;}
.tl177 .c_img, .tl177 .c_img_line {top:-2014px; left:-530px;}
.tl178 .c_img, .tl178 .c_img_line {top:-2014px; left:-636px;}
.tl179 .c_img, .tl179 .c_img_line {top:-2014px; left:-742px;}
.tl180 .c_img, .tl180 .c_img_line {top:-2014px; left:-848px;}

.tl181 .c_img, .tl181 .c_img_line {top:-2120px; left:0px;}

.bp0 .c_bg, .bp0 .c_bg_line {display:none;}
.bp00 .c_bg, .bp00 .c_bg_line {display:none;}
.bp01 .c_bg, .bp01 .c_bg_line {top:0; left:0;}
.bp02 .c_bg, .bp02 .c_bg_line {top:0; left:-106px;}
.bp03 .c_bg, .bp03 .c_bg_line {top:0; left:-212px;}
.bp04 .c_bg, .bp04 .c_bg_line {top:0; left:-318px;}
.bp05 .c_bg, .bp05 .c_bg_line {top:0; left:-424px;}
.bp06 .c_bg, .bp06 .c_bg_line {top:0; left:-530px;}
.bp07 .c_bg, .bp07 .c_bg_line {top:0; left:-636px;}
.bp08 .c_bg, .bp08 .c_bg_line {top:0; left:-742px;}
.bp09 .c_bg, .bp09 .c_bg_line {top:0; left:-848px;}

.bp10 .c_bg, .bp10 .c_bg_line {top:-106px; left:0;}
.bp11 .c_bg, .bp11 .c_bg_line {top:-106px; left:-106px;}
.bp12 .c_bg, .bp12 .c_bg_line {top:-106px; left:-212px;}
.bp13 .c_bg, .bp13 .c_bg_line {top:-106px; left:-318px;}
.bp14 .c_bg, .bp14 .c_bg_line {top:-106px; left:-424px;}
.bp15 .c_bg, .bp15 .c_bg_line {top:-106px; left:-530px;}
.bp16 .c_bg, .bp16 .c_bg_line {top:-106px; left:-636px;}
.bp17 .c_bg, .bp17 .c_bg_line {top:-106px; left:-742px;}
.bp18 .c_bg, .bp18 .c_bg_line {top:-106px; left:-848px;}

.bp19 .c_bg, .bp19 .c_bg_line {top:-212px; left:0;}
.bp20 .c_bg, .bp20 .c_bg_line {top:-212px; left:-106px;}
.bp21 .c_bg, .bp21 .c_bg_line {top:-212px; left:-212px;}
.bp22 .c_bg, .bp22 .c_bg_line {top:-212px; left:-318px;}
.bp23 .c_bg, .bp23 .c_bg_line {top:-212px; left:-424px;}
.bp24 .c_bg, .bp24 .c_bg_line {top:-212px; left:-530px;}
.bp25 .c_bg, .bp25 .c_bg_line {top:-212px; left:-636px;}
.bp26 .c_bg, .bp26 .c_bg_line {top:-212px; left:-742px;}
.bp27 .c_bg, .bp27 .c_bg_line {top:-212px; left:-848px;}

/* messenger */
.board_wrap {max-width:1100px; margin:0 auto; width:100%;}
.board_wrap {text-align:left; background:url('../../images/common/clan/bg_messenger.png') center 0 repeat; border-radius:3rem; padding:5rem; border:1px solid #00ffcc; position:relative;}
.board_wrap:before {content:''; display:block; width:110px; height:9px; position:absolute; top:2rem; left:50%; transform:translate(-50% , 0); background:url('../../images/common/clan/deco_messenger.png') center 0 no-repeat;}
.board_wrap .messenger {padding:2rem; border:1px solid rgba(0, 255, 204, 0.5); background:url('../../images/common/clan/ptn07.png') 0 0 repeat; position:relative;}
.board_wrap .messenger:before, .board_wrap .messenger:after {content:''; display:block; left:-7px; right:-7px; position:absolute;  height: 12px; background: url(../../images/common/clan/bg_plus02.png) 0 0 no-repeat, url(../../images/common/clan/bg_plus02.png) right 0 no-repeat;}
.board_wrap .messenger:before {top:-7px;}
.board_wrap .messenger:after {bottom:-7px;}    
.board_wrap .chat_area {background:#fff url('../../images/common/clan/shadow.png') 0 bottom repeat-x; border:1px solid #dadada;  border-bottom:0; padding:3rem 2rem 3rem 3rem; position: relative;}
.board_wrap .chat_area .chat { text-align:left; max-height:52.5rem; padding-right:3rem;}

.board_wrap .chat_area .chat {overflow-y:auto;}
.board_wrap .chat_area .chat_h {position:relative;}
.board_wrap .chat_area .chat::-webkit-scrollbar { width: 7px; }
.board_wrap .chat_area .chat::-webkit-scrollbar-thumb {width:5px;  background: linear-gradient(to right, #2e7668, #245d52); border-radius: 3px;  border: 1px solid transparent; background-clip: padding-box;}
.board_wrap .chat_area .chat::-webkit-scrollbar-track {background: #e1e1e1; border:1px solid #c3c3c3; border-radius:2px; }

.board_wrap .chat_area .chat .chat_h > div { margin-bottom:2rem; position:relative;}
.board_wrap .chat_area .chat .wid {max-width:55rem; font-size:0; display:inline-block; }
.board_wrap .chat_area .chat .user {position:absolute; top:0; left:0; width:5.4rem; height:5.4rem; background:#c0c0c0; border:1px solid #b3b3b3; border-radius:1.5rem;}
.board_wrap .chat_area .chat .user.master:before {content:''; display:block; position:absolute; width:2rem; height:2rem; background:url('../../images/common/clan/icon_master.png') 0 0 no-repeat; right:-0.3rem; bottom:-0.3rem;}
.board_wrap .chat_area .chat .user img {position:absolute; top:0; bottom:0; right:0; left:0;}
.board_wrap .chat_area .chat .name {color:#265b50; font-size:12px; font-family:'Roboto'; margin-bottom:0.8rem;}

.board_wrap .chat_area .chat .con {width:calc(100% - 8rem); margin-left:8rem; }
.board_wrap .chat_area .chat .con li {font-size:0; margin-top:10px; position:relative;}
.board_wrap .chat_area .chat .con li:first-child {margin-top:0;}

.board_wrap .chat_area .text {max-width: calc(100% - 8rem); word-break: break-word; display: inline-block; min-width:4rem; line-height: normal; font-size:14px; font-family:'Roboto'; box-shadow:0 1px 2px rgba(0, 0, 0, 0.2);  position:relative; padding:1.3rem 1.5rem; border-radius:0.5rem;}
.board_wrap .chat_area .text:before {content:''; display:none; width:1.6rem; height:1.9rem; background-size:100% auto; position:absolute; top:5px;}
.board_wrap .chat_area li:first-child .text:before {display:block;}
.board_wrap .chat_area .text a {color:#007c63; position:relative; text-decoration: underline;}

.board_wrap .chat_area .info {display:inline-block; vertical-align:bottom; text-align:left; padding-left:1rem;     position: relative;  top: 2px;  width: 8rem;}
.board_wrap .chat_area .right .info {padding-left:0; padding-right:1rem; text-align:right;} 

.board_wrap .chat_area .left, .board_wrap .chat_area .right {font-size:0;}
.board_wrap .chat_area .left .text {background:#eaeaea;}
.board_wrap .chat_area .left .text:before {background:url('../../images/common/clan/icon_tail01.png') 0 0 no-repeat; left:-1.5rem; background-size:100% auto !important;}
.board_wrap .chat_area .right {text-align:right; padding-right:1.5rem;}
.board_wrap .chat_area .chat .right .con {width:100%; margin-left:0;}
.board_wrap .chat_area .right .text {background:#c3f2f1; text-align:left;}
.board_wrap .chat_area .right .text:before {background:url('../../images/common/clan/icon_tail02.png') 0 0 no-repeat; right:-1.5rem; background-size:100% auto !important;}
.board_wrap .chat_area .date {margin:2rem 0; font-size:12px; color:#265b50; font-family:'Roboto'; text-align:center; position:relative;}
.board_wrap .chat_area .date:before {content:''; display:block; top:50%; left:0; right:0; height:1px; position:absolute; background:#dadada;}
.board_wrap .chat_area .date span {display:inline-block; padding:0 10rem; background:#fff; position: relative;}
.board_wrap .chat_area .time {font-size:12px; color:#9b9b9b;  margin-top:6px;}
.board_wrap .chat_area .chat .same .user {display:none;}
.board_wrap .chat_area .chat .same .name {display:none;}
.board_wrap .chat_area .chat .same li:first-child .text:before {display:none;}

.board_wrap .chat_area .del .text {color:#bbbbbb; border:1px solid #e5e5e5; background:#fff; box-shadow:none; position:relative; padding-left:4.4rem;}
.board_wrap .chat_area .del .text:after {content:''; display:block; left:1.3rem; top:1rem; position:absolute; width:2.1rem; height:2.1rem; background:url('../../images/common/clan/icon_chat_info.png') 0 0 no-repeat; background-size:contain;}
.board_wrap .chat_area .del .time {color:#c4c4c4;}
.board_wrap .chat_area .right .del .text:before {background: url(../../images/common/clan/icon_tail_del_r.png) 0 0 no-repeat;}
.board_wrap .chat_area .left .del .text:before {background: url(../../images/common/clan/icon_tail_del_l.png) 0 0 no-repeat;}

.board_wrap .enter_area {position:relative; background:#fff; border:1px solid #dadada;  border-top:0; }
.board_wrap .enter_area .cursor {font-size:0; animation:cursor 0.3s infinite; content:''; display:block; position:absolute; width:3px; height:12px; left:3rem; top:4.7rem; z-index:1; transform:translate(0 , -50%); background:url('../../images/common/clan/icon_chat_dash.png') 0 0 no-repeat;}
.board_wrap .enter_area:after {content:''; display:block; position:absolute; left:0; right:0; top:0; height:2px; background:url('../../images/common/clan/icon_enter_bar.jpg') 0 0 repeat-x;}
.board_wrap .enter_area .btn_send {position:absolute; right:5rem; top:50%; transform:translate(0 , -50%); display:inline-block; vertical-align:top; font-family: 'Chakra Petch'; border:1px solid #00ffcc; cursor:pointer; width:111px; height:40px; line-height:40px;  text-align:center; font-size:14px; font-weight:700; color:#00ffcc; text-transform:uppercase; letter-spacing: 0.08rem;  background:url('../../images/common/clan/cp_gr_lt.png') left 4px top 4px no-repeat, url('../../images/common/clan/cp_gr_rt.png') right 4px top 4px no-repeat, url('../../images/common/clan/cp_gr_lb.png') left 4px bottom 4px no-repeat, url('../../images/common/clan/cp_gr_rb.png') right 4px bottom 4px no-repeat, url('../../images/common/clan/mb_yl_lr.png') left 0 top 50% no-repeat, url('../../images/common/clan/mb_yl_lr.png') right 0 top 50% no-repeat, url('../../images/common/clan/mb_yl_tb.png') left 50% top 0 no-repeat, url('../../images/common/clan/mb_yl_tb.png') left 50% bottom 0 no-repeat; background-color:#007c63;}
.board_wrap .enter_area .btn_send img {vertical-align:middle; position:relative; top:-2px;}
.board_wrap .enter_area .btn_send:hover {border:1px solid #ffff00; color:#ffff00; background:url('../../images/common/clan/cp_yl_lt.png') left 4px top 4px no-repeat, url('../../images/common/clan/cp_yl_rt.png') right 4px top 4px no-repeat, url('../../images/common/clan/cp_yl_lb.png') left 4px bottom 4px no-repeat, url('../../images/common/clan/cp_yl_rb.png') right 4px bottom 4px no-repeat, url('../../images/common/clan/mb_gr_lr.png') left 0 top 50% no-repeat, url('../../images/common/clan/mb_gr_lr.png') right 0 top 50% no-repeat, url('../../images/common/clan/mb_gr_tb.png') left 50% top 0 no-repeat, url('../../images/common/clan/mb_gr_tb.png') left 50% bottom 0 no-repeat; background-color:#2e441c; }
.board_wrap .enter_area textarea {padding:4rem 17.2rem 4rem 4rem; font-size:14px;  border:none; /* display:none; */ width:100%; display:inline-block; vertical-align:top; color:#404040; font-family:'Roboto' !important; position:relative;}
.board_wrap .enter_area textarea::placeholder {color:#404040;}
.board_wrap .enter_area textarea:focus {border:none; outline:none;}
.board_wrap .enter_area:before {content:''; display:block; left:-2.7rem; right:-2.7rem; position:absolute;  height: 12px; background: url(../../images/common/clan/bg_plus02.png) 0 0 no-repeat, url(../../images/common/clan/bg_plus02.png) right 0 no-repeat; top:-6px;}

.board_wrap .btns_admin {font-size:0; opacity:0; }
.board_wrap .btns_admin button {margin-right:-1px; cursor:pointer; font-size:0; display:inline-block; vertical-align:top; width:24px; height:24px; font-size:0; border:1px solid #e5e5e5; background:#fff;}
.board_wrap .btns_admin button span {background-position:0 0; background-repeat:no-repeat; display:inline-block;}
.board_wrap .btns_admin button.btn_noti span {background-image:url('../../images/common/clan/icon_noti_s.png'); width:13px; height:14px;} 
.board_wrap .btns_admin button.btn_del {}
.board_wrap .btns_admin button.btn_del span {background-image:url('../../images/common/clan/icon_chat_del.png'); width:13px; height:12px;} 
.board_wrap .btns_admin button:hover {background:#05c39d;}
.board_wrap .btns_admin button.btn_noti:hover span {background-position:0 -14px;} 
.board_wrap .btns_admin button.btn_del:hover span {background-position:0 -12px;}
.board_wrap .chat_area .chat .con li:hover .btns_admin {opacity:1; }

.board_wrap .noti_area {background:#eeeeee;  padding:3rem; position:relative;}
.board_wrap .noti_area li {margin-bottom:5px; font-size:0;}
.board_wrap .noti_area li:last-child {margin-bottom:0;}
.board_wrap .noti_area li .text {word-break: break-word; max-width: calc(100% - 32px); vertical-align:top; padding:0.8rem 1.2rem 0.8rem 3.6rem; display:inline-block; font-size:14px; color:#404040; font-family:'Roboto'; vertical-align:middle; background:#fff url('../../images/common/clan/icon_noti_s02.png') left 1rem top 0.9rem no-repeat; border-radius:5px; border:1px solid #05c39d; }
.board_wrap .noti_area .btns_admin {margin-left:5px; vertical-align:middle;; position:static; display:inline-block; opacity:1;}
.board_wrap .noti_area .btns_admin button.btn_del {width:28px; height:28px; border:1px solid #fff; background:none; }
.board_wrap .noti_area .btns_admin button.btn_del:hover {background:#05c39d; border-color:#05c39d;}
.board_wrap .noti_area li:hover .btns_admin {opacity:1;}

.board_wrap .user_area {position:fixed; bottom:0; right:10.8rem; width:22.8rem;}
.board_wrap .user_area .btn_ml {position:relative; font-family:'Chakra Petch' !important; background:rgba(0, 199, 159, 0.9); padding:1.4rem 5rem 0 2rem; font-size:14px; height:6rem; display:block; border-radius:0.8rem 0.8rem 0 0; width:100%; box-shadow:0 0 1.2rem rgba(0, 0, 0, 0.6); border:1px solid #00ffcc; border-bottom:0; text-transform:uppercase; color:#fff; font-weight:700; letter-spacing:0.04em;}
.board_wrap .user_area .btn_ml * {font-family:'Chakra Petch' !important;}
.board_wrap .user_area .btn_ml font {color:#ffee00;}
.board_wrap .user_area .btn_ml span {display:block; font-weight:400; color:#063f34;}
.board_wrap .user_area .btn_ml span:before {content:''; display:block; position:absolute; top:2.4rem; right:1.7rem; width:22px; height:13px;  background:url('../../images/common/clan/user_arr.png') 0 0 no-repeat; z-index:1;}

.board_wrap .user_area .btn_ml:before, .board_wrap .user_area .btn_ml:after {position:absolute; content:''; display:block; width:0.4rem; height:1.1rem; background:rgba(0, 255, 204, 0.3);}
.board_wrap .user_area .btn_ml:before {top:0; left:1.1rem;}
.board_wrap .user_area .btn_ml:after {bottom:0; right:1.1rem;}
.board_wrap .user_area .btn_ml:hover {border-color: #ffee00; background:#00483a;}
.board_wrap .user_area .btn_ml:hover span {color:#00ffcc;}
.board_wrap .user_area .btn_ml:hover:before, .board_wrap .user_area .btn_ml:hover:after {background:rgba(255, 238, 0, 0.3);}
.board_wrap .user_area .member_list {padding:1.2rem 0 1rem; border:1px solid #ffee00; border-bottom:0; background: linear-gradient(to bottom, #353535, #292929); position: relative; display:none; }
.board_wrap .user_area .member_list:before {content:''; display:block; top:0; left:0; right:0; height:1px; position:absolute; background:#000;}
.board_wrap .user_area .member_list .btn_ml {display:none;}
.board_wrap .user_area.open .member_list {display:block; transition:all 0.7s ease-in-out;    }


.board_wrap .user_area.open .btn_ml {border-color: #ffee00; background:#00483a;}
.board_wrap .user_area.open .btn_ml span {color:#00ffcc;}
.board_wrap .user_area.open .btn_ml:before, .board_wrap .user_area.open .btn_ml:after {background:rgba(255, 238, 0, 0.3);}
.board_wrap .user_area.open .btn_ml span:before {transform:scaleY(-1);}

.board_wrap .user_area .member_list li {border-top:1px solid rgba(255, 255, 255, 0.16); padding:2.1rem 2.2rem; padding-left:70px; font-size:12px; color:#efefef; position:relative; overflow: hidden; text-overflow: ellipsis; -ms-text-overflow: ellipsis; white-space: nowrap;  word-break: break-all; word-wrap: normal;}
.board_wrap .user_area .member_list li:before {content:''; display:block; top:0; left:0; right:0; height:1px; position:absolute; background:rgba(0, 0, 0, 0.4);}
.board_wrap .user_area .member_list li:first-child {border-top:0;}
.board_wrap .user_area .member_list li:first-child:before {display:none;}
.board_wrap .user_area .member_list .user_img {box-shadow:inset 0 0 0 1px #b3b3b3; width:38px; height:38px; border-radius:1rem; background:#c0c0c0 url('../../images/common/clan/user_chat.png') center center no-repeat; display:inline-block; vertical-align:middle; position:absolute; top:50%; left:2rem; margin-top:-19px;}
.board_wrap .user_area .member_list .user_img:before {content:''; display:block; position:absolute; width:16px; height:16px; bottom:-3px; right:-3px; background-repeat:no-repeat; background-position:0 0; background-image:url('../../images/common/clan/user_on.png'); border-radius:50%; border:0.2rem solid #2d2d2d;}
.board_wrap .user_area .member_list li font.me {display:inline-block; margin-right:4px; text-transform:uppercase; color:#00ffcc; font-size:10px; font-weight:600; letter-spacing:0.02em; height:16px; line-height:16px; padding:0 2px; border:1px solid #03edbe; border-radius:0.5rem;}
.board_wrap .user_area .member_list .off .user_img:before {background-image:url('../../images/common/clan/user_off.png');} 
.board_wrap .user_area .member_list .master .user_img:after {content:''; display:block; position:absolute; width:2rem; height:2rem; background:url('../../images/common/clan/icon_master.png') 0 0 no-repeat; top:-1rem; left:50%; margin-left:-1rem;}

.board_wrap .user_area.over .member_list .ovys {max-height:17rem; overflow-y:scroll; padding-right:1.2rem;}
.board_wrap .user_area.over .member_list {padding-right:4px;}
.board_wrap .user_area.over .member_list .user_img {left:0.4rem;}
.board_wrap .user_area.over .member_list .ovys {padding-left:1.6rem;}
.board_wrap .user_area.over .member_list .ovys::-webkit-scrollbar { width: 1.2rem;  background:#252525; border-radius:10px; border:1px solid #000;}
.board_wrap .user_area.over .member_list .ovys::-webkit-scrollbar-thumb { border-radius:10px; background:#0ed0a8; background-clip: padding-box;  border: 3px solid transparent;}
.board_wrap .user_area.over .member_list li {padding-right:0; padding-left:54px;}

.board_wrap .go_latest {cursor: pointer; font-size:0; color:transparent; display:block; position:absolute; bottom:2rem; right:5rem; width:4rem; height:4rem; border-radius:50%; box-shadow:0 0.2rem 0.2rem rgba(0, 0, 0, 0.1); border:1px solid #c3c3c3; background:#fff;}
.board_wrap .go_latest:before {content:''; display:block; position:absolute; width:22px; height:13px; background-repeat:no-repeat; background-position:0 0; background-image:url('../../images/common/clan/icon_bot.png'); top:50%; left:50%; margin-left:-11px; margin-top:-6px;}
.board_wrap .go_latest:hover {background:#007c63;}
.board_wrap .go_latest:hover:before {background-position:0 -13px;}




@media screen and (max-width: 1440px) {
/* clan_info */
.clan_section .top {padding:0 2.5rem;}

/**/
.clan_content .record .season .info {width: calc(100% - 36px);}
.clan_content .record .clan_record {padding-right:2.4rem;}

/* clan medal */
.clan_content .clan_medal .cm_explan {padding-right:7.2rem; padding-bottom:3.2rem;}
.clan_content .clan_medal .cm_explan .clan_ex_img {position:static; transform:none; text-align:center;}
}

@media screen and (max-width: 1280px) {
.rank_clan > .list > li {width:50%; margin-bottom:2.4rem;}	

/* clan */
.clan_section .top .about {position:static; margin-top:4.6rem;}
.clan_section .top .about .desc {width:100%;}
.clan_section .top .logo {margin:49px auto; display:block;}
.clan_section .top .info {display:block; margin-left:0; margin-top:95px;}
.clan_section .top .date {text-align:center;}
.clan_section .top .rank .bar {width:100%;}
.clan_section .top .info .name {text-align:center; margin-bottom:4.6rem;}

/**/
.clan_content .record .clan_record {display:block; width:100%; padding-right:0; margin-bottom:2.4rem;}
.clan_content .record .season {display:block; width:100%; }
.clan_content .bot_clan .section {margin-left:0;}
.clan_content .bot_clan .section .list {width:100%; display:block; margin-bottom:2.4rem; padding-left:0;}
.clan_content .bot_clan .detail {height:auto;}
.clan_content .bot_clan:before {display:none;}
.clan_content .bot_clan .over_wrap {padding-right:0rem; overflow: visible; max-height:none;}

/* clan medal */
.clan_content .clan_medal .cm_howto > ul {flex-wrap: wrap;}
.clan_content .clan_medal .cm_howto > ul > li {margin-bottom:3.2rem; flex: 1 1 40%;}

/**/
.clan_section .top .info:before {left:50%; transform:translate(-50% , 0); top:-254px;}

}

@media screen and (min-width: 1024px) {
.board_wrap .user_area {bottom:0 !important; top:auto !important;}	
.board_wrap .chat_area {height:auto !important;}
}	
	
@media screen and (max-width: 1023px) {
.pop-up {width:auto !important; max-height:none; top:2.5rem; bottom:2.5rem; left:2.5rem; right:2.5rem; transform:none; }
.pop-up .user ul li {width:50%; margin-bottom:1.2rem;}
.pop-up .info ul {margin-left:0;}	
.pop-up .info ul li {width:100%; padding-left:0; margin-bottom:1px;}
.pop-up .info .clan ul li {width:100%;}
.pop-up .pop-con {overflow-y: scroll; position: absolute; top: 7rem;  bottom: 0; left:0; right:0;}
.pop-up .pop-layout > h2:before {width:12px; height:12px; background-size:12px auto !important;}
	
.clan_search .select {display:block; width:100%; margin-bottom:1.5rem;}	
.clan_search .select li a {transition:none; background:url('../../images/common/clan/sel_yl_lt.png') left 4px top 4px no-repeat, url('../../images/common/clan/sel_yl_rt.png') right 4px top 4px no-repeat, url('../../images/common/clan/sel_yl_lb.png') left 4px bottom 4px no-repeat, url('../../images/common/clan/sel_yl_rb.png') right 4px bottom 4px no-repeat; background-color:#000; color:#ffff00;}
.clan_search .c_s_box {display:block; width:100%; padding-right:48px; border: 1px solid #00ffcc; background: rgba(0, 255, 205, 0.1);}
.clan_search .c_s_box input {width:100%; border:none; background:none;}
.clan_search .c_s_box button {border:none; border-left:1px solid #00ffcc; position:absolute; width:48px; top:0; right:0; font-size:0; background:url('../../images/common/clan/btn_search.png') center center no-repeat; background-size:contain;}
.clan_search .c_s_box button:hover {background:url('../../images/common/clan/btn_search.png') center center no-repeat; background-size:contain;}
.clan_content .search_area .result .clan_board .n_list {text-align:left; }
.clan_content .search_area .result .clan_board .n_list li {width:calc((100% - 3rem) / 2); margin-bottom:2rem; border:1px solid #444444;}
.clan_content .search_area .result .clan_board .n_list li:nth-child(2n-1) {margin-right:0;}
.clan_content .search_area .result .clan_board .n_list li:last-child {margin-bottom:0;}
.clan_content .search_area .result .clan_board .n_list li.n_con > div.ml {border-color:#666; background:rgba(136, 136, 136, 0.1);}
.clan_content .search_area .result .clan_board .n_list li.n_con > div.ml:before {color:#aaa;}

.clan_board .ova .n_nodata {margin-right:2.5rem;}
.clan_board .n_list li.n_tit {display:none;}
.clan_board.new_clan .inner.ova {padding-right:0;}
.clan_board.new_clan .inner.ova > .tit .n_more {right:2.5rem;}
.clan_board .n_list li.n_tit:before, .clan_board .n_list li.n_tit:after, .clan_board .n_list:before, .clan_board .n_list:after {display:none;}
.clan_board.new_clan .ova .paging {display:none;}
.clan_board .n_list_wrap {overflow:auto;}
.clan_board.new_clan .n_list {text-align:left; min-width:2400px;}
.clan_board .n_list li {display:inline-block; vertical-align:top; margin-right:3rem; width:460px; padding:2rem; border:1px solid #116655;}
.clan_board .n_list li .no {display:none;}
.clan_board .n_list li .name, .clan_board .n_list li .rank {width:100%; text-align:center;}
.clan_board .n_list li .master {width:100%; text-align:right;}
.clan_board .n_list li > div {display:block; text-align:right;}
.clan_board .n_list li.n_con > div {padding:0;}
.clan_board .n_list li .no, .clan_board .n_list li .name {padding-left:0; padding-right:0;}
.clan_board .n_list li .name {font-size:20px; margin-bottom:5rem;}
.clan_board .n_list li.n_con .rank {color:#00ffcc; font-size:14px; position:absolute; top:4.5rem; left:2rem; right:2rem;}
.clan_board .n_list li .no, .clan_board .n_list li .date, .clan_board .n_list li .win, .clan_board .n_list li .exp {width:100%;}

.clan_board .n_list li .exp:before {content:'EXP';}
.clan_board .n_list li .win:before {content:'Win/lose';}
.clan_board .n_list li .date:before {content:'Date Created';}
.clan_board .n_list li .master:before {content:'Master';}
.clan_board .n_list li.n_con > div.ml {font-size:14px; background:rgba(0, 255, 204, 0.1); margin-bottom:2px; border-left:4px solid #00ffcc; position:relative; padding:1.5rem 2.4rem 1.5rem 8rem;}
.clan_board .n_list li.n_con > div.ml:before {text-transform:uppercase; color:#00ffcc; font-size:12px; font-weight:700; position:absolute; top:50%; left:2rem; transform:translate(0, -50%);}
.clan_board .n_list li.n_con > div.ml.master {padding-right:5.4rem;}
.clan_board .n_list li.n_con .master img {position:absolute; right:2.4rem; margin-right:0; top:50%; transform:translate(0, -50%);}
.clan_board.rank_clan .clan_list .list .my .lg_txt {position:static; transform:none; padding:7rem 0; margin-top:0;}

/* new clan */
.clan_board .clan_list .list {margin-left:-2rem;}
.clan_board .clan_list .list li {display:inline-block; width:50%; vertical-align:top; padding-left:2rem; margin-bottom:2rem;}
.clan_board .clan_list .list .con {position:relative; height:auto; padding:2rem; border-left: 1px solid #116655; border-bottom:1px solid rgba(0, 255, 204, 0.5);}
.clan_board .clan_list .list .con:before, .clan_board .clan_list .list .con:after  {content:''; display:block; position:absolute; width:4px; height:2px; background:#00ffcc; bottom:0;}
.clan_board .clan_list .list .con:before {left:0;}
.clan_board .clan_list .list .con:after {right:0;}
.clan_board .clan_list .list .con > div {float:none; border:none; width:100%; }
.clan_board .clan_list .list .logo {width:106px !important; height:106px; margin:0 auto;}
.clan_board .clan_list .list .logo img.bg {width:auto;}
.clan_board .clan_list .list .info {padding:0; text-align:center; margin:-3.6rem 0 3rem;}
.clan_board .clan_list .list .ml {margin-bottom:2px; background: rgba(0, 255, 204, 0.1); display:block;  border-left: 4px solid #00ffcc !important; position: relative; padding: 1.5rem 2.4rem 1.5rem 10rem;}
.clan_board .clan_list .list .ml:last-child {margin-bottom:0;}
.clan_board .clan_list .list .ml .txt {display:block;}
.clan_board .clan_list .list .ml span {left:2rem;}
.clan_board .clan_list .list .master {padding-right:5.4rem;}
.clan_board .clan_list .list .master img {position:absolute; right:2.4rem; margin-right:0; top:50%; transform:translate(0, -50%);}

/* rank clan */
.clan_board.rank_clan .clan_list .list li {margin-bottom:4.8rem;}
.clan_board.rank_clan .clan_list .list .con {overflow: visible; padding:0; background:rgba(136, 136, 136, 0.1); border-color:rgba(136, 136, 136, 0.5);}
.clan_board.rank_clan .clan_list .list .num {width:48px; height:48px; line-height:48px; position:absolute; top:2rem; left:2rem; background:url('../../images/common/clan/bg_rank_normal.png') center center no-repeat; background-size:48px auto; }
.clan_board.rank_clan .clan_list .list .info {margin-bottom:0; padding-left:0; margin-top:0; background: url(../../images/common/clan/ptn04.png) 0 0 repeat; padding:2rem; width:100%;}
.clan_board.rank_clan .clan_list .list .logo {position:relative; left:0; top:-17px;  margin:0 auto; }
.clan_board.rank_clan .clan_list .list .name {margin-top:-3.6rem;}
.clan_board.rank_clan .clan_list .list .con > div {border-left:none !important;}
.clan_board.rank_clan .clan_list .list .ml {margin-bottom:0; background:none; border-bottom:1px solid rgba(136, 136, 136, 0.1); position:relative;}
.clan_board.rank_clan .clan_list .list .ml:last-child {border-bottom:none;}
.clan_board.rank_clan .clan_list .list .ml:before, .clan_board.rank_clan .clan_list .list .ml:after  {content:''; display:block; position:absolute; width:4px; height:2px; background:#999999; bottom:0;}
.clan_board.rank_clan .clan_list .list .ml:before {left:0;}
.clan_board.rank_clan .clan_list .list .ml:after {right:0;}
.clan_board.rank_clan .clan_list .list .ml:last-child:before, .clan_board.rank_clan .clan_list .list .ml:last-child:after {display:none;}
.clan_board.rank_clan .clan_list .list .con:before, .clan_board.rank_clan .clan_list .list .con:after {display:none;}
.clan_board.rank_clan .clan_list .list .con .date {color:#aaaaaa; border:none; position:absolute; bottom:-4.8rem; left:0; right:0; height:auto; text-align:center; padding:1.5rem 2.4rem;}
.clan_board.rank_clan .clan_list .list .con .date:before, .clan_board.rank_clan .clan_list .list .con .date:after {display:none;}
.clan_board.rank_clan .clan_list .list .con .date span {font-weight:400; margin-right:1rem; display:inline-block; position:static; transform:none; color:#999999; font-size:14px;}

.clan_board.rank_clan .clan_list .list .no02 .con, .clan_board.rank_clan .clan_list .list .no03 .con {background-image: none; border-color:rgba(0, 255, 204, 0.5); overflow: visible; border-left-width:1px;}
.clan_board.rank_clan .clan_list .list .no02 .info, .clan_board.rank_clan .clan_list .list .no03 .info {background: url(../../images/common/clan/ptn03.png) 0 0 repeat;}
.clan_board.rank_clan .clan_list .list .no02 .ml:before, .clan_board.rank_clan .clan_list .list .no02 .ml:after, .clan_board.rank_clan .clan_list .list .no03 .ml:before, .clan_board.rank_clan .clan_list .list .no03 .ml:after {background:#00ffcc;}
.clan_board.rank_clan .clan_list .list .no02 .con:before, .clan_board.rank_clan .clan_list .list .no02 .con:after, .clan_board.rank_clan .clan_list .list .no03 .con:before, .clan_board.rank_clan .clan_list .list .no03 .con:after {display:block; width:12px; height:12px; bottom:-7px; background: url(../../images/common/clan/bg_plus02.png) 0 0 repeat;}
.clan_board.rank_clan .clan_list .list .no02 .con:before, .clan_board.rank_clan .clan_list .list .no03 .con:before {left:-7px;}
.clan_board.rank_clan .clan_list .list .no02 .con:after, .clan_board.rank_clan .clan_list .list .no03 .con:after {right:-7px;}
.clan_board.rank_clan .clan_list .list .no02 .info:before, .clan_board.rank_clan .clan_list .list .no02 .info:after, .clan_board.rank_clan .clan_list .list .no03 .info:before, .clan_board.rank_clan .clan_list .list .no03 .info:after {content:''; position:absolute; display:block; width:12px; height:12px; top:-7px; background: url(../../images/common/clan/bg_plus02.png) 0 0 repeat;}
.clan_board.rank_clan .clan_list .list .no02 .info:before, .clan_board.rank_clan .clan_list .list .no03 .info:before {left:-7px;}
.clan_board.rank_clan .clan_list .list .no02 .info:after, .clan_board.rank_clan .clan_list .list .no03 .info:after {right:-7px;}
.clan_board.rank_clan .clan_list .list .no02 .con .date, .clan_board.rank_clan .clan_list .list .no03 .con .date {color:#00ffcc;}


.clan_board.rank_clan .clan_list .list .no01 .con {background-image: none; border-color:rgba(255, 255, 0, 0.5); overflow: visible; border-left-width:1px;}
.clan_board.rank_clan .clan_list .list .no01 .info {background: url(../../images/common/clan/ptn02.png) 0 0 repeat;}
.clan_board.rank_clan .clan_list .list .no01 .ml:before {background:#ffff00;}
.clan_board.rank_clan .clan_list .list .no01 .con:before, .clan_board.rank_clan .clan_list .list .no01 .con:after {display:block; width:12px; height:12px; bottom:-7px; background: url(../../images/common/clan/bg_plus01.png) 0 0 repeat;}
.clan_board.rank_clan .clan_list .list .no01 .con:before {left:-7px;}
.clan_board.rank_clan .clan_list .list .no01 .con:after {right:-7px;}
.clan_board.rank_clan .clan_list .list .no01 .info:before, .clan_board.rank_clan .clan_list .list .no01 .info:after {content:''; position:absolute; display:block; width:12px; height:12px; top:-7px; background: url(../../images/common/clan/bg_plus01.png) 0 0 repeat;}
.clan_board.rank_clan .clan_list .list .no01 .info:before {left:-7px;}
.clan_board.rank_clan .clan_list .list .no01 .info:after {right:-7px;}
.clan_board.rank_clan .clan_list .list .no01 .con .date {color:#ffff00;}

.clan_board.rank_clan .clan_list .list .my .con {height:auto;}
.clan_board.rank_clan .clan_list .list .my {width:100%; }
.clan_board.rank_clan .clan_list .list .my .info {background:none; border-bottom: 1px solid #555;}
.clan_board.rank_clan .clan_list .list .my .num {background:url('../../images/common/clan/bg_rank_my.png') center center no-repeat; background-size:48px auto;}
.clan_board.rank_clan .clan_list .list .my .name a {position:static; padding:0; }
.clan_board.rank_clan .clan_list .list .my .name a:after {right:2rem; top:2rem; left:auto;}
.clan_board.rank_clan .clan_list .list .my .con .date {color:#aa9977;}

/* clan */
.clan_section .top .no_clan .con {display:block; text-align:center; padding:0; margin-top:3rem;}
.clan_section .top .no_clan .con .go_clan {margin-left:auto; margin-right:auto;}

/* connunity */
.clan_content.community {padding-bottom:0;}
.clan_commu .list_con .list  {border:none;}
.clan_commu .list_con .list > li {margin-bottom:2rem;}
.clan_commu .list_con .list .con {padding:4rem 2rem 2rem; position:relative; border:1px solid #116655;}
.clan_commu .list_con .list .con > div {border:none; display:block; height:auto; line-height:normal; padding:0; border:none; width:100%; overflow: visible; text-overflow: inherit; -ms-text-overflow: ellipsis;  white-space: normal;}
.clan_commu .list_con .list li:first-child .con > div {border:none;}
.clan_commu .list_con .list .con .tit {width:auto; padding:0; margin-bottom:2rem; padding-bottom:2rem; border-bottom:1px solid #116655 !important;}
.clan_commu .list_con .list .con .writer {width:auto; padding:0; padding-right:10rem;}
.clan_commu .list_con .list .con .date {width:auto; padding:0; text-align:left; position:absolute; top:2rem; left:2rem;}
.clan_commu .list_con .list .con .topic {width:auto; padding:0; position:absolute; bottom:2rem; right:2rem;}
.clan_commu .list_con .list .con .topic span {transform:none; position:static;}
.clan_commu .list_con .list .con .tit a {max-height:57px; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; white-space: normal; word-break: break-all;}
.clan_commu .list_con .list .con .tit .txt {padding-right:0;}
.clan_commu .list_con .list .con .tit .txt .desc {right:0; bottom:0; position:absolute; min-width:56px; display:none;}
.clan_commu .list_con .list.manager {border:none; }
.clan_commu .list_con .list.manager .con {border:1px solid #777700; border-top:4px solid #ffff00;}
.clan_commu .list_con .list.manager li:first-child .con > div {border:none;}
.clan_commu .list_con .list.manager .con .tit {border-bottom:1px solid #777700 !important; }
.clan_commu .list_top:after {content:''; display:block; clear:both;}
.clan_commu .go_write {position:relative; float:right; margin-bottom:2.4rem;}
.clan_search02 {clear:both; position:relative; padding-left:144px;}
.clan_search02 .select {top:0; bottom:0; left:0;  width:144px; position:absolute; }
.clan_search02 .select .sel_on {border-right:0;}
.clan_search02 .c_s_box {padding-right:0; }
.clan_search02 .c_s_box button { top: 50%; right: 1.8rem; font-size: 0;  width: 12px;  height: 12px; transform: translate(0 , -50%);  background-repeat: no-repeat; background-position: 0 0;background-size: auto; border-left:0; background-image: url(../../images/common/clan/icon_search.png);}
.clan_commu .result .txt {    border-left: 1px solid #116655;}
.board_wrap .enter_area {position:fixed; bottom:0; left:0; right:0;}
.board_wrap .user_area {bottom:auto; right:0;}

/* view */
.clan_commu .view .top .info {position:relative; padding-right: 15rem;}
.clan_commu .view .top .info .date {border:none; padding:0; margin:0; top:50%; right:3.6rem; transform: translate(0 , -50%); position:absolute;}
.clan_commu .view .cmt_area .btns_view {position:static; text-align:left; margin-top:2rem;}
.clan_commu .view .cmt_area .btns_view a {margin:0 1.2rem 0 0;}
.clan_commu .view .cmt_area .info .date {margin:0 0 0 2.8rem; padding:0; display:block; border:none;}
.clan_commu .view .cmt_area .info .writer img {position:relative;}
.clan_commu .view .cmt_area {padding-right:0;}
.clan_commu .view .submit_area .btn_submit {position:static; margin-right:3.6rem;}
.clan_commu .view .submit_area {padding:0 0 2rem; text-align:right; border:1px solid #116655; border-left: 2px solid #00ffcc;}
.clan_commu .view .submit_area textarea {border-bottom:1px solid #116655; margin-bottom:2rem; left:0;}
.clan_commu .view .first .submit_area .btn_submit {width:144px; height:72px; line-height:72px;}
.clan_commu .view .first .submit_area {padding-right:0;}
.clan_commu .view .first {padding:0 0 2rem;}
.clan_commu .view .first .submit_area textarea {height:144px;}
.clan_commu .view .clan_view_paging .view_list li {padding-right:0; height:auto; line-height:normal; padding-top:2rem; padding-bottom:2rem;}
.clan_commu .view .clan_view_paging .view_list .date {position:static; width:auto; text-align:left; border:none; padding-left:3.6rem;}

/**/
.clan_section .medal .con h3 {left:-5rem;}
.clan_section .medal .con:before {left:2.6rem;}
.clan_section .medal .con {padding-left:15rem;}
.clan_section .medal .step {position:relative; margin-bottom:2rem; top:auto; right:0; background:none; padding:0; border:none; min-width:0;}
.clan_section .medal .step:before, .clan_section .medal .step:after {display:none;}
.clan_section .medal .step img {position:static; margin-right:1.3rem;}

/* clan medal */
.clan_content .clan_medal .cm_explan {padding:3rem; padding-right:3rem; padding-bottom:0;}

/* messenger */
.board_wrap {background:#fff; padding:0; max-width:none; border-radius:0; border:none; border-top:1px solid #00ffcc; border-bottom:1px solid #00ffcc;}
.board_wrap .messenger {padding:0; border:none; background:none;}
.board_wrap .messenger:before, .board_wrap .messenger:after {left:2.4rem; right:2.4rem;}
.board_wrap .enter_area:before {left:2.4rem; right:2.4rem;}
.board_wrap .noti_area {padding:3rem;}
.board_wrap .noti_area:before {left:3rem;}
.board_wrap .chat_area {padding:3rem 1rem 3rem 3rem; position:relative;}
.board_wrap .chat_area .chat {padding-right:1rem; position:absolute; top:3rem; right:1rem; bottom:3rem; left:3rem; max-height:none;}
.board_wrap .enter_area textarea {padding:3rem 15.2rem 3rem 3rem;}
.board_wrap .enter_area .btn_send {right:3rem;}
.board_wrap .enter_area .cursor {left:2rem; top:3.7rem;}
.board_wrap .user_area {width: auto; font-size:0;     }
.board_wrap .user_area .member_list {display:inline-block !important; position:relative; vertical-align:top;  background:none; padding-top:0; padding-right:0 !important; border:none; width:22.8rem; transform: translateX(22.8rem); transition: all 0.7s ease-in-out;}
.board_wrap .user_area .member_list .btn_ml {display:block; border-radius:0.8rem 0 0 0; }
.board_wrap .user_area .member_list .ovys {background: linear-gradient(to bottom, #353535, #292929);     border: 1px solid #ffee00; border-radius:0 0 0 0.8rem; border-top:0;}
.board_wrap .user_area:before {    transform: rotate(90deg); display:none;}
.board_wrap .user_area.open:before {transform: rotate(90deg);}
.board_wrap .user_area .btn_ml span:before {    transform: rotate(90deg); display:none;}
.board_wrap .user_area.open .member_list {transform: translateX(0); transition: all 0.7s ease-in-out;}
.board_wrap .user_area > .btn_ml {text-align:center; position:absolute; top:0; right:0;  width:6rem; height:6rem;     padding: 1rem 0 0; border-radius:0.8rem 0 0 0.8rem; border:1px solid #00ffcc; background:#007c63; box-shadow:0.4rem 0.4rem 0.7rem rgba(0, 0, 0, 0.4); font-size:0; border-right: 0;}
.board_wrap .user_area > .btn_ml:before {margin:0 auto; background-color:rgba(255, 255, 255, 0) !important; position: static; content:''; display:block; width:2.6rem; height:1.7rem; background-repeat:no-repeat; background-position:0 0; background-image:url('../../images/common/clan/icon_memeber_m.png') !important; background-size:100% auto !important;}
.board_wrap .user_area > .btn_ml:after {display:none;}
.board_wrap .user_area > .btn_ml font {margin-top:0.7rem; display:block; color:#fff; font-size:14px; letter-spacing:0.04em;}
.board_wrap .user_area > .btn_ml:hover:before {background-color: rgba(255, 255, 255, 0); background-position:0 -1.7rem;}
.board_wrap .user_area > .btn_ml:hover font {color:#ffee00;}

.board_wrap .user_area .member_list .btn_ml span:before {left:auto; content:''; display:block; position:absolute; top:50%; transform:translate(0 , -50%) rotate(90deg); right:1.7rem; width:2.2rem; height:1.3rem;  background:url('../../images/common/clan/user_arr.png') 0 0 no-repeat; z-index:1;  background-size:100% auto;}
.board_wrap .go_latest {right:3rem;}
}

@media screen and (max-width: 768px) {
body, th, td, input, select, textarea, button {font-size:2.5rem;}

.pop-up .pop-layout > h2 {font-size:2.9rem;}
.pop-up .pop-close {background-size:21px auto;}
.pop-up .pop-con {top:8rem;}
.pop-up .user ul li .desc .tit {font-size:2.2rem; position:static; transform:none; margin-bottom:1rem;}
.pop-up .user ul li .desc {font-size:2.9rem; min-height:52px; padding-left:2.4rem;}
.pop-up .info .tit_h3 {font-size:2.3rem;}
.pop-up .info ul li .desc {font-size:2.4rem; padding-left:17rem;}
.pop-up .info ul li .desc .tit {font-size:2.2rem;}
.pop-up .btn-detail {font-size:2.3rem; width:164px;}
.pop-up .state .info {display:block; width:100%; padding:0; margin-top:13rem;}
.pop-up .state .logo {display:block; margin:47px auto;}
.pop-up .state:before {left:50%; transform:translate(-50% , 0); top:-47px;}
.pop-up .state .info li {font-size:2.4rem; padding-left:28rem;}
.pop-up .state .info li span {font-size:2.2rem;}
.pop-up .rank .lv, .pop-up .rank .per {font-size:2.3rem;}
.pop-up .rank .lv img {width:13px; height:13px;}
.pop-up .rank {padding:5rem 0;}
.pop-up .state .logo img {width:auto; height:auto;}



	
.n_more {width:68px; height:21px; line-height:20px; font-size:2rem;}
	
.clan_search .select .sel_on {height:42px; line-height:42px; font-size:2.3rem;}
.clan_search .select li a {font-size:2.3rem;}
.clan_search .c_s_box {height:42px; line-height:42px; padding-right:42px;}	
.clan_search .c_s_box button {width:42px;}
.clan_content .search_area .result .clan_board .n_list li {width:100%; }
.clan_content .search_area .result .txt {font-size:2.3rem;}

.clan_board .inner > .tit {font-size:2.6rem; background-size:130px auto;}
.clan_board.new_clan .n_list {min-width:1460px;}
.clan_board.new_clan .n_list li {width:280px;}
.clan_board .n_list li .name {font-size:2.9rem;}
.clan_board .n_list li.n_con .rank {font-size:2.3rem; top:5.5rem;}
.clan_board .n_list li.n_con img {width:13px; height:13px; position: relative; top: -1px;}
.clan_board .n_list li.n_con > div.ml:before {font-size:2.1rem;}
.clan_board .n_list li.n_con > div.ml {font-size:2.3rem; padding-left:17rem; border-width:2px;}
.clan_board .n_nodata {font-size:2.3rem;     padding: 10rem 0;}

.rank_clan > .list > li {width:100%;}	
.rank_clan > .list > li:last-child {margin-bottom:0;}
.rank_clan > .list > li .con .top .num {top:1.4rem; right:auto; left:1.4rem; width:38px; height:38px; line-height:38px; background-size:cover; font-size:3.4rem;}
.rank_clan > .list > li .con .top .name a {font-size:2.9rem;}
.rank_clan > .list > li .con .top .rank {font-size:2.3rem;}
.rank_clan > .list > li .con .bottom .info li {font-size:2.3rem; padding-left:13rem;}
.rank_clan > .list > li .con .bottom .info li span {font-size:2.1rem;}
.rank_clan > .list > li.no01 .con .top .num {top:1.4rem; right:auto; left:1.4rem; width:40px; height:40px; line-height:40px; font-size:3.4rem; background-size:cover;}
.rank_clan > .list > li .date {font-size:2rem;}
.rank_clan > .list > li .con .top .rank img {width:13px; height:13px;}

.gm_pick > .tit {font-size:2.6rem;}

/* new clan */
.clan_board .clan_list .list {margin-left:0;}
.clan_board .clan_list .list li {display:block; width:100%; padding-left:0;}
.clan_board .clan_list .list .ml {border-width:2px !important;}
.clan_board .clan_list .list .info .name a {font-size:2.9rem;}
.clan_board .clan_list .list .ml {font-size:2.3rem; padding-left:17rem;}
.clan_board .clan_list .list .info .rank {font-size:2.3rem; margin-top:0;}
.clan_board .clan_list .list .con .rank img, .clan_board .clan_list .list .con .master img {width:13px; height:13px; margin-right:4px;}
.clan_board .clan_list .list .ml span {font-size:2.1rem;}
.clan_board .clan_list .list .master {padding-right:7.4rem;}
.clan_board .clan_list .list .info {margin-top:-6rem;}

/* rank clan */
.clan_board.rank_clan .clan_list .list li {margin-bottom:8rem;}
.clan_board.rank_clan .clan_list .list .ml {border-width:1px !important;}
.clan_board.rank_clan .clan_list .list .num {width:38px; height:38px; background-size:38px auto; font-size:2.9rem; line-height:38px;}
.clan_board.rank_clan .clan_list .list .no02 .num, .clan_board.rank_clan .clan_list .list .no03 .num {background-size:38px auto; font-size:3.4rem;}
.clan_board.rank_clan .clan_list .list .no01 .num {width:40px; height:40px; background-size:40px auto; font-size:3.4rem;}
.clan_board.rank_clan .clan_list .list .my .con {background-size:auto 8px;}
.clan_board.rank_clan .clan_list .list .my .num {top:4rem;}
.clan_board.rank_clan .clan_list .list .my .num {background-size:38px auto;}
.clan_board.rank_clan .clan_list .list .my .name a:after {top:4rem;}
.clan_board.rank_clan .clan_list .list .con .date {bottom:-6rem;}
.clan_board.rank_clan .clan_list .list .con .date span {font-size:2.3rem;}
.clan_board.rank_clan .clan_list .list .my .lg_txt {font-size:2.3rem;}
.clan_board.rank_clan .clan_list .list .name {margin-top:-6rem;}

/* clan */
.clan_section .top > .inner {background-size: auto 7px;}
.clan_section .top .no_clan img {width:91px;}
.clan_section .top .no_clan .con .txt {font-size:2.5rem;}
.clan_section .top .no_clan .con .txt span {font-size:3.3rem;}
.clan_section .top .no_clan .con .go_clan {font-size:2.3rem; width:127px; height:35px; line-height:35px; padding-left:4rem;}
.clan_section .top .no_clan .con .go_clan:before {right:2rem;}

.clan_section .top .info .name {font-size:5.1rem;}
.clan_section .top .master span, .clan_section .top .members span {font-size:2.2rem;}
.clan_section .top .master, .clan_section .top .members {font-size:2.6rem;}
.clan_section .top .date {font-size:2rem;}
.clan_section .top .rank {font-size:2.1rem;}
.clan_section .top .about .desc .txt {font-size:2.3rem;}
.clan_section .top .about .desc {max-height:150px;}
.clan_section .top .logo {transform: scale(0.5); margin:0 auto;}
.clan_section .top .info:before {transform: translate(-50% , 0) scale(0.5);     top: -33rem;}
.clan_section .top .info {margin-top:2.4rem;}

/* community */
.clan_commu .list_con .list .con {padding-top:6rem;}
.clan_commu .list_con .list .con > div {font-size:2.3rem;}
.clan_commu .list_con .list .con .tit a {font-size:2.5rem;}
.clan_commu .list_con .list .con .topic {bottom:2.5rem;}
.clan_commu .list_con .list .con .topic span {font-size:1.9rem;}
.clan_commu .list_con .list .con .tit .txt {padding-right:0;}
.clan_commu .list_con .list .con .tit .txt .desc .new img, .clan_commu .list_con .list .con .writer img {width:13px; height:13px;}
.clan_commu .list_con .list.manager .con {border-top-width:2px;}
.clan_commu .list_con .tit_manager {font-size:2.3rem; padding-left:2.6rem; margin-bottom:2rem;}
.clan_search02 {padding-left:112px;}
.clan_search02 .select {width:112px;}
.clan_search02 .c_s_box {padding-right:0;}
.clan_search02 .c_s_box button {width:12px;}
.clan_commu .go_write {width:112px; height:42px; line-height:42px; font-size:2.3rem;}
.clan_commu .result .txt {font-size:2.3rem;}
.go_list {width:140px; height:42px; line-height:42px; font-size:2.3rem;}


/* view */
.clan_commu .view .top .tit {font-size:2.7rem;}
.clan_commu .view .top .info > div {font-size:2.3rem;}
.clan_commu .view .btns_view a {font-size:2.3rem;  height:35px; line-height:35px;}
.clan_commu .view .btns_view a:before {right:1.8rem;}
.clan_commu .view .con {font-size:2.5rem;}
.clan_commu .view .top .info .writer img, .clan_commu .view .cmt_area .info .writer img {width:13px; height:13px; margin-right:4px;}
.clan_commu .view .cmt_area .num {font-size:2.1rem; top:-4rem;}
.clan_commu .view .cmt_area .info > div {font-size:2.3rem;}
.clan_commu .view .cmt_area .txt {font-size:2.5rem;}
.clan_commu .view .cmt_area .btns_view a {font-size:2rem;}
.clan_commu .view .cmt_area .info .date {margin-left:3.5rem;}
.clan_commu .view .cmt_area li.on_writer .info .writer {padding-right:11rem;}
.clan_commu .view .cmt_area .info .writer span {font-size:1.9rem; position: relative; top: 1px;}
.clan_commu .view .cmt_area .cmt {border-width:2px;}
.clan_commu .view .cmt_area .cmt .comment .reply {border-width:1px;}
.clan_commu .view .submit_area {border-left-width:1px;}
.clan_commu .view .submit_area textarea, .clan_commu .view .first .submit_area textarea {height:160px; font-size:2.3rem;}
.clan_commu .view .submit_area .btn_submit, .clan_commu .view .first .submit_area .btn_submit {width:98px; height:35px; font-size:2.3rem; line-height:35px;}
.clan_commu .view .clan_view_paging .view_list li {font-size:2.3rem; padding-left:44px;}
.clan_commu .view .clan_view_paging .view_list .arr {width:44px;}
.clan_commu .view .clan_view_paging .view_list .txt {padding-right:10rem;}
.clan_commu .view .clan_view_paging .view_list .txt span {margin-top:-2px;}

/* write */
.clan_commu .write li .tit {font-size:2.3rem; padding-left:8px;}
.clan_commu .write li .tit:before {width:2px; height:10px;}
.clan_commu .write li .txt input[type=text], .clan_commu .write li .txt textarea {font-size:2.5rem;}
.clan_commu .write .on_notice input[type=checkbox] + label {font-size:2.5rem;  padding-left:32px;}
.clan_commu .write .on_notice input[type=checkbox] + label:before {width:21px; height:21px;}
.clan_commu .write .on_notice input[type=checkbox]:checked + label:before {background-size:21px auto;}
.clan_commu .write .btns_write a {width:140px; height:42px; line-height:42px; font-size:2.3rem;}
.clan_commu .write li .txt textarea {height:300px;}

/**/
.clan_content .record .con {height:250px;}
.clan_content .record .season > div {display:block; width:100%; margin-bottom:2.4rem;}
.clan_content .record .section > .tit {height:42px; line-height:42px; font-size:2.6rem;}
.clan_content .record .clan_record .match {height:35px; line-height:35px; font-size:3.1rem; border-left-width:2px;}
.clan_content .record .clan_record .match span {font-size:2.6rem;}
.clan_content .record .clan_record .graph .gr00 .bar {position:relative; bottom:auto;}
.clan_content .record .clan_record .graph .gr01 .bar {width:58px; height:81px; background-size:58px auto; }
.clan_content .record .clan_record .graph .gr01 .bar .bar_on {background-size:58px auto;}
.clan_content .record .clan_record .graph .gr02 .bar {width:38px; height:81px; background-size:38px auto;}
.clan_content .record .clan_record .graph .gr02 .bar .bar_on {background-size:38px auto;}
.clan_content .record .clan_record .graph .gr03 .bar {width:53px; height:78px; background-size:53px auto;}
.clan_content .record .clan_record .graph .gr03 .bar .bar_on {background-size:53px auto;}
.clan_content .record .clan_record .graph .desc {font-size:5.9rem;  text-align:right; padding:0 1.2rem; margin-top:2rem;}
.clan_content .record .clan_record .graph .desc .tit {font-size:2.3rem; position:absolute; left:1.2rem; bottom:1rem;}
.clan_content .record .clan_record .match:before, .clan_content .record .clan_record .match:after {background-size: contain !important;}
.clan_content .record .clan_record .match:after {right:-3px;}
.clan_content .record .clan_record .graph .num {font-size:2.6rem;}
.clan_content .record .clan_record .graph .num {border-top-width:1px;}
.clan_content .record .season .graph {width:90px; float: none; display: inline-block; vertical-align: top; height:100%;}
.clan_content .record .season .graph ul {font-size:0; height:auto; max-width:none; height:100%; text-align:left; position:relative;}
.clan_content .record .season .graph li {display:inline-block; margin:0 5px; position:absolute; bottom:0;}
.clan_content .record .season .graph .gr02, .clan_content .record .season .graph .gr03 {width:24px;}
.clan_content .record .season .info {width: calc(100% - 90px); float: none; display: inline-block; vertical-align: top; padding-left:20px;}
.clan_content .record .season .info li {height:auto; background-size:24px auto;}
.clan_content .record .season .info li .desc .tit {font-size:2.3rem;}
.clan_content .record .season .info li .desc .per {font-size:4.3rem;}
.clan_content .record .season .info li .desc .num {font-size:2.6rem;}
.clan_content .record .season .total {margin-left:0;}
.clan_content .record .season .graph .gr00 {padding-bottom:0; padding-top:25px; padding-bottom:0;}
.clan_content .record .season .graph .gr00 .bar:before {font-family: 'Chakra Petch' !important; font-weight:700; content:''; display:block; position:absolute; left:50%; top:-3.5rem; letter-spacing:0.02rem; transform:translate(-50% , 0); text-transform:uppercase; font-size:2.6rem;}
.clan_content .record .season .graph .gr01 .bar:before {content:'WIN'; color:#ffff00;}
.clan_content .record .season .graph .gr02 .bar:before {content:'LOSE'; color:#00ffcc;}
.clan_content .record .season .graph .gr01 {background: url(../../images/common/clan/graph01_m.png) 0 0 no-repeat; background-size:24px auto; left:0; }
.clan_content .record .season .graph .gr02 {background: url(../../images/common/clan/graph02_m.png) 0 0 no-repeat; background-size:24px auto; left:29px;}
.clan_content .record .season .graph .gr03 {background: url(../../images/common/clan/graph03_m.png) 0 0 no-repeat; background-size:24px auto; padding-top:23px; left:58px;}
.clan_content .record .season .graph .gr01 .bar {background: url(../../images/common/clan/graph01_bg_m.png) 0 0 repeat;}
.clan_content .record .season .graph .gr02 .bar {background: url(../../images/common/clan/graph02_bg_m.png) 0 0 repeat;}
.clan_content .record .season .graph .gr03 .bar {background: url(../../images/common/clan/graph03_bg_m.png) 0 0 repeat;}
.clan_content .record .season .graph .gr00 .bar  {background-size: 24px !important;}
.clan_content .record .season .aos-animate .graph .gr00 {opacity:0; animation: animate-height cubic-bezier(0.35, 0.95, 0.67, 0.99) 0.4s forwards;  animation-delay:0.3s;}
.clan_content .record .con .matching {text-align:right; border-width:1px;}
.clan_content .record .con .matching .tit {font-size:2.6rem; position:absolute; left:1.2rem; top:50%; transform:translate(0 , -50%);}
.clan_content .record .con .matching .num {font-size:3.1rem; padding-left:22rem; margin-bottom:2px;}


.clan_content .bot_clan .con > .tit {height:42px; line-height:42px; font-size:2.6rem;}
.clan_content .bot_clan .con > .tit:before, .clan_content .bot_clan .con > .tit:after {background-size: contain !important;}
.clan_content .bot_clan .rank li .tit {font-size:2.3rem; left:2.4rem; }
.clan_content .bot_clan .rank li {padding:1.9rem 2.4rem 1.9rem 8.4rem;}
.clan_content .bot_clan .rank li a {font-size:2.5rem;}
.clan_content .bot_clan .rank li a:before {width:14px; height:14px; background-size:14px auto; background-position:0 -14px;}
.clan_content .bot_clan .rank li a:hover:before {background-position:0 0;}
.clan_content .bot_clan .rank li:before {display:none;}
.clan_content .bot_clan .over_wrap li a {font-size:2.3rem;}
.clan_content .bot_clan .over_wrap li a:before {width:14px; height:14px; background-size:14px auto; }
.clan_content .bot_clan .over_wrap li a:hover:before {background-position:0 -14px;}
.clan_content .bot_clan .over_wrap li a img {width:13px; height:13px; margin-right:7px;}
.clan_section .medal .con:before {width:28px;}
.clan_section .medal .con h3 img {width:110px;}
.clan_section .medal .chart .remain {height:18px; font-size:2.7rem; line-height:18px;}
.clan_section .medal .chart .remain span:after, .clan_section .medal .chart .remain span:before {background-size:auto 17px !important;}
.clan_section .medal .chart .remain span:before {width:21px; left:-21px;}
.clan_section .medal .chart .remain span:after {width:44px; right:-44px;}
.clan_section .medal .chart .remain span {margin-left:21px; height:17px; line-height:17px; top:-1px;}
.clan_section .medal .chart .graph {height:22px;}
.clan_section .medal .step {font-size:2.6rem;}
.clan_section .medal .step img {width:19px; vertical-align:middle;}

/* clan medal */
.clan_content .clan_medal .cm_explan .tit {word-break:keep-all; font-size:4.3rem; line-height:1.25;}
.clan_content .clan_medal .cm_explan .tit br {display:none;}
.clan_content .clan_medal .cm_explan ul li {font-size:2.5rem; word-break:keep-all;}
.clan_content .clan_medal .cm_explan ul li br {display:none;}
.clan_content .clan_medal .cm_explan .info {font-size:2.5rem;}
.clan_content .clan_medal .cm_howto > .tit {font-size:3.3rem;}
.clan_content .clan_medal .cm_howto > ul {display:block;}
.clan_content .clan_medal .cm_howto > ul > li {width:100%;}
.clan_content .clan_medal .cm_howto .con {background-size:auto 7px;}
.clan_content .clan_medal .cm_howto .con .tit {font-size:2.6rem;}
.clan_content .clan_medal .cm_howto .con li {font-size:2.4rem; padding-left:4rem;}
.clan_content .clan_medal .cm_howto .con li span {font-size:2.2rem; width:14px; height:14px; line-height:13px}
.clan_content .clan_medal .cm_howto .con .howto_c {font-size:2.3rem;}
.clan_content .clan_medal .cm_howto > .tit font {display:block;}
.clan_content .clan_medal .cm_explan ul li:after {width:8px; background-size:8px auto;}

/* summernote */
.modal[aria-label="Help"] label {width:auto !important;}
.modal[aria-label="Help"] span {font-size:11px;}
.modal[aria-label="Help"] .modal-footer a {font-size:11px;}

/* messenger */
.board_wrap .chat_area .chat .name {font-size:2.1rem;}
.board_wrap .chat_area .text {font-size:2.3rem; max-width: calc(100% - 62px);}
.board_wrap .chat_area .info {width:62px; top:5px;}
.board_wrap .chat_area .time {font-size:2.1rem; margin-top:3px;}
.board_wrap .chat_area .date {font-size:2.1rem;}
.board_wrap .chat_area .del .text:after {top:2rem;}
.board_wrap .btns_admin button {width:22px; height:22px; margin-right:1rem;}
.board_wrap .btns_admin button:last-child {margin-right:0;}
.board_wrap .btns_admin button.btn_del {border-left:1px solid #e5e5e5;}
.board_wrap .noti_area:before {left:3rem;}
.board_wrap .noti_area li .text {font-size:2.3rem;     background-position: left 1rem top 1.2rem;  background-size: 10px auto;}
.board_wrap .noti_area .btns_admin button.btn_del {width:24px; height:24px;}
.board_wrap .chat_area .date span {padding:0 5rem;}
.board_wrap .enter_area textarea {padding-right:22rem;}
.board_wrap .enter_area .btn_send {font-size:2.3rem; width:90px; height:30px; line-height:30px;}
.board_wrap .enter_area .cursor {top:4.5rem;}
.board_wrap .enter_area textarea {font-size:2.3rem;}

.board_wrap .user_area {}
.board_wrap .user_area .btn_ml {font-size:2.3rem; height:auto; padding:1.4rem 2rem;}
.board_wrap .user_area .btn_ml span:before {width:16px; height:9px; background-size:100% auto; top:4.8rem;}
.board_wrap .user_area .member_list .user_img {width:5.4rem; height:5.4rem; background-size:100% auto; margin-top:-2.7rem;}
.board_wrap .user_area .member_list .user_img img {width:100%; height:100%;}
.board_wrap .user_area .member_list .user_img:before {width:12px; height:12px; background-size:100% auto;}
.board_wrap .user_area .member_list li {font-size:2.1rem; padding-left:48px;}
.board_wrap .user_area.over .member_list li {padding-left:40px; padding-top:3rem; padding-bottom:3rem;}
.board_wrap .user_area .member_list .master .user_img:after {width:3rem; height:3rem; background-size:100% auto; margin-left:-1.5rem; top:-1.2rem;}
.board_wrap .user_area .member_list {width:160px; transform: translateX(160px);}
.board_wrap .user_area > .btn_ml {font-size:0; height:8.4rem; width:8.4rem;}
.board_wrap .user_area > .btn_ml:before {width:3.5rem; height:2.3rem;}
.board_wrap .user_area > .btn_ml:hover:before {background-position:0 -2.3rem;}
.board_wrap .user_area.over .member_list .ovys {max-height:23rem; padding:1.2rem 1.6rem 1.2rem 1.2rem;}
.board_wrap .user_area .member_list:before {top:3.6rem;}
.board_wrap .user_area.over .member_list .ovys {max-height:21rem;}
.board_wrap .chat_area .chat .user.master:before {width:3rem; height:3rem; bottom:-1rem; right:-1rem; background-size:100% auto;}
.board_wrap .user_area .member_list li font.me {font-size:1.9rem; height:13px; line-height:12px;}
.board_wrap .go_latest {width:30px; height:30px;}
.board_wrap .go_latest:before {width:15px; height:9px; background-size:100% auto; margin-left:-7px; margin-top:-4px;}
.board_wrap .go_latest:hover {background:#fff;}
.board_wrap .go_latest:hover:before {background-position:0 0;}
}	

@keyframes animate-height {
  0% {
    height: 0;
    opacity:0;
  }
  100% {
    visibility: visible;
    opacity:1;
  }
}

@keyframes animate-width {
  0% {
    width: 0;
    opacity:0;
  }
  100% {
    visibility: visible;
    opacity:1;
  }
}

@keyframes cursor{ 
  0%{opacity:1;} 
  50%{opacity:0;} 
  100%{opacity:1;} 
}