@charset "utf-8";
@import url("default.css");
@import url("basic.css");
@import url("popup.css");
@import url("mobile.css");

/* publishing Kim Sang Mi 2015-10-23 */

/*** ie7 안내문구 ***/
.ie-warp { width:100%; background-color:#00ccff; }
.ie-warp .ie-area { position:relative; width:1000px; height:150px; margin:0 auto; padding-top:30px; margin-bottom:30px; }
.ie-warp .ie-area .ie-logo { float:left; width:10%; border:0px solid yellow; }
.ie-warp .ie-area .ie-info { float:right; width:88%; font-size:18px; color:#fff; border:0px solid blue; }
.ie-warp .ie-area .ie-info strong { font-size:25px; }
.ie-warp .ie-area .ie-info a { color:#fff; font-weight:bold; text-decoration:underline; }

/************** 공통 **************/

#header { position:absolute; z-index:101; top:0; left:0; width:100%; height:60px; background:#fff; box-shadow: 1px 4px 8px rgba(0,0,0,0.15); border:0px solid blue;}
#header .gnb { position:relative; width:1280px; height:60px; margin:0 auto; background:#fff; border:0px solid green; }
/* media queries */
@media screen and (max-width:1280px) {
    #header .gnb { width:950px; }
}
#header .gnb h1 { position:absolute; top:11px; left:0; border:0px solid red;}
#header .gnb h1 a { display:inline-block; width:100px; height:40px; text-indent:-9999px; background:url('../../images/new_storysom/common/logo_som.png') no-repeat; }
/* 브랜드 로고들*/
#header .gnb span.lvmh { position:absolute; top:16px; left:0; }
#header .gnb span.credu { position:absolute; top:10px; left:0; }
#header .gnb span.kbiz { position:absolute; top:19px; left:0; }
#header .gnb span.pizzahut { position:absolute; top:16px; left:0; }
#header .gnb span.agabang { position:absolute; top:19px; left:0; }
#header .gnb span.benefit { position:absolute; top:11px; left:0; }
#header .gnb span.himo { position:absolute; top:19px; left:0; }
#header .gnb span.gyeongnam { position:absolute; top:11px; left:0; }
#header .gnb span.seoulcity { position:absolute; top:11px; left:0; }

#header .gnb ul.top-info { position:absolute; top:18px; right:0; border:0px solid red; }
#header .gnb ul.top-info li { float:left; font-size:13px; padding-right:25px; }
#header .gnb ul.top-info li a { color:#787878; }
#header .gnb ul.top-info li a:hover { color:#373737; }
#header .gnb ul.top-info li.logout { background:url('../../images/new_storysom/common/bg_info_bar.gif') 60px 5px no-repeat; }
#header .gnb ul.top-info li:last-child { padding:3px 0 0 0; }



/* 전체메뉴 서브 */
#menu-all { display:none; z-index:80; position:absolute; top:60px; left:0; width:100%; height:450px; background:url('../../images/new_storysom/common/bg_menu_all.jpg') no-repeat;
    overflow:hidden; box-shadow: 0px 6px 5px rgba(0,0,0,0.2); }
.m-all-area { width:1200px; margin:0 auto; margin-top:70px; }
.m-all-area h3 { text-align:center; font-size:25px; color:#474747; margin-bottom:45px; }
.m-all-area ul li.sitemap-area { float:left; width:170px; height:218px; background:#fff; border-top:2px solid #2d7026; margin-right:36px; }
.m-all-area ul li.sitemap-area:last-child { margin-right:0; }
.m-all-area ul.sitemap-list { width:140px; margin:0 auto; }
.m-all-area ul.sitemap-list li { display:block; height:30px; line-height:30px; width:100%; text-align:center; border:0px solid red; }
.m-all-area ul.sitemap-list li:hover { background:#2d7026; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; transition: all 0.3s; }
.m-all-area ul.sitemap-list li a { display:block; }
.m-all-area ul.sitemap-list li a:hover { color:#fff }
.m-all-area ul.sitemap-list li.depth1 { height:45px; line-height:45px; font-weight:bold; margin-bottom:10px; border-bottom:1px solid #d9d9d9; }
.m-all-area ul.sitemap-list li.depth1 a { display:block; color:#2d7026; }
.m-all-area ul.sitemap-list li.depth1:hover { background:0; }
/* media queries */
@media screen and (max-width:1280px) {
    .m-all-area { width:950px; border:0px solid red; }
    .m-all-area ul li.sitemap-area { width:15%; margin-right:15px; }
    .m-all-area ul.sitemap-list { width:85%; }
}

/*#footer { clear:both; position: relative; width:100%; margin:0 auto; height:425px; border:0px solid yellow;
    padding-top:70px;
    overflow: hidden;
    background-size: cover;
    background-position: center center;*/
}

.footer-bg1 { background:url('../../images/new_storysom/common/bg_footer_01.jpg') #525259; }
.footer-bg2 { background:url('../../images/new_storysom/common/bg_footer_02.jpg') #525259; }
.footer-bg3 { background:url('../../images/new_storysom/common/bg_footer_03.jpg') #525259; }
.footer-bg4 { background:url('../../images/new_storysom/common/bg_footer_04.jpg') #525259; }

/*.f-content { position:relative; width:1200px; max-width:1280px; margin:0 auto; height:100%; color:#929296; border:0px solid red; }*/
/* media queries */

.sitemap-link { position:relative; }
.sitemap-link ul { width:180px; float:left; }
/* media queries */
@media screen and (max-width:1280px) {
    .sitemap-link ul { width:140px; }
}
.sitemap-link ul li { padding-bottom:8px; }
.sitemap-link ul li a { font-size:14px; }
.sitemap-link ul li a:hover { color:#c8c8c8 }
.sitemap-link ul li a.depth1 { color:#fff; }
.family-site { position:absolute; top:0; right:0; }
.f-site { width:105px; font-size:13px; background:transparent; color:#979797; border:1px solid #626262; padding:0 10px; }
.family-site select {
    -webkit-appearance: none;  /* 네이티브 외형 감추기 */
    -moz-appearance: none;
    appearance: none;
    background:url('../../images/new_storysom/common/ico_arrow.gif') 87px 13px no-repeat;  /* 화살표 모양의 이미지 */
}
.family-site select::-ms-expand {  /* IE 10, 11의 네이티브 화살표 숨기기 */
    display: none;
}
/*.f-content ul.policy { padding-top:20px; }
.f-content ul.policy li { float:left; padding-right:50px; font-size:14px; }
.f-content ul.policy li a:hover { color:#bdbdbd }
.f-content ul.policy li.pri-p a { color:#58cafd; }
.f-content ul.policy li.pri-p a:hover { color:#a3e2fe; }
.f-content a { color:#929296; }
.f-content .copy-area { position:absolute; bottom:40px; left:0; width:100%; color:#929296; }
.f-content .copy-area .logo { position:absolute; top:0; right:0; }
.f-content address { font-size:13px; line-height:21px; }
.f-content address a { letter-spacing:0; text-decoration:underline; }
.f-content address span.divi { padding:0 10px; }
.f-content address span.copy { letter-spacing:0px; }
.f-content address strong { color:#bdbdbd }*/

select {
    -webkit-appearance: none;  /* 네이티브 외형 감추기 */
    -moz-appearance: none;
    appearance: none;
    padding-right:20px;
    background:url('../../images/new_storysom/common/ico_arrow.gif') right center #fff no-repeat;  /* 화살표 모양의 이미지 */
}
select::-ms-expand {  /* IE 10, 11의 네이티브 화살표 숨기기 */
    display: none;
}

.web-info { display: none; }
/* media queries */
@media screen and (max-width:1280px) {
    .web-info { display:block; padding-top:50px; }
    .web-info p { text-align:center; font-size:2.8em; }
}



/************** 각 페이지 상단 탭메뉴 **************/

.tabmenu { position:relative; height:43px; width:1280px; margin:0 auto; }
/* media queries */
@media screen and (max-width:1280px) {
    .tabmenu { width:950px; }
}
.tabmenu ul { background:#fff; border-left:1px solid #cecece; *zoom:1; }
.tabmenu ul:after { content: "."; clear:both; display:block; height:0; visibility:hidden; }
.tabmenu ul li { float:left; display:inline; border-top:1px solid #cecece; border-bottom:1px solid #cecece; font-size:15px; height:43px; line-height:43px; width:20%; }
.tabmenu ul li.last { *width:19.9%; }

.tabmenu ul.m25 li { width:25%; }
.tabmenu ul.m25 li.last { *width:24.9%; }

.tabmenu ul.m33 li { width:33.33%; }
.tabmenu ul.m33 li.last { *width:33.9%; }

.tabmenu ul.m50 li { width:50%; }
.tabmenu ul.m50 li.last { *width:49.9%; }

.tabmenu ul.m0 li { width:100%; }

.tabmenu ul li.on { border-top:3px solid #27ade9; border-bottom:1px solid #fff; background:#fff; font-size:17px; font-weight:bold; }
.tabmenu ul li.on a,
.tabmenu ul li.on a:hover { color:#27ade9; }
.tabmenu ul li a { display:block; text-align:center; color:#a8a8a8; border-right:1px solid #cecece; }
.tabmenu ul li a:hover { color:#27ade9; text-decoration:none; }

/* 왼쪽정렬 탭메뉴 */
.tabmenu2 { position:relative; margin-bottom:25px; }
.tabmenu2 ul { border-left:1px solid #cecece; *zoom:1; border-bottom:1px solid #cecece; }
.tabmenu2 ul:after { content: "."; clear:both; display:block; height:0; visibility:hidden; }
.tabmenu2 ul li { float:left; display:inline; font-size:15px; height:43px; line-height:43px; min-width:100px; padding:0 20px; margin-bottom:-3px; background:#fcfcfc;
    border-top:1px solid #cecece; border-right:1px solid #cecece; border-bottom:1px solid #cecece;
}
.tabmenu2 ul li.on { border-top:3px solid #2d7026; border-bottom:1px solid #fff; background:#fff; font-size:17px; font-weight:bold; }
.tabmenu2 ul li.on a,
.tabmenu2 ul li.on a:hover { color:#2d7026; }
.tabmenu2 ul li a { display:block; text-align:center; color:#a8a8a8; }
.tabmenu2 ul li a:hover { color:#2d7026; text-decoration:none; }

/* 왼쪽정렬 탭메뉴 - 작은ver */
.tabmenu2-1 { position:relative; margin-bottom:5px; }
.tabmenu2-1 ul { border-left:1px solid #cecece; *zoom:1; border-bottom:1px solid #cecece; }
.tabmenu2-1 ul:after { content: "."; clear:both; display:block; height:0; visibility:hidden; }
.tabmenu2-1 ul li { float:left; display:inline; font-size:14px; height:30px; line-height:30px; width:16%;  background:#fcfcfc;
    border-top:1px solid #cecece; border-right:1px solid #cecece; }
.tabmenu2-1 ul li.on { solid #2d7026;  font-size:14px; background-color:#2d7026; color:#fff}
.tabmenu2-1 ul li.on a,
.tabmenu2-1 ul li.on a:hover { color:#fff; }
.tabmenu2-1 ul li a { display:block; text-align:center; color:#a8a8a8; }
.tabmenu2-1 ul li a:hover { color:#2d7026; text-decoration:none; }



/************** 버튼 스타일 **************/
/* 기본 */
.btn {
    border: none;
    background: none;
    cursor: pointer;
    /* padding: 2px 2px; */
    display: inline-block;
    outline: none;
    position: relative;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

.btn:after {
    content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}

/* Button 1 */
.btn-preview {
    width:68px;
    height:28px;
    line-height:28px;
    border:0px solid red;
    text-align:center;
    margin:6px 0 0 4px;
    color: #fff;
    background: #818893;
}
.btn-preview:hover,
.btn-preview:focus,
.btn-preview:active {
    color: #fff;
    background: #676f7b;
}


/* Button 2 */
.btn-send {
    /* width:274px;
    margin-top:10px;
    height:50px;
    line-height:50px;
    font-size:18px;
    font-weight:bold;
    text-align:center;
    background: #ea4028;
    color: #fff;
    box-shadow: 0 6px #c73622;
    -webkit-transition: none;
    -moz-transition: none;
    transition: none; */

    width:95%;
	margin:0 auto;
    height:55px;
    line-height:55px;
    font-size:17px;
    text-align:center;
    font-weight:300;

    display: block;
    margin-top:20px;
    /* margin: 1em;
    padding: 1em 2em; */
    border: none;
    background: #2d7026;
    color: inherit;
    vertical-align: middle;
    position: relative;
    -webkit-backface-visibility: hidden;
    -moz-osx-font-smoothing: grayscale;
}
.btn-send:focus {
    outline: none;
}
.btn-send > span {
    vertical-align: middle;
}

.btn-send-a {
    border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
}

.btn-send-a:hover,
.btn-send-a:focus,
.btn-send-a:active {
    color: #fff;
}

/* Moema : [전송하기] 버튼에 사용 */
.button--moema {
    color: #fff;
    -webkit-transition: background-color 0.3s, color 0.3s;
    transition: background-color 0.3s, color 0.3s;
}
.button--moema.button--inverted {
    background: #ECEFF1;
    color: #37474f;
}
.button--moema::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    bottom: -20px;
    right: -20px;
    background: inherit;
    z-index: -1;
    opacity: 0.4;
    -webkit-transform: scale3d(0.8, 0.5, 1);
    transform: scale3d(0.8, 0.5, 1);
}
.button--moema:hover {
    -webkit-transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    transition: background-color 0.1s 0.3s, color 0.1s 0.3s;
    color: #ECEFF1;
    background-color: #2d7026;
    -webkit-animation: anim-moema-1 0.3s forwards;
    animation: anim-moema-1 0.3s forwards;
}
.button--moema.button--inverted:hover {
    color: #ECEFF1;
    background-color: #2d7026;
}
.button--moema:hover::before {
    -webkit-animation: anim-moema-2 0.3s 0.3s forwards;
    animation: anim-moema-2 0.3s 0.3s forwards;
}
@-webkit-keyframes anim-moema-1 {
    60% {
        -webkit-transform: scale3d(0.8, 0.8, 1);
        transform: scale3d(0.8, 0.8, 1);
    }
    85% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes anim-moema-1 {
    60% {
        -webkit-transform: scale3d(0.8, 0.8, 1);
        transform: scale3d(0.8, 0.8, 1);
    }
    85% {
        -webkit-transform: scale3d(1.1, 1.1, 1);
        transform: scale3d(1.1, 1.1, 1);
    }
    100% {
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@-webkit-keyframes anim-moema-2 {
    to {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}
@keyframes anim-moema-2 {
    to {
        opacity: 0;
        -webkit-transform: scale3d(1, 1, 1);
        transform: scale3d(1, 1, 1);
    }
}



/* 전송 팝업용 버튼 */
.pop-btn1 {
	padding-left:40px;
	padding-right:15px;
    height:38px;
    line-height:38px;
    border:1px solid #aaa;
    /* margin:6px 0 0 4px; */
    color: #767676;
	border-radius:3px;
	font-size:13px; 
	color:#333
}
.pop-btn1:hover,
.pop-btn1:focus,
.pop-btn1:active {
    border:1px solid #2d7026;
}

.pop-btn1-1 {
    width:98px;
    height:37px;
    line-height:37px;
    border:1px solid #aaa;
    text-align:center;
    /* margin:6px 0 0 4px; */
    color: #333;
	font-size:13px;
	border-radius:3px;
}

.pop-btn2 {
    min-width:40px;
    height:32px;
    line-height:32px;
    border:1px solid #aaa;
    background-color:#fefefe;
    text-align:center;
    padding:0 15px;
    color: #767676;
	border-radius:3px;
	font-size:13px;
}
.pop-btn2:hover,
.pop-btn2:focus,
.pop-btn2:active {
    color:#fff;
    background-color:#9d9d9d;
    border:1px solid #7f7f7f;
}
.b-charge {
    min-width:80px;
    height:25px;
    line-height:25px;
    font-size:12px;
    border:1px solid #c9c9c9;
    background-color:#f0f0f0;
    text-align:center;
    color: #767676;
}
.b-charge:hover,
.b-charge:focus,
.b-charge:active {
    color:#fff;
    background-color:#9d9d9d;
    border:1px solid #7f7f7f;
}
.pop-btn2-re { /* 초기화 버튼 */
    min-width:40px;
    height:32px;
    line-height:32px;
    border:1px solid #aaa;
    background:url('../../images/invito/common/sendBtnIco04.png') 14px 5px  no-repeat;
    padding:0 20px 0 50px;
    color: #767676;
	border-radius:3px;
}
.pop-btn2-re:hover,
.pop-btn2-re:focus,
.pop-btn2-re:active {
    border:1px solid #2d7026;
	color:#2d7026
}

.reading-gla { display:inline-block; overflow:hidden; text-decoration:-999px; width:26px; height:26px; font-size:0;
    border-top:1px solid #d8d8d8; border-bottom:1px solid #d8d8d8; border-right:1px solid #d8d8d8;
    background:url('../../images/new_storysom/common/search.gif') 0 center no-repeat; }
.data-back { display:inline-block; overflow:hidden; text-decoration:-999px; width:26px; height:26px; font-size:0;
    border-top:1px solid #d8d8d8; border-bottom:1px solid #d8d8d8; border-right:1px solid #d8d8d8;
    background:url('../../images/new_storysom/common/search.gif') -23px center no-repeat; }

/* 라인 버튼 스타일 */
.submit1 {
    min-width:50px;
    padding:0 10px;
    height:30px;
    line-height:30px;
    border:1px solid #2d7026;
    background-color:#fff;
    text-align:center;
    color: #2d7026;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
.submit1:hover,
.submit1:focus,
.submit1:active {
    color:#fff;
    background-color:#2d7026;
    border:1px solid #2d7026;
}
.submit2 {
    min-width:10px;
    padding:0 10px;
    height:22px;
    font-size:12px;
    line-height:22px;
    border:1px solid #2d7026;
    background-color:#fff;
    text-align:center;
    color: #2d7026;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
.submit2:hover,
.submit2:focus,
.submit2:active {
    color:#fff;
    background-color:#2d7026;
    border:1px solid #2d7026;
}
.cancel1 {
    min-width:50px;
    padding:0 10px;
    height:30px;
    line-height:30px;
    border:1px solid #5b5b5b;
    background-color:#fff;
    text-align:center;
    color: #5b5b5b;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
.cancel1:hover,
.cancel1:focus,
.cancel1:active {
    color:#fff;
    background-color:#5b5b5b;
    border:1px solid #5b5b5b;
}
.cancel2 {
    min-width:10px;
    padding:0 10px;
    height:22px;
    font-size:12px;
    line-height:22px;
    border:1px solid #5b5b5b;
    background-color:#fff;
    text-align:center;
    color: #5b5b5b;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
.cancel2:hover,
.cancel2:focus,
.cancel2:active {
    color:#fff;
    background-color:#5b5b5b;
    border:1px solid #5b5b5b;
}
.ab-style1 {
    min-width:10px;
    padding:0 8px;
    height:22px;
    font-size:12px;
    line-height:22px;
    border:1px solid #c1c1c1;
    background-color:#fff;
    text-align:center;
    color: #5b5b5b;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
.ab-style2 {
    min-width:10px;
    padding:0 8px;
    height:22px;
    font-size:12px;
    line-height:22px;
    border:1px solid #c1c1c1;
    background-color:#fff;
    text-align:center;
    color: #5b5b5b;
    border-radius:3px;
    -moz-border-radius:3px;
    -webkit-border-radius:3px;
}
.ab-style2:hover,
.ab-style2:focus,
.ab-style2:active,
.ab-style2-on {
    color:#fff;
    background-color:#959595;
    border:1px solid #5b5b5b;
}

a.bnt-del { font-size:12px; color:#5b5b5b; padding-left:14px; background:url('../../images/new_storysom/sending-c/ico_del.gif') 0px 4px no-repeat; text-decoration:underline; }
a.bnt-del:hover { color:#303030; }


/************** 테이블 스타일 **************/
.type1 thead { border-bottom:1px solid #d9d9d9; border-top:2px solid #4d4d4d; }
.type1 thead.topRed,
.type1 tbody.topRed { border-bottom:1px solid #d9d9d9; border-top:2px solid #444 !important; }
.type1 tbody .topBak,
.type2 tbody .topBak { border-top:1px solid #8e8e8e !important; }
.type1 thead th { height:46px;  color:#5b5b5b; border-left:1px solid #ddd }
.type1 thead th:first-child	{border-left:none}
.type1 tbody td,
.type1 tfoot td { height:23px; padding:8px 0; border-bottom:1px solid #d9d9d9; text-align:center; }
.type1 td	{border-left:1px solid #ddd}
.type1 td:first-child	{border-left:none}
.type1 tbody td a.preview { display:inline-block; width:485px; text-align:left; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis; }
.type1 tbody td a.preview:hover { text-decoration:underline }

.ellipsis { position:relative; display:inline-block; width:100%; text-align:left; /* cursor:default; */ overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis; }
.pop-preview { /* display:none; */ z-index:50; position:absolute; top:0px; left:15px; width:300px; max-height:300px; overflow:auto; padding:20px; font-size:13px; color:#3b3b3b; border:1px solid #a6a6a6; border-top:2px solid #2d7026;
    background-color:#fff; text-align:left;
    box-shadow:1px 1px 6px rgba(0,0,0,0.25);
    -moz-box-shadow:1px 1px 6px rgba(0,0,0,0.25);
    -webkit-box-shadow:1px 1px 6px rgba(0,0,0,0.25);
}
.pop-preview-bottom { z-index:51; position:absolute; bottom:0px; left:15px; width:300px; max-height:300px; overflow:auto; padding:20px; font-size:13px; color:#3b3b3b; border:1px solid #a6a6a6; border-top:2px solid #2d7026;
    background-color:#fff; text-align:left;
    box-shadow:1px 1px 6px rgba(0,0,0,0.25);
    -moz-box-shadow:1px 1px 6px rgba(0,0,0,0.25);
    -webkit-box-shadow:1px 1px 6px rgba(0,0,0,0.25);
}

.type1 tbody td a.m-contents { display:inline-block; width:100%; border:0px solid red; text-align:left; overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis; }
.type1 tbody td a.m-contents:hover { text-decoration:underline }
.type1 tbody tr:hover { background-color:#fcfcfc; }



.type1 .chw1		{width:10%}
.type1 .chw2		{width:20%}
.type1 .chw3		{width:30%}
.type1 .chw4		{width:20%}
.type1 .chw5		{width:20%}




.type2 tbody {border-top:2px solid #444; }
.type2 tbody .topRed { border-bottom:1px solid #d9d9d9; border-top:1px solid #2d7026 !important; }
.type2 tbody th { height:23px; padding:12px 0; background-color:#fcfcfc; color:#5b5b5b; border-bottom:1px solid #d9d9d9; border-left:1px solid #d9d9d9 }
.type2 tbody td { line-height:39px; border-bottom:1px solid #d9d9d9; text-align:left; padding-left:20px; border-right:1px solid #d9d9d9 }

.type3 thead th { height:23px; padding:8px 0; text-align:center; background-color:#fcfcfc; color:#5b5b5b; }
.type3 tbody td { line-height:1.5; text-align:left; padding:5px 0; }

.type4		{}
.type4 thead { border-bottom:1px solid #d9d9d9; border-top:2px solid #4d4d4d;  }
.type4 thead th { height:46px;  color:#5b5b5b; border-left:1px solid #ddd }
.type4 thead th:first-child	{border-left:none}
.type4 thead,
.type4 tbody {display: block; width:1200px;}
.type4 tbody	{ height: 400px; overflow-y: scroll}
.type4 tbody td { height:23px; padding:8px 0; border-bottom:1px solid #d9d9d9; text-align:center; }
.type4 td	{border-left:1px solid #ddd;  box-sizing: border-box;}
.type4 td:first-child	{border-left:none}



.type5 thead { border-bottom:1px solid #d9d9d9; border-top:2px solid #4d4d4d;  }
.type5 thead th { height:46px;  color:#5b5b5b; border-left:1px solid #ddd }
.type5 thead th:first-child	{border-left:none}
.type5 thead,
.type5 tbody {display: block; width:1200px;}
.type5 tbody	{ height: 300px; overflow-y: scroll}
.type5 tbody td { height:23px; padding:8px 0; border-bottom:1px solid #d9d9d9; text-align:center; }
.type5 td	{border-left:1px solid #ddd;  box-sizing: border-box;}
.type5 td:first-child	{border-left:none}




.zipcode tbody td { line-height:1.5; padding:5px 0; border-bottom:1px solid #d9d9d9; text-align:center; }
.zipcode tbody tr:hover { color:#2d7026; background-color:#fcfcfc; }
.zipcode tbody tr:hover td,
.zipcode tbody tr:hover td a,
.zipcode tbody tr:hover a { color:#2d7026; }


.characters_box				{height:230px; overflow-y:scroll}

.special-characters tbody td { height:39px; line-height:39px; text-align:center; border-bottom:1px solid #d9d9d9; }
.special-characters tbody td:hover { background-color:#2d7026; color:#fff; cursor:pointer; }


/************** 메시지 타입 아이콘 **************/
.m-type { display:inline-block; overflow:hidden; width:33px; height:15px; text-indent:-999px;
    background:url('../../images/new_storysom/common/ico_m-type.gif') no-repeat; }
.ico-sms { background-position:0px 0px; }
.ico-lms { background-position:0px -15px; }
.ico-mms { background-position:0px -30px; }



/************** 서브 **************/

/* 고정 퀵메뉴 */
#quick-menu { z-index:70; position:fixed; top:50%; right:0; margin-top:-74px; display:none}
#quick-menu-on { z-index:70; position:fixed; top:50%; right:0; margin-top:-139.5px; }
#quick-menu a,
#quick-menu-on a {
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s; }
ul.quick,
ul.quick-on { position:relative; border:1px solid #ccc; }

ul.quick li { width:48px; height:48px; border-bottom:1px solid #ccc; background-color:#fff; }
ul.quick li.arrow a { display:block; overflow:hidden; width:21px; height:62px; text-indent:-999px;
    background:url('../../images/new_storysom/common/quick_arrow.gif') center center no-repeat; }
ul.quick li.arrow { position:absolute; top:50%; left:-23px; width:21px; height:62px; margin-top:-31px;
    border:1px solid #ccc; border-right:0;
    border-radius:5px 0 0 5px;
    -moz-border-radius:5px 0 0 5px;
    -webkit-border-radius:5px 0 0 5px;
}
ul.quick,
ul.quick-on li:last-child { border-bottom:0; }
ul.quick li a { display:block; overflow:hidden; width:48px; height:48px; background:url('../../images/new_storysom/common/quick.gif') no-repeat; text-indent:-999px; }
ul.quick li.m1 a { background-position:0px 0px }
ul.quick li.m2 a { background-position:0px -50px }
ul.quick li.m3 a { background-position:0px -98px }

ul.quick-on > li { width:154px; padding:10px 0; border-bottom:1px solid #ccc; background-color:#fff; }
ul.quick-on li.arrow a { display:block; overflow:hidden; width:21px; height:62px; text-indent:-999px;
    background:url('../../images/new_storysom/common/quick_arrow_on.gif') center center no-repeat;
}
ul.quick-on li.arrow { position:absolute; top:50%; left:-23px; width:21px; height:62px; margin-top:-31px;
    border:1px solid #ccc; border-right:0;
    border-radius:5px 0 0 5px;
    -moz-border-radius:5px 0 0 5px;
    -webkit-border-radius:5px 0 0 5px;
}
ul.quick-on li p.m1,
ul.quick-on li.m2 a,
ul.quick-on li.m3 a { font-size:15px; color:#666; font-weight:bold; padding-left:65px; border:0px solid red;
    display:block; overflow:hidden; width:100%; height:28px; line-height:28px; background:url('../../images/new_storysom/common/quick.gif') no-repeat;
}
ul.quick-on li p.m1:hover,
ul.quick-on li.m2 a:hover,
ul.quick-on li.m3 a:hover {
    color:#000;
}
ul.quick-on li p.m1 { background-position:18px -11px; cursor:default; }
ul.quick-on li.m2 a { background-position:18px -61px }
ul.quick-on li.m3 a { background-position:18px -110px }

ul.quick-on .sum-total { width:100%; text-align:center; font-size:15px; color:#666; }
ul.quick-on .sum-total span { display:block; padding:5px 0 5px 0 }
ul.quick-on .sum-total strong { font-size:20px; }
ul.quick-on .send-balance { width:100px; margin:0 auto; margin-top:10px; }
ul.quick-on .send-balance:after { content:""; display:block; clear:both; }
ul.quick-on .send-balance .title { float:left; }
ul.quick-on .send-balance .title li { font-weight:bold; color:#666; }
ul.quick-on .send-balance .detail-quantity { float:right; }
ul.quick-on .send-balance .detail-quantity li { width:70px; text-align:right; }
ul.quick-on .send-balance li { font-size:12px; border:0px solid red; }


/***** 메시지전송 *****/

/* Phone */
#phone-area { float:left; width:300px; }
.phone-area { position:relative; min-height:538px; border:1px solid #b7b7b7;
    background:url('../../images/new_storysom/message/bg_phone.gif') center 21px no-repeat;
    border-radius:18px;
    -moz-border-radius:18px;
    -webkit-border-radius:18px;
    box-shadow: 0 6px 0px 0px rgba(222,222,222,1);
}
.phone-area-pre { position:relative;  margin:0 auto; height:400px; border:1px solid #b7b7b7; padding-bottom:20px; /* 팝업창: 미리보기 관련 */
    background: url('../../images/new_storysom/message/bg_phone.gif') center 21px no-repeat;
    border-radius:18px;
    -moz-border-radius:18px;
    -webkit-border-radius:18px;
    box-shadow: 0 6px 0px 0px rgba(222,222,222,1);
}
.m-notation-guide { position:absolute; top:-25px; left:18px; }
.m-notation-guide a { padding-left:20px; font-size:13px; color:#7d7d7d; background:url('../../images/new_storysom/message/ico_notice.gif') 0px 2px no-repeat; }

.sending-area { margin:48px 20px 0 20px; min-height:416px; border:1px solid #d9d9d9;     border-radius:8px;
    -moz-border-radius:8px;
    -webkit-border-radius:8px;
}
.send-opt { float:left; width:25%; min-height:305px; background-color:#fcfcfc; border-right:1px solid #d9d9d9;
    border-radius:10px 0 0 0;
    -moz-border-radius:10px 0 0 0;
    -webkit-border-radius:10px 0 0 0;
}
.send-opt ul li { height:59px; border-bottom:1px solid #d9d9d9;  }
.send-opt ul li a { display:block; overflow:hidden; width:60px; margin:0 auto; height:60px; font-size:0; text-indent:-999px;
    background:url('../../images/new_storysom/message/ico_opt.png') no-repeat;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.send-opt ul li a:after {
    content: '';
    position: absolute;
    z-index: -1;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.send-opt ul li.s-characters a { background-position: 0px 0px }
.send-opt ul li.t-storage a { background-position: 0px -60px }
.send-opt ul li.t-save a { background-position: 0px -120px }
.send-opt ul li.m-img a { background-position: 0px -180px }

.send-opt ul li.s-characters a.on,
.send-opt ul li.s-characters a:focus,
.send-opt ul li.s-characters a:hover { background-position:-60px 0px; }
.send-opt ul li.t-storage a.on,
.send-opt ul li.t-storage a:focus,
.send-opt ul li.t-storage a:hover { background-position:-60px -60px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.send-opt ul li.t-save a.on,
.send-opt ul li.t-save a:focus,
.send-opt ul li.t-save a:hover { background-position:-60px -120px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.send-opt ul li.m-img a.on,
.send-opt ul li.m-img a:focus,
.send-opt ul li.m-img a:hover { background-position:-60px -180px;
    -webkit-transition: all 0.3s;
    -moz-transition: all 0.3s;
    transition: all 0.3s;
}
.send-s { float:left; position:relative; width:70%; min-height:270px; margin:0 auto; margin-top:25px; text-align:center; border:0px solid red;  }
.send-s input.send-tit { width:90%; font-size:15px; padding:0 3% 7px 2%; margin-left:3%; margin-bottom:8px; border:0; border-bottom:2px solid #d9d9d9;  }
.send-s textarea { width:90%; min-height:200px; padding:0 3% 0 2%; margin-left:3%; border:0; font-size:15px; color:#5b5b5b; line-height:1.4; overflow-y:auto; }
.send-s textarea.sms-ver { width:90% !important; }
.send-s .byte-count { position:absolute; bottom:15px; left:0; width:100%; color:#939393; text-align:center; border:0px solid red; }

.reply-num {text-align:center;  height:40px; background-color:#eee; border-top:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9; }

.num-s-list { width:165px; height:28px; background:#fff; border:0; margin:0px 0 0px 0px; }
.reply-num select {
    -webkit-appearance: none;  /* 네이티브 외형 감추기 */
    -moz-appearance: none;
    appearance: none;
    background:url('../../images/new_storysom/message/ico_num_arrow.gif') right 12px #fff no-repeat;  /* 화살표 모양의 이미지 */
}
.reply-num select::-ms-expand {  /* IE 10, 11의 네이티브 화살표 숨기기 */
    display: none;
}

/* 무료거부 번호 선택 */
.refusal-num-list th { background-color:#fcfcfc; border-right:1px solid #d9d9d9; border-bottom:1px solid #d9d9d9; }
.refusal-num-list th span { display:inline-block; overflow:hidden; width:44px; height:28px; background:url('../../images/new_storysom/message/tit_refusal_num.png') no-repeat; text-indent:-999px; }
.refusal-num-list td { padding:15px 0 15px 14px; border-bottom:1px solid #d9d9d9; font-size:12px; }
.refusal-num-list td > label { font-size:12px !important; letter-spacing:0; margin-bottom:10px; }
.refusal-num-list td > label:last-child { margin-bottom:0 !important; }

.img-file th { background-color:#fcfcfc; border-right:1px solid #d9d9d9; }
.img-file th span { display:inline-block; overflow:hidden; width:33px; height:12px; background:url('../../images/new_storysom/message/tit_file.png') no-repeat; text-indent:-999px; }
.img-file th span.file1 { background-position:0px 0px;  }
.img-file th span.file2 { background-position:0px -12px;  }
.img-file th span.file3 { background-position:0px -24px;  }
.img-file th,
.img-file td { border-bottom:1px solid #d9d9d9; }
.img-file td div { position:relative; }
.img-file td { padding-left:17px; height:34px; line-height:34px; }
.file-pop-area { display:inline-block; width:165px; font-size:12px; letter-spacing:0px; color:#af8834; border:0px solid red;
    overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis; cursor:sw-resize; }
.img-file td div.btn_file-del { position:absolute; top:5px; right:13px; }
.img-file td div.btn_file-del a { display:inline-block; width:9px; height:9px; overflow:hidden; text-indent:-999px; background:url('../../images/new_storysom/message/btn_del.gif') no-repeat; }

/* 첨부이미지 팝업 시 */
.img-file td div .file-pop,
.file-pop { display:none; z-index:80; padding:8px; position:absolute; bottom:3px; right:-20%; width:120px; background-color:#f5f5f5; border:1px solid #656565;
    box-shadow: 3px 3px 1px rgba(0,0,0,0.17);
}

.auto-input th { background-color:#fcfcfc; }
.auto-input th { border-right:1px solid #d9d9d9; }
.auto-input th span.title { display:inline-block; margin-top:5px; overflow:hidden; width:43px; height:13px; background:url('../../images/new_storysom/message/tit_auto.png') no-repeat; text-indent:-999px; }
.auto-input td { height:34px; line-height:34px; text-align:center; border-right:1px solid #d9d9d9; }
.auto-input td a { font-size:12px; color:#8e8e8e; }
.auto-input td.top_line { border-top:1px solid #d9d9d9; }
.auto-input td:last-child { border-right:0; }
.auto-input .bor-ra1 { border-radius:0 0 0 10px; -moz-border-radius:0 0 0 10px; -webkit-border-radius:0 0 0 10px; }
.auto-input .bor-ra2 { border-radius:0 0 10px 0; -moz-border-radius:0 0 10px 0; -webkit-border-radius:0 0 10px 0; }

.auto-input .tooltip-area { display:inline-block; position:relative; border:0px solid red; }
/* 툴팁 */
a.tooltip { outline:none; }
a.tooltip:hover { text-decoration:none; }
a.tooltip span.t-tip {
    z-index:10; display:none; padding:10px;
    margin:5px; overflow:hidden;
    width:200px; line-height:1.5; font-weight:normal;
}
a.tooltip:hover span.t-tip {
    display:inline-block; position:absolute; top:-30px; left:20px; color:#436782; font-size:13px; text-align:left;
    border:1px solid #7698b1; background:#d2e3f0; }
/*CSS3 extras*/
a.tooltip span.t-tip {
    border-radius:4px;
    -moz-border-radius:4px;
    -webkit-border-radius:4px;
    box-shadow: 5px 5px 8px rgba(0,0,0,0.15);
}
.send-area { width:274px; margin:0 auto; padding-bottom:30px; }
.etc-send-opt { width:255px; margin:0 auto; padding-top:15px; }
.etc-send-opt li { position:relative; padding:7px 0; border:0px solid red; }
.etc-send-opt li .tooltip-area-etc { position:absolute; top:7px; right:0px; border:0px solid red; }
.etc-send-opt li.date-time { padding-top:0; padding-left:23px; }
.etc-send-opt .case-area { position:absolute; top:3px; left:75px; }
.etc-send-opt input.case { width:45px; text-align:right; margin-left:10px; background-color:#ededed; border:1px solid #d6d6d6; }
.etc-send-opt .case-txt { font-size:12px; }

.nodata1-sms { text-align:center; height:224px; line-height:224px; }
.nodata1-lms { text-align:center; height:379px; line-height:379px; }
.nodata1-mms { text-align:center; height:481px; line-height:481px; }

#data-area { float:right; width:855px; }
.total-num-box	{width:100%; overflow: hidden}
.total-num { padding-left:8px; font-weight:400; vertical-align:bottom; font-size:15px;  width:20%; float:left; }
.total-num span { font-size:20px;  vertical-align:bottom;}
.opt-btn-area { position:relative; margin:10px 0 30px 0; padding:20px; border:1px solid #ddd; border-top:2px solid #444; box-shadow:0 5px #f1f1f1;  }
.opt-btn-area .remove-area > label { margin-left:18px; }
.data-search-area { float:right; margin-top:0px; border:0px solid red; background-color:#fff; vertical-align:middle;}
.data-search-area .data-search { font-size:12px; border:1px solid #d6d6d6; padding:0 14px 0 5px; border-right:0; -webkit-border-radisu:0; -webkit-appearance:none; border-radius:0}
.data-search-area ul li { float:left; }
.data-search-area ul li a{vertical-align:top}
.data-search-input { height:22px; width:80px; line-height:22px; font-size:12px; border:1px solid #d9d9d9; border-left:0; vertical-align:middle; -webkit-border-radisu:0; -webkit-appearance:none;border-radius:0}
.data-search-input2 { width:134px; padding-left:7px; height:22px; line-height:22px; font-size:12px; border:1px solid #d9d9d9;  -webkit-border-radisu:0; -webkit-appearance:none;border-radius:0}
.send-table-footer { padding-top:20px; }
.send-table-footer .right-area { float:right }

/* Paging */
.paging { width:100%; text-align:center; margin-top:25px; }
.paging p { display:inline-block; }
.paging p a { display:inline-block; text-align:center; color:#767676; font-family:verdana; font-size:11px; width:25px; padding:0 7px 0 5px; height:25px; line-height:25px; border:1px solid #dedede; }
.paging p a:hover,
.paging p a:focus,
.paging p a.on { color:#fff; text-align:center; font-weight:bold; background-color:#b0bbbd; border:1px solid #a3a6a7; }



/***** 전송관리 *****/

/* 전송결과 */
.outcome-list { height:400px; overflow-y:scroll; border-bottom:1px solid #d9d9d9; }
.outcome-list2 { height:475px; width:100%; overflow-x:scroll;  overflow-y:hidden ; border-bottom:1px solid #d9d9d9; }
.outcome-list3 { height:355px; width:100%; overflow-x:scroll;  overflow-y:hidden ; border-bottom:1px solid #d9d9d9; }

.outcome-list-tlt { height:49px; overflow-y:scroll; }
ul.contents-help { padding-left:55px; margin-top:45px; background:url('../../images/new_storysom/common/ico_help.gif') 20px 0px no-repeat; }
ul.contents-help li { font-size:13px; color:#8e8e8e; padding-bottom:2px; }
ul.contents-help-pop { padding-left:30px; margin-top:25px; background:url('../../images/new_storysom/common/ico_help.gif') 0px 0px no-repeat; }
ul.contents-help-pop > li { font-size:13px; color:#8e8e8e; padding-bottom:2px; }
ul.contents-help2 li { padding-left:17px; font-size:13px; color:#7d7d7d; padding-bottom:5px; background:url('../../images/new_storysom/common/ico_check.gif') 0px 7px no-repeat; }
input.cal-style { width:90px; text-align:center; background:#f0f0f0; border:0; }
a.ico-cal { display:inline-block; overflow:hidden; margin-top:-10px; width:22px; height:22px; background:url('../../images/new_storysom/common/ico_cal.gif') no-repeat; text-indent:-999px; }
.graph_box	{ overflow-x:scroll; width:100%; border:1px solid #ddd; padding:35px 0 10px 0; overflow-y:hidden;   margin-bottom:20px; }
.graph-area { position:relative;  width:1200px;}
.graph-area dl { position:absolute; top:0; right:0; width:130px; margin-top:17px; }
.graph-area dt { width:100%; padding-bottom:13px; text-align:center; height:38px;}
.graph-area dd { width:100px; height:45px; line-height:45px;  letter-spacing:0;  font-style:italic; text-align:right; padding-right:30px; }

/* 예약조회 */
.reserva-area { position:relative; }
.reserva-btn-area { position:absolute; top:-40px; right:0; }



/***** 주소록 *****/

/* 주소록 */
#add-book { float:left; width:298px; border:1px solid #c9c9c9; }
#add-book .group-add-area { padding:0 20px 0 27px; height:52px; line-height:52px; border-bottom:1px solid #c9c9c9; }
#add-book .group-add-area .addbtn { float:right; line-height:52px; }
#add-book .group-num-all { padding:0 32px 0 27px; height:49px; line-height:49px; font-weight:bold; background-color:#fcfcfc; border-bottom:1px solid #c9c9c9; }
#add-book .group-num-all a { display:block; color:#5b5b5b; }
#add-book .group-num-all a:hover { color:#000; }
#add-book .group-num-all span { float:right; line-height:49px; }
#add-book a.new-g { padding-left:30px; color:#474747; font-weight:bold; background:url('../../images/new_storysom/address/ico_new_group.gif') 0px 0px no-repeat; }
#add-book a.new-g:hover { color:#000; text-decoration:underline }
#add-book > .group-list { height:498px; overflow-y:scroll; }
#add-book > .group-list li { display:block; padding:0 15px 0 27px; height:49px; line-height:49px; border-bottom:1px solid #c9c9c9; }
#add-book > .group-list li a { display:inline; border:0px solid red; }
#add-book > .group-list li span { float:right; line-height:49px; }
#add-book > .group-list li a:hover,
#add-book > .group-list li a:focus,
#add-book > .group-list li:hover,
#add-book > .group-list li.on,
#add-book > .group-list li.on a,
#add-book > .group-list li:focus { font-weight:bold; color:#2d7026 !important; background-color:#fcfcfc !important; }
#ab-data-area { float:right; width:855px; border:0px solid red; }
.ab-search { width:auto; padding:15px 0; border-top:1px solid #afafaf; }
.ab-search .tit-area { text-align:center; }
.ab-search .tit-area a { margin-left:15px; }
.ab-search-contents { width:98%; margin:0 auto; padding:10px 0 5px 0; border:0px solid red; }
.consonant-select { width:auto; text-align:left; padding:15px 0 5px 0; border-top:1px solid #e1e1e1; }
.search-items { position:relative; width:auto; padding:10px 0 8px 0; border:0px solid red; }
.search-items ul.item { width:88%; border-right:1px solid #e1e1e1; }
.search-items ul.item:after { content:""; display:block; clear:both; }
.search-items ul.item li { float:left; width:215px; height:33px; border:0px solid red; }
.search-items ul.item li > span { display:inline-block; width:45px; }
.search-items ul.item li > input { width:145px; }
.search-items ul.btn-search-items { position:absolute; top:10px; right:0; width:10%; padding:8px 0 8px 20px; border:0px solid green; }


/* 수신거부관리 */
#q-list-area { float:left; width:60%; border:0px solid red; }
#q-list-area .q-list-data { width:100%; height:359px; overflow-y:scroll; border-top:1px solid #c9c9c9; border-bottom:1px solid #c9c9c9; }
#q-list-area > .title { position:relative; width:100%; height:46px; line-height:46px; text-align:center; color:#5b5b5b; font-weight:bold; background-color:#fcfcfc; border-top:1px solid #c9c9c9; }
#q-list-area > .title .check-all { position:absolute; top:15px; left:35px; }

#q-list-info { float:right; width:38%; margin-top:45px; border:0px solid red; }

#add-book2 { float:left; width:300px; }
#add-book2 .title-area { padding:0 20px 0 27px; height:52px; line-height:52px; background-color:#fcfcfc; border:1px solid #c9c9c9; border-bottom:0; }
#add-book2 .title-area span { padding-left:20px; color:#474747; font-weight:bold; background:url('../../images/new_storysom/common/ico_q-list.png') 0px 2px no-repeat; border:0px solid black; }
#add-book2 textarea.direct-input { width:271px; height:450px; line-height:40px; letter-spacing:0; padding-left:25px; overflow-y:scroll;
    background:url('../../images/new_storysom/message/bg_d-input.gif') 0 0 repeat local;
}


/***** MYSOM *****/

/* 메인 */
#mysom-left { float:left; width:30%; }
#mysom-right { float:right; width:65%; }
/* media queries */

#mysom-left .m-info-area { width:100%; height:auto; margin-bottom:40px; border:1px solid #aaa; background-color:#fff; box-shadow:0 6px #f0f0f0; border-radius:5px;}
#mysom-left .member-area { position:relative; }
#mysom-left .info { width:100%; margin:0 auto; height:355px; background-color:#fff; text-align:center; padding-top:50px; }
/* media queries */

#mysom-left .info .m-photo { width:135px; height:135px; margin:0 auto; overflow:hidden;
    background:url('../../images/new_storysom/mysom/bg_member.png') center center #ccc no-repeat;
    border-radius:100%;
    -moz-border-radius:100%;
    -webkit-border-radius:100%;
}
#mysom-left .info .img-set { position:absolute; bottom:0; right:166px; overflow:hidden; display:inline-block; width:22px; height:22px; text-indent:-999px; border:0px solid red;
    background:url('../../images/new_storysom/mysom/btn_img_set.png') no-repeat; }
#mysom-left .info .m-name { padding:40px 0 35px 0; font-size:17px; }
#mysom-left .info .m-money { font-size:15px; color:#5b5b5b; padding:25px 0 25px 0; background:url('../../images/new_storysom/mysom/bar.gif') center top no-repeat; }
#mysom-left .info .m-money strong { font-size:15px; color:#2d7026; padding-left:12px; }
#mysom-left .info .m-money .left-over { font-size:30px; letter-spacing:-3px; }

#mysom-left ul.unit-cost	{ width:100%; margin:0 auto; margin-top:10px;overflow: hidden }




/* media queries */

#mysom-left ul.unit-cost li { float:left; width:90%; padding:20px 5%; border-top:1px solid #ddd; text-align:center; font-size:15px; line-height:35px; background-color:#fefefe;  }
#mysom-left ul.unit-cost li strong	{display:inline-block; width:50px; }
#mysom-left ul.important-notice li { display:block; float:left; text-align:center; width:220px; height:185px; margin-right:10px; }
#mysom-left ul.important-notice li.banner1 { background:url('../../images/new_storysom/mysom/banner_01.jpg') center center #f7d999 no-repeat; }
#mysom-left ul.important-notice li.banner2 { background:url('../../images/new_storysom/mysom/banner_02.jpg') center center #b4dae6 no-repeat; }

#mysom-left ul.important-notice li a { display:block; color:#474747; padding-top:150px; border:0px solid red; }
#mysom-left ul.important-notice li a:hover,
#mysom-left ul.important-notice li a:focus { text-decoration:underline }
#mysom-left ul.important-notice li:last-child { margin-right:0; }

.type1 td.nodata2-2 { height:401px; } /* 전송관리 > 예약조회 */
.type1 td.nodata3-1 { height:399px; } /* 주소록 > 주소록 */
.type1 td.nodata4-1 { height:159px; }
.type1 td.nodata4-2 { height:190px; }

.mynum-main-area { height:120px; text-align:center; border-top:2px solid #444; border-bottom:1px solid #d9d9d9; overflow-y:auto; }


/* 충전하기 */
#charge-left { float:left; width:32%; border:1px solid #444; border-radius:10px; box-shadow:0px 3px #999}
#charge-right { float:right; width:63%; }

#charge-left ul.amount-area { width:100%; background:url('../../images/invito/common/money_ico.png') no-repeat center 120px;}
#charge-left ul.amount-area:after { content:""; display:block; clear:both; }
#charge-left ul.amount-area li { float:left; }
#charge-left ul.amount-area li.title { width:100%; padding-top:50px; text-align:center; color:#282828; font-size:20px; line-height:1.2; }
#charge-left ul.amount-area li.title img	{display:block; margin:0 auto; padding-bottom:50px;}
#charge-left ul.amount-area li.amount { width:100%; height:130px; text-align:center; }
#charge-left ul.amount-area li.amount input.money-num { width:50%; background:transparent; border:0; border-bottom:1px solid #aaa; text-align:center; color:#657068; font-size:40px; font-weight:bold;  }
#charge-left ul.amount-area li.amount input.money-han { width:100%; background:transparent; border:0; text-align:center; color:#657068; margin-top:5px;}
#charge-left .amount-info { padding:33px 5%; width:90%; margin:0 auto;  border-top:1px solid #444}
#charge-left .member { font-weight:bold; color:#303030;  padding:25px 5% 5px 5%; width:90%;  text-align:center; border-top:1px dotted #444;}
#charge-left ul.member-unit-cost { width:100%; border-top:1px dotted #444; }
#charge-left ul.member-unit-cost:after { content:""; display:block; clear:both; }
#charge-left ul.member-unit-cost li { float:left; width:33%;  height:90px; padding-top:24px; border-right:1px solid #d9d9d9; text-align:center; font-size:15px; color:#5b5b5b; line-height:35px; }
#charge-left ul.member-unit-cost li:last-child { border-right:0;}

#charge-right .pay-type-area { width:100%;  }
#charge-right h4	{text-align:center; font-weight:500; font-size:30px; height:70px; color:#333}
#charge-right ul.pay-type { width:100%; margin:0 auto;  background-color:#fff;  overflow: hidden}
#charge-right ul.pay-type li { float:left; display:block; width:32%; margin-right:2%;  text-align:center;   }
#charge-right ul.pay-type li:last-child	{margin-right:0}
#charge-right ul.pay-type li:hover a { color:#2d7026;  border:1px solid #2d7026; box-shadow:0px 3px #aaa}
#charge-right ul.pay-type li a { display:block; width:99%; height:80px; padding-top:220px; border-radius:10px; color:#7d7d7d; font-size:20px; border:1px solid #d9d9d9;}
#charge-right ul.pay-type li.bank1 { background:url('../../images/invito/common/money_ico02.jpg') no-repeat center 30px; }
#charge-right ul.pay-type li.bank1:hover { background:url('../../images/invito/common/money_ico02_ov.jpg') no-repeat center 30px; }
#charge-right ul.pay-type li.card { background:url('../../images/invito/common/money_ico03.jpg') no-repeat center 30px; }
#charge-right ul.pay-type li.card:hover { background:url('../../images/invito/common/money_ico03_ov.jpg') no-repeat center 30px; }
#charge-right ul.pay-type li.bank2 { background:url('../../images/invito/common/money_ico01.jpg') no-repeat center 30px; }
#charge-right ul.pay-type li.bank2:hover { background:url('../../images/invito/common/money_ico01_ov.jpg') no-repeat center 30px; }
#charge-right .pay-type-info { width:90%; margin:0 auto; padding:25px 5%; margin-top:10px; background-color:#fff; }
#charge-right .pay-call { width:100%; padding:20px 0 0px 0;  margin:0 auto; background-color:#fff;  border-top:1px dotted #444}/* height:435px;  */
#charge-right .pay-call h3 { font-size:16px; color:#303030; padding-bottom:10px; }
#charge-right .pay-call > table { margin:20px 0 15px 0; }


/* 충전내역조회 */
ul.charge-history { width:auto; height:73px; border:1px solid #d9d9d9; margin-bottom:20px; }
ul.charge-history li { float:left; width:33.25%; height:73px; border-right:1px solid #d9d9d9; }
ul.charge-history li > div.po-rela { font-size:15px; color:#5b5b5b; line-height:73px; padding:0 45px; }
ul.charge-history li > div.po-rela span.num,
ul.charge-history li > div.po-rela span.num2 { float:right; font-weight:bold; border:0px solid red; }
ul.charge-history li > div.po-rela span.num strong { font-size:23px; }
ul.charge-history li > div.po-rela span.num2 { color:#2d7026; }
ul.charge-history li > div.po-rela span.num2 strong { font-size:23px;}
ul.charge-history li:last-child { border-right:0; background-color:#fcfcfc; }
ul.charge-history .ico-sum1 { position:absolute; top:20px; right:-18px; width:35px; height:35px; background:url('../../images/invito/common/ico_sum.png') 0 0 no-repeat; }
ul.charge-history .ico-sum2 { position:absolute; top:20px; right:-18px; width:35px; height:35px; background:url('../../images/invito/common/ico_sum.png') -35px 0px no-repeat; }
.contact-num input { width:50px; text-align:center; }


/* 월별사용내역 */
.month-select { position:relative; overflow:hidden; width:450px; margin:0 auto; text-align:center; border:0px solid red; }
/* 
.month-select p { display:inline-block; }
.month-select p a { display:block; width:22px; height:22px; background:url('../../images/new_storysom/mysom/ico_arrow.png') no-repeat; font-size:0; border:0px solid green; }
.month-select .pre { position:absolute; top:5px; left:0; background-position: 0px 0px; }
.month-select .next { position:absolute; top:5px; right:0; background-position:-22px 0px !important; }
 */
.month-select select { height:36px; font-size:23px; color:#000; font-size:14px;  border:0; width:70px; margin-right:5px; border-bottom:1px solid #aaa; padding:0 5px;}
.month-select select option { font-size:13px; color:#666; }


.grap01			{float:left; width:49.5%; margin:25px 0; text-align:center; border-right:1px dotted #ddd}
.grap02			{float:right; width:50%;  margin:25px 0;}


.graph-nodata1 { width:100%; text-align:center; height:246px; padding:54px 0 0 0; border:0px solid red; }
.graph-nodata2 { width:100%; text-align:center; height:246px; padding:54px 0 0 0; border:0px solid red; }

.month-data-area { height:199px; overflow-y:scroll; }
tfoot.sum-total { background-color:#fcfcfc; }
tfoot.sum-total tr { border-top:2px solid #2d7026; border-bottom:2px solid #d9d9d9; }
tfoot.sum-total td { height:60px; }


/* 회원정보관리 */
.my-address { padding:5px 0 9px 0; }
.my-address input { height:24px; }
.my-address .zip-code { width:100px; text-align:center; }
.my-address .addre1 { width:600px; margin-top:3px; }
.my-address .addre2 { width:400px; margin-top:6px; }
.my-contact-num { padding:5px 0; }
.my-contact-num input { width:50px; height:24px; text-align:center; }
.my-email { padding:5px 0; }
.my-email input { width:200px; height:24px;  }

.my-number-tit { float:left; width:20%; height:200px; line-height:200px; text-align:center; background-color:#fcfcfc; border-bottom:1px solid #d9d9d9; }

.my-number-list		{ overflow: hidden; padding-top:2px}
.my-number-list ul	{width:100%; }
.my-number-list	ul li{width:33.2%; text-align:center; float:left; border-bottom:1px solid #ddd; padding:11px 0; }
.my-number-list	ul li:nth-child(2n){border-lefT:1px solid #ddd; border-right:1px solid #ddd}


/* media queries */
@media screen and (max-width:1280px) {
    .my-number-tit { width:174px; }
}
.my-number { float:right; width:80%; height:200px; border-bottom:1px solid #d9d9d9; overflow-y:auto; }
/* media queries */
@media screen and (max-width:1280px) {
    .my-number { width:696px; }
}

.zipcode-info1 { width:auto; margin-bottom:15px; padding:0 15px 20px 15px; border:1px solid #d9d9d9; }
.zipcode-info1 .type-select { width:auto; text-align:center; padding:17px 0; border-bottom:2px solid #d9d9d9; }
.zipcode-info1 .type-select2 { width:auto; text-align:center; padding-top:20px; }
.zipcode-info1 .type-select2 p { padding-bottom:8px; }
.zipcode-info1 .type-city { padding:15px; margin-bottom:15px; border-bottom:1px solid #e6e6e6; }
.zipcode-info1 .type-city span { padding:0 20px; }
.zipcode-info1 > p { font-size:13px; }
.zipcode-area { overflow-y:scroll; height:200px; }
.zipcode-area2 { overflow-y:scroll; height:340px; }


/* cscenter */
.csTop{position:relative; width:100%; overflow: hidden}
.csTitle{text-align:center; font-size:45px; color:#121212; font-weight:500}
.csTitle img{vertical-align:top}
.csCenter{width:33%; float:left; border:1px solid #ddd; padding:20px 3%;  height:180px}
.cs_txt01{font-size:45px; color:#2d7026;}
.cs_txt02{font-size:14px; color:#666;}
.cs_txt02 span{display:block; width:90px; float:left;}
.csNotice{position:relative; width:48.5%; float:left;}
.csTitle2 h3{width:200px; color:#2d7026; font-weight:bold; font-size:17px; float:left; padding-left:3px; padding-bottom:8px;}
.csTitle2 p{ float:right; padding-top:7px;}
.csQna{position:relative; width:48.5%; float:right;}

.bannerArea{position:relative;  width:60%; float:right; border:1px solid #ddd; background:#fcfcfc; height:220px}
.cs_banner01{position:relative; width:49.8%; ; border-right:1px solid #dbdbdb;  float:left; height:218px}
.cs_banner01 img{position:absolute;left:50%; top:30px; margin-left:-36px; }
.cs_banner01 h3{position:absolute; top:120px; left:0; font-size:17px; font-weight:bold; color:#474747; text-align:center; width:100%;}
.cs_banner01 p{position:absolute; top:150px; left:0; font-size:14px; line-height:140%;  text-align:center; width:100%;}


.cs_banner02{position:relative; width:50%;   float:left; height:218px}
.cs_banner02 img{position:absolute;left:50%; top:30px; margin-left:-36px; }
.cs_banner02 h3{position:absolute; top:120px; left:0; font-size:17px; font-weight:bold; color:#474747; text-align:center; width:100%;}
.cs_banner02 p{position:absolute; top:150px; left:0; font-size:14px; line-height:140%;  text-align:center; width:90%; padding:0 5%; word-break:keep-all}
.footer_btnArea{ position:relative; text-align:center; margin-top:20px;}
.btn_pn{position:absolute; top:-5px; right:0;}

.cs_type1 tbody { border-bottom:1px solid #d9d9d9; border-top:2px solid #444; }
.cs_type1 tbody .topRed { border-bottom:1px solid #d9d9d9; border-top:1px solid #2d7026 !important; }
.cs_type1 tbody th { height:47px; background-color:#fcfcfc; color:#5b5b5b; border-bottom:1px solid #d9d9d9; border-right:1px solid #d9d9d9; }
.cs_type1 tbody td { line-height:47px; border-bottom:1px solid #d9d9d9; text-align:left; padding-left:10px; }
.cs_type1 tbody td.cate{color:#474747; background:url('../../images/new_storysom/cscenter/line.jpg') right no-repeat; }
.cs_type1 tbody td.over{overflow:hidden; white-space:nowrap; text-overflow:ellipsis; -o-text-overflow:ellipsis; -ms-text-overflow:ellipsis;}


/* notice */
.noticeToparea{position:relative; width:auto; height:170px; background:url('../../images/new_storysom/cscenter/notice_bg.jpg') no-repeat; text-align:center;}
.noticeToparea p{color:#fff; padding-top:70px; font-size:16px;
    text-shadow:1px 1px 2px rgba(0,0,0,0.4);
    -moz-text-shadow:1px 1px 2px rgba(0,0,0,0.4);
    -webkit-text-shadow:1px 1px 2px rgba(0,0,0,0.4);
}

.cs_type2 tbody { border-bottom:1px solid #d9d9d9; border-top:2px solid #4d4d4d; }
.cs_type2 tbody .topRed { border-bottom:1px solid #d9d9d9; border-top:1px solid #2d7026 !important; }
.cs_type2 tbody tr:hover { background:#fcfcfc;}
.cs_type2 tbody th { height:47px; background-color:#fcfcfc; color:#5b5b5b; border-bottom:1px solid #d9d9d9; font-size:22px; }
.cs_type2 tbody td { height:93px; border-bottom:1px solid #d9d9d9; text-align:left; padding-left:10px; }
.cs_type2 tbody td a{font-size:18px;}
.cs_type2 tbody td a:hover{color:#2d7026; }

.cs_type3 tbody { border-bottom:1px solid #d9d9d9; border-top:1px solid #d9d9d9; }
.cs_type3 tbody .topRed { border-bottom:1px solid #d9d9d9; border-top:1px solid #2d7026 !important; }
.cs_type3 tbody th { background-color:#fcfcfc; color:#5b5b5b; border-bottom:1px solid #d9d9d9; font-size:22px; padding:25px 20px; text-align:left; font-weight:normal;}
.cs_type3 tbody th.noticeDate{font-size:14px; text-align:right;}
.cs_type3 tbody td { border-bottom:1px solid #d9d9d9; text-align:left; padding-left:10px; padding:40px; line-height:180%;}


/* faq */
.faqToparea{position:relative; width:100%; box-shadow:0px 6px #f1f1f1}
.faqToparea p{color:#fff; padding-top:44px; padding-bottom:24px; font-size:16px;
    text-shadow:1px 1px 2px rgba(0,0,0,0.4);
    -moz-text-shadow:1px 1px 2px rgba(0,0,0,0.4);
    -webkit-text-shadow:1px 1px 2px rgba(0,0,0,0.4);
}
.faqToparea a{display:inline-block;  background:#fff;  width:25%; text-align:center; border:1px solid #ddd;  margin-left:-2px; padding:15px 0; background-color:#fff; border-top:2px solid #444; }
.faqToparea a:hover{background-color:#2d7026; color:#fff}
.faq{ font-size:12px; border-bottom:1px solid #ddd; }
.faq ul{ list-style:none; margin:0; padding:0; }
.faq .q{ margin:0; border-top:1px solid #d9d9d9; color:#7d7d7d; }
.faq .q a.trigger{ display:block; padding:20px 60px 20px 30px; text-align:left; font-size:16px; color:#7d7d7d; font-weight:normal;  background:#ffffff; text-decoration:none !important;
    background:url('../../images/new_storysom/cscenter/arrow_b.png') right no-repeat;}
.faq .hide .q a.trigger{  font-weight:normal;  }
.faq .q a.trigger:hover{background:#fcfcfc url('../../images/new_storysom/cscenter/arrow_b.png') right no-repeat;}
.faq .q a.trigger:active,
.faq .q a.trigger:focus{ color:#000;  background:#f8f8f8 url('../../images/new_storysom/cscenter/arrow_b.png') right no-repeat;}
.faq .a{ margin:0; padding:20px 60px; line-height:1.5; border-top:1px solid #eeeeee; position:relative}
.faq .a img	{position:absolute; top:20px; left:20px;}
.cate_sec{color:#2d7026; font-size:14px; display:block; width:160px; float:left; padding-top:2px;}
.cate_sec img{margin-top:-3px;}


/* publishing Kim Yun Hye 2015-11-20 */

.contents2 { position:relative; width:1278px; min-height:650px; margin:0 auto; border:1px solid #e3e3e3; border-top:0; padding:0 0 50px 0; background-color:#fff; }
/* media queries */
@media screen and (max-width:1280px) {
    .contents2 { width:950px; border:0px solid red; }
}
.contents2:after { content:""; display:block; clear:both; }
.contents2 h2 { width:100%; height:118px; line-height:118px; text-align:center; font-size:25px; color:#474747; border:0px solid red; }

/* 서비스소개 */
.msTop{position:relative; width:auto; height:648px; margin:0px; border:0px solid red; background:url('../../images/new_storysom/service/top_img01.jpg') no-repeat;
    background-size: cover; background-position: bottom right; }
.serviceTab a { width:33.39%; height:61px; display:inline-block; border:0px solid red; padding-top:13px; color:#b0b0b0; font-size:18px; margin-right:-4px; background:url('../../images/new_storysom/service/service_tab.png') no-repeat; text-align:center;}
.serviceTab a.tabOn{background:url('../../images/new_storysom/service/service_tab_ov.png') no-repeat; color:#fff; font-weight:bold; background-position: top center; }
.serviceTab a:hover{background:url('../../images/new_storysom/service/service_tab_ov.png') no-repeat; color:#fff; font-weight:bold; background-position: top center; }
.mainText {margin-top:170px; border:0px solid red; text-shadow:1px 1px 2px rgba(0,0,0,0.4);-moz-text-shadow:1px 1px 2px rgba(0,0,0,0.4);-webkit-text-shadow:1px 1px 2px rgba(0,0,0,0.4);}
.mainText h3{color:#fff; font-size:50px; text-align:center;}
.mainText p{color:#fff; font-size:18px; text-align:center; padding-top:5px;}

.msDetail_con{position:relative; width:638px; height:705px; float:left; }
.con_ct {position:absolute; top:277px; left:245px; width:142px; height:87px; background:url('../../images/new_storysom/service/service_bg01.png') no-repeat; font-size:22px; color:#2d7026; font-weight:bold; text-align:center; padding-top:55px;}
.msDetail_con li{width:318px; height:298px; border-right:1px solid #dcdcdc; float:left; float:left; border-bottom:1px solid #dcdcdc; float:left; text-align:center; padding-top:54px;}
/* media queries */
@media screen and (max-width:1280px) {
    .msDetail_con { width:100%; }
    .con_ct { top:50%; left:50%; margin-left:-71px; margin-top:-70px; }
    .msDetail_con li { width:49.87%; }
}
.msDetail_con li h4{font-size:20px; font-weight:bold; color:#0c0c0c;  margin-top:34px;}
.msDetail_con li p {font-size:16px;  margin-top:30px; line-height:140%;}

.msDetail_con2{position:relative; width:640px; height:705px; background:#f2efed; float:right;  border-bottom:1px solid #dcdcdc;}
/* media queries */
@media screen and (max-width:1280px) {
    .msDetail_con2 { width:100%; }
}
.ms_phone_area{position:relative; /* top:65px; left:80px; border:0px solid red; width:480px; height:580px; */ background:url('../../images/new_storysom/service/phone_bg.png') center no-repeat;}
/* .ms_phone_area img{position:absolute; top:78px; left: 27px;} */
a.btn_link_l{position:absolute; top:300px; left:100px;  }
a.btn_link_r{position:absolute; top:300px; right:100px;  }
.msDetail_con2 ul.message_btn{position:absolute;  top:40px; right: 35px; }
.msDetail_con2 ul.message_btn li{width:67px; height:50px; background:url('../../images/new_storysom/service/circle_bg.png') no-repeat; text-align:center; padding-top:22px; border:0px solid red;}
.msDetail_con2 ul.message_btn li.over{background:url('../../images/new_storysom/service/circle_bg_on.png') no-repeat; color:#fff; font-weight:bold;}
.msDetail_con2 ul.message_btn li.over a{color:#fff; font-weight:bold;}
.msDetail_con2 ul.message_btn li:hover{background:url('../../images/new_storysom/service/circle_bg_on.png') no-repeat; cursor:pointer;}
.msDetail_con2 ul.message_btn li:hover a{color:#fff; font-weight:bold;}

.msDetail_con3{clear:both; padding:100px 150px;}
/* media queries */
@media screen and (max-width:1280px) {
    .msDetail_con3 { padding:5em; }
    .msDetail_con3 > img { width:40%; }
}
.msDetail_con3 .msTitle{font-size:25px; font-weight:bold; color:#2c2c2c; }
.msDetail_con3 p{font-size:16px; margin-top:45px; margin-bottom:10px; line-height:1.8;}
.msDetail_con3 span{color:#aeaeae;}
.msDetail_con3 span.service_ms{text-align:center; display:block; margin-top:56px;}
.msDetail_con3 ul{padding-left:5px; font-size:15px; letter-spacing:-2px;}
.msDetail_con3 ul li{height:85px;}
/* media queries */
@media screen and (max-width:1280px) {
    .msDetail_con3 ul { width:55%; }
}

/* SOMMC */
.mcTop{position:relative; width:auto; height:648px; margin:0px; border:0px solid red; background:url('../../images/new_storysom/service/top_img02.jpg') no-repeat;
    background-size: cover; background-position: center center; }
/* media queries */
@media screen and (max-width:1280px) {
    .mcTop { width:950px; }
    .mc_banner li { width:33.2% !important; }
    .mc_banner li:last-child { border-right:0; }
    .mc_banner li img { left:35px !important; }
    .mc_banner li h4,
    .mc_banner li p { left:120px !important; }
}
ul.mc_banner li {position:relative; float:left; border-right:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc; width:425px; height:203px; }
ul.mc_banner li:hover{background:#f7f7f7; }
ul.mc_banner li img{position:absolute; top:62px; left:63px; }
ul.mc_banner li h4{position:absolute; top:46px; left:158px; font-size:22px; font-weight:bold; color:#292929;}
ul.mc_banner li p{position:absolute; top:90px; left:158px; font-size:16px; }
.mainText2 {margin-top:130px; border:0px solid red; text-shadow:1px 1px 2px rgba(0,0,0,0.4);-moz-text-shadow:1px 1px 2px rgba(0,0,0,0.4);-webkit-text-shadow:1px 1px 2px rgba(0,0,0,0.4);}
.mainText2 h3{color:#fff; font-size:50px; text-align:center;}
.mainText2 p{color:#fff; font-size:18px; text-align:center; padding-top:5px;}
.mainText2 a{border:1px solid #fff; border-radius: 5px; color:#fff; padding:13px 40px; font-size:20px; margin-right:5px; }
.mc_btn_area{text-align:center; padding-top:40px;}

/* SOMMC 슬라이드 */
.slider { position: relative; width: 100%; height:100%; overflow: hidden; margin-bottom:-50px; border:0px solid red;}
.slides { position: relative; width: 100%; border:0px solid blue;
    -webkit-backface-visibility: hidden;
    -webkit-transform-style: preserve-3d;

    -webkit-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -moz-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -ms-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    -o-transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
    transition: all 500ms cubic-bezier(0.165, 0.840, 0.440, 1.000);
}
.slide { width: 100%; float: left; }
.slide figure {display: block; width:auto; position: relative; text-align: center; padding:0; margin:0; border:0px solid green; }
.slide figure figcaption { width:100%; position: absolute; top:65px; font-size:30px; text-align: center;  font-weight: bold; color: #393939; border:0px solid red; z-index:99;}
.slide figure p{width:100%; position: absolute; text-transform:uppercase; text-align: center; font-size:16px; top:120px; z-index:99;}
.slide figure img { /* position: relative; text-align:center; border:0px solid red; */ }
.slider-arrow {position: absolute; display: block; text-decoration: none; font-weight: 900; font-size: 3.0em; text-indent:-9999px;}
.slider-arrow--right { width:64px; height:64px; bottom: 50%; right: 0px; background:url('../../images/new_storysom/service/mc_btn_r.jpg') no-repeat;}
.slider-arrow--left { width:64px; height:64px; bottom: 50%; left: 0px; background:url('../../images/new_storysom/service/mc_btn_l.jpg') no-repeat;}

/* 솜포토 */
.spTop{position:relative; width:auto; height:648px; margin:0px; border:0px solid red; background:url('../../images/new_storysom/service/top_img03.jpg') no-repeat;
    background-size: cover; background-position: center center; }
/* media queries */
@media screen and (max-width:1280px) {
    .spTop { width:950px; }
    ul.sp_banner li { width:33.2% !important; }
    ul.sp_banner li:last-child { border-right:0; }
    ul.sp_banner li img { left:20px !important; }
    ul.sp_banner li h4,
    ul.sp_banner li p { left:135px !important; }
}
ul.sp_banner li{position:relative; float:left; border-right:1px solid #dcdcdc; border-bottom:1px solid #dcdcdc; width:425px; height:203px; }
ul.sp_banner li:hover{background:#f7f7f7;}
ul.sp_banner li img{position:absolute; top:43px; left:63px;}
ul.sp_banner li p{position:absolute; top:65px; left:193px; font-size:18px;  color:#505050;}
.spTemplate{text-align:center;}
h2.sp_mtitle{position:relative; font-size:50px; border:0px solid red; margin-top:240px;}

.sp_slideArea{position:relative; border:0px solid red; height:730px; margin-top:50px;}
.centerArea{position:relative;  left:420px; width:396px; height:709px; background:url('../../images/new_storysom/service/sp_phone_bg.png') no-repeat; z-index:99;}
.centerArea img{position:absolute; border:0px solid red; left:65px; top:115px;}
ul.sp_sideimg{ position:absolute; top:100px; border:0px solid red;}
ul.sp_sideimg li{float:left;}
.block_bl{position:absolute; width:100%; height:479px; top:100px; background:#000; opacity:0.3; z-index:90;}
.pdl3{padding-left:3px;}
a.sp_lbtn{position:absolute;  z-index:95; left:0; top:300px;}
a.sp_rbtn{position:absolute;  z-index:95; right:0; top:300px;}


/* 404,500 에러페이지 */

#errorWrap{ position:relative; width:100%; }
div.pageSearch{position:relative; margin:230px auto; width:695px; height:440px;  border-top:1px solid #000; border-bottom:1px solid #000;}
div.contentsArea{position:relative; height:360px; }
div.contentsArea h1{border:0px solid red; text-align:center; margin-top:65px;}
div.contentsArea div.txt01{position:relative; text-align:center; font-size:28px; color:#5e5e5e; margin-top:38px; letter-spacing:-3px; font-weight:400; line-height:130%;}
div.contentsArea div.txt02{text-align:center; color:#696969; font-size:15px; margin-top:23px; letter-spacing:-2px; line-height:160%;}
div.contentsArea div.btnArea{position:relative; margin-top:43px; text-align:center; }
.prevBtn01{border:1px solid #2d7026; color:#2d7026; background:#fff; font-size:14x; padding:4px 20px; cursor:pointer; border-radius:3px; margin-right:5px;}
.prevBtn01:hover,
.prevBtn01:focus,
.prevBtn01:active{ background:#2d7026; color:#fff; }
.nextBtn01{border:1px solid #5b5b5b; color:#5b5b5b; background:#fff; font-size:14x; padding:4px 20px; cursor:pointer; border-radius:3px;}
.nextBtn01:hover,
.nextBtn01:focus,
.nextBtn01:active { background:#5b5b5b; color:#fff;  }
div.footArea{border:0px solid red; text-align:center; padding-top:50px; font-size:11px; letter-spacing:0px; color:#bababa;}
div.footArea span{color:#929292; font-weight:bold;}



@media screen and (max-width:1280px) {


#data-area			{ float:right; width:68%; }
#ab-data-area	 { float:right; width:68%; }



#charge-right ul.pay-type li.bank1 { background:url('../../images/invito/common/money_ico02.jpg') no-repeat center 50px; background-size:180px auto}
#charge-right ul.pay-type li.bank1:hover { background:url('../../images/invito/common/money_ico02_ov.jpg') no-repeat center 50px; background-size:180px auto}
#charge-right ul.pay-type li.card { background:url('../../images/invito/common/money_ico03.jpg') no-repeat center 50px; background-size:180px auto}
#charge-right ul.pay-type li.card:hover { background:url('../../images/invito/common/money_ico03_ov.jpg') no-repeat center 50px; background-size:180px auto}
#charge-right ul.pay-type li.bank2 { background:url('../../images/invito/common/money_ico01.jpg') no-repeat center 50px; background-size:180px auto}
#charge-right ul.pay-type li.bank2:hover { background:url('../../images/invito/common/money_ico01_ov.jpg') no-repeat center 50px; background-size:180px auto}


}


@media screen and (max-width:1100px) {



#phone-area			{ float:left; width:300px; }
#data-area			{ float:right; width:65%; }
#ab-data-area	 { float:right; width:65%; }

.opt-btn-area	{text-align:center}
.opt-btn-area .remove-area  {display:block; width:100%; padding-top:15px;}

}


@media screen and (max-width:960px) {



#phone-area			{ float:left; width:100%; }
#data-area			{ float:left; width:100%; }


.total-num-box	{width:100%; overflow: hidden; padding-top:30px; margin-top:30px; border-top:1px dotted #444}
.opt-btn-area	{text-align:left}
.opt-btn-area .remove-area  {display:inline-block; width:auto; padding-top:0;}

ul.contents-help { padding-left:30px; margin-top:45px; background:url('../../images/new_storysom/common/ico_help.gif') 0 0px no-repeat; }


#add-book { float:left; width:100%; }
#ab-data-area	 { float:left; width:100%; }
#add-book > .group-list { height:250px; overflow-y:scroll; }
#add-book2		{ float:left; width:100%; }
#add-book2 textarea.direct-input { width:94.4%; height:450px; line-height:40px; letter-spacing:0; padding-left:5%; overflow-y:scroll;
    background:url('../../images/new_storysom/message/bg_d-input.gif') 0 0 repeat local;}


.ab-search .tit-area a { margin-left:15px; }
.ab-search-contents { width:100%; margin:0 auto; padding:10px 0 5px 0; border:0px solid red; }
.consonant-select { width:auto; text-align:center; padding:15px 0 5px 0; border-top:1px solid #e1e1e1; }
.consonant-select a	{margin-top:2px}
.search-items { position:relative; width:auto; padding:10px 0 8px 0; border:0px solid red; }
.search-items ul.item { width:87%;}
.search-items ul.item:after { content:""; display:block; clear:both; }
.search-items ul.item li { float:left; width:33.3%; height:33px; border:0px solid red; }
.search-items ul.item li > span { display:inline-block; width:50px; }
.search-items ul.item li > input { width:60%; }
.search-items ul.btn-search-items { position:absolute; top:10px; right:0; width:15%; padding:8px 0 8px 0; border:0px solid green;  text-align:right}


.month-select { position:relative; overflow:hidden; width:100%; margin:0 auto; text-align:center; border:1px solid #ddd; border-top:2px solid #444; padding:20px 0; box-shadow:0px 4px #f0f0f0}



.grap01			{float:left; width:100%; margin:0 0; text-align:center; border-right:0}
.grap02			{float:right; width:100%;  margin:0 0;}

ul.charge-history li { float:left; width:33.2%; height:73px; border-right:1px solid #d9d9d9; l}
ul.charge-history li > div.po-rela { font-size:15px; color:#5b5b5b; line-height:73px; padding:0 30px; }

.cate_sec{color:#2d7026; font-size:14px; display:block; width:100%; float:left; padding-top:2px; padding-bottom:10px}
.cate_sec img{margin-top:-3px;}

/* cscenter */
.csTop{position:relative; width:100%; overflow: hidden}
.csTitle{text-align:center; font-size:45px; color:#121212; font-weight:500}
.csTitle img{vertical-align:top}
.csCenter{width:90%; float:left; border:none; background-color:#f5f5f5; padding:20px 5%;  height:auto}
.cs_txt01{font-size:45px; color:#2d7026;}
.cs_txt02{font-size:14px; color:#666;}
.cs_txt02 span{display:inline-block; width:90px; float:left;}
.csNotice{position:relative; width:100%; float:left;}
.csTitle2 h3{width:200px; color:#2d7026; font-weight:bold; font-size:17px; float:left; padding-left:3px; padding-bottom:8px;}
.csTitle2 p{ float:right; padding-top:7px;}
.csQna{position:relative; width:100%; float:left;}


.bannerArea{position:relative;  width:99.7%; margin-top:20px; float:right; border:1px solid #ddd; background:#fcfcfc; height:220px}
.cs_banner01{position:relative; width:49.8%; border-right:1px solid #dbdbdb;  float:left; height:218px}
.cs_banner01 img{position:absolute;left:50%; top:30px; margin-left:-36px; }
.cs_banner01 h3{position:absolute; top:120px; left:0; font-size:17px; font-weight:bold; color:#474747; text-align:center; width:100%;}
.cs_banner01 p{position:absolute; top:150px; left:0; font-size:14px; line-height:140%;  text-align:center; width:100%;}


.cs_banner02{position:relative; width:50%;  float:left; height:218px}
.cs_banner02 img{position:absolute;left:50%; top:30px; margin-left:-36px; }
.cs_banner02 h3{position:absolute; top:120px; left:0; font-size:17px; font-weight:bold; color:#474747; text-align:center; width:100%;}
.cs_banner02 p{position:absolute; top:150px; left:0; font-size:14px; line-height:140%;  text-align:center; width:90%; padding:0 5%; word-break:keep-all}


#mysom-left { float:left; width:100%; }
#mysom-right { float:left; width:100%; }


#mysom-left ul.unit-cost li { float:left; width:33%; padding:20px 0%; border-right:1px solid #ddd; border-top:1px solid #ddd; text-align:center; font-size:15px; line-height:35px; background-color:#fefefe;  }
#mysom-left ul.unit-cost li:last-child	{border-right:0}


#charge-left { float:left; width:100%; border:1px solid #444; border-radius:10px; box-shadow:0px 3px #999}
#charge-right { float:right; width:100%; margin-top:80px;}


.my-number-list	ul li{width:33.1%; text-align:center; float:left; border-bottom:1px solid #ddd;  font-size:12px;}
.my-number-list	ul li:nth-child(2n){border-lefT:1px solid #ddd; border-right:1px solid #ddd}

}


@media screen and (max-width:760px) {




.line			{display:block}
.opt-btn-area	{text-align:center}
.opt-btn-area .remove-area  {display:block; width:100%; padding-top:15px;}


.search-items ul.item { width:80%;}
.search-items ul.item:after { content:""; display:block; clear:both; }
.search-items ul.item li { float:left; width:50%; height:33px; border:0px solid red; }
.search-items ul.item li > span { display:inline-block; width:50px; }
.search-items ul.item li > input { width:50%; }
.search-items ul.btn-search-items { position:absolute; top:10px; right:0; width:20%; padding:8px 0 8px 0; border:0px solid green;  text-align:right}



#q-list-area { float:left; width:100%; border:0px solid red; }
#q-list-info { float:left; width:100%; margin-top:15px; border:0px solid red; }


ul.charge-history { width:auto; height:73px; border:1px solid #d9d9d9; margin-bottom:20px; }
ul.charge-history li { float:left; width:33%; height:73px; border-right:1px solid #d9d9d9; }
ul.charge-history li > div.po-rela { font-size:14px; color:#5b5b5b; line-height:73px; padding:0 25px; }
ul.charge-history li > div.po-rela span.num,
ul.charge-history li > div.po-rela span.num2 { float:right; font-weight:500; border:0px solid red; }
ul.charge-history li > div.po-rela span.num strong { font-size:18px; }
ul.charge-history li > div.po-rela span.num2 { color:#2d7026; }
ul.charge-history li > div.po-rela span.num2 strong { font-size:18px;}
ul.charge-history li:last-child { border-right:0; background-color:#fcfcfc; }
ul.charge-history .ico-sum1 { position:absolute; top:25px; right:-12px; width:25px; height:25px; background:url('../../images/invito/common/ico_sum.png') 0 0 no-repeat; background-size:50px auto }
ul.charge-history .ico-sum2 { position:absolute; top:25px; right:-12px; width:25px; height:25px; background:url('../../images/invito/common/ico_sum.png') -25px 0px no-repeat;background-size: 50px auto }
.contact-num input { width:40px; text-align:center; }

.bannerArea{position:relative;  width:99.5%; margin-top:20px; float:right; border:1px solid #ddd; background:#fcfcfc; height:auto}
.cs_banner01{position:relative; width:100%; border-right:none; border-bottom:1px solid #ddd;  float:left; height:210px}
.cs_banner01 img{position:absolute;left:50%; top:30px; margin-left:-36px; }
.cs_banner01 h3{position:absolute; top:120px; left:0; font-size:17px; font-weight:bold; color:#474747; text-align:center; width:100%;}
.cs_banner01 p{position:absolute; top:150px; left:0; font-size:14px; line-height:140%;  text-align:center; width:100%;}


.cs_banner02{position:relative; width:100%;  float:left; height:210px}
.cs_banner02 img{position:absolute;left:50%; top:30px; margin-left:-36px; }
.cs_banner02 h3{position:absolute; top:120px; left:0; font-size:17px; font-weight:bold; color:#474747; text-align:center; width:100%;}
.cs_banner02 p{position:absolute; top:150px; left:0; font-size:14px; line-height:140%;  text-align:center; width:90%; padding:0 5%; word-break:keep-all}

.csTitle{text-align:center; font-size:30px; color:#121212; font-weight:500}
 
 .pchidden	{display:none}


#charge-right ul.pay-type { width:100%; margin:0 auto;  background-color:#fff;  }
#charge-right ul.pay-type li { float:left; display:block; width:32%; margin-right:2%;  text-align:center;   }
#charge-right ul.pay-type li:last-child	{margin-right:0}
#charge-right ul.pay-type li:hover a { color:#2d7026;  border:1px solid #2d7026; box-shadow:0px 3px #aaa}
#charge-right ul.pay-type li a { display:block; width:99%; height:60px; padding-top:150px; border-radius:10px; color:#7d7d7d; font-size:20px; border:1px solid #d9d9d9;}
#charge-right ul.pay-type li.bank1 { background:url('../../images/invito/common/money_ico02.jpg') no-repeat center 25px; background-size:150px auto}
#charge-right ul.pay-type li.bank1:hover { background:url('../../images/invito/common/money_ico02_ov.jpg') no-repeat center 25px; background-size:150px auto}
#charge-right ul.pay-type li.card { background:url('../../images/invito/common/money_ico03.jpg') no-repeat center 25px; background-size:150px auto}
#charge-right ul.pay-type li.card:hover { background:url('../../images/invito/common/money_ico03_ov.jpg') no-repeat center 25px; background-size:150px auto}
#charge-right ul.pay-type li.bank2 { background:url('../../images/invito/common/money_ico01.jpg') no-repeat center 25px; background-size:150px auto}
#charge-right ul.pay-type li.bank2:hover { background:url('../../images/invito/common/money_ico01_ov.jpg') no-repeat center 25px; background-size:150px auto}


.outcome-list-tlt { height:auto; overflow-y:scroll; }


}

@media screen and (max-width:680px) {

ul.charge-history { width:auto; height:219px; border:1px solid #d9d9d9; margin-bottom:20px; overflow: hidden}
ul.charge-history li { float:left; width:100%; height:73px; border-bottom:1px solid #d9d9d9; }
ul.charge-history li > div.po-rela { font-size:14px; color:#5b5b5b; line-height:73px; padding:0 20px; }
ul.charge-history li > div.po-rela span.num,
ul.charge-history li > div.po-rela span.num2 { float:right; font-weight:500; border:0px solid red; }
ul.charge-history li > div.po-rela span.num strong { font-size:18px; }
ul.charge-history li > div.po-rela span.num2 { color:#2d7026; }
ul.charge-history li > div.po-rela span.num2 strong { font-size:18px;}
ul.charge-history li:last-child { border-bottom:1px solid #d9d9d9;  background-color:#fcfcfc; }
ul.charge-history .ico-sum1 { position:absolute; top:60px; right:50%; width:25px; height:25px; background:url('../../images/invito/common/ico_sum.png') 0 0 no-repeat; background-size:50px auto }
ul.charge-history .ico-sum2 { position:absolute; top:60px; right:50%; margin-left:-12px; width:25px; height:25px; background:url('../../images/invito/common/ico_sum.png') -25px 0px no-repeat;background-size: 50px auto }
.contact-num input { width:40px; text-align:center; }


}


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


.opt-btn-area { position:relative; margin:10px 0 30px 0; padding:15px 5px; border:1px solid #ddd; border-top:2px solid #444; box-shadow:0 5px #f1f1f1;  }
.pop-btn1 {padding-left:35px; padding-right:10px;}
.pop-btn2 {min-width:40px; padding:0 5px;}




.tabmenu2-1 ul li { float:left; display:inline; font-size:14px; height:30px; line-height:30px; width:49.5%;  background:#fcfcfc;
    border-top:1px solid #cecece; border-right:1px solid #cecece; }
.tabmenu2-1 ul li.on { solid #2d7026;  font-size:14px; background-color:#2d7026; color:#fff}


.characters_box				{height:130px; overflow-y:scroll}


#charge-right ul.pay-type { width:100%; margin:0 auto;  background-color:#fff;  }
#charge-right ul.pay-type li { float:left; display:block; width:32%; margin-right:2%;  text-align:center;   }
#charge-right ul.pay-type li:last-child	{margin-right:0}
#charge-right ul.pay-type li:hover a { color:#2d7026;  border:1px solid #2d7026; box-shadow:0px 3px #aaa}
#charge-right ul.pay-type li a { display:block; width:99%; height:50px; padding-top:120px; border-radius:10px; color:#7d7d7d; font-size:18px; border:1px solid #d9d9d9;}
#charge-right ul.pay-type li.bank1 { background:url('../../images/invito/common/money_ico02.jpg') no-repeat center 20px; background-size:110px auto}
#charge-right ul.pay-type li.bank1:hover { background:url('../../images/invito/common/money_ico02_ov.jpg') no-repeat center 20px; background-size:110px auto}
#charge-right ul.pay-type li.card { background:url('../../images/invito/common/money_ico03.jpg') no-repeat center 20px; background-size:110px auto}
#charge-right ul.pay-type li.card:hover { background:url('../../images/invito/common/money_ico03_ov.jpg') no-repeat center 20px; background-size:120px auto}
#charge-right ul.pay-type li.bank2 { background:url('../../images/invito/common/money_ico01.jpg') no-repeat center 20px; background-size:110px auto}
#charge-right ul.pay-type li.bank2:hover { background:url('../../images/invito/common/money_ico01_ov.jpg') no-repeat center 20px; background-size:110px auto}


.my-number-list	ul li{width:33%; text-align:center; float:left; border-bottom:1px solid #ddd;  font-size:12px;}

}