@charset "utf-8";



/*mainVisual*/
#mainVisual { width:100%; height:950px; overflow:hidden; position:relative; /* transition:height .3s;  */}
.visual { width:100%;  /* height:100%;  *//* transition:height .3s; */ }
.visual > li { width:100%;/*  height:100%; */ position:relative; }
.visual > li .img { width:100%; /* height:100%; */ position:absolute; top:0; left:0; z-index:-1; animation:vsImg 6.0s ease-in-out; -webkit-animation:vsImg 6.0s ease-in-out; -moz-animation:vsImg 6.5s ease-in-out; }
.visual .img > img { position: absolute; top:-9999px; bottom:-9999px; right: -9999px; left: -9999px; margin: auto; min-width: 100%; min-height:100%; }



@keyframes vsImg {
	0% { transform:scale(1); }
	100% { transform:scale(1); }
}
@-webkit-keyframes vsImg {
	0% { -webkit-transform:scale(1); }
	100% { -webkit-transform:scale(1); }
}
@-moz-keyframes vsImg {
	0% { -moz-transform:scale(1); }
	100% { -moz-transform:scale(1); }
}

@keyframes vsTxt {
	0% { margin-top:40px; opacity:0; }
	100% { margin-top:0; opacity:1; }
}
@-webkit-keyframes vsTxt {
	0% { margin-top:40px; opacity:0; }
	100% { margin-top:0; opacity:1; }
}
@-moz-keyframes vsTxt {
	0% { margin-top:40px; opacity:0; }
	100% { margin-top:0; opacity:1; }
}

@keyframes vsTxt2 {
	0% { margin-top:40px; opacity:0; }
	100% { margin-top:0; opacity:0.5; }
}
@-webkit-keyframes vsTxt2 {
	0% { margin-top:40px; opacity:0; }
	100% { margin-top:0; opacity:0.5; }
}
@-moz-keyframes vsTxt2 {
	0% { margin-top:40px; opacity:0; }
	100% { margin-top:0; opacity:0.5; }
}



#mainVisual .ntitle { overflow:hidden; position:absolute; top:270px; left:50%; right:50%; margin-left:-650px; width:100%; color:#fff;  z-index:99;  }
#mainVisual .ntitle dl{  }
#mainVisual .ntitle dl dt{font-size:80px;line-height:100%;margin-bottom:15px; /*animation:vsTxt 1s; -webkit-animation:vsTxt 1s; -moz-animation:vsTxt 1s;*/ }
#mainVisual .ntitle dl dd{font-size:30px; line-height:100%; margin-bottom:25px; /*animation:vsTxt2 3s; -webkit-animation:vsTxt2 3s; -moz-animation:vsTxt2 3s; opacity:0.5*/}
#mainVisual .ntitle > p:before{content:"";width:20px;height:1px;background:#fff;position:absolute;top:0;left:0;}
#mainVisual .ntitle > p{padding-top:20px;position:relative;font-size:24px;line-height:20px;line-height:100%;font-family:"Nanum Barun Gothic"; animation:vsTxt 4s; -webkit-animation:vsTxt 4s; -moz-animation:vsTxt 4s; }
#mainVisual .ntitle > p span{font-size:18px;}

#mainVisual .ntitle02 { overflow:hidden; position:absolute; top:200px; left:50%; right:50%; margin-left:350px; width:100%; color:#fff;  z-index:99;  }
#mainVisual .ntitle02 dl{  }
#mainVisual .ntitle02 dl dt{font-size:80px;line-height:100%;margin-bottom:15px; /*animation:vsTxt 1s; -webkit-animation:vsTxt 1s; -moz-animation:vsTxt 1s;*/ }
#mainVisual .ntitle02 dl dd{font-size:30px; line-height:100%; margin-bottom:25px; /*animation:vsTxt2 3s; -webkit-animation:vsTxt2 3s; -moz-animation:vsTxt2 3s; opacity:0.5*/}
#mainVisual .ntitle02 > p:before{content:"";width:20px;height:1px;background:#fff;position:absolute;top:0;left:0;}
#mainVisual .ntitle02 > p{padding-top:20px;position:relative;font-size:24px;line-height:20px;line-height:100%;font-family:"Nanum Barun Gothic"; animation:vsTxt 4s; -webkit-animation:vsTxt 4s; -moz-animation:vsTxt 4s; }
#mainVisual .ntitle02 > p span{font-size:18px;}

#mainVisual .ntitle03 { overflow:hidden; position:absolute; top:270px; left:50%; right:50%; margin-left:-650px; width:100%; color:#fff;  z-index:99;  }
#mainVisual .ntitle03 dl{  }
#mainVisual .ntitle03 dl dt{font-size:80px;line-height:100%;margin-bottom:15px; /*animation:vsTxt 1s; -webkit-animation:vsTxt 1s; -moz-animation:vsTxt 1s;*/ }
#mainVisual .ntitle03 dl dd{font-size:30px; line-height:100%; margin-bottom:25px; /*animation:vsTxt2 3s; -webkit-animation:vsTxt2 3s; -moz-animation:vsTxt2 3s; opacity:0.5*/}
#mainVisual .ntitle03 > p:before{content:"";width:20px;height:1px;background:#fff;position:absolute;top:0;left:0;}
#mainVisual .ntitle03 > p{padding-top:20px;position:relative;font-size:24px;line-height:20px;line-height:100%;font-family:"Nanum Barun Gothic"; animation:vsTxt 4s; -webkit-animation:vsTxt 4s; -moz-animation:vsTxt 4s; }
#mainVisual .ntitle03 > p span{font-size:18px;}




@media screen and (max-width:1100px) {
	#mainVisual .ntitle { top:40%; left:20px; margin-left:0;}
	#mainVisual .ntitle dl dt{font-size:3.5em;}
	#mainVisual .ntitle dl dd{font-size:2.2em;}
	#mainVisual .ntitle > p { font-size:1.58em; line-height:120%;}
	#mainVisual .ntitle > p span { font-size:1.56em; }
	#mainVisual .ntitle dl dt img {width:23% }

	#mainVisual .ntitle02 { top:40%; left:20px; margin-left:0;}
	#mainVisual .ntitle02 dl dt{font-size:3.5em;}
	#mainVisual .ntitle02 dl dd{font-size:2.2em;}
	#mainVisual .ntitle02 > p { font-size:1.58em; line-height:120%;}
	#mainVisual .ntitle02 > p span { font-size:1.56em; }
	#mainVisual .ntitle02 img {width:80% }

	#mainVisual .ntitle03 { top:40%; left:20px; margin-left:0;}
	#mainVisual .ntitle03 dl dt{font-size:3.5em;}
	#mainVisual .ntitle03 dl dd{font-size:2.2em;}
	#mainVisual .ntitle03 > p { font-size:1.58em; line-height:120%;}
	#mainVisual .ntitle03 > p span { font-size:1.56em; }
	#mainVisual .ntitle03 img {width:80% }

	.visual { width:100%;  /* height:100%;  *//* transition:height .3s; */ }
	.visual > li { width:100%;/*  height:100%; */ position:relative; }
	.visual > li .img { width:100%; /* height:100%; */ position:absolute; top:0; left:0; z-index:-1; animation:vsImg 6.0s ease-in-out; -webkit-animation:vsImg 6.0s ease-in-out; -moz-animation:vsImg 6.5s ease-in-out; }
	.visual .img > img { position: absolute; top:-9999px; bottom:-9999px; right: -9999px; left: -9999px; margin: auto; min-width: 100%; min-height:50%; }
}
@media screen and (max-width:550px) {
	#mainVisual .ntitle { left:50px; width:17%}
	#mainVisual .ntitle dl dt{ font-size:2.5em; margin-bottom:10px;}
	#mainVisual .ntitle dl dd{ font-size:1.7em; margin-bottom:10px;}
	#mainVisual .ntitle > p { font-size:1.2em; padding-top:10px;}
	#mainVisual .ntitle > p span { font-size:1.16em; }
	#mainVisual .ntitle dl dt img {width:100px; }

	#mainVisual .ntitle02 { left:50px; width:70% }
	#mainVisual .ntitle02 dl dt{ font-size:2.5em; margin-bottom:10px;}
	#mainVisual .ntitle02 dl dd{ font-size:1.7em; margin-bottom:10px;}
	#mainVisual .ntitle02 > p { font-size:1.2em; padding-top:10px;}
	#mainVisual .ntitle02 > p span { font-size:1.16em; }
	#mainVisual .ntitle02 img {width:80% }

	#mainVisual .ntitle03 { left:50px; width:70% }
	#mainVisual .ntitle03 dl dt{ font-size:2.5em; margin-bottom:10px;}
	#mainVisual .ntitle03 dl dd{ font-size:1.7em; margin-bottom:10px;}
	#mainVisual .ntitle03 > p { font-size:1.2em; padding-top:10px;}
	#mainVisual .ntitle03 > p span { font-size:1.16em; }
	#mainVisual .ntitle03 img {width:80% }

	.visual { width:100%;  /* height:100%;  *//* transition:height .3s; */ }
	.visual > li { width:100%;/*  height:100%; */ position:relative; }
	.visual > li .img { width:100%; /* height:100%; */ position:absolute; top:0; left:0; z-index:-1; animation:vsImg 6.0s ease-in-out; -webkit-animation:vsImg 6.0s ease-in-out; -moz-animation:vsImg 6.5s ease-in-out; }
	.visual .img > img { position: absolute; top:-9999px; bottom:-9999px; right: -9999px; left: -9999px; margin: auto; min-width: 100%; min-height:50%; }

}



#subVisual { width:100%;  height:200px; overflow:hidden; position:relative; text-align:left; /*animation:slideDown .8s; -webkit-animation:slideDown .8s; -moz-animation:slideDown .8s;*/ }
@keyframes slideDown {
	0% { height:0; }
	100% { height:260px; }
}
@-webkit-keyframes slideDown {
	0% { height:0; }
	100% { height:260px; }
}
@-moz-keyframes slideDown {
	0% { height:0; }
	100% { height:260px; }
}
#subVisual img { position: absolute; top: -9999px; right: -9999px; bottom: -9999px; left: -9999px; margin: auto; min-width: 100%; min-height: 100%; z-index:-1; }
#subVisual h2 { padding-top:5%; color:#fff; font-size:24px; line-height:120%; }



@media screen and (max-width:1100px) {
	/* common */
	#subVisual {  height:200px;  animation:none; -webkit-animation:none; -moz-animation:none; transition:height .3s; -webkit-transition:height .3s; -moz-transition:height .3s; }
	#subVisual img { }

}







	/*
타이틀 h1~h6 - <h1></h1>
소제목 내용 small - <h1>제목<small>설명글</small></h1>
글자 두께 b500{weight:500} - 500~900
패딩/마진 p5 /  pt5 / pb5 / m5 / mt5 / mb5 / - 5 10 20 30 ~ 100 120 140
최대넓이 max-width10 {max-width: 10%;} - 10~90

* 라인 hr
* 패딩/마진 삭제 row
* 가로 100% container-pull
* div 중앙 container
* 이미지 반응형 img-responsive
* li 가로정렬 list-inline
* text-center - inline block 중앙
* center-block - btn block
**************************************
display: inline / block 차이
http://blog.naver.com/lyhy0310/220923263218

block - h1 / p
inline -  span a button small
**************************************
*/
html {overflow-y:scroll !important}

/*버튼*/
.rain .btn{border-radius:0px; padding:8px 28px; border:0px;}/* 버튼 공통 패딩 */

.rain .btn-default{background-color:transparent !important; color:#555 !important; border:1px solid #ddd !important;}/* 버튼색상 */
.rain .btn-default:hover{background-color:#69C299 !important; color:#fff !important; border:1px solid #69C299 !important;}/* 버튼 오버색상 */

.btn-default02{background-color:transparent !important; color:#555 !important; border:1px solid #ddd !important;}/* 버튼색상 */
.btn-default02:hover{background-color:#CD0122 !important; color:#fff !important; border:1px solid #CD0122 !important;}/* 버튼 오버색상 */

.btn-primary{background-color:#C8A064 !important; color:#fff !important; border:1px solid #C8A064 !important;}/* 버튼색상 */
.btn-primary:hover{background-color:#000 !important; color:#fff !important; border:1px solid #000 !important;}/* 버튼 오버색상 */

.btn-success{background-color:#fff !important; color:#000 !important; border:1px solid #fff !important;}/* 버튼색상 */
.btn-success:hover{background-color:#333 !important; color:#fff !important; border:1px solid #C8A064 !important;}/* 버튼 오버색상 */

.btn-info{background-color:#78746F !important; color:#fff !important; border:1px solid #78746F !important;}/* 버튼색상 */
.btn-info:hover{background-color:#333 !important; color:#fff !important; border:1px solid #333 !important;}/* 버튼 오버색상 */

.btn-danger{background-color:#000 !important; color:#fff !important; border:1px solid #000 !important;}/* 버튼색상 */
.btn-danger:hover{background-color:#B6C5D7 !important; color:#fff !important; border:1px solid #B6C5D7 !important;}/* 버튼 오버색상 */

.rain .btn-warning{background-color:#1a7bbe !important; color:#fff !important; border:1px solid #1a7bbe !important;}/* 버튼색상 */
.rain .btn-warning:hover{background-color:#B6C5D7 !important; color:#fff !important; border:1px solid #B6C5D7 !important;}/* 버튼 오버색상 */


.btn-primary02{background-color:#7593B2 !important; color:#fff !important; border:1px solid #7593B2 !important;}/* 버튼색상 */
.btn-primary02:hover{background-color:#222 !important; color:#fff !important; border:1px solid #222 !important;}/* 버튼 오버색상 */

.rain .btn-primary03{background-color:#C6D475 !important; color:#fff !important; border:1px solid #C6D475 !important;}/* 버튼색상 */
.rain .btn-primary03:hover{background-color:#222 !important; color:#fff !important; border:1px solid #222 !important;}/* 버튼 오버색상 */

.rain .btn-primary04{background-color:#7FD6A2 !important; color:#fff !important; border:1px solid #7FD6A2 !important;}/* 버튼색상 */
.rain .btn-primary04:hover{background-color:#222 !important; color:#fff !important; border:1px solid #222 !important;}/* 버튼 오버색상 */


/* 컬러 */
.c01{color:#CE0021;}
.c02{color:#777;}
.c03{color:#999;}
.c04{color:#053284;}
.c05{color:#999;}
.c06{color:#A7A7A7;}
.c07{color:#F6062D;}
.c08{color:#8FC1E6;}


/*가로바*/
.bar-left{width:65px; height:1px; margin:20px 0px; background: #B6C5D7;}
.bar-auto{width:120px; height:2px; margin:20px auto; background: #000;}
.bar-small-left{width:30px; height:1px; margin:20px 0px; background: #B6C5D7;}
.bar-small-auto{width:30px; height:1px; margin:20px auto; background: #B6C5D7;}


/*기본*/
.box01{border:1px solid #ddd; background-color:#fff;}
.box02{border:1px solid #CE0021; background-color:#fff;}
.box03{border:1px solid #ddd; padding:1px 5px 3px;}
.box04{border:1px solid #AFC2D9; padding:25px; background-color:#fff;}
.box05{border:2px solid #F10000; padding:0px;}
.box06{border:2px solid #ddd;}
.box07{border:1px solid #DFD9F5; padding:15px; background-color:#DFD9F5;}
.box08{border:1px solid #1BEFE8; padding:15px; background-color:#1BEFE8;}
.box09{border:2px solid #B8D3E7; padding:1px 5px 3px;}


hr{border-top:1px solid #767676 !important;}

/*
|---------------------------------------------------------|

                      ↓ 헤더 ↓

|---------------------------------------------------------|
*/

/* 팝업레이어 */
#hd_pop {z-index:1000;position:relative;margin:0 auto; height:0}
#hd_pop h2 {position:absolute;font-size:0;line-height:0;overflow:hidden}
.hd_pops {position:absolute;border:1px solid #e9e9e9;background:#fff}
.hd_pops_con {}
.hd_pops_footer {padding:10px 0;background:#000;color:#fff;text-align:right}
.hd_pops_footer button {margin-right:5px;padding:5px 10px;border:0;background:#393939;color:#fff}


/* 상단 레이아웃 */
#hd {z-index:4;position:relative; width:100%; background:#fff; }
.hd_zindex {z-index:10 !important}
#hd_h1 {position:absolute;font-size:0;line-height:0;overflow:hidden}

#hd_wrapper_tnb {font-size:12px; position:relative; margin:0 auto; padding:0; width:100%;  background:#fff; border-bottom:0px solid #e5e5e5; height:40px; zoom:1}
#hd_wrapper_tnb:after {display:block;visibility:hidden;clear:both;content:""}
.tnb_area { position:relative; margin:0 auto;  height:40px; max-width:1170px; }

#sns {position:relative; float:left;}
#tnb {float:right;margin:0;padding:0;list-style:none;zoom:1}
#tnb:after {display:block;visibility:hidden;clear:both;content:""}
#tnb li {float:left;margin:0 20px 0 0;}
#tnb li:last-child {margin:0; }
#tnb a {display:inline-block;padding:8px 0px;height:34px;color:#999;letter-spacing:-0.1em;line-height:24px }
#tnb a:focus, #tnb a:hover, #tnb a:active {text-decoration:none; color:#000;}
#tnb img {margin-right:0px}

#hd_wrapper {position:relative;margin:0 auto; max-width:1170px; padding:0; height:200px; zoom:1}
#hd_wrapper:after {display:block;visibility:hidden;clear:both;content:""}

.rain .logo{position:relative; border:0px solid red; z-index:999999; width:500px; margin:0 auto;margin-top:40px; }


/* 모바일 상단 레이아웃 */
#hd_m {z-index:4;position:relative; width:100%; background:#fff; }
.hd_zindex {z-index:10 !important}
#hd_h1_m {position:absolute;font-size:0;line-height:0;overflow:hidden}

#hd_wrapper_tnb_m {font-size:12px; position:relative; margin:0 auto; padding:0; width:100%;  background:#fff; border-bottom:0px solid #e5e5e5; height:40px; zoom:1}
#hd_wrapper_tnb_m:after {display:block;visibility:hidden;clear:both;content:""}
.tnb_area_m { position:relative; margin:0 auto;  height:40px; max-width:1170px; }

#tnb_m {float:right;margin:0;padding:0;list-style:none;zoom:1}
#tnb_m:after {display:block;visibility:hidden;clear:both;content:""}
#tnb_m li {float:left;margin:0 20px 0 0;}
#tnb_m li:last-child {margin:0; }
#tnb_m a {display:inline-block;padding:8px 0px;height:34px;color:#999;letter-spacing:-0.1em;line-height:24px }
#tnb_m a:focus, #tnb a:hover, #tnb a:active {text-decoration:none; color:#000;}
#tnb_m img {margin-right:0px}


#hd_wrapper_m {position:relative;margin:0 auto; max-width:1170px; padding:0; height:66px; zoom:1}
#hd_wrapper_m:after {display:block;visibility:hidden;clear:both;content:""}

.rain .logo_m {position:absolute; margin:20px 10px; border:0px solid red; z-index:999999; }




/* 화면낭독기 사용자용 */
#hd_login_msg {position:absolute;top:0;left:0;font-size:0;line-height:0;overflow:hidden}
.msg_sound_only, .sound_only {display:inline-block !important;position:absolute;top:0;left:0;margin:0 !important;padding:0 !important;font-size:0;line-height:0;border:0 !important;overflow:hidden !important}
/* 본문 바로가기 */
#skip_to_container a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skip_to_container a:focus, #skip_to_container a:active {width:100%;height:75px;background:#21272e;color:#fff;font-size:2em;font-weight:bold;text-align:center;text-decoration:none;line-height:3.3em}

/* 상단메뉴
top_menu_pc.css
topmenu_mobile.css 상단 메뉴사이 | 구분선 색
*/


/*
|---------------------------------------------------------|

                      ↓ 메인화면 ↓

|---------------------------------------------------------|
*/

/* 메인 비주얼 텍스트 */
.main-tx {margin-top:10%; margin-bottom:20%;}

.main-tx02 {margin-top:18%; margin-bottom:15%;}


.line{margin:0 auto; width:200px; border-top:1px solid #D3D3D3;}

/* 메인 컨텐츠 */


/* 메인 백그라운드 */
.main01{background: url("/theme/store/mobile/shop/img/main/main_img01.jpg") no-repeat center center; background-size: cover;  position: relative; }/* 메인 */
.main02{background: url("/theme/store/mobile/shop/img/main/main_img02.jpg") no-repeat center center; background-size: cover;  position: relative;}/* 메인 */


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

}

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

}


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

}


.bg01{background: url("../img/bg01.jpg") repeat 10% 80%;}/* 메인컨텐츠 */
.bg02{background: url("../img/bg02.jpg") repeat 40% 40%;}/* 메인컨텐츠 */
.bg03{background: url("../img/bg03.jpg") repeat 10% 80%;}/* 메인컨텐츠 */


/*
|---------------------------------------------------------|

                      ↓ 서브화면 ↓

|---------------------------------------------------------|
*/
/* 서브 백그라운드 */
 .sub01{background: url("../img/sub_img.jpg") no-repeat center center;  background-size: cover; height:auto;}/* 메인 */

/* 서브 비주얼 텍스트 */
.sub-tx {text-align:center; margin-top:4%; margin-bottom:5%;}

/*좌측메뉴바*/
.rain .list-group-item:first-child{border-top-left-radius:0px;border-top-right-radius:0px; padding-left:40px; padding-right:40px;}
.rain .list-group-item:last-child{margin-bottom:0;border-bottom-right-radius:0px;border-bottom-left-radius:0px; padding-left:40px; padding-right:40px;}
.rain .list-group-item.active,.list-group-item.active:focus,
.list-group-item.active:hover{z-index:2;color:#fff;background-color:#999;border-color:#999}

/* 서브유틸 */
.rain .lead{margin-bottom:20px;font-size:30px;font-weight:500;line-height:1.4}
.rain .breadcrumb{padding:13px 0 0 ;margin-bottom:0px;list-style:none;background-color:#fff;border-radius:4px}
.rain .breadcrumb>li{display:inline-block}.breadcrumb>li+li:before{padding:0 5px;color:#ccc;content:"/\00a0"}

.rian .sub01{}/* 서브 */
.rian .sub02{}/* 서브 */


/*
|---------------------------------------------------------|

                      ↓ 하단정보 ↓

|---------------------------------------------------------|
*/

/*하단 카피라이트*/
.copy01 {background-color:#fff; color:#555; line-height:150%; font-size:14px; border-top:1px solid #e5e5e5; padding-top:15px;}
.copy01 span{color:#fff;}
.copy02 {background-color:#1f1f1; color:#fff; border-top:1px solid #eeeeee; line-height:150%; font-size:13px;}
.copy02 span{color:#999;}