간단 설명


@charset "UTF-8";
/* common */
.dialog .dim,
#dim {background-color:#000; position:fixed; left:0; top:0; right:0; bottom:0; opacity:0; z-index:-1; pointer-events:none;
	-webkit-transition:opacity .3s ease-in .2s, z-index 0s ease .5s; 
	transition: opacity .3s ease-in .2s, z-index 0s ease .5s; 
}
.dialog.active .dim,
#dim.active { 
	z-index:150;
	opacity:.7;
	-webkit-transition:opacity .3s ease 0s, z-index 0s; 
	transition:opacity .3s ease 0s, z-index 0s; 
	-webkit-pointer-events:auto;
	pointer-events:auto;
}

/* Accordion : 트랜지션 추가 예정 */
.accordion .content .item {display:none;}
.accordion .content.active .item {display:block;}

/* Transition-nav */
#gnb {
	width:80%;
	will-change: transform;
	visibility:hidden;
	-webkit-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0);
	-webkit-transition: -webkit-transform .5s ease, visibility 0s linear .5s;
	transition: transform .5s ease, visibility 0s linear .5s;
}
#container.active #gnb {
	visibility:visible;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-transition: -webkit-transform .5s ease, visibility 0s linear 0s;
	transition:-webkit-transform .5s ease, visibility 0s linear 0s;
}
.menuClose {
	visibility:hidden;
	position:fixed; left:85%; top:17px; 
	z-index:160; 
	opacity:0; 
	pointer-events:none; 
	width:17px; height:17px; 
	font:0/0 a; text-align:center; 
	background-image:url('/static/images/common/icon_sprite.png'); 
	background-position:-125px 0; 
	background-repeat:no-repeat; 
	background-size:360px auto; 

	-webkit-transform: translate3d(-100%,0,0);
	transform: translate3d(-100%,0,0);
	-webkit-transition: -webkit-transform .5s ease, visibility 0s linear .5s, opacity 0.3s;
	transition: transform .5s ease, visibility 0s linear .5s, opacity 0.3s;

}
#container.active .menuClose {
	visibility:visible; 
	opacity:1;
	-webkit-transform: translate3d(0,0,0);
	transform: translate3d(0,0,0);
	-webkit-transition: -webkit-transform .5s ease, visibility 0s linear 0s, opacity 0.3s;
	transition:-webkit-transform .5s ease, visibility 0s linear 0s, opacity 0.3s;

}

/* Dialog */
.clearfix:before, .clearfix:after { content: ''; display: table; }
.clearfix:after { clear: both; }
.dialog,
.dim {
	display:block;
	width: 100%;
	height: 100%;
	top: 0;
	left: 0;
}
.toast,
.dialog {
	z-index:250;
	position: fixed;
	pointer-events: none;
	/*-webkit-visibility: hidden;
	visibility: hidden; 이거 쓰면 딤 사라질때 띡 사라짐*/
}
.dialog.active {
	/*-webkit-visibility: visible;
	visibility:visible;*/
}

.dialog a, .dialog button {
	color: #74716D;
	text-decoration: none;
	outline: none;
}

.dialog a:hover, .dialog a:focus {
	outline: none;
}
.btnDialog {
	font-size:2rem;
	padding:1rem 2.5rem;
	color:#fff;
	background-color:cadetblue;
}
.btnDialog:active,
.btnDialog:hover {
	background-color:darkcyan;
}
.dialog .layout {
	z-index:300;
	background-color:#fff;
	position:relative;
	pointer-events:auto;
}
.dialog.active .layout {
	opacity:1;
}


/* type1 : 아래에서 위로 서서히  */
.dialog.type1 .layout {

}
.dialog.type1.active .layout { 
	-webkit-animation-duration: 0.3s;
	animation-duration: 0.3s;
	-webkit-animation-fill-mode: forwards;
	animation-fill-mode: forwards;
	-webkit-animation-name:dia1-open;
	animation-name:dia1-open;
}

@-webkit-keyframes dia1-open {
	0% { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); }
	100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}

@keyframes dia1-open {
	0% { opacity: 0; -webkit-transform: translate3d(0, 50px, 0); transform: translate3d(0, 50px, 0); }
	100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

@-webkit-keyframes diacon1 {
	0% { opacity: 0; -webkit-transform: translate3d(0, 25px, 0); }
	100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); }
}

@keyframes diacon1 {
	0% { opacity: 0; -webkit-transform: translate3d(0, 25px, 0); transform: translate3d(0, 25px, 0); }
	100% { opacity: 1; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); }
}

/* type2 : 가운데에서 서서히 나타남 */
.dialog.type2.active .layout {
	-webkit-animation-duration: 0.5s;
	animation-duration: 0.5s;
	-webkit-animation-fill-mode: backwards;
	animation-fill-mode: backwards;
}

.dialog.type2.active .layout {
	-webkit-animation-name: dia2-open;
	animation-name: dia2-open;
}

@-webkit-keyframes dia2-open {
	0% { opacity: 0; -webkit-transform: scale3d(1.1, 1.1, 1); }
	100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); }
}

@keyframes dia2-open {
	0% { opacity: 0; -webkit-transform: scale3d(1.1, 1.1, 1); transform: scale3d(1.1, 1.1, 1); }
	100% { opacity: 1; -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); }
}

/* Dialog toLeft : 오른쪽에서 나타남*/
.dialog.toLeft {
}
.dialog.toLeft .dim {
	opacity:0;
	-webkit-transition:opacity .5s ease-in .2s; 
	transition: opacity .5s ease-in .2s; 
}
.dialog.toLeft.active .dim {
	opacity:.7;
	visibility: visible;
	-webkit-transition:opacity .5s ease 0s; 
	transition:opacity .5s ease 0s; 
}
.dialog.toLeft .layout {
	opacity:1;
	z-index:250;
	pointer-events:none;
	-webkit-transform: translate3d(100%, 0, 0);
	transform: translate3d(100%, 0, 0);
	-webkit-transition: -webkit-transform .5s ease;
	transition:transform .5s ease;
}
.dialog.toLeft.active .layout {
	pointer-events:auto;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

/* Dialog page.toTop : 아래에서 맨위까지*/
.dialog.page.toTop {
	pointer-events:none;
}
.dialog.page.toTop.active {
	pointer-events:auto;
}
.dialog.page.toTop .dim {
	opacity:0;
	-webkit-transition:opacity .5s ease-in .2s; 
	transition: opacity .5s ease-in .2s; 
}
.dialog.page.toTop.active .dim {
	opacity:.7;
	-webkit-transition:opacity .5s ease 0s; 
	transition:opacity .5s ease 0s; 
}
.dialog.page.toTop .layout {
	opacity:0;
	z-index:250;
	pointer-events:none;
	-webkit-transform: translate3d(0, 100%, 0);
	transform: translate3d(0, 100%, 0);
	-webkit-transition: all .5s ease;
	transition:all .5s ease;
}
.dialog.page.toTop.active .layout {
	opacity:1;
	pointer-events:auto;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}

/* Dialog toTop : 맨밑에 딱 붙음 */
.dialog.toTop.active {
	display:block;
}
.dialog.toTop .layout {
	position:fixed; left:0; bottom:0; width:100%;
	visibility:hidden;
	-webkit-transition: -webkit-transform .5s ease, visibility 0s linear 1s;
	transition:transform .5s ease, visibility 0s linear 1s;
	-webkit-transform: translateY(100%);
	transform: translateY(100%);
}
.dialog.toTop.active .layout {
	visibility:visible;
	-webkit-transition: -webkit-transform .4s ease, visibility 0s linear 0s;
	transition:transform .4s ease, visibility 0s linear 0s;
	-webkit-transform: translateY(0);
	transform: translateY(0);
}
.dialog.toTop .layout .dialogClose {
	display:none;
}
.dialog.toTop.active .layout .dialogClose {
	display:block;
}
.dialog.toTop .dim {
	opacity:0;
	-webkit-transition:opacity .2s ease .4s; 
	transition: opacity .2s ease .4s; 
}
.dialog.toTop.active .dim {
	opacity:.7;
	-webkit-transition: opacity .2s ease 0s;
	transition: opacity .2s ease 0s;
	-webkit-pointer-events:auto;
	pointer-events:auto;
}

/* Dialog toBottom : 맨위에서 아래로 */
.dialog.toBottom.active {
	display:block;
}
.dialog.toBottom .layout {
	opacity:0;
	z-index:250;
	pointer-events:none;
	-webkit-transform: translate3d(0, -100%, 0);
	transform: translate3d(0, -100%, 0);
	-webkit-transition: all .5s ease;
	transition:all .5s ease;
}
.dialog.toBottom.active .layout {
	opacity:1;
	pointer-events:auto;
	-webkit-transform: translate3d(0, 0, 0);
	transform: translate3d(0, 0, 0);
}
/*.dialog.toBottom .layout .dialogClose {
	display:none;
}
.dialog.toBottom.active .layout .dialogClose {
	display:block;
}*/
.dialog.toBottom .dim {
	opacity:0;
	-webkit-transition:opacity .2s ease .4s; 
	transition: opacity .2s ease .4s; 
}
.dialog.toBottom.active .dim {
	opacity:.7;
	-webkit-transition: opacity .2s ease 0s;
	transition: opacity .2s ease 0s;
	-webkit-pointer-events:auto;
	pointer-events:auto;
}

.dialog.page .layout {position:relative;}

/* 일회용 Dialog : 나타났다 사라짐. 이건 딤없어야함*/
.toast .layout{
	opacity:0;
}
.toast.active .layout { 
	opacity:1;
	animation: animationFrames ease 2s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	animation-fill-mode:forwards; 
	-webkit-animation: animationFrames ease 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
	-webkit-transition: -webkit-transform .5s ease-in-out;
	transition:transform .5s ease-in-out;
}
@keyframes animationFrames{
  0% {
    opacity:1;
    transform:  translate3d(0,1500px,0)  ;
  }
  30% {
    opacity:1;
    transform:  translate3d(0,-10px,0)  ;
  }

  60% {
	opacity:1;
    transform:  translate3d(0,10px,0)  ;
  }

  100% {
    opacity:0;
    transform:  translate3d(0,-100%,0)  ;
  }
}

@-webkit-keyframes animationFrames {
  0% {
    opacity:1;
    -webkit-transform:  translate3d(0,1500px,0)  ;
  }
  30% {
    opacity:1;
    -webkit-transform:  translate3d(0,-10px,0)  ;
  }

  60% {
	opacity:1;
    -webkit-transform:  translate3d(0,10px,0)  ;
  }

  100% {
    opacity:0;
    -webkit-transform:  translate3d(0,-100%,0)  ;
  }
}
.toast.showAni .layout { 
	opacity:1;
	animation: showAni ease 2s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	animation-fill-mode:forwards; 
	-webkit-animation: showAni ease 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
	-webkit-transition: -webkit-transform .5s ease-in-out;
	transition:transform .5s ease-in-out;
}
@keyframes showAni{
  0% {
    opacity:1;
    transform:  translate3d(0,1500px,0)  ;
  }
  30% {
    opacity:1;
    transform:  translate3d(0,-10px,0)  ;
  }
60% {
    opacity:1;
    -webkit-transform:  translate3d(0,0,0)  ;
  }
}

@-webkit-keyframes showAni {
  0% {
    opacity:1;
    transform:  translate3d(0,1500px,0)  ;
  }
  30% {
    opacity:1;
    transform:  translate3d(0,-10px,0)  ;
  }
60% {
    opacity:1;
    -webkit-transform:  translate3d(0,0,0)  ;
  }
}

.toast.hideAni .layout { 
	opacity:1;
	animation: hideAni ease 2s;
	animation-iteration-count: 1;
	transform-origin: 50% 50%;
	animation-fill-mode:forwards; 
	-webkit-animation: hideAni ease 2s;
	-webkit-animation-iteration-count: 1;
	-webkit-transform-origin: 50% 50%;
	-webkit-animation-fill-mode:forwards; /*Chrome 16+, Safari 4+*/ 
	-webkit-transition: -webkit-transform .5s ease-in-out;
	transition:transform .5s ease-in-out;
}
@keyframes hideAni{
	0% {
    opacity:1;
    -webkit-transform:  translate3d(0,0,0)  ;
  }
  30% {
	opacity:1;
    transform:  translate3d(0,10px,0)  ;
  }

  100% {
    opacity:0;
    transform:  translate3d(0,-100%,0)  ;
  }
}

@-webkit-keyframes hideAni {
  0% {
    opacity:1;
    -webkit-transform:  translate3d(0,0,0)  ;
  }
  30% {
	opacity:1;
    transform:  translate3d(0,10px,0)  ;
  }

  100% {
    opacity:0;
    transform:  translate3d(0,-100%,0)  ;
  }
}
.toast.active .layout {
}
.toast .layout .body {
	display:inline-block;
    width: 100%;
}

/* Dialog Center */
.dialog.toCenter {}
.dialog.toCenter .dim {position:absolute; opacity:0; display:block;}
.dialog.toCenter.active .dim {opacity:.7;}
.dialog.toCenter .layout {
	visibility:hidden;
	-webkit-transform:translate3d(0,1000px,0);
	transform:translate3d(0,1000px,0);
	-webkit-transition: -webkit-transform .5s ease, visibility 0s linear .5s;
	transition:transform .5s ease, visibility 0s linear .5s;
}
.dialog.toCenter.active .layout {
	visibility:visible;
	-webkit-transform:translate3d(0,0,0);
	transform:translate3d(0,0,0);
	-webkit-transition:-webkit-transform .4s ease, visibility 0s linear 0s;
	transition:-webkit-transform .4s ease, visibility 0s linear 0s;
}

/* 즐겨찾기 아이콘 */
/*
.bookmark.transition,
.bookmark.transition i,
.bookmark.transition i:after {display:inline-block; width:18px; height:18px; vertical-align:top; font:0/0 a; background-repeat:no-repeat; background-position:0 0; background-size:18px auto; pointer-events:none;}
.bookmark.transition {background-image:url('/static/images/common/star_blank_36x36.png'); }
.bookmark.transition i {position:relative; background-image:url('/static/images/common/star_active_36x36.png');}
.bookmark.transition.active i {opacity:1;}

.bookmark.transition i {
	opacity:0;
	-webkit-transition: all .5s ease;
	transition:all .5s ease;
}
.bookmark.transition.active i {
	opacity:1;
	-webkit-transition: all .5s ease;
	transition:all .5s ease;
}
.bookmark.transition i:after {
	opacity:0;
	position:absolute; left:0; top:0; right:0; bottom:0;
	background-image:url('/static/images/common/star_active_36x36.png');
	-webkit-transition: all .5s ease;
	transition:all .5s ease;
	-webkit-animation: bookmark 1s 1 ease;
	animation: bookmark 1s 1 ease;
}
.bookmark.transition.active i:after {
	content:'';
	opacity:1;
	position:absolute; left:0; top:0;
	-webkit-animation: bookmark 1s 1 ease;
	animation: bookmark 1s 1 ease;
}

@-webkit-keyframes bookmark {
	0% { -webkit-transform:scale(0); transform:scale(0); opacity:0;}
	50% { -webkit-transform:scale(1.4); transform:scale(1.4); opacity:1;}
	100% { -webkit-transform:scale(0); transform:scale(0); opacity:0;}
}*/

'Static > style' 카테고리의 다른 글

shop.css  (0) 2021.02.19
office.css  (0) 2021.02.19
module.css  (0) 2021.02.19
member.css  (0) 2021.02.19
media_query.css  (0) 2021.02.19

간단 설명


@charset "UTF-8";

/* 상품리스트 */
.products{padding:0 15px}
.products .bar{position:relative;height:40px;margin:10px 0}
.products .bar .text{line-height:40px;color:#333}
.products .controls .icon.check{margin-right:4px}
.products .controls .viewType{display:inline-block;position:absolute;right:0;top:0;border:1px solid #c6c6c6;border-radius:2px;background-color:#fff}
.products .controls .viewType:after{content:'';display:block;clear:both}
.products .controls .viewType button{float:left;width:40px;height:38px;padding:0;font:0/0 a}
.products .controls .viewType button:first-child{border-right:1px solid #c6c6c6;border-radius:2px 0 0 2px}
.products .controls .viewType .icon.list{margin-top:11px}
.products .controls .productFilter .row{display:table;width:100%;margin-top:0;padding-top:10px}
.products .controls .productFilter .row + .row{padding-top:5px}
.products .controls .productFilter .row .col1{display:table-cell;width:49%;height:auto;padding:0;box-sizing:border-box}
.products .controls .productFilter .checkbox,
.products .controls .productFilter .radio{position:relative;display:block;width:100%;height:100%}
.products .controls .productFilter .checkbox label,
.products .controls .productFilter .radio label{display:inline-flex;width:100%;height:100%;padding:0 10px;align-items:center;justify-content:space-between;box-sizing:border-box;letter-spacing:-.5px}
.products .controls .productFilter .checkbox label i,
.products .controls .productFilter .radio label i{display:none;flex:none;width:16px;height:11px;margin:0 0 0 4px;background-size:360px auto;background-position:-50px 0;background-image:url('/kr/m/static/images/common/icon_sprite.png');pointer-events:none}
.products .controls .productFilter .checkbox input[type='checkbox']:checked ~ label,
.products .controls .productFilter .checkbox input[type='radio']:checked ~ label,
.products .controls .productFilter .radio input[type='radio']:checked ~ label{color:#00b6f0}
.products .controls .productFilter .checkbox input[type='checkbox']:checked ~ label:after,
.products .controls .productFilter .checkbox input[type='radio']:checked ~ label:after,
.products .controls .productFilter .radio input[type='radio']:checked ~ label:after{content:'';display:block;position:absolute;left:-1px;top:-1px;right:-1px;bottom:-1px;border:1.5px solid #00b6f0}
.products .controls .productFilter .checkbox input[type='checkbox']:checked ~ label i,
.products .controls .productFilter .checkbox input[type='radio']:checked ~ label i,
.products .controls .productFilter .radio input[type='radio']:checked ~ label i{display:block}

.products .controls .productFilter .checkbox input[type='checkbox'] ~ span{position:absolute;left:inherit;right:10px;top:7px}
.products .controls .productFilter .checkbox input[type='checkbox']:checked ~ span{opacity:1;background-position:-50px 0}
.products .controls .productFilter .row .col2{display:table-cell;width:50%;padding-left:6px;vertical-align:top;box-sizing:border-box}
.products .controls .productFilter .select[data-value]:before{left:10px;text-align:left}

.products .card > li > div,
.products .list > li > div{position:relative;background-color:#fff;border:1px solid #e2e2e2;border-radius:2px}
.products .info{overflow:hidden;box-sizing:border-box}
.products .info .name{display:block}
.products .info .name a{height:45px;line-height:1.4;font-size:15px;color:#333;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;text-overflow:ellipsis;overflow:hidden}
.products .info .name .label{display:inline-flex;min-width:24px;height:15px;font-size:10px;color:#fff;line-height:1;text-align:center;justify-content:center;align-items:center;vertical-align:middle;border-radius:2px}
.products .info .name .label.limit{background-color:#97c98c}
.products .info .name .label.season{background-color:#928cc9}
.products .info .thumb img{width:100%}
.products .info .thumb a{display:block}
.products .info .new{position:absolute;z-index:1}
.products .info .disable{position:absolute;width:120px;height:120px;background-color:rgba(0,0,0,.5);border-radius:50%;text-align:center;overflow:hidden;box-sizing:border-box;pointer-events:none}
.products .info .disable.sm{width:82px;height:82px}
.products .info .disable .icon.soldOut01.md{margin-top:43px}
.products .info .disable .icon.soldOutH.md{margin-top:43px}
.products .info .disable .icon.soldOutC.md{margin-top:43px}
.products .info .disable .icon.sellOut01.md{margin-top:43px}
.products .info .tax{display:block;font-size:11px;color:#999}
.products .info .price{line-height:1.3}
.products .info .price dd{font-size:13px}
.products .info .price dd strong{font-size:17px;color:#333}
.products .info .price dd .primary{color:#00b6f0}
.products .row{position:relative;height:40px;margin-top:12px}
.products .row.quantity{padding-right:60px;float:right}
.products .row.quantity .btn{position:absolute;right:0;top:0;width:50px;padding:0}
.products .row.quantity .btn .icon.cart{vertical-align:text-top}
.products .info .row.options{float:right;max-width:55%}
.products .box.primary{height:40px;margin-top:12px;padding-top:9px;white-space:nowrap;font-size:14px;text-align:center;box-sizing:border-box}

.products .card:after{content:'';display:block;clear:both}
.products .card > li{float:left;width:50%;margin-bottom:6px;padding-right:3px;border-radius:2px;box-sizing:border-box}
.products .card > li:nth-child(2n){padding-right:0;padding-left:3px}
.products .card > li > div{padding-bottom:15px;box-sizing:border-box}
.products .card .info{position:relative}
.products .card .info .thumb{display:block;padding-top:100%}
.products .card .info .thumb a{position:absolute;left:0;top:0;right:0;text-align:center;overflow:hidden; margin-bottom:10px; box-sizing:border-box}
.products .card .info .fix{position:relative;height:139px;padding:0 15px;box-sizing:border-box}
.products .card .info .fix .row{position:absolute;right:0;bottom:0;left:0;display:block;width:auto;margin:0 15px;max-width:none}
.products .card .info .fix .row .col{display:block}
.products .card .info .name{display:block;height:38px;margin:8px 0 9px 0}
.products .card .info .name a{-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;text-overflow:ellipsis;overflow:hidden}
.products .card .info .new{right:15px;top:10px;pointer-events:none}
.products .card .info .price dt{line-height:1.5;font-size:12px;margin-right:5px}
.products .card .info .price dd{display:block;font-size:13px;color:#666;line-height:1.2}
.products .card .info .price dd em{font-size:18px;color:#333}
.products .card .info .price.point em{color:#04a7e0}
.products .card .info .disable{left:50%;top:25px;margin-left:-60px}

.products .list{margin-bottom:9px}
.products .list > li{margin-bottom:6px}
.products .list > li > div{position:relative;height:135px;padding-left:130px;box-sizing:border-box}
.products .list.sm > li > div{height:120px;padding-left:120px}
.products .list.sm.expand > li > .body{min-height:116px;height:auto;padding-left:0;border-top:none}
.products .list.sm.expand .body .info{padding-left:120px}
.products .list.expand .footer{position:static;height:40px;margin:0;padding:0;border-top:none}
.products .list.expand .footer.row{display:table;width:100%;min-height:0}
.products .list.expand .footer.row .col{display:table-cell}
.products .list.expand .footer.row .col:first-child{border-left:none}
.products .list.expand .footer.row .col:first-child:last-child{width:100%}
.products .list.expand .footer.row .col:last-child:nth-child(2){width:50%}
.products .list.expand .footer.row .col:first-child:nth-last-child(2){width:50%}
.products .list.expand .footer.row .col:last-child:nth-child(3){width:33.3333%}
.products .list.expand .footer.row .col:first-child:nth-last-child(3){width:33.3333%}
.products .list.expand .footer.row .col:nth-child(2):nth-last-child(2){width:33.3333%}
.products .list.expand .footer.row .col .btn{width:100%;padding-top:1px;border:none;font-size:13px;color:#666;border-left:1px solid #e2e2e2;box-sizing:border-box}
.products .list.expand .footer.row .col:first-child .btn{border-left:none}

.products .list.least.expand > li > .body{min-height:auto;height:auto}
.products .list.least.expand .body{padding-left:0}
.products .list.least.expand .body .info{padding-left:0}
.products .list.least .info .fix{padding:13px}
.products .list.least .info .name{height:auto;max-height:45px}

.products .list .checkbox{position:absolute;left:7px;top:7px}
.products .list .info .new{left:70px;top:10px}
.products .list .info .thumb{position:absolute;left:8px;top:13px;width:150px;height:150px}
.products .list .info .thumb.resize{width:110px;height:110px}
.products .list .info .thumb.sm{width:100px;height:100px}
.products .list .info .thumb a{height:100%}
.products .list .info .fix{padding:13px 10px 0 0}
.products .list .info .name{height:45px;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;text-overflow:ellipsis;overflow:hidden}
.products .list .info .name .square{display:inline-block;margin-right:5px;padding:2px 2px 0;line-height:1.3;color:#999;border:1px solid #999;vertical-align:text-top;font-size:11px}
.products .list .info .name .square.single{color:#f9993b;border:1px solid #f9993b}
.products .list .info .name .square.center{color:#00b6f0;border:1px solid #00b6f0}
.products .list .info .reconts{float:left;margin-top:8px}
.products .list .info .price dt{line-height:1.5;margin-right:5px}
.products .list .info .disable{left:17px;top:25px;width:90px;height:90px}
.products .list .info .disable .icon.soldOut01{background-image:url('/static/images/common/icon_soldout01.png'); background-repeat:no-repeat;background-size:360px auto}
.products .list .info .disable .icon.soldOut01.md{width:64px;height:40px;margin-top:30px;background-position:0 0}
.products .list .info .disable .icon.soldOutTHH{background-image:url('/static/th/th-th/images/common/soldout_house.png'); background-repeat:no-repeat;background-size:360px auto}
.products .list .info .disable .icon.soldOutTHH.md{width:64px;height:40px;margin-top:30px;background-position:0 0}
.products .list .info .disable .icon.soldOutTHC{background-image:url('/static/th/th-th/images/common/soldout_center.png'); background-repeat:no-repeat;background-size:360px auto}
.products .list .info .disable .icon.soldOutTHC.md{width:64px;height:40px;margin-top:30px;background-position:0 0}
.products .list .info .disable .icon.soldOutTHH2{background-image:url('/static/th/en-th/images/common/soldout_house_en.png'); background-repeat:no-repeat;background-size:360px auto}
.products .list .info .disable .icon.soldOutTHH2.md{width:64px;height:40px;margin-top:30px;background-position:0 0}
.products .list .info .disable .icon.soldOutTHC2{background-image:url('/static/th/en-th/images/common/soldout_center_en.png'); background-repeat:no-repeat;background-size:360px auto}
.products .list .info .disable .icon.soldOutTHC2.md{width:64px;height:40px;margin-top:30px;background-position:0 0}
.products .list .info .disable .icon.sellOut01{background-image:url('/static/images/common/icon_soldout01.png'); background-repeat:no-repeat;background-size:360px auto}
.products .list .info .disable .icon.sellOut01.md{width:64px;height:40px;margin-top:30px;background-position:0 0}
.products .list .row.btns.rebtns{float:right;width:56%}

.products .list .info .price strong{font-size:17px}
.products .list .total{padding:0 15px;margin-top:11px}
.products .list .total dl{height:35px;line-height:36px;padding:0 10px;margin-top:2px;overflow:hidden}
.products .list .total dl:after{content:'';display:block;clear:both}
.products .list .total dl dt{float:left;width:37px;text-align:left}
.products .list .total dl dd{float:left;font-size:13px}
.products .list .total dl dd.sum{float:right;line-height:35px}
.products .list .total dl dd.sum strong{font-size:15px}
.products .list .total dl dd.sum .equals{margin-right:18px}
.products .list .total dl dd .mark{margin:0 10px}
.products .list .btn.remove{position:absolute;right:5px;top:5px;padding:10px}
.products .list .icon.remove{vertical-align:top}
.products .list .right{position:absolute;right:15px;top:85px;font-size:13px}
.products .list.sm .right{top:81px}
.products .list .right:after{content:'';display:block;clear:both}
.products .list .right dt{float:left;font-size:13px;margin-right:4px}
.products .list .right dd{float:left;font-size:13px}
.products .list .head{border-bottom:none;border-radius:0}
.products .list .head:after{content:'';display:block;clear:both}
.products .list.sm > li > .head,
.products .list .head{height:45px;min-height:0;padding:10px;background-color:#f3f9fb;box-sizing:border-box}
.products .list .head .state{padding:2px 8px 2px 8px;margin-right:5px;background-color:#94999f;color:#fff;border-radius:17px}
.products .list .head .state.primary{background-color:#52d3fc}
.products .list .head .code a{color:#333;font-size:15px}
.products .list .head time{float:right;padding-top:3px;font-size:12px;color:#999}
.listHappo{font-weight:bold}

.products .list > li > div.mconstant{height:166px}
.products .list > li > div.mconstant .info .reconts{margin-top:0;float:none}
.products .list > li > div.mconstant .row.btns{width:100%}
.products .list > li > div.mconstant .info .thumb{top:28px}

.products .list .footer{position:absolute;left:0;right:0;bottom:0;height:40px;border-top:1px solid #e2e2e2;box-sizing:border-box}
.products .list .footer.telEdit{padding:0 15px;line-height:40px;font-size:13px}
.products .list .footer.telEdit:after{content:'';display:block;clear:both}
.products .list .footer.telEdit .col{float:left;color:#333}
.products .list .footer.telEdit .col:last-child{float:right}
.products .list .footer.telEdit .col .btn{color:#666;vertical-align:baseline}
.products .list .footer.telEdit .col .btn .icon.arrowBottom{margin-left:8px;margin-top:5px;vertical-align:top}

.products .sm .thumb{left:7px;width:100px;height:100px}

.favorite .products .list > li > div{height:116px;padding-left:0}
.cart .products .list > li > div{height:203px;padding-left:0}
.favorite .products .list .info .thumb,
.cart .products .list .info .thumb{margin-left:32px}
.favorite .products .list .disable,
.cart .products .list .disable{left:48px;top:17px}
.favorite .products .list .info,
.cart .products .list .info{padding:13px 15px 0 150px}
.favorite .products .info .name a,
.cart .products .info .name a{padding-right:20px}

.reserve .products .list > li > div{height:200px;padding-left:123px}
.reserve .products .list .info .thumb{left:10px}

.rowQuantity{display:table;table-layout:fixed;padding:0 15px;width:100%;box-sizing:border-box}
.rowQuantity .col{display:table-cell;width:51px}
.rowQuantity .col.select{display:table-cell;width:auto;padding-right:5px}

.price{}
.price:after{content:'';display:block;clear:both}
.price dt{float:left ;color:#333;font-size:13px;line-height:1.8}
.price dd{float:left;color:#333}

.price dt.primary02{color:#ff0000}
.price dd.primary02{color:#ff0000}

/* 상품상세 */
.product #footer{bottom:70px}
.product.mobile #footer{bottom:0}
.product .slider{padding-top:83.3333%}
.product .slider .slick-slider{position:absolute;top:0;right:0;bottom:0;left:0}
.product .slider .slick-track,
.product .slider .slick-list{height:100%}
.product .slider .slick-list .item{padding-top:0}
.product .slick-slide .imageWrap{position:absolute;top:0;right:0;left:0;text-align:center;white-space:nowrap;height:100%}
.product .slick-slide .imageWrap:after{content:'';vertical-align:middle;display:inline-block;height:100%}
.product .slick-slide .imageWrap img{vertical-align:middle;position:static;display:inline-block;max-width:100%;width:auto;max-height:100%;height:auto}
.product .row.btns.floating{height:70px;margin-bottom:0;padding:0 10px;border-top:1px solid #eaebed}
.product .row.btns.floating .col{padding-top:10px;padding-bottom:10px}
.product .row.btns.floating .reserveGuide{position:absolute;left:0;top:0;right:0;bottom:0;margin:10px;background-color:#f3f9fb;text-align:center;color:#333;font-size:13px}
.product .row.btns.floating .verticalCenter{height:49px;min-height:0}
.product .row.btns.floating .verticalCenter .alignItem{padding:0 5px}
.product .row.btns.floating .reserveGuide em{font-weight:bold}
.product .row.btns.floating .icon.cart2{margin-right:7px}
.product .tab span{width:33.3333%}
.product .detail{background-color:#fff}
.product .detail .icon.new{position:absolute;right:20px;top:20px;pointer-events:none}
.product .detail .info{padding:10px 15px 7px;border-top:1px solid #e1e1e6}
.product .detail .info .name{display:block;margin-bottom:6px;font-size:18px;color:#333}
.product .detail .info .name .label{display:inline-flex;min-width:24px;height:15px;font-size:10px;color:#fff;line-height:1;text-align:center;justify-content:center;align-items:center;vertical-align:middle;border-radius:2px}
.product .detail .info .name .label.limit{background-color:#97c98c}
.product .detail .info .name .label.season{background-color:#928cc9}
.product .detail .info dl{height:22px}
.product .detail .info dl dt,
.product .detail .info dl dd{line-height:1.8;display:inline-block;float:none}
.product .detail .info dl dt{font-size:13px;vertical-align:top;min-width:100px}
.product .detail .info dl dd{margin-top:-3px}
.product .detail .info dl:nth-of-type(1) dd{margin-top:-9px;vertical-align:baseline}
.product .detail .info dl:nth-of-type(1) dd strong{font-size:23px;color:#333}
.product .detail .info .price dd strong{font-size:17px}
.product .detail .info .document dd{font-size:14px}
.product .detail .info .table.infos .price strong{font-size:23px}
.product .detail .info .table.infos .pricepv strong{font-size:17px}
.product .detail .info .table.infos .infods{vertical-align:top;padding-top:2px}
.product .detail .disable{position:absolute;left:50%;top:50%;padding-left:50%;padding-bottom:50%;text-align:center;border-radius:50%;background-color:rgba(0,0,0,.5);box-sizing:border-box;pointer-events:none;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}
.product .detail .disable .icon.soldOut01{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}
.product .detail .disable .icon.soldOutTHH{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}
.product .detail .disable .icon.soldOutTHC{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}
.product .detail .disable .icon.soldOutTHH2{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}
.product .detail .disable .icon.soldOutTHC2{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}
.product .detail .disable .icon.sellOut01{position:absolute;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);transform:translate(-50%, -50%)}
.product .detail .row.btns{border-top:1px solid #e1e1e6}
.product .detail .row.btns .col:first-child{border-right:1px solid #e1e1e6}
.product .detail .row.btns.margin.borderNo{padding:0;margin:0 0}
.product .detail .zoomDecu{font-size:12px;color:#333;margin-bottom:15px}
.product .tab{border-top:1px solid #e1e1e6}
.product .icon.share{margin-right:7px;margin-top:-1px}
.product .icon.like{margin-right:7px}
.product .tabContent{display:none;overflow:hidden}
.product .tabContent.detail{padding:15px;border-bottom:1px solid #e1e1e6;overflow:hidden}
.product .summary{background-color:#fff}
.product .summary .row.btns{padding:15px 0}
.product .summary .row.btns.margin.borderNo{padding:15px 0 0;margin:0 0}
.product .summary .zoomDecu{font-size:12px;color:#333;margin-bottom:15px}
.product .summary .info ul{padding-bottom:1px}
.product .summary .info ul li{margin-bottom:10px;font-size:12px}
.product .summary .info .row.btns .col{padding-left:5px}
.product .summary .info .row.btns .col:first-child{padding-left:0}
.product .summary .info .row.btns .col .btn{padding:0 10px}
.review .guide .icon.star,
.product .summary .info .icon.star{margin-top:1px;vertical-align:text-top}
.product .tabContent.active{display:block}
.product .products .card > li > div{padding-bottom:0}
.product .products{padding-top:10px}
.product .starRating{margin-bottom:10px;border-top:1px solid #e1e1e6;border-bottom:1px solid #e1e1e6;background-color:#fff}
.product .starRating .grade{height:50px;padding-top:15px;text-align:center;box-sizing:border-box}
.product .starRating .grade .state{display:inline-block;position:relative;width:76px;height:13px;background-image:url('/static/images/common/star_rating.png');background-position:0 0;background-repeat:no-repeat;background-size:360px auto}
.product .starRating .grade .state span{position:absolute;left:0;top:0;bottom:0;background-image:url('/static/images/common/star_rating.png');background-position:0 -25px;background-repeat:no-repeat;background-size:360px auto}
.product .starRating .row.score{display:table;width:100%;box-sizing:border-box}
.product .starRating .row.score .col{display:table-cell;width:33.3333%;height:38px;padding-top:10px;text-align:center;border-left:1px solid #e2e4e6;border-top:1px solid #e2e4e6;box-sizing:border-box}
.product .starRating .row.score .col:first-child{border-left:none}
.product .starRating .row.score .col:after{content:'';display:block;clear:both}
.product .starRating .row.score .col em{color:#333}
.product .starRating .row.score .col dt{font-size:13px;display:inline-block;vertical-align:top;line-height:1.5}
.product .starRating .row.score .col dd{display:inline-block; font-size:15px;vertical-align:top;line-height:1.267}
.product .guide{padding:15px;background-color:#fff}
.product .guide .title.sub{margin-top:20px}
.product .guide .box.primary{padding:15px}
.product .guide .box.primary dl + dl{margin-top:10px}
.product .guide .view th{height:25px;padding:10px;color:#000;vertical-align:top}
.product .guide .view td > p,
.product .guide .view li{text-indent:-10px;padding-left:10px;margin-top:10px}
.product .guide .view p:first-child,
.product .guide .view li:first-child{margin-top:0}
.product .guide .view li p{text-indent:0;margin-top:10px}
.product .guide .view li p:first-of-type{margin-top:0}
.product .guide .view li .btnShipping{display:inline-block;color:#00b6f0;text-align:left;text-indent:0}
.product .guide .view td > p,
.product .guide .view small,
.product .guide .view p strong{color:#666}

.product .prodetail img + img{margin-top:15px}

.product .noData.product{margin-top:0;margin-bottom:0;padding-top:151px;padding-bottom:15px}
.product .noData.product:after{top:40px}

/* 장바구니, 찜한상품*/
#body.favorite{padding-bottom:180px}
#body.cart{padding-bottom:140px}
#body.favorite .fixBottom .fixContent,
#body.cart .fixBottom .fixContent{bottom:60px;padding-bottom:0;margin-bottom:16px}
#body.favorite .floating,
#body.cart .floating{z-index:100}
.favorite .controls,
.cart .controls{position:relative;padding:20px 15px 14px;color:#333}
.favorite .controls label,
.cart .controls label{vertical-align:middle}
.favorite .controls label:after,
.cart .controls label:after{content:'';display:inline-block;border-right:1px solid #c6c6c6}
.favorite .controls label strong,
.cart .controls label strong{position:relative;padding-left:13px}
.favorite .controls label strong:before,
.cart .controls label strong:before{content:'';display:inline-block;position:absolute;left:0;top:1px;height:14px;margin:0 9px 0 4px;border-left:1px solid #c6c6c6}
.favorite .controls .btn,
.cart .controls .btn{position:absolute;right:15px;top:10px}

.cart .products .list li.disabled .body{height:116px}
.cart .products .list li.disabled .state{display:inline-block;height:17px;padding:0 2px;line-height:16px;position:absolute;right:15px;bottom:15px;font-size:11px;color:#00b6f0;border:1px solid #00b6f0;box-sizing:border-box}
 
.favorite .row.btns.floating, .cart .row.btns.floating{height:70px;margin-bottom:0;padding:0 10px;border-top:1px solid #eaebed;border-bottom:1px solid #eaebed;bottom:60px}
.favorite .row.btns.floating .col, .cart .row.btns.floating .col{padding-top:10px;padding-bottom:10px}

.totalPrice{ margin:0 15px;border:2px solid #707780;border-radius:2px}
.totalPrice > div{padding:15px 0;background-color:#fff}
.totalPrice .head{height:45px;padding:5px 0 0;background-color:#707780;text-align:center;font-size:16px;color:#fff;text-align:center;box-sizing:border-box}
.totalPrice .head span:{display:inline-block}
.totalPrice .head span:first-child{position:relative}
.totalPrice .head span:first-child:after{content:'';display:inline-block;margin:0 5px 0 5px;height:13px;border-left:1px solid #8d9299}
.totalPrice .head span strong{font-size:21px;color:#2dcdff}
.totalPrice .body{padding:15px}
.totalPrice .body hr{margin:15px 0}
.totalPrice .body .price dt{font-size:14px;color:#333}
.totalPrice .body .price dd{float:right;font-size:14px;color:#333;text-align:right}
.totalPrice .body .price dd em{font-size:17px}
.totalPrice .body .sum dt strong{font-size:16px}
.totalPrice .body .sum dd{font-size:16px}
.totalPrice .body .sum dd strong{font-size:21px}

/* 예약상품 */
.reserve .margin{padding:15px}
.reserve .products .list .row,
.reserve .products .box.primary{margin-top:6px}

/* 쇼핑몰 메인 */
#body.shopMain{padding-bottom:216px}
.shopMain .bar{height:90px}
.shopMain .category{position:relative;white-space:nowrap;background-color:#fff;text-align:center;border-bottom:1px solid #e2e2e2}
.shopMain .category ul{overflow-x:auto;overflow-y:hidden;font:0/0 a;/*width:84%;margin:0 auto*/}
.shopMain .category ul:after{content:'';display:block;clear:both}
.shopMain .category li{display:inline-block;font-family:sans-serif}
.shopMain .category li:first-child{margin-left:0}
.shopMain .category li a{display:block;position:relative;min-width:65px;height:75px;padding:58px 5px 0;font-size:13px;color:#333;background-color:#fff;box-sizing:border-box}
.shopMain .category li.active a{color:#00b6f0;font-weight:bold;border-bottom:3px solid #00b6f0}
.shopMain .category li a:after{content:'';display:block;position:absolute;left:50%;top:0;background-image:url('/static/images/common/shop_category_icon.png');background-repeat:no-repeat;background-size:440px auto}
.shopMain .category li.all a:after{width:30px;height:28px;top:13px;margin-left:-15px;background-position:0 0}
.shopMain .category li.hemohim a:after{width:32px;height:27px;top:13px;margin-left:-16px;background-position:-40px 0}
.shopMain .category li.health a:after{width:21px;height:28px;top:13px;margin-left:-10px;background-position:-80px 0}
.shopMain .category li.beauty a:after{width:23px;height:33px;top:11px;margin-left:-11px;background-position:-120px 0}
.shopMain .category li.hairBody a:after{width:24px;height:34px;top:13px;margin-left:-12px;background-position:-160px 0}
.shopMain .category li.living a:after{width:24px;height:25px;top:18px;margin-left:-12px;background-position:-200px 0}
.shopMain .category li.food a:after{width:26px;height:30px;top:13px;margin-left:-13px;background-position:-240px 0}
.shopMain .category li.communication a:after{width:20px;height:30px;top:13px;margin-left:-10px;background-position:-280px 0}
.shopMain .category li.fashion a:after{width:36px;height:28px;top:17px;margin-left:-18px;background-position:-400px 0}
.shopMain .category li.toSet a:after{width:21px;height:31px;top:14px;margin-left:-10px;background-position:-368px 0}
.shopMain .category li.all.active a:after{background-position:0 -40px}
.shopMain .category li.hemohim.active a:after{background-position:-40px -40px}
.shopMain .category li.health.active a:after{background-position:-80px -40px}
.shopMain .category li.beauty.active a:after{background-position:-120px -40px}
.shopMain .category li.hairBody.active a:after{background-position:-160px -40px}
.shopMain .category li.living.active a:after{background-position:-200px -40px}
.shopMain .category li.food.active a:after{background-position:-240px -40px}
.shopMain .category li.communication.active a:after{background-position:-280px -40px}
.shopMain .category li.fashion.active a:after{background-position:-400px -40px}
.shopMain .category li.toSet.active a:after{background-position:-368px -40px}

.shopMain .slider{padding-top:55.27777777777778%;border-bottom:1px solid #e2e2e2}

/* 좌우 nav 컨포넌트 */
.shopMain .category .navStyle button{position:absolute;top:0;width:24px;height:74px;font:0/0 a;/*background-color:rgba(255,255,255,1);*/}
.shopMain .category .navStyle button.prev{left:0;width:35px;text-align:left;padding-left:12px;background:#fff;background:linear-gradient(to right,rgba(255, 255, 255,1),rgba(255, 255, 255,0.95),rgba(255,255,255,0.1))}
.shopMain .category .navStyle button.next{right:0;width:35px;text-align:right;padding-right:12px;background:#fff;background:linear-gradient(to right,rgba(255, 255, 255,0.1),rgba(255, 255, 255,0.95),rgba(255,255,255,1))}
.shopMain .category .navStyle button:after{content:'';display:inline-block;width:10px;height:16px;background-image:url('/static/images/common/icon_sprite.png');background-position:-97px -50px;background-repeat:no-repeat;background-size:360px auto}
.shopMain .category .navStyle button.prev:after{background-position:-89px -50px}
.shopMain .category .navStyle button.next.going:after{background-position:-122px -50px}
.shopMain .category .navStyle button.prev.going:after{background-position:-114px -50px}
.shopMain .category .navStyle button.bhide{display:none}

.shopMain .notice.fixBottom{bottom:171px}
.shopMain .notice .fixContent{position:relative;height:35px;padding-left:75px;padding-right:45px;overflow:hidden;background-color:#90969e}
.shopMain .notice h3{position:absolute;left:15px;top:0;width:61px;font-size:13px;font-weight:bold;color:#fff;line-height:35px;box-sizing:border-box}
.shopMain .notice div a{display:inline-block;max-width:100%;height:35px;line-height:35px;color:#fff;font-size:13px;white-space:nowrap;text-overflow:ellipsis;overflow:hidden;box-sizing:border-box}
.shopMain .notice .slick-slide{height:35px;box-sizing:border-box}
.shopMain .notice .new{position:relative;padding-right:26px;white-space:nowrap}
.shopMain .notice .new:after{content:'';display:inline-block;width:16px;height:16px;-webkit-transform:translateY(50%);transform:translateY(50%);vertical-align:top;background-image:url('/static/images/common/icon_new.png'); background-position:-50px 0;background-repeat:no-repeat;background-size:360px auto;background-position:0 0}
.shopMain .notice .btn{position:absolute;right:0;top:0;width:40px;height:35px;background-color:#707780}
.shopMain .notice .btn .icon.plus2{margin:12px 0 0 0;vertical-align:top}

.shopMain.categoryProduct .bar{height:141px}

/* 통신상품 목록 */
#body.shopMain.mobile{padding-bottom:182px}
.shopMain.mobile .bar{height:40px}
.shopMain.mobile .slider{padding-top:27.22222222222222%;border-bottom:1px solid #e2e2e2;overflow:hidden}
.shopMain.mobile .btn .arrowBottom2{margin-left:8px;vertical-align:middle}

/* 통신상품 상세 */
.product.mobile .selectOption .select{margin-top:10px}
.product.mobile .detail .total{margin:10px 0;padding:15px 8px 2px;border:2px solid #707780;border-radius:2px}
.product.mobile .detail .total hr{margin:0 0 15px}
.product.mobile .detail .total dl{padding:0 5px}
.product.mobile .detail .total dl:first-child{margin-top:0}
.product.mobile .detail .total dl dt{color:#333;line-height:1.3}
.product.mobile .detail .total dl dd{float:right;font-size:13px;line-height:1.3}
.product.mobile .detail .total dl:nth-child(1) dd{margin-top:-3px}
.product.mobile .detail .total dd span,
.product.mobile .detail .total dd strong{font-size:17px}
.product.mobile .detail .total .sum dt{font-size:16px}
.product.mobile .detail .total .sum dd strong{font-size:21px}
.product.mobile .detail .total + .bullet{margin-bottom:7px}
.product.mobile  .tabContent{padding-bottom:0}

/* 자동완성 검색 */
.search .head{height:40px;padding:11px 0 0 15px;background-color:#fff;border-bottom:1px solid #e9eaec;box-sizing:border-box}
.search .head h2{font-weight:bold;color:#00b6f0 ;font-size:14px}
.search .popular li a{display:block;height:41px;padding:10px 15px;font-size:14px;color:#333;background-color:#fff;border-top:1px solid #e9eaec;box-sizing:border-box}
.search .popular li:first-child a{border-top:none}
.search .icon.basket{margin-right:5px;vertical-align:sub}
.search .noData.bubble{margin:0;padding:165px 0 100px}
.search .noData.bubble:after{top:100px}
.search .noData.search{margin:0;padding:210px 0 100px}
.search .noData.search:after{top:100px}
.search .noData.search p{margin-bottom:10px}
.search .noData.search small{display:block;font-size:13px;color:#666}

.autocomplete{display:none;margin-bottom:10px;background-color:#fff;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);box-shadow:0 1px 1px rgba(0,0,0,.1)}
.autocomplete.active{display:block}

.autocomplete .head{display:none}
.autocomplete .head:after{content:'';display:block;clear:both}
.autocomplete .head .text{float:left}
.autocomplete .head .groupBtn{float:right}

.autocomplete.history .head{display:block}
.autocomplete.history .head h2{float:left}
.autocomplete.history .head .btns{float:right;margin-right:15px;line-height:1.3}
.autocomplete.history .head .btns .btn{color:#7f8792;font-size:13px;vertical-align:text-top;height:18px;box-sizing:border-box}
.autocomplete.history .head .btns .col{display:inline-block}
.autocomplete.history .head .btns .col:first-child{position:relative;padding-right:9px;margin-right:4px}
.autocomplete.history .head .btns .col:first-child:after{content:'';display:inline-block;position:absolute;right:0;top:3px;height:12px;border-left:1px solid #e9eaec}
.autocomplete.history .searchList li{position:relative;padding-right:45px}
.autocomplete.history .searchList li a{display:block;overflow:hidden;height:40px;padding:8px 0 0 15px;color:#333;background-color:#FFF;font-size:14px;white-space:nowrap;text-overflow:ellipsis;box-sizing:border-box}
.autocomplete.history .searchList li a p{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}
.autocomplete.history .searchList li .btn{position:absolute;right:15px;top:10px}

.autocomplete.suggest .searchList li > div{position:relative;height:60px;padding-right:85px;background-color:#fff;border-bottom:1px solid #e9eaec;box-sizing:border-box}
.autocomplete.suggest .searchList li a{display:block;height:100%;padding:8px 0 0 15px;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;box-sizing:border-box}
.autocomplete.suggest .searchList li a .name em{font-weight:bold;color:#00b6f0;vertical-align:baseline}
.autocomplete.suggest .searchList li a .code{display:block}
.autocomplete.suggest .searchList li > div > .btn{position:absolute;right:15px;top:10px;bottom:0;width:55px;padding:0}
.autocomplete.suggest .searchList .btn .icon.cart2{vertical-align:top;-webkit-transform:translateY(9px);transform:translateY(9px)}
.autocomplete.suggest .searchList .info{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.autocomplete.suggest .searchList .noData{padding:20px 0;text-align:center;background-color:#fff}

#body.search .products{position:relative;padding-bottom:20px}
#body.search .products .btnMore{margin-bottom:0}

/* 내 상품평 */
.reviews .board > p{margin-bottom:5px}

/* 상품평 작성 */
.review{padding:15px;background-color:#fff}
.review .guide{color:#666;font-size:12px}
.review .guide + .guide{margin-top:10px}
.review .product{position:relative;height:116px;margin-top:15px;margin-bottom:5px;border:1px solid #e2e2e2;border-radius:2px;background-color:#fff}
.review .product .info{padding:13px 15px 13px 122px}
.review .product .info .thumb{display:block;position:absolute;left:7px;top:7px}
.review .product .info .thumb.sm{width:100px;height:100px}
.review .product .info .name{display:block;height:40px;margin-bottom:5px;color:#333;font-size:15px;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;text-overflow:ellipsis;overflow:hidden}
.review .product .info .price{line-height:1.3}
.review .product .info .price strong{font-size:17px}
.review .starRating dl{margin-top:10px}
.review .starRating dl:after{content:'';display:block;clear:both}
.review .starRating dl dt{float:left;height:24px;font-size:14px;color:#333;padding:3px 15px 0;border-radius:12px;box-sizing:border-box}
.review .starRating dl dd{float:left;color:#f99b3b;font-size:15px}
.review .starRating dl .evaluate{margin:-1px 12px 0}
.review .starRating dl .evaluate button{width:23px;height:23px;font:0/0 a;vertical-align:top; background-image:url('/static/images/common/star_rating.png');background-position:-100px 0;background-repeat:no-repeat;background-size:360px auto}
.review .starRating dl .evaluate button.active{background-position:-100px -25px}
.review .starRating dl dd.result{position:relative;padding-left:18px;line-height:1.7}
.review .starRating dl dd.result:after{content:'';display:inline-block;width:13px;height:10px;position:absolute;left:0;top:8px;background-image:url('/static/images/common/icon_sprite.png');background-position:-175px 0;background-repeat:no-repeat;background-size:360px auto}

.review .board{margin-top:15px}
.review .board .write textarea{height:185px;margin-top:10px}
.review .row.btns.margin{padding:15px 0}

/* 주문서 */
.buy{padding-bottom:70px}
.buy .accordion .head button{position:relative;width:100%;height:56px;padding:0 35px 0 15px;border-bottom:1px solid #e2e2e2;background-color:#FFF;box-sizing:border-box}
.buy .accordion .head button:after{content:'';display:inline-block;position:absolute;right:15px;top:25px;width:10px;height:6px;background-image:url('/static/images/common/icon_sprite.png');background-position:-160px -10px;background-repeat:no-repeat;background-size:360px auto;-webkit-transition:-webkit-transform .2s ease-in;transition:transform .2s ease-in}
.buy .accordion .active .head button:after{background-position:-160px 0;-webkit-transform:translateY(-1px) rotate(180deg);transform:translateY(-1px) rotate(180deg)}
.buy .accordion .totalInfo .head button .em{font-size:15px}
.buy .accordion .head dl dt{float:left;font-size:17px}
.buy .accordion .head dl dd{float:right}
.buy .accordion .active .head dl dt{color:#00b6f0}
.buy .accordion .active .head dl dd{display:none}
.buy .accordion .head dl dd .sub{display:inline-block;max-width:135px;-webkit-transform:translateY(2px);transform:translateY(2px);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#333}
.buy .accordion .head .itemCount{position:relative}
.buy .accordion .head .itemCount strong,
.buy .accordion .head .itemCount span{vertical-align:top}
.buy .accordion .head .itemCount .sub{max-width:110px}
.buy .accordion .head .count{display:none}
.buy .accordion .head .itemCount .count{display:inline-block;font-size:12px;-webkit-transform:translateY(2px);transform:translateY(2px)}
.buy .accordion > li > section{display:none;padding:0 15px 15px;border-bottom:1px solid #e2e2e2}
.buy .accordion > li.active > section{display:block;background-color:#f6f6f8}
.buy .accordion > li .products{padding-top:15px}
.buy .table{border-top:none}
.buy .table .bullet{display:inline-block;margin-top:7px;line-height:1.4;font-size:12px;color:#666}
.buy .table p.bullet{margin-top:8px}
.buy .table tbody th{height:55px;padding:0}
.buy .table tbody td{padding:10px 5px;background-color:transparent}
.buy .table tbody td.inText{vertical-align:middle}
.buy .table tbody tr:last-child th, 
.buy .table tbody tr:last-child td{border-bottom:none}
.buy .table .row.cell2 .col{display:inline-block;width:38%}
.buy .table .row.cell2 .select[data-value]:before{left:10px}
.buy .cardForm .table .row.cell2 .col{display:table-cell;width:48%}
.buy .box.gray{padding:15px;margin-top:10px;font-size:12px}
.buy .box.gray li + li{margin-top:5px}
.buy .delivery .tab{width:290px;margin:0 auto;padding-top:15px}
.buy .delivery .tab span a{background-color:#f6f6f8}
.buy .delivery .tab.type2 span.active a{background-color:#707780}
.buy .delivery .tabContent .noData{padding:25px 0 20px}
.buy .delivery .controlstop{text-align:center;padding:13px 0 0px;white-space:nowrap}
.buy .delivery .controlstop .col{color:#333;white-space:nowrap;padding-left:5px}
.buy .delivery .controlstop .col:first-child{padding-left:0}
.buy .delivery .controlstop .col label{font-size:14px;letter-spacing:-0.25px;vertical-align:bottom}
.buy .delivery .controlstop .row.disabled .radio,
.buy .delivery .controlstop .col.disabled .radio{background-color:#ececec;border-color:#dadada}
.buy .delivery .controlstop .row.disabled label,
.buy .delivery .controlstop .col.disabled label{color:#adadad}
.buy .delivery .controlstop .guide{white-space:normal}
.buy .delivery .controls{text-align:center;padding:13px 0 15px;margin-bottom:3px;border-bottom:1px solid #707780;white-space:nowrap}
.buy .delivery .controls .col{color:#333;white-space:nowrap;padding-left:5px}
.buy .delivery .controls .col:first-child{padding-left:0}
.buy .delivery .controls .col label{font-size:14px;letter-spacing:-0.25px;vertical-align:bottom}
.buy .delivery .controls .row.disabled .radio,
.buy .delivery .controls .col.disabled .radio{background-color:#ececec;border-color:#dadada}
.buy .delivery .controls .row.disabled label,
.buy .delivery .controls .col.disabled label{color:#adadad}
.buy .delivery .controls .guide{white-space:normal}
.buy .delivery .history{margin-top:15px}
.buy .delivery .history li{padding:15px 0;border-bottom:1px solid #e2e2e2}
.buy .delivery .history li a{text-align:left}
.buy .delivery .history li a span{display:block;font-size:13px;color:#333}
.buy .delivery .history li a .name{margin-bottom:5px;color:#000;font-size:15px}
.buy .delivery .checkHappo span.checkbox{margin-top:7px}
.buy .delivery .checkHappo input{display:inline-block;width:84%;float:right}
.buy .delivery .checkHappo input:after{content:'';display:block;clear:both}
.buy .delivery .happoText{padding-left:0}
.buy .delivery .happoText span:first-child{color:#010101}
.buy .delivery .happoText .checkbox{left:5%}
.buy .delivery .tdText{padding:0 0 10px !important}
.buy .delivery .tdText .box.gray, .buy .delivery .tdText ul li{margin-top:0 !important}
.buy .delivery .tdText span input{margin:5px 0 10px}
.buy .email .checkbox{margin-right:5px}
.buy .payment{position:relative}
.buy .payment ul.btns{margin-left:-6px;padding-top:15px}
.buy .payment .btns:after{content:'';display:block;clear:both}
.buy .payment .btns li{float:left;width:50%;padding-left:6px;margin-bottom:6px;box-sizing:border-box}
.buy .payment .btns li .btn{width:100%;line-height:1.5;color:#333;padding:0}
.buy .payment .btns li .btn small{display:block;font-size:11px;color:#666}
.buy .payment .btns li.active .btn{border:2px solid #00b6f0}
.buy .payment .btns li.active .btn small{color:#dbdcde}
.buy .payment .date .icon.calendar{position:absolute;right:10px;top:10px}
.buy .payment .btns li.item5 .btn{font-size:13px}
.buy .payment .btns li.item7{width:100%}
.buy .payment .btns li .btn .icon.payment.kpay{margin-top:2px}

.buy .areaPaymentVAccounts .controls{text-align:left;padding:0 0 15px;white-space:nowrap}
.buy .areaPaymentVAccounts .controls .col{color:#333;white-space:nowrap;padding-left:5px}
.buy .areaPaymentVAccounts .controls .col:first-child{padding-left:0}
.buy .areaPaymentVAccounts .controls .col label{font-size:14px;letter-spacing:-0.25px;vertical-align:bottom}
.buy .areaPaymentVAccounts .controls .col.disabled .radio{background-color:#ececec;border-color:#dadada}
.buy .areaPaymentVAccounts .controls .col.disabled label{color:#adadad}
.buy .areaPaymentVAccounts .reaPayments .controls{padding:13px 0 15px}
.buy .areaPaymentVAccounts .reaPayments .controls span.col{margin-right:9px}

.buy .payment .row.btns{margin-top:10px}
.paymentChange .row.bar,
.buy .payment .row.bar{height:47px;border-top:1px solid #707780;border-bottom:1px solid #707780;box-sizing:border-box}
.paymentChange .row.bar:after,
.buy .payment .row.bar:after{content:'';display:block;clear:both}
.paymentChange .row.bar .numbering,
.buy .payment .row.bar .numbering{float:left;line-height:47px;font-size:14px;color:#000;font-weight:bold}
.paymentChange .row.bar .btn,
.buy .payment .row.bar .btn{float:right;margin-top:7px}
.buy .payment fieldset:nth-of-type(1) .row.bar{border-top:none}
.buy .accordion > li > section.amount{padding-top:15px}
.buy .amount .total{padding:2px}
.buy .amount .total .head{padding:10px 11px}
.buy .amount .total .head:after{content:'';display:block;clear:both}
.buy .amount .total .head dt{float:left;color:#fff;font-size:16px}
.buy .amount .total .head dd{float:right;color:#fff;font-size:16px;line-height:25px;height:25px}
.buy .amount .total .head dd strong{color:#f9993b;font-size:21px}
.buy .amount .total .body{padding:16px 12px;color:#333;background-color:#fff}
.buy .amount .total .body dl + dl{margin-top:9px}
.buy .amount .total .body dl:after{content:'';display:block;clear:both}
.buy .amount .total .body dt{font-size:13px;line-height:1.8;float:left}
.buy .amount .total .body dd{float:right;font-size:14px}
.buy .amount .total .body dd strong{font-size:17px}
.buy .amount .detail{padding:17px 9px 17px;margin-top:10px;font-size:14px;border:1px solid #c9c9c9;border-radius:2px;background-color:#fff}
.buy .amount .detail hr{margin:10px 0 17px}
.buy .amount .detail dl{padding:0 5px}
.buy .amount .detail dl + dl{margin-top:10px}
.buy .amount .detail dl:after{content:'';display:block;clear:both}
.buy .amount .detail dl dt{float:left;color:#333}
.buy .amount .detail dl dd{float:right;color:#333}
.buy .amount .detail dl dd strong{font-size:17px;color:#333}
.buy .agreement{padding:0 15px;background-color:#fff}
.buy .agreement div{padding:15px 0}
.buy .agreement div:after{content:'';display:block;clear:both}
.buy .agreement div p{margin-bottom:7px}
.buy .agreement div .btn{float:right}
.buy h3{margin-top:20px;font-size:16px;font-weight:bold;color:#333;border-bottom:1px solid #707780}
.buy label + .radio{margin-left:9px}
.buy .row.btns.margin{padding-bottom:15px}

.buy .row.btns.btnScroll{height:70px;margin-bottom:0;padding:0 10px;border-top:1px solid #eaebed;border-bottom:1px solid #eaebed}
.buy .row.btns.btnScroll .col{padding-top:10px;padding-bottom:10px}

/* 주문완료 */
.buyDone{background-color:#fff}
.buyDone > section{margin-top:20px}
.buyDone .guide .box{padding:18px 10px;text-align:center;font-size:14px}
.buyDone .guide .box .text01{font-size:17px;padding-bottom:5px}
.buyDone .guide .box .text03{color:#666}
.buyDone .guide .box .text03 em{color:#000}
.buyDone .title.sub{margin-bottom:4px}
.buyDone .bullet{margin-top:10px}

.buyDone .row.sides:after{content:'';display:block;clear:both}
.buyDone .row.sides .title{float:left}
.buyDone .row.sides .itemCount{float:right;position:relative}
.buyDone .row.sides .itemCount span{display:inline-block;vertical-align:top;line-height:1}
.buyDone .row.sides .itemCount .count{display:inline-block;font-size:12px;-webkit-transform:translateY(6px);transform:translateY(6px)}
.buyDone .row.sides .itemCount .count .sub{max-width:140px;display:inline-block; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#333}

/* 결제완료 */
.paymentDone{background-color:#fff}
.paymentDone > section{margin-top:20px}
.paymentDone .guide .box{padding:18px 10px;text-align:center;font-size:14px}
.paymentDone .guide .box .text01{font-size:17px;padding-bottom:5px}
.paymentDone .guide .box .text02{color:#666}
.paymentDone .guide .box .text02 em{color:#000}
.paymentDone .title.sub{margin-bottom:4px}

.paymentDone .row.sides:after{content:'';display:block;clear:both}
.paymentDone .row.sides .title{float:left}
.paymentDone .row.sides .itemCount{float:right;position:relative}
.paymentDone .row.sides .itemCount span{display:inline-block;vertical-align:top;line-height:1}
.paymentDone .row.sides .itemCount .count{display:inline-block;font-size:12px;-webkit-transform:translateY(6px);transform:translateY(6px)}
.paymentDone .row.sides .itemCount .count .sub{max-width:140px;display:inline-block; white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#333}

/* 주문조회 */
.orders .price dt{width:60px}
.orders .products .select{margin:10px 0}
.orders #dateOptionLayer .body ul{border-top:2px solid #e2e2e2}
.orders #dateOptionLayer .body ul li{text-align:center}
.orders #dateOptionLayer .body ul li button{width:100%;padding:10px 0}
.orderDetail{padding-bottom:20px;background-color:#fff}
.orderDetail .product{padding-top:15px}
.orderDetail .section div{margin-top:20px}
.orderDetail .section .bullet{margin-top:10px}

#body.orderDetail .table.view tbody td small{display:block;font-size:12px;color:#666}
.orderDetail .product .list{position:relative;background-color:#fff;border:1px solid #e2e2e2;border-radius:2px}
.orderDetail .products .list.sm .body{position:relative;height:116px;padding-left:120px}
.orderDetail .products .list.sm .body .price dt{width:60px;line-height:1.6}
.orderDetail .products .list.sm .body .price dd{line-height:1.2}
.orderDetail .products .list.sm .footer{border-top:1px solid #e2e2e2}
.orderDetail .products .list.sm.expand .body{min-height:116px;height:auto;padding-left:0}
.orderDetail .products .list.sm .flexible .body{min-height:116px;height:auto}
.products .list .info .option{margin-bottom:5px;font-size:13px;color:#333}
.products .list .info .option:after{content:'';display:block;clear:both}
.products .list .info .option .col{position:relative;float:left;margin-left:7px;padding-left:7px}
.products .list .info .option .col.price{line-height:1.1;vertical-align:top}
.products .list .info .option .col.price dd{line-height:1.1}
.products .list .info .option .col:after{content:'';display:inline-block;position:absolute;left:0;top:3px;height:11px;border-left:1px solid #e2e2e2}
.products .list .info .option .col:first-child{padding-left:0;margin-left:0}
.products .list .info .option .col:first-child:after{content:none}
.products .list .flexible .info .fix{padding-bottom:12px}

.orderDetail .products.accordion{max-height:42px;overflow:hidden}
.orderDetail .products.accordion.active{max-height:inherit}
.orderDetail .products.accordion .controls{margin-top:1px;margin-bottom:6px}
.orderDetail .products.accordion .controls .btn{position:relative}
.orderDetail .products.accordion .controls .btn:after{content:'';display:inline-block;width:10px;height:6px;margin-left:5px;background-image:url('/static/images/common/icon_sprite.png'); background-position:-160px 0;background-size:360px auto;-webkit-transition:-webkit-transform .2s ease-in;transition:transform .2s ease-in}
.orderDetail .products.accordion.active .controls .btn:after{-webkit-transform:rotate(180deg);transform:rotate(180deg)}

/* 나의 애터미몰 */
.orderHistory .guide{padding-top:15px}
.orderHistory .products .controls .select{position:absolute;right:87px;top:0;width:125px}

.delivery .products{margin-top:15px}
.delivery .price dt{width:60px}
.delivery .icon.delivery ,
.orders .icon.delivery{margin-left:5px;margin-bottom:1px;vertical-align:sub}
.product .icon.delivery{margin-left:5px;margin-top:-1px;vertical-align:middle}
.orders .icon.close{margin-left:5px}

.dialog.search .layout + .dim{top:50px;bottom:61px;height:auto}
.dialog.search .layout .dialogClose{top:17px}

/* 옵션 선택 :list */
.list.options li{ border-bottom:1px solid #e2e2e2;box-sizing:border-box}
.products .list.options .list > li > div{border:0}
.list.options li label{ display:table-cell;padding-right:10px;vertical-align:middle;font-size:13px;box-sizing:border-box}
.list.options li .btns{  display:table-cell;width:108px;margin:0;text-align:right;vertical-align:middle}
.products .list.options .info .row.btns, 
.products .list.options .info .row.options{float:none;max-width:none}
.list.options .info .option .col{float:none}
.list.options li .row.quantity .btn{ top:50%;transform:translateY(-50%)}
.list.options li .btns.soldOut .btn{font-size:12px;line-height:initial}
.products .list.options .info .option .col.select:first-child:after{content:'';left:inherit;top:50%;height:auto;border-left:4px solid transparent}
.list.options .info{display:table;width:100%;table-layout:fixed}
.list.options .info .img{position:relative;display:table-cell;width:70px;padding:5px 20px 5px 0}
.list.options .info .thumb{position:static;max-width:110px}
.list.options .info .fix{display:table-cell;width:100%;padding:0;vertical-align:middle}
.list.options .info .option{display:table;width:100%;padding:10px 0 10px 15px;margin:0;color:#333;font-size:13px;box-sizing:border-box}
.list.options .info .product-name{display:block;margin-bottom:5px;font-size:15px;word-break:break-word}
.list.options .info .product-option{word-break:break-word}
.list.options .info .disable{ width:55px;height:55px;left:7px}
.list.options .info .disable .icon.soldOut01.sm,
.list.options .info .disable .icon.soldOutTHH.sm,
.list.options .info .disable .icon.soldOutTHC.sm,
.list.options .info .disable .icon.soldOutTHH2.sm,
.list.options .info .disable .icon.soldOutTHC2.sm,
.list.options .info .disable .icon.soldOut02.sm {margin:0;background-size:240px auto;width:45px;height:30px}
.dialog.cart .body{max-height:70%;max-height:70vh;overflow-y:auto}

/* 배송지 관리 CA */
.shippingManagement .guide{ padding:15px;background-color:#fff;border-bottom:1px solid #d8d9db}
.shippingTools{margin-top:15px}
.shippingTools .bar{height:auto;margin:15px 0 10px;padding:15px 0 0 0;color:#333;border-top:1px solid #707780}
.list.history{margin-top:15px}
.buy .delivery .list.history li,
.list.history li{margin-bottom:6px;padding:0;border-bottom:none}
.list.history li .head{min-height:45px;padding:10px;background-color:#f3f9fb;box-sizing:border-box;border:1px solid #e2e2e2;border-bottom:none}
.list.history li .head .state{float:right;padding:2px 8px 2px 8px;margin-right:5px;background-color:#00b6f0;color:#fff;border-radius:17px}
.list.history li .body{position:relative;padding:13px;background-color:#fff;border:1px solid #e2e2e2;box-sizing:border-box}
.list.history li .footer{position:static;display:table;width:100%;height:40px;margin:0;padding:0;background-color:#fff;border:1px solid #e2e2e2;border-top:none;box-sizing:border-box}
.list.history li .footer .btn{line-height:1}
.list.history li .footer.row .col{display:table-cell}
.list.history li .footer.row .col:first-child{border-left:none}
.list.history li .footer.row .col:first-child:last-child{width:100%}
.list.history li .footer.row .col:last-child:nth-child(2){width:50%}
.list.history li .footer.row .col:first-child:nth-last-child(2){width:50%}
.list.history li .footer.row .col:last-child:nth-child(3){width:33.3333%}
.list.history li .footer.row .col:first-child:nth-last-child(3){width:33.3333%}
.list.history li .footer.row .col:nth-child(2):nth-last-child(2){width:33.3333%}
.list.history li .footer.row .col .btn{width:100%;padding-top:1px;border:none;font-size:13px;color:#666;border-left:1px solid #e2e2e2;box-sizing:border-box}
.list.history li .footer.row .col:first-child .btn{border-left:none}

'Static > style' 카테고리의 다른 글

transition.css  (0) 2021.02.19
office.css  (0) 2021.02.19
module.css  (0) 2021.02.19
member.css  (0) 2021.02.19
media_query.css  (0) 2021.02.19

마이오피스 메인, 나의 애터미 일정, 매출, 수당, 구매이력상품, 나의인생 시나리오, 계보도


@charset "UTF-8";

/* 마이오피스 메인*/
.office .main .contents{padding:15px}
.office .main .myInfo{position:relative;padding:10px;margin-bottom:10px;background-color:#fff}
.office .main .myInfo .me{display:block;font-size:23px}
.office .main .myInfo .me em{vertical-align:baseline}
.office .main .myInfo .me small{display:block;font-size:13px}
.office .main .myInfo .myData{position:absolute;right:15px;top:14px}
.office .main .myInfo .myData dl dt{color:#333}
.office .main .myInfo .myData dl dd{color:#f60;font-size:24px;line-height:1.2}

.office .main .keyPerson{padding:10px;margin-bottom:10px;background-color:#fff}
.office .main .keyPerson .staff:after{content:'';display:block;clear:both}
.office .main .keyPerson .staff dl{float:left;width:50%;padding:5px;color:#fff;text-align:center;background-color:#546674;border-radius:2px;box-sizing:border-box}
.office .main .keyPerson .staff dl.item1{border-right:1px solid #fff}
.office .main .keyPerson .date{margin-bottom:5px;font-size:14px;color:#333;text-align:center}

.officeMain{padding-bottom:20px}
.officeMain .headLine{position:relative;min-height:80px;padding:12px 15px 12px 85px;background-color:#fff;-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);box-shadow: 0 1px 1px rgba(0,0,0,.1);box-sizing:border-box}
.officeMain .headLine .name{font-size:20px;color:#333}
.officeMain .headLine .id{font-size:15px;color:#999}
.officeMain .headLine .level{display:inline-block}
.officeMain .headLine .state{display:inline-block;height:18px;line-height:1.5;padding:0 3px 2px;border:1px solid #ddd;font-size:12px;color:#999;box-sizing:border-box}
.officeMain .headLine .state.primary{color:#00b6f0;border:1px solid #06a7e2}
.officeMain .headLine .date{display:inline-block;margin-left:5px;font-size:12px;color:#999}
.officeMain .headLine .circle{display:inline-block;position:absolute;left:15px;top:13px;width:54px;height:54px;padding-top:18px;text-align:center;font-size:14px;color:#fff;box-sizing:border-box;background-color:#33c5f3;border-radius:50%}
.officeMain .headLine .btnRefresh{position:absolute;right:20px;top:13px}
.officeMain .headLine .state.conkait{color:red;border:1px solid red}
.officeMain .headLine .state.conkait a{color:red;}
.officeMain .headLine .btnProfile{position: absolute;right: 20px;top: 50%;margin-top: -15px;max-width: 90px;height: auto;line-height: 1.3;padding: 0}

.officeMain .box{margin-top:13px;font-size:14px;border:2px solid #707780;box-sizing:border-box}
.officeMain .box .head{padding:10px}
.officeMain .box .head span{position:relative;padding-left:9px;margin-left:4px;font-size:15px}
.officeMain .box .head span .primary{color:#64d0f3}
.officeMain .box .head span .pvcolor{color:#ffff99}
.officeMain .box .head span:first-child{padding-left:0;margin-left:0}
.officeMain .box .head span:after{content:'';display:inline-block;position:absolute;left:0;top:2px;height:13px;border-left:1px solid #8d9299}
.officeMain .box .head span:first-child:after{content:none}
.officeMain .box .body{width:100%;padding:8px 0 10px;color:#333;background-color:#fff;box-sizing:border-box}
.officeMain .box .body > div{position:relative;overflow:hidden}
.officeMain .box .body dl{position:relative;z-index:1;box-sizing:border-box;display:inline-block;min-width:50%;background-color:#fff}
.officeMain .box .body dl:first-child{padding-left:0;margin-right:1px;margin-left:-1px}
.officeMain .box .body dl:last-child{margin-right:-1px;margin-left:1px}
.officeMain .box .body > div:after{content:'';display:inline-block;position:absolute;left:50%;top:34px;width:1px;height:48px;background-color:#e2e2e2;z-index:1}
.officeMain .box .body dl dt{font-size:14px}
.officeMain .box .body dl dd{font-size:22px;padding:0 10px}
.officeMain .box .body .childrenPV{font-size:15px;margin-bottom:10px}

.officeMain .board .list{margin-top:10px;background-color:#fff;border:1px solid #e2e2e2;border-radius:2px}
.officeMain .board .list .head{position:relative;height:45px;line-height:1.4;padding:13px 15px 0;border-bottom:1px solid #e2e2e2;box-sizing:border-box}
.officeMain .board .list .head h2{font-size:15px;color:#333;font-weight:bold}
.officeMain .board .list .head a{position:absolute;right:15px;top:15px;padding-right:13px;font-size:12px;color:#666}
.officeMain .board .list .head a:after{content:'';display:inline-block;position:absolute;right:0;top:4px;width:5px;height:8px;background-image: url('/static/images/common/icon_sprite.png');background-position:-195px 0;background-repeat:no-repeat;background-size: 360px auto}
.officeMain .board .list .content{color:#333}

.officeMain .board .list.schedule .content{font-size:14px;color:#666}
.officeMain .board .list.schedule .content > .noData{padding:20px 0;color:#666}
.officeMain .board .list.schedule .content .list3 > li{position:relative;padding-left:65px;min-height:79px;box-sizing:border-box}
.officeMain .board .list.schedule .content .list3 .naData p{padding-top:11px}
.officeMain .board .list.schedule .content .circle{display:inline-block;position:absolute;left:0;top:50%;width:50px;height:50px;margin-top:-25px;padding-top:11px;border-radius:50%;font-size:13px;line-height:1.2;color:#999;text-align:center;background-color:#f3f9fb;box-sizing:border-box}
.officeMain .board .list.schedule .content .circle.primary{color:#33c5f3}
.officeMain .board .list.schedule .content time{display:block;margin-bottom:5px;font-size:15px;color:#333}
.officeMain .board .list.schedule .content p{word-wrap:break-word;word-break:break-all}
.officeMain .board .list.schedule .content .local{color:#59c28d}
.officeMain .board .list.schedule .content .oneday{color:#59b2c2}
.officeMain .board .list.schedule .content .success {color:#fa993b}

.officeMain .board .list.lifePlan .content{font-size:14px;color:#333}
.officeMain .board .list.lifePlan .content time{font-size:11px;color:#666}
.officeMain .board .list.lifePlan .content .noData{padding:20px 0;color:#666}

.officeMain .board .list.notice .content{font-size:14px;color:#333}
.officeMain .board .list.notice .content li{height:45px;padding:0;white-space:nowrap;box-sizing:border-box}
.officeMain .board .list.notice .content li a{display:inline-block;max-width:100%;padding-top:13px;height:45px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box}
.officeMain .board .list.notice .content li.new{position:relative;padding-right:20px}
.officeMain .board .list.notice .content li.new:after{content:'';display:inline-block;width:16px;height:16px;margin-top:14px;vertical-align:top;background-image: url('/static/images/common/icon_new.png'); background-position:-50px 0;background-repeat:no-repeat;background-size: 360px auto;background-position:0 0}
.officeMain .board .list.notice .content li a time{margin-right:10px}
.officeMain .banner{margin-top:10px}

.officeMain .banner.colors a{height:auto;min-height:40px;padding-bottom:9px}
.officeMain .banner.colors a span{white-space:nowrap}

.officeMain .banner.colors a.seminar{position:relative;min-height:70px;margin:10px 0;padding-top:15px;padding-left:75px}
.officeMain .banner.colors a.seminar:after{left:20px;top:13px;right:inherit;width:39px;height:50px;background-image:url('/static/images/common/icon_seminar.png');background-repeat:no-repeat;background-position:0 0;background-size:39px auto;box-sizing:border-box}
.officeMain .banner.colors a.seminar h2{font-size:15px;color:#333;font-weight:bold}
.officeMain .banner.colors a.seminar p{letter-spacing:-0.5px}

.officeMain .warText{padding:10px 0 0;font-size:12px;color:#333}

/* 나의 애터미 일정 */
.schedule .board .list li .content .starRating{margin-bottom:8px}
.schedule .board .list li .content .starRating .state{display:inline-block;position:relative;width:76px;height:13px;background-image:url('/static/images/common/star_rating.png');background-position:0 0;background-repeat:no-repeat;background-size:360px auto}
.schedule .board .list li .content .starRating .state span{display:inline-block;position:absolute;left:0;top:0;bottom:0;background-image:url('/static/images/common/star_rating.png');background-position:0 -25px;background-repeat:no-repeat;background-size:360px auto}
.schedule .board .list li .content .starRating .text{margin-bottom:8px;font-size:14px;color:#333;word-wrap:break-word;word-break:break-all}
.schedule .board .list li .footer{height:40px;padding:11px 15px 0;border-top:1px solid #e2e2e2;box-sizing:border-box}
.schedule .board .list li .footer:after{content:'';display:block;clear:both}
.schedule .board .list li .footer .score{float:left;font-size:13px;color:#333}
.schedule .board .list li .footer .links{font-size:13px;float:right}
.schedule .board .list li .footer .links a{color:#666}
.schedule .board .list li .footer .links a + a{margin-left:10px}

/* #612 */
.writeSchedule{padding-bottom:70px}
.writeSchedule section{margin-top:15px}
.writeSchedule .table thead th, 
.writeSchedule .table tbody th, .table tbody td{padding:10px 0}
.writeSchedule .evaluate button{font:0/0 a;width:23px;height:23px;background-image:url('/static/images/common/star_rating.png');background-position:-100px 0;background-repeat:no-repeat;background-size:360px auto}
.writeSchedule .evaluate button.active{background-position:-100px -25px}
.writeSchedule .write textarea{margin-top:10px}
.writeSchedule .board .detail .starRating{margin-bottom:8px}
.writeSchedule .board .detail .starRating .state{display:inline-block;position:relative;width:76px;height:13px;background-image:url('/static/images/common/star_rating.png');background-position:0 0;background-repeat:no-repeat;background-size:360px auto}
.writeSchedule .board .detail .starRating .state span{display:inline-block;position:absolute;left:0;top:0;bottom:0;background-image:url('/static/images/common/star_rating.png');background-position:0 -25px;background-repeat:no-repeat;background-size:360px auto}
.writeSchedule .board .detail .starRating .text{margin-bottom:8px;font-size:14px;color:#333}
.writeSchedule .board .detail{padding-bottom:9px;background-color:#fff;border:1px solid #e2e2e2}
.writeSchedule .board .detail .head{padding:12px 13px;font-size:15px;color:#333; background-color:#f3f9fb}
.writeSchedule .board .detail .head:after{content:'';display:block;clear:both}
.writeSchedule .board .detail .head i{float:right;font-size:13px;color:#999}
.writeSchedule .board .detail .content{padding:11px 13px 5px;background-color:#fff;word-wrap: break-word;word-break: break-all}
.writeSchedule .board .detail .content p{font-size:13px;color:#666}

.lowerSalesList{padding-bottom:20px}
.lowerSalesList .headLine{height:38px;text-align:center;overflow:hidden;background-color:#fff;border-bottom:1px solid #c6c6c6;box-sizing:border-box;-webkit-transition:height .2s ease-in;transition:height .2s ease-in}
.lowerSalesList .headLine.active{height:auto;min-height:76px;padding-bottom:5px}
.lowerSalesList .headLine.floating{z-index:100}
.lowerSalesList .headLine button{width:100%;padding:10px 0;padding-bottom:8px}
.lowerSalesList .headLine button strong{display:inline-block;font-size:14px;color:#333}
.lowerSalesList .headLine button small{font-size:12px;color:#999}
.lowerSalesList .headLine button .icon{margin-left:5px;vertical-align:middle;-webkit-transition:-webkit-transform .2s ease-in;transition:transform .2s ease-in}
.lowerSalesList .headLine.active button .icon{-webkit-transform: rotate(180deg);transform: rotate(180deg)}
.lowerSalesList .headLine .total{display:none}
.lowerSalesList .headLine.active .total{display:block}
.lowerSalesList .headLine .total:after{content:'';display:block;clear:both}
.lowerSalesList .headLine .total div{float:left;position:relative;width:50%;padding:0 5px;font-size:20px;color:#333;box-sizing:border-box}
.lowerSalesList .headLine .total div:first-child:after{content:'';display:block;position:absolute;right:0;top:50%;height:20px;margin-top:-10px;border-right:1px solid #e2e2e2}
.lowerSalesList .headLine .total div .icon,
.lowerSalesList .headLine .total div .icon + span{vertical-align:baseline;word-wrap:break-word;word-break:break-all}
.lowerSalesList .headLine .total div .icon{margin-bottom:-5px}
.lowerSalesList .btnMore{margin-bottom:10px}
.lowerSalesList .board .list{margin-top:6px}
.lowerSalesList .board .list > li .head{padding-top:12px}
.lowerSalesList .board .head .dark{font-size:15px}
.lowerSalesList .board .content{font-size:14px;color:#333}
.lowerSalesList .board .content:after{content:'';display:block;clear:both}
.lowerSalesList .board .content .aleft{float:left}
.lowerSalesList .board .content .aright{float:right}
.lowerSalesList .board .content .item{float:left; box-sizing:border-box}
.lowerSalesList .board .content .item:first-child{width:53%;min-width:50%;white-space:nowrap;text-align:left}
.lowerSalesList .board .content .item:last-child{min-width:47%;text-align:right}
.lowerSalesList .board .content .item span{vertical-align:super;line-height:1.6}
.lowerSalesList .board .content .item .icon{vertical-align:top;margin-top:1px}

.lowerSalesList .board .content .aright span{margin-left:5px}
.lowerSalesList .board .content .aright .icon{width:17px;height:17px;margin-top:-2px}
.lowerSalesList .board .content .state{display:inline-block;height:17px;margin-left:5px;margin-top:-1px;padding:0 2px;color:#999;font-size:11px;border:1px solid #999;box-sizing:border-box}
.lowerSalesList .guide li + li{margin-top:5px}
.lowerSalesList .board .content .aleft span,
.lowerSalesList .board .content .aright span{vertical-align:middle;display:inline-block}
.lowerSalesList .filterSet{margin-bottom:8px;padding-bottom:8px}
.lowerSalesList .filterSet .col.search{position:relative}
.lowerSalesList .filterSet .col.search .btnDelete{right:0}
.lowerSalesList .filterSet input[type='search']{border-color:#bfc2c6;font-size:12px;padding:0 3px 0 1px}
.lowerSalesList .table.border.primary td{font-size:20px;padding:1px !important}
.lowerSalesList .table.border.primary th{height:30px}

/* 매출, 수당 */
.board .bar{margin-bottom:8px;font-size:15px;color:#333}
.board .bar .text{float:left;line-height:40px}
.board .bar .select{float:right;width:160px}
.board .bar:after{content:'';display:block;clear:both}
.board .bar span:last-child{display:inline-block;float:right;text-align:right}

.lowerSalesList .billboard{position:relative;padding:8px 5px;border:1px solid #e2e2e2;border-radius:2px}
.lowerSalesList .billboard span{display:inline-block;min-width:49%;padding:0 8px;position:relative;z-index:1;font-size:14px;background-color:#f3f9fb;box-sizing:border-box}
.lowerSalesList .billboard span:first-child{padding-right:8px}
.lowerSalesList .billboard span:last-child{padding-left:8px}
.lowerSalesList .billboard:after{content:'';display:inline-block;position:absolute;left:50%;top:14px;height:11px;border-left:1px solid #e2e2e2}
.lowerSalesList .board .list > li .content{box-sizing:border-box}

.board .list.expand .head:after{content:'';display:block;clear:both}
.board .list.expand .head .state{font-size:12px;padding:0 11px;margin-right:5px;background-color:#94999f;color:#fff;border-radius:17px;display:inline-block;line-height:23px;height:21px;vertical-align:middle}
.board .list.expand .head .state.primary{background-color:#52d3fc}
.board .list.expand .head .state.lineBlue{background-color:transparent;color:#00b6f0;border:1px solid #00b6f0}
.board .list.expand .head .state.lineOrange{background-color:transparent;color:#f9993b;border:1px solid #f9993b}
.board .list.expand .head .state.lineDark{background-color:transparent;color:#707780;border:1px solid #707780}
.board .list.expand .head .code{float:right;margin-top:3px;}
.board .list.expand .head time{font-size:12px;color:#999;vertical-align:middle}
.board .list.expand .footer{border-top:1px solid #e2e2e2}

/* #482 sty01 추가 */
.lowerSalesList .board .head.sty01{height:auto}
.lowerSalesList .board .head.sty01 time{float:none;color:#333}
.lowerSalesList .board .head.sty01 .item{float:left;box-sizing:border-box;padding-bottom:8px}
.lowerSalesList .board .head.sty01 .item:first-child{width:53%;min-width:50%;text-align:left}
.lowerSalesList .board .head.sty01 .item:last-child{min-width:47%;text-align:right}
.lowerSalesList .board .content.sty01{padding:8px 13px}
.lowerSalesList .board .content.sty01 .item:first-child{padding-top:3px}
.lowerSalesList .board .content.sty01 .item:last-child{font-size:16px}

.salesList .billboard{position:relative;padding:8px 5px;border:1px solid #e2e2e2;border-radius:2px}
.salesList .billboard span{display:inline-block;min-width:49%;padding:0 8px;position:relative;z-index:1;font-size:14px;background-color:#f3f9fb;box-sizing:border-box}
.salesList .billboard span:first-child{padding-right:8px}
.salesList .billboard span:last-child{padding-left:8px}
.salesList .billboard:after{content:'';display:inline-block;position:absolute;left:50%;top:14px;height:11px;border-left:1px solid #e2e2e2}

.salesList .board .list{margin-top:10px}
.salesList .board .list .content{padding:12px 15px; color:#333}
.salesList .board .list .content .name{font-size:14px}
.salesList .board .list .content .code{font-size:15px}
.salesList .board .list .content .info{margin-top:2px;font-size:13px}
.salesList .board .list .content .info:after{content:'';display:block;clear:both}
.salesList .board .list .content .info div{float:left}
.salesList .board .list .content .info div:after{content:'';display:block;clear:both}
.salesList .board .list .content .info div span{float:left;position:relative;margin-left:8px;padding-left:8px}
.salesList .board .list .content .info div span:first-child{padding-left:0;margin-left:0}
.salesList .board .list .content .info div span:after{content:'';display:inline-block;position:absolute;left:0;top:6px;height:11px;border-left:1px solid #e2e2e2}
.salesList .board .list .content .info div span:first-child:after{content:none}
.salesList .board .list .content .info div span em{font-size:17px}
.salesList .board .list .content .info div span em cite.strike{ text-decoration:line-through;}
.salesList .board .list .content .info p{float:right;margin-top:3px}
.salesList .board .btnMore{margin-top:10px}

.commission .board .list{color:#333}
.commission .board .list .content dl + dl{margin-top:5px}
.commission .board .list .content dl:after{content:'';display:block;clear:both}
.commission .board .list .content dl dt{float:left}
.commission .board .list .content dl dd{float:right}
.commission .board .list .footer:after{content:'';display:block;clear:both}
.commission .board .list .footer{height:40px;padding:11px 15px 0;font-size:13px;box-sizing:border-box}
.commission .board .list .footer span{float:left;color:#333}
.commission .board .list .footer .name{float:right}

.supportCommission .board .list .content dl{display:table;margin-top:5px;width:100%;font-size:14px;color:#333}
.supportCommission .board .list .content dl.disable{color:#999}
.supportCommission .board .list .content dl dt{display:table-cell;width:30%}
.supportCommission .board .list .content dl dd{display:table-cell;width:40%;text-align:right;white-space:nowrap}
.supportCommission .board .list .footer{height:40px;padding-top:10px;text-align:center;font-size:14px;color:#333;box-sizing:border-box}
.supportCommission .board .list .footer .col{float:left;position:relative;width:50%;height:40px;box-sizing:border-box}
.supportCommission .board .list .footer .col:first-child:after{content:'';display:inline-block;position:absolute;right:0;top:3px;height:13px;/*border-left:1px solid #e2e2e2;*/}
.supportCommission .board .list .content{padding:0} /* #333 */
.supportCommission .board .list .content .table{border-top:0}
.supportCommission .board .list .content .table thead th{height:20px;font-size:14px;text-align:center;border-right:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;background-color:#fff;box-sizing:border-box;vertical-align:middle}
.supportCommission .board .list .content .table tbody td{padding:3px 10px 3px 3px;text-align:right;border-right:1px solid #e2e2e2;border-bottom:0;background-color:#fff;vertical-align:middle}
.supportCommission .board .list .content .table tbody th{height:20px;padding:3px 0 3px 10px;border-right:1px solid #e2e2e2;border-bottom:0}
.supportCommission .board .list .content .table tbody tr:first-child th, .supportCommission .board .list .content .table tbody tr:first-child td{padding-top:7px}
.supportCommission .board .list .content .table tbody tr:last-child th, .supportCommission .board .list .content .table tbody tr:last-child td{color:#989898;padding-bottom:7px}
.supportCommission .board .list .content .table thead th:last-child, .supportCommission .board .list .content .table tbody tr td:last-child{border-right:0}
.supportCommission .board .list .content .table tbody .text-center{text-align: center}

/* 구매이력상품 */
.orderHistory .guide{padding:15px 0}

/* 나의인생 시나리오 */
.planList .guide{height:235px;color:#fff;text-align:center;font-size:13px;background-image:url('/static/images/common/plan_bg.jpg');background-repeat:no-repeat;background-position:0 0;background-size:cover;box-sizing:border-box}
.planList .guide .text{padding-top:25px}
.planList .guide .text p{padding-bottom:5px}
.planList .guide .text p strong{font-size:23px}
.planList .guide .btns{margin-top:10px}
.planList .guide .btns a{display:block;width:180px;height:40px;line-height:36px;margin:0 auto 10px;font-size:14px;color:#fff;background-color:rgba(0,0,0,.2);border:2px solid #fff;border-radius:20px;box-sizing:border-box}
.planList .plans .btnMore{margin:10px 0}
.planList .plans .controls{height:40px;margin:10px 0;overflow:hidden;}
.planList .plans .controls .aleft{display:inline-block;height:25px;vertical-align:top;-webkit-transform:translateY(25%);transform:translateY(25%)}
.planList .plans .controls .checkbox{vertical-align:top}
.planList .plans .controls .checkbox + label{vertical-align:middle;line-height:25px;display:inline-block;margin-left:4px}
.planList .plans .controls .btn{float:right;vertical-align:middle}
.planList .plans .list li{position:relative;margin-bottom:6px}
.planList .plans .list li:after{content:'';display:inline-block;position:absolute;right:15px;top:23px;width:7px;height:13px;pointer-events:none;background-image:url('/static/images/common/icon_sprite.png');background-repeat:no-repeat;background-position:-215px 0;background-size:360px auto;box-sizing:border-box}
.planList .plans .list li .checkbox{position:absolute;left:15px;top:16px}
.planList .plans .list li .checkbox input[type='checkbox']{width:50px;height:50px;left:-15px;top:-13px}
.planList .plans .list li a{display:block;height:60px;padding:11px 20px 15px 50px;color:#333;font-size:14px;background-color:#fff;border:1px solid #e2e2e2;border-radius:2px;box-sizing:border-box}
.planList .plans .list li a .icon.new{vertical-align:text-bottom}
.planList .plans .list li a time{display:block;font-size:11px;color:#666}
.planList .noData.bubble{margin-top:70px}

.lifeWrite .guide{height:130px;color:#fff;text-align:center;font-size:13px;background-image:url('/static/images/common/life_write_bg.jpg');background-repeat:no-repeat;background-position:0 0;background-size:cover;box-sizing:border-box}
.lifeWrite .guide{padding-top:18px}
.lifeWrite .guide p{font-size:19px;padding-bottom:5px}
.lifeWrite .write .box{padding:20px;line-height:1.3}
.lifeWrite .write .box .primary{font-size:17px}
.lifeWrite .write .box .primary small{font-size:13px}
.lifeWrite .write .box em{font-size:13px;color:#333}
.lifeWrite .write .box .block{display:inline-block}
.lifeWrite .write .box .bullet{margin-top:5px;line-height:1.5}
.lifeWrite .write .support section{position:relative}
.lifeWrite .write .support section:before{content:'';display:inline-block;position:absolute;left:40px;top:0;height:130%;border-left:1px solid #c9c9c9}
.lifeWrite .write .support section + section{margin-top:15px}
.lifeWrite .write .support section:last-child:before{content:none}
.lifeWrite .write .support section:after{content:'';display:block;clear:both}
.lifeWrite .write .support section .head{width:80px;height:80px;padding:7px 10px 0;position:absolute;left:0;top:0;color:#fff;text-align:center;border-radius:50%;box-sizing:border-box}
.lifeWrite .write .support section .head strong{font-size:17px}
.lifeWrite .write .support section .head small{display:block;padding-bottom:4px;margin-bottom:1px;line-height:1.3;font-size:8px;border-bottom:1px solid rgba(255,255,255,.3);letter-spacing:-0.5px}
.lifeWrite .write .support section .head span{display:block;font-size:12px}
.lifeWrite .write .support section ul{position:relative;float:right;width:70%;padding:7px 20px 15px;background-color:#fff;border:1px solid #e2e2e2;border-radius:2px;box-sizing:border-box}
.lifeWrite .write .support section ul li{float:left;width:50%;margin-top:6px}
.lifeWrite .write .support section ul li label{font-size:14px;color:#333}
.lifeWrite .write .support section ul:before,
.lifeWrite .write .support section ul:after{content:'';display:inline-block;position:absolute;top:22px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:0}
.lifeWrite .write .support section ul:before{left:-10px;border-right:10px solid #e2e2e2}
.lifeWrite .write .support section ul:after{left:-8px;border-right:10px solid #fff}

.lifeWrite .write .support section.flesh .head{background-color:#f9993b}
.lifeWrite .write .support section.soul .head{background-color:#9562ca}
.lifeWrite .write .support section.sprit .head{background-color:#74bae2}
.lifeWrite .write .support section.environment .head{background-color:#8acb56}

.lifeDetail .chart{position:relative;height:290px;text-align:center;background-color:#fff;box-sizing:border-box;-webkit-box-shadow: 0 1px 1px rgba(0,0,0,.1);box-shadow: 0 1px 1px rgba(0,0,0,.1)}
.lifeDetail .chart time{position:absolute;right:15px;top:10px;font-size:13px;color:#333}
.lifeDetail .detail section{margin-top:15px}
.lifeDetail .detail section h2{margin-bottom:4px;text-align:center;font-size:14px;color:#333}
.lifeDetail .detail section h2 strong{font-size:20px}
.lifeDetail .detail section.flesh h2 strong{color:#f9993b}
.lifeDetail .detail section.soul h2 strong{color:#9562cb}
.lifeDetail .detail section.spirit h2 strong{color:#74bae2}
.lifeDetail .detail section.environment h2 strong{color:#89ca55}

.lifeDetail .detail section article{position:relative;padding:15px;background-color:#fff;border:1px solid #e2e2e2;border-radius:2px}
.lifeDetail .detail section article + article{margin-top:6px}
.lifeDetail .detail section article .content{position:relative;min-height:106px;overflow:hidden;padding-left:116px}
.lifeDetail .detail section article .content .thumb{display:block;float:left;width:106px;height:106px;margin-left:-116px;background-image:url('/static/images/common/thumb_default_3.png');background-position:0 0;background-repeat:no-repeat;background-size:cover}
.lifeDetail .detail section article .content .thumb img{width:100%;height:100%}
.lifeDetail .detail section article .content .title{margin-bottom:3px;padding-bottom:5px;line-height:1.1;border-bottom:1px solid #e2e2e2}
.lifeDetail .detail section article .content .text{display:inherit;padding-top:6px;line-height:1.5;font-size:13px;color:#333;word-break:break-all;word-wrap:break-word}
.lifeDetail .detail section article.empty .content .text{color:#999}
.lifeDetail .detail section article a{position:absolute;right:15px;top:15px;line-height:1.2;font-size:12px;color:#7f8792}
.lifeDetail .detail section article a .icon{margin-right:3px;vertical-align:text-bottom}
.lifeDetail .detail section article .grade{position:relative;padding-right:48px;margin-top:15px}
.lifeDetail .detail section article .grade .state{height:5px;background-color:#f1f2f4;border-radius:2px;overflow:hidden}
.lifeDetail .detail section article .grade .state span{display:inline-block;height:100%;vertical-align:top}
.lifeDetail .detail section article .grade .score{position:absolute;right:0;top:-10px;width:40px}

.lifeDetail .detail section.flesh article .grade .state span{background-color:#f99b3b}
.lifeDetail .detail section.soul article .grade .state span{background-color:#9562ca}
.lifeDetail .detail section.spirit article .grade .state span{background-color:#74bae2}
.lifeDetail .detail section.environment article .grade .state span{background-color:#89ca55}

.lifeDetail .detail section.flesh article .grade .score{color:#f99b3b}
.lifeDetail .detail section.soul article .grade .score{color:#9562ca}
.lifeDetail .detail section.spirit article .grade .score{color:#74bae2}
.lifeDetail .detail section.environment article .grade .score{color:#89ca55}
.lifeDetail .detail section article.empty .grade .score{color:#666}
.lifeDetail .detail section article.empty .grade .score strong{font-weight:normal}

.lifeDetail .licensee{border-bottom:1px solid #707780}
.lifeDetail .controls{text-align:left;padding:13px 0 15px;margin-bottom:3px;border-bottom:1px solid #bfc2c6;white-space:nowrap}
.lifeDetail .controls .col{color:#333;white-space:nowrap;padding-left:5px}
.lifeDetail .controls .liceTit{padding:0 15px;vertical-align:middle;color:#010101}
.lifeDetail .controls:last-child{border-bottom:none;padding:7px 0}
.lifeDetail .controls:last-child input{width:77%}

.rankWrite .controls{text-align:left;padding:0 0 15px;margin-bottom:3px;border-bottom:1px solid #bfc2c6;white-space:nowrap}
.rankWrite .controls .col{color:#333;white-space:nowrap;padding-left:5px}
.rankWrite .controls .liceTit{padding:0 15px 0 0;vertical-align:middle;color:#010101}
.rankWrite .controls:last-child{border-bottom:none;padding:7px 0 30px}
.rankWrite .controls:last-child input{width:77%}

.lifeEdit{padding-bottom:70px}
.lifeEdit .fixContent.row.btns.margin{padding-bottom:0;bottom:15px}
.lifeEdit .board{margin:15px 0}
.lifeEdit .board .write{margin-top:10px}
.lifeEdit .board .write textarea{height:250px;word-wrap:break-word;word-break:break-all}
.lifeEdit .grade .title{position:relative;padding-left:18px}
.lifeEdit .grade .title:after{content:'';display:inline-block;position:absolute;left:0;top:7px;width:13px;height:10px;background-position:-175px 0;background-image:url('/static/images/common/icon_sprite.png');background-repeat:no-repeat;background-size:360px auto}
.lifeEdit .grade .state{height:5px;margin-top:10px;background-color:#f1f2f4;border-radius:2px}
.lifeEdit .grade .state span{display:inline-block;position:relative;height:100%;background-color:#f99b3b;vertical-align:top}
.lifeEdit .grade .state span:before,
.lifeEdit .grade .state span:after{content:'';display:inline-block;position:absolute;border-radius:50%;box-sizing:border-box}
.lifeEdit .grade .state span:before{width:20px;height:20px;background-color:#f99b3b;right:-6px;top:-7px}
.lifeEdit .grade .state span:after{width:14px;height:15px;background-color:#fff;right:-3px;top:-5px}

.lifeEdit .grade.flesh .state span{background-color:#f99b3b}
.lifeEdit .grade.flesh .state span:before{background-color:#f99b3b}
.lifeEdit .grade.flesh .number li.active label{color:#f99b3b}

.lifeEdit .grade.soul .state span{background-color:#9562ca}
.lifeEdit .grade.soul .state span:before{background-color:#9562ca}
.lifeEdit .grade.soul .number li.active label{color:#9562ca}

.lifeEdit .grade.spirit .state span{background-color:#74bae2}
.lifeEdit .grade.spirit .state span:before{background-color:#74bae2}
.lifeEdit .grade.spirit .number li.active label{color:#74bae2}

.lifeEdit .grade.environment .state span{background-color:#89ca55}
.lifeEdit .grade.environment .state span:before{background-color:#89ca55}
.lifeEdit .grade.environment .number li.active label{color:#89ca55}

.lifeEdit .grade .number{position:relative;height:25px}
.lifeEdit .grade .number li{position:absolute;bottom:0}
.lifeEdit .grade .number li.num1{left:0}
.lifeEdit .grade .number li.num2{left:16%}
.lifeEdit .grade .number li.num3{left:36%}
.lifeEdit .grade .number li.num4{right:36%}
.lifeEdit .grade .number li.num5{right:16%}
.lifeEdit .grade .number li.num6{right:0}
.lifeEdit .grade .number li label{font-size:13px;color:#333}
.lifeEdit .grade .number li.active label{font-weight:bold;color:#f99b3b}

.rankDetail .plans time{display:block;margin-top:15px;font-size:13px;color:#333;text-align:right}
.rankDetail .plans .rank{position:relative;min-height:80px}
.rankDetail .plans .rank:before{content:'';display:inline-block;position:absolute;left:40px;top:0;height:130%;border-left:1px solid #c9c9c9}
.rankDetail .plans .rank + .rank{margin-top:15px}
.rankDetail .plans .rank:last-child:before{content:none}
.rankDetail .plans .rank:after{content:'';display:block;clear:both}
.rankDetail .plans .rank .head{width:80px;height:80px;padding:21px 0 0;position:absolute;left:0;top:0;line-height:1.4;font-size:14px;color:#333;text-align:center;background-color:#fff;border-radius:50%;box-sizing:border-box}
.rankDetail .plans .rank .head strong{display:block}
.rankDetail .plans .rank .head small{display:block;padding-bottom:4px;margin-bottom:1px;line-height:1.3;font-size:10px;border-bottom:1px solid rgba(255,255,255,.3)}
.rankDetail .plans .rank .head span{display:block;font-size:12px}
.rankDetail .plans .rank ul{position:relative;float:right;width:70%;margin-top:10px;padding:0 20px 15px;background-color:#fff;border:1px solid #e2e2e2;border-radius:2px;box-sizing:border-box}
.rankDetail .plans .rank ul li{margin-top:13px;font-size:13px;color:#333}
.rankDetail .plans .rank ul li span{color:#666}
.rankDetail .plans .rank ul:before,
.rankDetail .plans .rank ul:after{content:'';display:inline-block;position:absolute;top:19px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:0}
.rankDetail .plans .rank ul:before{left:-10px;border-right:10px solid #e2e2e2}
.rankDetail .plans .rank ul:after{left:-8px;border-right:10px solid #fff}

.rankDetail .plans .rank.sales .head{border:3px solid #c6edfb}
.rankDetail .plans .rank.diamond .head{border:3px solid #96def6}
.rankDetail .plans .rank.sharon .head{border:3px solid #6ed4f5}
.rankDetail .plans .rank.star .head{border:3px solid #59d0f6}
.rankDetail .plans .rank.royal .head{border:3px solid #00b6f0}
.rankDetail .plans .rank.crown .head{border:3px solid #009ad3}
.rankDetail .plans .rank.imperial .head{border:3px solid #0c83ce}

.rankDetail .board{margin-top:22px}
.rankDetail .board .content{padding:10px 0;font-size:14px;color:#333;border-top:1px solid #707780;border-bottom:1px solid #e2e2e2}

.rankWrite .guide{height:130px;margin-bottom:15px;color:#fff;text-align:center;font-size:13px;background-image:url('/static/images/common/promotion_write_bg.jpg');background-repeat:no-repeat;background-position:0 0;background-size:cover;box-sizing:border-box}
.rankWrite .guide{padding-top:18px}
.rankWrite .guide p{font-size:19px;padding-bottom:5px}
.rankWrite .plan .btns{margin:10px 0;text-align:right}
.rankWrite .board{margin-top:10px}
.rankWrite .board textarea{height:150px}

/* 계보도 */
.tree #header{border-bottom:1px solid #aaa}
.tree rect{fill:transparent}
.tree .person{font: 14px sans-serif;cursor: pointer}
.tree .link{fill:none;stroke:#e2e2e2;stroke-width:2px}
.tree .added span{display:inline-block;width:20px;height:20px;font-size:12px;vertical-align:middle;text-align:center;border-radius:2px;box-sizing:border-box}
.tree .added .couple{background-color:transparent;color:#fff;border:1px solid #fff}

svg .node.small.blue rect{fill:#4c86e6}
svg .node.large.blue .head rect{fill:#417ad9;stroke:#417ad9;stroke-width:1.5px}
svg .node.small.red rect{fill:#f38e28}
svg .node.large.red .head rect{fill:#f38e28;stroke:#e98725;stroke-width:1.5px}
svg .node.small.green rect{fill:#33b573}
svg .node.large.green .head rect{fill:#33b573;stroke:#2aa868;stroke-width:1.5px;stroke-top-width:0}
svg .node.small.gray rect{fill:#d9d9d9}
svg .node.large.gray .head rect{fill:#d9d9d9;stroke:#d6d6d6;stroke-width:1.5px}
svg .node.large.gray .body .title{fill:#dfe3e6 !important}
svg .node.large.gray .body .value{fill:#c2c2c2 !important}
svg .node.large.gray .body .button{opacity:.4}

svg .node.large .body rect{fill:#fff;stroke:#e2e2e2;stroke-width:1.5px}
svg .node.large .head text{fill:rgba(255,255,255,.6)}

/* 계보도 스타일 변경될거  */
.tree svg .node.large .headRect{stroke-width:2px}
.tree svg .node.large.green .headRect{fill:#33b573;stroke:#2aa868}
.tree svg .node.large.blue .headRect{fill:#4c86e6;stroke:#417ad9}
.tree svg .node.large.red .headRect{fill:#f38e28; stroke:#e98725}
.tree svg .node.large.gray .headRect{fill:#d9d9d9;stroke:#d6d6d6}
.tree svg .node.large .bodyRect{fill:#fff;stroke:#e2e2e2;stroke-width:2px}
.tree .btns{position:fixed;left:0;right:0;bottom:0;padding:10px 15px}
.tree .btns:after{content:'';display:block;clear:both}
.tree .btns .btnPrev{float:left;background-color:#fff;border:1px solid #c6c6c6}
.tree .btns .btnSearch{float:right;padding:3px 0 0;background-color:#2dbfed;border:none}
.tree .row.btns.floating{height:70px;margin-bottom:0;padding:10px 10px;border-top:1px solid #eaebed}

.nodeInfo .layout{min-height:85px;-webkit-box-shadow: 0 -1px 2px rgba(0,0,0,.2);box-shadow: 0 -1px 2px rgba(0,0,0,.2)}
.nodeInfo .layout .row{display:table;table-layout:fixed;width:100%;min-height:85px;color:#fff}
.nodeInfo .layout .row.blue{background-color:#5e92e8}
.nodeInfo .layout .row.red{background-color:#e19230}
.nodeInfo .layout .row.green{background-color:#47bc81}
.nodeInfo .layout .row.gray{background-color:#bababa}
.nodeInfo .layout .row .col{position:relative;display:table-cell;box-sizing:border-box}
.nodeInfo .layout .row .col small{font-size:14px;line-height:1;vertical-align:top;color:rgba(255,255,255,.6)}
.nodeInfo .layout .row .col .name{font-size:19px}
.nodeInfo .layout .row .col .name.small{font-size:15px}
.nodeInfo .layout .row .col .data{position:absolute;left:15px;right:15px;bottom:12px;font-size:14px;color:#fff;line-height:1.2}
.nodeInfo .layout .row .col .data p{float:left;position:relative;padding-left:5px;margin-left:5px}
.nodeInfo .layout .row .col .data p:after{content:'';display:inline-block;position:absolute;left:0;top:50%;height:9px;margin-top:-5px;border-left:1px solid rgba(255,255,255,.3)}
.nodeInfo .layout .row .col .data p:first-child{padding-left:0;margin-left:0}
.nodeInfo .layout .row .col .data p:first-child:after{content:none}
.nodeInfo .layout .row .col .data .icon.lower2{margin-right:3px}

.nodeInfo .layout .row .col .ellipsis{display:inline-block;max-width:100%;white-space:nowrap;overflow: hidden;text-overflow:ellipsis}

.nodeInfo .layout .row .col .added{display:inline-block;height:15px;vertical-align:top}
.nodeInfo .layout .row .col .added:after{content:'';display:block;clear:both}
.nodeInfo .layout .row .col .added span{display:none;float:left;width:20px;height:20px;font-size:12px;text-align:center;vertical-align:text-top;border-radius:2px;box-sizing:border-box}
.nodeInfo .layout .row .col .added.tel .icon.tel3,
.nodeInfo .layout .row .col .added.couple .icon.couple{display:inline-block;font:0/0 a}
.nodeInfo .layout .row .col .added span + span{margin-left:6px}
.nodeInfo .layout .row .col .name{height:24px;margin-top:4px;line-height:1;word-wrap:break-word;word-break:break-all}
.nodeInfo .layout .row .col .name strong{ vertical-align:middle;line-height:1;box-sizing: border-box}

.nodeInfo .layout .row .col2 .data:after,
.nodeInfo .layout .row .col2 .data:after{content:'';display:block;clear:both}
.nodeInfo .layout .row .col2 .data dt{float:left;margin-right:10px;font-size:12px;color:rgba(255,255,255,.6);line-height:1.4}
.nodeInfo .layout .row .col2 .data dd{float:left;font-size:14px;line-height:1.2;color:#fff}

.nodeInfo .layout .row .col1{width:42%;padding:15px 15px 35px;border-right:1px solid rgba(0,0,0,.05);font-size:0}
.nodeInfo .layout .row .col1 span{vertical-align:baseline;font-size:14px}
.nodeInfo .layout .row .col1 .added{vertical-align:top}
.nodeInfo .layout .row .col1 .id{display:inline-block;height:15px;line-height:1;font-size:14px;padding-top:2px}
.nodeInfo .layout .row .col2{position:relative;width:45%;padding:15px 15px 35px}
.nodeInfo .layout .row .col3{width:13%;background-color:#fff;text-align:center;vertical-align:middle}
.nodeInfo .layout .row .col3 button{height:100%;vertical-align:top}

.nodeInfo .btnBookmark{position:absolute;right:7px;top:10px}

/* 계보도 설정 */
.treeSetting .body{padding-bottom:20px;background-color:#707780;color:#ccc;font-size:15px}
.treeSetting .controls{height:50px;color:#fff;background-color:#636971;box-sizing:border-box;text-align:center}
.treeSetting .controls .col{line-height:50px}
.treeSetting .controls .col + .col{padding-left:10px}
.treeSetting .controls .col .radio{-webkit-transform: translateY(1px);transform: translateY(1px);vertical-align:sub}
.treeSetting .controls:after{content:'';display:block;clear:both}
.treeSetting .controls label{font-size:14px;vertical-align:bottom}
.treeSetting .checkbox,
.treeSetting .radio{background-color:transparent}
.treeSetting .content section{margin-top:15px}
.treeSetting .content section h3{padding:10px;color:#fff;border-bottom:1px solid #8d9299}
.treeSetting .content section ul{padding-left:15px}
.treeSetting .content section ul li{padding:7px 15px 7px 0;border-bottom:1px solid #8d9299}
.treeSetting .content section ul li:after{content:'';display:block;clear:both}
.treeSetting .content section ul li label{float:left;font-size:15px}
.treeSetting .content section ul li label small{font-size:12px}
.treeSetting .content section ul li .checkbox{float:right}
.treeSetting .bullet{color:#ccc}
.treeSetting .bullet:after{background-color:#ccc}

.treeSetting .row.period{display:table;table-layout:fixed;position:relative;width:100%;margin-top:10px;padding-right:15px;box-sizing:border-box}
.treeSetting .row.period .col{position:relative;display:table-cell;width:48%}
.treeSetting .row.period .col.dash{width:6%;text-align:center}
.treeSetting .row.period .col input[data-role='date']{/*padding-right:30px;*/ font-size:14px;background-color:transparent;color:#fff}
.treeSetting .row.period .col .icon.calendar{position:absolute;right:10px;top:10px;pointer-events:none}

.lowerMember{height:100vh}
.lowerMember .row.search input[type='search']{padding-right:79px}
.lowerMember .row.search .btnDelete{right:40px;width:29px;height:40px}
.lowerMember .row.search .btnDelete .icon{position:absolute;top:50%;left:50%;width:17px;height:17px;margin:-8.5px 0 0 -8.5px;border-radius:50%;background-color:#dcdcdc;background-image:none}
.lowerMember .row.search .btnDelete .icon.delete:after{content: '';display: inline-block;width: 6.5px;height: 6.5px;margin-top: 5.25px;background-size: 360px auto;background-image: url('/static/images/common/icon_sprite.png');background-position: -230px -25px}

.lowerMember .row.search input[type='search']::-webkit-search-decoration,
.lowerMember .row.search input[type='search']::-webkit-search-cancel-button,
.lowerMember .row.search input[type='search']::-webkit-search-results-button,
.lowerMember .row.search input[type='search']::-webkit-search-results-decoration{display:none}

.text-independent{margin-top:10px;font-size:12px;line-height:15px;color:#666}
.text-lower-detail{float:right}
.btn-lower-detail{padding:3px 5px;border:1px solid #ddd;box-sizing:border-box;font-size:12px;border-radius:2px;background-color:#fff}
.btn-lower-detail.btn-full{width:100%}
.box-lower-result .table{border-top:1px solid #e2e2e2;font-size:12px}
.box-lower-result tfoot{border-top:1px solid #e2e2e2}
.box-lower-result tfoot th, td{vertical-align:middle;border-right:1px solid #e2e2e2}
.box-lower-result tfoot th{padding:5px 10px 5px 10px}
.box-lower-result tfoot td{padding:5px}
.box-lower-result .text-sum{display:none;text-align:right;font-weight:bold;font-size:14px;color:#fa993b}
.box-lower-result .text-sum.is-active{display:block}
.box-lower-result .ico-sum{display:none;text-align:center}
.box-lower-result .ico-sum.is-active{display:block}

'Static > style' 카테고리의 다른 글

transition.css  (0) 2021.02.19
shop.css  (0) 2021.02.19
module.css  (0) 2021.02.19
member.css  (0) 2021.02.19
media_query.css  (0) 2021.02.19

간단 설명


@charset "UTF-8";

/* section */
.block{display:block}
.noScroll,
.noScroll #container{overflow:hidden}
body.white{background-color:#fff}
#body.pb70{padding-bottom:70px}
.margin{padding:0 15px}
.margin.sides{margin-top:15px;margin-bottom:15px}
.marginTB{margin:10px 0 10px}
.margin > .row.btns.margin{padding:0}
.accelerator{-webkit-backface-visibility:hidden;backface-visibility:hidden ;-webkit-transform:translateZ(0deg) ;transform:translateZ(0deg)}
.borderNo{border:none !important} 
.selStyle{margin:20px 0 10px;float:right;width:50%;}
.flexBetweenCenter{display:flex;align-items:center;justify-content:space-between}
.flex-1{flex:1}
.vtTop{vertical-align:top}

/* Loading */
.loading{position:fixed;left:0;top:0;z-index:-1}
.loading.active{z-index:260;width:100%;height:100%}
.loading.active .progress{display:inline-block;position:fixed;width:24px;height:24px;left:50%;top:50%;margin:-4px 0 0 -4px;background-image:url('/static/images/common/loading.gif');background-repeat:no-repeat;background-position:0 0;background-size:24px auto}
.loading.active .dim{background-color:transparent;position:fixed;left:0;top:0;right:0;bottom:0;z-index:1;pointer-events:none}
.img img{width:auto;max-width:100%}

/* Section Align Center  */
.verticalCenter{min-height:300px;
	display:-webkit-box;display:-webkit-flex;display:flex;
	-webkit-box-pack:center;
	-moz-box-pack:center;
	-webkit-justify-content:center;
	justify-content:center;
	-webkit-align-content:center;
	align-content:center;
	-webkit-box-align:center;
	-moz-box-align:center;
	-webkit-align-items:center;
	align-items:center;
}
.verticalCenter .alignItem{
	-webkit-box-flex:0;
	-moz-box-flex:0;
	-webkit-flex:0 1 auto;
	flex:0 1 auto;
	}
.password .verticalCenter{min-height:500px}

/* Font */
.titleBar{background-color:#f1f2f4}
.titleBar:after{content:'';display:block;clear:both}
.title{color:#333}
.title.sect{font-size:18px;color:#333;font-weight:bold}
.title.line{border-bottom:1px solid #707780}
.titleBar .titleSect{float:left}
.titleHead{font-size:21px;color:#000}
.text01{font-size:16px;color:#333}
.text02{font-size:12px;color:#666}
.text03{font-size:12px;color:#f9993b}

/* Text Color */
.dark{color:#333}
.primary{color:#00b6f0}
a[href*='tel:']{color:inherit}
.em{color:#f9993b}
.warning{font-size:14px;color:#f9993b}
.asterisk{color:#f9993b}
.primary02{color:red}
.soft{color:#999}
.underline{text-decoration:underline}

/* Text Size */
.text11{font-size:11px}
.text12{font-size:12px}
.text13{font-size:13px}
.text14{font-size:14px}
.text15{font-size:15px}
.text16{font-size:16px}
.text17{font-size:17px}
.text19{font-size:19px;line-height:1.4}
.text20{font-size:20px;line-height:1.4}
.text23{font-size:23px;line-height:1.3}
.text25{font-size:25px;line-height:1.2}
.text29{font-size:29px;line-height:1.2}

/* Text Style */
.title.sub{margin-bottom:3px;font-size:16px;color:#333;font-weight:bold}
.bold{font-weight:bold}
.bullet{position:relative;padding-left:9px;font-size:12px;color:#666}
.bullet:after{content:'';display:block;width:3px;height:3px;position:absolute;left:0;top:7px;background-color:#707780}
li.bullet{line-height:1.4}
li.bullet + .bullet{margin-top:4px}
.table .bullet{display:inline-block;margin-top:7px;line-height:1.4}

.acenter{text-align:center}
.alenter{text-align:left}
.aright{text-align:right}

ol.decimal{margin-left:17px}
ol.decimal,
ol.decimal li{padding:auto;list-style:inherit;list-style-type:decimal}

ol.decimal-counter{margin-left:0;counter-reset:decimal-counter}
ol.decimal-counter li{position:relative;list-style-type:none;padding-left:20px}
ol.decimal-counter li:before{position:absolute;left:0;top:0;counter-increment:decimal-counter;content:"(" counter(decimal-counter) ")"}

ol.roman{margin-left:17px}
ol.roman,
ol.roman li{list-style:inherit;list-style-type:lower-roman}

ol.alphabet{margin-left:17px}
ol.alphabet,
ol.alphabet li{list-style:inherit;list-style-type:lower-alpha}

ul.dash li{padding-left:13px;text-indent:-11px;list-style:none}
ul.dash li:before{content:'-';margin-right:5px}

.indStar{padding-left:12px;text-indent:-10px}
.indChum{padding-left:15px;text-indent:-15px}

.pt10{padding-top:10px}
.pb10{padding-bottom:10px}
.pl10{padding-left:10px}

.mt5{margin-top:5px !important}
.mt10{margin-top:10px !important}
.mt15{margin-top:15px !important}
.mt20{margin-top:20px !important}
.mt30{margin-top:30px !important}
.mt100{margin-top:100px !important}
.mb5{margin-bottom:5px !important}
.mb10{margin-bottom:10px !important}
.mb15{margin-bottom:15px !important}
.mb20{margin-bottom:20px !important}
.mb30{margin-bottom:30px !important}

.ml5{margin-left:5px !important}
.ml10{margin-left:10px !important}
.mr10{margin-right:10px !important}

/* Box */
.box.primary{background-color:#f3f9fb;color:#333}
.box.gray{background-color:#e8e8e9}
.box.dark{background-color:#707780;border-radius:2px;color:#fff}
.box.dark .primary{color:#2dcdff}
.box.center{text-align:center}
.box.default{border:1px solid #e2e2e2;border-radius:2px}

/* Input */
.fakeInput{display:inline-block}
.fakeInput input[type='text']{border:none;width:auto;height:auto;padding:0;font-size:14px}
.inlineInput input[type='text']{width:auto}

.checkboxWrap{display:flex;flex-wrap:wrap}
.checkboxWrap .checkboxItem{flex:0 1 33.33%;margin-bottom:5px}

/* topButton */
.btnTop{display:inline-block;position:fixed;right:10px;bottom:70px;width:50px;height:50px;font:0/0 a;background-image:url('/static/images/common/button_top.png');background-position:0 0;background-size:50px auto;background-repeat:no-repeat}
.product ~ .btnTop{bottom:80px}
.company .btnTop{bottom:10px}
.favorite ~ .btnTop, .cart ~ .btnTop{bottom:140px}

/* topButton */
.btnScroll{position:fixed;right:0;bottom:0;width:100%;height:70px;margin-top:10px;border-top:1px solid #eaebed;background-color:#fff}

/* bottom Button */
.fixBottomBtn{position:fixed;right:10px;bottom:70px;z-index:10}
.fixBottomBtn .btnTop{position:static;vertical-align:top;margin-top:5px}
.btnChat{display:block;width:50px;height:50px;font:0/0 a;background-image:url('/static/images/common/button_talk.png');background-position:0 0;background-size:50px auto;background-repeat:no-repeat}
.company .fixBottomBtn{bottom:10px}

/* Button */

.floating{position:fixed;z-index:350;width:100%;background-color:#fff}
.row.btns.floating{left:0;right:0;bottom:0}
.row.btns.floating.box{padding-top:15px;border-top:1px solid #e2e2e2}

.btn{display:inline-block;position:relative;vertical-align:middle;text-align:center;box-sizing:border-box}
.btn.block{width:100%}

.btn.default{color:#666;background-color:#fff;border:1px solid #c6c6c6;border-radius:2px}
.btn.primary{color:#fff;background-color:#00b6f0;border-radius:2px}
.btn.current{color:#00b6f0;background-color:#fff;border:1px solid #00b6f0;border-radius:2px}
.btn.inverse{color:#fff;background-color:#707780;border-radius:2px}
.btn.etc01{color:#666;background-color:#f6f6f8;border:1px solid #c9c9c9;border-radius:2px}
.btn.etc02{color:#fff;background-color:#7fdaf7;border-radius:2px}
.btn.etc03{color:#fff;background-color:#7d7d7d;border:1px solid #7d7d7d;border-radius:2px}
.btn.secondary{color:#fff;background-color:#64d0f3;}
.btn.third{color:#fff;background-color:#336699}

a.disabled{pointer-events:none;cursor:default}
.btn.default.disabled,
.btn.default:disabled,
.btn.default:disabled.press,
.btn.default.disabled.press,
.btn.current.disabled,
.btn.current:disabled,
.btn.inverse.disabled,
.btn.inverse:disabled,
.btn.etc01.disabled,
.btn.etc01:disabled,
.btn.etc02.disabled,
.btn.etc02:disabled{background-color:#fafafb;border:1px solid #e2e2e2;color:#b2b2b2}
.btn.primary.disabled,
.btn.primary:disabled{background-color:#7fdaf7}

.btn.xs{padding:0 5px;font-size:12px}
.btn.sm{height:30px;padding:0 15px;line-height:30px;font-size:13px}
.btn.md{height:40px;padding:0 15px;line-height:40px;font-size:14px}
.btn.lg{height:50px;padding:0 15px;line-height:50px;font-size:19px;font-weight:bold}

.btnMore{display:block;height:40px;margin-bottom:20px;line-height:40px;font-size:14px;text-align:center;color:#666;border:1px solid #c6c6c6;border-radius:2px;background-color:#fff}
.btnMore:after{content:'';display:inline-block;margin-left:7px;padding-bottom:2px;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:0;border-top:5px solid #adadad}

/* icon */
.icon{display:inline-block;font:0/0 a;text-align:center;background-image:url('/static/images/common/pictogram_sprite.png');background-repeat:no-repeat;background-size:360px auto;pointer-events:none}
.icon.arrowRight{width:5px;height:9px;background-image:url('/static/images/common/icon_sprite.png');background-position:-195px 0}
.icon.arrowRight2{width:5px;height:9px;background-image:url('/static/images/common/icon_sprite.png');background-position:-115px 0}
.icon.arrowRight3{width:5px;height:9px;background-image:url('/static/images/common/icon_sprite.png');background-position:-125px 0}
.icon.arrowBottom{width:8px;height:5px;background-image:url('/static/images/common/icon_sprite.png');background-position:-150px 0}
.icon.arrowBottom2{width:8px;height:5px;background-image:url('/static/images/common/icon_sprite.png');background-position:-150px -10px}
.icon.arrowBottom3{width:8px;height:5px;background-image:url('/static/images/common/icon_sprite.png');background-position:-150px -20px}
.icon.basket{width:13px;height:15px;background-position:-250px 0}
.icon.big{width:30px;height:30px;background-position:0 -75px;vertical-align:top;margin-top:9px}
.icon.bookmark{width:18px;height:18px;background-position:0 -50px}
.icon.bookmark.active{background-position:-25px -50px}
.icon.bookmark.white{width:18px;height:18px;background-position:-50px -50px}
.icon.bookmark.white.active{background-position:-75px -50px}
.icon.camera{width:15px;height:13px;background-position:-340px 0}
.icon.cart{width:23px;height:20px;padding:0;background-position:0 0;vertical-align:inherit}
.icon.cart2{width:27px;height:22px;background-position:-150px 0;vertical-align:sub}
.icon.calendar{width:18px;height:19px;background-position:-125px 0}
.icon.couple.sm{width:15px;height:15px;background-position:-280px -25px}
.icon.close{background-image:url('/static/images/common/icon_sprite.png');background-repeat:no-repeat;background-size:360px auto}
.icon.close2{width:17px;height:17px;background-position:-125px -25px;background-image:url('/static/images/common/icon_sprite.png');background-repeat:no-repeat;background-size:360px auto}
.icon.close.sm{width:8px;height:8px;background-position:-245px 0}
.icon.close.md{width:11px;height:11px;background-position:-215px -25px}
.icon.delivery{width:20px;height:12px;background-position:-300px 0}
.icon.delete{width:17px;height:17px;vertical-align:top;background-position:-290px -25px;background-image:url('/static/images/common/icon_sprite.png')}
.icon.delete:after{content:'';display:inline-block}
.icon.edit{width:12px;height:13px;background-position:-325px 0}
.icon.tile{width:18px;height:18px;padding:0;background-position:-75px 0}
.icon.list{width:18px;height:18px;background-position:-25px 0}
.icon.like{width:21px;height:18px;background-position:-200px 0;vertical-align:text-top}
.btn.active .icon.like{background-position:-275px 0}
.icon.treeMore{width:23px;height:9px;background-position:-150px -25px}
.icon.lower1{width:7px;height:8px;background-position:-225px -25px}
.icon.lower2{width:7px;height:8px;background-position:-225px -35px}
.icon.tel{width:20px;height:20px;background-position:-200px -25px}
.icon.tel2{width:20px;height:20px;background-position:-175px -25px}
.icon.tel3{width:15px;height:15px;background-position:-260px -25px}
.icon.tl{width:20px;height:20px;background-position:-235px -25px}
.icon.tip{width:25px;height:25px;background-position:-240px -25px;background-image:url('/static/images/common/icon_sprite.png')}
.icon.share{width:21px;height:20px;background-position:-225px 0;vertical-align:text-top}
.icon.search{width:20px;height:21px;background-position:-25px -25px;background-image:url('/static/images/common/layout_sprite.png');}
.icon.search2{width:20px;height:21px;background-position:-50px -25px;background-image:url('/static/images/common/layout_sprite.png');}
.icon.soldOut{background-image:url('/static/images/common/icon_soldout.png');background-repeat:no-repeat;background-size:360px auto}
.icon.soldOut.sm{width:44px;height:30px;margin-top:29px;background-position:0 0}
.icon.soldOut.md{width:59px;height:41px;background-position:-50px 0}
.icon.soldOut.lg{width:84px;height:62px;background-position:-125px 0}
.icon.soldOut01{background-image:url('/static/images/common/icon_soldout01.png');background-repeat:no-repeat;background-size:360px auto}
.icon.soldOut01.sm{width:64px;height:40px;margin-top:29px;background-position:0 0}
.icon.soldOut01.md{width:83px;height:52px;background-position:-72px 0}
.icon.soldOut01.lg{width:101px;height:63px;background-position:-171px 0}
.icon.soldOutTHH.sm{width:64px;height:40px;margin-top:29px;background-position:0 0}
.icon.soldOutTHH.md{width:83px;height:52px;background-position:-72px 0}
.icon.soldOutTHH.lg{width:101px;height:63px;background-position:-171px 0}
.icon.soldOutTHC.sm{width:64px;height:40px;margin-top:29px;background-position:0 0}
.icon.soldOutTHC.md{width:83px;height:52px;background-position:-72px 0}
.icon.soldOutTHC.lg{width:101px;height:63px;background-position:-171px 0}
.icon.soldOutTHH2.sm{width:64px;height:40px;margin-top:29px;background-position:0 0}
.icon.soldOutTHH2.md{width:83px;height:52px;background-position:-72px 0}
.icon.soldOutTHH2.lg{width:101px;height:63px;background-position:-171px 0}
.icon.soldOutTHC2.sm{width:64px;height:40px;margin-top:29px;background-position:0 0}
.icon.soldOutTHC2.md{width:83px;height:52px;background-position:-72px 0}
.icon.soldOutTHC2.lg{width:101px;height:63px;background-position:-171px 0}
.icon.sellOut01{background-image:url('/static/images/common/icon_soldout01.png');background-repeat:no-repeat;background-size:360px auto}
.icon.sellOut01.sm{width:64px;height:40px;margin-top:29px;background-position:0 0}
.icon.sellOut01.md{width:83px;height:52px;background-position:-72px 0}
.icon.sellOut01.lg{width:101px;height:63px;background-position:-171px 0}
.icon.star{width:11px;height:11px;background-position:-325px -25px;background-image:url('/static/images/common/icon_sprite.png')}
.icon.new{width:40px;height:40px;background-image:url('/static/images/common/icon_new.png');background-position:-25px 0;background-repeat:no-repeat;background-size:360px auto}
.icon.new.lg{width:60px;height:60px;background-position:-75px 0}
.icon.new.sm{width:16px;height:16px;background-position:0 0}
.icon.file{content:'';width:16px;height:16px;background-position:-50px 0;background-repeat:no-repeat;background-size:360px auto;background-image:url('/static/images/common/icon_sprite.png')}
.icon.file.sm{ background-position:-50px -25px}
.icon.prev2{background-image:url('/static/images/common/layout_sprite.png');width:20px;height:16px;background-position:-75px 0}
.icon.prev3{width:9px;height:17px;background-position:-210px 0;background-image:url('/static/images/common/layout_sprite.png')}
.icon.refresh{width:20px;height:21px;background-image:url('/static/images/common/icon_sprite.png');background-position:-290px 0;background-repeat:no-repeat;background-size:360px auto}
.icon.ellipsis{width:5px;height:23px;background-position:-200px 0;background-image:url('/static/images/common/layout_sprite.png')}
.btn.active .icon.list{background-position:-50px 0}
.btn.active .icon.tile{background-position:-100px 0}
.icon.check{width:16px;height:12px;background-image:url('/static/images/common/icon_sprite.png');background-position:-75px 0}
.btn.active .icon.check{background-position:-50px 0}
.icon.plus{width:10px;height:10px;background-image:url('/static/images/common/icon_sprite.png');background-position:-100px 0;background-repeat:no-repeat;background-size:360px auto}
.icon.plus2{width:12px;height:12px;background-image:url('/static/images/common/icon_sprite.png');background-position:0 0;background-repeat:no-repeat;background-size:360px auto}
.icon.lowerLeft{width:20px;height:20px;background-image:url('/static/images/common/icon_sprite.png');background-repeat:no-repeat;background-size:360px auto;background-position:-315px 0;vertical-align:text-top}
.icon.lowerRight{width:20px;height:20px;background-image:url('/static/images/common/icon_sprite.png');background-repeat:no-repeat;background-size:360px auto;background-position:-335px 0;vertical-align:text-top}
.icon.lowerLeft.small{width:17px;height:17px}
.icon.lowerRight.small{width:17px;height:17px}
.icon.lowerLeftLg{width:21px;height:21px;background-image:url('/static/images/common/icon_sprite.png');background-repeat:no-repeat;background-size:360px auto;background-position:0 -25px;vertical-align:text-top}
.icon.lowerRightLg{width:21px;height:21px;background-image:url('/static/images/common/icon_sprite.png');background-repeat:no-repeat;background-size:360px auto;background-position:-25px -25px;vertical-align:text-top}
.icon.remove{width:15px;height:15px;background-image:url('/static/images/common/icon_sprite.png');background-position:-25px 0;background-repeat:no-repeat;background-size:360px auto}
.icon.sns{width:37px;height:36px;background-image:url('/static/images/common/icon_sns.png')}
.icon.sns.kakao{background-position:0 0}
.icon.sns.band{background-position:-50px 0}
.icon.sns.fb{background-position:-100px 0}
.icon.sns.tw{background-position:-150px 0}
.icon.sns.url{background-position:-200px 0}
.icon.sns.whatsapp{background-position:-250px 0}
.icon.sns.line{background-position:-300px 0}
.icon.treeguide{ width:42.5px;height:23px;background-image:url('/static/images/common/tree_icon_guide.gif');background-size:42.5px 23px}

.icon.sm.sns{width:17px;height:17px;vertical-align:sub;background-size:100% auto;background-position:0 0}
.icon.sm.sns.fb{background-image:url('/static/images/common/icon_facebook.png')}
.icon.sm.sns.band{background-image:url('/static/images/common/icon_band.png')}
.icon.sm.sns.ig{background-image:url('/static/images/common/icon_instagram.png')}

.icon.large{background-image:url('/static/images/common/icon_large.png')}
.icon.large.bookMark{width:50px;height:48px;background-position:-225px 0}
.icon.large.cart{width:57px;height:46px;background-position:-75px 0}
.icon.large.certification{width:107px;height:96px;background-position:-200px -390px}
.icon.large.fail{width:99px;height:99px;background-position:-100px -390px}
.icon.large.like{width:60px;height:51px;background-position:0 0}
.icon.large.pw{width:73px;height:99px;background-position:0 -175px}
.icon.large.reserve{width:99px;height:99px;background-position:-200px -75px}
.icon.large.search{width:88px;height:95px;background-position:0 -75px}
.icon.large.success{width:99px;height:99px;background-position:-100px -175px}
.icon.large.waiting{width:99px;height:99px;background-position:0 -390px}
.icon.large.pinch{width:54px;height:52px;background-position:0 -500px}

.icon.payment{background-image:url('/static/images/common/payment_logo.png');vertical-align:middle}
.icon.payment.uplus{width:24px;height:21px;background-position:0 0}
.icon.payment.inipay{width:26px;height:26px;background-position:-25px 0}
.icon.payment.kpay{width:29px;height:33px;background-position:-60px 0}
.icon.payment.paynow{width:53px;height:16px;background-position:-90px 0}
.icon.payment.paynowBiz{width:77px;height:19px;background-position:-145px 0}

.icon.card{background-image:url('/static/images/common/payment_card.png');height:10px;vertical-align:middle;background-size:360px auto}
.icon.card.visa{ width:22px;background-position:0 0}
.icon.card.master{ width:16px;background-position:-25px 0}
.icon.card.american{ width:10px;background-position:-50px 0}
.icon.card.jcb{ width:14px;background-position:-75px 0}
.icon.card.bancnet{ width:33px;background-position:-100px 0}
.icon.card.payon{ width:32px;background-position:-150px 0}

.icon.official{width:15px;height:15px;vertical-align:middle;margin-top:-2px;background-size:100% auto}
.icon.official.instagram{background-image:url('/Static/images/common/icon_instagram.png')}
.icon.official.facebook{background-image:url('/Static/images/common/icon_facebook.png')}

.icon.social{width:20px;height:20px;vertical-align:middle;margin-top:-2px;background-size:200px auto;background-image:url('/Static/images/common/icon_social.png')}
.icon.social.instagram{background-position:0 0;}
.icon.social.facebook{background-position:-27.5px 0;}
.icon.social.band{background-position:-55px 0}
.icon.social.atomymobile{background-position:-82.5px 0}
.icon.social.atomyticket{background-position:-110px 0}
.icon.social.atomychannel{background-position:-137.5px 0}
.icon.social.youtube{background-position:-165px 0}

.icon.dsas{width:41px;height:20px;vertical-align:middle;margin-top:-2px;background-size:100% auto;background-image:url('/Static/images/common/icon_dsas.png')}
.icon.question{width:23px;height:23px;background-position:-150px -50px;background-image:url('/static/images/common/icon_sprite.png')}

.icon.fam{width:44px;height:44px;background-image:url('/Static/images/common/icon_family.png');background-size:360px auto}
.icon.famCH{background-position:0 0}
.icon.famTicket{background-position:-60px 0}
.icon.famAZA{background-position:-120px 0}
.icon.famAir{background-position:-180px 0}
.icon.logoAtomy{width:21px;height:11px;background-image:url('/Static/images/common/logo_lnb_family.png');background-size:100% auto}
.icon.noticeInfo{width:70px;height:70px;background-image:url('/Static/images/common/icon_notice.png');background-size:100% auto}

/* stateFlag */
.stateFlag{ display:inline-block;width:18px;height:18px;background-image:url('/Static/images/common/stateFlag.png');background-repeat:no-repeat;background-size:18px auto;}
.stateFlag.state-KR{ background-position:0 0px}
.stateFlag.state-JP{ background-position:0 -20px}
.stateFlag.state-TW{ background-position:0 -40px}
.stateFlag.state-SG{ background-position:0 -60px}
.stateFlag.state-KH{ background-position:0 -80px}
.stateFlag.state-PH{ background-position:0 -100px}
.stateFlag.state-MY{ background-position:0 -120px}
.stateFlag.state-TH{ background-position:0 -140px}
.stateFlag.state-US{ background-position:0 -160px}
.stateFlag.state-CA{ background-position:0 -180px}
.stateFlag.state-MX{ background-position:0 -200px} 
.stateFlag.state-AU{ background-position:0 -220px} 
.stateFlag.state-ID{ background-position:0 -240px} 
.stateFlag.state-RU{ background-position:0 -260px} 
.stateFlag.state-VN{ background-position:0 -280px} 

/* topBanner */
.topBannerOn #header{top:50px}
.topBannerOn #body{padding-top:100px}
.topBannerOn .topBanner{display:block}
.topBanner{display:none;position:fixed;left:0;top:0;right:0;z-index:100;height:50px;text-align:center;background-color:#f3f9fb;box-sizing:border-box}
.topBanner .center{position:relative;display:inline-block;padding-top:10px;padding-right:28px}
.topBanner p{display:inline-block;line-height:30px;font-size:15px;color:#333}
.topBanner p strong{color:#00b6f0}
.topBanner .topBannerBtn{position:relative;height:30px;margin-left:25px;padding:1px 28px 0 18px;font-size:13px;color:#00b6f0;vertical-align:top;border:1px solid #00b6f0;border-radius:20px;box-sizing:border-box}
.topBanner .topBannerBtn:after{content:'';display:inline-block;position:absolute;right:18px;top:10px;width:5px;height:8px;background-position:-115px 0;background-image:url('/static/images/common/icon_sprite.png');background-repeat:no-repeat;background-size:360px auto}
.topBanner .topBannerClose{position:absolute;right:0;top:19px;width:11px;height:11px;font:0/0 a;background-position:-310px -25px;background-image:url('/static/images/common/icon_sprite.png');background-repeat:no-repeat;background-size:360px auto}

/* Input Search */
input[type='search']{padding-right:69px;border:1px solid #00b6f0}
input[type='search']::-webkit-search-decoration,
input[type='search']::-webkit-search-cancel-button,
input[type='search']::-webkit-search-results-button,
input[type='search']::-webkit-search-results-decoration{display:none}
.btnDelete{position:absolute;top:0;right:40px;bottom:0;width:29px;height:40px}

/* Video */
.video video{width:100%}
.video .dropDown{height:40px;margin-top:3px;overflow:hidden;box-sizing:border-box;/*-webkit-transition:height .2s ease-in;transition:height .2s ease-in;*/}
.video .dropDown.active{height:195px}
.video .dropDown .btn .icon.arrowBottom{margin-top:3px;font:0/0 a;vertical-align:baseline;-webkit-transition:-webkit-transform .2s ease-in;transition:transform .2s ease-in;-webkit-transform:rotate(0deg) translateY(-48%);transform:rotate(0deg) translateY(-48%)}
.video .dropDown.active .btn .icon.arrowBottom{-webkit-transform:rotate(-180deg) translateY(50%);transform:rotate(-180deg) translateY(50%)}
.video .dropDown .caption{height:145px;overflow:auto;margin-top:10px;padding:12px 15px;font-size:12px;border:1px solid #e2e2e2;border-radius:2px;box-sizing:border-box}
.video .dropDown .caption p{margin-top:5px}
.video .dropDown .caption p:first-child{margin-top:0}

/* row col */
.row.btns{display:table;width:100%;box-sizing:border-box}
.row.btns.margin{padding:0 15px;margin:15px 0}
.row.btns.margin:last-of-type{padding-bottom:15px;margin-bottom:0}
.row.btns .col{display:table-cell;float:none}
.row.btns .col .btn{width:100%}
.row.btns .col .btn.text-overflow{font-size:13px;line-height:1.2}
.row.btns .col .btn.lg.text-overflow{font-size:100%;line-height:1.2}
.row.btns .col:first-child:last-child{width:100%}
.row.btns .col:last-child:nth-child(2){width:50%}
.row.btns .col:first-child:nth-last-child(2){width:50%}
.row.btns.margin .col:last-child:nth-child(2){padding-left:3px}
.row.btns.margin .col:first-child:nth-last-child(2){padding-right:3px}

.row.calendar{position:relative}
.row.calendar .icon.calendar{position:absolute;right:12px;top:10px;pointer-events:none}

.email .row{position:relative;display:table;width:100%}
.email .row .at{position:absolute;right:10px;top:8px;color:#999}
.email .row .col{display:table-cell}
.email .row .col:first-child:last-child{width:100%}
.email .row .col:last-child:nth-child(2){width:50%}
.email .row .col:first-child:nth-last-child(2){width:50%;padding-right:5px}
.email .row input[type='text']{padding-right:25px}

.row.search{position:relative}
.row.search .btnSearch{position:absolute;right:0;top:0;width:40px;height:40px}
.row.search .btnSearch .icon.search2{vertical-align:middle}
.row.addImg{
	display:-moz-box;
	display:-moz-flex;
	-moz-box-pack:justify;
	-moz-justify-content:space-between;
	-moz-align-content:stretch;
	-moz-box-align:stretch;
	-moz-align-items:stretch;

	display:-webkit-box;
	display:-webkit-flex;
	-webkit-box-pack:justify;
	-webkit-justify-content:space-between;
	-webkit-align-content:stretch;
	-webkit-box-align:stretch;
	-webkit-align-items:stretch;
	
	display:flex;
	justify-content:space-between;
	align-content:stretch;
	align-items:stretch;
	box-sizing:border-box;
}
.row.addImg .col{position:relative;overflow:hidden;width:32%;box-sizing:border-box;
	-moz-box-flex:0;
	-moz-flex:0 1 auto;
	-webkit-box-flex:0;
	-webkit-flex:0 1 auto;
	flex:0 1 auto;
	 }
.row.addImg .col .image{display:block;padding-bottom:100%;position:relative;overflow:hidden;width:100%;height:0;font:0/0 a;box-sizing:border-box}
.row.addImg .col .image img{object-fit:cover;width:100%;height:100%;position:absolute;left:0;top:0;right:0;bottom:0}
.row.addImg .col input{position:absolute;left:0;top:0;right:0;bottom:0;opacity:0}
.row.addImg .col label{display:inline-block;position:absolute;left:0;top:0;right:0;bottom:0;opacity:0;font:0/0 a}
.row.addImg .col.file:before{content:'';display:inline-block;width:35px;height:30px;position:absolute;left:50%;top:50%;z-index:1;margin:-15px 0 0 -17px;pointer-events:none;background-image:url('/static/images/common/pictogram_sprite.png');background-position:-325px -15px;background-repeat:no-repeat;background-size:360px auto}

.row.addImg .col.file .image{background-color:#c9c9c9}
.row.addImg .col.file .radioLabel{display:none}
.row.addImg .col.file.imageOn .radioLabel{display:block;z-index:2}
.row.addImg .col.file.imageOn .fileLabel{position:absolute;left:inherit;bottom:inherit;right:15px;top:15px;z-index:3;display:inline-block;opacity:1;width:15px;height:13px;font:0/0 a;text-align:center;background-image:url('/static/images/common/pictogram_sprite.png');background-color:transparent;background-repeat:no-repeat;background-size:360px auto;background-position:-340px 0}
.row.addImg .col.file.imageOn input[type='file']{border:1px solid red;z-index:3;left:inherit;bottom:inherit;width:35px;height:35px}
.row.addImg .col.active:after{content:'';display:block;position:absolute;left:0;top:0;right:0;bottom:0;z-index:2;border:2px solid #00b6f0;pointer-events:none}
.row.addImg .col.file.imageOn:before{left:inherit;right:7px;top:7px;width:30px;height:30px;margin:0;border-radius:50%;background-color:rgba(0,0,0,.5);background-image:none}

.date{display:block;position:relative}
.date .btn{position:absolute;right:10px;top:10px}

/* 필터셋 */
.filterSet{margin-bottom:20px;padding:5px 15px 15px;background-color:#fff;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);box-shadow:0 1px 1px rgba(0,0,0,.1)}
.filterSet .bullet{margin-top:4px}
.filterSet .row.btns .col{width:20%;padding-left:5px}
.filterSet .row.btns .col:first-child{padding-left:0}
.filterSet .row.btns .col.more{position:relative;overflow:hidden}
.filterSet .row.btns .col.more select{opacity:0;position:absolute;left:0;top:0;right:0;bottom:0}
.filterSet .row.btns .col .btn{padding:0;overflow:hidden}
.filterSet .row.btns .col .btn.default.press,
.filterSet .row.btns .col .btn.default:active,
.filterSet .row.btns .col .btn.active{color:#00b6f0;border:1px solid #00b6f0;opacity:1}
.filterSet .row.btns .col .btn.default:disabled:active,
.filterSet .row.btns .col .btn.default:disabled.active,
.filterSet .row.btns .col .btn.default.disabled.press{border:1px solid #e2e2e2;color:#b2b2b2}
.filterSet .row.btns .col .btn .icon.search{vertical-align:text-top;margin-top:-2px}
.filterSet .row.btns:nth-child(2){margin-top:5px}

.filterSet .row.period{display:table;table-layout:fixed;position:relative;width:100%;margin-top:5px;box-sizing:border-box}
.filterSet .row.period .col{position:relative;display:table-cell;width:48%}
.filterSet .row.period .col.dash{width:6%;text-align:center;vertical-align:middle}
.filterSet .row.period .col input[type='date']{font-size:14px;color:#333}
.filterSet .row.period .col .icon.calendar{position:absolute;right:10px;top:10px;pointer-events:none}
.filterSet .row.period >.btn{position:absolute;right:0;top:0;width:80px}
.filterSet .row.cell2{display:table;width:100%;margin-top:5px}
.filterSet .row.cell2 .col{display:table-cell;width:65%;padding-left:5px}
.filterSet .row.cell2 .col:first-child{width:35%;padding-left:0}
.filterSet .row.cell2 .col input[placeholder]{font-size:12px}
/* #482 추가 */
.filterSet .row.cell3{display:table;table-layout:fixed;position:relative;width:100%;margin-top:5px;box-sizing:border-box}
.filterSet .row.cell3 .col{position:relative;display:table-cell;padding-left:5px}
.filterSet .row.cell3 .col:first-child{width:27%;padding-left:0}
.filterSet .row.cell3 .col:nth-child(2){width:51%}
.filterSet .row.cell3 .col:last-child{width:23%}
.filterSet .row.cell3 .col:last-child .btn.md{width:100%;padding:0 4px}
.filterSet .row.cell3 .col:last-child .icon.search{vertical-align:sub}
.filterSet .row.btns{margin-top:10px}
.filterSetPadding{padding-left:4px}

/* Tab */
.tab{display:table;position:relative;table-layout:fixed;width:100%;text-align:center;white-space:nowrap;background-color:#fff;box-shadow:inset 0 -1px 0 .5px #e1e1e6}
.tab span{display:table-cell;width:33.3333%;padding-bottom:1px}
.tab span a{display:block;position:relative;height:45px;line-height:45px;color:#010101;background-color:#fff;box-sizing:border-box}
.tab span.active a{color:#06a6e2;line-height:44px;}
.tab span.active a:after{content:'';display:block;position:absolute;left:0;right:0;bottom:-1px;z-index:1;border-bottom:2px solid #07a7e3}
/* #612 */
.org.tab span.active a{color:#f9993b;line-height:44px;}
.org.tab span.active a:after{content:'';display:block;position:absolute;left:0;right:0;bottom:-1px;z-index:1;border-bottom:2px solid #f9993b}

#header .tab.hide{display:none}
#header .tab{ right:0;left:0;margin-top:10px;z-index:110}

.tab.dark{background-color:#4b5969}
.tab.dark:after{content:none}
.tab.dark span a{color:#c4c7cc;font-size:15px;background-color:#4b5969;border-bottom:1px solid #4b5969}
.tab.dark span.active a{color:#00b6f0;border-bottom:3px solid #00b6f0}
.tab.dark span.active a:after{content:none}

.tab.type2{box-sizing:border-box;background-color:transparent;box-shadow:none}
.tab.type2:after{display:none}
.tab.type2 span a{height:40px;line-height:40px;color:#707780;border:1px solid #707780}
.tab.type2 span:first-child a{border-radius:2px 0 0 2px}
.tab.type2 span:last-child a{border-radius:0 2px 2px 0}
.tab.type2 span.active a{background-color:#707780;color:#fff}
.tab.type2 span.active a:after{content:none}

.tab.type3{display:table;height:45px;box-shadow:none}
.tab.type3 span{display:table-cell}
.tab.type3 span a{height:45px;line-height:45px;color:#666;border-bottom:1px solid #c6c6c6;border-left:1px solid #c6c6c6;background-color:#f6f6f8}
.tab.type3 span a:after{content:none}
.tab.type3 span.active a{font-size:14px;color:#fff;background-color:#707780;border-bottom:1px solid #707780}
.tab.type3 span:first-child,
.tab.type3 span.active + span a{border-left:none}

.tab.type4{padding:17px 11.5px 15px;background-color:#f6f6f8;box-sizing:border-box}
.tab.type4 span{width:auto;padding:0 4.5px}
.tab.type4 span a{color:#666;background-color:#fff;border:1px solid #c6c6c6;border-radius:3px}
.tab.type4 span.active a{color:#fff;background-color:#71777f;border-color:#71777f;}
.tab.type4 span.active a:after{content:none}
.tab.type4 span.disabled a,
.tab.type4 span a:disabled{opacity:.5;pointer-events:none}

/* multi line */
.tab.type5{white-space:normal;box-sizing:border-box;background-color:transparent;box-shadow:none}
.tab.type5:after{display:none}
.tab.type5 span{padding-bottom:0;vertical-align:middle;border:1px solid #707780}
.tab.type5 span:first-child{border-radius:2px 0 0 2px}
.tab.type5 span:last-child{border-radius:0 2px 2px 0}
.tab.type5 span a{height:auto;padding:10px;line-height:1.5;color:#707780;font-size:13px}
.tab.type5 span.active{background-color:#707780}
.tab.type5 span.active a{background-color:transparent;color:#fff}
.tab.type5 span.active a:after{content:none}

.qna .tab.type5, .qnaWrite .tab.type5,.qnaList .tab.type5{padding:15px}
.dialog.qna .tab.type5, .dialog.qna .qnaWrite .tab.type5, .dialog.qna .qnaList .tab.type5{padding:15px}

.tabContent{display:none}
.tabContent.active{display:block}

.tab.scroll{display:block;white-space:nowrap;overflow-x:scroll;overflow-y:hidden;font-size:0}
.tab.scroll:after{content:'';display:block;clear:both}
.tab.scroll span{display:inline-block;}
.tab.scroll span a{padding:0 15px;font-size:14px}

/* Table */
.table{width:100%}
.table{font-size:14px;border-top:1px solid #707780}

.table thead th{height:45px;padding:5px;font-size:14px;color:#333;text-align:center;background-color:#f6f6f8;box-sizing:border-box;vertical-align:middle}
.table tbody th,
.table tbody td{  text-align:left;border-bottom:1px solid #e2e2e2;background-color:#fff;vertical-align:middle}
.table tbody th{height:45px;padding:0 10px;color:#010101;background-color:transparent}
.table tbody td{padding:10px;color:#333;background-color:transparent}
.table.view{border-bottom:1px solid #e2e2e2}
.table.view tbody th{background-color:#f6f6f8}
.table.view tbody th,
.table.view tbody td{vertical-align:middle}
.table.border th,
.table.border td{border-left:1px solid #e2e2e2}
.table.border thead tr th:first-child,
.table.border tbody tr th:first-child,
.table.border tbody tr td:first-child{border-left:none}

.table .noLine th,
.table .noLine td{border-bottom:none;padding-bottom:0}
.table .noLine + tr th,
.table .noLine + tr td{padding-top:5px}

.table.inLine thead th,
.table.inLine tbody th,
.table.inLine tbody td{border-left:1px solid #e2e2e2}
.table.inLine thead th:first-child,
.table.inLine tbody th:first-child,
.table.inLine tbody td:first-child{border-left:none}

.table.border.primary th,
.table.border.primary td{border:1px solid #e2e2e2}
.table.border.primary th{background-color:#f3f9fb;font-weight:bold}
.table.border.primary td{text-align:center;background-color:white}
.table.border.primary thead tr th:first-child,
.table.border.primary tbody tr th:first-child,
.table.border.primary tbody tr td:first-child{border-left:1px solid #e2e2e2}

.table .row.cell2{display:table;width:100%}
.table .row.cell2 .col{display:table-cell;width:50%;padding-left:5px}
.table .row.cell2 .col:first-child{padding-left:0}

.table .row.cell4{display:table;width:100%}
.table .row.cell4 .col{display:table-cell;width:25%;padding-left:5px}
.table .row.cell4 .col:first-child{padding-left:0}
.table .row.cell4 .col input{padding:0 4px;text-align:center}
.table .row.cell4 .col input[type='password']{font-family:Verdana;letter-spacing:2px}
.table .row + .row{margin-top:5px}

.table .row.each{position:relative;padding-right:95px;min-height:40px}
.table .row.each .col:last-child{position:absolute;right:0;top:0}
.table .row.each .col .btn{width:90px;padding:0 5px}

.table .row.sides:after{content:'';display:block;clear:both}
.table .row.sides .left{float:left}
.table .row.sides .right{float:right}
.table .row.sides.btns .right .btn{width:90px}

.table .row.zipcode{display:table;width:100%;table-layout:fixed}
.table .row.zipcode .col{display:table-cell;padding-left:5px}
.table .row.zipcode .col:first-child{width:78px;padding-left:0}

.table .row.phonetic{display:table;width:100%;table-layout:fixed}
.table .row.phonetic .col{display:table-cell;padding-left:5px}
.table .row.phonetic .col:first-child{width:40px;padding-left:0}

.table .row.prepend{display:flex;align-items:center}
.table .row.prepend .prependItem{padding:0 5px}
.table .row.prepend .prependItem:first-child{padding-left:0}
.table .row.prepend .col{flex:1 1 auto}

.table.limpid{border-top:none;border-bottom:1px solid #eaebec}
.table.limpid tbody th,
.table.limpid tbody td{height:30px;text-align:left;border:none;background-color:#fff;box-sizing:border-box}

.table.infos{border:none;line-height:1.2}
.table.infos tbody th,
.table.infos tbody td{height:22px;text-align:left;border:none;background-color:#fff;box-sizing:border-box;padding:0;color:#333}
.table.infos tbody th{font-size:13px}

.table td .countBox{display:inline-block;padding:0 5px;border:1px solid #999;}

.table-center tbody th, 
.table-center tbody td{text-align:center}

/* Board */
.board .list > li{margin-bottom:6px;background-color:#fff;border:1px solid #e2e2e2}
.board .list > li .head{height:45px;padding:9px 13px 0;background-color:#f3f9fb;font-size:14px;box-sizing:border-box}
.board .list > li .content{padding:11px 13px;background-color:#fff}
.board .list > li .head.hghauto{height:auto;min-height:42px;overflow:hidden;padding-bottom:3px}
.board .list > li .head.hghauto .title span{float:left;box-sizing:border-box}
.board .list > li .head.hghauto .title span:first-child{font-weight:bold}
.board .list.white > li .head{background-color:#fff;border-bottom:1px solid #e2e2e2}

.board .list2{border-top:1px solid #707780;}
.board .list2 > li{padding:15px 0;border-bottom:1px solid #e2e2e2}

.board .list3 > li{padding:15px 0;border-top:1px solid #eaebec}
.board .list3 > li:first-child{border-top:none}

.board .list4{border-top:1px solid #e2e2e2}
.board .list4 > li{border-bottom:1px solid #e2e2e2}

.reviews .board .list > li .head{position:relative;padding-right:100px}
.reviews .board .list > li .head .name{font-size:14px;color:#333}
.reviews .board .list > li .head time{position:absolute;right:15px;top:12px;font-size:13px;color:#999}
.reviews .board .list > li .content{font-size:13px;color:#666}
.reviews .board .list > li .content h2{font-size:14px;color:#333}

.seminarInfo .recommend{font-size:14px;color:#333}
.seminarInfo .recommend .btn{position:relative;margin-top:10px;text-align:left}
.seminarInfo .recommend .btn .arrowRight{position:absolute;right:15px;top:50%;background-position:-195px -10px;transform:translateY(-50%)}

.seminarInfo .board{margin-top:15px}
.seminarInfo .board .list{font-size:13px;background-color:#fff;border:1px solid #e2e2e2;border-radius:2px}
.seminarInfo .board .list + .list{margin-top:6px}
.seminarInfo .board .list .head{position:relative;padding:12px 15px;border-bottom:1px solid #e2e2e2}
.seminarInfo .board .list .content{padding:15px;color:#333}
.seminarInfo .board .list .footer{border-top:1px solid #e2e2e2}
.seminarInfo .board .list .footer .btn{font-size:13px;color:#666}

.board.agreement .list2 p{font-size:14px;color:#333}
.board.agreement .list2 small{display:block;margin:5px 0;font-size:12px;color:#666;line-height:1.5}
.board.agreement .list2 label{display:inline-block;font-size:14px;color:#333;vertical-align:top;-webkit-transform:translateY(6px);transform:translateY(6px)}
.board.agreement .list2 > li{position:relative;min-height:46px;padding:7px 0 7px 30px;box-sizing:border-box}
.board.agreement .list2 li .checkbox{position:absolute;left:0;top:10px}
.board.agreement .checkAll{padding:13px 0 15px;color:#333;border-top:1px solid #707781}
.board.agreement .checkAll div{position:relative;margin:16px 0 0}
.board.agreement .checkAll div label{color:#333}
.board.agreement .checkAll div .checkbox{top:0}

.board.detail header{padding:15px}
.board.detail header .title{display:inline}
.board.detail header .icons{display:inline-block;height:16px;vertical-align:sub}
.board.detail header .icons:after{content:'';display:block;clear:both}
.board.detail header .icons .icon{float:left;margin-left:3px;vertical-align:text-bottom}
.board.detail header .icons .icon:first-child{margin-left:0}
.board.detail header .title{font-size:14px;color:#333}
.board.detail .content{padding:15px;font-size:13px;color:#666;border-top:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2}
.board.detail .content .image{margin:15px 0}
.board.detail .content .file dl{position:relative;margin:15px 0 10px;padding:13px 15px 10px 75px;font-size:12px;border:1px solid #e2e2e2}
.board.detail .content .file dl dt{position:absolute;left:15px;top:13px;color:#333}
.board.detail .content .file dl dt:after{content:'';display:inline-block;position:absolute;right:-10px;top:1px;height:13px;border-left:1px solid #e2e2e2}
.board.detail .content .file dl dd{color:#666;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* Form */
.row.tel{display:table;width:100%}
.row.tel .col{display:table-cell;width:33%}
.row.tel .col{display:table-cell;padding-left:5px}
.row.tel .col:first-of-type{width:28%;padding-left:0}

/* Panel Box */
.panel{background-color:#fff;border:1px solid #e1e1e6}
.panel header,
.panel .content{padding:13px 14px}
.panel .title{font-weight:bold;font-size:15px;color:#333}

/* noData */
.noData{position:relative;text-align:center}
.noData:after{content:'';display:block;position:absolute;left:50%;top:0;background-image:url('/static/images/common/icon_large.png');background-repeat:no-repeat;background-size:360px auto}

.noData.search{text-align:center;margin:90px 0;padding-top:110px;font-size:17px}
.noData.search:after{width:88px;height:95px;margin-left:-44px;background-position:0 -75px}
.noData.search .text1{font-size:17px;color:#666;margin-bottom:10px}
.noData.search .text2{font-size:13px;color:#666}
.noData.search .icon{margin-bottom:5px}

.noData.product{padding-top:118px;margin-top:90px;margin-bottom:40px}
.noData.product:after{width:99px;height:99px;margin-left:-50px;background-position:-100px -175px}

.noData.orders{padding-top:115px}
.noData.orders:after{width:87px;height:94px;margin-left:-43px;background-position:-100px -75px}

.noData.delivery{padding-top:90px}
.noData.delivery:after{width:126px;height:79px;margin-left:-70px;background-position:-200px -175px}

.noData.reviews{padding-top:110px}
.noData.reviews:after{width:90px;height:90px;margin-left:-45px;background-position:0 -290px}

.noData.cart{padding-top:110px;margin-top:150px}
.noData.cart:after{width:106px;height:89px;margin-left:-53px;background-position:-100px -290px}

.noData.favorite{padding-top:110px;margin-top:170px}
.noData.favorite:after{width:112px;height:93px;margin-left:-56px;background-position:-210px -290px}

.noData.bubble{padding-top:60px;margin-top:150px}
.noData.bubble:after{width:65px;height:50px;margin-left:-33px;background-position:-150px 0}

.noData .icon.large.reserve{margin-bottom:10px}

.noData.buyHistory{padding-top:120px}
.noData.buyHistory:after{width:99px;height:99px;margin-left:-50px;background-position:0 -390px}

/* Banner */
.banner.colors a{display:block;position:relative;height:40px;padding:9px 14px 0;color:#fff;font-size:12px;border-radius:2px;box-sizing:border-box}
.banner.colors a + a{margin-top:6px}
.banner.colors a:after{content:'';display:inline-block;position:absolute;right:15px;top:50%;width:5px;height:8px;margin-top:-4px;background-image:url('/static/images/common/icon_sprite.png');background-position:-195px -10px;background-repeat:no-repeat;background-size:360px auto}
.banner.colors a strong{font-size:16px}
.banner.colors a.darkgray{background-color:#707780}
.banner.colors a.gray{background-color:#8e96a1}
.banner.colors a.white{background-color:#fff;color:#666;border:1px solid #e2e2e2}

/* Slider */
.slider{position:relative;overflow:hidden}
.slick-slide{position:relative}
.slider .listSlide{position:absolute;left:0;top:0;right:0;bottom:0}
.slider .listSlide .item a{display:block;background-color:#ccc}
.slider .listSlide .item a.press,
.slider .listSlide .item a:active{opacity:1}

.slider .slideInfo{position:absolute;right:0;bottom:9px;height:27px}
.slider .slideInfo .paging{display:inline-block;-webkit-transform:translateY(50%);transform:translateY(50%);line-height:1;margin-right:18px;padding-top:1px;font-size:13px;color:#333;vertical-align:top;box-sizing:border-box}
.slider .slideInfo .paging span{vertical-align:top}
.slider .slideInfo .paging em{font-weight:bold;vertical-align:baseline}
.slider .slideInfo .btnViewAll{position:relative;height:27px;padding:0;vertical-align:top;font-size:12px;color:#fff;text-align:left;background-color:rgba(51,51,51,.6);box-sizing:border-box}
.slider .slideInfo .btnViewAll span{display:inline-block;margin-right:28px;position:relative;left:0}
.slider .slideInfo .btnViewAll:before{content:'';display:inline-block;position:absolute;left:-14px;top:0;width:14px;height:27px;background-color:rgba(51,51,51,.6);border-radius:14px 0 0 14px;overflow:hidden;box-sizing:border-box;font:0/0 a}
.slider .slideInfo .btnViewAll:after{content:'';display:block;position:absolute;right:10px;top:50%;width:12px;height:12px;margin-top:-6px;background-image:url('/static/images/common/icon_sprite.png');background-position:0 0;background-repeat:no-repeat;background-size:360px auto}

.slider .indicator{position:absolute;left:0;right:0;bottom:0;height:0;text-align:center;pointer-events:none}
.slider .indicator li{position:relative;bottom:20px;display:inline-block;height:10px;margin-left:7px}
.slider .indicator li:first-child{margin-left:0}
.slider .indicator li button{font:0/0 a;width:10px;height:10px;vertical-align:top;background-color:#fff;border:2px solid #c0c0c0;border-radius:50%}
.slider .indicator li.slick-active button{background-color:#969696;border:none}

.slider .indicator.expand li{width:10px;height:10px;font:0/0 a;border-radius:50%;background-color:#7fdaf7;border:none;overflow:hidden;color:#00b6f0;vertical-align:middle;-webkit-transition:all .1s ease-in;transition:all .1s ease-in}
.slider .indicator.expand li.active{width:auto;height:23px;line-height:23px;padding:0 13px;font-family:sans-serif;border-radius:20px;font-size:13px;color:#fff;background-color:#00b6f0}

.slider .location{position:absolute;right:15px;bottom:15px}
.slider .location .slick-dots li{display:inline-block;width:10px;height:10px;border-radius:50%;box-sizing:border-box}
.slider .location .slick-dots li + li{margin-left:5px}
.slider .location .slick-dots li button{display:block;width:100%;height:100%;font:0/0 a;border:1px solid #fff;border-radius:50%;box-sizing:border-box}
.slider .location .slick-dots li.slick-active button{background-color:#fff}

.slider .controls{position:absolute;left:0;top:50%;right:0}
.slider .controls:after{content:'';display:block;clear:both}
.slider .controls .btn{width:20px;height:30px;padding:0;background-color:rgba(0,0,0,.4)}
.slider .controls .btn .icon{width:6px;height:10px;margin-top:-2px;vertical-align:middle;background-image:url('/static/images/common/icon_sprite.png');background-position:-225px 0}
.slider .controls .btn:first-child{float:left}
.slider .controls .btn:first-child .icon{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.slider .controls .btn:last-child{float:right}
.slider .controls .btn:last-child .icon{margin-right:-1px}

.slider .controls button{width:20px;height:30px;padding:0;font:0/0 a;background-color:rgba(0,0,0,.4)}
.slider .controls button:after{content:'';display:inline-block;width:6px;height:10px;vertical-align:middle;background-image:url('/static/images/common/icon_sprite.png');background-position:-225px 0;background-repeat:no-repeat;background-size:360px auto;pointer-events:none}
.slider .controls .slick-prev{float:left}
.slider .controls .slick-prev:after{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.slider .controls .slick-next{float:right}
.slider .controls .slick-next:after{margin-right:-1px}


/* 세미나일정표, 나의 일정 */
.schedule{position:relative}
.schedule .controls{position:fixed;left:0;top:50px;right:0;z-index:1;height:50px;margin-bottom:15px;padding-top:11px;text-align:center;background-color:#fff;box-sizing:border-box;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);box-shadow:0 1px 1px rgba(0,0,0,.1)}
.schedule .controls time{font-size:19px;color:#333}
.schedule .controls nav a{display:inline-block;position:absolute;width:30px;height:30px;left:50%;top:0;z-index:1;padding:19px 10px 0;font:0/0 a}
.schedule .controls nav a.prev{margin-left:-120px}
.schedule .controls nav a.next{margin-left:70px;}
.schedule .controls nav a:after{content:'';display:inline-block;width:7px;height:13px;background-image:url('/static/images/common/icon_sprite.png');background-position:-265px 0;background-repeat:no-repeat;background-size:360px auto}
.schedule .controls nav a.prev:after{background-position:-255px 0}
/* #612 controlsNo */
.schedule .controlsNo{position:relative;left:0;right:0;z-index:1;height:50px;margin-bottom:15px;padding-top:11px;text-align:center;background-color:#fff;box-sizing:border-box;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);box-shadow:0 1px 1px rgba(0,0,0,.1)}
.schedule .controlsNo button{position:absolute;top:-2px}
.schedule .controlsNo button.calendarM{left:15px}
.schedule .controlsNo button.calendarD{left:48px}
.schedule .controlsNo button.calendarE{right:15px}
.schedule .controlsNo time{font-size:19px;color:#333}
.schedule .controlsNo nav a{display:inline-block;position:absolute;width:30px;height:30px;left:50%;top:0;z-index:1;padding:19px 10px 0;font:0/0 a}
.schedule .controlsNo nav a.prev{margin-left:-100px}
.schedule .controlsNo nav a.next{margin-left:50px;}
.schedule .controlsNo nav a:after{content:'';display:inline-block;width:7px;height:13px;background-image:url('/static/images/common/icon_sprite.png');background-position:-265px 0;background-repeat:no-repeat;background-size:360px auto}
.schedule .controlsNo nav a.prev:after{background-position:-255px 0}
/* #612 table */
.schedule .calendarT{text-align:right;margin-bottom:7px;font-size:13px}
.schedule .table{width:100%;font-size:14px;border:2px solid #707780}
.schedule .table thead th{height:25px;padding:5px;font-size:14px;color:#fff;text-align:center;background-color:#707780;border-left:1px solid #eaebec;box-sizing:border-box;vertical-align:middle}
.schedule .table thead th:nth-child(1){color:#fc8272;border-left:none}
.schedule .table tbody td{height:45px;padding:0 4px 3px;color:#707780;text-align:left;border-left:1px solid #707780;border-bottom:1px solid #707780;background-color:#fff;box-sizing:border-box}
.schedule .table tbody td:nth-child(1){border-left:none;color:#fc8272}
.schedule .table tbody td div.contents{min-height:0 !important;overflow:hidden;height:22px;box-sizing:border-box}
.schedule .table tbody td div.contents span{float:left;display:inline-block}
.schedule .table tbody td div.contents span:nth-child(1){font-size:13px}
.schedule .table tbody td div.contents span.dateD{width:19px;height:19px;margin-top:2px;text-align:center;color:#fff;font-weight:bold;background-color:#707780;border-radius:19px}
.schedule .table tbody td div.contents span.dateY{float:right;font:0/0 a;margin-top:6px}
.schedule .table tbody td div.benefitHS{clear:both;overflow:hidden;min-height:18px;padding-top:2px}
.schedule .table tbody td div.benefitHS span{float:left;display:block;font:0/0 a}
.schedule .table tbody td div.benefitHS span.benefitS{float:right}
.schedule .table tbody td.selectDays{display:inline-block;width:100%;border:2px solid #ff9900}
.schedule .table tbody td.selectDays .contents{margin-top:-2px;width:104%;margin-left:-1px}
.schedule .table tbody td.selectDays .benefitHS{width:105%;margin-left:-1px}
.schedule .table tbody td.selectDay{padding:0}
.schedule .table tbody td.selectDay p{padding:10px 0 10px 15px;border-bottom:1px solid #eaebec}
.schedule .table tbody td.selectDay p span:first-child{color:#00b6f0;font-weight:bold}
.schedule .table tbody td.selectDay p span:last-child{padding-left:20px;color:#333}
.schedule .table tbody td.selectDay ul{padding:0 15px}
.schedule .table tbody td.selectDay ul li{padding:10px 0;border-bottom:1px solid #eaebec;color:#333}
.schedule .table tbody td.selectDay ul li:last-child{border-bottom:none}
.schedule .table tbody td.selectDay ul li a{display:block}
.schedule .table tbody td.selectDay ul li a > p{font:0/0 a;float:right;margin-top:7px;border:0;padding:0}
.schedule .table tbody td.selectDay ul li a > p:after{content:'';display:inline-block;width:7px;height:9px;background-position:-193px 0;background-image:url('/static/images/common/icon_sprite.png');background-repeat:no-repeat;background-size:360px auto}
.schedule .calendarF{overflow:hidden;height:45px;text-align:right;margin-right:0}
.schedule .calendarF span{display:inline-block;margin:10px 55px 0 7px;vertical-align:middle}
.schedule .calendarF span em{display:inline-block;margin-left:10px;width:60px;font-size:12px;text-align:right;margin-top:9px}
.schedule .calendarF span:first-child em{width:50px;margin-top:3px}
.schedule .calendarF span:nth-child(2){margin-left:9px}

/* #900 seminars table */
.schedule .tableSemin{width:100%;border:2px solid #707780}
.schedule .tableSemin thead th{height:25px;padding:5px;font-size:14px;color:#fff;text-align:center;background-color:#707780;border-left:1px solid #eaebec;box-sizing:border-box;vertical-align:middle}
.schedule .tableSemin thead th:nth-child(1){color:#fc8272;border-left:none}
.schedule .tableSemin tbody td{padding:0 4px;height:45px;font-size:13px;color:#707780;text-align:left;border-left:1px solid #707780;border-bottom:1px solid #707780;background-color:#fff;box-sizing:border-box}
.schedule .tableSemin tbody td:nth-child(1){border-left:none;color:#fc8272}
.schedule .tableSemin tbody td.contSeminSuc{background-color:#f9d9d6;position:relative}
.schedule .tableSemin tbody td.contSeminOne{background-color:#cfebf7;position:relative}
.schedule .tableSemin tbody td.contSeminLoc{background-color:#c0e2c9;position:relative}
.schedule .tableSemin tbody td div{position:absolute;bottom:0;right:0;z-index:1}
.schedule .tableSemin tbody td div > span{display:block;position:absolute;bottom:-31px;right:3px;font-size:15px;font-weight:bold}
.schedule .tableSemin tbody .seminSuc{border-left:30px solid #f9d9d6;border-bottom:30px solid #fdf0ef }
.schedule .tableSemin tbody .seminSuc span{color:#b85e64}
.schedule .tableSemin tbody .seminOne{border-left:30px solid #cfebf7;border-bottom:30px solid #ecf7fc }
.schedule .tableSemin tbody .seminOne span{color:#0d7dad}
.schedule .tableSemin tbody .seminLoc{border-left:30px solid #c0e2c9;border-bottom:30px solid #e6f3e9 }
.schedule .tableSemin tbody .seminLoc span{color:#52825e}
.schedule .tableSemin tbody .dateD{display:inline-block;position:absolute;z-index:2;width:19px;height:19px;margin-top:2px;text-align:center;color:#fff;font-weight:bold;background-color:#707780;border-radius:19px}
.schedule .tableSemin tbody .selectDays{border:2px solid #545454}
.schedule .seminTop{overflow:hidden;height:30px;text-align:right;margin-right:0}
.schedule .seminTop span{display:inline-block;margin:0 55px 0 7px;vertical-align:middle}
.schedule .seminTop span em{display:inline-block;margin-left:10px;width:50px;font-size:12px;text-align:right;margin-top:9px;color:#333}
.schedule .seminTop span:last-child em{width:60px}

.schedule .board .list{padding-bottom:9px}
.schedule .board .list li.highlight{border:1px solid #00b6f0}
.schedule .board .list li .head{font-size:15px;color:#333}
.schedule .board .list li .head:after{content:'';display:block;clear:both}
.schedule .board .list li .head i{float:right;font-size:13px;color:#999}
.schedule .board .list li .head .red{color:#e02d2d}
.schedule .board .list li .content{padding-bottom:5px}
.schedule .board .list li .content p{display:inline-block;height:23px;margin-bottom:6px;font-size:13px;box-sizing:border-box}
.schedule .board .list li .content p button {height:23px;line-height:25px;vertical-align:middle;padding:0 10px;border-radius:18px;font-size:13px;color:#fff;box-sizing:border-box}
.schedule .board .list li .content .local button{background-color:#59c28d}
.schedule .board .list li .content .oneday button{background-color:#59b2c2}
.schedule .board .list li .content .success button{background-color:#f9993b}

/* Dialog */
.dialog.toCenter{text-align:center}
.dialog.toCenter .dim{z-index:400}
.dialog.toCenter .layout{position:fixed;left:0;right:0;z-index:450;top:30%;padding:20px;background-color:transparent}
.dialog.toCenter .layout header{background-color:#fff}
.dialog.toCenter .layout .body{background-color:#fff}
.dialog .dialogClose{position:absolute;right:15px;top:-33px;width:17px;height:17px;font:0/0 a;background-image:url('/static/images/common/layout_sprite.png');background-position:-150px -25px;background-repeat:no-repeat;background-size:360px auto}
.dialog .dialogPrev{position:absolute;left:15px;top:16px;width:20px;height:17px;font:0/0 a;background-image:url('/static/images/common/layout_sprite.png');background-position:-100px 0;background-repeat:no-repeat;background-size:360px auto}

.dialog.toTop.active .dim{-webkit-pointer-events:auto;pointer-events:auto}
.dialog.toBottom.active .dim{-webkit-pointer-events:auto;pointer-events:auto}

.dialog .btnTop{z-index:300;bottom:10px}

/* Dialog Page :페이지팝업*/
.dialog.page .layout{overflow:hidden;width:100%;height:100%;box-sizing:border-box;padding-top:50px;box-sizing:border-box}
.dialog.page .layout header{position:fixed;left:0;top:0;right:0;height:50px;text-align:center;padding:9px;background-color:#fff;border-bottom:1px solid #c6c6c6;box-sizing:border-box}
.dialog.page .layout header h1{font-size:20px;color:#333;font-weight:bold}
.dialog.page .layout header.blue{background-color:#00b6f0;border-bottom:none}
.dialog.page .layout header.blue h1{color:#fff}
.dialog.page .layout header.blue ~ .dialogClose{background-position:-150px -25px}
.dialog.page .layout header.blue ~ .dialogPrev{background-position:-75px -25px}

.dialog.page .layout header.skyblue{background-color:#64d0f3;border-bottom:none}
.dialog.page .layout header.skyblue h1{color:#fff}
.dialog.page .layout header.skyblue ~ .dialogClose{background-position:-150px -25px}
.dialog.page .layout header.skyblue ~ .dialogPrev{background-position:-75px -25px}

/*.orange 추가*/
.dialog.page .layout header.orange{background-color:#ff9900;border-bottom:none}
.dialog.page .layout header.orange h1{color:#fff}
.dialog.page .layout header.orange ~ .dialogClose{background-position:-150px -25px}
.dialog.page .layout header.orange ~ .dialogPrev{background-position:-75px -25px}

.dialog.page .layout .body{overflow-x:hidden;overflow-y:auto;height:100%;box-sizing:border-box;-webkit-overflow-scrolling:touch}
.dialog.page .layout .body.margin.sides{margin:0;padding:15px}
.dialog.page .dialogClose{right:15px;top:16px;background-position:-125px -25px}

/* Dialog Transparent (투명 페이지팝업) */
.dialog.transparent .layout{position:relative;width:100%;height:100%;padding-top:50px;color:#fff;background-color:transparent;box-sizing:border-box}
.dialog.transparent .layout header{position:absolute;left:0;top:0;width:100%;height:50px;padding:11px 0 0 15px;text-align:left;border-bottom:none;background-color:transparent;box-sizing:border-box}
.dialog.transparent .layout header h1{color:#fff;font-size:20px;font-weight:normal}
.dialog.transparent #btnClose,
.dialog.transparent .dialogClose{top:10px;width:30px;height:30px;background:none}
.dialog.transparent .dialogClose:after{content:'';display:inline-block;position:absolute;left:7px;top:7px;width:17px;height:17px;font:0/0 a;background-image:url('/static/images/common/layout_sprite.png');background-position:-150px -25px;background-repeat:no-repeat;background-size:360px auto}
.dialog.transparent .layout .body{height:100%;background-color:transparent;overflow-y:auto;box-sizing:border-box}

/* 헤더없는 팝업, 페이지 */
.dialog.noHeader .layout{padding-top:0;padding-bottom:40px}
#body.noHeader{padding-top:0;padding-bottom:40px}
.noHeader .footer{position:fixed;left:0;right:0;bottom:0;background-color:#fff;border-top:1px solid #e2e2e2}
.noHeader .footer .row.btns .col{border-left:1px solid #e2e2e2}
.noHeader .footer .row.btns .col:first-child{border-left:none}

.dialog.tooltip .body{padding:15px;text-align:left}
.dialog.tooltip .body .title{font-size:15px;color:#000;font-weight:bold}
.dialog.tooltip .body img{width:auto;max-width:100%}
.dialog.tooltip .body hr{margin:12px 0 14px}

/* 사라지는 팝업 */
.toast{display:block;width:100%;height:100%}
.toast .layout{position:fixed;left:50%;top:50%;margin:-85px 0 0 -85px;width:170px;height:170px;overflow:hidden;color:#fff;text-align:center;vertical-align:middle;white-space:nowrap;background-color:rgba(0,0,0,.7);box-sizing:border-box;border-radius:50%}
.toast .layout:after{content:'';display:inline-block;height:100%;vertical-align:middle}
.toast .layout .body{display:inline-block;font-size:14px}
.toast .layout .body .text{margin-top:70px;line-height:1.3}
.toast .layout .body small{display:block;font-size:11px;letter-spacing:-0.5px;margin-top:3px}
.toast .layout .body .toastCart{margin-top:-70px}
.toast .layout .body .toastFavorit{margin-top:-70px}
.toast .layout .body .toastBookmark{margin-top:-70px}
.toast .layout .body .toastPinch{margin-top:-90px}
.toast .icon.large{margin:38px 0 7px}
.toast .icon.large.cart{margin-top:30px}

/* 페이지 하단에 붙는 아이템들 */
.fixBottom{position:absolute;left:0;right:0;bottom:0}
.fixBottom .fixContent{position:absolute;left:0;right:0;bottom:0;height:40px;overflow:hidden;box-sizing:border-box}

/* 고객행복센터 푸터 */
.fixBottom.happyCenter .fixContent{height:55px;padding-top:15px;border-top:1px solid #e2e2e2;font-size:14px;text-align:center;background-color:#f1f2f4;box-sizing:border-box}
.fixBottom.happyCenter .fixContent span{color:#333;font-size:14px}
.fixBottom.happyCenter .fixContent span strong{font-size:16px}
.fixBottom.happyCenter .fixContent small{position:relative;padding-left:6px;margin-left:8px;font-size:12px;color:#999}
.fixBottom.happyCenter .fixContent small:after{content:'';display:inline-block;position:absolute;left:0;top:3px;height:11px;border-left:1px solid #c9c9c9}

.guide.account{padding:50px 45px 30px;text-align:center}
.guide.account .icon{margin-bottom:10px}
.guide.account .text01{margin-bottom:5px;font-size:17px;color:#333}
.guide.account .text02{font-size:13px;color:#333}

/* 기간선택 다이어로그 */
.dialog.period ul li button{width:100%;height:40px;border-top:1px solid #e2e2e2}

/* 지도 다이어로그 */
.dialog.map .nmap_infowindow_content{width:330px;left:-165px}
.dialog.map .place{line-height:1.5;background-color:#fff;border:1px solid #e2e2e2;border-radius:2px;overflow:hidden}
.dialog.map .place .head{position:relative;height:45px;padding:13px 15px 0;background-color:#f3f9fb;box-sizing:border-box}
.dialog.map .place .head .title{font-size:15px;font-weight:bold}
.dialog.map .place .head button{position:absolute;right:15px;top:15px}
.dialog.map .place .content{padding:15px;font-size:14px;box-sizing:border-box}
.dialog.map .place .content .bulletList{margin-top:10px}

/* 우편번호 검색 팝업 */
.dialog.address .tab.type2{padding:15px 35px 0;margin-bottom:15px;box-sizing:border-box}
.dialog.address .box.primary{padding:15px;text-align:center;margin-top:15px}
.dialog.address .table{margin:15px 0}
.dialog.address .table.view{margin-top:25px}
.dialog.address .table.view tbody tr td:first-child{text-align:center}
.dialog.address .noData{margin:50px 0 40px}
.dialog.address .street{margin:25px 0 5px 0}
.dialog.address .street:after{content:'';display:block;clear:both}
.dialog.address .street .col{box-sizing:border-box;float:left;width:50%;margin-bottom:5px}
.dialog.address .street .col:nth-of-type(2):before{left:7px}
.dialog.address .street .col:nth-child(2n){padding-left:5px}
.dialog.address .text01 strong{letter-spacing:-1px}
.dialog.address .box.primary .text03{margin-top:10px}

/* 은행 검색 팝업 */
.dialog.bank .box.primary{padding:15px;text-align:center;margin-top:15px}
.dialog.bank .table{margin:15px 0}
.dialog.bank .table.view{margin-top:25px}
.dialog.bank .table.view tbody tr td:first-child{text-align:center}
.dialog.bank .noData{margin:50px 0 40px}

/* 후원인 회원번호 확인 */
.dialog.sponsor section{position:relative;margin-top:20px;padding:240px 15px 15px}
.dialog.sponsor .leader{position:absolute;left:50%;top:0;width:190px;height:190px;margin-left:-95px;border-radius:50%;background-color:#64d0f3;box-sizing:border-box;text-align:center}
.dialog.sponsor .leader:after{content:'';display:inline-block;position:absolute;left:50%;bottom:-25px;height:25px;border-left:1px solid #e1e1e6}
.dialog.sponsor .leader dl{position:absolute;left:15px;top:15px;width:160px;height:160px;padding-top:45px;border-radius:50%;background-color:#fff;box-sizing:border-box;text-align:center}
.dialog.sponsor .leader dl dt{padding-bottom:10px;font-size:23px;color:#000}
.dialog.sponsor .leader dl dd{padding-top:12px;font-size:15px;color:#000;font-weight:bold}
.dialog.sponsor .leader dl:after{content:'';display:inline-block;position:absolute;left:50%;top:88px;width:112px;margin-left:-56px;border-top:1px solid #f1f2f4}
.dialog.sponsor .position{position:relative;border:1px solid #707780;border-radius:2px}
.dialog.sponsor .position:before{content:'';display:inline-block;position:absolute;left:50%;top:-27px;width:166px;height:25px;margin-left:-83px;border:1px solid #e1e1e6;border-bottom:1px solid #707780;border-radius:15px 15px 0 0;background-color:#fff}
.dialog.sponsor .position:after{content:'';display:block;clear:both}
.dialog.sponsor .position dl{float:left;width:50%;padding:15px 0;box-sizing:border-box;text-align:center}
.dialog.sponsor .position dl:first-child{position:relative}
.dialog.sponsor .position dl:first-child:after{content:'';display:inline-block;position:absolute;right:0;top:10px;bottom:10px;border-right:1px solid #e1e1e6}
.dialog.sponsor .position dl dt{font-size:14px}
.dialog.sponsor .position dl dd{padding:0 5px;font-size:13px;color:#333;word-wrap:break-word;word-break:break-all}
.dialog.sponsor .position dl dd em{font-size:21px;color:#333;}
.dialog.sponsor .position dl dd button{width:100%;font-size:17px;color:#333}

/* 통신상품 다이어로그 */
.dialog.mobileNav .body nav{border-top:1px solid #eaebec}
.dialog.mobileNav .body nav:after{content:'';display:block;clear:both}
.dialog.mobileNav .body nav span{display:block;float:left;width:50%;box-sizing:border-box}
.dialog.mobileNav .body nav span.row {width:100%}
.dialog.mobileNav .body nav span a{display:block;position:relative;height:60px;padding:19px 25px 0 20px;font-size:15px;color:#333;border-bottom:1px solid #eaebec;border-left:1px solid #eaebec;box-sizing:border-box}
.dialog.mobileNav .body nav span a:after{content:'';display:inline-block;position:absolute;right:15px;top:25px;width:5px;height:9px;background-image:url('/static/images/common/icon_sprite.png');background-position:-195px 0;background-repeat:no-repeat;background-size:360px auto}
.dialog.mobileNav .body .guide{height:75px;padding-top:18px;color:#666;font-size:12px;text-align:center;box-sizing:border-box}
.dialog.mobileNav .body .guide div{color:#333;font-size:14px}
.dialog.mobileNav .body .guide div span{position:relative;display:inline-block;padding-left:10px;margin-left:3px}
.dialog.mobileNav .body .guide div span:first-child{padding-left:5px;margin-left:0}
.dialog.mobileNav .body .guide div span:after{content:'';display:block;position:absolute;left:0;top:5px;height:11px;border-left:1px solid #c9c9c9}
.dialog.mobileNav .body .guide div span:first-child:after{content:none}
.dialog.mobileNav .body .guide div span small{font-size:11px}

.dialog.mobileGuide .body .guide{margin:15px 0}
.dialog.mobileGuide .body section{margin:15px 0}
.dialog.mobileGuide.fax .body .guide{padding:10px;font-size:13px}
.dialog.mobileGuide.mobileQa .tab{position:fixed;left:0;right:0;top:50px;z-index:1;table-layout:auto}
.dialog.mobileGuide.mobileQa .tab span{width:33.3333%}
.dialog.mobileGuide.mobileQa .tab span:last-child a{padding-right:15px}
.dialog.mobileGuide.mobileQa .tabContent{margin-top:0;padding:46px 15px 0;overflow:hidden}
.dialog.mobileGuide.consent .image{position:relative}
.dialog.mobileGuide.consent .image a{display:block;position:absolute;left:0;right:0;top:52%;padding-top:8%}

/* 상품상세 다이어로그 */
.layerTelEdit .body{padding:15px;color:#333}
.layerTelEdit .name{margin-bottom:5px;font-size:17px;color:#333}
.layerTelEdit .body .row{display:table;width:100%;table-layout:fixed}
.layerTelEdit .body .row .col{display:table-cell;width:25%;padding-left:5px}
.layerTelEdit .body .row .col:nth-of-type(1){padding-left:0}
.layerTelEdit .body .row .col:last-child{width:auto}

.dialog.cart .layout{padding-bottom:70px;background-color:#fff;border-top:1px solid #eaebec}
.dialog.cart .body{position:relative}
.dialog.cart .body .info{height:106px;padding:15px 15px 0 164px;box-sizing:border-box}
.dialog.cart .body .info .thumb{display:inline-block;position:absolute;left:35px;top:8px;width:100px;height:100px}
.dialog.cart .body .info .name{display:block;height:40px;margin-bottom:10px;color:#333;font-size:15px;-webkit-line-clamp:2;-webkit-box-orient:vertical;display:-webkit-box;text-overflow:ellipsis;overflow:hidden}
.dialog.cart .total{margin:11px 0;padding:0 15px}
.dialog.cart .total .price{height:35px;padding:5px 0 0 10px;margin-top:2px;color:#333;background-color:#f3f9fb;box-sizing:border-box}
.dialog.cart .total dl{min-height:35px;padding:9px 10px 0;margin-top:2px;box-sizing:border-box}
.dialog.cart .total dl:after{content:'';display:block;clear:both}
.dialog.cart .total dl dt{float:left;width:30px;margin-right:14px;font-size:14px}
.dialog.cart .total dl dd{float:left;font-size:13px}
.dialog.cart .total dl dd.sum{float:right}
.dialog.cart .total dl dd.sum span{vertical-align:bottom}
.dialog.cart .total dl dd.sum strong{font-size:15px;line-height:1.2}
.dialog.cart .total dl dd.sum .equals{margin-right:18px;vertical-align:top}
.dialog.cart .total dl dd.notice{float:none;clear:both;width:100%;padding-bottom:5px;text-align:right;color:#898989;font-size:10px}
.dialog.cart .total dl dd .mark{margin:0 10px}

/* 검색 다이어로그 160516 */
.dialog.search .layout{background-color:#f1f2f4;margin-top:50px}
.dialog.search .body{position:relative}

.snsShare.dialog .layout{width:100%;position:fixed;left:0;right:0;bottom:0;box-sizing:border-box}
.snsShare.dialog .layout .body ul{border-top:1px solid #eaebec}
.snsShare.dialog .layout .body ul:after{content:'';display:block;clear:both}
.snsShare.dialog .layout .body ul li{float:left;width:50%;box-sizing:border-box}
.snsShare.dialog .layout .body ul li a{display:block;height:60px;padding:12px 0 0 15px;border-bottom:1px solid #eaebec;border-right:1px solid #eaebec;box-sizing:border-box}
.snsShare.dialog .layout .body ul li:nth-child(2n) a{border-right:none}
.snsShare.dialog .layout .body ul li:last-child{border-bottom:none}
.snsShare.dialog .layout .body ul li a .icon{margin-right:10px;vertical-align:middle}
.snsShare.dialog .layout .body ul li.shareUrl{width:100%;padding:15px;border-top:1px solid #eaebec;margin-top:-1px}
.snsShare.dialog .layout .body ul li.shareUrl a{display:block;height:40px;margin-bottom:10px;padding:10px 10px 0;color:#00b6f0;font-size:13px;text-align:center;border:1px solid #e1e1e1;border-radius:2px;background-color:#f6f6f8}
.snsShare.dialog .layout .body ul li.shareUrl a span{display:inline-block;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;max-width:100%}
.snsShare.dialog .layout .body ul li.shareUrl p{color:#666;font-size:12px;text-align:center}
.snsShare.dialog .layout .body ul li .row{display:table;table-layout:fixed;width:100%}
.snsShare.dialog .layout .body ul li .row .col{display:table-cell;vertical-align:top}
.snsShare.dialog .layout .body ul li .row .col:last-child{width:80px;text-align:right}
.snsShare.dialog .layout .body ul li .row .col .btn{width:75px;padding:0 5px}
.snsShare.dialog .layout .body .snsTit{width:100%;padding:15px;text-align:center;font-size:18px;color:#303030;font-weight:bold;box-sizing:border-box}

/* 계보도 다이어로그 */
.treeSetting.dialog.page .layout header{height:50px;background-color:#707780;border-bottom:1px solid #8d9299}
.treeSetting.dialog.page .layout header h1{color:#fff}
.treeSetting.dialog .dialogClose{background-position:-175px -25px}

/* 하위회원 관리*/
.dialog.lowerMember .tab.type3{display:block;margin-bottom:15px}
.dialog.lowerMember .tab.type3:after{content:'';display:block;clear:both}
.dialog.lowerMember .tab.type3 span{display:inline-block;float:left;width:33.3333%}

/* 계보도 max 다이얼로그 */
.dialog.treerestrict{ z-index:400}
.dialog.treerestrict .body{ padding:15px;text-align:center;}
.dialog.treerestrict .body .icon{ vertical-align:middle}

.lower{padding-bottom:20px}
.lower .controls .bar{position:relative;height:40px;margin:10px 0}
.lower .controls .bar .text{padding-top:10px;color:#333}
.lower .controls .bar .select{position:absolute;right:0;top:0;width:165px}
.lower .list{margin-bottom:10px;border-top:1px solid #e2e2e2}
.lower .list li{position:relative;padding:10px 15px;border-bottom:1px solid #e2e2e2;font-size:14px;color:#333}
.lower .list li .added{display:inline-block;vertical-align:text-bottom}
.lower .list li .added span{display:none;float:left;width:20px;height:20px;font-size:12px;text-align:center;vertical-align:text-top;border-radius:2px;box-sizing:border-box}
.lower .list li .added span.couple{background-color:transparent;color:#999;border:1px solid #999} 
.lower .list li .added span + span{margin-left:5px}
.lower .list li .added.couple .couple,
.lower .list li .added.tel .icon.tel,
.lower .list li .added.tl .icon.tl{display:inline-block}
.lower .list li .name{font-size:17px;color:#000}
.lower .list li .icon.lower1{margin-right:3px}
.lower .list li .depth{font-size:13px;color:#999}
.lower .list li .data{margin-top:6px}
.lower .list li .data:after{content:'';display:block;clear:both}
.lower .list li .data span{float:left;position:relative;padding-left:6px;margin-left:5px}
.lower .list li .data span:after{content:'';position:absolute;left:0;top:4px;display:inline-block;height:10px;border-left:1px solid #e2e2e2}
.lower .list li .data span:first-child{padding-left:0;margin-left:0}
.lower .list li .data span:first-child:after{content:none}
.lower .list li .btnBookmark{position:absolute;right:15px;top:17px;width:18px;height:17px;margin-right:4px}
.lower .list li .btnBookmark .icon.bookmark{vertical-align:top}
.lower .list li.disable{color:#ccc}
.lower .list li.disable .name{color:#ccc}

.dialog.treeLevel .layout{padding-top:85px;padding-bottom:40px}
.dialog.treeLevel .layout header{height:85px;padding-top:36px;padding-left:0;text-align:center}
.dialog.treeLevel .dialogClose:before{top:24px}
.dialog.treeLevel .dialogClose:after{top:30px}
.dialog.page.toTop.treeLevel.active .dim{opacity:.9}
.dialog.treeLevel .body ul li .btn{width:100%;height:50px;font-size:15px;color:#fff}
.dialog.treeLevel .body ul li.active .btn,
.dialog.treeLevel .body ul li .btn.press,
.dialog.treeLevel .body ul li .btn:active{font-size:20px;color:#00b6f0;opacity:1}

.dialog.receipt .body nav{border-top:1px solid #eaebec}
.dialog.receipt .body nav:after{content:'';display:block;clear:both}
.dialog.receipt .body nav span{display:block;float:left;width:50%;box-sizing:border-box}
.dialog.receipt .body nav span.row {width:100%}
.dialog.receipt .body nav span .btn{display:block;width:100%;height:60px;padding:19px 25px 0 20px;font-size:15px;text-align:left;color:#333;border-bottom:1px solid #eaebec;border-left:1px solid #eaebec}
.dialog.receipt .body nav span button.btn{padding-top:0}
.dialog.receipt .body nav span .btn:after{content:'';display:inline-block;position:absolute;right:15px;top:25px;width:5px;height:9px;background-image:url('/static/images/common/icon_sprite.png');background-position:-195px 0;background-repeat:no-repeat;background-size:360px auto}

/* 세미나 일정표 */
.dialog.seminar .body{padding:15px}
.dialog.seminar .body .box{margin-bottom:15px;padding:15px}
.dialog.seminar .body .box h2{font-size:17px;color:#333}
.dialog.seminar .body .box span{position:relative;padding-left:5px;margin-left:5px;font-size:13px;color:#666}
.dialog.seminar .body .box span:first-child{padding-left:0;margin-left:0}
.dialog.seminar .body .box span:after{content:'';display:inline-block;position:absolute;left:0;top:4px;height:10px;border-left:1px solid #c9c9c9}
.dialog.seminar .body .box span:first-child:after{content:none}
.dialog.seminar .body .item{margin-top:17px;font-size:13px}
.dialog.seminar .body .item h3{font-weight:bold;font-size:14px;color:#333}

/* 배송지변경, 결제변경 */
.dialog.paymentChange .body .box.primary{margin-bottom:15px;padding:15px 0}
.dialog.paymentChange .body fieldset + fieldset{margin-top:15px}
.dialog.paymentChange .body .btns{margin-top:10px}
.dialog.paymentChange .table{border-top:none}

.paymentChange .row.bar{height:47px;border-top:1px solid #707780;border-bottom:1px solid #707780;box-sizing:border-box}
.paymentChange .row.bar:after{content:'';display:block;clear:both}
.paymentChange .row.bar .numbering{float:left;line-height:47px;font-size:14px;color:#000;font-weight:bold}
.paymentChange .row.bar .btn{float:right;margin-top:7px}

/* 국내 거주 외국인 인증 */
.foreignAccredit .box.guide{padding:15px}
.foreignAccredit .box.guide h2{margin-bottom:5px}
.foreignAccredit .box.guide .image{margin-bottom:10px}
.foreignAccredit .box.guide hr{margin:15px 0}
.foreignAccredit .box.guide .dash li{font-size:13px;color:#333}
.foreignAccredit .box.guide .dash li small{font-size:12px;color:#666}
.foreignAccredit .fileSet{margin-top:15px;margin-bottom:20px;border-top:1px solid #707780}
.foreignAccredit .fileSet .file{padding:0;border-bottom:1px solid #e2e2e2}
.foreignAccredit .fileSet .bullet{margin-top:10px}

.fileSet .file{margin-top:1px}
.fileSet .file .head{position:relative;min-height:50px;padding:15px 0 14px;padding-right:98px;box-sizing:border-box}
.fileSet .file .head .label{font-size:14px;color:#333}
.fileSet .file .btn.etc01{position:absolute;right:0;top:10px;padding:0 5px}
.fileSet .file .preview{position:relative;height:55px;padding:19px 25px 5px 60px;background-color:#f6f6f8;box-sizing:border-box}
.fileSet .file .preview .thumb{display:inline-block;position:absolute;left:10px;top:5px;width:45px;height:45px;border:1px solid #e2e2e2;box-sizing:border-box;background:url('/static/images/common/thumb_default_1.png') no-repeat;background-size:100% auto}
.fileSet .file .preview .name{display:inline-block;font-size:13px;color:#333;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.fileSet .file .preview .btnDelete{position:absolute;right:0;top:0;width:30px;height:100%}
.fileSet .file .preview .btnDelete .icon{vertical-align:middle}
.fileSet .file .preview .thumb img{height:100%}

.fileSet.type1 .file{margin-top:1px}
.fileSet.type1 .file .head{position:relative;min-height:0;padding:0;box-sizing:border-box}
.fileSet.type1 .file .preview{margin-top:10px}

.foreignAccredit .progress{margin-top:110px;padding-left:15px;padding-right:15px;font-size:12px;text-align:center}
.foreignAccredit .progress .text17{margin-bottom:5px}
.foreignAccredit .progress .icon{margin-bottom:10px}
.foreignAccredit .progress .row.btns{margin-top:15px}
.foreignAccredit.noHeader .progress{margin-top:65px}
.foreignAccredit.noHeader .guide{margin:25px 0 15px }

/* 쇼핑몰 메인 전체팝업 */
.slidePopup .slider,
.slidePopup .slider .slick-slider,
.slidePopup .slider .slick-list,
.slidePopup .slider .slick-slider .slick-track, 
.slidePopup .slider .slick-initialized .slick-slide{height:100%}

.slidePopup .slick-slide{padding-top:0;overflow:auto;text-align:center}
.slidePopup .slick-slide.item:after{content:'';display:inline-block;height:100%;vertical-align:middle }
.slidePopup .slick-slide.item a{display:inline-block;vertical-align:middle}
.slidePopup .slick-slide img{width:100%;position:static}
.slidePopup .slider .indicator.expand{height:23px;position:fixed;left:0;right:0;bottom:65px}
.slidePopup .slider .indicator li{bottom:0;max-width:60%;text-overflow:ellipsis;white-space:nowrap}
.slidePopup .footer .row.btns .btn{padding:0 10px;font-size:15px;font-weight:normal;color:#333}
.slidePopup .footer .row.btns .btn.text-overflow{font-size:13px;line-height:1.2}

/* 쇼핑몰 메인 프로모션 팝업 */
.dialog.promotions .body{padding-bottom:15px}
.dialog.promotions .body ul{padding:0 15px}
.dialog.promotions .body ul li{position:relative;padding-top:55.6060%;margin-bottom:1px;overflow:hidden}
.dialog.promotions .body ul li a{display:block;position:absolute;left:0;top:0;right:0;bottom:0}
.dialog.promotions .body ul li a img{height:100%}
.dialog.promotions .dialogClose:before{content:'';display:inline-block;width:30px;height:30px;position:absolute;right:0;top:0;background-color:rgba(0,0,0,.6)}

/* 세미나 좌석공유 팝업 */
.dialog.send .body{padding-top:20px;border-top:1px solid #eaebec}
.dialog.send .body input{margin-top:5px}
.dialog.send .body h2,
.dialog.seats .body h2{margin-bottom:5px;font-weight:bold}
.dialog.seats .body h2 time{font-weight:bold}

/* 애터미소개 메뉴 팝업 */
.dialog.toCenter.navigation .layout{top:13%}
.dialog.navigation .layout .body{height:100%;max-height:414px;overflow-y:auto;overflow-x:hidden}
.dialog.navigation .body ul li{position:relative}
.dialog.navigation .body ul li a{display:block;height:46px;font-size:14px;line-height:47px;color:#333;border-top:1px solid #e2e2e2;box-sizing:border-box}
.dialog.navigation .body ul li:first-child a{border-top:none}
.dialog.navigation .body ul li a.press,
.dialog.navigation .body ul li a:active,
.dialog.navigation .body ul li.active a{color:#00b6f0}
.dialog.navigation .body ul li.active:after{content:'';display:inline-block;position:absolute;right:15px;top:16px;width:16px;height:11px;background-image:url('/static/images/common/icon_sprite.png');background-position:-50px 0;background-repeat:no-repeat;background-size:360px auto}

/* 티켓정보 페이지 */
.ticket{padding-bottom:150px}
.ticket .info{padding:0 30px;text-align:center}
.ticket .info .summary{font-size:13px;color:#333}
.ticket .info .summary h1{font-size:25px;line-height:1.3;margin-bottom:10px;color:#333;font-weight:bold}
.ticket .info .summary time{font-size:20px}
.ticket .info .seat{display:inline-block;width:300px;height:140px;margin:20px 0;background-image:url('/static/images/common/ticket_bg.png');background-position:0 0;background-size:100%}
.ticket .info .seat time{float:right;margin:13px 13px 0 0;font-size:12px}
.ticket .info .seat .number{clear:both;padding-top:7px;font-size:51px;color:#333;font-weight:bold}
.ticket .info .box.dark{position:relative;width:100%;padding:10px 0;font-size:14px;text-align:center}
.ticket .info .box.dark span{white-space:nowrap;display:inline-block;position:relative;z-index:1;min-width:49%;padding:0 10px;background-color:#707780;box-sizing:border-box}
.ticket .info .box.dark:after{content:'';display:inline-block;position:absolute;left:50%;top:50%;height:12px;margin-top:-6px;border-right:1px solid #8d9299}
.ticket .fixBottom .fixContent{height:auto;margin:0 30px;padding:15px 0 30px;font-size:12px;border-top:1px solid #e2e2e2}

/* 티켓정보 다이어로그 */
.ticket.ticketPreview .flex{
	display:-webkit-box;
	display:-moz-box;
	display:-ms-flexbox;
	display:-webkit-flex;
	display:flex;
	-webkit-box-direction:normal;
	-moz-box-direction:normal;
	-webkit-box-orient:vertical;
	-moz-box-orient:vertical;
	-webkit-flex-direction:column;
	-ms-flex-direction:column;
	flex-direction:column;
	-webkit-flex-wrap:wrap;
	-ms-flex-wrap:wrap;
	flex-wrap:wrap;
	-webkit-box-pack:justify;
	-moz-box-pack:justify;
	-webkit-justify-content:space-between;
	-ms-flex-pack:justify;
	justify-content:space-between;
	-webkit-align-content:space-between;
	-ms-flex-line-pack:justify;
	align-content:space-between;
	-webkit-box-align:center;
	-moz-box-align:center;
	-webkit-align-items:center;
	-ms-flex-align:center;
	align-items:center;
}
.ticket.ticketPreview .info{margin-bottom:20px;padding:0 30px;text-align:center;
	-webkit-box-ordinal-group:1;
	-moz-box-ordinal-group:1;
	-webkit-order:0;
	-ms-flex-order:0;
	order:0;
	-webkit-box-flex:0;
	-moz-box-flex:0;
	-webkit-flex:0 1 auto;
	-ms-flex:0 1 auto;
	flex:0 1 auto;
	-webkit-align-self:auto;
	-ms-flex-item-align:auto;
	align-self:auto;
}
.ticket.ticketPreview .info .summary{font-size:13px;color:#333}
.ticket.ticketPreview .info .summary h1{font-size:25px;line-height:1.3;margin-bottom:10px;color:#333;font-weight:bold}
.ticket.ticketPreview .info .summary time{font-size:20px}
.ticket.ticketPreview .info .seat{display:inline-block;width:100%;max-width:300px;height:140px;margin:20px 0;background-image:url('/static/images/common/ticket_bg.png');background-position:0 0;background-size:100%;background-repeat:no-repeat}
.ticket.ticketPreview .info .seat time{float:right;margin:13px 13px 0 0;font-size:12px}
.ticket.ticketPreview .info .seat .number{clear:both;padding-top:7px;font-size:51px;color:#333;font-weight:bold}
.ticket.ticketPreview .info .box.dark{position:relative;width:100%;padding:10px 0;font-size:14px;text-align:center}
.ticket.ticketPreview .info .box.dark span{white-space:nowrap;display:inline-block;position:relative;z-index:1;min-width:49%;padding:0 10px;background-color:#707780;box-sizing:border-box}
.ticket.ticketPreview .info .box.dark:after{content:'';display:inline-block;position:absolute;left:50%;top:50%;height:12px;margin-top:-6px;border-right:1px solid #8d9299}
.ticket.ticketPreview .caption{margin:0 30px;padding:15px 0 30px;font-size:12px;background-color:#fff;border-top:1px solid #e2e2e2;
-webkit-box-ordinal-group:1;
    -moz-box-ordinal-group:1;
    -webkit-order:0;
    -ms-flex-order:0;
    order:0;
    -webkit-box-flex:0;
    -moz-box-flex:0;
    -webkit-flex:0 1 auto;
    -ms-flex:0 1 auto;
    flex:0 1 auto;
    -webkit-align-self:auto;
    -ms-flex-item-align:auto;
    align-self:auto;
}

.findCenter .guide,
.editCenter .guide,
.findPickup .guide{padding:20px 25px;text-align:center}
.findCenter .table{margin:15px 0}
.findCenter  .search .row.btns,
.editCenter .search .row.btns,
.findPickup .search .row.btns{margin-top:10px}
.findCenter .searchResult .table tbody th,
.editCenter .searchResult .table tbody th{text-align:center}
.findCenter .table th a,
.findCenter .table td a{color:#333}
.findCenter .guide .text12{margin-top:3px}
.findCenter .search,
.findPickup .search{margin-top:15px}
.findCenter .search p.search{position:relative;margin-top:0}
.findCenter .search p.search input[type='search']{padding-right:29px;border-color:#bfc2c6}
.findCenter .search p.search .btnDelete{right:0}
.findCenter .noData.search{margin-top:70px}

/* 이용약관 */
.dialog.agreement .body{padding:20px 15px;font-size:13px;color:#666}
.dialog.agreement .body section{margin-top:22px}
.dialog.agreement .body section:first-child{margin-top:0}
.dialog.agreement .body section ol ol{padding-left:14px}
.dialog.agreement .body section .sections > li{margin-top:22px}
.dialog.agreement .body section .sections > li:first-child{margin-top:10px}
.dialog.agreement .body section .list > li{margin-top:10px}
.dialog.agreement .body section .table{margin:5px 0 10px;table-layout:fixed}
.dialog.agreement .footer{margin-top:13px;text-align:center;font-size:12px}
.dialog.agreement .footer h2{margin-bottom:2px;font-size:14px;font-weight:bold}
.dialog.agreement .mb10{margin-bottom:10px}

.dialog.agreement.terms .body{padding:0}
.dialog.agreement.terms .tab span{width:auto}
.dialog.agreement.terms .tabContent{padding:20px 15px}
.dialog.agreement.terms .tabContent h2{font-size:16px;color:#333;font-weight:bold}
.dialog.agreement.terms .tabContent .select{margin-top:22px}

/* 결제안내 */
.dialog.payInformation .body{padding-bottom:20px}
.dialog.payInformation .body hr{margin:7px 0 9px}
.dialog.payInformation .body section{margin-top:20px}
.dialog.payInformation .body section .title{font-size:16px;color:#333}
.dialog.payInformation .body section ul li{margin-top:10px}

/* 튜토리얼 다이어로그 */
.dialog.tutorial{z-index:400}
.dialog.page.toTop.tutorial .layout{z-index:400}
.dialog.tutorial.active .dim{z-index:390}
.dialog.tutorial .body p{padding:0 26px}
.dialog.tutorial .layout{padding-top:100px}
.dialog.tutorial .dialogClose{top:35px}
.dialog.tutorial .dialogClose:before{content:none}
.dialog.tutorial .dialogClose:after{background-position:-175px -25px}
.dialog.page.toTop.tutorial.active .dim{opacity:.85}

/* 에러페이지 */
.error{position:relative;padding:184px 30px 0;text-align:center}
.error p + p{margin-top:10px}
.error:after{content:'';display:inline-block;position:absolute;left:50%;top:70px;width:99px;height:99px;margin-left:-49px;background-image:url('/static/images/common/icon_error.png');background-position:0 0;background-size:99px auto}
.error .row.btns{margin-top:30px;padding:0 10px}

.unauthorized .verticalCenter{min-height:350px}

/* 비밀번호 팁 다이어로그 */
.dialog.passwordTip .body{padding:15px;text-align:left}
.dialog.passwordTip .body .title{font-size:15px;color:#000;font-weight:bold}
.dialog.passwordTip .body hr{margin:12px 0 14px}
.dialog.passwordTip .dialogClose{right:35px;top:34px;background-image:url('/static/images/common/icon_sprite.png');background-position:-270px -25px}

/* 메인 수당 안내 다이어로그 */
.dialog.bonus .body{padding:15px;text-align:left}
.dialog.bonus .body .title{font-size:15px;color:#000;font-weight:bold}
.dialog.bonus .body hr{margin:12px 0 14px}
.dialog.bonus .body .box{padding:10px}
.dialog.bonus .dialogClose{right:35px;top:36px;background-image:url('/static/images/common/icon_sprite.png');background-position:-270px -25px}

/* 나의 회원증 보기 다이어로그 */
.dialog.userProfileCard .body{padding:15px;text-align:left}
.dialog.userProfileCard .body .card{border:1px solid #ddd;padding:15px;margin-top:15px}
.dialog.userProfileCard .body .card:first-child{margin-top:0}
.dialog.userProfileCard .body hr{margin:15px 0}
.dialog.userProfileCard .body .logo{margin:-15px -15px 20px -15px}
.dialog.userProfileCard .body .profile{overflow:hidden}
.dialog.userProfileCard .body .profile .thumbnail{float:left;width:30%}
.dialog.userProfileCard .body .profile .info{float:left;width:70%;padding-left:10px;box-sizing:border-box}
.dialog.userProfileCard .body .profile .signature{clear:both;text-align:right;margin-top:15px;}

/* 공지사항 세미나 장소 팝업 */
.dialog.seminarCenter .body .content{padding:15px}

/* 승인잔액조회 */
.balance .section{margin-top:17px}
.balance .table{table-layout:fixed}
.balance .warning{margin-top:10px;text-align:center}
.balance .section .row.cell2 .select[data-value]:before{left:6px}
.balance .section .resultPanel{position:relative;padding-right:20px}
.balance .section .resultPanel span{display:inline-block;vertical-align:top}
.balance .section .resultPanel .text{position:absolute;right:0;top:10px}
.balance .section .bullet{margin-top:7px}

/* 카드승인취소 */
.cancelApproval .title.sub{margin-top:15px}
.cancelApproval .guide li{margin-top:8px}
.cancelApproval .row.cell2 .select[data-value]:before{left:6px}

/* 마이 오피스 */
.officeMain .controls{position:relative}
.officeMain .controls nav a{display:inline-block;position:absolute;width:30px;height:30px;top:27px;z-index:1;padding:19px 10px 0;font:0/0 a}
.officeMain .controls nav a.prev{left:-6px}
.officeMain .controls nav a.next{right:-10px}
.officeMain .controls nav a:after{content:'';display:inline-block;width:19px;height:37px;background-image:url('/static/images/common/icon_sprite.png');background-position:-19px -74px;background-repeat:no-repeat;background-size:360px auto}
.officeMain .controls nav a.prev:after{background-position:0 -74px}
.officeMain .controls nav a.next.going:after{background-position:-57px -74px}
.officeMain .controls nav a.prev.going:after{background-position:-38px -74px}

/* #830 배송조회 보조송장 */
.bojoT{margin:10px 0 5px 3px;font-weight:bold;color:#333}
.bojo{padding:5px;border:2px solid #8C8C8C}
.bojo a{display:inline-block;padding:0 5px;color:#333 !important}

/*#868 우편번호 추가 설명*/
.zipconts{margin-top:10px}
.zipconts strong{font-size:13px}
.zipconts .text02{padding-left:10px}
.zipconts .con{padding-left:75px;font-size:12px}

/* video CDN 변경으로 마크업 변경 */ 
.video-wrap{position:relative;background-color:#c9c9c9}
.video-wrap:before{content:'';display:block;padding-bottom:56.25%}
.video-wrap iframe{position:absolute;top:0;left:0;display:block;width:100%;height:100%;border:0}

/* 파일인풋 */
.file .preview .name{word-break:break-all}
.filebox{position:relative}
.filebox input[type="file"]{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.filebox label{display:inline-block;cursor:pointer}

/* named upload */
.filebox .upload-name{display:none;width:100%;white-space:nowrap;text-overflow:ellipsis;margin-top:10px;background:transparent;border:0;-webkit-appearance:none;overflow:hidden}
.filebox .upload-name.in{display:block}
.filebox .preview{position:relative;display:flex;align-items:center;min-height:55px;padding:4px 25px 5px 60px;background-color:#f6f6f8;box-sizing:border-box}
.filebox .preview .thumb{display:inline-block;position:absolute;left:5px;top:5px;width:45px;height:45px;border:1px solid #e2e2e2;box-sizing:border-box}
.filebox .preview .name{display:inline-block;font-size:13px;color:#333;max-width:100%;word-break:break-word;}
.filebox .preview .btnDelete{position:absolute;right:0;top:0;width:30px;height:100%}
.filebox .preview .btnDelete .icon{vertical-align:middle}
.filebox .preview .thumb img{height:100%}

.ui-datepicker .ui-datepicker-prev,
.ui-datepicker .ui-datepicker-next{top:10px}

/* #4632 */
.seminarInfo .tabContent .recommend{font-size:14px;color:#333}
.seminarInfo .tabContent .recommend p{line-height:1.5}
.seminarInfo .tabContent .recommend .btn{position:relative;margin-top:10px;text-align:left}
.seminarInfo .tabContent .recommend .btn .arrowRight{position:absolute;right:15px;top:50%;background-position:-195px -10px;transform:translateY(-50%)}

/* 테이블 가로 스크롤 */
.tableScroll{overflow-x:auto;overflow-y:hidden}
.tableScroll table{width:738px}

/* 1:1친절상담  */
.dialog.qnaLogin .body{padding:15px;text-align:left}
.dialog.qnaLogin .body .title{font-size:15px;color:#000;font-weight:bold}
.dialog.qnaLogin .body hr{margin:12px 0 14px}
.dialog.qnaLogin .body .btn{min-width:75px;margin:0 5px}
.dialog.qnaLogin.qnaTxtLong .body .btn{margin:0;font-size:12px;padding:0 10px;line-height:38px}
.dialog.qnaLogin .dialogClose{right:35px;top:34px;background-image:url('/static/images/common/icon_sprite.png');background-position:-270px -25px}

.dialog.qna .box.primary.guide{padding:10px;margin-bottom:10px;font-size:13px;text-align:center}

.dialog.qna .row.btns.margin{padding-left:0;padding-right:0}
.dialog.qna .noData.bubble{margin:50px 0}
.dialog.qna .tab,
.dialog.qna .qnaWrite .tab,
.dialog.qna .qnaList .tab{padding:15px 35px}
.dialog.qna .tabContent{margin-top:0}
.dialog.qna .row.tel .col.check:first-of-type{width:25px;padding-right:5px;}
.dialog.qna .titSM{font-size:14px !important;padding-top:3px}

.dialog.qna .qnaList .board .bullet{margin-bottom:5px}
.dialog.qna .qnaList .board .list4{margin-top:10px}
.dialog.qna .qnaList .board .list4 li{background-color:#fff}
.dialog.qna .qnaList .board .list4 li .head{padding:14px 15px 11px}
.dialog.qna .qnaList .board .list4 li .head .state{display:inline-block;height:17px;margin-right:3px;padding:1px 3px 0;border:1px solid #8d959f;font-size:11px;color:#8d959f;box-sizing:border-box}
.dialog.qna .qnaList .board .list4 li .head .state.primary{border:1px solid #00b6f0;color:#00b6f0}
.dialog.qna .qnaList .board .list4 li .head button{text-align:left}
.dialog.qna .qnaList .board .list4 li .head button p{margin-top:6px;vertical-align:top;font-size:14px;color:#333;word-wrap:break-word;word-break:break-all}
.dialog.qna .qnaList .board .list4 li .head button .title{line-height:1;vertical-align:top}
.dialog.qna .qnaList .board .list4 li .head button .icon.new{vertical-align:top;-webkit-transform:translateY(-2px);transform:translateY(-2px)}
.dialog.qna .qnaList .board .list4 li .head button time{font-size:12px;color:#999}
.dialog.qna .qnaList .board .list4 li .content{display:none;position:relative;padding:0 15px 35px;border-top:1px solid #e2e2e2;font-size:13px;color:#666;background-color:#f1f2f4}
.dialog.qna .qnaList .board .list4 li.active .content{display:block}
.dialog.qna .qnaList .board .list4 li .content > div{position:relative;padding:15px 0 10px 28px}
.dialog.qna .qnaList .board .list4 li .content > div:after{content:'';display:inline-block;position:absolute;left:0;top:14px;width:20px;height:20px;background-image:url('/static/images/common/icon_sprite.png');background-repeat:no-repeat;background-size:360px auto}
.dialog.qna .qnaList .board .list4 li .content .question{min-height:20px;padding-bottom:15px;word-wrap:break-word;word-break:break-all}
.dialog.qna .qnaList .board .list4 li .content .question:after{background-position:-70px -25px}
.dialog.qna .qnaList .board .list4 li .content .answer{padding-top:15px;border-top:1px solid #e2e2e2;word-wrap:break-word;word-break:break-all}
.dialog.qna .qnaList .board .list4 li .content .answer:after{background-position:-95px -25px}
.dialog.qna .qnaList .board .list4 li .content .image{margin-top:15px;border:1px solid #e2e2e2}
.dialog.qna .qnaList .board .list4 li .content .zip,
.dialog.qna .qnaList .board .list4 li .content .pdf{margin-top:15px}
.dialog.qna .qnaList .board .list4 li .content button{position:absolute;right:15px;bottom:20px;font-size:13px;color:#7f8792}
.dialog.qna .qnaList .board .list4 li .content button .icon{vertical-align:text-top}

.dialog.qna .qnaWrite .box.primary{padding:15px;font-size:14px}
.dialog.qna .qnaWrite .box.primary a{display:block}
.dialog.qna .qnaWrite .write{margin-top:15px}
.dialog.qna .qnaWrite .write textarea{height:250px;margin-top:10px}
.dialog.qna .qnaWrite .write .fileControls{height:30px;margin-top:5px;margin-bottom:10px;padding-left:10px}
.dialog.qna .qnaWrite .write .fileControls > span{vertical-align:sub}
.dialog.qna .qnaWrite .write .fileControls .btnFile{margin-left:39px}
.dialog.qna .qnaWrite .write .fileControls .btnFile label{font-size:13px;line-height:30px;display:block;height:30px;padding:0 15px}
.dialog.qna .qnaWrite .write .bullet{margin-top:10px}
.dialog.qna .qnaWrite .table{margin-top:10px;border-top:1px solid #e2e2e2}
.dialog.qna .qnaWrite .list2 li{position:relative;display:flex;justify-content:space-between;align-items:center;padding:7px 0 7px 30px}
.dialog.qna .qnaWrite .list2 li .checkbox{position:absolute;left:0;top:10px}
.dialog.qna .qnaWrite .list2 li .btn{white-space:nowrap}
.dialog.qna .qnaWrite .table.checkSendable tbody th {padding:10px;vertical-align:initial}
.dialog.qna .qnaWrite .table.checkSendable tbody label{font-size:12px;vertical-align:top}

'Static > style' 카테고리의 다른 글

shop.css  (0) 2021.02.19
office.css  (0) 2021.02.19
member.css  (0) 2021.02.19
media_query.css  (0) 2021.02.19
layout.css  (0) 2021.02.19

간단설명


@charset "UTF-8";

/* 로그인  */
.signIn{padding-bottom:55px}
.signIn .login{width:250px;margin:0 auto;position:relative}
.signIn .login input[type='tel'],
.signIn .login input[type='text'],
.signIn .login input[type='password']{margin-bottom:10px}
.signIn .login .row.btns{margin-top:10px}
.signIn .login label{font-size:14px;margin-right:10px}
.signIn .login .historyID{display:none;width:228px;overflow-y:scroll;max-height:190px;position:absolute;top:139px;left:0;z-index:1;padding:7px 10px;background-color:#fff;border:1px solid #bfc2c6;font-size:14px}
.signIn .login .historyID ul li{padding:3px 0}
.signIn .login .historyID ul li > span, .signIn .login .historyID ul li > span > a{display:inline-block;width:100%}

.signIn .help{width:285px;padding:15px 0 20px;margin:0 auto;border-top:1px solid #e2e2e2}
.signIn .help .row.btns .col{padding-left:5px}
.signIn .help .row.btns .col:first-child{padding-left:0}
.signIn .help .row.btns .col .btn{padding:0 5px}
.signIn .help .guide li{margin-top:13px}

.signIn.default .login{position:relative;padding:100px 0 25px}
.signIn.default .login:after{content:'';display:inline-block;position:absolute;left:50%;top:23px;margin-left:-36px;width:71px;height:60px;background-image:url('/static/images/common/logo_blue_142x120.png');background-repeat:no-repeat;background-size:71px auto}

.signIn.registerSingIn .login{padding-bottom:44px}
.signIn.registerSingIn .help .guide li{margin-bottom:13px}
.signIn.registerSingIn .guide.account{padding:50px 10px 30px}

/* 회원가입 게이트 */
.registerGate{height:100vh}
.registerGate .join{text-align:center;box-sizing:border-box;width:100%;height:calc(100vh - 50px);min-height:100%;background-image:url('/static/images/contents/register_gate_bg.jpg');background-size:100% auto;background-repeat:no-repeat}
.registerGate .join .slogun{width:250px;margin:0 auto 37.5px}
.registerGate .join .slogun:before{content:'';display:inline-block;width:103px;height:87px;margin-bottom:15px;font:0/0 a;background-image:url('/static/images/contents/gate_slogun.png');background-size:103px auto;background-repeat:no-repeat}
.registerGate .join .slogun p{color:#fff;font-size:16px;line-height:1.5}
.registerGate .join .acenter{padding-bottom:20px}
.registerGate .join .btns{width:250px;margin:0 auto}
.registerGate .join .btns .btn{width:100%;margin-top:10px}
.registerGate .join .btns .btn:first-child{margin-top:0}
.registerGate .join .verticalCenter{min-height:100%;padding:30px 0;-webkit-box-sizing:border-box;box-sizing:border-box;
    -webkit-flex-direction:column;
    -ms-flex-direction:column;
    flex-direction:column;
    -webkit-box-orient:vertical;
     -moz-box-orient:vertical;
    -webkit-justify-content:center;
    -ms-flex-pack:center;
    justify-content:center;
    font-family:sans-serif;
}
.registerGate .join .btns.cards{width:81.25%;margin:-17.5px auto 0;text-align:center}
.registerGate .join .btns .card{border:1px solid #ccc;background-color:#fff;border-radius:3px}
.registerGate .join .btns .card + .card{margin-top:10px}
.registerGate .join .btns .card .head{padding:7px 10px;color:#fff;background-color:#00b6f0}
.registerGate .join .btns .card .body{padding:10px}
.registerGate .join .btns .card .body small{display:block;margin-top:10px;line-height:1.2}
.registerGate .join .btns .card .btn{width:50%;margin-top:20px;padding:5px 30px;line-height:20px;font-size:13px;background-color:#336699}
.registerGate .join .iMembership{margin-top:10px;padding:15px 10px;background-color:#f6f6f8;border-radius:2px}
.registerGate .join .iMembership .title{display:block;margin-bottom:10px;font-size:14px}
.registerGate .join .iMembership .info{margin-top:10px;text-align:left}
.registerGate .join .iMembership .info li{color:#999}
.registerGate .join .iMembership .info li:after{background-color:#999}
.registerGate .join .iMembership .btn{margin-top:10px;padding:5px 30px;line-height:20px;font-size:12px;border-radius:2px}
.registerGate .guide{text-align:left;padding:10px 15px}
.registerGate .guide p{font-size:13px}
.registerGate .guide span{display:block;margin-top:5px;font-size:12px;color:#999}

.registerGate aside{height:72px;padding-top:15px;background-color:#fff;text-align:center;box-sizing:border-box}
.registerGate aside p{font-size:15px;color:#333}
.registerGate aside small{font-size:12px;color:#999}
.registerGate .language{ background-color:#fff;overflow:hidden}
.registerGate .language + .language{ margin-top:10px}
.registerGate .language .title{ padding:5px 15px;color:#00b6f0;font-size:15px;font-weight:bold}
.registerGate .languageSelect{ width:101%}
.registerGate .languageSelect:after{ content:'';display:block;clear:both}
.registerGate .languageSelect span:only-child{border:1px solid #e2e2e2}
.registerGate .languageSelect span{  float:left;display:table;box-sizing:border-box;width:33.3333%;margin-top:-1px;border-top:1px solid #e2e2e2;border-left:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2}
.registerGate .languageSelect span:nth-child(3n+1){ width:33.3334%;border-left:none}
.registerGate .languageSelect span:nth-child(3n+1):last-child{border-right:1px solid #e2e2e2}
.registerGate .languageSelect span a{ position:relative;display:table-cell;max-width:72px;padding:10px 25px 10px 15px;color:#333333;font-size:11px;vertical-align:middle;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.registerGate .languageSelect span a:after{ content:'';display:inline-block;position:absolute;right:15px;top:15px;width:5px;height:9px;background-image:url('/static/images/common/icon_sprite.png');background-position:-195px 0;background-repeat:no-repeat;background-size:360px auto}
.registerGate .languageSelect span .stateFlag{display:none;position:absolute;left:15px;top:50%;margin-top:-9px}
@media all and (max-width:321px){
	.registerGate .languageSelect span a{ max-width:42px}
}
.registerGate .fixBottom .fixContent{height:inherit}

/* 회원가입 */
.register .process{margin-bottom:25px}
.register .process ul{height:44px;overflow:hidden}
.register .process ul:after{content:'';display:block;clear:both}
.register .process ul li{float:left;position:relative;width:35%;height:44px;padding-top:12px;text-align:center;font-size:14px;color:#333;background-color:#f6f6f8;border-bottom:1px solid #c6c6c6;box-sizing:border-box}
.register .process ul li.active{color:#fff;background-color:#707781;border-bottom:1px solid #707781}
.register .process ul li span{position:relative}
.register .process ul li span:before{content:'';display:inline-block;position:absolute; background-image:url('/static/images/common/pictogram_sprite.png');background-size:360px auto;background-repeat:no-repeat}
.register .process ul li.step1{padding-left:14px}
.register .process ul li.step2{padding-left:17px}
.register .process ul li.step3{padding-left:21px}
.register .process ul li.step1 span:before{left:-20px;top:-2px;width:14px;height:19px;background-position:-25px -25px}
.register .process ul li.step2 span:before{left:-22px;top:-2px;width:17px;height:18px;background-position:-75px -25px}
.register .process ul li.step3 span:before{left:-23px;top:-1px;width:18px;height:17px;background-position:-125px -25px}
.register .process ul li.step1.active span:before{width:14px;height:19px;background-position:0 -25px}
.register .process ul li.step2.active span:before{width:17px;height:17px;background-position:-50px -25px}
.register .process ul li.step3.active span:before{width:18px;height:16px;background-position:-100px -25px}
.register .process ul li:after{content:'';display:inline-block;position:absolute;right:0;top:0;width:12px;height:44px;background-image:url('/static/images/common/process_arrow.png');background-size:12px auto;background-repeat:no-repeat}
.register .process ul li.active:after{background-position:0 -50px}
.register .process ul li.step3{width:30%}
.register .process ul li.step3:after{content:none}
.register .guide{padding:20px 25px;text-align:center}
.register .guide .text02{margin-top:3px}
.register .addition{margin-top:10px}
.register .title.sub{margin-top:20px}
.register .table{margin-bottom:15px}
.register .table tbody th{white-space:nowrap}

.register.step1 .bullet{margin-top:7px}
.register.step2 .process ul li.step1:after{background-image:url('/static/images/common/process_arrow2.png')}
.register.step3 .process ul li.step2:after{background-image:url('/static/images/common/process_arrow2.png')}
.register.step2 .board .list2 .btn{float:right}
.register.step2 .board .list2 > li{display:flex;justify-content:space-between;align-items:center}
.register.step2 .board.agreement .list2 label{transform:none;word-break:break-word}
.register.step2 .board .list2 .btn{white-space:nowrap}

.register.step2 .table .tips{position:relative;padding-right:46px}
.register.step2 .table .tips a{display:inline-block;position:absolute;right:10px;top:11px}
.register.step3 .bullet{margin-top:10px}
.register.step4 .box.primary{margin:15px 0;padding:15px 20px;font-size:14px}
.register.step4 .box.primary strong{font-size:17px;color:#333}
.register.step4 .box.default{position:relative;margin-bottom:12px}
.register.step4 .box.default .content{display:table;width:100%;margin:25px 0;table-layout:fixed;box-sizing:border-box}
.register.step4 .box.default .content span{display:table-cell;position:relative;width:50%;padding:0 5px;text-align:center;box-sizing:border-box}
.register.step4 .box.default .content span:after{content:'';display:inline-block;position:absolute;left:0;top:4px;height:12px;border-left:1px solid #e2e2e2}
.register.step4 .box.default .content span:first-child:after{content:none}
.register.step4 .box.default .row.btns{border-top:1px solid #e2e2e2;color:#666;font-size:15px}
.register.step4 .box.default .row.btns .btn{color:#333}
.register.step4 .bullet + .bullet{margin-top:7px}

.board.agreement li .btn{float:right}

/* 아이디, 비밀번호 찾기 */
.findId .tab.type2{padding:15px 35px}
.findId section{margin-top:15px}
.findId .table{margin-bottom:15px}
.findPassword section{margin-top:15px}
.findPassword .certificationNo .table{border-top:none}
.findPassword #success .title{padding-bottom:2px;border-bottom:1px solid #707780}
.findPassword #success .row{margin-top:10px}

/* 정보변경 비밀번호 확인 */
#body.password{padding-bottom:70px}
.password .guide.account{padding:0 30px}
.password .guide.account .text13{margin-top:4px}
.password .entry{width:250px;margin:18px auto 0;font-size:13px}
.password .entry div{margin-bottom:10px}
.password .entry .bullet{margin:15px 0}
.password .advice{width:285px;margin:20px auto 0;padding-top:16px;border-top:1px solid #e2e2e2}
.password .advice ul > li{display:inline-block;white-space:nowrap}
.password .fixContent{position:fixed;border-top:1px solid #e2e2e2}
.password .fixContent .col:first-child{border-right:1px solid #e2e2e2}
.password .fixContent .btn{border:none}
.password .fixContent .btn .icon{margin-left:4px}

/* 정보변경 */
.spouse section,
.accountCheck section,
.accountEdit section,
.accountLeave section,
.registrationUpdate section{margin-top:15px}
.accountLeave .guide{margin-top:15px}
.accountLeave .guide .bullet + .bullet{margin-top:10px}
.spouse .box.primary,
.accountCheck .box.primary,
.registrationUpdate .box.primary{margin-bottom:15px;padding:15px 10px 18px}
.accountCheck .box.primary .text12{margin-top:3px}

.accountEdit .noSpouse .row{height:61px;padding:10px 0;border-top:1px solid #707780;box-sizing:border-box}
.accountEdit .noSpouse .row:after{content:'';display:block;clear:both}
.accountEdit .noSpouse .row .text{float:left;font-size:14px;line-height:40px;color:#333}
.accountEdit .noSpouse .row .btn{float:right}
.accountEdit .noSpouse ~.board.agreement{margin-top:0}
.accountEdit .noSpouse ~.board.agreement .list2{border-top:1px solid #e2e2e2}

.accountEdit .table .row.user{position:relative;min-height:30px}
.accountEdit .table .row.user .text{display:block;padding-top:4px;vertical-align:sub}
.accountEdit .table .row.user .btns{position:absolute;right:0;top:0}
.accountEdit .table .row.user .btns.block{position:static;clear:both;float:none;padding-top:6px}
.accountEdit .table .row.user small{display:block;clear:both;margin-top:2px;font-size:12px}
.accountEdit .table .row.center .text{position:static;padding-top:4px;line-height:38px}
.accountEdit .table .row.number .text{position:static;padding-top:10px;word-break:break-all}
.accountEdit .board.agreement .list2 > li{display:block;padding-left:0}
.accountEdit .board.agreement .list2 li .checkbox{position:relative;top:0}

.accountEdit .tips{position:relative;display:flex;align-items:center; min-height:25px;padding-left:30px;font-size:12px}
.accountEdit .tips a{display:inline-block;position:absolute;left:0px;top:0}

#body.editCenter{padding-bottom:65px}
#body.editCenter .certificationNumber{margin-bottom:15px;border-top:none}
.editCenter .guide{margin-bottom:15px}

/* 주민등록번호 업데이트 */
.registrationUpdate .inlineInput input[type="text"]{width:20%;margin:2px 0;text-align:center}

/* 회원탈퇴 */
.unregister .section{margin:20px 0}
.unregister .section .certificationNumber{border-top:none}
.unregister .section .guide{margin:15px 0}

/* 배우자 등록, 변경 */
.spouse .agreement{margin-top:7px}
.spouse .box.primary .text12{margin-top:5px}
.spouse .table{margin-bottom:10px}
.spouse .guide li{position:relative}
.spouse .guide .btn{position:absolute;right:0;top:0}
.spouse .board.agreement .list2{margin-bottom:10px}
.spouse .board.agreement .list2 label{line-height:1.1}

/* 시리얼번호 입력 */
.serial .entry{margin:18px auto 0}
.serial .entry label{display:block;margin-bottom:10px;text-align:center}

'Static > style' 카테고리의 다른 글

office.css  (0) 2021.02.19
module.css  (0) 2021.02.19
media_query.css  (0) 2021.02.19
layout.css  (0) 2021.02.19
jquery.auto-complete.css  (0) 2021.02.19

간단 설명


@charset "UTF-8";

@media screen and (min-width:481px){
	.shopMain .category li{min-width:11%}
	.tab.my span{width:25%}
}

/* Only iPhone 4,5 */
@media screen and (max-width:320px){
	#gnb .paymentApps > li{padding-left:17px}
	#gnb .footer div{padding-top:3px}

	.dialog.mobileNav .body .guide{padding-top:9px}
	.orderHistory .products .controls .select{width:100px}
	
	.table .btn.md{padding:0 5px}

	.lowerSalesList .board .content .item:first-child{width:65%}
	.lowerSalesList .board .content .item:last-child{min-width:35%}

	.topBanner .center{padding-right:20px}
	.topBanner p{font-size:14px}
	.topBanner .topBannerBtn{margin-left:0}

	.shopMain.mobile .products .list .info .thumb{width:100px;height:100px}
	.shopMain.mobile .products .list > li > div{padding-left:120px}
	.shopMain.mobile .products .card .info .fix{height:152px}

	.dialog.toCenter.navigation .layout{top:5%;bottom:5%}

	.buy .table .row.cell2 .col:last-child{width:50%}
	.buy .table .row.cell2 .col .btn{padding:0 10px}
	.buy .payment .btns li.item5 .btn{padding:6px 3px 0;vertical-align:middle;line-height:1.2}
	.buyDone .row.sides .itemCount .sub{max-width:100px}
	.paymentDone .row.sides .itemCount .sub{max-width:100px}
	
	.registerGate{padding-bottom:0}
	.registerGate .join{position:static;padding-top:20px}
	.registerGate .fixBottom{position:static}
	.registerGate .fixBottom .fixContent{position:static}

	.banner.colors a{height:auto;padding-bottom:8px}
	.banner.colors a strong{display:block}

    .products .list > li > div{padding-left:100px;height:126px}
    .products .list .info .thumb{left:5px;top:10px}
    .products .list .info .thumb.resize{width:90px;height:90px}
    .products .list .info .fix{padding:13px 5px 0 0}
    .products .list .info .reconts{margin-top: 11px}
    .products .list .info .price strong{font-size: 15px}
    .products .info .price dd{font-size: 12px}
    .products .row.quantity{padding-right:55px}
    .products .list .info .disable{left:7px;top:22px;width:85px;height:85px}
    .products .list .info .new{left:55px}
    .products .card .info .disable{top:15px}

    .favorite .products .list .info .thumb{top:7px}
    .favorite .products .list .info .disable{left: 45px;top: 15px}
    
    .favorite .products .list .disable,
    .cart .products .list .disable{left: 45px}

    .list.options .info .fix{padding: 0}
}



/* 가로모드 (iPhone4 기준이상) */
@media screen and (min-width:480px){
	.dialog.mobileNav .body nav span{width:25%}
	.dialog.mobileNav .body nav span a{height:50px;padding-top:16px;font-size:13px}
	.dialog.mobileNav .body nav span a:after{top:20px}
	.dialog.mobileNav .body .guide{height:66px;padding-top:12px}

	.dialog.toCenter.navigation .layout{top:5%;bottom:5%}

	.dialog.cart .body{max-height:200px;overflow-y:auto;overflow-x:hidden}
}

/* Only iPhone4,5 가로모드 */
@media screen and (min-width:480px) and (max-width: 568px){
	.dialog.cart .body .info{height:57px;padding-left:15px}
	.dialog.cart .body .info:after{content:'';display:block;clear:both}
	.dialog.cart .body .info .thumb{display:none}
	.dialog.cart .body .info .name{display:inline-block;float:left;width:49%}
	.dialog.cart .body .info .select{float:right;width:49%}
}

/* Only iPhone4 가로모드 */
@media screen and (min-width:480px) and (max-width: 481px){
	.dialog.cart .body{max-height:120px}
}
/* Only iPhone5 가로모드 */
@media screen and (min-width:568px) and (max-width: 569px){
	.dialog.cart .body{max-height:100px}
}

/* note 5 */
@media (-webkit-device-pixel-ratio: 3.5) and (min-width: 412px){
	.gateMain #body .slider{padding-top:90%}
	.video .dropDown .btn .icon.arrowBottom{margin-top:-5px}
	.lifeWrite .btn.md {line-height:35px}
	.lowerSalesList .headLine button .icon{margin-top:-5px}
}
@media (orientation: landscape){
	.ticketPreview .body .fixBottom{position:static;margin-top:20px}
	.ticketPreview .body .fixContent{position:static}
}

.ios{
    --top: 20pt;
    --bottom: 0px;
}
.ios.notch{
    --top: 33pt;
    --bottom: 35pt;
}

/* layout */
.ios #header{
    height: calc(var(--top) + 50px);
    padding-top: calc(var(--top) + 12px);
}
.ios #header .btn{
    top: calc(var(--top) + 5px);
}

.ios #body{
    padding-top: calc(var(--top) + 50px);
}
.ios #body.helpdeskMain{
    padding-top: calc(var(--top) + 70px);
}
.notch #body.cart{
    padding-bottom: calc(60px - var(--bottom) + 140px);
}
.notch #body.seminarInfo{
    padding-bottom: var(--bottom);
}
.notch .fixBottom.happyCenter .fixContent{
    height: calc(60px - var(--bottom) + 55px);
}

/* slide-popup */
.notch .slidePopup .slider .indicator.expand{
    bottom: calc(60px - var(--bottom) + 65px);
}

/* gnb */
.notch #gnb{
    padding-bottom: var(--bottom);
}
.ios #gnb .info{
    padding-top: calc(var(--top) + 52px);
}
.ios #gnb .info.nonmember{
    padding-top: calc(var(--top) + 22px);
}
.ios #gnb .info .local{
    top: calc(var(--top) + 11px);
}
.ios #gnb .info .setup a{
    top: calc(var(--top) + 15px);
}
.ios .menuClose{
    top: calc(var(--top) + 17px);
}

/* main */
.ios .gateMain #header .btnMenu{
    top: calc(var(--top) + 6px);
}
.ios .gateMain #header .btns{
    top: calc(var(--top) + 8px);
}
.notch .gateMain #footer .fixContent{
    bottom: 0;
}
.ios .gateMain #body{
    padding-top: calc(var(--top) + 50px);
}
.notch .gateMain #body #footer{
    bottom: calc(var(--bottom) + 18px);
}
.notch .gateMain #nav a{
    padding-bottom: var(--bottom);
}

/* company */
.ios .company > .layout{
    height: calc(var(--top) + 45px);
}
.ios .company > .layout .btnMenu{
    top: calc(var(--top) + 7px);
}
.ios .company > .layout .btnSnb{
    top: calc(var(--top) + 4px);
}
.ios .company .header{
    padding-top: var(--top);
}
.ios .company .header .content{
    transform: translateY(calc(var(--top) + 118px));
}
.ios .company .section{
    padding-top: calc(var(--top) + 291px);
}
.ios .company .marketing,
.ios .company .socialShare,
.ios .company .motto,
.ios .company .vision,
.ios .company .history{
    padding-top: calc(var(--top) + 336px);
}

/* dialog */
.notch .dialog.tutorial .layout{
    padding: 0;
    height: 100%;
}
.notch .dialog.tutorial .layout .body{
    display: flex;
    align-items: center;
    justify-content: center;
}

.notch .dialog.promotions .body{
    padding-bottom: calc(var(--bottom));
}

.ios .dialog.page .layout{
    padding-top: calc(var(--top) + 50px);
}
.ios .dialog.page.noHeader .layout{
    padding-top: 0;
}
.ios .dialog.page .layout header{
    height: calc(var(--top) + 50px);
    padding-top: calc(var(--top) + 9px);
}
.ios .dialog.page .dialogClose{
    top: calc(var(--top) + 16px);
}
.ios .treeLevel.dialog.page .dialogClose{
    top: calc(var(--top) + 8px);
    right: 9px;
}
.ios .treeLevel.dialog.page .dialogClose:after{
    top: 7px;
}
.ios .dialog .dialogPrev{
    top: calc(var(--top) + 16px);
}

.ios .dialog.search #header{
    height: 50px;
    padding-top: 12px;
}
.ios .dialog.search .layout{
    margin-top: calc(var(--top) + 50px);
}
.ios .dialog.search .layout + .dim{
    top: calc(var(--top) + 50px);
    bottom: 0;
}
.ios .dialog.search #body{
    padding-top: 50px;
}

.ios .dialog.mobileGuide.mobileQa .tab{
    top: calc(var(--top) + 50px);
}
.notch .dialog.findProduct .body{
    padding-bottom: calc(60px - var(--bottom));
}
.notch .dialog.findProduct .search{
    position: relative;
}
.notch .dialog.findProduct .search input[type='search']{
    padding-right: 30px;
}
.notch .dialog.findProduct .search .btnDelete{
    right: 0;
}
.notch .snsShare .layout{
    padding-bottom: calc(60px - var(--bottom));
}

/* shop */
.notch #snb{
    padding-bottom: calc(60px - var(--bottom));
}
.notch #footer .fixContent{
    padding-bottom: calc(60px - var(--bottom) + 101px);
}
.notch .notice.fixBottom{
    bottom: calc(60px - var(--bottom) + 171px);
}
.notch .products .list{
    margin-bottom: calc(60px - var(--bottom));
}
.notch .shopMain .btnMore{
    margin-bottom: calc(60px - var(--bottom) + 20px);
}
.notch .fixBottomBtn{
    bottom: calc(60px - var(--bottom) + 65px);
}
.notch .buy ~ .fixBottomBtn,
.notch .product ~ .fixBottomBtn{
    bottom: calc(60px - var(--bottom) + 75px);
}
.notch .row.btns .col,
.notch .noticeDetail .row.btns.margin.floating.box{
    padding-bottom: calc(60px - var(--bottom));
}
.notch .row.btns .col:first-child:last-child{
    padding-bottom: 0;
}
.notch .row.btns.floating{
    height: calc(60px - var(--bottom) + 70px);
}
.notch .favorite .row.btns.floating{
    height: 70px;
    padding-bottom: 0;
    bottom: calc(60px - var(--bottom) + 60px);
}
.notch .buy .agreement{
    margin-bottom: calc(60px - var(--bottom));
}
.notch .buy .row.btns.btnScroll{
    height: calc(60px - var(--bottom) + 70px);
}

/* myoffice */
.notch .planList .plans{
    padding-bottom: calc(60px - var(--bottom));
}
.notch .lowerSalesList .guide{
    margin-bottom: calc(60px - var(--bottom));
}

/* paynowBiz */
.notch .paymentMethod.dialog .layout .body ul li:last-child{
    padding-bottom: 15px;
}

'Static > style' 카테고리의 다른 글

module.css  (0) 2021.02.19
member.css  (0) 2021.02.19
layout.css  (0) 2021.02.19
jquery.auto-complete.css  (0) 2021.02.19
home.css  (0) 2021.02.19
@charset "UTF-8";

html,
body,
#container{height:100%}
body{background-color:#f1f2f4}
#container{-webkit-tap-highlight-color:rgba(0,0,0,0);-webkit-tap-highlight-color:transparent}
#layout{position:relative;z-index:1;min-height:100%;box-sizing:border-box}

/* gnb  */
#gnb{position:fixed;left:0;top:0;bottom:0;z-index:200;width:300px;overflow-y:auto;overflow-x:hidden;background-color:#f5f5f5;box-sizing:border-box}
#gnb .info{min-height:130px;padding:52px 15px 10px;color:#fff;box-sizing:border-box;background-image:url('/static/images/common/gnb_top_bg.jpg');background-repeat:no-repeat;background-size:cover}
#gnb .info:after{content:'';display:block;clear:both}
#gnb .info .local{position:absolute;left:15px;top:11px}
#gnb .info .local a{position:relative;display:inline-block;padding-left:9px;margin-left:3px;font-size:14px;color:#fff;vertical-align:middle;line-height:1.5}
#gnb .info .local a:first-child{padding-left:0;margin-left:0}
#gnb .info .local a:after{content:'';display:block;position:absolute;left:0;top:4px;height:13px;border-left:1px solid rgba(255,255,255,.4)}
#gnb .info .local a:first-child:after{content:none}
#gnb .info .setup a{display:inline-block;position:absolute;right:15px;top:15px;width:19px;height:20px;font:0/0 a;background-image:url('/static/images/common/layout_sprite.png');background-position:-125px 0;background-repeat:no-repeat;background-size:360px auto} 
#gnb .info .data:after{content:'';display:block;clear:both}
#gnb .info .data .name{display:block;margin-bottom:4px;font-size:23px}
#gnb .info .data .name small{font-size:13px;color:rgba(255,255,255,.8);white-space:nowrap}
#gnb .info .data dl{float:left;margin-right:8px;margin-bottom:2px}
#gnb .info .data dl:after{content:'';display:block;clear:both}
#gnb .info .data dl dt{float:left;width:21px;height:21px;margin-right:5px;margin-top:2px;font:0/0 a;background-image:url('/static/images/common/layout_sprite.png');background-position:-150px -75px;background-repeat:no-repeat;background-size:360px auto}
#gnb .info .data dl:nth-of-type(1) dt{background-position:-150px -50px}
#gnb .info .data dl dd{float:left;font-size:11px}
#gnb .info .data dl dd em{font-size:16px}

#gnb .info.nonmember{padding-top:40px;text-align:center}
#gnb .info.nonmember .text1{font-size:14px}
#gnb .info.nonmember .text2{font-size:18px}
#gnb .info.nonmember .btns{margin-top:8px}
#gnb .info.nonmember .btns .btn{width:90px;height:30px;line-height:28px;color:#fff;border:1px solid #fff;border-radius:20px}

#gnb .myPage{background-color:#fff}
#gnb .myPage:after{content:'';display:block;clear:both}
#gnb .myPage li{float:left;width:25%;box-sizing:border-box;border-bottom:1px solid #e2e2e2;border-right:1px solid #e2e2e2}
#gnb .myPage li:nth-child(4n+4){border-right:none}
#gnb .myPage li a{display:block;position:relative;height:75px;padding-top:43px;font-size:12px;color:#333;text-align:center;line-height:12px;box-sizing:border-box}
#gnb .myPage li a:after{content:'';display:inline-block;position:absolute;left:50%;background-image:url('/static/images/common/icon_gnb.png');background-repeat:no-repeat;background-size:360px auto}
#gnb .myPage li.tree a:after{top:16px;width:23px;height:23px;margin-left:-11px;background-position:0 0}
#gnb .myPage li.low a:after{top:17px;width:26px;height:21px;margin-left:-12px;background-position:-25px 0}
#gnb .myPage li.benefit a:after{top:17px;width:23px;height:21px;margin-left:-10px;background-position:-55px 0}
#gnb .myPage li.cart a:after{top:18px;width:23px;height:20px;margin-left:-12px;background-position:-80px 0}
#gnb .myPage li.order a:after{top:15px;width:20px;height:22px;margin-left:-10px;background-position:-105px 0}
#gnb .myPage li.delivery a:after{top:18px;width:31px;height:19px;margin-left:-17px;background-position:-125px 0}
#gnb .myPage li.balance a:after{top:19px;width:25px;height:22px;margin-left:-12px;background-position:-160px 0}
#gnb .myPage li.number a:after{top:19px;width:20px;height:21px;margin-left:-10px;background-position:-185px 0}
#gnb .myPage li.notice a:after{top:20px;width:24px;height:20px;margin-left:-13px;background-position:-210px 0}
#gnb .myPage li.paynowBiz a{font:0/0 a;}
#gnb .myPage li.paynowBiz a:after{top:10px;width:55px;height:55px;margin-left:-29px;background-position:0 -30px}

#gnb .navigation{background-color:#f5f5f5}
#gnb .navigation a{display:block}
#gnb .depth1 > li{position:relative}
#gnb .depth1 > li:after{content:'';display:inline-block;position:absolute;right:15px;top:25px;width:10px;height:6px;background-image:url('/static/images/common/icon_sprite.png');background-repeat:no-repeat;background-position:-160px -10px;background-size:360px auto;-webkit-transition:-webkit-transform .2s ease-in;transition:transform .2s ease-in;}
#gnb .depth1 > li.home:after{-webkit-transform:rotate(270deg);transform:rotate(270deg)}
#gnb .depth1 > li.active:after{background-position:-160px 0;-webkit-transform:rotate(180deg);transform:rotate(180deg)}
#gnb .depth1 > li.active + li{border-top:1px solid #e2e2e2}
#gnb .depth1 > li > .btn{display:block;width:100%;height:50px;line-height:50px;padding:0 5px 0 15px;text-align:left;font-size:16px;color:#000;border-bottom:1px solid #e2e2e2;background-color:#fff;box-sizing:border-box}
#gnb .depth1 > li > .btn:active,
#gnb .depth1 > li.active > .btn{color:#00b6f0;font-weight:bold}
#gnb .depth1 > li:last-child ul{border-bottom:1px solid #e2e2e2}
#gnb .depth2{display:none}
#gnb .depth2 > li{padding:0 15px}
#gnb .depth2 > li:first-child > .btn{border-top:none}
#gnb .depth2 > li > .btn{display:block;position:relative;width:100%;height:45px;padding:12px 25px 12px 10px;text-align:left;color:#333;font-size:14px;border-top:1px solid #e2e2e2;box-sizing:border-box}
#gnb .depth2 > li > .btn:after{content:'';display:inline-block;position:absolute;right:10px;top:18px;width:5px;height:9px;background-image:url('/static/images/common/icon_sprite.png');background-repeat:no-repeat;background-position:-195px 0;background-size:360px auto}
#gnb .depth2 > li > .low:before{content:'';display:inline-block;position:absolute;right:12px;top:17px;height:11px;border-left:1px solid #adadad;-webkit-transition:all .2s ease-in;transition:all .2s ease-in;border-radius:2px}
#gnb .depth2 > li > .low:after{right:7px;top:22px;width:11px;border-top:1px solid #adadad;background:none;-webkit-transition:-webkit-transform .2s ease-in;transition:transform .2s ease-in;-webkit-transform-origin:50% 0;transform-origin:50% 0}
#gnb .depth2 > li.active > .low{font-weight:bold}
#gnb .depth2 > li.active > .low:before{opacity:0;-webkit-transform:rotate(180deg);transform:rotate(180deg)}
#gnb .depth2 > li.active > .low:after{-webkit-transform:rotate(180deg);transform:rotate(180deg)}
#gnb .depth3{display:none;padding-bottom:10px;padding-left:15px}
#gnb .depth3 > li{position:relative}
#gnb .depth3 > li:after,
#gnb .depth3 > li:before{content:'';display:inline-block;position:absolute;left:13px}
#gnb .depth3 > li:after{top:15px;height:5px;width:1px;background-color:#aeaeae}
#gnb .depth3 > li:before{top:20px;width:6px;height:1px;background-color:#aeaeae}
#gnb .depth3 > li a{display:block;padding:8px 10px 8px 25px;text-align:left;color:#666;font-size:13px}
#gnb .paymentApps{display:none;padding-bottom:20px}
#gnb .paymentApps:after{content:'';display:block;clear:both}
#gnb .paymentApps > li{float:left;padding-left:25px}
#gnb .paymentApps > li:first-child{padding-left:20px}
#gnb .paymentApps > li a{display:inline-block;width:55px;height:55px;font:0/0 a;vertical-align:top;background-image:url('/static/images/common/payment_apps.png');background-size:360px auto;background-repeat:no-repeat}
#gnb .paymentApps .paynowBiz a{background-position:0 0}
#gnb .paymentApps .kpay a{background-position:-60px 0}
#gnb .paymentApps .paynow a{background-position:-120px 0}

#gnb .depth1 > li.active .depth2,
#gnb .depth2 > li.active .depth3,
#gnb .depth2 > li.active .paymentApps{display:block}

#gnb .navigation .content .quick ul li{float:left;width:20%;text-align:center;box-sizing:border-box}
#gnb .navigation .content .quick ul li a{display:block;height:50px;padding:5px;color:#666;border-bottom:1px solid rgba(0,0,0,.1);box-sizing:border-box}

#gnb .footer{position:relative;height:110px;padding-top:15px;padding-left:15px}
#gnb .footer .onair a{display:block;position:absolute;left:15px;bottom:15px;width:70px;height:70px;font:0/0 a;background-image:url('/static/images/common/atomy_onair.png');background-repeat:no-repeat;background-position:0 0;background-size:70px auto;}
#gnb .footer div{overflow:hidden;padding-top:13px}
#gnb .footer div a{position:relative;display:inline-block;padding-left:9px;margin-left:-9px;margin-right:12px;font-size:14px;color:#666;white-space:nowrap}
#gnb .footer div a:after{content:'';display:block;position:absolute;left:0;top:5px;height:10px;border-left:1px solid #c4c4c4}
#gnb .footer .copy{font-size:13px;font-weight:bold}
#gnb .footer a img{vertical-align:sub}
#gnb .footer div a.linkOfficial:last-child{padding-left:0}
#gnb .footer div a.linkOfficial:last-child:after{content:none}
#gnb .footer .social-link{padding:10px 0}
#gnb .footer .social-link a{margin:0 2.5px 0 0;padding:0}
#gnb .footer .social-link a:after{content:none}

#gnb .btnGlobalSites{border-bottom:1px solid #e2e2e2;background-color:#fff}
#gnb .btnGlobalSites h3{display:block;width:100%;height:50px;line-height:50px;padding:0 5px 0 15px;text-align:left;font-size:16px;color:#000;background-color:#fff;box-sizing:border-box}
#gnb .btnGlobalSites ul{display:flex;justify-content:space-around;padding:0 15px}
#gnb .btnGlobalSites li{text-align:center}
#gnb .btnGlobalSites li span{display:block;font-size:11px;color:#989898}
#gnb .btnGlobalSites .globalBizLink{margin:10px 15px 15px;}
#gnb .btnGlobalSites .globalBizLink a{display:flex;align-items:center;justify-content:center;padding:8px 5px;background:#efefef}
#gnb .btnGlobalSites .globalBizLink span{font-size:11px;color:#313131}
#gnb .btnGlobalSites .globalBizLink strong{margin:0 5px 0 8px}

/* Container */  /*.orange 추가*/
#header{position:fixed;left:0;top:0;right:0;height:50px;padding-top:12px;text-align:center;background-color:#00b6f0;z-index:100;box-sizing:border-box}
#header.orange{background-color:#ff9900}
#header.skyblue{background-color:#64d0f3}
#header.white{background-color:#fff}
#header.blue{background-color:#00b6f0}
#header:after{content:'';display:block;clear:both}
#header .logo{display:block;font-size:19px;color:#fff;font-weight:bold;box-sizing:border-box}
#dialog header .btn,
#header .btn{display:inline-block;position:absolute;z-index:110;width:auto;padding:10px;font:0/0 a}
#header.popup{background-color:#fff;border-bottom:1px solid #c6c6c6}
#header.popup .logo{color:#333}
#header.popup.orange{background-color:#ff9900;border-bottom:none}
#header.popup.skyblue{background-color:#64d0f3;border-bottom:none}
#header.popup.blue{background-color:#00b6f0;border-bottom:none}
#header.popup.orange .logo,
#header.popup.skyblue .logo,
#header.popup.blue .logo{color:#fff}
#header.popup.orange .icon.close,
#header.popup.skyblue .icon.close,
#header.popup.blue .icon.close{background-position:-150px -25px}
#header .count{display:inline-block;position:absolute;right:2px;top:3px;width:17px;height:17px;text-align:center;border-radius:50%;background-color:#f9a04f;color:#fff;font-size:11px;font-family:Arial, sans-serif;font-weight:bold;line-height:1;box-sizing:border-box;
	display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center;
}
#dialog .icon,
#header .icon{display:inline-block;background-image:url('/static/images/common/layout_sprite.png')}
.btnMenu{left:5px;top:7px}
.btnHome{left:5px;top:5px}
.btnPrev{left:5px;top:7px}
.btnClose{right:5px;top:5px}
.btnSearch{right:50px;top:5px}
.btnShop{right:5px;top:5px}
.btnOffice{right:5px;top:5px}
.btnCart{right:5px;top:5px}
.btnFavorite{right:5px;top:5px}
.btnShop{right:5px;top:2px}
.btnAdd{right:5px;top:2px}
.btnTreeSetting{left:5px;top:5px}
.btnShare{right:5px;top:5px}

.combination .icon{display:inline-block;text-align:center;background-image:url('/static/images/common/layout_sprite01.png');background-repeat:no-repeat;background-size:360px auto;pointer-events:none}
.combination .icon.btnMonth{width:23px;height:24px;background-position:-175px -85px}
.combination .icon.btnDay{width:23px;height:24px;background-position:-205px -85px}
.combination .icon.btnMonths{width:23px;height:24px;background-position:-175px -115px}
.combination .icon.btnDays{width:23px;height:24px;background-position:-205px -115px}
.combination .icon.btnEdit{width:27px;height:28px;background-position:-235px -85px}
.combination .icon.dateY{width:6px;height:6px;background-position:-235px -70px}
.combination .icon.benefitS{width:18px;height:18px;background-position:-235px -120px}
.combination .icon.benefitH{width:18px;height:18px;background-position:-260px -120px}
.combination .icon.semSuc{width:18px;height:18px;background-position:-275px -85px}
.combination .icon.semOne{width:18px;height:18px;background-position:-300px -85px}
.combination .icon.semLoc{width:18px;height:18px;background-position:-325px -85px}

/*.orange 추가*/
#header.orange .icon{display:inline-block;background-image:url('/static/images/common/layout_sprite01.png')}
#header.orange .icon.shop{width:26px;height:29px;background-position:-260px -25px}

#header .icon.menu{width:20px;height:17px;background-position:0 -25px}
#header .icon.menu2{width:24px;height:18px;background-position:-225px 0}
#header .icon.home{width:22px;height:21px;background-position:0 0}
#header .icon.prev{ width:20px;height:16px;background-position:-75px -25px}
#dialog .icon.close,
#header .icon.close{width:17px;height:17px;background-position:-125px -25px}
#header .icon.search{width:20px;height:21px;background-position:-25px -25px}
#header .icon.office{width:28px;height:29px;background-position:-230px -25px}
#header .icon.shop{width:26px;height:29px;background-position:-260px -25px}
#header .icon.cart{width:28px;height:22px;background-position:-200px -25px}
#header .icon.favorite{width:25px;height:21px;background-position:-100px -25px}
#header .icon.treeSetting{width:24px;height:22px;background-position:-150px 0}
#header .icon.plus{width:26px;height:26px;background-position:-175px -50px}
#header .icon.share2{width:22px;height:23px;background-position:-275px 0}

#header.searchSlide .icon.close{width:17px;height:17px;background-position:-150px -25px}
#header.searchSlide .row.search .inputSearch input{height:35px;padding-right:39px;border:none}

#header .header-title{float:left;padding-top:13px}
#header .row.search{display:block;position:relative;margin-top:-4px;padding:0 15px 0 50px}
#header .row.search .inputSearch{display:block}
#header .row.search .inputSearch input{height:35px;padding-right:69px;border:none}
#header .row.search .inputSearch input::-webkit-search-decoration,
#header .row.search .inputSearch input::-webkit-search-cancel-button,
#header .row.search .inputSearch input::-webkit-search-results-button,
#header .row.search .inputSearch input::-webkit-search-results-decoration{display:none}
#header .row.search .btnSearch{top:0;right:20px;width:30px;height:35px;padding:0}
#header .row.search .btnSearch .icon.search{background-position:-50px -25px}
#header .row.search .btnDelete{top:0;right:50px;width:29px;height:35px;padding:0}
#header .row.search .icon.delete{width:17px;height:17px;border-radius:50%;background-color:#dcdcdc;background-image:none}
#header .row.search .icon.delete:after{content:'';display:inline-block;width:6.5px;height:6.5px;margin-top:5.25px;background-size:360px auto;background-image:url('/static/images/common/icon_sprite.png');background-position:-230px -25px}

/* 검색 150615 */
#header.searchSlide .row.search{display:block;position:relative;margin-top:-4px;padding:0 50px 0 15px}
#header.searchSlide .row.search .btnSearch{right:55px}
#header.searchSlide .row.search .btnDelete{right:85px} 

.office #header{background-color:#64d0f3}
.tree #header{background-color:#fff}
.tree #header .btnLevel{position:relative;display:inline-block;padding-right:20px;font-weight:bold;font-size:20px;color:#333}
.tree #header .btnLevel:after{content:'';display:inline-block;position:absolute;right:0;top:13px;border-left:4px solid transparent;border-right:4px solid transparent;border-bottom:0;border-top:5px solid #333;pointer-events:none}

section.gate #header{padding:0 20px;height:60px}
section.gate #header .logo{float:left;padding-top:10px}
section.gate #header .logo a{display:block;width:51px;height:43px;overflow:hidden}
section.gate #header .navMember{float:right}
section.gate #header .groupBtn{float:right;padding-top:12px}
section.gate #header .btn{display:inline-block;position:relative;padding-top:19px;vertical-align:middle}
section.gate #header .btn + .btn{margin-left:15px}
section.gate #header .btn:after{content:'';display:inline-block;position:absolute;left:50%;right:0;top:0;background-image:url('/static/images/common/layout_sprite.png');background-repeat:no-repeat;background-size:360px auto}
section.gate #header .btnLogin:after{width:17px;height:17px;margin-left:-8px;background-position:-25px 0}
section.gate #header .btnJoin:after{width:15px;height:18px;margin-left:-8px;background-position:-50px 0}
section.gate #header .btn span{color:#000;font-size:11px}

.office #header,
section.shop #header{text-align:center}

#body{min-height:100%;padding-top:50px;box-sizing:border-box}
#body.popup{background-color:#fff}
#body.snbOn{padding-bottom:71px}
#body.footerOn{padding-bottom:121px}
#body.snbOn.footerOn{padding-bottom:181px}
.container #body{padding-bottom:40px}
#body .contents{min-height:100%}

/* Footer */
.snbOn #footer{bottom:60px}
#footer .fixContent{height:111px;padding-top:15px;color:#666;text-align:center;box-sizing:border-box;background-color:#e4e5e7;box-sizing:border-box}
#footer nav{font-size:0}
#footer nav a{position:relative;margin-left:10px;padding-left:10px;font-size:12px}
#footer nav a:after{content:'';display:inline-block;position:absolute;left:0;top:2px;height:10px;border-left:1px solid #c9c9c9}
#footer nav a:first-child{padding-left:0;margin-left:0}
#footer nav a:first-child:after{content:none}
#footer address{margin-top:7px;font-size:0}
#footer address div span{position:relative;margin-left:5px;padding-left:5px;font-size:11px}
#footer address div span:after{content:'';display:inline-block;position:absolute;left:0;top:1px;height:10px;border-left:1px solid #c9c9c9}
#footer address div span:first-child{padding-left:0;margin-left:0}
#footer address div span:first-child:after{content:none}
#footer .copy{font-size:10px;margin-top:8px}
#footer .copy span{font-family:verdana, Arial;color:#666!important}

/* Gate Main */
.gateMain #header{height:50px;background-color:#fff;box-sizing:border-box}
.gateMain #header .btnMenu{left:8px;top:6px}
.gateMain #header .btns{position:absolute;right:16px;top:8px}
.gateMain #header .btns span{position:relative;display:inline-block;margin-left:10px}
.gateMain #header .btns span:after{content:'';display:inline-block;position:absolute;left:50%;top:0;background-image:url('/static/images/common/layout_sprite.png');background-size:360px auto;background-repeat:no-repeat;}
.gateMain #header .btns .login:after{width:16px;height:17px;margin-top:1px;margin-left:-8px;background-position:-25px 0}
.gateMain #header .btns .logout:after{width:19px;height:17px;margin-left:-8px;margin-top:1px;background-position:-250px 0}
.gateMain #header .btns .join:after{width:21px;height:19px;margin-left:-9px;background-position:-50px 0}
.gateMain #header .btns span a{display:block;padding-top:22px;font-size:10px;color:#000;position:relative;z-index:1}

.gateMain .preload{position:absolute;left:0;top:0;right:0;bottom:0}
.gateMain .preload .item{height:100%}
.gateMain .preload .item a{display:block;width:100%;height:100%}
.gateMain .preload .verticalCenter{height:100%;min-height:inherit}

.gateMain #body{padding:50px 0 55px}
.gateMain #body .slider{padding-top:80.55555555555556%;overflow:hidden}
.gateMain #body .slider .listSlide,
.gateMain #body .slider .slick-list,
.gateMain #body .slider .slick-track{height:100%}
.gateMain #body .slider .slick-slide{padding-top:0}
.gateMain #body .slider .item{text-align:center}
.gateMain #body .slider .item a{height:100%;color:#fff;font-size:22px;background-repeat:no-repeat;background-size:cover;box-sizing:border-box}
.gateMain #body .slider .item a.press,
.gateMain #body .slider .item a:active{opacity:1}
.gateMain #body .slider .item a .summary{opacity:1;-webkit-transition:opacity .2s;transition:opacity .2s}
.gateMain #body .slider .item a:active .summary{opacity:.6}
.gateMain #body .slider .item a .verticalCenter{height:100%;min-height:inherit}
.gateMain #body .slider .item a .content{box-sizing:border-box}
.gateMain #body .slider .item a .content .text{position:relative;padding-top:75px;padding-left:10px;padding-right:10px;line-height:1.3}
.gateMain #body .slider .item a .content .text:after{content:'';display:inline-block;position:absolute;left:50%;top:0;width:65px;height:54px;margin-left:-33px;background-image:url('/static/images/common/logo_white_129x108.png');background-size:65px auto;background-repeat:no-repeat}
.gateMain #body .slider .item a .content .summary{display:inline-block;height:32px;margin-top:14px;font-size:14px;padding:4.5px 25px 0;border:2px solid #fff;border-radius:20px;box-sizing:border-box}
.gateMain #body .slider .item.overview a{background-image:url('/static/images/common/company.jpg')}
.gateMain #body .slider .item.socialShare a{background-image:url('/static/images/common/company_head_bg_05.jpg')}
.gateMain #body .slider .item.seminars a{background-image:url('/static/images/common/company_head_bg_08.jpg')}
.gateMain #body .slider .item.vision a{background-image:url('/static/images/common/company_head_bg_03.jpg')}
.gateMain #body .slider .item.years a{background-image:url('/static/images/common/years.png')}
.gateMain #body .slider .item.years a .content .text:after{content:none}
.gateMain #body .slider .indicator{text-align:right;padding-right:15px}
.gateMain #body .slider .indicator li{bottom:0}
.gateMain #body .slider .indicator li button{font:0/0 a;position:relative;bottom:25px;width:10px;height:10px;margin-left:3px;vertical-align:top;background-color:transparent;border:2px solid #fff;border-radius:50%;box-sizing:border-box}
.gateMain #body .slider .indicator li.slick-active button,
.gateMain #body .slider .indicator li.active button{background-color:#fff;border:none}

.gateMain #nav{position:fixed;left:0;bottom:0;right:0}
.gateMain #nav:after{content:'';display:block;clear:both}
.gateMain #nav a{display:block;position:relative;float:left;width:50%;height:55px;padding:18px 0 0 20px;font-size:17px;color:#fff;background-color:#64d0f3;font-weight:bold;box-sizing:border-box}
.gateMain #nav a:first-child{background-color:#00b6f0}
.gateMain #nav a:after{content:'';display:inline-block;position:absolute;right:15px;top:22px;width:8px;height:13px;background-image:url('/static/images/common/icon_sprite.png');background-position:-205px 0;background-size:360px auto;background-repeat:no-repeat}

.gateMain .quick{display:table;width:100%;border-bottom:1px solid #e2e2e2}
.gateMain .quick span{display:table-cell;width:33.3333%;text-align:center;box-sizing:border-box;vertical-align:top}
.gateMain .quick span:first-child a{ border-left:none}
.gateMain .quick span a{display:table;position:relative;width:100%;height:115px;padding-top:78px;font-size:14px;color:#333;border-left:1px solid #e2e2e2;background-color:#fff;box-sizing:border-box}
.gateMain .quick span a:after{content:'';display:inline-block;position:absolute;left:50%;top:19px;background-image:url('/static/images/common/icon_gate_main.png');background-size:360px auto;background-repeat:no-repeat;pointer-events:none}
.gateMain .quick .marketing a:after{width:39px;height:49px;margin-left:-20px;background-position:0 0}
.gateMain .quick .seminar a:after{width:39px;height:50px;margin-left:-20px;background-position:-50px 0}
.gateMain .quick .onair a:after{width:53px;height:51px;margin-left:-26.5px;background-position:-100px 0}
.gateMain .quick span a .title{ display:table-cell;height:37px;padding:0 2px;font-weight:400;line-height:1.1;vertical-align:middle;}

.gateMain .row.info{display:table;width:100%;table-layout:fixed;background-color:#f1f2f4}
.gateMain .row.info h2{margin-bottom:4px;font-size:13px;color:#333}
.gateMain .row.info h2 a{display:block;font-size:13px;color:#333}
.gateMain .row.info section{display:table-cell;box-sizing:border-box}
.gateMain .row.info .notice{width:66%;padding:20px}
.gateMain .row.info .notice .content li{height:20px;white-space:nowrap}
.gateMain .row.info .notice .content li a{display:inline-block;max-width:100%;height:20px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:12px;color:#666;}
.gateMain .row.info .notice .content li.new{position:relative;padding-right:20px}
.gateMain .row.info .notice .content li.new:after{content:'';display:inline-block;width:16px;height:16px;margin-top:3px;vertical-align:top;background-image:url('/static/images/common/icon_new.png');background-repeat:no-repeat;background-size:360px auto;background-position:0 0}
.gateMain .row.info .happyCenter{width:34%;padding:20px 0}
.gateMain .row.info .happyCenter .tel{font-size:20px;color:#00b6f0;line-height:1.2}
.gateMain .row.info .happyCenter .mail{font-size:12px;color:#00b6f0;line-height:1.2}
.gateMain .row.info .happyCenter .fax{font-size:14px;color:#00b6f0;line-height:1.2}

/* Shop,Office */
.shop #footer .fixFoot{position:absolute;background-color:#e4e5e7}
.shop .snbOn #footer .fixFoot{bottom:61px;height:45px;text-align:center;box-sizing:border-box} /* 임시 */

/* Tab Bar (SNB) */
#snb{position:fixed;left:0;bottom:0;right:0;z-index:100;display:table;width:100%;background-color:#fff;border-top:1px solid #e1e1e6}
#snb span{display:table-cell;width:20%;text-align:center}
#snb span a{position:relative;display:block;height:60px;padding-top:38px;font-size:10px;box-sizing:border-box}
#snb span a:active,
#snb span.active a{color:#06a7e2}
#snb span a:after{content:'';display:block;position:absolute;left:50%;top:14px;background-image:url('/static/images/common/layout_sprite.png');background-size:360px auto;background-repeat:no-repeat}

#snb.officeSnb span a:active,
#snb.officeSnb span.active a{color:#64d0f3}
#snb.officeSnb span a:after{background-image:url('/static/images/common/layout_sprite01.png')}

#snb .home a:after{width:22px;height:22px;margin-left:-11px;background-position:0 -50px}
#snb .order a:after{width:20px;height:21px;margin-left:-10px;background-position:-25px -50px}
#snb .shiping a:after{width:32px;height:20px;margin-left:-16px;background-position:-50px -50px}
#snb .balance a:after{width:25px;height:22px;margin-left:-12px;background-position:-85px -50px}
#snb .cart a:after{width:23px;height:20px;margin-left:-12px;background-position:-125px -50px}
#snb .cart .count{line-height:1;position:absolute;left:50%;top:50%;z-index:1;min-width:17px;width:auto;height:17px;padding:0 2px;text-align:center;border-radius:50%;background-color:#f9a04f;color:#fff;font-size:11px;font-family:Arial, sans-serif;font-weight:bold;box-sizing:border-box;margin:-26px 0 0 4px;
	display:-webkit-box;display:-webkit-flex;display:flex;-webkit-box-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-webkit-align-items:center;align-items:center;
}
#snb .tree a:after{width:23px;height:21px;margin-left:-11px;background-position:-25px -100px}
#snb .benefit a:after{width:23px;height:21px;margin-left:-11px;background-position:-50px -100px}
#snb .lowerSales a:after{width:26px;height:22px;margin-left:-12.5px;background-position:-75px -100px}
#snb .mySchedule a:after{width:20px;height:21.5px;margin-left:-10px;background-position:-125px -100px}

#snb .record a:after{width:23px;height:21px;margin-left:-12px;background-position:-50px -150px}
#snb .notice a:after{width:24px;height:19px;margin-left:-12px;background-position:-75px -150px}

#snb .home a:active:after,
#snb .home.active a:after{background-position:0 -75px}
#snb .order a:active:after,
#snb .order.active a:after{background-position:-25px -75px}
#snb .shiping a:active:after,
#snb .shiping.active a:after{background-position:-50px -75px}
#snb .balance a:active:after,
#snb .balance.active a:after{background-position:-85px -75px}
#snb .cart a:active:after,
#snb .cart.active a:after{background-position:-125px -75px}
#snb .tree a:active:after,
#snb .tree.active a:after{background-position:-25px -125px}
#snb .benefit a:active:after,
#snb .benefit.active a:after{background-position:-50px -125px}
#snb .lowerSales a:active:after,
#snb .lowerSales.active a:after{background-position:-75px -125px}
#snb .mySchedule a:active:after,
#snb .mySchedule.active a:after{background-position:-125px -125px}

#snb .record a:active:after,
#snb .record.active a:after{background-position:-50px -175px}
#snb .notice a:active:after,
#snb .notice.active a:after{background-position:-75px -175px}

/* gnb */
.nav_lang_en_us #gnb .myPage li.notice a{letter-spacing:-1px}
.nav_lang_en_us #gnb .myPage li.low a, 
.nav_lang_en_us #gnb .myPage li.benefit a, 
.nav_lang_en_us #gnb .myPage li.delivery a{line-height:12px;padding-top:43px}
.nav_lang_en_us #gnb .myPage li.cart a{line-height:12px;padding-top:44px}
.nav_lang_en_us #snb span a{line-height:18px}
.nav_lang_en_us #snb span.benefit a,
.nav_lang_en_us #snb span.lowerSales a{line-height:9px;top:-5px}


/* 가로모드 (iPhone4 기준이상) */
@media screen and (min-width:480px){
    .nav_lang_en_us #gnb .myPage li.notice a{letter-spacing:0 !important}

    .nav_lang_en_us #gnb .myPage li.low a, 
    .nav_lang_en_us #gnb .myPage li.benefit a, 
    .nav_lang_en_us #gnb .myPage li.delivery a,
    .nav_lang_en_us #gnb .myPage li.cart a{line-height:45px !important;padding-top:35px !important}
}

/* Nexus 5X ~ */
@media screen and (min-width:412px){
    .nav_lang_en_us #gnb .myPage li.delivery a{line-height:45px !important;padding-top:35px !important}
    .nav_lang_en_us #gnb .myPage li.cart a{line-height:45px !important;padding-top:35px !important}
}
.nav_lang_es_mx #gnb .info.nonmember .btns .btn{min-width:90px;width:auto;padding:0 10px;}

간단 설명


 

'Static > style' 카테고리의 다른 글

member.css  (0) 2021.02.19
media_query.css  (0) 2021.02.19
jquery.auto-complete.css  (0) 2021.02.19
home.css  (0) 2021.02.19
help.css  (0) 2021.02.19

간단 설명


.autocomplete-suggestions{text-align:left;cursor:default;border:1px solid #ccc;border-top:0;background:#fff;box-shadow:-1px 1px 3px rgba(0,0,0,.1);position:absolute;display:none;z-index:9999;max-height:254px;overflow:hidden;overflow-y:auto;box-sizing:border-box}
.autocomplete-suggestion{position:relative;padding:0 .6em;line-height:23px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-size:1.02em;color:#333}
.autocomplete-suggestion b{font-weight:normal;color:#1f8dd6}
.autocomplete-suggestion.selected{background:#f0f0f0}

'Static > style' 카테고리의 다른 글

media_query.css  (0) 2021.02.19
layout.css  (0) 2021.02.19
home.css  (0) 2021.02.19
help.css  (0) 2021.02.19
dev_styles.css  (0) 2021.02.19

간단 설명


@charset "UTF-8";

.icon.menu{display:inline-block;width:20px;height:17px;background-position:0 -25px;background-image:url('/static/images/common/layout_sprite.png')}
.noTouchmove .company{height:100vh;overflow:auto;-webkit-overflow-scrolling:touch}
.company::-webkit-scrollbar{display:none}

.company > .layout{position:fixed;left:0;top:0;z-index:10;width:100%;height:291px;box-sizing:border-box;overflow:hidden}
.company > .layout .btn{position:absolute;top:3px;padding:10px}
.company > .layout .btnPrev{left:8px;top:7px}
.company > .layout .btnMenu{left:8px;top:7px}
.company > .layout .btnSnb{display:none;right:8px;top:4px}
.company > .layout .btn .icon{vertical-align:top}
.company > .layout .btn .menu{width:23px;height:18px;background-position:-205px -50px}

/* #492 변경*/
.company > .layout .controller span{display:inline-block;position:absolute;bottom:15px}
.company > .layout .controller span:after{content:'';display:inline-block;position:absolute;top:0;width:62px;height:7px;background-image: url('/static/images/common/icon_sprite.png');background-repeat:no-repeat;background-size: 360px auto}
.company > .layout .controller .prev{left:15px}
.company > .layout .controller .prev:after{left:0;background-position:-150px -35px}
.company > .layout .controller .next{right:15px}
.company > .layout .controller .next:after{right:0;background-position:-150px -25px}
.company > .layout .controller span a{display:inline-block;min-width:62px;padding-top:11px;font-size:12px;color:rgba(255,255,255,.8);text-align:center}

.company .section{padding-top:291px;padding-bottom:60px}
.company .header{position:fixed;top:0;right:0;left:0;z-index:4;overflow:hidden;height:291px;padding-top:0;padding-bottom:45px}
.company .header .slick-slider,
.company .header .slick-list,
.company .header .slick-track{height:100%;padding-bottom:45px;box-sizing:content-box}
.company .header .slider{overflow:visible}
.company .layout .slick-disabled{display:none !important}
.company .header .image{background-repeat:no-repeat;background-position:50% 50%;background-size:cover}
.company .header [data-body-id="intro"] .image{background-image:url('/static/images/common/company_head_bg_01.jpg')}
.company .header [data-body-id="history"] .image{background-image:url('/static/images/common/company_head_bg_02.jpg')}
.company .header [data-body-id="vision"] .image{background-image:url('/static/images/common/company_head_bg_03.jpg')}
.company .header [data-body-id="motto"] .image{background-image:url('/static/images/common/company_head_bg_04.jpg')}
.company .header [data-body-id="social"] .image{background-image:url('/static/images/common/company_head_bg_05.jpg')}
.company .header [data-body-id="rightpeople"] .image{background-image:url('/static/images/common/company_head_bg_06.jpg')}
.company .header [data-body-id="marketing"] .image{background-image:url('/static/images/common/company_head_bg_07.jpg')}
.company .header [data-body-id="seminar"] .image{background-image:url('/static/images/common/company_head_bg_08.jpg')}
.company .header [data-body-id="brand"] .image{background-image:url('/static/images/common/company_head_bg_09.jpg')}
.company .header .slider .content{position:absolute;left:0;right:0;top:0;z-index:1;text-align:center;-webkit-transform:translateY(118px);transform:translateY(118px)}
.company .header .slider .content .logo{display:inline-block;position:absolute;left:50%;top:-65px;width:51px;height:44px;margin-left:-25px;background-image: url('/static/images/common/logo_white_102x87.png');background-repeat:no-repeat;background-size: 51px auto}
.company .header .slider .content h1,
.company .header .slider .content h2{position:relative;z-index:1;opacity:1;padding-bottom:10px}
.company .header .slider .content h1{font-size:30px;color:#fff;line-height:1.2}
.company .header .slider .content h2{margin-top:9px;font-size:18px;color:#fff;font-weight:bold}
.company .header .slider .content h1:after{content:'';display:inline-block;position:absolute;left:50%;bottom:0;width:26px;margin-left:-13px;border-top:1px solid #fff}
.company .header .clone{color:#fff;font-size:13px;opacity:0;transform:translateY(100%)}
.company .header .clone br{display:none}
.company .header .image{position:absolute;top:0;bottom:0;left:0;width:100%}
.company .header .image img{position:absolute;top:0;left:50%;width:auto;height:100%;-webkit-transform:translateX(-50%);transform:translateX(-50%)}
.company .header .tab{position:absolute;top: 100%;left:0;z-index:5;width:100%}
.company .body h2.hide + .content{margin-top:30px}

.transition .company .header,
.transition .company .layout,
.transition .company .header .content,
.transition .company .header .content h1,
.transition .company .header .content h2,
.transition .company .header .content .logo,
.transition .company .header .content .clone{
	-webkit-transition:height 0.2s, opacity 0.2s, -webkit-transform 0.2s;
	transition:height 0.2s, opacity 0.2s, transform 0.2s;
}

.company.app .layout .btnPrev{top:42px}
.company.app .layout .btnSnb{top:38px}
.company.app .layout nav span{bottom:15px}
.company.app .header{padding-top:291px}
.company.app .header .slider > div{top:53px}

.company .video{position: relative}
.company #content{position:relative}
.company .tab.dark{display:none}
.company .slick-active .tab.dark{display:table}
.company .slick-active .tab.dark.scroll{display:block}
.company .tab.dark span.active a{color:#64d0f4;border-bottom:3px solid #64d0f4}
.company .verticalLine{position:relative;padding-left:19px}
.company .verticalLine:after{content:'';position:absolute;left:0;top:2px;width:4px;height:28px;background-color:#333}

.company .marketing,
.company .socialShare,
.company .motto,
.company .vision,
.company .history{padding-top:336px}

/* 개요 */
.company .section.intro .content > p,
.company .section.intro .content .video{margin-top:28px}

.company .tabContent{margin-top:30px}
.history .tabContent p{margin-top:5px}
.history .tabContent .record .list{overflow:hidden}
.history .tabContent .record .list li{position:relative}
.history .tabContent .record .list li .month{position:absolute;left:0;top:0;padding-top:8px;line-height:1.3;font-size:12px;font-weight:bold}
.history .tabContent .record .list li .month:after{content:'';display:inline-block;position:absolute;left:24px;top:12px;z-index:1;width:6px;height:6px;border-radius:50%;background-color:#707780}
.history .tabContent .record .list li.etc .month:after{content:none}
.history .tabContent .record .list li .content{position:relative;padding-left:40px;line-height:1.4;font-size:12px;color:#333}
.history .tabContent .record .list li .content:after{content:'';display:inline-block;position:absolute;left:26px;top:18px;height:100%;border-left:1px solid #c9c9c9}
.history .tabContent .record .list li .content li{padding-top:8px}
.history .tabContent .record .list.primary{margin:15px 0 25px}
.history .tabContent .record .list.primary li .month{font-size:14px}
.history .tabContent .record .list.primary li .month:after{background-color:#00b6f0}
.history .tabContent .record .list.primary li .content{font-size:14px}
.history .tabContent .record .list.primary li .content:after{border-left:1px solid #b2e9fa}
.history .tabContent .record .list.primary li:last-child .content:after{display:none}

.company .section.vision{font-size:14px}
.company .section.vision hr{margin:30px 0}
.company .section.vision .content:nth-of-type(1){padding-top:0}
.company .section.vision .content p{margin-top:20px}
.company .section.vision .content .color1{color:#d15555}
.company .section.vision .content .color2{color:#3b73d9}
.company .section.vision .content .color3{color:#538a13}
.company .section.vision hr{margin:30px 0}

.company .motto .tabContent{margin-top:30px}
.company .motto .tabContent hr{margin:30px 0}
.company .motto .tabContent .content{margin-top:30px}
.company .motto .tabContent .content small{display:block;margin-top:2px;font-size:15px}
.company .motto .tabContent .content > p{margin-top:20px}
.company .motto .tabContent .video{position:relative;margin-top:7px}
.company .motto .verticalLine:after{height:80px;top:5px}

.company .socialShare{font-size:14px}
.company .socialShare .verticalLine:after{height:93%;top:5px}
.company .socialShare .green{color:#78b17d}
.company .socialShare .violet{color:#7a5f94}
.company .socialShare .tab{margin-bottom:30px}
.company .socialShare .tabContent hr{margin:30px 0}
.company .socialShare .tabContent .content{margin-top:30px}
.company .socialShare .tabContent .content small{display:block;margin-top:3px;font-size:15px}
.company .socialShare .tabContent .content .dash{margin-top:10px}
.company .socialShare .tabContent .content .dash li{margin-top:5px}
.company .socialShare .tabContent .content .dash li:first-child{margin-top:0}
.company .socialShare .tabContent.growth .image{display:inline-block;width:229px;height:219px}
.company .socialShare .tabContent figure{margin:13px 0 15px}
.company .socialShare .tabContent figure p{margin-top:4px;font-size:9px}
.company .socialShare .tabContent .gallery{margin-top:15px;padding:15px}
.company .socialShare .tabContent .gallery .body small{margin-top:0;font-size:12px;color:#7f8792}
.company .socialShare .tabContent .slider{min-height:150px}
.company .socialShare .tabContent .slider .listSlide{position:static}
.company .socialShare .tabContent .slider .listSlide .item .image{overflow:hidden;text-align:center;vertical-align:middle}
.company .socialShare .tabContent .slider .listSlide .item .image img{display:inline-block}
.company .socialShare .tabContent .slider .listSlide .item .caption{margin-top:10px;}
.company .socialShare .tabContent .slider .controls{top:0;padding-top:21%}
.company .socialShare .tabContent.contribution .content > p{margin-top:5px}
.company .socialShare .tabContent.contribution .video{margin-top:16px}

.company .tabContent .slider .listSlide{display:none;position:static}
.company .tabContent .slider .listSlide.slick-slider{display:block} 

.company .recruit hr{margin:30px 0}
.company .recruit .content{margin-top:20px}
.company .recruit .content .body,
.company .recruit .content p{margin-top:5px}
.company .recruit .content .dash{line-height:1.8}
.company .recruit .iconList li{margin-top:20px}
.company .recruit .iconList li .head{position:relative;margin-bottom:15px;padding-left:72px;line-height:1.2}
.company .recruit .iconList li .head:after{content:'';display:inline-block;position:absolute;left:0; background-image:url('/static/images/common/recruit_icons.png');background-repeat:no-repeat;background-size:360px auto}
.company .recruit .iconList li .head.icon01:after{width:48px;height:52px;top:0;background-position:0 0}
.company .recruit .iconList li .head.icon02:after{width:45px;height:48px;top:0;background-position:-50px 0}
.company .recruit .iconList li .head.icon03:after{width:52px;height:44px;top:3px;background-position:-100px 0}
.company .recruit .iconList li .head.icon04:after{width:46px;height:38px;top:6px;left:5px;background-position:-155px 0}
.company .recruit .iconList li p{margin-top:5px}

.company .marketing .guide{margin:15px 0;padding:20px 5px;text-align:center}
.company .marketing .guide h3{margin-bottom:5px}
.company .marketing .ratings .plans{padding:}
.company .marketing .ratings .plans .rank{position:relative;min-height:80px}
.company .marketing .ratings .plans .rank:before{content:'';display:inline-block;position:absolute;left:40px;top:0;height:130%;border-left:1px solid #c9c9c9}
.company .marketing .ratings .plans .rank + .rank{margin-top:15px}
.company .marketing .ratings .plans .rank:last-child:before{content:none}
.company .marketing .ratings .plans .rank:after{content:'';display:block;clear:both}
.company .marketing .ratings .plans .rank .head{width:80px;height:80px;padding:28px 0 0;position:absolute;left:0;top:0;line-height:1.4;font-size:14px;color:#333;text-align:center;background-color:#fff;border-radius:50%;box-sizing:border-box}
.company .marketing .ratings .plans .rank .head strong{display:block}
.company .marketing .ratings .plans .rank .content{position:relative;float:right;width:70%;min-height:87px;margin-top:2px;padding:0 20px 15px;background-color:#fff;border:1px solid #e2e2e2;border-radius:2px;box-sizing:border-box}
.company .marketing .ratings .plans .rank .content p{margin-top:13px;font-size:13px;color:#333}
.company .marketing .ratings .plans .rank .content:before,
.company .marketing .ratings .plans .rank .content:after{content:'';display:inline-block;position:absolute;top:30px;border-top:6px solid transparent;border-bottom:6px solid transparent;border-left:0}
.company .marketing .ratings .plans .rank .content:before{left:-10px;border-right:10px solid #e2e2e2}
.company .marketing .ratings .plans .rank .content:after{left:-8px;border-right:10px solid #fff}
.company .marketing .ratings .plans .rank.color1 .head{border:3px solid #c6edfb}
.company .marketing .ratings .plans .rank.color2 .head{border:3px solid #96def6}
.company .marketing .ratings .plans .rank.color3 .head{border:3px solid #6ed4f5}
.company .marketing .ratings .plans .rank.color4 .head{border:3px solid #59d0f6}
.company .marketing .ratings .plans .rank.color5 .head{border:3px solid #00b6f0}

.company .marketing .benefit section + section{margin-top:20px}
.company .marketing .benefit section .bullet{margin-top:5px}
.company .marketing .benefit .table tbody td{text-align:center}
.company .marketing .benefit .board .list li .content{padding:15px;font-size:13px;color:#333}
.company .marketing .benefit .board .list li .content .box.primary{margin-top:15px;padding:12px 14px;font-size:12px}
.company .marketing .promotion section{margin-top:25px}
.company .marketing .promotion .table{margin-top:5px}
.company .marketing .promotion .table tbody th, 
.company .marketing .promotion .table tbody td{padding:10px}
.company .marketing .promotion .box.default{margin-top:15px;padding:15px}
.company .marketing .promotion .box.default .dash li{margin-top:4px;font-size:13px;color:#333}

.company .seminars .body{padding-top:30px}
.company .seminars .body .summary{margin-top:15px}
.company .seminars .body section{margin:25px 0 30px}
.company .seminars .body section .text17{margin-bottom:10px}
.company .seminars .body section .box.primary{margin:12px 0;padding:10px;font-size:13px}
.company .seminars .body section .bullet{margin-bottom:5px}
.company .seminars .body section .color1{color:#59b2c2}
.company .seminars .body section .color2{color:#f9993b}
.company .seminars .body section .color3{color:#5bc28d}
.company .seminars .body section .color4{color:#8781bd}

.company .brand .body{position:relative}
.company .brand .body section{margin:10px 0 30px}
.company .brand .body section ul li{position:relative;margin-top:5px;padding-left:9px;font-size:12px;color:#333}
.company .brand .body section ul li:after{content:'';display:block;width:3px;height:3px;position:absolute;left:0;top:7px;background-color:#707780}
.company .brand .body section .image{margin-top:15px}
.company .brand .marks{position:absolute;right:15px;top:5px;font-size:11px}
.company .brand .marks > span{position:relative;padding-left:10px;margin-left:3px}
.company .brand .marks span:first-child:after{content:none}
.company .brand .marks span:after{content:'';display:inline-block;position:absolute;left:0;top:4px;height:9px;border-left:1px solid #e2e2e2}
.company .brand .mark{display:inline-block;width:8px;height:8px;border-radius:50%;font:0/0 a;box-sizing:border-box;vertical-align:top;-webkit-transform:translateY(50%);transform:translateY(50%)}
.company .brand .mark.orange{background-color:#f9993b}
.company .brand .mark.green{background-color:#a1b404}
.company .brand .mark.violet{background-color:#8958fe}

.company .brand .consTit{padding:10px;font-size:14px}
.company .brand .body section dl{margin-top:16px;line-height:20px;color:#333}
.company .brand .body section dl dt{float:left;display:inline-block;margin-top:2px;font:0/0 a;text-align:center;width:28px;height:26px;background-image:url('/kr/m/static/images/common/icon_brand.png');background-repeat:no-repeat;background-size:250px auto;pointer-events:none}
.company .brand .body section dl dd{margin-left:34px;font-size:14px}
.company .brand .body section dl dd p:first-child{font-weight:bold;font-size:16px}
.company .brand .body section dl dt.health{background-position:0 0}
.company .brand .body section dl dt.skincare{background-position:-30px 0}
.company .brand .body section dl dt.makeup{background-position:-60px 0}
.company .brand .body section dl dt.hair{background-position:-90px 0}
.company .brand .body section dl dt.living{background-position:-120px 0}
.company .brand .body section dl dt.food{background-position:-150px 0}
.company .brand .body section dl dt.fashion{background-position:-180px 0}

.company .slider .controls button{-webkit-transform:translateZ(0);transform:translateZ(0)}

'Static > style' 카테고리의 다른 글

layout.css  (0) 2021.02.19
jquery.auto-complete.css  (0) 2021.02.19
help.css  (0) 2021.02.19
dev_styles.css  (0) 2021.02.19
base.css  (0) 2021.02.19

간단 설명


@charset "UTF-8";

#body{padding-bottom:20px}
.qnaList .btnMore,
.faqList .btnMore{margin:10px 15px 0}

/* 세미나 정보 */
.seminarInfo .tab{table-layout:auto}
.seminarInfo .tabContent{padding-top:15px}

.seminarInfo .board .list .head h2{font-size:15px;color:#333;font-weight:bold}
.seminarInfo .board .list .head a{position:absolute;right:15px;top:15px;padding-right:13px;font-size:12px;color:#666}
.seminarInfo .board .list .head a:after{content:'';display:inline-block;position:absolute;right:0;top:6px;width:5px;height:8px;background-image:url('/static/images/common/icon_sprite.png');background-position:-195px 0;background-repeat:no-repeat;background-size:360px auto}
.seminarInfo .board .list .content .box{position:relative;margin-top:13px;padding:8px 10px;word-wrap:break-word;word-break:break-all}
.seminarInfo .board .list .content .box .btn{position:absolute;right:15px;top:13px}

.seminarInfo .board .list.oneday .content em{color:#59b2c2}
.seminarInfo .board .list.local .content em{color:#5bc28d}
.seminarInfo .board .list.success .content em{color:#fa993b}
.seminarInfo .guide{margin-top:12px}
.seminarInfo .guide li{line-height:1.3}
.seminarInfo .guide .bullet:after{top:6px}

.seminarInfo .edu .box.center{padding:0 15px 18px;font-size:12px;color:#666}
.seminarInfo .edu .box.center h2{font-size:17px;font-weight:bold;margin-bottom:3px;color:#333}
.seminarInfo .edu .box.default{margin-bottom:12px;padding:15px 9px;font-size:13px;color:#333;background-color:#fff}
.seminarInfo .edu .box.default h3{font-size:14px;color:#333;margin-bottom:5px;font-weight:bold}
.seminarInfo .edu .box.default hr{margin:15px 0}
.seminarInfo .edu .box.default .content{padding:0 6px;color:#666}
.seminarInfo .edu .box.default .image{margin:10px 0}

.seminarInfo .onlineEdu .box{position:relative;margin-bottom:6px;font-size:12px;color:#666;background-color:#fff}
.seminarInfo .onlineEdu .box:after{content:'';display:inline-block;position:absolute;right:10px;width:80px;height:80px;background-image:url('/static/images/common/icon_edu_guide.png');background-repeat:no-repeat;background-size:165px auto}
.seminarInfo .onlineEdu .box.onair:after{background-position:0 0;top:20px}
.seminarInfo .onlineEdu .box.realTime:after{background-position:-85px 0;top:13px}
.seminarInfo .onlineEdu .box h2{font-size:16px;color:#333;font-weight:bold}
.seminarInfo .onlineEdu .box .primary{padding:3px 0 4px;font-size:14px}
.seminarInfo .onlineEdu .box .body{padding:15px}
.seminarInfo .onlineEdu .box .row.btns{border-top:1px solid #e2e2e2}
.seminarInfo .onlineEdu .box .row.btns .arrowRight{margin-left:5px}
.seminarInfo .healthMark{width:125px;margin-top:10px}

#body.seminarMap{padding:15px 0 20px}
.seminarMap .contact .map{position:relative;height:300px;border:1px solid #e9e9e9;box-sizing:border-box}
.seminarMap .contact .map img{position:absolute;left:0;top:0;right:0;bottom:0;width:100%;height:100%}
.seminarMap .contact address{margin-top:7px;padding:13px 15px;font-size:12px;}
.seminarMap .contact address p{color:#666}
.seminarMap .contact address p strong{font-size:14px}
.seminarMap .item{margin-top:20px}
.seminarMap .item .head{padding-bottom:7px;border-bottom:1px solid #e2e2e2}
.seminarMap .item .head h2{font-size:14px;color:#333;font-weight:bold}
.seminarMap .item dl{margin-top:7px}
.seminarMap .item dl dt{font-size:13px}
.seminarMap .item dl dd{padding-left:10px;font-size:12px}

/*세미나 좌석신청*/
.headLine{padding:20px 15px;text-align:center;background-color:#fff;-webkit-box-shadow:0 1px 1px rgba(0,0,0,.1);box-shadow:0 1px 1px rgba(0,0,0,.1)}
.headLine h2{font-size:17px;color:#333}
.headLine p{font-size:13px;color:#666}
.headLine .title{font-size:17px;color:#333}

.applyState{margin-top:12px;font-size:12px;text-align:center}
.applyState .box{margin-top:13px;font-size:14px;border:2px solid #707780;box-sizing:border-box}
.applyState .box .head{padding:10px}
.applyState .box .body{padding:10px;color:#333;background-color:#fff}

.applyState .box .head span{position:relative;padding-left:7px;margin-left:2px}
.applyState .box .head span em{color:#dbdcde}
.applyState .box .head span:first-child{padding-left:0;margin-left:0}
.applyState .box .head span:after{content:'';display:inline-block;position:absolute;left:0;top:4px;height:10px;border-left:1px solid #8d9299}
.applyState .box .head span:first-child:after{content:none}

.board.apply{margin-top:15px}
.board.apply .list li .head{padding:12px 15px}
.board.apply .list li .head:after{content:'';display:block;clear:both}
.board.apply .list li .head p{float:left;font-size:15px;color:#333}
.board.apply .list li .head .state{display:inline-block;padding:1px 3px;font-size:11px;color:#7f8792;border:1px solid #7f8792}
.board.apply .list li .head div{float:right}
.board.apply .list li .head div span{position:relative;padding-left:7px;margin-left:2px;font-size:15px;}
.board.apply .list li .head div span:first-child{padding-left:0;margin-left:0}
.board.apply .list li .head div span:after{content:'';display:inline-block;position:absolute;left:0;top:5px;height:11px;border-left:1px solid #e2e2e2}
.board.apply .list li .head div span:first-child:after{content:none}
.board.apply .list li .content{padding:12px 15px}
.board.apply .list li .content dl:after{content:'';display:block;clear:both}
.board.apply .list li .content dl dt{float:left;color:#333;font-size:14px;line-height:1.7}
.board.apply .list li .content dl dd{float:right;font-size:14px;line-height:1.7}
.board.apply .list li .content dl dd input{text-align:center}

.seminarApply{padding-bottom:74px}
.seminarApply .board.apply .list li .content dl dt{line-height:40px}
.seminarApply .board.apply .list li .content dl dd{width:95px}
.applyDone{padding-bottom:75px}
.applyDone .total{margin-top:10px}
.applyDone .total .box{background-color:#fff;border:1px solid #c9c9c9;border-radius:2px}
.applyDone .total .box hr{margin:7px 0}
.applyDone .total .box div{padding:7px 9px}
.applyDone .total .box div + div{border-top:1px solid #c9c9c9}
.applyDone .total .box dl{padding:0 5px;color:#333;line-height:2}
.applyDone .total .box dl:after{content:'';display:block;clear:both}
.applyDone .total .box dl dt{float:left}
.applyDone .total .box dl dd{float:right}
.applyDone .total .box dl dd .em{font-size:17px}
.applyDone .row.btns .col .btn small{font-size:15px}

.buyDone .margin + .margin{margin-top:20px}
.buyDone .table{margin-bottom:15px}
.buyDone .bullet{margin-top:5px}
.buyDone .board.apply .list li .head div span{font-size:13px}

/* 지정 좌석 보기 */
.seats{padding-bottom:75px}
.seats .headLine{padding:18px 15px}
.seats .headLine .info span{position:relative;margin-left:2px;padding-left:8px;font-size:13px}
.seats .headLine .info span:after{content:'';display:inline-block;height:9px;position:absolute;left:0;top:3px;border-left:1px solid #e2e2e2}
.seats .headLine .info span:first-child:after{content:none}

.seats .tab.type2{margin-top:15px;padding:0 30px}
.seats .tab.type2 span a{background-color:transparent}
.seats .tab.type2 .active a{background-color:#707780}

.seats .controls{margin-top:15px}
.seats .controls label{font-weight:14px;color:#333}
.seats .controls p{margin-top:5px}
.seats .floating.row.btns{width:100%;height:50px;padding:10px 0;border-top:1px solid #ebebeb;box-sizing:content-box}
.seats .floating.row.btns .col:first-child{padding-left:10px}
.seats .floating.row.btns .col:last-child{padding-right:10px}
.seats .floating.row.btns .btn.lg{padding:0}
.seats .floating.row.btns .btn .count{font-size:15px;line-height:1;vertical-align:top;display:inline-block;margin-top:25px;-webkit-transform:translateY(-50%);transform:translateY(-50%)}
.tickets{margin-top:15px;padding-bottom:60px}
.tickets.end{padding-bottom:0}
.tickets .list > li{margin-top:6px}
.tickets .list li .head{padding:12px 15px}
.tickets .list li .head:after{content:'';display:block;clear:both}
.tickets .list li .head p{float:left;font-size:15px;color:#333}
.tickets .list li .head p > span{font-size:12px;color:#707780}
.tickets .list li .head .info{float:right}
.tickets .list li .head .info span{position:relative;padding-left:6px;margin-left:2px}
.tickets .list li .head .info span:first-child{padding-left:0;margin-left:0}
.tickets .list li .head .info span:after{content:'';display:inline-block;position:absolute;left:0;top:3px;height:11px;border-left:1px solid #e2e2e2}
.tickets .list li .head .info span.hide + span:after{display:none}
.tickets .list li .head .info span:first-child:after{content:none}
.tickets .list li .head .info .btn{font:0/0 a;vertical-align:top;margin-left:6px}
.tickets .list > li .content{position:relative;padding:0}
.tickets .list .content:after,
.tickets .list .content:before{content:'';display:inline-block;height:100%;border-left:1px solid #e2e2e2;position:absolute;top:0;z-index:1}
.tickets .list .content:after{left:33.3333%}
.tickets .list .content:before{right:33.3333%}
.tickets .list .content ul{position:relative;margin-bottom:-1px;border-top:1px solid #e2e2e2;box-sizing:border-box}
.tickets .list .content ul:after{content:'';display:block;clear:both}
.tickets .list .content ul:before{content:'';display:block;position:absolute;left:0;right:0;bottom:0;border-bottom:1px solid #e2e2e2}
.tickets .list .content ul li{float:left;width:33.3333%;height:45px;border-bottom:1px solid #e2e2e2;box-sizing:border-box}
.tickets .list .content ul li .btn{display:block;width:100%;height:100%;text-align:center}
.tickets .list .content ul li .btn.sended{border:none;color:#ccc;background-color:#f9fafb}
.tickets .list .content ul li.active{border-right:1px solid #5ac8ea;border-bottom:1px solid #5ac8ea}
.tickets .list .content ul li.active .btn{position:relative;background-color:#66d3f6;color:#fff}
.tickets .list .content ul li.active .btn:before{content:'';display:block;position:absolute;z-index:1;left:-1px;top:-1px;right:-1px; bottom:0;border-top:1px solid #5ac8ea}
.tickets .list .content ul li.active .btn:after{content:'';display:inline-block;position:absolute;right:-3px;top:0;z-index:1;border-left:6px solid transparent;border-right:6px solid transparent;border-top:0;border-bottom:6px solid #bbeaf9;-webkit-transform:rotate(45deg);transform:rotate(45deg)}
.dialog .body .tickets h2{font-weight:normal;text-align:center;padding:5px 0 15px}
.dialog.seats .tickets .list .content ul li .btn{line-height:44px;font-size:13px}

/* 세미나 좌석 결제 */
.buy{padding-bottom:120px}
.buy .fixContent{background-color:#fff}
.buy .accordion .head button{position:relative;width:100%;height:56px;padding:0 35px 0 15px;border-bottom:1px solid #e2e2e2;background-color:#FFF;box-sizing:border-box}
.buy .accordion .head button:after{content:'';display:inline-block;position:absolute;right:15px;top:26px;width:10px;height:6px;background-image:url('/static/images/common/icon_sprite.png');background-position:-160px -10px;background-repeat:no-repeat;background-size:360px auto;
	-webkit-transition:-webkit-transform .2s ease-in;
	transition:transform .2s ease-in;
}
.buy .accordion .active .head button:after{background-position:-160px 0;-webkit-transform:rotate(180deg);transform:rotate(180deg)}
.buy .accordion .head button{font-size:17px;text-align:left}
.buy .accordion .active .head button{color:#00b6f0}
.buy .accordion > li > section{display:none;padding:15px;border-bottom:1px solid #e2e2e2}
.buy .accordion > li.active > section{display:block}
.buy .accordion > li .products{padding-top:15px}
.buy h3{margin-top:20px}
.buy .title small{margin-left:7px;font-size:12px;color:#666}

.buy .history .list .head{color:#333;font-size:15px}
.buy .history .list .content{padding:13px 15px}
.buy .history .list .content dl{font-size:14px;line-height:1.8;color:#333}
.buy .history .list .content dl:after{content:'';display:block;clear:both;}
.buy .history .list .content dl dt{float:left}
.buy .history .list .content dl dd{float:right}

.buy .payment .table tbody tr:last-child th,
.buy .payment .table tbody tr:last-child td{border-bottom:none}
.buy .payment .icon.arrowRight{margin-left:7px}
.buy .accordion > li.active > .amount{border-bottom:none}

.buy .amount .total{padding:2px}
.buy .amount .total .head{padding:13px 11px}
.buy .amount .total .head:after{content:'';display:block;clear:both}
.buy .amount .total .head dt{float:left;color:#fff;font-size:16px}
.buy .amount .total .head dd{float:right;color:#fff;color:#f9993b;font-size:16px}
.buy .amount .total .head dd strong{color:#f9993b;font-size:21px}
.buy .amount .total .body{padding:20px 12px;color:#333;background-color:#fff}
.buy .amount .total .body dl + dl{margin-top:9px}
.buy .amount .total .body dl:after{content:'';display:block;clear:both}
.buy .amount .total .body dt{float:left;font-size:14px}
.buy .amount .total .body dd{float:right;font-size:14px}
.buy .amount .total .body dd strong{font-size:17px}
.buy .amount .detail{padding:20px 9px;margin-top:10px;font-size:14px;border:1px solid #c9c9c9;border-radius:2px;background-color:#fff}
.buy .amount .detail hr{margin:20px 0}
.buy .amount .detail dl{padding:0 5px}
.buy .amount .detail dl + dl{margin-top:10px}
.buy .amount .detail dl:after{content:'';display:block;clear:both}
.buy .amount .detail dl dt{float:left;color:#333}
.buy .amount .detail dl dd{float:right;color:#333}
.buy .amount .detail dl dd strong{font-size:17px;color:#333}
.buy .agreement{padding:15px 0;background-color:#fff}
.buy .agreement label{color:#333;font-size:14px}
.buy .fixBottom .fixContent{height:120px}

/* 좌석 결제 완료 */
.buyDone .guide{margin:15px 0;color:#333}
.buyDone .guide .box{padding:20px 15px}
.buyDone .guide .box .text1{font-size:17px}
.buyDone .guide .box .text2{font-size:13px}
.buyDone .payment .table{margin-bottom:12px}
.buyDone .apply{margin-top:15px}
.buyDone .apply .bar:after{content:'';display:block;clear:both}
.buyDone .apply .bar .title{float:left}
.buyDone .apply .bar .aRight{float:right;font-size:13px}
.buyDone .apply .bar .aRight strong{font-size:15px;color:#333}

/* 고객행복센터 */
#body.helpdeskMain{padding:70px 20px 15px}
.helpdeskMain .box.default{padding:15px;background-color:#fff;font-size:12px;color:#666}
.helpdeskMain .box.default .title{font-size:18px;color:#333;font-weight:bold}
.helpdeskMain .box.default .box.primary{margin-top:13px;padding:10px 5px;font-size:12px;color:#999}
.helpdeskMain .box.default .box.primary em{font-size:14px;color:#333}
.helpdeskMain .box.default .box.primary strong{font-size:15px}
.helpdeskMain .box.default .box.primary p span{display:inline-block;position:relative;margin-left:7px;padding-left:5px}
.helpdeskMain .box.default .box.primary p span:after{content:'';display:inline-block;position:absolute;left:0;top:2px;height:9px;border-left:1px solid #c9c9c9}
.helpdeskMain .box.default .box.primary p span:first-child{margin-left:0;padding-left:0}
.helpdeskMain .box.default .box.primary p span:first-child:after{content:none}
.helpdeskMain .box.default .box.primary a{color:inherit}
.helpdeskMain .box.default .box.primary a[href*=tel]:before{content:'';display:inline-block;width:11.5px;height:10.5px;margin-right:3px;background-repeat:no-repeat;background-size:360px auto;background-position:-335px -25px;background-image:url('/static/images/common/icon_sprite.png')}
.helpdeskMain .box.default .box.primary strong a[href*=tel]:before{content:none}
.helpdeskMain .box.default .box.primary small{display:inline-block}

.contactUs .tab{margin-bottom:15px}
.contactUs .tab span{width:50%}
.contactUs .domestic section + section{margin-top:25px}
.contactUs .domestic .content{position:relative;padding:15px 0;font-size:12px;color:#333;border-top:1px solid #707780;border-bottom:1px solid #e2e2e2}
.contactUs .domestic .content address{padding-right:100px}
.contactUs .domestic .content .btn{position:absolute;right:0;top:17px}
.contactUs .domestic .content dl{margin-top:7px;padding-left:7px;color:#333}
.contactUs .domestic .content dl:first-child{margin-top:0}
.contactUs .domestic .content dl dt{position:relative;font-size:13px;font-weight:bold}
.contactUs .domestic .content dl dt:after{content:'';display:inline-block;position:absolute;left:-7px;top:7px;width:3px;height:3px;background-color:#707780}
.contactUs .domestic .content dl dd{font-size:12px}
.contactUs .domestic .content dl.align dd{position:relative;padding-left:65px}
.contactUs .domestic .content dl dd + dd{margin-top:5px}
.contactUs .domestic .content dl.align dd strong{position:absolute;left:0;top:0}

.contactUs .foreign{padding-bottom:11px}
.contactUs .foreign .list li .content{font-size:14px;color:#333}
.contactUs .foreign .list li .content .bulletList{margin-top:5px}
.dialog.map .place .content .bulletList li,
.contactUs .foreign .list li .content .bulletList li{position:relative;padding-left:9px;display:table;width:100%;table-layout:fixed;}
.dialog.map .place .content .bulletList li:after,
.contactUs .foreign .list li .content .bulletList li:after{content:'';display:inline-block;position:absolute;left:0;top:9px;width:3px;height:3px;background-color:#707780}
.dialog.map .place .content .bulletList li .label,
.contactUs .foreign .list li .content .bulletList li .label{display:inline-block;width:50px;display:table-cell;}
.contactUs .foreign .list li .footer{border-top:1px solid #e2e2e2}
.contactUs .foreign .list li .footer .btn{color:#666}

/* 공지사항 */
.noticeList{padding-bottom:20px}
.noticeList .row.search{margin:20px 0 10px}
.noticeList .controls .bar:after{content:'';display:block;clear:both}
.noticeList .controls .bar .text{line-height:40px}
.noticeList .controls .bar .select{float:right;width:165px}
.noticeList .board .list4{margin:10px 0;font-size:14px}
.noticeList .board .list4 li{height:66px;white-space:nowrap;box-sizing:border-box}
.noticeList .board .list4 li.new,
.noticeList .board .list4 li.file{position:relative;padding-right:40px}
.noticeList .board .list4 li a{display:block;height:66px;padding:13px 15px 0}
.noticeList .board .list4 li a p{display:inline-block;max-width:100%;overflow:hidden;text-overflow:ellipsis;box-sizing:border-box;vertical-align:top}
.noticeList .board .list4 li a .icons{display:inline-block;height:16px;vertical-align:text-top}
.noticeList .board .list4 li a .icons .icon{display:none;vertical-align:top}
.noticeList .board .list4 li.new a .icons .icon.new,
.noticeList .board .list4 li.file a .icons .icon.file{display:inline-block}
.noticeList .board .list4 p{color:#333}
.noticeList .btnMore{margin:0 15px}
.noticeList .board .list4 .info time,
.noticeDetail .board.detail .info time{font-size:12px;color:#999}
.noticeDetail{height:100%}
.noticeDetail .board.detail{padding-bottom:120px;word-wrap:break-word}
.noticeDetail .seminarLocal{margin-top:15px;border-top:1px solid #c6c6c6;border-left:1px solid #c6c6c6;overflow:hidden;border-radius:2px}
.noticeDetail .seminarLocal:after{content:'';display:block;clear:both}
.noticeDetail .seminarLocal li{float:left;width:33.3333%;box-sizing:border-box;background-color:#fff}
.noticeDetail .seminarLocal li .btn{display:block;width:100%;text-align:left;position:relative;height:40px;padding:0 15px;margin-top:-1px;margin-right:-1px;border-right:1px solid #e2e2e2;border-bottom:1px solid #e2e2e2;line-height:40px;color:#333; box-sizing:border-box}
.noticeDetail .seminarLocal li .btn .arrowRight{position:absolute;right:15px;top:15px}
.noticeDetail .row.btns.margin.floating.box{padding:0 15px;margin-bottom:0;height:72px}
.noticeDetail .row.btns.margin.floating.box .col{padding-top:15px;padding-bottom:15px}
.noticeDetail .board.detail .content{border-bottom:0}
.noticeList .board .noticeImportant.list4{margin:10px 0 -10px;background-color:#f1f2f4}
.noticeList .board .noticeImportant.list4 li{border-top:1px solid #e2e2e2}
.noticeList .board .noticeImportant.list4 li:first-child{border-top:none}
.noticeImportant .head{position:relative;padding:0 15px;border-bottom:1px solid #05abdf;}
.noticeImportant .head button{font-size:16px;line-height:60px;font-weight:bold;color:#333;}
.noticeImportant .head button:after{content:'';display:inline-block;position:absolute;right:15px;top:28px;width:10px;height:6px;background-image:url('/static/images/common/icon_sprite.png');background-position:-160px -10px;background-repeat:no-repeat;background-size:360px auto;-webkit-transition:-webkit-transform .2s ease-in;transition:transform .2s ease-in}
.noticeImportant.active .head button:after{background-position:-160px 0;-webkit-transform:translateY(-1px) rotate(180deg);transform:translateY(-1px) rotate(180deg)}
.noticeImportant .content{display:none}
.noticeImportant.active .content{display:block;border-bottom:1px solid #05abdf}


/* 자주하는 질문 */
.faqList{padding-bottom:20px;background-color:#fff}
.faqList .row.search{margin:20px 0 10px}
.faqList .controls .bar:after{content:'';display:block;clear:both}
.faqList .controls .bar .text{line-height:40px;color:#333;font-size:15px}
.faqList .controls .bar .select{float:right;width:165px}
.faqList .board{background-color:#fff}
.faqList .board .list4{margin:10px 0;font-size:14px}
.faqList .board .list4 li .head{background-color:#fff}
.faqList .board .list4 li .head button{width:100%;padding:14px 15px 13px;line-height:1.5;font-size:14px;color:#333;text-align:left;box-sizing:border-box}
.faqList .board .list4 li .head .category{display:inline-block;height:17px;margin-top:1px;margin-right:3px;padding:1px 3px 0;color:#8d959f; font-size:11px;vertical-align:top;border:1px solid #8d959f;box-sizing:border-box}
.faqList .board .list4 li .content{display:none;padding:14px 15px 13px;font-size:13px;color:#0666;border-top:1px solid #e2e2e2;background-color:#f1f2f4}
.faqList .board .list4 li .content p + p{margin-top:10px}
.faqList .board .list4 li.active .content{display:block}
.faqList .noData.search{margin-top:110px}
.qna .tab,
.qnaWrite .tab,
.qnaList .tab{padding:15px 35px}
.qnaList .board .bullet{margin-bottom:5px}
.qnaList .board .list4{margin-top:10px}
.qnaList .board .list4 li{background-color:#fff}
.qnaList .board .list4 li .head{padding:14px 15px 11px}
.qnaList .board .list4 li .head .state{display:inline-block;height:17px;margin-right:3px;padding:1px 3px 0;border:1px solid #8d959f;font-size:11px;color:#8d959f;box-sizing:border-box}
.qnaList .board .list4 li .head .state.primary{border:1px solid #00b6f0;color:#00b6f0}
.qnaList .board .list4 li .head button{text-align:left}
.qnaList .board .list4 li .head button p{margin-top:6px;vertical-align:top;font-size:14px;color:#333;word-wrap:break-word;word-break:break-all}
.qnaList .board .list4 li .head button .title{line-height:1;vertical-align:top}
.qnaList .board .list4 li .head button .icon.new{vertical-align:top;-webkit-transform:translateY(-2px);transform:translateY(-2px)}
.qnaList .board .list4 li .head button time{font-size:12px;color:#999}
.qnaList .board .list4 li .content{display:none;position:relative;padding:0 15px 35px;border-top:1px solid #e2e2e2;font-size:13px;color:#666;background-color:#f1f2f4}
.qnaList .board .list4 li.active .content{display:block}
.qnaList .board .list4 li .content > div{position:relative;padding:15px 0 10px 28px}
.qnaList .board .list4 li .content > div:after{content:'';display:inline-block;position:absolute;left:0;top:14px;width:20px;height:20px;background-image:url('/static/images/common/icon_sprite.png');background-repeat:no-repeat;background-size:360px auto}
.qnaList .board .list4 li .content .question{min-height:20px;padding-bottom:15px;word-wrap:break-word;word-break:break-all}
.qnaList .board .list4 li .content .question:after{background-position:-70px -25px}
.qnaList .board .list4 li .content .answer{padding-top:15px;border-top:1px solid #e2e2e2;word-wrap:break-word;word-break:break-all}
.qnaList .board .list4 li .content .answer:after{background-position:-95px -25px}
.qnaList .board .list4 li .content .image{margin-top:15px;border:1px solid #e2e2e2}
.qnaList .board .list4 li .content .zip,
.qnaList .board .list4 li .content .pdf{margin-top:15px}
.qnaList .board .list4 li .content button{position:absolute;right:15px;bottom:20px;font-size:13px;color:#7f8792}
.qnaList .board .list4 li .content button .icon{vertical-align:text-top}

.qnaWrite .box.primary{padding:15px;font-size:14px}
.qnaWrite .box.primary a{display:block}
.qnaWrite .write{margin-top:15px}
.qnaWrite .write textarea{height:250px;margin-top:10px}
.qnaWrite .write .fileControls{height:30px;margin-top:5px;margin-bottom:10px;padding-left:10px}
.qnaWrite .write .fileControls > span{vertical-align:sub}
.qnaWrite .write .fileControls .btnFile{margin-left:39px}
.qnaWrite .write .fileControls .btnFile label{font-size:13px;line-height:30px;display:block;height:30px;padding:0 15px}
.qnaWrite .write .bullet{margin-top:10px}
.qnaWrite .table{margin-top:10px;border-top:1px solid #e2e2e2}
.qnaWrite .table .row.tel .col.check:first-of-type{width:25px;padding-right:5px;}

.benefitNotice .tab span{width:17%}
.benefitNotice .headLine{padding:20px 0 15px;text-align:center;box-shadow:none}
.benefitNotice .headLine h2{font-size:18px;font-weight:bold;color:#333}
.benefitNotice .board .box.dark{height:40px;margin-bottom:15px;padding-top:10px;font-size:14px;text-align:center;box-sizing:border-box}
.benefitNotice .board .list .head .title{font-weight:bold;font-size:15px;color:#333}
.benefitNotice .board .list .content{color:#333;font-size:14px}
.benefitNotice .board .list .content dl{line-height:1.8}
.benefitNotice .board .list .content dl:after{content:'';display:block;clear:both}
.benefitNotice .board .list .content dl dt{float:left}
.benefitNotice .board .list .content dl dd{float:right}

/* 라이프스타일 센터 */
.LiftStyleCenterMain > section{margin-top:15px}
.LiftStyleCenterMain .table{table-layout:fixed;word-break:break-word}
.wrapIframe{position:relative;padding-bottom:56.25%}
.wrapIframe iframe{position:absolute;left:0;right:0;top:0;bottom:0;width:100%;height:100%}
.centerMap a{display:block}
.centerMap a img{max-width:100%}

.EducationCenterMain > section{margin-top:15px}

.EducationCenterMain .search{margin:20px 0 10px}
.EducationCenterMain .search .icon.search{width:20px;height:21px;margin:0;vertical-align:middle;background-image:url('/static/images/common/layout_sprite.png');background-size:360px auto;background-position:-50px -25px}
.EducationCenterMain .search input[type='search']{padding-right:40px}

.EducationCenterMain .icon{display:inline-block;width:20px;height:14px;background-image:url('/static/images/common/icon_centerlist.png');background-size:auto}
.EducationCenterMain .icon.address{background-position:0 0}
.EducationCenterMain .icon.telephone{background-position:-20px 0}
.EducationCenterMain .icon.leader{background-position:-40px 0}

.EducationCenterMain .table{table-layout:fixed;word-break:break-word;border-color:#808080}
.EducationCenterMain .table tbody tr:nth-child(odd) th,
.EducationCenterMain .table tbody tr:nth-child(odd) td{background-color:#f8f8f8}
.EducationCenterMain .table tbody .acenter{text-align:center}
.EducationCenterMain .table tbody th,
.EducationCenterMain .table tbody td{border-color:#9e9e9e}
.EducationCenterMain .table tbody td{padding:0}
.EducationCenterMain .table tbody tr td:only-child{padding:10px}
.EducationCenterMain .table tbody .icon.sm.sns.fb{background-image:url('/static/images/common/icon_facebook_round.png')}
.EducationCenterMain .table li{position:relative;min-height:35px;padding:10px 10px 10px 30px;border-top:1px solid #ddd;box-sizing:border-box}
.EducationCenterMain .table li:first-child{border-top:none}
.EducationCenterMain .table li .icon{position:absolute;left:10px;top:50%;margin-top:-7px}
.EducationCenterMain .table li .icon.address{background-position:0 -15px}
.EducationCenterMain .table li .icon.telephone{background-position:-20px -15px}
.EducationCenterMain .table li .icon.leader{background-position:-40px -15px}

.EducationCenterTableGuide{margin-bottom:10px;text-align:right}
.EducationCenterTableGuide li{position:relative;display:inline-flex;margin-left:15px;align-items:center}

 

 

'Static > style' 카테고리의 다른 글

layout.css  (0) 2021.02.19
jquery.auto-complete.css  (0) 2021.02.19
home.css  (0) 2021.02.19
dev_styles.css  (0) 2021.02.19
base.css  (0) 2021.02.19

간단 설명


html, body{-webkit-overflow-scrolling:touch}
#sdetail1_wrap{-webkit-overflow-scrolling:touch}
#sdetail1_wrap{overflow:hidden}
#sdetail1 img {width: 100%;margin-top:20px}
.autocomplete-wrapper{display:none}
.autocomplete-wrapper.active{display:block;height:100%;overflow-y:auto;background-color:#666}
.autocomplete-wrapper li, 
.autocomplete-wrapper a{color:#fff}

'Static > style' 카테고리의 다른 글

layout.css  (0) 2021.02.19
jquery.auto-complete.css  (0) 2021.02.19
home.css  (0) 2021.02.19
help.css  (0) 2021.02.19
base.css  (0) 2021.02.19

간단 설명


@charset "UTF-8";

/*reset*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video{margin:0;padding:0;border:0;font:inherit;vertical-align:baseline;font-weight:normal}
address,em{font-style:normal;font-weight:normal}
strong{font-weight:bold}
input,button,select{font-family:sans-serif;vertical-align:middle;margin:0;padding:0}
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section{display:block}
hr{width:100%;height:1px;margin:0;border:0;clear:both;background-color:#e2e2e2}
html{font-size:100%;font-family:sans-serif;font-size:15px;-webkit-text-size-adjust:100%}
body{line-height:1.5;color:#666}
ol,
ul,
li{list-style:none}
table{border-collapse:collapse;border-spacing:0;font-size:15px}
button,
html input[type='button'],
input[type='reset'],
input[type='submit']{-webkit-appearance:button;cursor:pointer;outline:none}
button{margin:0;padding:0;border:0;background-color:transparent}
button:-moz-focus-inner,
input:-moz-focus-inner{border:0;padding:0}
input[type='number']:-webkit-inner-spin-button,
input[type='number']:-webkit-outer-spin-button{height:auto}
input.search,
input[type='search']{-webkit-appearance:none;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;-webkit-border-radius:2px;border-radius:2px}
input[type='date']:-webkit-user-select-button,
input[type='date']{-webkit-appearance:none;-webkit-writing-mode:none;-webkit-rtl-ordering:none;-webkit-user-select:none}
input.search:-webkit-search-cancel-button,
input.search:-webkit-search-decoration,
input[type='search']:-webkit-search-cancel-button,
input[type='search']:-webkit-search-decoration{-webkit-appearance:none}
input[type='file']::-webkit-file-upload-button{cursor:pointer}
a{text-decoration:none;color:#666}
a[href^='tel']{color:inherit;font:inherit}
button,
a:focus{outline:none}
button.press,
a.press,
button:active,
a:active{opacity:.6}
button:disabled:active,
a.disabled:active,
.btn.disabled:active{opacity:1}
.radio,
.checkbox{
	display:inline-block;
	position:relative;
	width:25px;
	height:25px;
	border:1px solid #cacaca;
	background-color:#fff;
	border-radius:2px;
	vertical-align:middle;
	box-sizing:border-box;
}
.radio{
	width:22px;
	height:22px;
	border-radius:10px;
}
input[type='radio'],
input[type='checkbox']{
	position:absolute;
	left:0;right:0;top:0;bottom:0;
	z-index:10;
	opacity:0;
	width:22px;height:22px;
	letter-spacing:0;
	border:none;
	background:none;
	vertical-align:middle;
	-webkit-appearance:none;
	-ms-appearance:none;
}
input[type='radio']{
	border-radius:100%;
}
input[type='radio'] + span,
input[type='checkbox'] + span{
	opacity:0;
}
input[type='radio']:checked + span,
input[type='checkbox']:checked + span{
	opacity:1;
	position:absolute;
	left:0;top:0;
}
input[type='radio']:checked + span{
	width:10px;
	height:10px;
	margin:5px 0 0 5px;
	border-radius:100%;
	background-color:#00b6f0;
}
input[type='checkbox']:checked + span{
	width:16px;
	height:11px;
	margin:6px 0 0 4px;
	background-position:-50px 0;
	background-repeat:no-repeat;
	background-size:360px auto;
	background-image:url('/static/images/common/icon_sprite.png');
}

input[type='date'],
input[type='text'],
input[type='number'],
input.search,
input[type='search'],
input[type='password'],
input[type='tel'],
input[type='email']{
	width:100%;height:40px;
	padding:0 10px;
	font-family:sans-serif;font-size:14px;color:#333;
	border:1px solid #bfc2c6;
	background-color:#fff;
	border-radius:2px;
	outline:none;
	box-sizing:border-box;
	-webkit-appearance:none;
}
input[type="date"]{padding-right:0}

input[readonly='readonly']:not([data-role='date']){background-color:#f6f6f8;border:1px solid #e1e1e1;color:#666}

button::-webkit-inner-spin-button,
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button{ 
	-webkit-appearance:none;
	margin:0;
}
select:disabled,
input.search:disabled,
input[type='date']:disabled,
input[type='search']:disabled,
input[type='password']:disabled,
input[type='tel']:disabled,
input[type='email']:disabled,
input[type='text']:disabled{background-color:#f6f6f8;border:1px solid #e1e1e1;color:#ccc}
input::-webkit-input-placeholder{color:#ccc;line-height:1.4;padding-left:4px}
textarea::-webkit-input-placeholder{color:#ccc}
select{
	width:100%;
	height:40px;
	padding-left:10px;
	padding-right:10px;
	font-size:14px;
	color:#666;
	border:1px solid #c6c6c6;
	border-radius:2px;
	background-color:#fff;
	-webkit-appearance:none;
	-ms-appearance:none;
	appearance:none;
	box-sizing:border-box;
}
select:disabled{background-color:#f6f6f8;border:1px solid #e1e1e1;color:#ccc}
select:disabled::after{border-color:#ccc}
select::-ms-expand{display:none}
span.select{display:inline-block}
.select{position:relative}
.select:after{
	content:'';display:inline-block;
	position:absolute;right:8px;top:50%;
	border-left:4px solid transparent;
	border-right:4px solid transparent;
	border-bottom:none;
	border-top:6px solid #88929e;
	margin-top:-3px;
	pointer-events:none;
}
.select.disabled:after{border-top-color:#ccc}
select:required:invalid{color:#999}
.select[data-value]:before{content:attr(data-value);font-size:14px;line-height:38px;text-align:center;position:absolute;top:0;right:0;bottom:0;left:0;padding-right:20px;padding-left:5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;border-radius:2px;border:1px solid #c6c6c6;background-color:#fff;pointer-events:none}
.select[data-value] select{opacity:0}
textarea{width:100%;padding:10px;border:1px solid #bfc2c6;box-sizing:border-box;border-radius:2px;resize:none;font-family:sans-serif;font-size:14px;color:#666;-webkit-appearance:none;-webkit-box-shadow:none;box-shadow:none;background-image:none}
label{font-size:14px;vertical-align:middle}
:selection{background-color:#ff7900;color:#fff}
.hide,legend,caption{position:absolute !important;left:-9999px !important;right:auto !important;width:0;height:0;overflow:hidden;text-indent:-9999px;font:0/0 a}
caption{display:none}
img{width:100%;vertical-align:middle}
fieldset{min-width:0}
@-moz-document url-prefix(){
	fieldset{display:table-cell}
}

[lang='ko'],
[lang='en']{font-family:sans-serif}
[lang='zh']{font-family:'Microsoft YaHei', 'Microsoft JhengHei', sans-serif}
[lang='zh-CN']{font-family:'Microsoft YaHei', sans-serif}
[lang='zh-TW']{font-family:'Noto Sans TC', 'Microsoft JhengHei', sans-serif}
[lang='ja']{font-family:"メイリオ", Meiryo, "Osaka", Arial, sans-serif}
[lang='th']{font-family:'CSChatThaiUI', sans-serif}
[lang='kh']{font-family:'Hanuman', Arial, Helvetica, sans-serif}
[lang='tr-TR']{font-family:Arial, sans-serif}

'Static > style' 카테고리의 다른 글

layout.css  (0) 2021.02.19
jquery.auto-complete.css  (0) 2021.02.19
home.css  (0) 2021.02.19
help.css  (0) 2021.02.19
dev_styles.css  (0) 2021.02.19

+ Recent posts