@charset "UTF-8";

/* 넓이 설정 */
.bodyWrap {margin:0 auto; min-width:360px; word-break:keep-all; transition:all ease 0.4s 0.3s;}
.colWide {margin:0 auto; padding:0 15px; width:100%; min-width:360px;}
.web_none {display:none;}

/* 콘텐츠 영역 설정 */
.mainContents {position:relative; display:block; background:#101010;}
.subContents {position:relative; display:block;}
.inner {position:relative; margin:0 auto; padding:0 15px; max-width:1630px;}

/* 상단 레이아웃 디자인 */
.header {position:fixed; top:0; left:0; width:100%; padding:28px 0; transition:all ease 0.4s 0.0s; z-index:99;}
.header .inner {display:flex; align-items:stretch;}
.header.scroll_on {min-height:auto; background:#fff;}
.header .logo a {display:block; width:200px; height:30px; margin-top:5px; color:#fff; font-size:30px;}
.header.scroll_on .logo a {color:#000;}

.menuWrap {display:flex; justify-content:space-between; align-items:baseline; width:100%;}
.mainMenu {display:flex; margin:0 auto;}
.mainMenu a {transition:all ease 0.3s 0.0s;}
.mainMenu > li > a {display:block; padding:10px 35px; font-size:19px; color:#bbb;}
.mainMenu > li > a [href="javascript:;"] {cursor:inherit;}
.mainMenu ul {display:none; padding:10px 0; margin:7px 0 0; font-size:15px; border-top:2px solid transparent;}
.mainMenu ul li a {display:block; padding:5px 0; margin-left:35px;}
.mainMenu ul li a:hover {color:#ffa500;}
.header.scroll_on .mainMenu > li > a,.header.scroll_on .menuWrap .top_shop a {color:#111}
.menuWrap .top_shop a {color:#bbb; font-size:19px; display:flex;}
.menuWrap .top_shop a i {margin:3px 10px 0 0;}

.drawerBtn,.mainMenu .box_menu {display:none;}
.bgAllMenu {display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:#000;}

.header.sub_menu {background:#fff; border-bottom:1px solid #eee;}
.header.sub_menu .mainMenu > li > a,.header.sub_menu .menuWrap .top_shop a {color:#000;}
.header.sub_menu .logo a {color:#000;}

/* 하단 레이아웃 디자인 */
.footer {position:relative; width:100%;  display:block; padding:80px 0; background:#000; font-size:16px;}
.footer .area {line-height:1.4em; color:#bbb; }
.footer .area .br_none {display:none;}
.footer .area .footer-top {display:flex; justify-content:space-between; align-items: center;}
.footer .footer-top .footer-logo img {width:120px;}
.footer .footer-content {position:relative; margin-top:40px;}
.footer .footer-content p {margin-bottom:10px;}
.footer .footer-content span {margin-right:38px;}
.footer .footer-content strong {margin-right:14px;}
.footer .footer-content .copy {margin-top:20px;}
.footer .footer-content .br_none {display:none;}
.footer-logo {font-size:30px; color:#fff;}

.footer .snsInfo {display:flex; }
.footer .snsInfo a {margin-left:8px;}
.footer .snsInfo a:first-child {margin-left:0;}
.scrollTopBoxs {position:fixed; right:20px; bottom:30px; z-index:999999; display:flex; align-items:center; justify-content:center;}
.scrollTopBoxs .scrollTopBtns { background-image:url('/home/images/scrollTop.png'); background-position:center center; background-repeat:no-repeat; background-size:contain; width:79px; height:79px; display:block; scroll-behavior:smooth; }

.news_sec1, .news_sec1 > h2, .news_sec1 > h3, .news_sec1 > p, 
.news_sec2, 
.news_sec3, .news_sec3 > h3, .news_sec3 > p, 
.news_sec4, .news_sec4 > h2, .news_sec4 > p, 
.news_sec5, .news_sec6, .news_sec7, .news_sec8 {transform:translateY(50px); transition:opacity 0.5s ease-out, transform 1s ease-out; opacity:0;}

.news_sec1, .news_sec1 > h2.visible, .news_sec1 > h3.visible, .news_sec1 > p.visible, 
.news_sec2.visible, 
.news_sec3.visible, .news_sec3 > h3.visible,.news_sec3 > p.visible,
.news_sec4.visible, .news_sec4 > h2.visible,.news_sec4 > p.visible,
.news_sec5.visible, .news_sec6.visible, .news_sec7.visible, .news_sec8.visible {opacity:1; transform:translateY(0);}

.news_sec1>.scaleimg {transform:translateY(0); transition:opacity 1s ease-out, transform 1s ease-out; opacity:0; transform: scale(0.8);}
.news_sec1>.scaleimg.visible {opacity:1; transform:translateY(0); transform: scale(1.0); transform-origin: bottom;}

/* 미디어쿼리 적용 */
@media screen and (max-width:1200px) {
	.footer {padding:50px 0;}
}

@media screen and (max-width:1024px) {
	.header {padding:9px 0;}
	.header .logo a {width:120px; font-size:20px;}
	.web_none {display:block;}
	.web_view {display:none;}
	.content-body {padding-top:50px; padding-bottom:50px;}

	.menuWrap {display:block; position:fixed; top:0; right:-300px; width:300px; height:100%; background:#000;}
	.mainMenu {display:block; text-align:left;}
	.mainMenu > li {position:relative;}
	.mainMenu > li a {padding:30px 0 0 0;}
	.header.sub_menu .mainMenu > li > a, .header.sub_menu .menuWrap .top_shop a {color:#bbb;}
	.mainMenu > li ul li a {color:#fff; margin-left:0; font-size:14px;}
	.mainMenu > li > a:after {content:"\e944"; position:absolute; top:30px; right:20px; width:20px; height:20px; line-height:20px; display:block; text-indent:0; color:#888; vertical-align:middle; font-family:'xeicon'; transition:all ease 0.3s 0s;}
	.mainMenu > li.gotChild > a:after {content:"\e941";}
	.mainMenu > li.on > a:after {border-color:#fff;}
	.mainMenu > li.on > a:after {color:#fff;transform:rotate(180deg);}
	.mainMenu ul {padding:0 0;}
	.mainMenu ul li:last-child {padding-bottom:0;}
	.mainMenu ul li:first-child {padding-top:0; margin-top:0; border-top:0;}
	.mainMenu .box_menu {display:block; position:absolute; top:0; width:100%; height:70px; background-color:#ffa500;}
	.mainMenu .box_menu span{ font-size:20px; line-height:70px; letter-spacing:-0.025em; color:#fff; padding-left:35px;}
	.mainMenu .m_mt {margin-top:70px;}
	.menuWrap .top_shop {position:absolute; bottom:60px;}

	.drawerBtn {display:block; position:fixed; top:10px; right:15px;}
	.drawerBtn button {font-size:30px; color:#fff}
	.header.sub_menu .drawerBtn button {color:#bbb}
	.drawerBtn button i {transition:all ease 0.7s 0s;}
	.drawerBtn.on button {color:#fff;}
	.drawerBtn.on button i {transform:rotate(180deg);}
	.scrollTopBoxs .scrollTopBtns {width:60px; height:60px;}
	.footer-logo {font-size:20px;}
}

@media screen and (max-width:768px) {
	.footer {padding:40px 0; font-size:13px}
	.footer .footer-top .footer-logo img {width:80px;}
	.footer .snsInfo img {width:28px;}
	.footer .snsInfo > div {width:100%; text-align:center;}
	.footer .footer-content .br_none {display:block;}
	.footer .snsInfo a {margin-left:4px;}
}

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

}

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