@charset "utf-8";


/* top banner */
.top_banner {
	position:relative;
	width:100%;
	height:45px;
	background:#12436B;
	color:#fff;
	font-size:16px;
	text-align:center;
	line-height:45px;
}
.top_banner a {color:#fff;font-size:16px;}
.top_banner a span {font-size:16px;font-weight:700;color:#FFEA01;}
button.btn_top_close {
	position:absolute;
	top:13px;
	right:calc((100vw - 1440px)/2);
}

/* main container */

.main_container {position:relative; margin:0 auto;  width:1480px; padding:20px;}



/* main top slide banner */

@media all and (max-width:1440px) {
	#mainSliderImg {width:1480px; position:ralative;margin:0 auto}
	#hd_all_menu_wrap {padding-left:10px;}
}
@media all and (min-width:1441px) {
	#mainSliderImg > div > .swiper-pagination-fraction {left:24px}
	#mainSliderImg > div > .swiper-button-prev {left:0;}
	#mainSliderImg > div > .swiper-button-next {left:80px;}
	#mainSliderImg > div > .swiper-btn {left:108px;}
}
#mainSliderImg {margin:0 auto}
#mainSliderImg > div > .swiper-pagination-fraction > span {font-size:inherit;color:#666}
#mainSliderImg > div > .swiper-pagination-fraction > span.swiper-pagination-current {color:#333;font-weight:700}
#mainSliderImg > div > .swiper-pagination-fraction {
	width:56px;
	height:24px;
	line-height:24px;
	bottom:50px;
	font-size:1.5rem;
	left:44px;
	color:#666;
	text-align:center;
}
#mainSliderImg > .swiper-buttons {
	position:absolute;
	bottom:0;
	left:calc((100% - 1480px)/2);
	z-index:999;
	width:1480px;
	max-width:1480px;
	height:50px;
	margin:0 auto;
}
#mainSliderImg > div > .swiper-button-prev,
#mainSliderImg > div > .swiper-button-next {
  position: absolute;
  top:initial;
  bottom: 50px;
  width: 24px;
  height: 24px;
  margin-top:0;
  z-index: 10;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
#mainSliderImg > div > .swiper-button-prev:after,
#mainSliderImg > div > .swiper-button-next:after {font-size:inherit; color:inherit; content:'';} 
#mainSliderImg > div > .swiper-button-prev {left:20px;}
#mainSliderImg > div > .swiper-button-next {left:100px;}
#mainSliderImg > div > .swiper-btn {
	position:absolute;
	bottom:50px;
	left:128px;
	width:24px;
	height:24px;
	z-index:10;
}
#mainSliderImg > div > .swiper-btn button {
	width:100%;
	height:100%;
}
#mainSliderImg > div img {width:100%}

.mainTop {position:relative; width:100%; height:420px;}
.mainTop div { width:100%; height:420px; margin:0 auto;}
.mainTop .b99 {
	background:#9dd3ff;
}
.mainTop .b11 {
	background: -moz-linear-gradient(90deg, rgba(215,223,229,1) 0%, rgba(215,223,229,1) 49%, rgba(230,235,238,1) 51%, rgba(230,235,238,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(215,223,229,1) 0%, rgba(215,223,229,1) 49%, rgba(230,235,238,1) 51%, rgba(230,235,238,1) 100%);
	background: linear-gradient(90deg, rgba(215,223,229,1) 0%, rgba(215,223,229,1) 49%, rgba(230,235,238,1) 51%, rgba(230,235,238,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d7dfe5",endColorstr="#e6ebee",GradientType=1);
}
.mainTop .b12 {
	background: -moz-linear-gradient(90deg, rgba(154,226,246,1) 0%, rgba(154,226,246,1) 49%, rgba(98,227,204,1) 51%, rgba(98,227,204,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(154,226,246,1) 0%, rgba(154,226,246,1) 49%, rgba(98,227,204,1) 51%, rgba(98,227,204,1) 100%);
	background: linear-gradient(90deg, rgba(154,226,246,1) 0%, rgba(154,226,246,1) 49%, rgba(98,227,204,1) 51%, rgba(98,227,204,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#9ae2f6",endColorstr="#62e3cc",GradientType=1);
}
.mainTop .b13 {
	background: -moz-linear-gradient(90deg, rgba(235,179,124,1) 0%, rgba(235,179,124,1) 49%, rgba(235,172,252,1) 51%, rgba(235,172,252,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(235,179,124,1) 0%, rgba(235,179,124,1) 49%, rgba(235,172,252,1) 51%, rgba(235,172,252,1) 100%);
	background: linear-gradient(90deg, rgba(235,179,124,1) 0%, rgba(235,179,124,1) 49%, rgba(235,172,252,1) 51%, rgba(235,172,252,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ebb37c",endColorstr="#ebacfc",GradientType=1);
}
.mainTop .b14 {
	background: -moz-linear-gradient(90deg, rgba(216,185,98,1) 0%, rgba(216,185,98,1) 49%, rgba(235,152,85,1) 51%, rgba(235,152,85,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(216,185,98,1) 0%, rgba(216,185,98,1) 49%, rgba(235,152,85,1) 51%, rgba(235,152,85,1) 100%);
	background: linear-gradient(90deg, rgba(216,185,98,1) 0%, rgba(216,185,98,1) 49%, rgba(235,152,85,1) 51%, rgba(235,152,85,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#d8b962",endColorstr="#eb9855",GradientType=1);
}
.mainTop .b15 {
	background: -moz-linear-gradient(90deg, rgba(229,217,248,1) 0%, rgba(229,217,248,1) 49%, rgba(247,199,231,1) 51%, rgba(247,199,231,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(229,217,248,1) 0%, rgba(229,217,248,1) 49%, rgba(247,199,231,1) 51%, rgba(247,199,231,1) 100%);
	background: linear-gradient(90deg, rgba(229,217,248,1) 0%, rgba(229,217,248,1) 49%, rgba(247,199,231,1) 51%, rgba(247,199,231,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#e5d9f8",endColorstr="#f7c7e7",GradientType=1);
}
.mainTop .b16 {
	background: -moz-linear-gradient(90deg, rgba(255,181,200,1) 0%, rgba(255,181,200,1) 49%, rgba(188,216,255,1) 51%, rgba(188,216,255,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(255,181,200,1) 0%, rgba(255,181,200,1) 49%, rgba(188,216,255,1) 51%, rgba(188,216,255,1) 100%);
	background: linear-gradient(90deg, rgba(255,181,200,1) 0%, rgba(255,181,200,1) 49%, rgba(188,216,255,1) 51%, rgba(188,216,255,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#ffb5c8",endColorstr="#bcd8ff",GradientType=1);
}
.mainTop .b17 {
	background: -moz-linear-gradient(90deg, rgba(148,182,255,1) 0%, rgba(148,182,255,1) 49%, rgba(186,156,251,1) 51%, rgba(186,156,251,1) 100%);
	background: -webkit-linear-gradient(90deg, rgba(148,182,255,1) 0%, rgba(148,182,255,1) 49%, rgba(186,156,251,1) 51%, rgba(186,156,251,1) 100%);
	background: linear-gradient(90deg, rgba(148,182,255,1) 0%, rgba(148,182,255,1) 49%, rgba(186,156,251,1) 51%, rgba(186,156,251,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#94b6ff",endColorstr="#ba9cfb",GradientType=1);
}
.mainTop div > div { max-width:2560px; margin:0 auto; background-size:cover!important;  background-position:center center!important;}
.mainTop div:hover {cursor:pointer;}
.mainTop .t01 {background: url("../images/main_top_01.jpg");}
.mainTop .t02 {background: url("../images/main_top_02.jpg")}
.mainTop .t03 {background: url("../images/main_top_03.jpg")}
.mainTop .t04 {background: url("../images/main_top_04.jpg")}
.mainTop .t05 {background: url("../images/main_top_05.jpg")}
.mainTop .t06 {background: url("../images/main_top_06.jpg")}
.mainTop .t07 {background: url("../images/main_top_07.jpg")}
.mainTop .t08 {background: url("../images/main_top_08.jpg")}
.mainTop .t09 {background: url("../images/main_top_09.jpg")}
.mainTop .t10 {background: url("../images/main_top_10.jpg")}
.mainTop .t11 {background: url("../images/main_top_11.jpg")}
.mainTop .t12 {background: url("../images/main_top_12.jpg")}
.mainTop .t13 {background: url("../images/main_top_13.jpg")}
.mainTop .t14 {background: url("../images/main_top_14.jpg")}
.mainTop .t15 {background: url("../images/main_top_15.jpg")}
.mainTop .t16 {background: url("../images/main_top_16.jpg")}
.mainTop .t17 {background: url("../images/main_top_17.jpg")}
.mainTop .t18 {background: url("../images/main_top_18.jpg")}
.mainTop .t19 {background: url("../images/main_top_19.jpg")}
.mainTop .t99 {background: url("../images/main_top_99.jpg")}

/* main top slide banner end */



/* main banner 신규 */
#main_banner_multi {
	width:100%;
}
#main_banner_multi .swiper-slide {width:calc((100% - 25px)/2)!important;margin-right:25px}
#main_banner_multi .swiper-slide div {}
#main_banner_multi .swiper-slide div img {width:100%;}

#main_banner_multi  .swiper-buttons {
	position:relative;
	display:flex;
	flex-wrap:nowrap;
	justify-content:center;
	align-items:center;
	width:100%;
	height:24px;
	margin:12px auto;
}

#main_banner_multi .swiper-btn {
	position:relative;
	display:flex;
	flex-wrap:nowrap;
	width:72px;
	height:24px;
	margin-left:36px;
}
#main_banner_multi .swiper-btn button {
	width:24px;
	height:24px;
} 
#main_banner_multi .swiper-btn img {vertical-align:top;width:100%}

#main_banner_multi .swiper-btn .swiper-button-prev,
#main_banner_multi .swiper-btn .swiper-button-next {
	position:relative;
	width:24px;
	height:24px;
	top:inherit;
	left:inherit;
	right:inherit;
	margin-top:0
}
#main_banner_multi .swiper-btn .swiper-button-prev:after,
#main_banner_multi .swiper-btn .swiper-button-next:after {display:none;font-size:inherit; color:inherit; content:'';} 
#main_banner_multi .swiper-btn .swiper-button-prev {}
#main_banner_multi .swiper-btn .swiper-button-next {}


#main_banner_multi .swiper-pagination-fraction {
	position:absolute;
	width:322px;
	top:0;
	left:calc(50% - 203px);
	font-size:1.4rem;
	font-weight:500;
	visibility:hidden;
	
}
#main_banner_multi .swiper-pagination-current {
	position:absolute;
	left:0;
	visibility:visible!important;
	width:24px;
	height:24px;
	line-height:24px;
	color:#333;
}
#main_banner_multi .swiper-pagination-total {
	position:absolute;
	right:0;
	visibility:visible!important;
	width:24px;
	height:24px;
	line-height:24px;
	color:#ABB2BE
}
#main_banner_multi .swiper-pagination-progressbar {position:relative; width:250px; height:2px;margin:0 12px 0 36px; background:#EEF0F2}
#main_banner_multi .swiper-pagination-progressbar .swiper-pagination-progressbar-fill {background:#444}


/* main banner 신규 end*/


/* main price */

.main_icon_wide {width:100%; margin:0 auto; background:#F8F9FA; }
.main_icon_wrap {width:1440px; display:flex; justify-content: space-between; margin:0 auto;}
.main_icon_left {position:relative;width:120px; height:120px; display:block; vertical-align:middle; font-size:2rem; font-weight:700; line-height:1.3;border-radius:10px;background:#FFE77D;margin-right:30px;}
.main_icon_left:hover {background:#FFE057}
.main_icon_left:after {content:'';position:absolute;top:10px;right:-30px;width:1px;height:100px;display:block;background:#DFDFDF}
.main_icon_left img {width:100%}
.main_icon_right {width:calc(100% - 150px); display: flex; justify-content: space-between; align-items:center}
.main_dprice {position:relative;display:flex;flex-wrap:wrap; align-items:center;width:290px; height:120px; margin:0 30px; padding:33px 35px; border-radius:60px; background:#FFDEEB}
.main_dprice h3 {width:100%;font-size:2rem;font-weight:700;}
.main_dprice p {width:100%;font-size:1.4rem;color:#666;}
.main_dprice img {position:absolute;max-width:78px; top:19px;right:35px;animation: floating 2s ease-in-out infinite;}
@keyframes floating {
  0% {
    transform: translateY(2px);
  }
  50% {
    transform: translateY(-2px); /* 20px만큼 위로 이동 */
  }
  100% {
    transform: translateY(2px);
  }
}
.main_dprice:hover {background:#FFCBDF}
.main_icon {position:relative; color:#666; width:130px; text-align:center;}
.main_icon_title {position:relative;width:100%;text-align:center;}
.main_icon:hover > .main_icon_title{color:#DC0074;}
.main_icon:hover > .main_icon_title:after {position:absolute;display:block;text-align:center;content:'바로가기';width:100%;left:50%;transform:translate(-50%,0)}
.main_icon_img {position:relative;width:84px; height:84px;border-radius:50%;text-align:center;margin:0 auto;overflow:hidden;border:1px solid #fff;-webkit-transition:all 0.30s ease-in-out;
	-moz-transition:all 0.30s ease-in-out;
	-ms-transition:all 0.30s ease-in-out;
	-o-transition:all 0.30s ease-in-out;}
.main_icon_img:hover {	
	
	border:1px solid #dc0074;
}	
.main_icon_img_inner {
	position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
	height:100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	overflow:hidden;
	-webkit-transition:all 0.30s ease-in-out;
	-moz-transition:all 0.30s ease-in-out;
	-ms-transition:all 0.30s ease-in-out;
	-o-transition:all 0.30s ease-in-out;
}
.main_icon_img_inner img {
	width:100%;
	height:100%;
	overflow:hidden;
	-webkit-transition:all 0.30s ease-in-out;
	-moz-transition:all 0.30s ease-in-out;
	-ms-transition:all 0.30s ease-in-out;
	-o-transition:all 0.30s ease-in-out;
}
.main_icon_img img {width:100%;vertical-align:top;}

.main_icon_img:hover > .main_icon_img_inner img {
	transform: scale(1.1,1.1);
	-webkit-transition:all 0.30s ease-in-out;
	-moz-transition:all 0.30s ease-in-out;
	-ms-transition:all 0.30s ease-in-out;
	-o-transition:all 0.30s ease-in-out;
	overflow:hidden;
}
.main_icon_title {font-size:1.5rem; font-weight:500;margin-top:15px}
.main_icon_cont {word-break: keep-all;}

/* main price end */


/* main long banner */
.main_line_banner {
	position:relative;
	width:100%;
	height:60px;
	text-align:center;
	display:flex;
	flex-wrap:wrap;
	background:#FFF5C5;
	overflow:hidden;
	background:url('../images/top_ban00.jpg');
	background-position:center center;
	background-repeat:no-repeat;
	background-size:cover;
}
/*.main_line_banner:before {
	position:absolute;
	top:0;
	left:0;
	width:50%;
	height:100%;
	background:#ccebff;
	display:block;
	content:'';
	z-index:0;
}*/
.main_line_banner .swiper-slide {position:relative; display:flex; flex-wrap:nowrap;}
.main_line_banner .swiper-slide div {width:100%;}
.main_line_banner .swiper-slide div:nth-of-type(1) {text-align:right}
.main_line_banner .swiper-slide div:nth-of-type(2) {text-align:left}

.main_line_banner > .main_line_right {width:50%;text-align:left;}
.main_line_banner img {height:100%}

/* main long banner end */

/* main menu title */
.main_title1 {
	width:100%;
	position:relative;
	text-align:center;
	padding-bottom:20px;
}
.main_title1.port {width:292px;}
.main_title1 h1 {
	position:relative;
	font-size:3rem;
	font-weight:700;
}
.main_title1 h1 a {font-size:1.8rem; font-weight:700; margin-left:0;}
.main_title1 h2 {
	position:relative;
	font-size:3rem;
	font-weight:700;
}
.main_title1 h2 a {font-size:1.8rem; font-weight:700; margin-left:0;}
.main_title1.port h2 {font-size:3.2rem;text-align:left;}
.main_title1 p {
	position:relative;
	font-size:1.6rem;
	color:#666;
	margin-top:8px;
	margin-bottom:5px;
}
.main_title1 h5 a {
	position:absolute;
	right:0;
	bottom:-10px;
	font-size:1.4rem;
	line-height:1.8rem;
	z-index:2;
}
.main_title1 h5 img {vertical-align:middle;}
.main_title1 h5 a:hover {text-decoration:underline;}


.main_title2 {
	width:100%;
	position:relative;
}
.main_title2 h1 {
	position:relative;
	font-size:2.6rem;
	font-weight:700;
}
.main_title2 h1 a {font-size:1.8rem; font-weight:700; margin-left:0;}
.main_title2 p {
	position:relative;
	margin-top:8px;
	margin-bottom:5px;
	font-size:1.6rem;
	color:#666;
}
.main_title2 h5 a {
	position:absolute;
	right:0;
	bottom:0;
	font-size:1.4rem;
	line-height:1.8rem;
}
.main_title2 h5 a img {vertical-align:middle}
.main_title2 h5 a:hover {text-decoration:underline;}

/* main now */

/* 로딩 */

@keyframes bestload {
  0% {
    opacity: 0;
    display: none;
	translate: 0 -100px;
  } 
  50% {
    opacity: 0;
    display: block;
	translate: 0 -50px;
  }
  100% {
    opacity: 1;
    display: block;
	translate: 0 0;
  }
}
.slider {position: relative; width:100%;animation-duration:0s;animation-name: bestload;}
.slider .inner {overflow: hidden;}
.slider .swiper-slide {display:flex;flex-wrap:wrap;align-items:flex-start;}
.slider .list {width:272px!important;overflow: hidden; margin-bottom:10px;margin-right:20px;display:flex;flex-wrap:wrap;align-items:flex-start;visibility: hidden}
.slider.swiper-initialized .list {
    visibility: visible;
}
.slider .list:nth-of-type(5n) {margin-right:0;}
.main_best_img {width:272px;height:340px; position:relative;overflow:hidden;border-radius:5px;}
.main_best_img img {position:absolute;height:100%;top:0;left:calc((75% - 272px)/2)}
.main_best_text {position:relative; width:100%; padding:12px 0 30px}
.best_design:before {content:"#"}
.best_design {font-size:1.3rem; color:#999; margin-right:12px; display:inline-block;}
.best_design.good {border:1px solid #ff76be; color:#ff76be;}
.best_title {font-weight:700;font-size:1.6rem; word-break:keep-all; margin-top:4px;}
.best_order {color:#999; font-size:1.2rem; word-break:keep-all}
.main_best_all {position:absolute;right:0;top:24px;width:100px;}

.slider h2 {font-size:2.2rem;font-weight:700;margin-bottom:12px}
.slider h2 span {font-size:2.2rem;font-weight:700;color:#DC0074}
.slider > .swiper-button-wrap {
	position:absolute;
	top:0;
	right:0;
	width:82px;
	height:24px;
}
.slider > .swiper-button-wrap > .swiper-next,
.slider > .swiper-button-wrap > .swiper-prev {
	position:absolute;
	top:0;
	width:36px;
	height:36px;
	margin:0;
	cursor:pointer
}
.slider > .swiper-button-wrap > .swiper-next:after,
.slider > .swiper-button-wrap > .swiper-prev:after {font-size:0}
.slider > .swiper-button-wrap > .swiper-next {right:0;}
.slider > .swiper-button-wrap > .swiper-prev {left:0;}
.slider > .swiper-button-wrap > div:hover {background-color:#eee;}
.slider > .swiper-button-wrap > .swiper-button-disabled {cursor:default;opacity:0.4}
.slider > .swiper-button-wrap > .swiper-button-disabled:hover {background-color:transparent}

/* main now end */


/* main portfolio */


.main_title1 ul {margin-top:20px;}
.main_title1 ul li {
	width:200px;
	height:60px;
	border-radius:10px;
	font-size:1.8rem;
	text-align:left;
	color:#767676;
	padding:16px 20px;
	cursor:pointer
}
.main_title1 ul li.active {
	font-weight:700;
	color:#fff;
	background:#333;
}
.main_title1 ul li:hover,
.main_title1 ul li.active:hover {
	background:#F1F3F5
}
.main_title1 ul li.active:hover {color:#767676;font-weight:400;}

.main_port_flex {
	position:relative;
	display:flex;
	flex-wrap:nowrap;
	width:100%;
}

.main_port_wrap {
	position:relative;
	width:calc(100% - 292px);
}
.main_port_tab {
	position:relative;
	width:100%;
	display:none;
	flex-wrap:wrap;
	justify-content:space-between;
}
.main_port_tab.active {display:flex;}
.main_sample_wrap2 {
	position:relative;
	width:100%;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
}
.main_port_box {
	width:272px;
	display:inline-block;
	overflow:hidden;
	-webkit-transition:all 0.30s ease-in-out;
	-moz-transition:all 0.30s ease-in-out;
	-ms-transition:all 0.30s ease-in-out;
	-o-transition:all 0.30s ease-in-out;
	cursor:pointer;
	margin-bottom:50px;
}
.main_port_img {
	position:relative;
	width:272px;
	height:272px;
	overflow: hidden;
	position:relative;
	border-radius:5px;
}
.main_port_img_inner {
	position: absolute;
    top: 50%;
    left: 50%;
    width: 100%;
	height:100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
	overflow:hidden;
	-webkit-transition:all 0.30s ease-in-out;
	-moz-transition:all 0.30s ease-in-out;
	-ms-transition:all 0.30s ease-in-out;
	-o-transition:all 0.30s ease-in-out;
}
.main_port_img_inner img {
	width:100%;
	height:100%;
	overflow:hidden;
	-webkit-transition:all 0.30s ease-in-out;
	-moz-transition:all 0.30s ease-in-out;
	-ms-transition:all 0.30s ease-in-out;
	-o-transition:all 0.30s ease-in-out;
}
.main_port_text {
	position:relative;
	width:272px;
	padding-top:12px;
}
.main_port_title {
	font-size:1.6rem;
	font-weight:700;
	text-align:left;
}
.main_port_more {
	position:absolute;
	top:16px;
	right:10px;
	font-size:1.4rem;
	color:#666;
}

.main_port_box:hover {	
	-webkit-transition:all 0.30s ease-in-out;
	-moz-transition:all 0.30s ease-in-out;
	-ms-transition:all 0.30s ease-in-out;
	-o-transition:all 0.30s ease-in-out;
}
.main_port_box:hover > .main_port_img {border:1px solid #dc0074;}
.main_port_box:hover > .main_port_img >.main_port_img_inner img {
	transform: scale(1.1,1.1);
	-webkit-transition:all 0.30s ease-in-out;
	-moz-transition:all 0.30s ease-in-out;
	-ms-transition:all 0.30s ease-in-out;
	-o-transition:all 0.30s ease-in-out;
	overflow:hidden;
}
.main_port_box:hover .main_port_title {color:#DC0074;}
.main_port_more:hover {text-decoration:underline;}

.main_port_all {width:100%; text-align:center;}
button.btn_allview {width:272px; height:52px; border:1px solid #333; border-radius:5px; background:#fff; font-size:1.6rem;}
button.btn_allview:hover {background:#333; color:#fff;}

/* main portfolio end */



/* main ranking */
.main_rank_wide {width:100%; margin:10px auto;}
.main_rank_wrap {width:1440px; height:80px; display: flex; justify-content: space-between; line-height:80px; margin:0 auto;border:1px solid #DFDFDF;padding:0 120px;border-radius:10px;}
.ranking_title {
	position:relative;
	font-size:1.8rem;
	font-weight:700;
	width:285px;
	margin-right:20px;
}
.ranking_title span {color:#228BE6; font-size:inherit;font-weight:inherit;}
.main_ranking {
	position:relative;
	width:calc(100% - 305px);
	display: flex;
	justify-content: space-between;
}
.main_rank_row {
	position:relaitve;
	width:100%;
	height:20px;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	overflow:hidden;
}

.main_rank_row li {
	width:20%;
	height:20px;
}
.main_rank_row li p {
	display:inline-block;
	font-size:1.6rem;
	line-height:2rem;
	color:#666;
}
.main_rank_row li span {
	color:#228BE6;
	margin-right:15px;
	font-size:1.8rem;
	font-weight:900;
	font-style:oblique;
}
.main_rank_row li p:hover {text-decoration:underline;}

/* main ranking end  */

/* sample case */
.main_scase_box {
	position:relative;
	width:calc((100% - 60px)/3);
	margin-top:20px;
	margin-bottom:30px;
	text-align:center;
}
.main_scase_box > .scase_img {
	position:relative;
	width:100%;
	cursor:pointer;	
	overflow:hidden;
	border-radius:10px
}
.main_scase_box > .scase_img > .re img {position:relative; width:100%;vertical-align:top;}
.main_scase_box > .scase_img > .ex img {position:relative; width:70%;vertical-align:top; padding-top:5%;}
.main_scase_box > .scase_img > .re {
	position:relative;
	display:block;
}
.main_scase_box > .scase_img > .ex {
	position:absolute;
	width:26%;
	height:26%;
	bottom:20px;
	right:20px;
	background:#fff;
	z-index:2;
	border-radius:50%;
	overflow:hidden;
	text-align:center;
	-webkit-transition:all 0.15s ease-in-out;
	-moz-transition:all 0.15s ease-in-out;
	-ms-transition:all 0.15s ease-in-out;
	-o-transition:all 0.15s ease-in-out;
}

.main_scase_box > .scase_img > .ex p {
	position:absolute;
	z-index:3;
	font-size:1.2rem;
	color:#999;
	width:100%;
	left:0;
	text-align:center;
	bottom:12px;
	text-shadow:-1px 0 #fff, 0 1px #fff, 1px 0 #fff, 0 -1px #fff
}
.main_scase_box > .scase_img > .ex:hover {
	width:100%;
	height:100%;
	bottom:0;
	right:0;
	border-radius:0;
	-webkit-transition:all 0.15s ease-in-out;
	-moz-transition:all 0.15s ease-in-out;
	-ms-transition:all 0.15s ease-in-out;
	-o-transition:all 0.15s ease-in-out;
}
.main_scase_box > .scase_img > .ex:hover > p {display:none;}
.main_scase_box > .scase_img > .ex:hover > img {width:100%; padding:0;}
.main_scase_box h2 {font-size:1.8rem; font-weight:700;margin-top:20px;margin-bottom:6px}
.main_scase_box h3 {font-size:1.4rem; color:#666;}

/* sample case end */


/* main sample design */

.main_sample_wrap {
	position:relative;
	margin-bottom:20px
}
.main_sample_tab {
	display:table;
	padding:8px;
	border-radius:30px;
	background:#fff;
	margin:30px auto;
}
.main_sample_tab li {
	display:inline-block;
	font-size:1.6rem;
	font-weight:500;
	padding:8px 24px;
	border-radius:25px;
	text-align:center;
	margin-right:10px;
	cursor:pointer
}
.main_sample_tab li:nth-last-of-type(1) {margin-right:0}
.main_sample_tab li.active {background:#333;color:#fff;}
.main_sample_tab li:hover{background:#F1F3F5;color:#333;}

.main_sample_cate {position:absolute;height:0;visibility:hidden;}
.main_sample_cate.active {position:relative;height:auto;visibility:visible}
.main_sample_wrap .swiper-wrapper {transition-timing-function: linear !important;}
.main_sample_box {
	position:relative;
	width:184px;
	height:auto;
	text-align:center;	
	margin:0 8px;
}
.main_sample_img {
	position:relative;
	width:184px;
	height:268px;
	overflow:hidden;
	-webkit-transition:all 0.30s ease-in-out;
	-moz-transition:all 0.30s ease-in-out;
	-ms-transition:all 0.30s ease-in-out;
	-o-transition:all 0.30s ease-in-out;
	border-radius:5px;
	
}
.main_sample_img.border1 {border:1px solid #d6d6d6}
.main_sample_img > .main_sample_img_inner {
	position:absolute;
	top:50%;
	left:50%;
	width: 100%;
    height: 100%;
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    overflow: hidden;
    -webkit-transition: all 0.30s ease-in-out;
    -moz-transition: all 0.30s ease-in-out;
    -ms-transition: all 0.30s ease-in-out;
    -o-transition: all 0.30s ease-in-out;
}
.main_sample_img > .main_sample_img_inner > img {
	width:100%;
	height:100%;
	overflow:hidden;
	-webkit-transition:all 0.30s ease-in-out;
	-moz-transition:all 0.30s ease-in-out;
	-ms-transition:all 0.30s ease-in-out;
	-o-transition:all 0.30s ease-in-out;
}


.main_sample_box h2 {font-size:1.6rem;font-weight:700;margin-top:12px;}
.main_sample_box p {font-size:1.4rem;color:#666;margin-top:4px;}

.main_sample_wrap2 > .main_sample_box {
	width:140px;
	display:inline-block;
	border:1px solid #eee;
	overflow:hidden;
	-webkit-transition:all 0.30s ease-in-out;
	-moz-transition:all 0.30s ease-in-out;
	-ms-transition:all 0.30s ease-in-out;
	-o-transition:all 0.30s ease-in-out;
	cursor:pointer;
	margin-bottom:10px;
	position:relative;
}
.main_sample_wrap2 > .main_sample_box > .main_sample_img {
	position:relative;
	width:140px;
	height:140px;
	overflow: hidden;
	position:relative;
	-webkit-transition:all 0.30s ease-in-out;
	-moz-transition:all 0.30s ease-in-out;
	-ms-transition:all 0.30s ease-in-out;
	-o-transition:all 0.30s ease-in-out;
}
.main_sample_all {width:100%; text-align:center; margin-top:50px;}
/* main sample design end */


/* main bottom banner */

.main_wide_banner {width: 100%;overflow: hidden;background:#032e51;text-align:center}
.main_wide_banner img {width:100%;vertical-align:top;}
/* main bottom banner end */



/* main banners */

.main_btn_wrap {width:100%; display: flex; justify-content: space-between; margin:50px 0;}
.main_btn_left {width:560px; height:72px; background: #d80d79; color:#fff; padding:20px; position:relative;}
.main_btn_right {width:560px; height:72px; background: #032e51; color:#fff; padding:20px; position:relative;}
.small_text {display:inline-block; font-size:1.1rem; max-width:200px; line-height: 130%; vertical-align: middle; margin:0 10px;}
.big_text {display:inline-block; font-size:2rem; font-weight:700; vertical-align: middle;}
.right {float:right;}
.left {float:left;}
.btn_arrow_left {position:absolute; left:20px; top:25px; line-height:22px;}
.btn_arrow_right {position:absolute; right:20px; top:25px; line-height:22px;}
.main_banner_wrap {width:100%; display: flex; justify-content: space-between; margin:50px 0;}
.main_banner {width:560px; height:310px; background: #ddd; overflow: hidden;}





#mdLogin, #mdJoin {display: none;}







.bubble { 
    position: absolute;
    left:216px;
    top:-8px;
    -moz-animation: bubble 1.5s infinite linear;
    -webkit-animation: bubble 1.5s infinite linear; 
    -o-animation: bubble 1.5s infinite linear; 
    animation: bubble 1.5s infinite linear;
}
@-webkit-keyframes 
bubble { 
    0%, 100% { top: -8px; } 
    50% { top: -14px; } 
}
@-o-keyframes 
bubble { 
    0%, 100% { top: -8px; } 
    50% { top: -14px; } 
}
@-moz-keyframes 
bubble { 
    0%, 100% { top: -8px; } 
    50% { top: -14px; } 
}
@-o-keyframes 
bubble { 
    0%, 100% { top: -8px; } 
    50% { top: -14px; } 
}
@keyframes 
bubble { 
    0%, 100% { top: -8px; } 
    50% { top: -14px; } 
}