@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;300;400;500;700;900&display=swap');


/* Reset CSS
* --------------------------------------- */
*, *:after, *:before { box-sizing: border-box; outline: none; word-break: break-word;}
body {font-family: 'Noto Sans KR', sans-serif; color: #282a2f; font-size: 16px; }
body.on {overflow: hidden; position: fixed; left: 0; top:0; width: 100%; height: 100%;}

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
form,fieldset,textarea,p,blockquote,th,td { padding: 0;    margin: 0; -webkit-border-radius:0;-webkit-appearance:none;}
a{text-decoration:none; color: #4a545d; }
a, button, div {
	-webkit-touch-callout:none;                /* prevent callout to copy image, etc when tap to hold */
    -webkit-text-size-adjust:none;             /* prevent webkit from resizing text to fit */
    -webkit-tap-highlight-color:rgba(0,0,0,0); /* prevent tap highlight color / shadow */
    -webkit-user-select:none;                  /* prevent copy paste, to allow, change 'none' to 'text' */
	-webkit-tap-highlight-color:transparent;   /* ios */
}

table { border-spacing: 0;}
fieldset,img {  border: 0;}
address,caption,cite,code,dfn,em,strong,th,var { font-weight: normal; font-style: normal;}
strong{	font-weight: bold;}
ol,ul {list-style: none; margin:0; padding:0;}
caption,th {text-align: left;}
h1,h2,h3,h4,h5,h6 {font-weight: normal; font-size: 100%; margin:0; padding:0;}
q:before,q:after {content:'';}
abbr,acronym { border: 0;}



/*셀렉트박스*/
select { -webkit-appearance: none; /* 네이티브 외형 감추기 */ -moz-appearance: none; appearance: none; background-image: url("../img/arr_bottom.png"); background-repeat: no-repeat; background-position: 6px 8px; background-size: 8px; /* 화살표 모양의 이미지 */ } /* IE 10, 11의 네이티브 화살표 숨기기 */ select::-ms-expand { display: none; }

select { width: 100%; /* 원하는 너비설정 */ padding:5px 10px; /* 여백으로 높이 설정 */ font-family: inherit; /* 폰트 상속 */ background-color: #fff;  background-image: url("../img/arr_bottom.png"); background-repeat: no-repeat; background-position: 92% 12px; background-size: 8px;/* 네이티브 화살표 대체 */ border-radius: 50px; /* iOS 둥근모서리 제거 */ -webkit-appearance: none; /* 네이티브 외형 감추기 */ -moz-appearance: none; appearance: none; color: #5e6270; border: none; font-size: 0.875rem;  }


/*이미지 랜더링 시작*/
img {display: block;}
img[src$=".gif"], img[src$=".png"] {
                   image-rendering: -moz-crisp-edges;         /* Firefox */
                   image-rendering:   -o-crisp-edges;         /* Opera */
                   image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
                   image-rendering: crisp-edges;
                   -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
                 }

div {   image-rendering: -moz-crisp-edges;         /* Firefox */
        image-rendering:   -o-crisp-edges;         /* Opera */
        image-rendering: -webkit-optimize-contrast;/* Webkit (non-standard naming) */
        image-rendering: crisp-edges;
        -ms-interpolation-mode: nearest-neighbor;  /* IE (non-standard property) */
}
/*이미지 랜더링 끝*/


/* clearfix */
.clearfix:before,
.clearfix:after { content:""; display:table;}
.clearfix:after { clear:both;}
.clearfix { zoom:1;}


/* dis_web dis_mob */
.dis_web { }
.dis_mob { display: none;}

.p_all {padding: 8px;}
.p_tb {padding: 8px 0 8px 0;}
.p_t {padding: 8px 0 0 0;}
.p_b {padding: 0 0 8px 0;}
.p_lr {padding: 0 15px 0 15px;}
.mt_8 {margin: 8px 0 0 0;}
.mt_20 {margin: 20px 0 0 0;}
.mt_30 {margin-top: 30px!important;}
.m_lr {margin: 0 8px 0 8px ;}

.pd_bottom_20 { padding-bottom: 20px!important;}

.red { color: red!important;}
.blue { color: #1575f2!important;}

.txt_right {text-align:right!important;}
.txt_left {text-align:left!important;}

.blurEffect { filter: blur(5px);  -webkit-filter: blur(5px);}
.blind { position: absolute; clip: rect(0 0 0 0); width: 1px; height: 1px; margin: -1px; overflow: hidden;}


body {background-color: #ebedf1; margin: 0; padding: 0;}

/* 해더 */
.header { position: fixed; top: 0; width: 100%; min-width: 320px; height: 130px; background-color: #fff; z-index: 100; border-bottom: 1px solid #ebedf1;}
.top_rank_icon { display: inline-block; width: 50px; height: 50px; margin: 5px 0 5px 10px;}
.top_rank_icon img { width: 100%;}
.header .bar { position: absolute; width: 1px; height: 25px; top: 18px; left: 79px; background-color: #ebedf1; }
.top_robot_icon { position: absolute; width: 165px; top: -17px; left: 5px; white-space: nowrap;}
.top_robot_icon a { display: inline-block; width: 90px; height: 80px; border-radius: 30px; background-position: center; background-size: cover; background-repeat: no-repeat;}
.top_robot_icon a img { width: 100%;}
/*.top_robot_icon a.on { display: none;}*/


/* 메뉴 */
.h_menu {float: right; height: 60px;}
.mobile-menu { display: block; position: absolute; bottom: 13px; right: 0px; z-index: 500; width: 55px; height: 55px; padding: 3px; background-color: transparent; border: 0;  z-index: 11112; }
.mobile-menu i { font-size: 2.5em; color: #fff;}
.menuwrap { position: fixed; top: 0;
    right: -350px; /* 너비 300px 인 사이드바를 왼쪽으로 300px 이동시켜 화면에 보이지 않게 함 */
    z-index: 11111;
    width: 350px; /* 너비 */
    height: 100%; padding: 22px 10px; box-sizing: border-box;
    transition: right .3s ease-in-out; /* 0.3초 동안 이동 애니메이션 */
    background-color: #fff; overflow: visible;
	min-height: 580px;
}
.menuwrap.on {right: 0;}
#dimmed { position: fixed; top: 0; left: 0; z-index: 11110; width: 100%; height: 100%; background-color: rgba(0,0,0,0.8);}

.menu_open {  background-image: url("../img/ico_h_menu_open.png"); background-repeat: no-repeat; background-position: top center; background-size: cover;}
.menu_close { background-image: url("../img/ico_h_menu_close.png"); background-repeat: no-repeat; background-position: top center; background-size: cover; top: 0;}


/*메뉴내부*/
.menuwrap > .tit {font-size:  0.9375rem; color: #282a2f!important; font-weight: 500;}
.menuwrap .user_info { margin-top: 8px;}
.menuwrap .user_info .user_profile2 {display: inline-block; width: 45px; height: 45px; border-radius: 8px; background-color: #ebedf1; box-shadow: rgb(255 255 255 / 100%) 0px 0px 0px 2px; background-repeat: no-repeat; background-size: cover; margin-top: 4px;}
.menuwrap .user_info .name {display: inline-block;  vertical-align: top; margin: 8px 0 0 10px;}
.menuwrap .user_info .name .setting { margin-top: -6px;}
.menuwrap .user_info .name .user_name2 {display: block; font-size: 0.8125rem; font-weight: 600; color: #282a2f!important;}
.menuwrap .user_info .name .user_edit { font-size: 0.625rem; font-weight: 400; color: #72778e;}
.menuwrap .user_info .name .user_edit:hover { color: #2e60de;}
.menuwrap .user_info .name .bar2 { font-size: 0.5625rem; font-weight: 100; color: #c6cadb; margin: 0 13px;}
.menuwrap .user_info .user_rank {position: absolute; width: 55px; height: 55px; top: 46px; right: 8px; background-repeat: no-repeat; background-position: top center; background-size: cover;}

.menuwrap .medal_area {position: relative; width: 100%; padding: 15px;  margin-top: 15px; border-radius: 50px; background-color: #ebedf1; background-image: url(../img/img_medal.png); background-repeat: no-repeat; background-position: 21px; background-size: 35px;}
.menuwrap .medal_area .count {margin: 0 0 0 50px; font-size: 1rem; color: #1b1c21;}
.menuwrap .medal_area .charge {position: absolute;  top:16px; right: 15px; font-size: 0.875rem;color: #1469d8;}

.menuwrap .cell_area {display: flex; flex-wrap: wrap; font-size:0.875rem; margin-top: 15px;}
.menuwrap .cell_area .v_box1 {flex-grow: 1; width: 25%; padding-right: 25px}
.menuwrap .cell_area .v_box1 .tit {position: relative; padding:6px 40px 6px 0;}
.menuwrap .cell_area .v_box1 .tit a {color: #282a2f!important;}
.menuwrap .cell_area .v_box1 .tit a:hover {color:#2e60de!important;}
.menuwrap .cell_area .v_box1 .tit .count {position: absolute; width: 40px; top:4px; right: 0px; padding: 3px 5px; border-radius: 20px; background-color: #ebedf1; text-align: center; font-size:0.75rem}

.menuwrap .cell_area .v_box1 .tit2, .menuwrap .cell_area .v_box2 .tit2 {position: relative; padding:6px 0;}
.menuwrap .cell_area .v_box1 .tit2 a, .menuwrap .cell_area .v_box2 .tit2 a {color: #282a2f!important;}
.menuwrap .cell_area .v_box1 .tit2 a:hover, .menuwrap .cell_area .v_box2 .tit2 a:hover {color: #2e60de!important;}
.menuwrap .cell_area .v_box2 {flex-grow: 0; width: 60px;}

.menuwrap .service_area {display: flex; flex-wrap: wrap; justify-content: space-between;}
.menuwrap .service_area .box { display: inline-block; width: 25%; margin-top: 8px; color: #282a2f!important;}
.menuwrap .service_area .box img { width: 100%;}
.menuwrap .service_area .box p { text-align: center;  font-size: 0.875rem;}
.menuwrap .service_area .box:hover { color: #2e60de!important; }
.menuwrap .service_area .box p:nth-child(2) { margin-top: -9px;}

.policy_area {position: absolute; width: 94%;  bottom: 20px; font-size: 0.75rem; text-align: center; color: #72778e;}
.policy_area a {color: #72778e;}
.policy_area span {margin: 0 10px; font-weight: 100; color: #eee}

/*상단카테고리메뉴*/
.top_menu_wrap { position: absolute; right: 10px; top: 60px; display: flex; width: 320px ; min-width: 320px; max-width: 800px; flex-wrap: wrap;}
html[lang="en"] .top_menu_wrap { position: absolute; right: 25px; top: 60px; display: flex; width: 320px ; min-width: 320px; max-width: 800px; flex-wrap: wrap;}
.top_menu_wrap a { flex-grow: 1;   height: 50px; background-repeat: no-repeat; background-size: auto 100%; }
.top_menu_wrap a img { width: auto; height: 100%;}
.posting { background-image: url("../img/top_menu_posting_off.png"); }
.posting_on { background-image: url("../img/top_menu_posting_on.png"); }
.circle { background-image: url("../img/top_menu_circle_off.png"); }
.circle_on { background-image: url("../img/top_menu_circle_on.png"); }
.chat { background-image: url("../img/top_menu_chat_off.png"); }
.chat_on { background-image: url("../img/top_menu_chat_on.png"); }
.search { background-image: url("../img/top_menu_search_off.png"); }
.search_on { background-image: url("../img/top_menu_search_on.png"); }
.push { background-image: url("../img/top_menu_push_off.png"); }
.push_on { background-image: url("../img/top_menu_push_on.png"); }
.shop { background-image: url("../img/top_menu_market_off.png"); }
.shop_on { background-image: url("../img/top_menu_market_on.png"); }



/*본문내용*/
.container {width: 100%; max-width: 680px; min-width: 320px; margin: 125px auto 5px auto;}
.container2 {width: 100%; max-width: 680px; min-width: 320px; margin: 140px auto 5px auto;}

/********************************** 포스팅 리스트 ****************************************/
.post_type {position: relative; width: 100%; position: relative;}
.posting_sort { display: inline-block; width: 80px;}

/*리스트스타일토글*/
.sel_layout { position: absolute; top: 0px; right: 15px; width: 40px;  background-color: #fff; text-align: center; border-radius: 30px;}
.formToggleTst {height: 28px;}
.formToggleTst input[type=checkbox] + label { display: inline-block; width: 40px; height: 29px; background-image: url("../img/sel_list_type_off.png"); background-repeat: no-repeat; background-position: top center; background-size: auto 29px; cursor: pointer;}
.formToggleTst input[type=checkbox]:checked + label {  background-image: url("../img/sel_list_type_on.png");}
.formToggleTst input[type=checkbox] {display: none;}


/*포스팅*/
.positing_box {position: relative; background-color: #fff; margin-bottom: 1px;}

/*단축메뉴*/
.menu_3p {position: absolute; width: 30px; height: 30px; top:30px; right: 10px; cursor: pointer;}
.menu_3p span {position: absolute; display: block; width: 5px; height: 5px; border-radius: 3px; background-color: #72778e;}
.menu_3p span:nth-child(1) {top:0px; left: 10px;}
.menu_3p span:nth-child(2) {top:8px; left: 10px;}
.menu_3p span:nth-child(3) {top:16px; left: 10px;}

/*단축메뉴 팝업*/
.w3-modal {z-index: 111111; display: none; padding-top: 26vh; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7);}
.modal_close_bg { position: fixed; top: 0; left: 0; height: 100vh; width: 100%; cursor: pointer;}
.modal_box {width: 200px; margin:0 auto; background-color: #fff; padding: 10px 0 ; position: relative; outline: 0; animation: animatezoom 0.6s; box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 19%); border-radius: 8px;}
.modal_txt a { display: block;  text-align: center; padding: 10px; font-size: 1rem; line-height: 1.4rem; border-top: 1px solid #eee;}
.modal_txt a:first-child { border-top: none;}

/*포스팅 유저*/
.positing_box .info_area {padding:30px 25px 0 25px}
.positing_box .info_area .circle_profile {display: inline-block; width: 50px; height: 50px; border-radius: 50px; background-color: #ebedf1; box-shadow: rgb(255 255 255 / 100%) 0px 0px 0px 2px, rgb(21 117 242 / 100%) 0px 0px 0px 4px; background-repeat: no-repeat; background-size: cover;}
.positing_box .info_area .user_profile   {display: inline-block; width: 45px; height: 45px; margin-left: -10px; margin-bottom: 2.5px; border-radius: 8px; background-color: #ebedf1; box-shadow: rgb(255 255 255 / 100%) 0px 0px 0px 2px; background-repeat: no-repeat; background-size: cover;}
.positing_box .info_area .name {display: inline-block; width: 70%;  margin-bottom: 5px; vertical-align: top; margin: 2px 0 0 20px;}
.positing_box .info_area .name .circle_name { height: 21px; font-size: 14px; font-weight: 600; text-overflow: ellipsis; overflow: hidden;
    word-wrap: break-word; display: -webkit-inline-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.positing_box .info_area .name .setting {margin-top: -3px;}
.positing_box .info_area .name .setting .user_name {font-size: 0.875rem; margin-right: 20px;}
.positing_box .info_area .name .setting .positng_date {font-size: 0.75rem; color: #72778e; display: inline-block;}

/*포스팅 텍스트/이미지 기본형 */
.positing_box .list_thumb {display: flex; flex-wrap: wrap;}
.positing_box .text_area { width: 100%;  padding:25px 25px 0 25px; text-overflow: ellipsis; overflow: hidden;  word-wrap: break-word; display: -webkit-inline-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 0.875rem; line-height: 1.4rem;}
.positing_box .img_area {  display: block; padding:15px 0 0 0; overflow: hidden; max-height: 500px; }
.positing_box .img_area img {width: 100%; object-fit: cover;}

/*포스팅 텍스트/이미지 썸네일형*/
.positing_box .text_area_left {flex-grow:1; width: calc(100% - 200px); padding:25px 25px 0 25px; text-overflow: ellipsis; overflow: hidden;  word-wrap: break-word; display: -webkit-inline-box;-webkit-line-clamp: 5; -webkit-box-orient: vertical; font-size: 0.875rem; line-height: 1.5rem;}
.positing_box .img_area_right {flex-grow: 0; width: 200px; display: block; padding:25px 25px 0 0; overflow: hidden; max-height: 150px; }
.positing_box .img_area_right img {width: 100%; object-fit: cover;}

/*좋아요 토글*/
.like_area {position: relative; padding:15px 15px 15px 15px; }
.like_count {display: inline-block;  height: 27px; }
.like_count .likeToggle {display: inline-block; height: 27px;}
.like_count .likeToggle input[type=checkbox] + label { display:block;  height: 27px; background-image: url("../img/ico_like_off.png"); background-repeat: no-repeat; background-position: top center; background-size: auto 27px; font-size:0.75rem; line-height: 1.5rem;  padding: 0 0 0 28px; background-position: 0px;  cursor: pointer;}
.like_count .likeToggle input[type=checkbox]:checked + label {  background-image: url("../img/ico_like_on.png"); color: #ff5353;}
.like_count .likeToggle input[type=checkbox] {display: none;}

/*댓글*/
.reply_area { height: 27px; margin-left: 25px; background-image: url("../img/ico_reply.png"); background-repeat: no-repeat;  background-size: auto 30px; font-size: 0.75rem; line-height: 1.5rem; padding: 0 0 0 28px; background-position: 0 -5px;}

/*공유*/
.share_area { height: 27px; margin-left: 25px; background-image: url("../img/ico_share.png"); background-repeat: no-repeat;  background-size: auto 30px; font-size: 0.75rem; line-height: 1.5rem; padding: 0 0 0 28px; background-position: 0 -5px;}

/*북마크 토글*/
.bookmark_area { position: absolute; top: 12px; right: 15px; display: inline-block;  height: 27px; }
.bookmark_area .bookmark {height: 27px;}
.bookmark_area .bookmark input[type=checkbox] + label { display:block;  height: 27px; background-image: url("../img/ico_bookmark_off.png"); background-repeat: no-repeat; background-position: top center; background-size: auto 27px; font-size:0.75rem; line-height: 1.5rem;  padding: 0 0 0 28px; background-position: 0px; cursor: pointer;}
.bookmark_area .bookmark input[type=checkbox]:checked + label {  background-image: url("../img/ico_bookmark_on.png"); color: #ff5353;}
.bookmark_area .bookmark input[type=checkbox] {display: none;}


/*즐겨찾기 토글*/
.favorit_area { display: inline-block;  height: 27px; }
.favorit_area .favorit {height: 27px;}
.favorit_area .favorit input[type=checkbox] + label { display:block;  height: 27px; background-image: url("../img/ico_favorit_off.png"); background-repeat: no-repeat; background-position: top center; background-size: auto 27px; font-size:0.75rem; line-height: 1.5rem;  padding: 0 0 0 28px; background-position: 0px; cursor: pointer; content: "<i class="fas fa-lock blue" ></i>"}
.favorit_area .favorit input[type=checkbox]:checked + label {  background-image: url("../img/ico_favorit_on.png"); color: #ff5353;}
.favorit_area .favorit input[type=checkbox] {display: none;}


/********************************** 써클 리스트 ****************************************/
.join_circle {position: relative;  background-color: #fff; overflow:hidden; padding-bottom: 20px; }
.join_circle .tit { margin: 30px 25px 12px 25px; font-size: 1rem; font-weight: 600;}
.join_circle .make_circle { position: absolute; top:35px; right: 25px; padding: 4px 8px; font-size: 0.8125rem; color: #1575f2; font-weight: 400; background-color: #ebedf1; border-radius: 20px;  transition: all 0.5s}
.join_circle .make_circle:hover {color: #fff;  background-color: #1575f2;}
.join_circle .circle_list {position: relative; padding:12px 25px 12px 25px}


.join_circle .circle_list .circle_profile {display: inline-block; width: 50px; height: 50px; border-radius: 50px; background-color: #ebedf1; box-shadow: rgb(255 255 255 / 100%) 0px 0px 0px 2px, rgb(21 117 242 / 100%) 0px 0px 0px 4px; background-repeat: no-repeat; background-size: cover;}
.join_circle .circle_list .user_profile   {display: inline-block; width: 45px; height: 45px; margin-left: -10px; margin-bottom: 2.5px; border-radius: 8px; background-color: #ebedf1; box-shadow: rgb(255 255 255 / 100%) 0px 0px 0px 2px; background-repeat: no-repeat; background-size: cover;}
.join_circle .circle_list .name {display: inline-block; width: calc(100% - 150px);  margin-bottom: 5px; vertical-align: top; margin: 2px 0 0 20px;}
.join_circle .circle_list .name .circle_name { height: 21px; font-size: 1rem; font-weight: 600; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.join_circle .circle_list .name {margin-top: -3px;}
.join_circle .circle_list .name .summary {  font-size: 0.875rem; margin-right: 20px; text-overflow: ellipsis; overflow: hidden;
    word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.join_circle .circle_list .name .member {display: block;  font-size: 0.75rem; margin-top: 3px; padding: 0 0 0 26px; color: #72778e; background-image: url("../img/ico_mem_1.png"); background-repeat: no-repeat; background-position: top 0px; background-size: 19px; }

.join_circle .circle_list .circle_list_right { position: absolute; top:22px; right: 30px; width: 90px; height: 40px; text-align: right;}
.join_circle .circle_list .circle_list_right .count { padding: 4px 13px 6px 13px; color: #fff; background-color: #1575f2; font-size: 0.75rem; border-radius: 30px; margin-right: 10px; }

.join_circle .circle_list .join { position: absolute; top:20px; right: 25px; padding: 4px 15px; font-size: 0.8125rem; color: #1575f2; font-weight: 400; background-color: #fff; border: 1px solid #1575f2; border-radius: 30px;}
.join_circle .circle_list .join:hover { color: #fff; background-color: #1575f2; transition: all 0.5s}




/********************************** 포스팅 뷰 ****************************************/
.view_top { position: relative; width: 100%;  background-color: #fff; text-align: center; border-bottom: 1px solid #ebedf1; z-index: 1;}
.view_top2 { position: relative; width: 100%;  background-color: #fff; text-align: center; border-bottom: 1px solid #ebedf1;}
.view_top2 .back_page_b, .view_top3 .back_page_b {display: block; position: absolute; width: 50px; height: 50px; font-size: 0.75rem; color: #72778e;  background-image: url(../img/ico_back_black.png); background-repeat: no-repeat; background-position: 7px 0px; background-size: 50px; top: 0px;}
.view_top2 .back_page_w, .view_top3 .back_page_w {display: block; position: absolute; width: 50px; height: 50px; font-size: 0.75rem; color: #72778e;  background-image: url(../img/ico_back_white.png); background-repeat: no-repeat; background-position: 7px 0px; background-size: 50px;}
.view_top2 .top_line, .view_top3 .top_line {display: flex; flex-wrap: wrap; height: 50px; justify-content: center; align-items: center; padding: 10px; }
.view_top2 .top_line .circle_profile { width: 30px; height: 30px; border-radius: 50px; background-color: #ebedf1; box-shadow: rgb(255 255 255 / 100%) 0px 0px 0px 2px, rgb(21 117 242 / 100%) 0px 0px 0px 3.5px; background-repeat: no-repeat; background-size: cover;}
.view_top2 .top_line .circle_name { margin-left: 10px; font-size: 1rem;}
.view_top2 .top_line .circle_name span { font-weight: 600;}

.view_top3 { position: relative; width: 100%; max-width: 664px; height: 50px;  text-align: center; background-color: #fff; z-index: 20; border-bottom: 1px solid rgb(0 0 0 / 5%); }



.view_top_blank {display:none;}
.view_top_positng_list {height: 50px;}
.view_top .back_page_b {display: block; position: absolute; width: 50px; height: 50px; font-size: 0.75rem; color: #72778e;  background-image: url(../img/ico_back_black.png); background-repeat: no-repeat; background-position: 7px 0px; background-size: 50px; top: 0px;}

.view_top .top_line {display: flex; flex-wrap: wrap; height: 50px; justify-content: center; align-items: center; padding: 10px; }
.view_top .top_line .circle_profile { width: 30px; height: 30px; border-radius: 50px; background-color: #ebedf1; box-shadow: rgb(255 255 255 / 100%) 0px 0px 0px 2px, rgb(21 117 242 / 100%) 0px 0px 0px 3.5px; background-repeat: no-repeat; background-size: cover;}
.view_top .top_line .circle_name { margin-left: 10px; font-size: 1rem;}
.view_top .top_line .circle_name span { font-weight: 600;}
.blue { color: #1575f2;}


/*포스팅 유저*/
.positing_view {position: relative; background-color: #fff; margin-bottom: 1px;}
.positing_view .rank {position: absolute;  width: 55px; height: 55px; top: 24px; right: 58px;}
.positing_view .rank img {width: 100%;}

.positing_view .info_area {padding:30px 25px 0 25px}
.positing_view .info_area .user_profile   {display: inline-block; width: 45px; height: 45px; margin-bottom: 2.5px; border-radius: 8px; background-color: #ebedf1; box-shadow: rgb(255 255 255 / 100%) 0px 0px 0px 2px; background-repeat: no-repeat; background-size: cover;}
.positing_view .info_area .name {display: inline-block; width: 70%;  margin-bottom: 5px; vertical-align: top; margin: -2px 0 0 20px;}
.positing_view .info_area .name  .user_name { height: 21px; font-size: 1rem; font-weight: 600; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.positing_view .info_area .name  .positng_date {font-size: 0.75rem; color: #72778e; display: inline-block;}

/*포스팅 뷰 텍스트 */
.positing_view .text_area {  padding:15px 0 60px 0; font-size: 0.875rem; line-height: 1.4rem; border-bottom: 1px solid #ebedf1;}
.positing_view .text_area p { word-break: break-word;}
.positing_view .text_area div {padding-top: 10px; padding-bottom: 10px;}
.positing_view .text_area div img {width: 100%;}

/*포스팅 코딩소스 다운 */
.positing_view .text_area div .coding_down {margin: 0 20px; padding: 0; background: #f4f4f4; position: relative;}
.positing_view .text_area div .coding_down .coding_tit {padding: 10px; background: #1575f2; text-align: center; color: #fff;font-weight: 300;}
.positing_view .text_area div .coding_down .coding_tit span {font-weight: 600}
.positing_view .text_area div .coding_down .coding_btn {padding: 15px 10px; width: 100%; text-align: center; gap:10px 30px; display: flex; flex-wrap: wrap; justify-content: center;}
.positing_view .text_area div .coding_down .coding_btn a { border-bottom: 1px solid #333;}
.positing_view .text_area div .coding_down .coding_btn a:hover { color:#1575f2; border-bottom: 1px solid #1575f2; }



/*포스팅 뷰 대회 테이블 */
.positing_view .text_area table {width: 100%; border-top: 2px solid #1575f2; border-collapse: collapse; margin-top: 25px;}
.positing_view .text_area table tr {border-bottom: 1px solid #ebedf1;}
.positing_view .text_area table tr th {background-color: #f3f8ff;}
.positing_view .text_area table tr td:last-child {padding: 10px 10px; border-left: 1px solid #ebedf1;}

.positing_view .text_area table tr th, .positing_view .text_area table tr td {text-align: center; padding: 8px 10px;}

.positing_view .text_area table tr td iframe { width: 100%; height: 360px;}


/*댓글 */
.reply_box {position: relative; background-color: #fff; margin-top: 10px; padding: 10px 0;}
.reply_box .reply_depth_1 { display: flex; flex-wrap: wrap; padding: 25px ; border-bottom: 1px solid #ebedf1;}
.reply_box .reply_depth_1:last-child { border-bottom: none;}

.reply_box .reply_depth_1 .user_profile {display: inline-block; width: 45px; height: 45px; margin-top: 3px; border-radius: 8px; background-color: #ebedf1; box-shadow: rgb(255 255 255 / 100%) 0px 0px 0px 2px; background-repeat: no-repeat; background-size: cover;}
.reply_box .reply_depth_1 > .comment { width: calc(100% - 60px); margin-left: 15px;}
.reply_box .reply_depth_1 > .comment .txt { font-size: 0.875rem; line-height: 1.3rem; word-break: break-word;}
.reply_box .reply_depth_1 > .comment .txt a { margin-right: 10px;}
.reply_box .reply_depth_1 > .comment .txt a:first-child {font-weight: 600;}

.reply_box .reply_depth_1 > .comment .btn_area { position: relative; margin-top: 5px;}
.reply_box .reply_depth_1 > .comment .btn_area .s_txt, .reply_box .reply_depth_1 > .comment .btn_area a { font-size: 0.725rem; font-weight: 400; color: #72778e}
.reply_box .reply_depth_1 > .comment .btn_area a:hover {color: #2e60de;}
.reply_box .reply_depth_1 > .comment .btn_area .bar { font-size: 0.5625rem; font-weight: 100; color: #c6cadb; margin: 0 13px;}

.reply_box .reply_depth_1 .reply_depth_2 { display: flex; flex-wrap: wrap; padding: 10px 0 10px 0; margin-left: 58px;}
.comment + .reply_depth_2 { margin-top: 10px!important;}
.reply_box .reply_depth_1 .reply_depth_2 > .comment { width: calc(100% - 49px); margin-left: 12px;}
.reply_box .reply_depth_1 .reply_depth_2 > .comment .txt { font-size: 0.875rem; line-height: 1.3rem;  word-break: break-word;}
.reply_box .reply_depth_1 .reply_depth_2 > .comment .txt a { margin-right: 10px;}
.reply_box .reply_depth_1 .reply_depth_2 > .comment .txt a:first-child {font-weight: 600}
.reply_box .reply_depth_1 .reply_depth_2 > .comment .btn_area { position: relative; margin-top: 5px;}
.reply_box .reply_depth_1 .reply_depth_2 > .comment .btn_area .s_txt, .reply_box .reply_depth_1 .reply_depth_2 > .comment .btn_area a { font-size: 0.725rem; font-weight: 400; color: #72778e}
.reply_box .reply_depth_1 .reply_depth_2 > .comment .btn_area a:hover {color: #2e60de;}
.reply_box .reply_depth_1 .reply_depth_2 > .comment .btn_area .bar { font-size: 0.5625rem; font-weight: 100; color: #c6cadb; margin: 0 13px;}

.reply_box .reply_depth_1 .reply_depth_2 .user_profile {display: inline-block; width: 37px; height: 37px; border-radius: 8px; background-color: #ebedf1; box-shadow: rgb(255 255 255 / 100%) 0px 0px 0px 2px; background-repeat: no-repeat; background-size: cover;}
.reply_like { position: absolute; top:0; right: 0; }

/*댓글입력*/
.input_area {width: 100%; padding: 20px 25px; background-color: #fff; margin-top: 8px; }
.input_area .round { display: flex; flex-wrap: wrap; width: 100%; border-radius: 50px; padding: 10px 20px; background-color: #ebedf1;}
.input_area .round .user_profile {display: inline-block; width: 28px; height: 28px; border-radius: 8px; background-color: #ebedf1; box-shadow: rgb(255 255 255 / 100%) 0px 0px 0px 2px; background-repeat: no-repeat; background-size: cover;}
.input_area .round input[id="replyInput"] { width: calc(100% - 48px); margin-left: 20px; border: 0px; background-color: transparent; }
.input_area .round input[id="replyInput"]::placeholder { color:#a9b2c4;}




/********************************** 써클 메인 ****************************************/
.view_top .back_page_w {display: block; position: absolute; width: 50px; height: 50px; font-size: 0.75rem; color: #72778e;  background-image: url(../img/ico_back_white.png); background-repeat: no-repeat; background-position: 7px 0px; background-size: 50px;}



.view_top_circle_main {position: relative; height: 200px;  background-repeat: no-repeat; background-position:center; background-size:cover; text-align: center; overflow: hidden;}
.top_line_right { display: flex; flex-wrap: wrap; justify-content:flex-end; align-items: center; padding: 5px 10px;}
.btn_member { width: 40px; height: 40px; background-image: url("../img/ico_circle_mem_b.png"); background-repeat: no-repeat; background-position: top center; background-size: cover}
.btn_search { width: 40px; height: 40px; background-image: url("../img/ico_circle_search_b.png"); background-repeat: no-repeat; background-position: top center; background-size: cover}
.btn_setting { width: 40px; height: 40px; background-image: url("../img/ico_circle_setting_b.png"); background-repeat: no-repeat; background-position: top center; background-size: cover}
.btn_exclamation { width: 40px; height: 40px; background-image: url("../img/ico_circle_exclamation_b.png"); background-repeat: no-repeat; background-position: top center; background-size: cover}



.circle_area {position: relative; width: 100%; background-color: #fff; padding: 25px;}
.circle_area .circle_info { text-align: right;}
.circle_area .circle_info .circle_profile { position: absolute;  top:-40px; left: 25px;  width: 80px; height: 80px; border-radius: 80px; background-color: #ebedf1; box-shadow: rgb(255 255 255 / 100%) 0px 0px 0px 2px, rgb(21 117 242 / 100%) 0px 0px 0px 4px; background-repeat: no-repeat; background-size: cover; z-index: 3;}

.circle_area .circle_info .invite { padding: 4px 15px; font-size: 0.8125rem; color: #fff; font-weight: 400; background-color: #1575f2; border: 1px solid #1575f2; border-radius: 30px;}
.circle_area .circle_info .join { padding: 4px 15px; font-size: 0.8125rem; color: #1575f2; font-weight: 400; background-color: #fff; border: 1px solid #1575f2; border-radius: 30px; margin-right: 30px;}
.circle_area .circle_info .join.on { color: #fff; background-color: #1575f2; transition: all 0.5s}
/*푸시 토글*/
.circle_area .circle_info .push_area { position: absolute; top: 24px; right: 25px;  display: inline-block;  height: 27px; }
.circle_area .circle_info .push_area .push {height: 27px;}
.circle_area .circle_info .push_area .push input[type=checkbox] + label { display:block;  height: 27px; background-image: url("../img/ico_push_off.png"); background-repeat: no-repeat; background-position: top center; background-size: auto 44px; font-size:0.75rem; line-height: 1.5rem;  padding: 0 0 0 28px; background-position: 0px; cursor: pointer;}
.circle_area .circle_info .push_area .push input[type=checkbox]:checked + label {  background-image: url("../img/ico_push_on.png"); color: #ff5353;}
.circle_area .circle_info .push_area .push input[type=checkbox] {display: none;}


.circle_area .circle_name { position: relative; margin-top: 10px;  font-size: 1.4rem; font-weight: 600; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

.circle_area .circle_name .ico_lock {display: inline-block; width: 30px; height: 30px;  margin-left: 10px; }
.circle_area .circle_name .ico_lock span {display: inline-block; width: 30px; height: 30px; background-image: url("../img/ico_tit_lock.png"); background-repeat: no-repeat; background-position: top center; background-size: cover;}

.circle_area .summary { margin-top: 5px; font-size: 0.9375rem; text-overflow: ellipsis; overflow: hidden;
    word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.circle_area .member {margin-top: 15px; font-size: 0.75rem; color: #72778e; }

.circle_area .posting_write { position: absolute; right: 20px; bottom: 25px;  padding: 4px 15px; font-size: 1rem; color: #1575f2; font-weight: 400; background-color: #fff; border: 1px solid #1575f2; border-radius: 30px;}
.circle_area .posting_write:hover { color: #fff; background-color: #1575f2; transition: all 0.5s}


.rbot_talk {position: relative; width: 100%; background-color: #fff; padding: 0 25px 25px 25px;}
.rbot_talk .rbot_box  { width: 100%; background-color: #ebedf1; border-radius: 15px; padding: 15px;}
.rbot_talk .rbot_box .connect_user {}
.rbot_talk .rbot_box .connect_user .count {}
.rbot_talk .rbot_box .connect_user .icon_list .user_profile {display: inline-block; width: 45px!important; height: 45px!important;  border-radius: 8px; background-color: #ebedf1; box-shadow: rgb(255 255 255) 0px 0px 0px 1px; background-repeat: no-repeat; background-size: cover;}

.rbot_talk .rbot_box .rbot_chat { width: 100%; background-color: #fff; border-radius: 10px; padding: 10px; margin-top: 10px;  overflow-y: scroll; height: 300px;}
.rbot_talk .rbot_box .rbot_chat_input { display: flex; flex-wrap: wrap; margin-top: 10px; background-color: #fff; border-radius: 30px; padding: 10px 20px 7px 20px;}
.rbot_talk .rbot_box .rbot_chat_input input { width:calc(100% - 50px); border: none; }
.rbot_talk .rbot_box .rbot_chat_input .btn_send { width:50px;}
.rbot_talk .rbot_box .rbot_chat_input .btn_send button { width: 100%; height: 30px; background-image: url("../img/ico_send.png"); background-repeat: no-repeat; background-position: 18px 4px; background-size: 25px; border: none; background-color: transparent; padding: 0px;}

/* 이어하기 */
.resume_area {position: relative; width: 100%; background-color: #fff; padding: 15px 25px 15px 25px;}
.resume_area .resume_box  { width: 100%; background-color: #ebedf1; border-radius: 15px; padding: 15px;}

.resume_area .resume_box_fix  { width: 100%; background-color: none; border-radius: 15px; padding: 0px;}
.resume_area_fix {position: fixed; max-width: 664px; top:60px; width: 100%; background-color: #fff; padding: 10px 25px 10px 25px; z-index: 3}
.resume_area_blank {width:100%; height: 30px;}



.reading { margin-bottom: 20px;}
.bg_progress {width: 100%; height: 20px; border-radius: 30px; background-color: #fff; overflow: hidden; margin-top: 8px;}
.bar_progress {height: 20px; border-radius: 30px; background-color: #ff5353; overflow: hidden; color: #fff; text-align: center;font-size: 0.8125rem;}
.resume { display: block; padding: 13px 20px 12px 20px; margin: 5px auto;  background-color: #1575f2; border-radius: 10px; color: #fff;  }
.resume p {text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}


/*대회*/
.circle_competition_box {position: relative; background-color: #fff; margin-bottom: 1px; padding: 30px 25px;}
.circle_competition_box table {width: 100%; border-top: 2px solid #1575f2; border-collapse: collapse; margin-top: 25px;}
.circle_competition_box table:first-child {margin-top: 10px;}
.circle_competition_box table tr {border-bottom: 1px solid #ebedf1;}
.circle_competition_box table tr:first-child th { background-color: #f3f8ff;}
/*.circle_competition_box table tr:last-child {border-bottom:none;}*/

.circle_competition_box table tr th {}
.circle_competition_box table tr td { }
.circle_competition_box table tr td:last-child {padding: 0px 0px; border-left: 1px solid #ebedf1;}
.circle_competition_box table tr .movie { border-left:none;}

.circle_competition_box table tr th, .circle_competition_box table tr td { text-align: center; padding: 8px 10px;}







.tab {background-color: #fff; border-top: 1px solid #eee; overflow: hidden; font-size: 14px }
.tab .half  {float:left;  width:49.99999%; padding:15px 15px; text-align: center; border-bottom: 3px solid #c8cfdc;}
.tab .third  {float:left;  width:33.3333%; padding:15px 15px; text-align: center; border-bottom: 3px solid #c8cfdc;}

.tab a:last-child .half {border-left:1px solid #c8cfdc;}
.border_under_line { border-bottom: 3px solid #1575f2!important;}

.tab_1 {padding: 8px 0 0 0;}






/*포스팅 텍스트/이미지 기본형 */
.circle_positing_box {position: relative; background-color: #fff; margin-bottom: 1px;}
.circle_positing_box .list_thumb {display: flex; flex-wrap: wrap;}
.circle_positing_box .text_area { width: 100%; padding:25px 25px 0 25px; text-overflow: ellipsis; overflow: hidden;  word-wrap: break-word; display: -webkit-inline-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; font-size: 0.875rem; line-height: 1.4rem;}
.circle_positing_box .img_area {  display: block; padding:15px 0 0 0; overflow: hidden; max-height: 500px; }
.circle_positing_box .img_area img {width: 100%; object-fit: cover;}

/*포스팅 텍스트/이미지 썸네일형*/
.circle_positing_box .text_area_left {flex-grow:1; width: calc(100% - 200px); padding:25px 25px 0 25px; text-overflow: ellipsis; overflow: hidden;  word-wrap: break-word; display: -webkit-inline-box;-webkit-line-clamp: 5; -webkit-box-orient: vertical; font-size: 0.875rem; line-height: 1.4rem;}
.circle_positing_box .img_area_right {flex-grow: 0; width: 200px; display: block; padding:25px 25px 0 0; overflow: hidden; max-height: 150px; }
.circle_positing_box .img_area_right img {width: 100%; object-fit: cover;}

/*포스팅 유저*/
.circle_positing_box .rank {position: absolute;  width: 55px; height: 55px; top: 24px; right: 58px;}
.circle_positing_box .rank img {width: 100%;}

.circle_positing_box .info_area {padding:30px 25px 0 25px}
.circle_positing_box .info_area .user_profile   {display: inline-block; width: 45px; height: 45px; margin-bottom: 2.5px; border-radius: 8px; background-color: #ebedf1; box-shadow: rgb(255 255 255 / 100%) 0px 0px 0px 2px; background-repeat: no-repeat; background-size: cover;}
.circle_positing_box .info_area .name {display: inline-block; width: 70%;  margin-bottom: 5px; vertical-align: top; margin: -2px 0 0 15px;}
.circle_positing_box .info_area .name  .user_name { height: 21px; font-size: 1rem; font-weight: 600; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.circle_positing_box .info_area .name  .positng_date {font-size: 0.75rem; color: #72778e; display: inline-block;}



.w3-modal2 { z-index: 111111; display: none; padding-top: 20vh; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7);}
.modal_box2 { width: 80%; max-width: 320px; min-width: 280px; margin: 0 auto; background-color: #fff; padding: 0; position: relative;	overflow: hidden; outline: 0; animation: animatezoom 0.6s; box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 19%); border-radius: 8px;}
.modal_box2 .tit {color: #fff; font-weight: 500; text-align: center; background-color: #1575f2; padding: 10px; font-size: 1.125rem;}
.modal_box2 .join_cell_img {height: 230px; text-align: center;}
.modal_box2 .join_cell_img img { height: 100%; display: inline-block;}
.modal_box2 .modal_txt {width: 90%; text-align: center; margin: 0 auto;}
.modal_box2 .modal_txt p {font-size:0.9125rem;}
.modal_box2 .modal_txt a {padding : 10px 20px 13px 20px;; margin:  20px auto; background-color: #1575f2; border-radius: 30px; color: #fff; }


/********************************** 500 팝업 ****************************************/
.w3-modal4 { z-index: 111111; display: none; padding-top: 20vh; position: fixed; left: 0; top: 0; width: 100%; height: 100%; overflow: auto; background-color: rgba(0,0,0,0.7);}
.modal_box4 { width: 80%; max-width: 500px; min-width: 280px; max-height: 60vh; margin: 0 auto; background-color: #fff; padding: 0; position: relative;	overflow: hidden; outline: 0; animation: animatezoom 0.6s; box-shadow: 0 4px 10px 0 rgb(0 0 0 / 20%), 0 4px 20px 0 rgb(0 0 0 / 19%); border-radius: 8px;}
.modal_box4 .tit {color: #fff; font-weight: 500; text-align: center; background-color: #1575f2; padding: 10px; font-size: 1.125rem;}
.modal_box4 .modal_txt {width: 90%; text-align: center; margin: 20px auto;}
.modal_box4 .modal_txt .con {padding-bottom: 20px; overflow-y: auto; max-height: calc(60vh - 152px);}
.modal_box4 .modal_txt .con img {width: 100%;}
.modal_box4 .modal_txt p {font-size:0.9125rem;}
.modal_box4 .modal_txt .btn_blue { display: inline-block; padding : 10px 27px 13px 27px; margin:  20px 3px 0 3px; background-color: #1575f2; border-radius: 30px; color: #fff; }
.modal_box4 .modal_txt .btn_gray { display: inline-block; padding : 10px 27px 13px 27px; margin:  20px 3px 0 3px; background-color: #ebedf1; border-radius: 30px; font-weight: 400; }

/********************************** 세포랭킹 ****************************************/

.border0 {border: none!important;}
.my_rank { background-color: #fff; padding-bottom: 30px;}
.my_rank .rank_img {height: 220px; padding-top: 10px; text-align: center; background-image: url(../img/big_rank_bg.png); background-repeat: no-repeat; background-position: center -29px; background-size: 640px;}
.my_rank img, .ranking_list img {height: 100%; margin: 0 auto;}

.my_rank .rank_user {display: flex; flex-wrap: wrap; justify-content: center; }
.my_rank .rank_user div {align-self: center;}
.my_rank .rank_user .number {height: 50px;  margin-right: 20px; }
.my_rank .rank_user .user_profile {display: inline-block; width: 50px; height: 50px; border-radius: 8px; background-color: #ebedf1; box-shadow: rgb(255 255 255 / 100%) 0px 0px 0px 2px; background-repeat: no-repeat; background-size: cover; margin-right: 20px; }
.my_rank .rank_user .name { margin-top: -10px;}
.my_rank .rank_user .name .user_name {font-size: 1.2rem; font-weight: 600; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.my_rank .rank_user .name .point {font-size: 0.875rem; color: #72778e;}

.ranking_list { background-color: #fff; padding: 25px 25px 30px 25px; margin-top: 8px;}
.ranking_list .user {display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 10px 0; position: relative;}
.ranking_list .user div {align-self: center;}
.ranking_list .user .number { width: 45px;  height: 45px;  margin-right: 20px; text-align: center; font-size: 1.2rem; font-weight: 600;}
.ranking_list .user .user_profile {display: inline-block; width: 45px; height: 45px; border-radius: 8px; background-color: #ebedf1; box-shadow: rgb(255 255 255 / 100%) 0px 0px 0px 2px; background-repeat: no-repeat; background-size: cover; margin-right: 20px; }
.ranking_list .user .name { margin-top: -6px;  width: calc(100% - 190px);}
.ranking_list .user .name .user_name {font-size: 1rem; font-weight: 600; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.ranking_list .user .name .point {font-size: 0.875rem; color: #72778e;}
.ranking_list .user .rank_icon {position: absolute; width: 55px; height: 55px; top: 5px; right: 0;}



/********************************** 서클 검색 ****************************************/
.search_area {padding: 25px;}
.search_area .search_box { position: relative;}
.search_area .search_box input { width: 100%; padding: 14px 50px 10px 20px; background-color: #fff; font-size: 1rem; font-weight: 600; border: 2px solid #1575f2; border-radius: 50px; }
.search_area .search_box input + a {width: 50px; height: 50px; position: absolute; top: -2px; right: 10px; background-image: url(../img/top_menu_search_off.png); background-repeat: no-repeat; background-position: top center; background-size: cover;}

.search_area .search_history { margin-top: 25px;}
.search_area .search_history .tit { font-size: 1rem; font-weight: 600;}
.search_area .search_history .word { margin-top: 10px;}
.search_area .search_history .word a {display: inline-block; margin: 0 8px 8px 0; padding: 6px 15px 6px 15px; font-size: 0.875rem; background-color: #fff; border-radius: 30px; transition: all 0.5s;  border: 1px solid rgba(255,255,255,0.01);}
.search_area .search_history .word a:hover {  border: 1px solid #1575f2;}
.circle_positing_box .text_area_left2 {flex-grow: 1; width: calc(100% - 200px); margin-bottom: 25px; padding: 15px 25px 0 25px; text-overflow: ellipsis;
    overflow: hidden; word-wrap: break-word; display: -webkit-inline-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
    font-size: 0.875rem; line-height: 1.4rem;}
.highlight {background-color: #fff2ac; font-weight: 500; padding: 0 3px;}



/********************************** 메인 검색 ****************************************/
/*검색 포스팅 유저*/
.search_positing_box {position: relative;}
.search_positing_box .tit { font-size: 1rem; font-weight: 600; padding: 25px 25px 0 25px; background-color: #fff;}
.search_positing_box .box{margin-bottom: 1px; background-color: #fff;}
.search_positing_box .info_area {padding:30px 25px 0 25px;}
.search_positing_box .info_area .circle_profile {display: inline-block; width: 50px; height: 50px; border-radius: 50px; background-color: #ebedf1; box-shadow: rgb(255 255 255 / 100%) 0px 0px 0px 2px, rgb(21 117 242 / 100%) 0px 0px 0px 4px; background-repeat: no-repeat; background-size: cover;}
.search_positing_box .info_area .user_profile   {display: inline-block; width: 45px; height: 45px; margin-left: -10px; margin-bottom: 2.5px; border-radius: 8px; background-color: #ebedf1; box-shadow: rgb(255 255 255 / 100%) 0px 0px 0px 2px; background-repeat: no-repeat; background-size: cover;}
.search_positing_box .info_area .name {display: inline-block;     width: calc(100% - 115px); margin-bottom: 5px; vertical-align: top; margin: 2px 0 0 20px;}
.search_positing_box .info_area .name .circle_name { height: 21px; font-size: 1rem; font-weight: 600; text-overflow: ellipsis; overflow: hidden;
    word-wrap: break-word; display: -webkit-inline-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.search_positing_box .info_area .name .setting {margin-top: -3px;}
.search_positing_box .info_area .name .setting .user_name {font-size: 0.875rem; margin-right: 20px;}
.search_positing_box .info_area .name .setting .positng_date {   font-size: 0.75rem; color: #72778e; display: inline-block;}

/*검색 포스팅 텍스트/이미지 기본형 */
.search_positing_box .list_thumb { display: flex; flex-wrap: wrap;}
.search_positing_box .text_area_left2 { flex-grow: 1; width: calc(100% - 200px); margin-bottom: 25px; padding: 15px 25px 0 25px;
    text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; display: -webkit-inline-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font-size: 0.875rem; line-height: 1.4rem;}

/*검색써클리스*/
.search_positing_box .circle_list {position: relative; padding:25px 25px 0 25px;  background-color: #fff;}
.search_positing_box .circle_list:last-child {padding:25px 25px 30px 25px;}
.search_positing_box .circle_list .circle_profile {display: inline-block; width: 49px; height: 50px; border-radius: 50px; background-color: #ebedf1; box-shadow: rgb(255 255 255 / 100%) 0px 0px 0px 2px, rgb(21 117 242 / 100%) 0px 0px 0px 4px; background-repeat: no-repeat; background-size: cover;}
.search_positing_box .circle_list .user_profile   {display: inline-block; width: 45px; height: 45px; margin-left: -10px; margin-bottom: 2.5px; border-radius: 8px; background-color: #ebedf1; box-shadow: rgb(255 255 255 / 100%) 0px 0px 0px 2px; background-repeat: no-repeat; background-size: cover;}
.search_positing_box .circle_list .name {display: inline-block; width: calc(100% - 74px);  margin-bottom: 5px; vertical-align: top; margin: 2px 0 0 20px;}
.search_positing_box .circle_list .name .circle_name { height: 21px; font-size: 1rem; font-weight: 600; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.search_positing_box .circle_list .name {margin-top: -3px;}
.search_positing_box .circle_list .name .summary {  font-size: 0.875rem; margin-right: 20px; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.search_positing_box .circle_list .name .member {display: block;  font-size: 0.75rem; margin-top: 3px; padding: 0 0 0 26px; color: #72778e; background-image: url("../img/ico_mem_1.png"); background-repeat: no-repeat; background-position: top 0px; background-size: 19px; }


/********************************** 써클 설정 ****************************************/
.white {color:#fff;}
.btn_set { display: inline-block; width:  35px; height: 35px; background-color: #ebedf1; border-radius: 40px; background-image: url("../img/ico_pic_edit.png"); background-repeat: no-repeat; background-position: top center; background-size: cover}
.btn_del { display: inline-block; width:  35px; height: 35px; background-color: #ff5353; border-radius: 40px; background-image: url("../img/ico_pic_del.png"); background-repeat: no-repeat; background-position: top center; background-size: cover}
.btn_set_position1 {margin-top: 80px; position: absolute; margin-left: -37px; z-index: 1;}
.btn_set_position4 {margin-top: 80px; position: absolute; margin-left: 6px; z-index: 1;}


.btn_set_position2 { position: absolute; top: 9px; left: 85px; z-index: 3;}
.btn_set_position3 { position: absolute; top: 9px; left: 125px;}

.circle_name_set { position: relative; margin-top: 40px; border-bottom: 1px solid #e9ebf4;}
.summary_set { position: relative; margin-top: 15px; border-bottom: 1px solid #e9ebf4; }
.circle_name_set input { width: 100%; font-size: 1.2rem;  border: none; padding: 5px 50px 5px 5px; color: #4a545d; font-weight: 500; }
.summary_set input  { width: 100%; font-size: 0.875rem;  border: none; padding: 5px 50px 5px 5px; color: #4a545d;}
.txt_edit { position: absolute; width: 30px; height: 30px; display: inline-block; bottom: 0; right: 0; background-image: url("../img/ico_txt_edit.png"); background-repeat: no-repeat; background-position: top center; background-size: cover}
.summary_set2 { position: relative; margin-top: 15px; }
.summary_set2 textarea { width: 100%; font-size: 0.875rem;  border: none; padding: 5px 5px 5px 5px; color: #4a545d; font-weight: 500; border: 1px solid #e9ebf4; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; }


.setting_area {margin-top: 8px; background-color: #fff;}
.setting_area .line {position: relative; padding: 25px; border-bottom: 1px solid #f8f9fc; font-weight: 500;}
.setting_area .line .set_save { display: block; padding: 10px 20px 13px 20px; margin: 0 auto; background-color: #1575f2; border-radius: 30px;    color: #fff; text-align: center; max-width: 400px;}

.setting_area .tit { padding: 20px 25px 0 25px;; border-top: 1px solid #ebedf1; font-size: 0.8125rem;}
.btn_toggle {position: absolute; top: 25px; right: 25px;}
.btn_toggle input[type="checkbox"] { -webkit-appearance:none; width: 35px; height: 15px;  margin-right: 3px; background-color: #d6dae1; border-radius: 50px;  transition: all .3s ease; cursor: pointer;}
.btn_toggle input[type="checkbox"]:after {content:''; display:inline-block; width:25px; height:25px; background-color:#fff; border-radius: 50px; position: absolute; top: 36%; left: -8px; margin-top: -10px; transition: all .3s ease;  border: 1px solid #dfe2e8;}
.btn_toggle input[type="checkbox"]:before {content: ''; position: absolute; right: 6px; top: 39%; margin-top: -7px; opacity: .5;  font-size: 13px;}
.btn_toggle input:checked[type="checkbox"] {background-color:#1575f2; transition: all .3s ease;}
.btn_toggle input:checked[type="checkbox"]:before {content:''; right: auto; left:8px; color:#fff; font-size: 13px; opacity: 1;}
.btn_toggle input:checked[type="checkbox"]:after {left: 25px; transition: all .3s ease;}
.btn_toggle ul.alert_switch li label {position: absolute; font-size:0; width:1px; height:1px; opacity:0;} /* soundonly */

.setting_area .line .btn_edit { position: absolute; top: 27px; right: 25px; font-weight: 400; font-size: 0.8125rem; color:#1575f2; }
.setting_area .line .txt {  font-weight: 400; font-size: 0.8125rem; margin-top: 8px; text-overflow: ellipsis; overflow: hidden;
    word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;}



/********************************** 써클 회원관리 ****************************************/
.member_box {position: relative; margin: 8px 0 0 0;}
.member_box .tit { font-size: 1rem; font-weight: 600; padding: 20px 25px 0 25px; background-color: #fff;}

.member_box .member_list { position: relative; padding: 20px 25px 0 25px; background-color: #fff;}
.member_box .member_list:last-child { padding: 25px 25px 30px 25px;}
.member_box .member_list .user_profile { display: inline-block; width: 45px; height: 45px; margin-left: 0px; margin-bottom: 2.5px; border-radius: 8px; background-color: #ebedf1; box-shadow: rgb(255 255 255) 0px 0px 0px 2px; background-repeat: no-repeat; background-size: cover;}
.member_box .member_list .name { display: inline-block; width: calc(100% - 80px); margin-bottom: 5px; vertical-align: top; margin: 0 0 0 20px;}
.member_box .member_list .name .user_name {font-size: 1rem; font-weight: 600; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.member_box .member_list .name .summary { font-size: 0.875rem; margin-right: 20px; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.member_box .member_list  .btn_edit { position: absolute; top:30px; right:25px; width: 35px; height: 35px; background-image: url("../img/ico_member_setting.png"); background-repeat: no-repeat; background-position: top center; background-size: cover;}



/********************************** 채팅 리스트  ****************************************/
.chat_box { background-color: #fff; padding: 25px 25px 30px 25px;}
.chat_box .chat_list {display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 10px 0; position: relative;}
.chat_box .chat_list .user_profile {display: inline-block; width: 45px; height: 45px; border-radius: 8px; background-color: #ebedf1; box-shadow: rgb(255 255 255) 0px 0px 0px 2px; background-repeat: no-repeat; background-size: cover; margin-right: 20px;}
.chat_box .chat_list .name { margin-top: -3px; width: calc(100% - 130px);}
.chat_box .chat_list .name .user_name { font-size: 1rem; font-weight: 600; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.chat_box .chat_list .name .message {font-size: 0.875rem; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}
.chat_box .chat_list .data { position: absolute; width: 55px; height: 55px; top: 8px; right: 0; text-align: center; }
.chat_box .chat_list .data .date { text-align: center; font-size: 0.75rem; color: #72778e;     font-weight: 300;}
.chat_box .chat_list .data .count { display: inline-block; margin: 3px auto 0 auto; padding: 4px 13px 6px 13px; color: #fff; background-color: #1575f2;  font-size: 0.75rem; border-radius: 30px;}



/********************************** 개인정보보호정책 ****************************************/
.font_small { font-size:0.75rem;}
.privacy { background-color: #fff; padding-bottom: 30px;margin-top: 1px; padding: 25px;}
.privacy .box {margin-bottom: 30px;}
.privacy .box h2 {font-size: 1rem; font-weight: 500;}
.privacy .box .con { font-size: 0.875rem;  color: #6d7079; line-height: 1.375rem;}
.privacy .box .con .txt { margin: 15px auto;}
.privacy .box .con table {width: 100%; border-top: 2px solid #000; border-bottom: 1px solid #eee; border-collapse: collapse;}
.privacy .box .con table tr { border-bottom: 1px solid #eee;}
.privacy .box .con table tr th, .privacy .box .con table tr td { padding: 10px 20px; font-size: 0.875rem; text-align: center;}
.privacy .box .con table tr th {  font-weight: 500; background-color: #fbfbfb;}
.privacy .box .con table tr th, .privacy .box .con table tr td  { border-left: 1px solid #eee; }
.privacy .box .con table tr th:first-child, .privacy .box .con table tr td:first-child { border-left: none;}
.privacy .box .con .txt ul {display: block; list-style: outside none; margin: 3px 0 0 10px; font-size: 0.8125rem;}
.privacy .box .con .txt ul li {line-height: 1.25rem; margin-top: 3px;}
.privacy .box .con .txt ul li::before {margin-left: -9px;  content: "- "}
.align_l { text-align:left!important;}
.list_none { margin: 3px 0 0 0!important;}
.list_none li::before {margin-left: -9px;  content:none!important;}



/********************************** 내활동 ****************************************/
.my_tab { display: flex; flex-wrap: wrap; border-top: 1px solid #ebedf1; background-color: #fff; margin-bottom: 8px;}
.my_tab a { display: inline-block; width: 25%; padding: 10px 15px 10px 15px;; text-align: center; border-bottom: 3px solid #c8cfdc;  border-right: 1px solid #ebedf1; }
.my_tab a:last-child {border-right:none;}
.my_tab a.on, .my_tab a:hover { border-bottom: 3px solid #1575f2; color: #1575f2;}

/* 올리기예약 */
.positing_box .reserve_time { position: relative; margin: 25px 20px 0 20px; padding: 15px 25px; line-height: 1.4rem; background-color: #ebedf1; border-radius:50px; font-size: 0.875rem; color: #4a545d; }
.positing_box .reserve_time a {position: absolute; top: 15px; right: 25px; color: #ff5353;}


/********************************** GNB로봇연결팝업 ****************************************/
.r_select {width: 100%; padding: 20px 20px;}
.r_select .r_img { width:40%; float: left;}
.r_select .r_img img { width: 100%;}
.r_select .r_info { width:55%; float: right;}
.r_select .r_info .title { font-size: 0.75rem; margin-top: 5px;}
.r_select .r_info .name { position: relative;  font-size: 1rem; font-weight: 600;}
.r_select .r_info .name p { display: inline-block; }
.r_select .r_info .name a { display: inline-block; width: 19px; height: 19px; background-image: url(../img/ico_txt_edit.png); background-repeat: no-repeat; background-position: top center; background-size: 24px;;}
.r_select .r_info .name a img {  width: 100%; }
.r_select .r_info .number { font-size: 0.75rem;}

.r_select .r_info .btn_conect { display: inline-block; background-color: #ebedf1; border-radius: 50px; padding: 2px 20px  4px 20px;  color: #858a9a; font-size: 0.8125rem; margin-top: 10px;}
.r_select .r_info .btn_conect a { font-size: 0.8125rem;  color: #858a9a; line-height: 1rem;}
.r_select .r_info .btn_conect span {font-size: 0.75rem; padding: 0 10px; font-weight: 100;}
.r_select .r_info .btn_update { display: inline-block; background-color: #1575f2; border-radius: 50px; padding: 2px 24px  4px 24px; font-size: 0.8125rem;  margin-top: 4px; }
.r_select .r_info .btn_update a {color: #fff; font-size: 0.8125rem; line-height: 1rem;}

.r_menu { display: flex; flex-wrap: wrap; padding: 20px 20px;}
.r_menu .box { display: inline-block; width: 25%; margin: 0 10px; color: #282a2f!important;}
.r_menu .box p { text-align: center; font-size: 0.875rem;}
.r_menu .box img { width: 100%;}
.r_menu .box p:nth-child(2) { margin-top: 5px;}

/*t세포획득 팝업 */
.modal_box3 { width: 80%; max-width: 320px; min-width: 280px; margin: 0 auto; padding: 0; position: relative; overflow: hidden;
    outline: 0; animation: animatezoom 0.6s;}
.cell_take { width: 100%;}
.cell_take .title { width: 55%; margin: 0 auto;}
.cell_take .title img { width: 100%;}
.cell_take .point { width: 80%; border-top:1px solid rgba(255,255,255,0.7); border-bottom:1px solid  rgba(255,255,255,0.7); margin: 20px auto; padding: 20px 0;}
.cell_take .point .get_point { display: flex; flex-wrap: wrap; text-align: center; justify-content: center;}
.cell_take .point .get_point .ico { width: 25%; }
.cell_take .point .get_point .ico img { width: 100%; }
.cell_take .point .get_point .txt_1 { width: 20%; font-weight: 400; font-size: 1.8rem; color: #fff; padding-top: 12px;}
.cell_take .point .get_point .txt_2 { width: 30%; font-weight: 600; font-size: 2.2rem; color: #fff;padding-top: 7px; }
.cell_take .point .title  { width: 65%; margin: 0 auto;}
.cell_take .point .title img { width: 100%;}
.cell_take a { display: block; width: 50%; color: #fff; background-color: #1575f2; margin: 0 auto; padding: 10px 20px; border-radius: 50px; text-align: center; font-size: 1rem;}

/* 포스팅 광고 */
.ml_0 { margin-left: 0px!important;}
.mt_0 { margin-top: -2px!important;}
.adver_bar {position: relative; background-color: #f7f7f7; padding: 5px 10px; font-size: 0.8125rem;}
.adver_bar .view { position: absolute; top: 5px; right: 10px; color:#1575f2;}



/********************************** 유저프로필 ****************************************/
.top_line_right .btn_acount {  font-size: 0.8125rem; font-weight: 400;  padding: 10px 0;}
.top_line_right .btn_profile {  font-size: 0.8125rem; font-weight: 400; margin-right: 10px;}
.top_line_right .bar { font-size: 0.8125rem; font-weight: 100; padding: 0 10px; text-align: center;}

.view_top_profile_main { height: 400px; background-repeat: no-repeat; background-position: center;  background-size: cover; }

.info_uf { position: absolute; top: 0px; width: 100%; height: 100%; z-index: 2;}
.uf_bg { position: absolute;  width: 100%; height: 100%; top: 0;  background-size: cover; background-position: center; background-repeat: no-repeat; }

.backscreen { position: absolute; background-color: #000; opacity: 0.6; top: 0; width: 100%; height: 100%; z-index: 1}
.uf_con { position: relative; height: 400px; text-align: center; padding: 40px 0; background-size: cover; background-position: center; overflow: hidden;}

.uf_con .rank_ico { width: 85px; margin: 0px auto 0 auto; padding-top: 35px;}
.uf_con .rank_ico img { width:100%;}
.uf_con .user_profile { display: inline-block; width: 70px; height: 70px; border-radius: 15px; background-color: #ebedf1; box-shadow: rgb(255 255 255) 0px 0px 0px 3px; background-repeat: no-repeat; background-size: cover; margin-top: 4px;  margin-top: 10px;}
.uf_con .name { text-align: center; color: #fff; font-weight: 500; font-size: 1rem;}
.uf_con .summary { text-align: center; color: #fff; font-weight: 300; font-size: 0.75rem; margin-top: 3px;}
.uf_con .btn { margin-top: 10px; text-align: center}
.uf_con .btn a { display: inline-block; border-radius: 20px; border: 1px solid white; padding: 2px 8px 3px 8px; width: 70px; font-size: 0.75rem; color:#fff; text-align: center; margin-top: 5px;}

.circle_area .box {}
.circle_area .box .tit { font-size: 0.875rem; font-weight: 500; margin-top: 10px;}
.circle_area .box .sel_robot, .circle_area .box .sel_circle { display: flex; flex-wrap: wrap;}
.circle_area .box .sel_robot a { width: 80px; margin: 0 2%; }
.circle_area .box .sel_robot a img {width:100%;}
.circle_area .box .sel_robot a .r_name{font-size: 0.8125rem; text-align: center; margin-top: -10px; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.circle_area .box .txt {font-size: 0.8125rem; text-align: center; padding: 30px 0; }

.circle_area .box .sel_circle a {position: relative;  display: inline-block; width: 80px; margin: 0 2%; text-align: center;}
.circle_area .box .sel_circle a .circle{ display: inline-block; width: 50px; height: 50px; border-radius: 50px; background-color: #ebedf1; box-shadow: rgb(255 255 255) 0px 0px 0px 2px, rgb(21 117 242) 0px 0px 0px 4px; background-repeat: no-repeat; background-size: cover; margin: 30px 3% 0 3%;}
.circle_area .box .sel_circle a .r_name {font-size: 0.8125rem; text-align: center; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; }
.circle_area .box .sel_circle a .staff { position: absolute; top: 9px; left: 50%; margin-left: -15px; width: 30px;}
.circle_area .box .sel_circle a .staff img {width: 100%;}


/* 유저 계정 설정 */
.view_top_profile_main2 { height: 100vh; background-repeat: no-repeat; background-position: center;  background-size: cover;}
.uf_con2 { padding-top: 50%!important;}
.uf_con2 .user_profile { position: relative;  display: inline-block; width: 70px; height: 70px; border-radius: 15px; background-color: #ebedf1; box-shadow: rgb(255 255 255) 0px 0px 0px 3px; background-repeat: no-repeat; background-size: cover; margin-top: 4px;  margin-top: 10px; z-index: 2;}
.uf_con2 .name {position: relative; width: 80%; margin: 10px auto; padding: 5px; text-align: center; color: #fff; font-weight: 500; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,0.5); z-index: 2;}
.uf_con2 .summary {position: relative;  width: 80%; margin: 10px auto; padding: 5px; text-align: center; color: #fff; font-weight: 300; font-size: 0.75rem; border-bottom: 1px solid rgba(255,255,255,0.5); z-index: 2;}
.uf_con2 .name a{position: absolute; width: 25px; top: 5px; right: 0px;}
.uf_con2 .name a{position: absolute; width: 25px; top: 5px; right: 0px;}
.uf_con2 .summary a {position: absolute; width: 25px; top: 0; right: 0px;}

.uf_con2 .name a img, .uf_con2 .summary a img { width: 100%;}
.uf_con2 .info_check {position: relative; color: #fff; text-align: left; width: 80%; margin: 20px auto; font-weight: 300; font-size: 0.875rem;
	z-index: 2;}
.uf_con2 .info_check input[type="checkbox"] {  -webkit-appearance: auto; background-color: #000; appearance:auto; }
.btn_set2 { position: absolute; bottom:-4px; right: -18px;  width: 28px; height: 28px; background-color: #ebedf1; border-radius: 40px; background-image: url(../img/ico_pic_edit.png); background-repeat: no-repeat; background-position: top center; background-size: cover; z-index: 2;}

/*프로필네임수정*/
.uf_name_edit { padding: 10px 0px; border-bottom: 1px solid #d3d7e6; margin-top: 30px; text-align: left;}
.uf_name_edit input[id="uf_name_Input"], .uf_name_edit input[id="uf_summury_Input"]{ width:100%; border: 0px; background-color: transparent; overflow: hidden; font-size: 1rem;}
.txt_count { font-size:0.75rem; color: #96a2b7; text-align: left; margin-top: 10px;}

.tit3 { font-size: 0.8125rem; text-align: left; margin-top: 30px;}
.uf_name_edit2 { padding: 10px 0px; border-bottom: 1px solid #d3d7e6; text-align: left;}
.uf_name_edit2 input[id="pw_old"], .uf_name_edit2 input[id="pw_new1"], .uf_name_edit2 input[id="pw_new2"]{ width:100%; border: 0px; background-color: transparent; overflow: hidden; font-size: 0.8125rem; }



/********************************** 로그인 ****************************************/
.view_top_login {height: 100%; min-height: 100vh; background-repeat: no-repeat; background-position: center; background-size: cover; display: flex; align-items: center; position: relative;}

.loginpage { width: 100%; padding: 50px 0;}
.loginpage .top {}
.loginpage .top .title { width: 80%; font-size: 2.5rem; margin: 0 auto;}
.loginpage .top .greeting { width: 80%; font-size: 1rem; margin: 10px auto; font-weight: 300;}
.loginpage .login_box  { width: 80%; font-size: 0.875rem; margin: 30px auto 0 auto; border-bottom: 1px solid #eee;}
.loginpage .login_box input { width: 100%;  border: none; font-size: 1rem; padding: 10px 0;}

.loginpage .btn_member { width: 80%; font-size: 0.875rem; font-weight: 400; margin: 20px auto 0 auto; text-align: right;}
.loginpage .btn_member span {display: inline-block; font-weight: 100; margin: 0 10px;}
.loginpage .btn_member a { font-weight: 300;}
.loginpage .btn_login { display: inline-block; width:80%; margin: 20px auto 0 auto; padding: 10px 20px 13px 20px; background-color: #1575f2; border-radius: 30px; color: #fff;}


.loginpage .event_check {  text-align: left; width: 80%; margin: 20px auto; font-weight: 300; font-size: 0.875rem;}
.loginpage .event_check input { border: none; font-size: 1rem; padding: 10px 0;}
.loginpage .event_check input[type="checkbox"] { -webkit-appearance: auto; background-color: #000; appearance: auto;}

.loginpage .terms { width: 80%; margin: 0 auto; font-weight: 300; font-size: 0.875rem;}


/********************************** 써클 초대 검색 ****************************************/
.circle_positing_box .right100 {right:110px!important;}
.circle_positing_box .invite { position: absolute; top: 36px; right: 27px; padding: 4px 15px; font-size: 0.8125rem; color: #fff; font-weight: 400; background-color: #1575f2; border: 1px solid #1575f2; border-radius: 30px;}
.circle_positing_box .join { position: absolute; top: 36px; right: 27px; padding: 4px 15px; font-size: 0.8125rem; color: #1575f2; font-weight: 400; background-color: #fff; border: 1px solid #1575f2; border-radius: 30px;}


/********************************** 대회심사 ****************************************/

.setting_area .line label {display: inline-block; width: 25%; font-weight: bold; font-weight: 500; }

.setting_area .line .line_input {width: 73%; padding: 0 3px 5px 3px; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #d6d5d5; }

.setting_area .line select {width: 73%!important; padding: 0 3px 5px 3px; border-bottom: 1px solid #d6d5d5!important; border-radius: 0px!important; background-position: 98% 12px!important;}
.setting_area .line textarea {width: 100%; font-size: 0.875rem; padding: 5px 5px 5px 5px; border: 1px solid #d6d5d5; font-family: 'Noto Sans KR', sans-serif; font-weight: 300; margin-top: 10px;}
.setting_area .line iframe { margin-top: 10px; width: 100%; height: 315px;}
.setting_area .line table { width: 100%; border-top: 2px solid #1575f2; border-collapse: collapse; margin-top: 10px;}
.setting_area .line table tr {border-bottom: 1px solid #ebedf1;}
.setting_area .line table tr th {text-align: center; padding: 8px 10px; background-color: #f3f8ff;}
.setting_area .line table tr th, .setting_area .line table tr td {border-left: 1px solid #ebedf1;}
.setting_area .line table tr th:first-child, .setting_area .line table tr td:first-child {border-left: none;}
.setting_area .line table tr td {text-align: center; padding: 8px 10px; }
.setting_area .line table tr td input { width: 100%; border: 1px solid #d6d5d5!important; padding: 5px; }

.setting_area .line .set_save {display: block; padding: 10px 20px 13px 20px; margin: 0 auto; background-color: #1575f2; border-radius: 30px; color: #fff; text-align: center; max-width: 400px;}


/*설정*/
.setting_area .line .line_input2 {width: 35%; padding: 0 3px 5px 3px; border-top: none; border-left: none; border-right: none; border-bottom: 1px solid #d6d5d5; }




/********************************** 펍웨어 업데이트 ****************************************/
.loginpage .update_info { width: 80%; margin: 30px auto 10px auto; padding:30px; background-color: #f6f8fb; font-size: 1rem; font-weight: 500;}
.loginpage .update_info p { line-height: 2rem; text-align: left;}
.loginpage .btn_update { display: inline-block; width: 60%; margin: 20px auto 0 auto; padding: 15px 20px 18px 20px; background-color: #1575f2; border-radius: 30px; color: #fff; font-size: 1.25rem;}
.ico_loading { margin: 40px auto;}



/********************************** 대회설정 ****************************************/
.line .info_check { margin-top: 10px; font-weight: 400px; font-size: 0.8125rem;}
.line .info_check input[type="checkbox"] { -webkit-appearance: auto; background-color: #000; appearance: auto;}

.line .btn_area2 { float: right; width: 50%; text-align: right;}
.line .btn_setting2 { padding: 2px 8px 4px 8px; font-size: 0.75rem; color: #fff; font-weight: 400; background-color: #1575f2; border: 1px solid #1575f2; border-radius: 30px; margin-left: 10px;}
.line .btn_setting3 { padding: 2px 8px 4px 8px; font-size: 0.75rem; color: #1575f2; font-weight: 400; background-color: #fff;    border: 1px solid #1575f2; border-radius: 30px;}

.line .chat_list,
.modal_txt .con .chat_list{display: flex; flex-wrap: wrap; justify-content: flex-start; padding: 10px 0; position: relative;}
.line .chat_list .user_profile,
.modal_txt .con .chat_list .user_profile{ display: inline-block; width: 45px; height: 45px; border-radius: 8px; background-color: #ebedf1;
    box-shadow: rgb(255 255 255) 0px 0px 0px 2px; background-repeat: no-repeat; background-size: cover; margin-right: 20px;}
.line .chat_list .name,
.modal_txt .con .chat_list .name{ margin-top: 2px; width: calc(100% - 130px);}

.line .chat_list .name .message { font-size: 0.875rem; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical;}

.modal_txt .con .chat_list .name .message { font-size: 0.875rem; text-overflow: ellipsis; overflow: hidden; word-wrap: break-word; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; text-align: left;}

.line .chat_list .data,
.modal_txt .con .chat_list .data { position: absolute; width: 55px; height: 55px; top: 8px; right: 0; text-align: center;}
.line .chat_list .data .date,
.modal_txt .con .chat_list .data .date { text-align: center; font-size: 0.75rem; color: #72778e; font-weight: 300;}
.line .chat_list .data .count,
.modal_txt .con .chat_list .data .count { display: inline-block; margin: 3px auto 0 auto; padding: 4px 13px 6px 13px; color: #fff; background-color: #1575f2; font-size: 0.75rem; border-radius: 30px;}
.line .txt_center,
.modal_txt .con .txt_center { text-align:center;}
.line .btn_setting4,
.modal_txt .con .btn_setting4{ display: inline-block; width: 30%; padding: 12px 18px 14px 18px; font-size: 1rem; color: #fff; font-weight: 400; background-color: #1575f2; border: 1px solid #1575f2; border-radius: 30px; margin-left: 10px;}
.line .btn_setting5,
.modal_txt .con .btn_setting5 { display: inline-block; width: 30%; padding:  12px 18px 14px 18px; font-size: 1rem; color: #fff; font-weight: 400; background-color: #ff5353; border: 1px solid #ff5353; border-radius: 30px; margin-left: 10px;}



/*시상팝*/
.modal_txt .con table {width: 100%; border-top: 2px solid #1575f2; border-collapse: collapse; margin-top: 25px;}
.modal_txt .con table:first-child {margin-top: 10px;}
.modal_txt .con table tr {border-bottom: 1px solid #ebedf1;}
.modal_txt .con table tr:first-child th { background-color: #f3f8ff;}
/*.modal_txt .con table tr:last-child {border-bottom:none;}*/

.modal_txt .con table tr th {}
.modal_txt .con table tr td { }
.modal_txt .con table tr td:last-child {padding: 0px 0px; border-left: 1px solid #ebedf1;}
.modal_txt .con table tr .movie { border-left:none;}

.modal_txt .con table tr th, .modal_txt .con table tr td { text-align: center; padding: 8px 10px;}



/* 공식 써클 */
.official-circle-icon {
    display: inline-block;
    width: 16px !important;
    height: 16px !important;
    vertical-align: middle;
    margin-bottom: 4px;
    margin-left:5px;
    margin-right:2px;
}

.official-circle-icon-big{
    display: inline-block;
    width: 25px !important;
    height: 25px !important;
    vertical-align: middle;
    margin-bottom: 4px;
    padding-left:2px;
}


/*
##Device = Desktops
##Screen = 1281px to higher resolution desktops
##Device = 데스크탑
##Screen = 1281px 이상 해상도 데스크탑
*/

@media (min-width: 1281px) {

}



/*
##Device = Tablets, Ipads (portrait),
##Screen = B/w 768px to 1024px
##Device = 태블릿, 아이패드(세로),
##Screen = 768px에서 1024px 사이
*/

@media (min-width: 768px) and (max-width: 1024px) {



}

/*
##Device = Tablets, Ipads (landscape)
##Screen = B/w 768px to 1024px
##Device = 태블릿, 아이패드(가로)
##Screen = 768px에서 1024px 사이
*/

@media (min-width: 768px) and (max-width: 1024px) and (orientation: landscape) {



}

/*
##Device = Low Resolution Tablets, Mobiles (Landscape)
##Screen = B/w 481px to 767px
##Device = 저해상도 태블릿, 모바일(가로)
##Screen = 481px에서 767px 사이
*/

@media (min-width: 481px) and (max-width: 767px) and (orientation: landscape) {

}


@media (min-width: 0px) and (max-width: 760px) {
	.dis_web { display: none;}
	.dis_mob { display: block;}

	.mt_8 { margin: 6px 0 0 0;}
	.mt_30 { margin-top: 15px!important;}

	.pd_bottom_20 { padding-bottom: 15px!important;}


	.header {height: 180px; }
	.bar { left: 74px;}
	.top_robot_icon { width: 110px; }

	.p_all { padding: 0 0 0 0;}
	.container { margin: 210px auto 5px auto;}
	.container2 { margin: 0px auto 0px auto;}

    .mobile-menu { bottom: 7px;}


	.top_menu_wrap {right: 0;  width: 100%; margin: 0 auto; border-top: 1px solid #ebedf1; padding-top:10px; margin-top: 55px; }
    html[lang="en"] .top_menu_wrap {right: 0;  width: 100%; border-top: 1px solid #ebedf1; padding-top:10px; }
	.top_menu_wrap a { background-position: center; height: 40px}

	.menuwrap { width: 300px; min-height: 480px;}
	.menuwrap > .tit {font-size: 0.8125rem;}
	.menuwrap .medal_area .count {font-size: 0.8125rem;}
	.menuwrap .medal_area .charge {font-size: 0.8125rem;}
	.menuwrap .cell_area {font-size: 0.75rem;}
	.menuwrap .cell_area .v_box1 .tit .count { font-size: 0.6875rem;}
	.menuwrap .cell_area .v_box1 { padding-right: 15px;}

	.menuwrap .service_area .box {margin: 0 10px!important; width: 22%;}
	.menuwrap .service_area .box p {font-size: 0.75rem;}
	.menuwrap .service_area .box p:nth-child(2) {margin-top: -3px;}

	.policy_area { bottom: 10px; font-size: 0.625rem;}
	.policy_area a {color: #72778e;}
	.policy_area span {margin: 0 10px; font-weight: 100; color: #eee}



	select { padding: 4px 10px; font-size: 0.75rem; background-position: 88% 12px;}

	/********************************** 포스팅 리스트 ****************************************/
	.formToggleTst {height: 26px;}
	.formToggleTst input[type=checkbox] + label {background-size: auto 27px;}
	.posting_sort {width: 65px;}

	/*.positing_box .info_area { padding: 25px 16px 0 16px;}*/
	.positing_box .info_area .circle_profile { width: 40px; height: 40px; box-shadow: rgb(255 255 255) 0px 0px 0px 2px, rgb(21 117 242) 0px 0px 0px 3.5px;}
	.positing_box .info_area .user_profile { width: 37px; height: 37px; margin-left: -7px; margin-bottom: 1.5px;}
	.positing_box .info_area .name { width:50%; margin: 2px 0 0 13px;}
	.positing_box .info_area .name .circle_name {font-size: 0.875rem;}
	.positing_box .info_area .name .setting { margin-top: -10px;}
	.positing_box .info_area .name .setting .user_name { font-size: 0.75rem;}
	.positing_box .info_area .name .setting .positng_date { font-size: 0.75rem;}

	.positing_box .text_area { padding: 10px 15px 0 15px;}
	.positing_box .text_area_left { -webkit-line-clamp: 6; padding: 10px 25px 0 15px; }
	.positing_box .img_area_right { width: 150px; padding: 10px 15px 0 0;}

	.menu_3p { top: 25px; right: 3px;}
	.menu_3p span {width: 3px; height: 3px; }
	.menu_3p span:nth-child(1) {top:0px; left: 10px;}
	.menu_3p span:nth-child(2) {top:6px; left: 10px;}
	.menu_3p span:nth-child(3) {top:12px; left: 10px;}

	.like_area { padding: 8px;}
	.bookmark_area {top: 10px; right: 7px;}




	/********************************** 써클 리스트 ****************************************/
	.join_circle .tit { margin: 20px 15px 12px 15px; font-size: 0.8125rem; font-weight: 500;}
	.join_circle .make_circle { top: 17px; right: 15px; font-size: 0.75rem;}
	.join_circle .circle_list { padding: 12px 18px 12px 18px;}
	.join_circle .circle_list .count { right: 16px;}
	.join_circle .circle_list .name .circle_name { font-size: 0.875rem;}


	/********************************** 포스팅 뷰 ****************************************/

	.view_top { position: fixed; top: 0px;}
	.view_top_blank {display:block; height: 50px;}


	.positing_view .info_area { padding: 25px 16px 0 16px;}
	.positing_view .rank {position: absolute; width: 43px; height: 35px; top: 20px; right: 40px;}
	.positing_view .rank img {width: 100%;}

	.positing_view .info_area .circle_profile { width: 40px; height: 40px; box-shadow: rgb(255 255 255) 0px 0px 0px 2px, rgb(21 117 242) 0px 0px 0px 3.5px;}
	.positing_view .info_area .user_profile { width: 37px; height: 37px; }
	.positing_view .info_area .name { width:50%; margin: 2px 0 0 13px;}
	.positing_view .info_area .name .circle_name {font-size: 0.875rem;}
	.positing_view .info_area .name .user_name { height: auto; font-size: 0.75rem; line-height: 0.75rem;}
	.positing_view .info_area .name .positng_date { font-size: 0.75rem; margin-top: -10px;}

	/*포스팅 뷰 텍스 */
	.positing_view .text_area {  padding:5px 0 40px 0; font-size: 0.875rem; line-height: 1.4rem; border-bottom: 1px solid #ebedf1;}
	.positing_view .text_area p { padding: 10px 15px;}
	.positing_view .text_area div {padding-top: 10px; padding-bottom: 10px;}
	.positing_view .text_area div img {width: 100%;}

	.positing_view .text_area div .coding_down { margin: 0 10px;}



	/* 댓글 */
	.reply_box .reply_depth_1 { padding: 15px ;}
	.reply_box .reply_depth_1 .user_profile {width: 37px; height: 37px;}
	.reply_box .reply_depth_1 > .comment { width: calc(100% - 52px);}
	.reply_box .reply_depth_1 > .comment .btn_area .bar { margin: 0 8px;}
	.reply_box .reply_depth_1 .reply_depth_2 { margin-left: 48px;}
	.reply_box .reply_depth_1 .reply_depth_2 .user_profile {width: 27px; height: 27px;}
	.reply_box .reply_depth_1 .reply_depth_2 > .comment { width: calc(100% - 39px);}
	.reply_box .reply_depth_1 .reply_depth_2 > .comment .btn_area .bar { margin: 0 8px;}

	/* 댓글 입력*/
	.input_area { padding: 10px 15px;}
	.btn_member { width: 40px; height: 40px; background-image: url("../img/ico_circle_mem_b.png"); background-repeat: no-repeat; background-position: top center; background-size: cover}
	.btn_search { width: 40px; height: 40px; background-image: url("../img/ico_circle_search_b.png"); background-repeat: no-repeat; background-position: top center; background-size: cover}
	.btn_setting { width: 40px; height: 40px; background-image: url("../img/ico_circle_setting_b.png"); background-repeat: no-repeat; background-position: top center; background-size: cover}


	/*포스팅 뷰 대회 테이블 */
	.positing_view .text_area table tr td iframe { width: 100%; height: 200px;}



	/********************************** 써클 메인 ****************************************/
	.view_top_circle_main { height: 100px;}
	.circle_area { padding: 10px 15px 20px 15px;}
	.circle_area .circle_info .circle_profile { top: -32px; left: 15px; width: 60px; height: 60px;}
	.circle_area .circle_name {font-size: 1.2rem;}
	.circle_area .summary { margin-top: 0px; font-size: 0.875rem;}
	.circle_area .member { margin-top: 10px;}
	.circle_area .circle_info .push_area { top: 10px; right: 15px;  height: 27px;}
	.circle_area .circle_info .invite { padding: 2px 10px; font-size: 0.8125rem;}
	.circle_area .circle_info .join { padding: 2px 10px; font-size: 0.8125rem;}
	.circle_area .posting_write { right: 15px; bottom: 10px; padding: 2px 10px; font-size: 0.8125rem;}

	.tab .half { padding: 8px 15px; font-size: 0.875rem;}

	.circle_positing_box .info_area { padding: 25px 15px 0 15px;}
	.circle_positing_box .info_area .name .user_name { font-size: 0.875rem;}
	.circle_positing_box .rank { position: absolute; width: 55px; height: 42px; top: 15px; right: 39px;}
	.circle_positing_box .text_area { padding: 10px 15px 0 15px;}
	.circle_positing_box  .text_area_left { -webkit-line-clamp: 4; padding: 10px 25px 0 15px;}
	.circle_positing_box .img_area_right { width: 150px; padding: 10px 15px 0 0;}

	.view_top3 { position: fixed; max-width: 680px;  top: 0px;}



	.rbot_talk {padding: 0 15px 25px 15px;}


	.resume_area { width: 100%; background-color: #fff; padding: 15px 15px 15px 15px; z-index: 3}
	.resume_area .resume_box  { width: 100%; background-color: #ebedf1; border-radius: 15px; padding: 15px;}
	.resume_area .resume_box_fix { width: 100%; background-color: none; border-radius: 15px; padding: 0px;}
	.resume_area_fix {position: fixed; top:50px; width: 100%; max-width: 680px; background-color: #fff; padding: 10px 15px 15px 10px; z-index: 3}

	.resume_area_blank {width:100%; height: 251px;}







	/********************************** 세포 랭킹 ****************************************/


	.my_rank .rank_img { height: 150px; background-position: center -11px; background-size: 404px;}

	.my_rank .rank_user .number { height: 35px;}
	.my_rank .rank_user .user_profile { width: 40px; height: 40px;}
	.my_rank .rank_user .name { margin-top: -5px;}
	.my_rank .rank_user .name .user_name { font-size: 0.875rem;}
	.my_rank .rank_user .name .point { font-size: 0.8125rem;}


	.ranking_list { padding: 15px 15px 15px 15px;}
	.ranking_list .user .number { width: 35px; height: 35px; font-size: 1rem; }
	.ranking_list .user .user_profile { width: 40px; height: 40px;}
	.ranking_list .user .name {margin-top: -4px;}
	.ranking_list .user .name .user_name { font-size: 0.875rem;}
	.ranking_list .user .name .point {font-size: 0.8125rem;}
	.ranking_list .user .rank_icon { width: 50px; height: 50px;}


	/********************************** 서클 검색 ****************************************/
	.search_area { padding: 15px;}
	.search_area .search_box input { font-size: 0.875rem; padding: 12px 50px 8px 20px;}
	.search_area .search_box input + a { top: -5px; right: 5px;}
	.search_area .search_history .tit { font-size: 0.875rem;}
	.search_area .search_history .word a { padding: 4px 15px 4px 15px; font-size: 0.8125rem;}
	.circle_positing_box .text_area_left2 { margin-bottom: 25px; padding: 5px 15px 0 15px;}




	/********************************** 메인 검색 ****************************************/
	.search_positing_box .tit { padding: 20px 15px 0 15px;}
	.search_positing_box .circle_list {padding: 25px 15px 0 15px;}
	.search_positing_box .circle_list:last-child { padding: 25px 15px 30px 15px;}

	.search_positing_box .info_area {padding: 25px 15px 0 15px;}

	.search_positing_box .text_area_left2 { margin-bottom: 25px; padding: 15px 15px 0 15px;}



	/********************************** 메인 검색 ****************************************/
	.btn_set_position1 { margin-top: 30px; margin-left: -30px;}
	.btn_set_position4 { margin-top: 30px;}
	.btn_set_position2 { top: 7px; left: 60px;}
	.btn_set_position3 { left: 90px;}
	.btn_set { width: 25px; height: 25px; background-position: center;}
	.btn_del { width: 25px; height: 25px; background-position: center;}
	.circle_name_set input { font-size: 1rem;}
	.setting_area .line {font-size: 0.875rem; padding: 25px 15px;}
	.setting_area .tit { padding: 20px 15px 0 15px; font-size: 0.75rem;}
	.setting_area .line .btn_edit { font-size: 0.75rem;}


	/********************************** 써클 회원관리 ****************************************/
	.member_box .tit { font-size: 0.875rem; padding: 20px 15px 0 15px;}
	.member_box .member_list .name .user_name { font-size: 0.875rem;}
	.member_box .member_list { padding: 10px 15px 0 15px; background-color: #fff;}
	.member_box .member_list:last-child { padding: 15px 15px 25px 15px;}
	.member_box .member_list .btn_edit { top: 10px; right: 15px;}


	/********************************** 채팅 리스트  ****************************************/
	.chat_box { padding: 15px 15px 15px 15px;}
	.chat_box .chat_list .name { margin-top: 1px;}
	.chat_box .chat_list .name .user_name { font-size: 0.875rem;}
	.chat_box .chat_list .data .count { padding: 2px 10px 4px 10px;}


	/********************************** 개인정보보호정책 ****************************************/
	.privacy { padding: 25px 15px;}
	.privacy .box h2 { font-size: 0.875rem;}
	.privacy .box .con table tr th, .privacy .box .con table tr td { padding: 10px 10px; font-size: 0.8125rem;}


	/********************************** 마이페이지 ****************************************/
	.my_tab a  {font-size: 0.875rem;}

	/* 올리기예약 */
	.positing_box .reserve_time { margin: 10px 15px 0 10px; padding: 12px 20px;}
	.positing_box .reserve_time a {top: 12px; right: 20px;}


	/********************************** 유저프로필 ****************************************/
	.circle_area .box .sel_robot a { width: 21%; margin: 0 2%; }
	.circle_area .box .sel_circle a { width: 21%; }
	.circle_area .box .sel_robot a .r_name { font-size: 0.75rem;}
	.circle_area .box .sel_circle a .r_name  { font-size: 0.75rem;}


	/********************************** 로그인 ****************************************/
	.loginpage .top .title {font-size: 2rem;}
	.loginpage .top .greeting { font-size: 0.875rem; margin: 5px auto 30px auto;}

	.loginpage .login_box { margin: 20px auto 0 auto;}


	/********************************** 써클 초대 검색 ****************************************/
	.circle_positing_box .right100 {right:105px!important; width: 45px!important; top: 25px!important;}
	.circle_positing_box .invite {right: 17px;}
	.circle_positing_box .join {right: 17px; }
	.width53 { width:53%!important;}


	/********************************** 대회심사 ****************************************/
	.setting_area .line iframe {height: 200px;}
	.setting_area .line .line_input2 {width: 34%;}

}



/*
##Device = Most of the Smartphones Mobiles (Portrait)
##Screen = B/w 320px to 479px
##Device = 대부분의 스마트폰 모바일 기기(세로)
##Screen = 320px에서 479px 사이
*/

@media (min-width: 0px) and (max-width: 480px) {


}