/****************************************************************************************************
Note :공통스타일
Name :김성주
Date :2015.08
****************************************************************************************************/
/* Reset */
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button{margin:0;padding:0;-webkit-text-size-adjust:none}
body,input,textarea,select,button,table{font-family:'나눔고딕',NanumGothic,'맑은 고딕','Malgun Gothic','돋움',Dotum,'굴림',Gulim,Helvetica,AppleGothic,sans-serif}
a{text-decoration:none;color:#000;}

img,fieldset{border:0}
img{vertical-align:middle;}
ul,ol{list-style:none}

/* 기본요소정의 */
.border-box {box-sizing:border-box;-moz-box-sizing:border-box;-webkit-box-sizing:border-box;-o-box-sizing:border-box}
.dis-block {display:block}
.dis-inblock {display:inline-block}
.dis-none {display:none}
.fl-left {float:left}
.fl-right {float:right}
.txt-right {text-align:right}
.posi-re {position:relative}
.posi-ab {position:absolute}
.posi-fi {position:fixed !important;}
.cl-both {clear:both}
.wrap h1,.wrap h2 {font-style:normal;font-weight:normal;text-indent:0;height:100%;font-size:12px;color:#333}/*앨범뷰 전역선언 무시*/
.wrap a.btn {display:block;box-sizing:border-box;padding:15px;margin-top:15px;text-align:center;font-size:140%;border-radius:2px}
.wrap .theme-red {background-color:rgba(221, 85, 85, 1);color:#fff}
.wrap .theme-whi {background-color:rgba(255, 255, 255, 1);color:#dd5555;border:1px solid #dbe6ec}
.wrap .side-mar {margin:5px}
.wrap .input-area {box-sizing:border-box;width:100%;padding:10px;font-size:160%;border:1px solid #dbe6ec;border-radius:2px;-webkit-appearance:none;background-color:#fff}
.wrap .theme-more {background-color:rgba(255, 255, 255, 0.5);color:#dd5555;border:1px solid #dbe6ec}
.wrap a+a.side-mar {margin-top:0}

.page:after {display:block;clear:both;content:''}
nav:not(.mm-menu) {display: none}/*nav에 mm-menu 클래스요소 무시*/
body {background-color:rgba(240, 246, 247, 1)}
body .wrap {font-size:12px;color:#333;line-height:1.2;padding:0;margin:0 auto}


/*Gnb and Search*/
.header {position:fixed;width:100%;top:-82px;z-index:3}
.top-arrow {width:80px;height:17px;margin:auto;background-color:rgba( 0, 0, 0, 0.3);
    -webkit-border-radius: 0 0 5px 5px;
	-moz-border-radius: 0 0 5px 5px;
	border-radius: 0 0 5px 5px;
	filter: alpha(opacity=90);
	opacity: .9;
	text-align:center;
	padding-top: 5px; 
	cursor:pointer;
}

.b-arrow {
    width:100%;
    text-align:center;
    position:fixed;
	bottom:0;
}	

.bottom-arrow {width:80px;height:25px;margin:0 auto;background-color:rgba( 0, 0, 0, 0.3);
    -webkit-border-radius: 5px 5px 0 0;
	-moz-border-radius: 5px 5px 0 0;
	border-radius: 5px 5px 0 0;
	filter: alpha(opacity=90);
	opacity: .9;
	text-align:center;
	padding-top: 5px; 
	cursor:pointer;
}

header.gnb {border-bottom:1px solid #EFEFEF}
.gnb {left:0;top:0;width:100%;background-color:rgba(255, 255, 255, 1);z-index:1}
.gnb h1 {height:45px;line-height:45px;text-align:center;}
.gnb h1 a {color:#dd5555;font-size:150%}
.gnb a:nth-child(2),.gnb a:nth-child(3) {top:0;height:45px;width:45px;text-indent:-9999px}
.gnb a:nth-child(2) {left:0;background:url('/images/ico_menu.png') no-repeat 50% 50%;background-size:19px}/*메뉴버튼*/
.gnb a:nth-child(3) {right:0;background:url('/images/ico_sch.png') no-repeat 50% 50%;background-size:17px}/*검색버튼*/
.gnb div {top:0;left:0;width:100%;height:45px;background-color:rgba(255, 255, 255, 1)}
.gnb div span {top:0;right:0;height:45px;width:45px;background-color:rgba(255, 255, 255, 1)}
.gnb div a {height:45px;width:45px;text-indent:-9999px;background:url('/images/ico_clear.png') no-repeat 50% 50%;background-size:17px}
.gnb div input{width:100%;height:35px;line-height:35px;padding:8px 55px 8px 10px;margin:5px;border:none;-webkit-appearance:none}
.gnb div .input_blur {background:transparent url('/images/txt_sch.png') no-repeat 10px 50%;background-size:auto 16px}
.gnb div .input_focus {background-color:rgba(240, 246, 247, 1);font-size:140%}

/*Profile*/
nav#menu {z-index:2} 
#menu .profile {background-color:rgba(221,85,85,1);text-indent:0;padding-left:35px;}
#menu .profile p:nth-child(1) {right:15px;top:8px;width:36px;height:36px}
#menu .profile p:nth-child(1) img {width:36px;height:36px;border-radius:50%}
#menu .profile p:nth-child(2) {height:80px;padding-top:15px}
#menu .profile span {font-size:130%;color:#fff}
#menu .profile a {border:none;background-color:rgba(255,255,255,0.2);border-radius:5px;margin:10px 10px 0 0;padding:5px 10px;color:#fff;text-align:center;line-height:100%;font-weight:normal}
#menu .profile a:nth-child(2){margin-left:-3px}
#logStatusOut {background-color:rgba(221,85,85,1) !important; color:#fff !important;}

/*Tabmenu*/
.tab {left:0;top:45px;width:100%;background-color:rgba(255, 255, 255, 1);box-shadow:0 1px 5px #d2d2d2;}
.tab ul {height:36px;width:98%;margin:0 auto}
.tab ul li {width:33.3333%;line-height:36px;font-weight:bold;text-align:center;font-size:130%}
.tab ul a {height:36px;color:#555}
.tab ul a.on {border-bottom:2px solid #dd5555;color:#dd5555;line-height:34px}

/*Album list*/
.ctitle {left:0;top:45px;width:100%;height:36px;color:#555;background-color:rgba(255, 255, 255, 1);box-shadow:0 1px 5px #d2d2d2;line-height:36px;font-weight:bold;text-align:center;font-size:130%}
.alist{font-size:110%}
.alist section {width:50%}
.alist article {width:95%;background-color:rgba(255, 255, 255, 1);margin:0 auto 15px auto;box-sizing:border-box;box-shadow:0 1px 3px #d2d2d2}
.alist article h1 {font-weight:bold;padding:10px 5px 5px;font-size:110%}
.alist article img {width:100%;vertical-align:top}
.alist article p {padding:0 5px;line-height:1.5}
.alist article h1+p {color:#dd5555}
.alist article p:last-child {padding-bottom:10px;color:#555}
.alist article div+p{font-weight:bold;font-size:110%;margin-top:10px;color:#333;line-height:1.15}
.no-data {width:90%;margin:0 auto;padding-top:60px;color:#82929b;font-size:22px;text-align:center}
.no-data img{width:160px}

/*Member*/
.member {width:95%;margin:0 auto;display:block}
.member h1 {font-size:200%;text-align:center;padding-bottom:15px;color:#82929b}
.member label {font-size:140%;padding:15px 0 50px}
.member input {box-sizing:border-box;width:100%;padding:10px;font-size:160%;border:1px solid #dbe6ec;border-radius:2px}
.member .input_blur_id {background:transparent url('/images/txt_id.png')}
.member .input_blur_pw {background:transparent url('/images/txt_pw.png')}
.member .input_blur_pwre {background:transparent url('/images/txt_pwre.png')}
.member .input_blur_name {background:transparent url('/images/txt_name.png')}
.member .input_blur_hp {background:transparent url('/images/txt_hp.png')}
.member .input_blur_pw_pre {background:transparent url('/images/txt_pw_pre.png')}
.member .input_blur_pw_new {background:transparent url('/images/txt_pw_new.png')}
.member .input_blur_pw_newre {background:transparent url('/images/txt_pw_newre.png')}
.member input[type="text"],.member input[type="password"] {-webkit-appearance:none;background-size:auto 18px;background-repeat:no-repeat;background-position:10px 50%;background-color:#fff}
.member input[type="checkbox"] {border:1px solid #d4dfe6;width:20px;height:20px;margin-right:10px;display:inline-block;vertical-align:middle}
.member input[type="button"] {text-align:left;-webkit-appearance:none;background:url('/images/ico_more.png') no-repeat 95% 50%;background-color:#fff;background-size:auto 15px;color:#82929b}
.member input[readonly]{color:#82929b}
.member:after {display:block;clear:both;content:''}
.member .log-error {padding:10px 0;color:#dd5555}

/*About*/
.about article {background-color:#fff;padding:20px 10px 20px 110px;font-size:130%;line-height:130%;border-top:1px solid #dbe6ec}
.about p+article {margin-top:10px}
.about article>p {left:10px;top:20px}
.about article p:last-child {margin-top:10px}
.about article img {width:80px;height:80px;border:1px solid #dbe6ec}
.about strong {color:#82929b;padding-bottom:10px}
.about p:nth-child(2) strong:after {display:inline-block;width:20px;text-align:center;content:' / '}
.about article p:nth-child(2) {font-weight:bold;font-size:110%}
.about input[readonly]{color:#333}


/*Board and Webview*/
.board {padding-top:55px}
.board>section {background-color:#fff;padding:10px 5px;margin:0 5px}
.board h1 {font-size:160%;padding-bottom:5px;border-bottom:1px solid #cedfe2}
.board h1+p {color:#555;padding:10px 0 20px;font-size:120%}
.board header+p {font-size:130%;line-height:150%;padding-bottom:20px;border-bottom:1px solid #cedfe2}
.board header+p img {margin-bottom:20px;max-width:100%;}
.board a.btn {display:inline-block;padding:10px 15px;margin:10px 0 0 5px;font-size:120%;border-radius:2px}
.webview {padding-top:45px;}
.webview+.page {padding-top:0}

/*Comment*/
.wrap .cmt {margin:10px 5px 0;background-color:#fff;padding:10px 5px}
.wrap .cmt input {box-sizing:border-box;width:80%;padding:0 10px;margin-right:5px;height:40px;line-height:40px;font-size:120%;border:1px solid #dbe6ec;border-radius:2px;-webkit-appearance:none;background-color:#fff}
.wrap .cmt a.btn {margin:0;padding:0 15px;height:40px;line-height:40px;vertical-align:top;display:inline-block;font-size:120%;border-radius:2px}
.wrap .cmt a.del {top:0;right:0;width:40px;height:40px;text-indent:-9999px;background:url('/images/ico_clear.png') no-repeat 50% 50%;background-size:15px}
.wrap .cmt header {padding-bottom:15px}
.wrap .cmt header p {font-size:120%;padding:0 0 10px 0}
.wrap .cmt article {position:relative;padding:10px 0;border-bottom:1px solid #cedfe2;min-height:40px}
.wrap .cmt article:after {display:none;clear:both;content:''}
.wrap .cmt article p {margin:0 30px 0 50px}
.wrap .cmt article p:first-child {position:absolute;box-sizing:border-box;margin:0;border:1px solid #cedfe2}
.wrap .cmt article p:first-child img{width:40px;height:40px}
.wrap .cmt article p:nth-child(2) {font-size:120%;line-height:140%}
.wrap .cmt article p:nth-child(3) {font-size:110%;color:#555;padding-top:3px}
.wrap .cmt-more {margin:0 5px 60px;background-color:#fff;padding:0 5px 15px;text-align:right;font-size:14px}
.wrap .cmt-more img {height:14px;vertical-align:middle;margin-left:5px;margin-top:-2px}

/*Sns*/
#sharelayer {height:60px}
    .sns-share {width:100%;}
    nav.sns {width:100%;bottom:0;background-color:rgba(0, 0, 0, 0);height:60px;display:block; z-index:1010;margin:0 auto;text-align:left}
    nav.sns a {display:inline-block;height:60px;width:60px;margin:5px 0 5px 5px;text-indent:-9999px;border-radius:30px;-webkit-border-radius: 30px;	-moz-border-radius: 30px;}
    nav.sns .btn_band {background:url('/images/sns_band.png');background-size:60px;}
    nav.sns .btn_email {background:url('/images/sns_email.png');background-size:60px}
    nav.sns .btn_fbook {background:url('/images/sns_facebook.png');background-size:60px}
    nav.sns .btn_kstory {background:url('/images/sns_kakaostory.png');background-size:60px}
    nav.sns .btn_ktalk {background:url('/images/sns_kakaotalk.png');background-size:60px}
    nav.sns .btn_renren {background:url('/images/sns_renren.png');background-size:60px}
    nav.sns .btn_sms {background:url('/images/sns_sms.png');background-size:60px}
    nav.sns .btn_twitter {background:url('/images/sns_twitter.png');background-size:60px}
    nav.sns .btn_url {background:url('/images/sns_urlcopy.png');background-size:60px}
    nav.sns .btn_wechat {background:url('/images/sns_wechat.png');background-size:60px}
    nav.sns .btn_weibo {background:url('/images/sns_weibo.png');background-size:60px;}
    .sns_btn {margin:0 auto ;width:100%;text-align:center;background-color:rgba(55, 58, 67, 1);border-top:1px solid #696B72;height:48px;padding-top:6px}
    .sns_btn img {width:48px;margin:0 10px;}
    nav.sns .sns-more {text-indent:0;text-align:center;line-height:60px}
    nav.sns .sns-more img {width:20px}


@media screen and (min-width : 601px) { 
/*601px ~ */
.tab ul{width:100%;max-width:576px}
.page{max-width:576px;margin:0 auto}
.wrap .cmt input {width:491px}
}
@media screen and (max-width : 320px) {
.wrap .cmt input {width:235px}
}
@media screen and (min-width : 321px) and (max-width : 380px) {
.wrap .cmt input {width:275px}
}
@media screen and (min-width : 381px) and (max-width : 400px) {
.wrap .cmt input {width:295px}
}
@media screen and (min-width : 401px) and (max-width : 420px) {
.wrap .cmt input {width:315px}
}

@media screen and (max-width:520px){
    #sharelayer {height:40px}
    .sns-share {height:40px;width:100%;}
    nav.sns {width:100%;background-color:rgba(0, 0, 0, 0);bottom:0;height:40px;display:block;padding:0 2px;z-index:1010;margin:0 auto;text-align:left}
    nav.sns a {display:inline-block;height:40px;width:40px;margin:5px 0 5px 5px;text-indent:-9999px;border-radius:20px;-webkit-border-radius: 20px;	-moz-border-radius: 20px;}
    nav.sns .btn_band {background:url('/images/sns_band.png');background-size:40px;}
    nav.sns .btn_email {background:url('/images/sns_email.png');background-size:40px}
    nav.sns .btn_fbook {background:url('/images/sns_facebook.png');background-size:40px}
    nav.sns .btn_kstory {background:url('/images/sns_kakaostory.png');background-size:40px}
    nav.sns .btn_ktalk {background:url('/images/sns_kakaotalk.png');background-size:40px}
    nav.sns .btn_renren {background:url('/images/sns_renren.png');background-size:40px}
    nav.sns .btn_sms {background:url('/images/sns_sms.png');background-size:40px}
    nav.sns .btn_twitter {background:url('/images/sns_twitter.png');background-size:40px}
    nav.sns .btn_url {background:url('/images/sns_urlcopy.png');background-size:40px}
    nav.sns .btn_wechat {background:url('/images/sns_wechat.png');background-size:40px}
    nav.sns .btn_weibo {background:url('/images/sns_weibo.png');background-size:40px;}
    .sns_btn {margin:0 auto ;width:100%;text-align:center;background-color:rgba(55, 58, 67, 1);border-top:1px solid #696B72;height:48px;padding-top:6px}
    .sns_btn img {width:48px;margin:0 10px;}
    nav.sns .sns-more {text-indent:0;text-align:center;line-height:40px}
    nav.sns .sns-more img {width:20px}
}


/* 모바일진 CSS 추가 */
.white-shodow{
  text-shadow: 1px 1px #FFFFFF, 1px 1px #FFFFFF, 1px 1px #FFFFFF, 1px 1px #FFFFFF;
  -moz-text-shadow: 1px 1px #FFFFFF, 1px 1px #FFFFFF, 1px 1px #FFFFFF, 1px 1px #FFFFFF;
  -webkit-text-shadow: 1px 1px #FFFFFF, 1px 1px #FFFFFF, 1px 1px #FFFFFF, 1px 1px #FFFFFF;  
}

.black-shadow {
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.black-shadow-md {
-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
box-shadow: 0 5px 5px rgba(0, 0, 0, 0.1);
}


.m-top-contents {
	margin-top:5px;
	padding: 15px;
	margin-bottom: 30px;
	background-color: #FFFFFF;
	border: 1px solid #ccc;
	-webkit-border-radius: 8px;
	-moz-border-radius: 8px;
	border-radius: 8px;
	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.content_m {
	margin-top:20px;
	padding: 15px;
	margin-bottom: 20px;
	background-color: #FCFCFC;
	border: 1px solid #ccc;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
	-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

.m_content_wrap {
	padding: 10px;
	margin-bottom: 20px;
	background-color: #FFFFFF;
	border: 1px solid #ccc;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
	box-shadow: 0 5px 5px rgba(0, 0, 0, 0.05);
}

.m_border_input {
	background-color: #FFFFFF;
	border: 1px solid #dddddd;
	-webkit-border-radius: 4px;
	-moz-border-radius: 4px;
	border-radius: 4px;
	-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
	-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
	box-shadow: 0 5px 10px rgba(0, 0, 0, 0.05);
}
.select-control {
  width: 100%;
  height: 34px;
  padding: 6px 12px;
  font-size: 14px;
  line-height: 1.42857143;
  color: #555;
  background-color: #fff;
  background-image: none;
  border: 1px solid #ccc;
  border-radius: 4px;
  -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
          box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
  -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
       -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
          transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}

.shadow {
-webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}
.bottom_shadow {
-webkit-box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.1);
-moz-box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.1);
box-shadow: 0 3px 8px 0px rgba(0, 0, 0, 0.1);
}
.t_raudis {
-webkit-border-radius: 7px 7px 7px;
-moz-border-radius: 7px 7px  7px;
border-radius: 7px 7px  7px;
}
.txt-shadow {text-shadow: 2px 2px 2px  #DDD;}
.b-shadow {
  -webkit-box-shadow: 0 6px 6px -6px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 0 6px 6px -6px rgba(0, 0, 0, 0.3);
  box-shadow: 0 6px 6px -6px rgba(0, 0, 0, 0.3);
}
.r_raudis {
	border: 1px solid #FFF;
	-webkit-border-radius: 0px 0px 7px 7px;
	-moz-border-radius: 0px 0px  7px  7px;
	border-radius: 0px 0px  7px 7px;
	 filter: alpha(opacity=90);
	opacity: .9;
}