@CHARSET "UTF-8";

/* side-nav */

#side-nav {background:#f7f9fd; padding: 0;}
@media (min-width: 900px){#side-nav {border-right: 1px solid #dde1e7;}}
#side-nav-inner {width:280px;}

.join{overflow:hidden;}
.join li{float:left; width:50%;}
.join li a{color:#fff !important; font-size:15px; display:block; padding:22px 0; text-align:center;}
.join li a img{height:20px; margin-top:-4px; margin-right:2px;}

.basic-nav{overflow:hidden; background:#fff;}
.basic-nav li{width:33%; float:left; text-align:center; border-bottom:1px solid #edecf2;}
.basic-nav li:nth-child(2){width:34%;}
.basic-nav li a{display:block; padding:26px 0; height:120px;}
/* .basic-nav li a{border-left:1px solid #edecf2;} */
.basic-nav img{width:46px; display:block; margin:0 auto 8px;}

.other-nav{border-bottom:1px solid #e4e5e9;}
.other-nav li{background:#fff; margin:0; position:relative;}
.other-nav li+li{border-top:1px dotted #eee;}
.other-nav li a{padding:16px 15px 14px;}
.other-nav img{height:24px; margin-right:3px; margin-top:-4px;}

.other-nav img.btn_arrow {
	position: absolute;
	height:14px;
	right: 0.8rem;
	top: 1.3rem;
}

#side-nav-inner ul li a:hover,
#side-nav-inner ul li a:active{color:#555;}

#side-container{background:#fff;}

.top-container{
	background-image:url("../img/common/top_bg.jpg");
	background-size: cover;
	background-attachment: fixed;
}

.top-container-inner, .join, .signup-btn, .setting-nav li.setting-id{
	background: -moz-linear-gradient(-45deg,  rgba(43,134,240,0.9) 0%, rgba(179,154,234,0.9) 50%, rgba(255,173,227,0.9) 100%);
	background: -webkit-linear-gradient(-45deg,  rgba(43,134,240,0.9) 0%,rgba(179,154,234,0.9) 50%,rgba(255,173,227,0.9) 100%);
	background: linear-gradient(135deg,  rgba(43,134,240,0.9) 0%,rgba(179,154,234,0.9) 50%,rgba(255,173,227,0.9) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#e62b86f0', endColorstr='#e6ffade3',GradientType=1 );
	position:relative;
}

#snap-container{
	position:fixed;
	top:0;
	left:0;
	right:0;
	z-index:10;
	-webkit-transition: all 0.5s;
	-moz-transition: all 0.5s;
	transition: all 0.5s;
}

#snap-container *{
	-webkit-transition: all 0.5s;
    -moz-transition: all 0.5s;
    transition: all 0.5s;
}

#scroll-title{display:none; float:left;}
#scroll-title img{height:38px; width:auto;}

.snap-header{
	background:#fff;
	-moz-box-shadow: 0px 10px 14px -7px rgba(108,116,117,0.3);
	-webkit-box-shadow: 0px 10px 14px -7px rgba(108,116,117,0.3);
	box-shadow: 0px 10px 14px -7px rgba(108,116,117,0.3);
}
.snap-header #scroll-title, #subpage-title{display:block; padding:13px; margin-left:55px;}

.header-icon{width:26px;}


#side-nav-btn{padding:10px 10px;}
.snap-header #side-nav-btn, .subpage-side-nav-btn{
	-webkit-border-radius:4;
	-moz-border-radius:4;
	border-radius:4px;
	-webkit-box-shadow: 0px 0px 8px rgba(5,8,39,0.15);
	-moz-box-shadow: 0px 0px 8px rgba(5,8,39,0.15);
	box-shadow: 0px 0px 8px rgba(5,8,39,0.15);
}

@media (min-width: 900px){
	#snap-container{left:280px;}
	.snap-header #scroll-title, #subpage-title{margin-left:5px;}
}


#top-nav{float:right; margin-top:9px; margin-right:10px;}
#top-nav li{float:left; padding:10px 5px;}
.search-btn{background-image:url("../img/common/icon/search_icon.png");}
.mypage-btn{background-image:url("../img/common/icon/mypage_icon.png");}
.share-btn{background-image:url("../img/common/icon/share_icon.png");}
.bookmark-btn{background-image:url("../img/common/icon/like_icon.png");}
.bookmark-btn-active{background-image:url("../img/common/icon/like_active_icon.png");}
.search-btn, .mypage-btn, .share-btn, .bookmark-btn, .bookmark-btn-active{
	width:26px; 
	height:26px;
	text-indent:-9999px;
	background-position:center 0px;
	background-size:100%;
	display:block;
	cursor:pointer;
}
.snap-header .search-btn, 
.snap-header .mypage-btn, 
.snap-header .share-btn, 
.snap-header .bookmark-btn, 
.snap-header .bookmark-btn-active{
	background-position:center -26px; 
}

.subpage-top-nav .search-btn, 
.subpage-top-nav .mypage-btn, 
.subpage-top-nav .share-btn, 
.subpage-top-nav .bookmark-btn, 
.subpage-top-nav .bookmark-btn-active{
	background-position:center -26px; 
}

.snap-header #side-nav-btn, .subpage-side-nav-btn{
	background: rgb(43,134,240);
	background: -moz-linear-gradient(-45deg, rgba(43,134,240,1) 0%, rgba(179,154,234,1) 50%, rgba(255,173,227,1) 100%);
	background: -webkit-linear-gradient(-45deg, rgba(43,134,240,1) 0%,rgba(179,154,234,1) 50%,rgba(255,173,227,1) 100%);
	background: linear-gradient(135deg, rgba(43,134,240,1) 0%,rgba(179,154,234,1) 50%,rgba(255,173,227,1) 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#2b86f0', endColorstr='#ffade3',GradientType=1 );
}


.footer{
	background: #f7f9fd;
	border-top:3px solid #e4e5e9;
	padding:20px;
}

.footer img{height:34px; margin:auto; display:block;}
.footer p{color:#c2c3c5; font-size:10px; text-align:center; padding:5px 0;}

.none {position:absolute;visibility:hidden;width:0;height:0;overflow:hidden;font-size:0;display:none;}

/* space line */
.space00 {clear:both;font-size:0;line-height:0;height:0px;}
.space05 {clear:both;font-size:0;line-height:0;height:5px;}
.space10 {clear:both;font-size:0;line-height:0;height:10px;}
.space15 {clear:both;font-size:0;line-height:0;height:15px;}
.space20 {clear:both;font-size:0;line-height:0;height:20px;}
.space25 {clear:both;font-size:0;line-height:0;height:25px;}
.space30 {clear:both;font-size:0;line-height:0;height:30px;}