@import url("content.css");
@import url("content_response.css");
@import url("user.css");
@import url("button.css");
@import url("board.css");
@import url("member.css");
@import url("/cmd/css/ajax.css");


#header {box-shadow: 0 1px 1px rgba(0,0,0,.1); }
.sub_bg {position: relative;background-image:url('/images/common/sub_bg01.jpg');background-repeat:no-repeat;background-position:center center;background-size:cover; animation: bgZoomEffect 20s ease-in-out infinite alternate;}
.sub_bg::before {content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background: rgba(0, 0, 0, 0.2);z-index: 1;}
.sub_bg > * {position: relative;z-index: 2; /* 텍스트가 오버레이 위로 나오도록 */}
.sub_bg.bg02 {background-image:url('/images/common/sub_bg02.jpg');}
.sub_bg.bg03 {background-image:url('/images/common/sub_bg03.jpg');}
.sub_bg.bg04 {background-image:url('/images/common/sub_bg04.jpg');}
.sub_bg.bg05 {background-image:url('/images/common/sub_bg05.jpg');}
.sub_bg.bg06 {background-image:url('/images/common/sub_bg06.jpg');}
.sub_bg.bg07 {background-image:url('/images/common/sub_bg07.jpg');}

/* main_title */
.cont_tit {position:relative; max-width:1200px; margin:0 auto;}
.cont_tit h2 {padding-top:75px; text-align:center; font-size:40px; color:#fff; font-weight:700;}
p.sub_slogan {position:relative; top:-250px; text-align:center; font-family:'NotoL'; font-size:40px; color:#fff; line-height:1.2em; font-weight:300; }

/* sub_top */
.sub_top { height:48px; background:url('/images/common/bg_sub_top.png') repeat-x 0 0;}
.sub_top *{ -webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.sub_top .sub_top_in {position:relative; z-index:12; margin:0 auto;}
.snb:after { content:"."; display:block; height:0; clear:both; visibility:hidden;}
.snb > div { float:left; position:relative; margin-right:-1px;}
.snb .home > a { display:block; width:52px; height:48px; padding-top:15px; background-color:#797a7c; text-align:center;}
.snb .home > a:before { content:"\f0fd"; display:inline-block; font-family:'FontAwesome'; font-size:17px; line-height:17px; color:#fff;}
.snb >.depth1_area, .snb>.depth2_area { width:200px;}
.snb .open_depth { display:block; position:relative; height:48px; padding:12px 20px 12px 25px; font-size:14px; color:#555; border:1px solid #ccc; background-color:#fff; overflow: hidden; text-overflow: ellipsis;  -o-text-overflow: ellipsis; white-space:nowrap; word-wrap: normal !important;}
.snb .open_depth.on { background-color:#f5f5f5;}
.snb .open_depth:after { content:"\f0d7"; display:inline-block; position:absolute; top:18px; right:14px; font-family:'FontAwesome'; font-size:11px; line-height:11px; color:#9a9a9a;}
.snb .open_depth.on:after { content:"\f0d8"; top:17px;}
.snb .menu { display:none; position:absolute; top:48px; left:0; width:100%;}
.snb .menu > li > a { display:block; padding:12px 5px 13px 25px; border:1px solid #ccc; border-top:none; background-color:#e2e2e2; color:#555; font-size:14px;}
.snb .menu > li > a:hover { background-color:#fff; color:#222;}

/* title */
.sub_title { max-width:1200px; margin:0 auto; padding-bottom:40px; text-align:center;}
.sub_title > h3 {padding-top:50px; color:#222; font-size:40px; font-weight:500; line-height:1.2;}

#container>.content {position:relative; padding: 0; margin:0 auto;}
#container>.content:before,
#container>.content:after {content:''; display:table;}
#container>.content:after {clear: both;}
.body_cont,  .body_cont * {box-sizing:border-box;}
.body_cont h3,
span.subtitle {display:inline-block; margin:-6px 0 33px; padding-left:0.3em; font-size:26px; letter-spacing:0.3em; font-weight:500; color:#F06479;  line-height:1.4; border-bottom:2px solid #F06479; }
h4.titSt{position:relative;  width: 100%; margin:60px 0 30px 0; padding-bottom:20px; line-height:1em; font-size:26px; color:#333;letter-spacing:-1px;}
h4.titSt:after{content: "";display: block;width: 50px;height: 4px;background-color: #F6732E;position: absolute;left: 0;bottom: 0;}
h4.titSt:first-child, h4.titSt2:first-child  {margin-top:0;}
h4.titSt2 {position:relative; margin:60px 0 50px 0; line-height:1em;font-size:30px;color:#333;text-align:center;letter-spacing:-1px;}

h5.titSt {position:relative; margin: 20px 0 0 0; padding:0 0 0 14px; color:#555;  font-size:16px; line-height: 24px; font-weight:500;background: url('/images/common/h5_dot.png') 4px 8px no-repeat; font-weight: normal; letter-spacing:-1px;}
h6.titSt {position:relative; margin:10px 0 0 0; padding:0 0 0 20px; color:#0090ff; font-size: 15px;background:url('/images/common/box_h6_dot.png') left 5px no-repeat; line-height: 24px; }


/* Grid System */
.row {position: relative;}
.row:after, .col:after{content: ""; display: block; height: 0; clear: both; visibility: hidden;}
.col {position: relative; display: block; float: left; width: 100%;}
.col, .col * {-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;}
.leftCon {padding-right:2%;}
.rightCon {padding-left:2%;}
.midCon {padding:0 1%;}

@media screen and (max-width:1023px){
	.sub_title { padding-bottom:30px;}
	.sub_title>h3 {padding-top:40px; font-size:36px; }
}

@media screen and (max-width:960px){
    .sub_bg {background-size:cover;}
	.cont_tit h2 {padding-top:60px;}
    p.sub_slogan {display:none;}
}

@media screen and (max-width:767px){
	.cont_tit h2 {margin-top:0; padding-top:35px; text-align:center; font-size:24px; line-height:35px; color:#fff;}
	.cont_tit .search {top:70px; right:10px; }
	.cont_tit .mall-gnb {top:115px; right:10px;}

	.sub_top {height:35px; background:url('/images/common/bg_sub_top_m.png') repeat-x 0 0; background-size:1px 35px;}
	.snb {padding-left:35px;}
	.snb .home {position:absolute; top:0; left:0; z-index:10;}
	.snb .home>a {width:35px; height:35px; padding-top:6px;}
	.snb .home>a:before {font-size:13px; line-height:13px;}
	.snb>.depth1_area, .snb>.depth2_area { width:50%;}
	.snb .open_depth {height:35px; padding:7px 12px 8px 7px; font-size:12px; overflow:hidden; text-overflow:ellipsis;}
	.snb .open_depth:after {top:13px; right:6px; font-size:9px; line-height:9px;}
	.snb .open_depth.on:after {top:12px;}
	.snb .menu {top:35px;}
	.snb .menu>li>a {padding:7px 5px 8px 7px; font-size:12px;}

	.sub_title {padding:0 4% 20px;}
	.sub_title>h3 {padding-top:30px; font-size:26px;}

	.leftCon {padding-right:0;}
	.rightCon {padding-left:0;}
	.midCon {padding:0;}

}

@media screen and (max-width:540px){
	.sub_bg {animation: none !important;background-size: cover !important;}
	h4.titSt{margin:30px 0 25px 0; padding-bottom:10px;font-size:22px;}
	h4.titSt:before{width:36px;}
	h4.titSt2 {margin:30px 0 20px 0; font-size:24px;}
	.row {margin-left:0;margin-right:0;}
}

@media screen and (max-width:480px){
	.cont_tit .search {width: 170px;}
	.cont_tit .search input.text {width: 140px; }
}