@charset "utf-8";
/* layout.css는 전체적인 레이아웃 스타일을 정의합니다. */ 

#skipToContent a {z-index:100000;position:absolute;top:0;left:0;width:1px;height:1px;font-size:0;line-height:0;overflow:hidden}
#skipToContent a:focus, 
#skipToContent a:active {width:200px;height:50px;background:#21272e;color:#fff;font-size:14px;font-weight:bold;text-align:center;text-decoration:none;line-height:50px}

.only-desktop-tablet {display:block;}
.only-desktop {display:block;}
.only-tablet {display:none;}
.only-mobile {display:none;}

.contain {max-width:1300px; padding-left:30px; padding-right:30px; margin:0 auto;}

#sub #wrapper {padding-top:211px;}

/* header */
#header {position:fixed; top:0; left:0; width:100%; color:#fff; background:#231f20; transition:.2s; z-index:101;}
#header .contain {max-width:1660px;}
#main #header {background:rgba(0,0,0,.6);}

.global {position:relative; z-index:20; border-bottom:1px solid #fff;}
.global .contain {display:flex; justify-content:space-between; align-items:center; height:51px;}
.global .left {display:flex; align-items:center;}
.global .right {display:flex; align-items:center;}

.top-sns {display:flex;}
.top-sns a {width:24px; height:24px; margin-left:24px; background-position:50% 50%; background-repeat:no-repeat;}
.top-sns a:first-child {margin-left:0;}
.top-sns .i-line {background-image:url("../images/common/sns_line.png");}
.top-sns .i-kakao {background-image:url("../images/common/sns_kakao.png");}
.top-sns .i-insta {background-image:url("../images/common/sns_insta.png");}

.top-search {position:relative; width:265px; margin-left:40px;}
.top-search .input {display:block; width:100%; height:31px; padding:0 35px 0 15px; font-size:13px; line-height:1.5em; letter-spacing:0; background:#fff; border:0; border-radius:10px;}
.top-search .submit {position:absolute; top:50%; right:12px; margin-top:-9px; width:18px; height:18px; background:url("../images/common/search.png") 50% 50% no-repeat; border:0; overflow:hidden; text-indent:-9999em;}

.top-links {display:flex;}
.top-links a {width:24px; height:24px; margin-left:13px; background-position:50% 50%; background-repeat:no-repeat;}
.top-links a:first-child {margin-left:0;}
.top-links .i-logout {background-image:url("../images/common/icon_logout.png");}
.top-links .i-login {background-image:url("../images/common/icon_user.png");}
.top-links .i-mypage {background-image:url("../images/common/icon_mypage.png");}
.top-links .i-cart {background-image:url("../images/common/icon_cart.png");}
.top-links .i-menu {background-image:url("../images/common/icon_menu.png"); margin-left:17px;}

.language {position:relative; width:90px; margin-left:23px;}
.language .tt {display:block; padding:0 20px; line-height:30px; border:1px solid #fff; border-radius:20px; background:#1d1e1d url("../images/common/select.png") right 15px center no-repeat;}
.language ul {display:none; position:absolute; left:0; margin-top:-1px; width:100%; padding:10px 0; background:#1d1e1d; border:1px solid #fff; border-radius:16px;}
.language ul li a {display:block; padding:0 20px; line-height:22px;}

.header {position:relative; padding-top:29px; transition:.2s; z-index:10;}

.sitelogo {height:58px; display:flex; align-items:center; justify-content:center; transition:.2s;}
.sitelogo img {display:block; margin:0 auto;}

.gnb {position:relative;}
.gnb > ul {margin:0 -15px; display:flex; justify-content:space-between;}
.gnb > ul > li {padding:0 15px;}
.gnb > ul > li > a {position:relative; display:block; height:72px; overflow:hidden; font-size:18px; font-weight:300; line-height:1.3em; transition:.2s;}
.gnb > ul > li > a:after {content:""; position:absolute; bottom:0; left:50%; width:0; height:5px; background:#fff; transition:.2s;}
.gnb > ul > li > a span {display:flex; align-items:center; justify-content:center; height:72px; transition:.4s;}
.gnb > ul > li.active > a span {transform:translateY(-100%)}
.gnb > ul > li.active > a:after {left:0; width:100%;}
.gnb .submenu {position:absolute; left:0; width:100%; display:none; padding:40px 0 58px;}
.gnb .submenu p {font-size:24px; font-weight:500; line-height:1.3em; letter-spacing:-.025em; margin-bottom:36px;}
.gnb .submenu ul {display:flex; flex-wrap:wrap; margin:-6px;}
.gnb .submenu ul li {padding:6px; width:14.285714%; max-width:246px;}
.gnb .submenu ul li a {display:block; font-size:16px; font-weight:300; letter-spacing:-.025em; line-height:41px; text-align:center; border:1px solid #fff; border-radius:6px;}
.gnb .submenu ul li a:hover {background:rgba(0,0,0,.5);}

.submenu-bg {display:none; position:absolute; left:0; width:100%; background:rgba(0,0,0,.6); border-top:1px solid #fff;}

.allmenu {display:none; position:fixed; top:0; left:0; width:100%; height:100%; text-align:center; background:rgba(35,31,32,.95); z-index:1000;}
.allmenu .nav {height:100%;}
.allmenu .nav > ul {display:flex; height:100%;}
.allmenu .nav > ul > li {flex:1; padding:11% 10px 0; border-left:1px solid rgba(204,204,204,.2); opacity:0;}
.allmenu .nav > ul > li:first-child {border-left:0;}
.allmenu .nav > ul > li > a .en {display:none;}
.allmenu .nav > ul > li > a .ko {display:block; color:#ccc; font-size:20px; font-weight:500; line-height:1.3em; margin-bottom:18px;}
.allmenu .nav .submenu p {display:none;}
.allmenu .nav .submenu ul li a {display:block; color:#999; font-size:15px; font-weight:300; line-height:1.5em; padding:7px 0;}
.allmenu .nav .submenu ul li a:hover {color:#fff;}
.allmenu .close {position:absolute; top:30px; right:40px; width:44px; height:44px;}
.allmenu .close:before,
.allmenu .close:after {content:" "; position:absolute; top:50%; left:0; width:100%; height:1px; background:#acabab;}
.allmenu .close:before {transform:rotate(45deg);}
.allmenu .close:after {transform:rotate(-45deg);}

html.allmenu-show {overflow:hidden;}
html.allmenu-show .allmenu .nav > ul > li:nth-child(1) {animation:nav_ani 1.2s .15s forwards;}
html.allmenu-show .allmenu .nav > ul > li:nth-child(2) {animation:nav_ani 1.2s .3s forwards;}
html.allmenu-show .allmenu .nav > ul > li:nth-child(3) {animation:nav_ani 1.2s .45s forwards;}
html.allmenu-show .allmenu .nav > ul > li:nth-child(4) {animation:nav_ani 1.2s .6s forwards;}
html.allmenu-show .allmenu .nav > ul > li:nth-child(5) {animation:nav_ani 1.2s .75s forwards;}
html.allmenu-show .allmenu .nav > ul > li:nth-child(6) {animation:nav_ani 1.2s .9s forwards;}

@keyframes nav_ani{
	0% {opacity:0;}
	100% {opacity:1}
} 

.header-fixed .header {padding-top:15px;}
.header-fixed .sitelogo {height:35px;}
.header-fixed .gnb > ul > li > a,
.header-fixed .gnb > ul > li > a span {height:65px;}

#header.header-up {transform:translateY(-110px)}

#container {position:relative;}

/* main */
.hidden-text {overflow:hidden;}

.main-visual {position:relative; color:#fff;}
.main-visual .swiper-slide {overflow:hidden; height:calc(100vh - 140px); overflow:hidden;}
.main-visual .swiper-slide .img {position:relative; height:100%; transition:5s linear; transform:scale(1.1);}
.main-visual .swiper-slide .img img {position:absolute; position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.main-visual .swiper-slide .mobile {display:none;}
.main-visual .caption {position:absolute; top:43%; left:50%; padding:0 35px; z-index:40;}
.main-visual .caption p {opacity:0; transition-property:opacity,transform; transform:translate3d(50px,0,0); transition-duration:1.8s; transition-timing-function:cubic-bezier(.175,.885,.32,1.275);}
.main-visual .caption .txt1 {font-size:65px; font-weight:600; line-height:1em; letter-spacing:-.03em; margin-bottom:32px;}
.main-visual .caption .txt2 {font-size:24px; line-height:1.5em; letter-spacing:-.02em;}
.main-visual .swiper-slide-active .img {transform:scale(1);}
.main-visual .swiper-slide-active .caption p {opacity:1; transform: translateZ(0);}
.main-visual .swiper-slide-active .txt1 p {transition-delay:.5s;}
.main-visual .swiper-slide-active .txt2 p {transition-delay:.8s;}
.main-visual .swiper-pagination {position:absolute; bottom:47px; left:0; width:100%; text-align:center; display:flex; justify-content:center; z-index:50;}
.main-visual .swiper-pagination-bullet {display:block; width:20px; height:20px; background-color:transparent; background-position:50% 50%; background-repeat:no-repeat; margin:0 5px; opacity:1; transition:.2s;}
.main-visual .swiper-pagination-bullet:nth-child(1) {background-image:url("../images/main/dot_1_off.png");}
.main-visual .swiper-pagination-bullet:nth-child(2) {background-image:url("../images/main/dot_2_off.png");}
.main-visual .swiper-pagination-bullet:nth-child(3) {background-image:url("../images/main/dot_3_off.png");}
.main-visual .swiper-pagination-bullet:nth-child(4) {background-image:url("../images/main/dot_1_off.png");}
.main-visual .swiper-pagination-bullet:nth-child(5) {background-image:url("../images/main/dot_2_off.png");}
.main-visual .swiper-pagination-bullet:nth-child(6) {background-image:url("../images/main/dot_3_off.png");}
.main-visual .swiper-pagination-bullet-active {animation:rotate 5s linear forwards;}
.main-visual .swiper-pagination-bullet-active:nth-child(1) {background-image:url("../images/main/dot_1_on.png");}
.main-visual .swiper-pagination-bullet-active:nth-child(2) {background-image:url("../images/main/dot_2_on.png");}
.main-visual .swiper-pagination-bullet-active:nth-child(3) {background-image:url("../images/main/dot_3_on.png");}
.main-visual .swiper-pagination-bullet-active:nth-child(4) {background-image:url("../images/main/dot_1_on.png");}
.main-visual .swiper-pagination-bullet-active:nth-child(5) {background-image:url("../images/main/dot_2_on.png");}
.main-visual .swiper-pagination-bullet-active:nth-child(6) {background-image:url("../images/main/dot_3_on.png");}
.main-visual .slide-btn {position:absolute; top:58%; width:30px; height:30px; background-position:50% 50%; background-repeat:no-repeat; z-index:50;}
.main-visual .slide-btn.prev {left:2.5%; background-image:url("../images/main/slide_prev.png");}
.main-visual .slide-btn.next {right:2.5%; background-image:url("../images/main/slide_next.png");}

@keyframes rotate{
	0% {transform:rotate(0); }
	100% {transform:rotate(360deg); }
} 

.main-counter {display:flex; align-items:center; height:140px; color:#fff; font-weight:200; line-height:1.5em; text-align:center; background:#1d1e1d; overflow:hidden;}
.main-counter .counter {font-weight:700; font-size:34px; line-height:1em; margin-bottom:15px;}
.main-counter .add-txt:after {content:"M"}
.main-counter .col {flex:1; position:relative; padding:0 15px;}
.main-counter .col:before {content:""; position:absolute; top:50%; left:0; width:1px; height:56px; margin-top:-28px; background:#575757;}
.main-counter .col:first-child::before {display:none;}

.m-head {text-align:center; background:url("../images/main/title_bg.png") 50% 12px no-repeat; margin-bottom:60px;}
.m-head h2 {font-size:32px; font-weight:600; line-height:1.3em;}
.m-head p {color:#767676; font-size:18px; font-weight:200; line-height:1.45em; margin-top:28px;}
.m-head.bg-none {background:none;}

.main-best {padding:170px 0; overflow:hidden;}
.main-best .contain {max-width:1540px;}
.main-best .m-head {margin-bottom:40px;}
.main-best .tab {text-align:center; margin-bottom:87px;}
.main-best .tab ul {display:flex; justify-content:center; margin:-5px;}
.main-best .tab ul li {padding:5px; width:120px;}
.main-best .tab ul li a {position:relative; display:block; color:#999; font-weight:200; line-height:1.3em;}
.main-best .tab ul li a:after {content:""; position:absolute; bottom:0; left:50%; margin-left:-4px; width:8px; height:8px; background:#222; border-radius:100%; opacity:0; transition:.2s;}
.main-best .tab ul li i {display:block; width:50px; height:50px; margin:0 auto 10px; background-position:50% 50%; background-repeat:no-repeat; background-size:contain;}
.main-best .tab ul li .ico-1 {background-image:url("../images/main/goods_cate_1.png");}
.main-best .tab ul li .ico-2 {background-image:url("../images/main/goods_cate_2.png");}
.main-best .tab ul li .ico-3 {background-image:url("../images/main/goods_cate_3.png");}
.main-best .tab ul li .ico-4 {background-image:url("../images/main/goods_cate_4.png");}
.main-best .tab ul li .ico-5 {background-image:url("../images/main/goods_cate_5.png");}
.main-best .tab ul li .ico-6 {background-image:url("../images/main/goods_cate_6.png");}
.main-best .tab ul li .ico-7 {background-image:url("../images/main/goods_cate_7.png");}
.main-best .tab ul li.active a {color:#333; font-weight:500;}
.main-best .tab ul li.active a:after {bottom:-19px; opacity:1;}
.main-best .tab ul li.active .ico-1 {background-image:url("../images/main/goods_cate_1_on.png");}
.main-best .tab ul li.active .ico-2 {background-image:url("../images/main/goods_cate_2_on.png");}
.main-best .tab ul li.active .ico-3 {background-image:url("../images/main/goods_cate_3_on.png");}
.main-best .tab ul li.active .ico-4 {background-image:url("../images/main/goods_cate_4_on.png");}
.main-best .tab ul li.active .ico-5 {background-image:url("../images/main/goods_cate_5_on.png");}
.main-best .tab ul li.active .ico-6 {background-image:url("../images/main/goods_cate_6_on.png");}
.main-best .tab ul li.active .ico-7 {background-image:url("../images/main/goods_cate_7_on.png");}
.main-best .slider {position:relative; padding:0 110px;}
.main-best .swiper-slide a {display:block; border-radius:100%; text-align:center; overflow:hidden; position:relative; transition:.6s; transform:scale(.76);}
.main-best .swiper-slide img {position:absolute; top:50%; left:0; transform:translateY(-50%); -ms-transform:translateY(-50%); -webkit-transform:translateY(-50%); width:100%; height:auto !important; max-width:100%; min-height:100%; object-fit:cover;}
.main-best .swiper-slide .img {position:relative; padding-bottom:100%; overflow:hidden;}
.main-best .swiper-slide .img-ov {position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; transition:.6s; opacity:0;}
.main-best .swiper-slide .img-ov:after {content:""; position:absolute; top:0; left:0; width:100%; height:100%; background:#000; opacity:.2;}
.main-best .swiper-slide .tit {position:absolute; top:50%; left:0; width:100%; padding:15px; color:#fff; font-size:24px; font-weight:500; line-height:1.5em; transform:translateY(-40%); transition:.6s; opacity:0;}
.main-best .swiper-slide a:hover .img-ov {opacity:1;}
.main-best .swiper-slide a:hover .tit {transform:translateY(-50%); opacity:1;}
.main-best .swiper-slide-active a {transform:scale(1);}
.main-best .slide-btn {position:absolute; top:50%; margin-top:-40px; width:80px; height:80px; background-position:50% 50%; background-repeat:no-repeat; z-index:50;}
.main-best .slide-btn.prev {left:-20px; background-image:url("../images/main/slide2_prev.png");}
.main-best .slide-btn.next {right:-20px; background-image:url("../images/main/slide2_next.png");}

.main-new {padding-bottom:170px; text-align:center; overflow:hidden;}
.main-new .contain {max-width:1500px;}
.main-new .list {position:relative;}
.main-new .list .slick-track {margin:0 !important;}
.main-new .list ul {margin:-21px;}
.main-new .list ul li {padding:21px; text-align:left;}
.main-new .list ul li a {display:block;}
.main-new .list ul li .thumb {border:1px solid #a5a5a5; margin-bottom:13px; transition:ease .4s;}
.main-new .list ul li .thumb .img {position:relative; padding-bottom:100%; overflow:hidden;}
.main-new .list ul li .thumb .img img {position:absolute; top:50%; left:50%; transition:ease .4s; transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}
.main-new .list ul li .tit {font-size:17px; line-height:1.5em; transition:ease .4s; margin-bottom:10px;}
.main-new .list ul li .cate {display:inline-block; width:145px; text-align:center; border-radius:20px; color:#000; line-height:33px;}
.main-new .list ul li .cate.type1 {background:#96daf7;}
.main-new .list ul li .cate.type2 {background:#f9c4cd;}
.main-new .list ul li a:hover .thumb {box-shadow:8px 8px 10px rgba(0,0,0,.1);}
.main-new .list ul li a:hover .thumb .img img {transform:scale(1.015) translate(-50%,-50%);}
.main-new .list ul li a:hover .tit {color:#000; font-weight:500;}
.main-new .slide-btn {position:absolute; top:50%; width:52px; height:52px; margin-top:-60px; background-color:#fff; background-position:50% 50%; background-repeat:no-repeat; background-size:13px auto; border:1px solid #a5a5a5; border-radius:100%; z-index:50;}
.main-new .slide-prev {left:-70px; background-image:url("../images/main/slide2_prev.png");}
.main-new .slide-next {right:-70px; background-image:url("../images/main/slide2_next.png");}

.main-all {padding:92px 0 110px; text-align:center; overflow:hidden; background:#f7f9f9;}
.main-all .contain {max-width:1500px}
.main-all .m-head {margin-bottom:95px;}
.main-all .list ul {display:flex; flex-wrap:wrap; margin:-20px;}
.main-all .list ul li {width:20%; text-align:left; padding:20px;}
.main-all .list ul li a {display:block;}
.main-all .list ul li .thumb {margin-bottom:18px; transition:ease .4s; box-shadow:0 0 15px rgba(0,0,0,.15);}
.main-all .list ul li .thumb .img {position:relative; padding-bottom:100%; overflow:hidden;}
.main-all .list ul li .thumb .img img {position:absolute; top:50%; left:50%; transition:ease .4s; transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}
.main-all .list ul li .tit {font-size:17px; line-height:1.5em; margin-bottom:10px;}
.main-all .list ul li a:hover .thumb .img img {transform:scale(1.015) translate(-50%,-50%);}
.main-all .btn-area {margin-top:100px;}
.main-all .btn {display:inline-block; width:420px; text-align:center; color:#96daf7; font-size:24px; font-weight:500; line-height:44px; background:#fff; border:3px solid #96daf7; border-radius:40px;}
.main-all .btn:hover {background:#96daf7; color:#fff;}

/* sub */
#contArea {max-width:1300px; padding:120px 30px 220px; margin:0 auto;}
#contArea.wide {max-width:100%; padding-left:0; padding-right:0;}

.sub-title {text-align:center; margin-bottom:95px;}
.sub-title h2 {color:#221e1f; font-size:30px; font-weight:600; line-height:1.3em;}
.sub-title p {font-weight:300; line-height:1.45em; margin-top:14px;}
.sub-title.mg { margin-bottom:30px;}
.sub-title.type2 h2 {font-size:34px;}

.real-cont {min-height:500px;}

/* quick */
#main .quick {top:330px}
#sub .quick {top:190px; right:50%; margin-right:-800px;}

.quick {position:absolute; right:30px; width:90px; text-align:center; transition:.4s; z-index:99;}
.quick.fixed {position:fixed; top:170px !important;}
.quick.bottom-fixed {position:absolute;  top:auto !important; bottom:0;}

.quick-toggle {display:none;}

.quick-links .scroll-top {display:block; color:#fff; font-size:14px; line-height:40px; background:#1d1e1d; border-radius:20px 20px 0 0;}
.quick-links ul {border:1px solid #1d1e1d; border-top:0; background:#fff;}
.quick-links ul li {border-top:1px solid #1d1e1d;}
.quick-links ul li a {display:block; padding:9px 0; color:#111; line-height:1.3em;}
.quick-links ul li img {display:block; margin:0 auto 12px;}

.todayview {margin-top:12px;}
.todayview .tt {font-size:14px; line-height:1.3em;}
.todayview .wrap {overflow:hidden;}
.todayview .items {margin-top:-3px;}
.todayview .items .slick-list {height:auto !important; max-height:309px !important;}
.todayview .items li {padding:6px 0; border-top:1px solid #1d1e1d;}
.todayview .items li a {display:block; position:relative; padding-bottom:100%; overflow:hidden;}
.todayview .items li a img  {position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); -ms-transform:translate(-50%,-50%); -webkit-transform:translate(-50%,-50%); width:auto !important; height:auto !important; max-width:100%; max-height:100%; object-fit:contain;}
.todayview .arrows {display:flex; justify-content:center; margin-top:10px;}
.todayview .slick-arrow {width:40px; height:22px; background-color:transparent; background-position:50% 50%; background-repeat:no-repeat; border:0; overflow:hidden; text-indent:-9999em;}
.todayview .slick-prev {background-image:url("../images/common/todayview_prev.png");}
.todayview .slick-next {background-image:url("../images/common/todayview_next.png");}

/* footer */
#footer {background:#231f20; color:#fff; font-size:14px; font-weight:200; line-height:2em;}
#footer .contain {max-width:1660px;}
#footer address {font-style:normal;}

.foot-links {padding:25px 0; border-bottom:1px solid #393c39;}
.foot-links ul {display:flex; flex-wrap:wrap; margin:-4px -23px;}
.foot-links ul li {padding:4px 23px; font-size:16px; line-height:1.5em;}
.foot-links ul li a {display:block;}
.foot-links ul li a:hover {text-decoration:underline;}

.foot-info {padding:53px 0;}
.foot-info span {display:inline-block;}
.foot-info .f-logo {margin-bottom:20px;}
.foot-info address span {margin-right:14px;}
.foot-info .copyright {margin-top:20px;}
.foot-info .designed {color:#333533;}


[data-aos=fade-left] {
    transform: translate3d(50px,0,0);
}
[data-aos=fade-top] {
    transform: translate3d(50px,0,0);
}