@charset "utf-8";

#header_wrap {
	left:0;
	right:0;
	width:100%;
	padding:20px;
	text-align:center;
	background:#fff;
	z-index:999;
	-webkit-transition: none;
	transition: none;
}

#header {width:100%;max-width:var(--content-w);margin:0 auto;}
#header #logo {display:block;position:absolute;z-index:1;}
#header #logo a {display:block;margin:5px 0px 0px 0px;}
#header #logo a img {
	-webkit-transition: none;
	transition: none;
}
#header #tnb {z-index:1;position:absolute;right:-5px;}
#header #tnb ul:after {display:block;visibility:hidden;clear:both;content:""}
#header #tnb ul li {display:block;float:left;position:relative;margin:0 10px 0 0;}
#header #tnb ul li:last-child {margin:0;}
#header #tnb a {display:inline-block;color:#666;font-size:0.935em;margin:3px;text-align:center;font-weight:500;letter-spacing:-1px;}
#header #tnb a span {line-height:32px;font-size:1.035em;}
#header #tnb a span.tnb_txt {font-size:1.135em;line-height: 35px;}
#header #tnb a strong {color:var(--color);font-weight:400;}
#header #tnb a.btn_national img {width:32px;height:32px;border:solid 1px #ccc;border-radius:50%;}
#header #tnb a.btn_national img.cn {vertical-align: middle; position: relative;top:-0.5px;width:32px;height:32px;}
#header #tnb .selec_lgge {display:none;position:absolute;left:50%;top:40px;width:50px;margin:0 0 0 -25px;padding:8px 0;line-height:32px;background:#fff;border:solid 1px #eee;z-index:1;}
#header #tnb .selec_prof {
	display: none;
	top: 40px;
    width: 100px;
    margin: 0 0 0 -25px;
    line-height: 32px;
    position: absolute;
    z-index: 10;
    background: #fff;
    box-shadow: 0px 4px 13px rgba(0, 0, 0, 0.15), 0px 0px 2px 1px rgba(0, 0, 0, 0.02);
    border-radius: 8px;
    letter-spacing: -0.5em;
    color: #707070;
    font-weight: bold;
}
#header #tnb .selec_lgge a {float:none;margin:0 auto 5px auto;line-height:normal;text-align:center;}
#header #tnb .selec_lgge a:last-child {margin:0 auto;}
#header #tnb .selec_lgge a img {width:32px;border:solid 1px #eee;border-radius:50%;}
#header_wrap.sticky {position:fixed !important;z-index:99999;min-height:60px;top:0;background:#fff;box-shadow:0 0px 10px rgba(0,0,0,0.08);}

#gnb ul {font-size:0;line-height:0;text-align:center;}
#gnb ul:after {display:block;visibility:hidden;clear:both;content:""}
#gnb ul li {display:inline-block;position:relative;margin:0 40px 0 0;}
#gnb ul li:last-child {margin:0;}
#gnb ul li a {display:block;font-size:18px;font-weight:600;text-align:center;line-height:40px;}
#gnb ul li a.active {color:#999;}
#gnb ul li ul {display:none;position:absolute;left:50%;top:55px;width:160px;margin:0 0 0 -80px;background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:0 0 10px rgba(0,0,0,0.08);z-index:99;}
#gnb ul li ul li {float:none;width:100%;margin:0;border-bottom:dashed 1px #eee;}
#gnb ul li ul li:last-child {border-bottom:none;}
#gnb ul li ul li a {padding:0 10px;color:#666;font-size:14px;line-height:40px;font-weight:400;text-align:center;}
#gnb ul li ul li a.active2,
#gnb ul li ul li a:hover {color:var(--color);}

@media screen and (max-width:1200px) {
	#header #tnb ul li {margin:0 10px 0 0;}
	#header #tnb ul li:last-child {margin:0;}
	
	#gnb ul li {margin:0 20px 0 0;}
	#gnb ul li:last-child {margin:0;}
}

@media screen and (max-width:980px) {
	#header #logo a img {width:130px;height:30px;}
	#gnb ul li a {font-size:16px;}
}

@media screen and (max-width:720px) {
	#header_wrap {position:fixed;padding:10px 15px;background:none;}
	#header #tnb ul li {display:block;}
	#header #tnb ul li:last-child {display:block;}
	
	#gnb {display:none;}
	#gnb ul {display:none;}
}

#footer_wrap {
	padding:40px 20px 15px 20px;
	background:#fafafa;
	position:relative;
	bottom:0;
	width:100%;
	-webkit-transition: all .3s ease-out;
	transition: all .3s ease-out;
}

#footer_wrap .copy {
	padding:0;
	font-size: 0.925em;
	letter-spacing: -1px;
	color:#999;
	text-align: center !important;
	margin: 30px 0px 10px 0px;
}
#footer {display:table;table-layout:fixed;width:100%;max-width:var(--content-w);margin:0 auto;}
#footer .logo {
	display:table-cell;
	width:30%;
	vertical-align:middle;
	-webkit-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
#footer .sec_policy {
	display:table-cell;
	position: relative;
	font-weight: 500;
    padding: 20px 0px 5px 10px;
	font-size:1.035em;
	color:rgb(106, 106, 106);
	line-height:20px;
	letter-spacing: -1px;
	width:100%;
	vertical-align:middle;
	-webkit-transition: all .3s ease-out;
	transition: all .3s ease-out;
}
#footer .cp_info {
	display:table-cell;
	font-size:1.075em;
	color:rgb(106, 106, 106);
	line-height:20px;
	width:40%;
	vertical-align:middle;
	-webkit-transition: all .3s ease-out;
	transition: all .3s ease-out;
}

#footer ul li {display:block;position:relative;margin:0 0 13px 0;padding:0 0 0 120px;color:#666;}
#footer ul li:last-child {margin:0;}
#footer ul li label {display:block;position:absolute;left:0;top:0;color: #707070;font-weight: bold;letter-spacing: -0.02em;}

@media screen and (max-width:1200px) {
	#footer {display:block;}
	#footer .logo {display:block;width:100%;margin:0 0 30px 0;}
	#footer .cp_info {display:block;float:left;width:50%;padding:0 10px;line-height:18px;}
}

@media screen and (max-width:720px) {
	#footer_wrap {padding:20px 20px 70px 20px;}
	#footer .logo {margin:0 0 20px 0;}
	#footer .logo img {width:180px;height:auto;}
	#footer .cp_info {float:none;width:100%;margin:0 0 16px 0;padding:0;line-height:18px;}
	#footer ul li {padding:0 0 0 110px;font-size:12px;}
	#footer ul li label {font-size:12px;}
	#footer ul li.copy {padding:0;}
	#footer_wrap.mob_none {display:none;}
	#footer .sec_policy {padding: 20px 0px 5px 0px;font-size:0.935em;}
}

@media screen and (max-width:480px) {
	#footer .logo img {width:152px;height:auto;display: block;position: relative;left: -10px;}
}

#fnb {display:none;position:fixed;left:0;right:0;bottom:0;width:100%;background:#fff;z-index:99;}
#fnb ul:after {display:block;visibility:hidden;clear:both;content:""}
#fnb ul li {display:block;float:left;width:20%;text-align:center;}
#fnb ul li a {display:block;padding:12px 0;}
#fnb ul li a .icon {display:block;margin:0 0 4px 0;opacity:0.4}
#fnb ul li a .icon img {width:24px;height:auto;}
#fnb ul li a p {color:#666;font-size:12px;font-weight:400;}
#fnb ul li a.active .icon {opacity:1;}
#fnb ul li a.active p {color:#222;}

#body_wrap {width:100%;/*height:100%;*/min-height:100vh;max-width:var(--content-w);margin:0 auto; margin-bottom:15px;overflow-y: hidden;overflow-x: hidden;}

@media screen and (max-width:720px) {
	#fnb {display:block;}
	#body_wrap{padding:0px 10px;}
}

.header_sub {display:none;position:relative;margin-top:40px;left:0;right:0;top:0;color:#222;font-size:18px;line-height:50px;font-weight:700;letter-spacing:-0.5px;text-align:center;background:#fff;z-index:9;}
.header_sub span {font-weight:500;}
.header_sub:after {display:block;visibility:hidden;clear:both;content:""}
.header_sub .btn {display:block;position:absolute;color:#999;line-height:32px;background:none;}
.header_sub .btn.right {right: 5px;}
.header_sub .btn i {font-size:20px;}
.header_sub .btn i.fa {position:relative;top:-1.5px;}
.header_sub.sticky {position:fixed;width:100%;margin:0;box-shadow:0 0px 10px rgba(0,0,0,0.08);}
.header_sub .btn_sort_filter {display:block;position:absolute;right:15px;top:0;line-height:50px;background:none;}
.header_sub .btn_sort_filter img {width:20px;height:auto;}
.header_sub .btn_edit {display:block;position:absolute;right:15px;top:0;color:var(--color);font-size:15px;font-weight:600;line-height:50px;background:none;}
.header_sub .btn_sch_mob {display:none;position:absolute;right:50px;top:0;line-height:50px;background:none;}
.header_sub .btn_sch_mob i {color:var(--color);font-size:20px;}

@media screen and (max-width:980px) {
	.header_sub .btn_sch_mob {display:block;}
}

.location {margin:0 0 40px 0;color:#999;}
.location i {margin:0 8px;color:#bbb;font-size:13px;vertical-align:baseline;}

@media screen and (max-width:1200px) {
	.location_wrap {margin:0 20px;}
}

@media screen and (max-width:720px) {
	.header_sub {display:block;}
	
	.location_wrap {display:none}
	.location {display:none}
}

/************ index ************/
.sec01 {padding:30px 0 0 0;text-align:center;background:#ffdedc;}
.sec01 .slogon {width:50%;max-width:300px;margin:0 auto 40px auto;}
.sec01 .slogon img {width:100%;height:auto;}

.sec01 .benefit {
	display:block;
	width:100%;
	max-width:1180px;
	margin:0 auto;
	padding:60px 20px;
	background:#fff;
	-webkit-border-top-left-radius: 140px;
	-webkit-border-top-right-radius: 140px;
	border-top-left-radius: 140px;
	border-top-right-radius: 140px;
}
.sec01 .benefit h4 {
	display:inline-block;position:relative;color:#666;font-size:20px;font-weight:700;text-align:center;letter-spacing:-0.5px;
}
.sec01 .benefit h3 {display:inline-block;position:relative;margin:0 0 40px 0;color:#666;font-size:28px;font-weight:700;text-align:center;letter-spacing:-0.5px;}
.sec01 .benefit h3:before {content:'';display:block;position:absolute;left:-15px;top:-15px;width:20px;height:20px;background:url(/images/twi_left.png) no-repeat 50% 50%;background-size:100% auto;}
.sec01 .benefit h3:after {content:'';display:block;position:absolute;right:-10px;top:-15px;width:20px;height:20px;background:url(/images/twi_right.png) no-repeat 50% 50%;background-size:100% auto;}
.sec01 .benefit h3 span {display:inline-block;position:relative;z-index:1;}
.sec01 .benefit h3 span:after {content:'';display:block;position:absolute;left:0;right:0;bottom:0;height:50%;background:#ffe7e6;z-index:-1;}
.sec01 .benefit ul:after {display:block;visibility:hidden;clear:both;content:""}
.sec01 .benefit ul li {display:block;float:left;width:50%;padding:0 20px;}
.sec01 .benefit ul li .img {display:block;width:150px;margin:0 auto 18px auto;background:#f48d89;border-radius:50%;overflow:hidden;}
.sec01 .benefit ul li .img img {width:100%;height:auto;}
.sec01 .benefit ul li label {display:block;margin:0 0 10px 0;color:var(--color2);font-size:26px;font-weight:700;}
.sec01 .benefit ul li p {font-size:19px;line-height:180%;}
.sec01 .benefit ul li p br.mob {display:none;}
.sec01 .benefit_txt {padding:50px 20px;background:#f48d89;}
.sec01 .benefit_txt h4 {color:#fff;font-weight:700;font-size:17px;margin-bottom:15px;line-height:25px;}
.sec01 .benefit_txt p {color:#fff;font-size:20px;font-weight:400;text-align:center;line-height:160%;word-break:keep-all;}

.sec01 .slogon,
.sec01 .benefit,
.sec01 h3,
.sec01 .benefit_txt {
	-webkit-transition: all .3s ease-out;
	transition: all .3s ease-out;
}

@media screen and (max-width:1200px) {
	.sec01 .benefit {width:auto;max-width:auto;margin:0 10px;}
}

@media screen and (max-width:720px) {
	.sec01 .slogon {margin:0 auto 20px auto;}
	.sec01 .benefit {
		padding:55px 20px 30px 20px;
		-webkit-border-top-left-radius: 100px;
		-webkit-border-top-right-radius: 100px;
		border-top-left-radius: 100px;
		border-top-right-radius: 100px;
	}
	.sec01 .benefit h3 {margin:0 0 30px 0;font-size:20px;}
	.sec01 .benefit h3:before {left:-10px;top:-9px;width:14px;height:14px;}
	.sec01 .benefit h3:after {right:-7px;top:-9.5px;width:14px;height:14px;}
	.sec01 .benefit h3 span:after {content:'';display:none;position:absolute;top:30px;left:0;right:0;bottom:0;height:50%;background:#ffe7e6;z-index:-1;}
	.sec01 .benefit ul li {float:none;width:100%;margin:0 0 40px 0;padding:0;}
	.sec01 .benefit ul li:last-child {margin:0;}
	.sec01 .benefit ul li .img {width:120px;margin:0 auto 12px auto;}
	.sec01 .benefit ul li label {margin:0 0 8px 0;font-size:18px;}
	.sec01 .benefit ul li p {font-size:16px;}
	.sec01 .benefit_txt {padding:30px 20px;background:url(/images/bg_benefit_m.png) no-repeat 50% bottom #f48d89;background-size:90% auto;}
	.sec01 .benefit_txt p {margin:0 0 5px 0;font-size:16px;position:relative;}
	.sec01 .benefit_txt p:last-child {margin:0;}
}

@media screen and (max-width:480px) {
	.sec01 .benefit {
		-webkit-border-top-left-radius: 70px;
		-webkit-border-top-right-radius: 70px;
		border-top-left-radius: 70px;
		border-top-right-radius: 70px;
	}
	.sec01 .benefit h3 {margin:0 0 20px 0;font-size:20px;}
	.sec01 .benefit ul li p br.mob {display:block;}
}

.sec02 h3 {display:block;margin:0 0 30px 0;color:#222;font-size:44px;font-weight:700;letter-spacing:-0.5px;}
.sec02 p {font-size:20px;letter-spacing:-0.5px;line-height:26px;}
.sec02 p:last-child {margin:0;}

.sec02 .desc-txt {
	margin-top: 20px;
	line-height: 18px;
}

.sec02 .desc-txt p {
	margin: 10px 0;
}

.sec02 .content {position:relative;pointer-events: none;top:-80px;width:100%;max-width:1400px;margin:0 auto;padding:320px 0;}
.sec02 .content:after {display:block;visibility:hidden;clear:both;content:""}
.sec02 .content h4 {
	display:inline-block;
	position:relative;
	color:#666;
	font-size:18px;
	font-weight:700;
	text-align:center;
	letter-spacing:-0.5px;
	line-height: 25px;
}

@media screen and (min-width:720px) {
	.sec02 .content h4 {font-size:23px;}
}

.sec02 .intro {
	padding:0 20px;
	background:url(/images/bg_intro.jpg) no-repeat 50% 50% #f0f0f0;
	background-size:cover;
	-webkit-border-bottom-right-radius: 380px;
	border-bottom-right-radius: 380px;
}

.sec02 .greeting {
	padding:0 20px;
	background:url(/images/bg_txt.png) no-repeat 50% bottom #f5d080;
	background-size:100% auto;
	-webkit-border-top-left-radius: 380px;
	border-top-left-radius: 380px;
}
.sec02 .greeting .img {display:block;position:relative;top:120px;width:660px;height:440px;text-align:center;margin:0 -60px;}
.sec02 .greeting .img img {display:block;position:relative;width:100%;height:100%;text-align:center;border-radius:300px;z-index:1;object-fit:cover;}
.sec02 .greeting .img:after {content:'';display:block;position:absolute;left:-40px;top:-40px;width:180px;height:180px;border:solid 45px rgba(255,255,255,0.2);border-radius:50%;}
.sec02 .greeting .cont {
	display:block;
	position:absolute;
	line-height: 22px;
	right:0;
	top:50%;
	width:calc(100% - 700px);
	-webkit-transform:translate(0,-50%);
	-moz-transform:translate(0,-50%);
	-ms-transform:translate(0,-50%);
	-o-transform:translate(0,-50%);
	transform:translate(0,-50%);
}

.sec02 h3
.sec02 p,
.sec02 .intro,
.sec02 .greeting,
.sec02 .greeting .img,
.sec02 .greeting .cont {
	-webkit-transition: all .3s ease-out;
	transition: all .3s ease-out;
}

@media screen and (max-width:1200px) {
	.sec02 h3 {font-size:40px;}
	.sec02 p {font-size:18px;}
	.sec02 .content {padding:180px 0;}
	.sec02 .intro {
		-webkit-border-bottom-right-radius: 240px;
		border-bottom-right-radius: 240px;
	}
	.sec02 .greeting {
		-webkit-border-top-left-radius: 240px;
		border-top-left-radius: 240px;
	}
	.sec02 .greeting .img {width:50%;}
	.sec02 .greeting .img:after {left:-40px;top:-40px;width:160px;height:160px;border:solid 40px rgba(255,255,255,0.2);border-radius:50%;}
	.sec02 .greeting .cont {width:45%;}
}

@media screen and (max-width:980px) {
	.sec02 .content {padding:120px 0;}
	.sec02 .intro {
		-webkit-border-bottom-right-radius: 160px;
		border-bottom-right-radius: 160px;
	}
	.sec02 .greeting {
		background:url(/images/bg_txt_m.png) no-repeat right 50% #f5d080;
		background-size:auto 100%;
		-webkit-border-top-left-radius: 160px;
		border-top-left-radius: 160px;
	}
	.sec02 .greeting .img {width:360px;height:360px;margin:0 auto 60px auto}
	.sec02 .greeting .img:after {left:-20px;top:-20px;width:120px;height:120px;border:solid 30px rgba(255,255,255,0.2);border-radius:50%;}
	.sec02 .greeting .cont {
		position:relative;
		top:0;
		width:100%;
		text-align:center;
		-webkit-transform:translate(0,0);
		-moz-transform:translate(0,0);
		-ms-transform:translate(0,0);
		-o-transform:translate(0,0);
		transform:translate(0,0);
	}
}

@media screen and (max-width:720px) {
	.sec02 h3 {font-size:36px;}
	.sec02 p {font-size:16px;}
	
	.sec02 .content {padding:30px 0px 80px 0px;}
	.sec02 .intro {
		text-align:center;
		background:url(/images/bg_intro_m.png) no-repeat 50% bottom #f0f0f0;
		background-size:100% auto;
		-webkit-border-bottom-right-radius: 120px;
		border-bottom-right-radius: 120px;
	}
	.sec02 .intro .content {padding:80px 0 520px 0;}
	
	.sec02 .greeting {
		-webkit-border-top-left-radius: 120px;
		border-top-left-radius: 120px;
	}
	.sec02 .greeting .img {width:240px;height:240px;}
	.sec02 .greeting .img:after {left:-30px;top:-30px;width:100px;height:100px;border:solid 25px rgba(255,255,255,0.2);border-radius:50%;}
}

@media screen and (max-width:480px) {
	.sec02 h3 {font-size:28px;}
	.sec02 p {font-size:16px;}
	
	.sec02 .content {padding:30px 0px 80px 0px;}
	.sec02 .intro .content {padding:20px 0 340px 0;}
	.sec02 p br {display:none;}
	.sec02 .greeting .img {width:200px;height:200px;}
}

/************ layer ************/
.mdl_frame {
	display:none;
	position:fixed;
	left:50%;
	top:50%;
	background:rgba(0,0,0,0);
	border-radius:10px;
	overflow:hidden;
	box-shadow:0 0 15px rgba(0,0,0,0.3);
	z-index:9999;
	-webkit-transform:translate(-50%,-50%);
	-moz-transform:translate(-50%,-50%);
	-ms-transform:translate(-50%,-50%);
	-o-transform:translate(-50%,-50%);
	transform:translate(-50%,-50%);
}
.mdl_wrap {display:block;position:relative;width:480px;background:#fff;}
.mdl_wrap.mdl_wrap_s {width:360px}
.mdl_wrap.mdl_wrap_w {width:760px}
.mdl_wrap h3 {display:block;margin:0 20px;padding:20px 0 10px 0;color:var(--color2);font-size:20px;font-weight:600;line-height:140%;border-bottom:solid 1px var(--color);}
.mdl_wrap .cont {padding:20px;color:#222;font-size:16px;line-height:160%;word-break:keep-all;}
.mdl_wrap .cont2 {padding:40px 20px;color:#222;font-size:16px;line-height:160%;text-align:center;word-break:keep-all;}
.mdl_wrap .btn_area {border-top:solid 1px #eee;}
.mdl_wrap .btn_area:after {display:block;visibility:hidden;clear:both;content:""}
.mdl_wrap .btn_area .btn {display:block;float:left;width:50%;color:#666;font-size:16px;font-weight:700;line-height:50px;background:#fff;}
.mdl_wrap .btn_area .btn:active {
  box-shadow: inset -.3rem -.1rem 1.4rem  #FBFBFB, inset .3rem .4rem .8rem #eee;
  transition: background-color 0.5s ease;
  position: relative;
  cursor: pointer;
}
.mdl_wrap .btn_area .btn:last-child {color:var(--color2);}
.mdl_wrap .btn_area .btn.btn_full {float:none;width:100%;color:#666;}
.mdl_wrap ul.sort_chk {padding:20px 40px;}
.mdl_wrap ul.sort_chk li {display:block;width:100%;line-height:50px;}
.mdl_wrap ul.sort_chk li a {display:block;position:relative;z-index:2;}
.mdl_wrap ul.sort_chk li label {padding-left:30px;font-size:16px;font-weight:400;}

@media screen and (max-width:720px) {
	.mdl_frame {
		left:0;
		right:0;
		top:0;
		bottom:0;
		background:rgba(0,0,0,0.6);
		border-radius:0px;
		overflow-x:hidden;
		overflow-y:auto;
		box-shadow:none;
		-webkit-transform:translate(0,0);
		-moz-transform:translate(0,0);
		-ms-transform:translate(0,0);
		-o-transform:translate(0,0);
		transform:translate(0,0);
	}
	.mdl_wrap {
		position:fixed;
		left:50%;
		top:50%;
		width:320px;
		background:#fff;
		border-radius:10px;
		box-shadow:0 0 15px rgba(0,0,0,0.6);
		-webkit-transform:translate(-50%,-50%);
		-moz-transform:translate(-50%,-50%);
		-ms-transform:translate(-50%,-50%);
		-o-transform:translate(-50%,-50%);
		transform:translate(-50%,-50%);
	}
	.mdl_wrap.mdl_wrap_s {width:320px}
	.mdl_wrap h3 {font-size:18px;text-align:center;}
	.mdl_wrap .cont {font-size:14px;text-align:center}
	.mdl_wrap .btn_area a {font-size:14px;}
}

h2.title {display:block;position:relative;left:5px;right:0;top:0;margin:40px 0px 20px 0px;color:#222;font-size:40px;line-height:var(--lh);font-weight:800;letter-spacing:-1px;background:#fff;z-index:9;}
h2.title a.btn_sort_filter {display:none;float:right;position:relative;top:-5px;}
h2.title a.btn_sort_filter img {width:20px;height:auto;margin-bottom: 3px;}

@media screen and (max-width:980px) {
	h2.title {font-size:36px;}
}

@media screen and (max-width:720px) {
	h2.title {display:none;}
	h2.title a.btn_sort_filter {display:block;}
}

#content_wrap {
	width:880px;
	-webkit-transition: all .3s ease-out;
	transition: all .3s ease-out;
	margin-bottom: 30px;
}

#side_wrap {
	float:right;
	position:sticky;
	margin-top:15px;
	right:0;
	width:280px;
	-webkit-transition: all .3s ease-out;
	transition: all .3s ease-out;
}

.comm_side {padding:20px;background:#fff;border:solid 1px #ddd;border-radius:5px;margin-top:70px;}
.comm_side .btn_write {font-size:15px;display:block;color:#fff;width:100%;margin:0 0 40px 0;}
.comm_side h3 {display:block;margin:0 0 10px 5px;font-size:16px;font-weight:600;}
.comm_side ul.ctgnb li {display:block;margin:0 0 10px 0;}
.comm_side ul.ctgnb li:last-child {margin:0;}
.comm_side ul.ctgnb li a.btn {display:block;width:100%;border:none;}
.comm_side ul.ctgnb li a.active {color: #222; background: #fff; border: solid 3px var(--color); font-weight: 700;}

@media screen and (max-width:1200px) {
	#content_wrap {width:calc(100% - 260px);}
	
	#side_wrap {width:220px;right:20px;}
	}
	
	@media screen and (max-width:980px) {
	#content_wrap {float:none;width:100%;}
	
	#side_wrap {display:none;}
}

.sch_wrap {display:block;position:relative;width:100%;margin:15px 0 50px 0;}
.sch_wrap .sch_input {display:block;width:100%;height:45px;line-height:45px;padding:0 15px;color:var(--color);font-size:15px;background:#fff4f4;border:solid 1px #fff4f4;border-radius:5px;}
.sch_wrap .sch_input::placeholder {color:#f37e7e !important;}
.sch_wrap .sch_btn {
	display:block;
	position:absolute;
	right:0;
	top:0;
	width:45px;
	height:45px;
	color:#fff;
	background:var(--color);
	border:none;
	-webkit-border-top-right-radius: 5px;
	-webkit-border-bottom-right-radius: 5px;
	-moz-border-radius-topright: 5px;
	-moz-border-radius-bottomright: 5px;
	border-top-right-radius: 5px;
	border-bottom-right-radius: 5px;
}
.sch_wrap .sch_btn i {font-size:18px;}

@media screen and (max-width:720px) {
	.sch_wrap {margin:0 0 40px 0;}
	.sch_wrap .sch_input {padding:0 15px 0 35px}
	.sch_wrap .sch_btn {left:0;right:auto;color:var(--color);background:none;}
}

.btn_mob {display:none;margin:0px 0px 50px 0px;}
.btn_mob .btn {display:block;width:70%;margin:0 auto;color:#fff;font-size:16px;line-height:30px;border-radius:50px;}

.rank_wrap {height:100%; min-height:220px; margin:30px 0;}
.rank_wrap h3 {display:block;margin:0 0 18px 5px;color:#222;font-size:25px;font-weight:700;letter-spacing:-0.5px;}
.rank_wrap h3 img {width:30px;vertical-align:bottom;margin-right:5px;vertical-align:sub;}
.rank_numlist_wrap:after {display:block;visibility:hidden;clear:both;content:""}

@media screen and (max-width:720px) {
	.btn_mob {display:block;}
	
	.rank_wrap h3 {margin:0 0 12px 3px;font-size:21px;}
	.rank_wrap h3 img {width:25px;height:auto;margin-right:3px;vertical-align:sub;}
}

.rank_numlist_wrap {display:inline-block;width:100%;padding:10px;background:#f8f8f8;border-radius:5px;}
.rank_numlist_wrap:after {display:block;visibility:hidden;clear:both;content:""}

@media screen and (min-width:720px) {
	.rank_numlist_wrap {margin:0px 0px 40px 0px;}
}
ul.rank_numlist {display:block;float:left;width:50%;}
ul.rank_numlist li {display:block;position:relative;padding:5px;color:#222;font-size:18px;font-weight:400;}
ul.rank_numlist li:after {display:block;visibility:hidden;clear:both;content:""}
ul.rank_numlist li .num {display:block;float:left;width:20px;height:20px;margin:0 10px 0 0;color:#fff;font-size:11px;font-weight:400;text-align:center;line-height:20px;background:#828282;border-radius:5px;}
ul.rank_numlist li .num.best {background:#111;}
ul.rank_numlist li .word {display:block;float:left;}
ul.rank_numlist li .arrow {display:block;float:left;margin:0 0 0 10px;}
ul.rank_numlist li .arrow i {color:#4973df;font-size:14px;vertical-align:baseline;}
ul.rank_numlist li .arrow i.xi-caret-up {color:#df4949}

@media screen and (max-width:980px) {
	ul.rank_numlist {float:none;width:100%;}
}

@media screen and (max-width:720px) {
	ul.rank_numlist {float:none;width:100%;}
	ul.rank_numlist li {font-size:16px;}
	ul.rank_numlist li .word {
		width:calc(100% - 50px);
		overflow:hidden;
		white-space:nowrap;
		text-overflow:ellipsis; 
		-o-text-overflow:ellipsis;
		-moz-binding: url('ellipsis.xml#ellipsis');
	}
	ul.rank_numlist li .num {width:18px;height:18px;font-size:10px;line-height:18px;border-radius:3px;}
	ul.rank_numlist li .arrow {display:block;position:absolute;right:10px;top:10px;margin:0;}
}

ul.rank_list {border-top:solid 2px #444;}
ul.rank_list li {display:block;position:relative;padding:25px 10px;border-bottom:solid 1px #eee;}
ul.rank_list li.thumbli {padding:15px 100px 15px 10px;}
ul.rank_list li a.thumb {display:block;position:absolute;right:10px;top:10px;width:88px;height:66px;}
ul.rank_list li a.thumb img {width:100%;height:100%;border-radius:5px;object-fit:cover;}
ul.rank_list li a.title {
	display:block;
	margin:0 0 12px 0;
	color:#222;
	font-size:1.205em;
	font-weight:500;
	overflow:hidden;
	white-space:nowrap;
	text-overflow:ellipsis; 
	-o-text-overflow:ellipsis;
	-moz-binding: url('ellipsis.xml#ellipsis');
}
ul.rank_list li .rankinfo {color:#444;margin:15px 3px 0px;}
ul.rank_list li .rankinfo .profile_img {margin:0;}
ul.rank_list li .rankinfo .profile_img img {width:28px;height:28px;border-radius:50%;}
ul.rank_list li .rankinfo span {display:inline-block;margin:0 20px 0 0;font-size:18px;}
ul.rank_list li .rankinfo span i {color:#c8c8c8;font-size:20px;}
ul.rank_list li .rankinfo span.chkgood i {color:var(--color2);}

@media screen and (max-width:720px) {
	ul.rank_list li.thumbli {padding:15px 80px 15px 10px;}
	ul.rank_list li a.thumb {top:12px;width:60px;height:60px;}
	ul.rank_list li a.title {margin:0 0 8px 0;font-size:1.205em;}
	ul.rank_list li .rankinfo .profile_img img {width:24px;height:24px;}
	ul.rank_list li .rankinfo span {margin:0 6px 0 0;font-size:15px;}
	ul.rank_list li .rankinfo span i {font-size:18px;}
}

#more_wrap {width:100%;margin:0 auto;}
#more_wrap .my_profile_img {display:block;position:relative;text-align:center;margin:0px auto 50px;}
#more_wrap .my_profile_img img {width:100px;height:100px;border:1px solid #e7eaec;border-radius:50%}
#more_wrap .my_profile_img a {display:block;position:absolute;top:50%;left:50%;right:0;bottom:0;margin:20px;width:24px;height:24px;color:#fff;text-align:center;background:#f37e7e;border-radius:50%;}
#more_wrap .my_profile_img a i {display:inline-block;position:relative;left:1px;font-size:13px;line-height:23px;}
#more_wrap ul {border-top:solid 1px #222;}
#more_wrap li {display:block;border-bottom:solid 1px #eee;}
#more_wrap li a {display:block;position:relative;padding:0 20px;font-size:16px;line-height:60px;}
#more_wrap li a .icon {display:inline-block;width:35px;}
#more_wrap li a .icon img {width:24px;height:auto;}
#more_wrap li a .flag {display:block;position:absolute;right:20px;top:0;}
#more_wrap li a .flag img {width:32px;height:32px;border-radius:50%;}