@charset "utf-8";

/*레이아웃*/
#header {width:100%; height:140px}

/*컨테이너*/
.container {position:relative; margin:0 auto; width:1200px}

/*헤더 영역*/
.header {position:relative; text-align:center}
.header h1 {display:inline-block; float:left; padding-top:26px}
.header a.map {position:absolute; left:50%; top:35px; transform:translateX(-50%); font-size:14px; font-weight:400; color:#111; width:345px; text-align:left; transition:color .3s}
.header a.map:after {content:""; position:absolute; left:0; top:28px; width:345px; height:1px; background:#111}
.header a.map:hover {color:#0078ae}
.header .util-nav {float:right}
.header .util-nav ul {font-size:0; padding-top:32px}
.header .util-nav li {display:inline-block}
.header .util-nav li > a {display:block; font-size:14px; font-weight:400; color:#111; padding:10px 10px}
.header .util-nav li > a:last-child {padding-right:0}
.header .util-nav li > a:hover {text-decoration:underline}

/*메뉴 영역*/
#gnb {width:100%; height:80px; border-bottom:1px solid #e4e4e4; z-index:99}
#gnb .gnb-inner > ul {font-size:0; padding-top:26px; float:left}
#gnb .gnb-inner > ul > li {display:inline-block; position:relative}
#gnb .gnb-inner > ul > li > a {display:block; font-size:18px; font-weight:400; color:#111; padding:0 65px; line-height:54px}
#gnb .gnb-inner > ul > li:first-child a {padding-left:0}
#gnb .gnb-inner > ul > li:after {content:""; position:absolute; left:0; bottom:10px; width:100%; border-bottom:2px solid #111; transform:scaleX(0); transition:transform 150ms ease-in-out}
#gnb .gnb-inner > ul > li:nth-child(1):after {left:-2%; width:36%}
#gnb .gnb-inner > ul > li:nth-child(2):after {left:35%; width:30%}
#gnb .gnb-inner > ul > li:nth-child(3):after {left:29%; width:42%}
#gnb .gnb-inner > ul > li:nth-child(4):after {left:35%; width:30%}
#gnb .gnb-inner > ul > li:nth-child(5):after {left:33%; width:35%}
#gnb .gnb-inner > ul > li:hover:after {transform:scaleX(1)}
#gnb a.all-menu {display:inline-block; float:right; font-size:18px; font-weight:400; color:#111; margin-top:26px; line-height:54px}

/*더보기 영역*/
.all-menu-pp {display:none; position:absolute; top:152px; left:50%; background: #fff; width:100%; transform:translateX(-50%); text-align:center; border-bottom:3px solid #0078ae; box-shadow:0 4px 2px rgba(0,0,0,.1)}
.all-menu-pp div {display:inline-block}
.all-menu-pp
.all-mn-box, .notice-box {float:left; padding:20px 20px; text-align:left}
.all-menu-pp .all-mn-box h3.tit1, h3.tit2 {padding-right:80px}
.all-menu-pp .all-mn-box h3.tit3 {position:relative; padding-right:160px}
.all-menu-pp .all-mn-box h3 a {display:block; font-size:18px; font-weight:500; color:#111; padding:18px 0; line-height:16px; letter-spacing:-1px}
.all-menu-pp .all-mn-box ul li a {display:block; font-size:16px; font-weight:300; color:#555; padding:14px 0; line-height:14px; letter-spacing:-1px}
.all-menu-pp .notice-box h3 a {display:block; font-size:18px; font-weight:500; color:#111; padding:18px 0; line-height:16px; letter-spacing:-1px}
.all-menu-pp .notice-box ul li a {display:block; font-size:16px; font-weight:300; color:#555; padding:14px 0; line-height:14px; letter-spacing:-1px}
.all-menu-pp .all-mn-box ul li {position:relative}
.all-menu-pp .all-mn-box ul.sub-mn1 li:after {content:""; position:absolute; left:0; bottom:6px; border-bottom:1px solid #111; transform:scaleX(0); transform-origin:0% 50%; transition:transform 150ms ease-in-out}
.all-menu-pp .all-mn-box ul.sub-mn1 li:nth-child(1):after {width:39%}
.all-menu-pp .all-mn-box ul.sub-mn1 li:nth-child(2):after {width:47%}
.all-menu-pp .all-mn-box ul.sub-mn1 li:nth-child(3):after {width:23%}
.all-menu-pp .all-mn-box ul.sub-mn1 li:nth-child(4):after {width:57%}
.all-menu-pp .all-mn-box ul.sub-mn2 li:after {content:""; position:absolute; left:0; bottom:6px; border-bottom:1px solid #111; transform:scaleX(0); transform-origin:0% 50%; transition:transform 150ms ease-in-out}
.all-menu-pp .all-mn-box ul.sub-mn2 li:nth-child(1):after {width:61%}
.all-menu-pp .all-mn-box ul.sub-mn2 li:nth-child(2):after {width:61%}
.all-menu-pp .all-mn-box ul.sub-mn3 li:after {content:""; position:absolute; left:0; bottom:6px; border-bottom:1px solid #111; transform:scaleX(0); transform-origin:0% 50%; transition:transform 150ms ease-in-out}
.all-menu-pp .all-mn-box ul.sub-mn3 li:nth-child(1):after {width:44%}
.all-menu-pp .all-mn-box ul.sub-mn3 li:nth-child(2):after {width:31%}
.all-menu-pp .all-mn-box ul.sub-mn3 li:nth-child(3):after {width:37%}
.all-menu-pp .all-mn-box ul.sub-mn3 li:nth-child(4):after {width:33%}
.all-menu-pp .all-mn-box ul.sub-mn3 li:nth-child(5):after {width:25%}

.all-menu-pp .all-mn-box h3.tit3:after {content:""; position:absolute; right:0; top:46px; width:1px; height:160px; background:#ddd; }

.all-menu-pp
.notice-box h3, .notice-box ul {padding-left:80px}
.all-menu-pp .notice-box ul li {position:relative}
.all-menu-pp .notice-box ul li:after {content:""; position:absolute; left:0; bottom:6px; border-bottom:1px solid #111; transform:scaleX(0); transform-origin:0% 50%; transition:transform 150ms ease-in-out}
.all-menu-pp .notice-box ul li:nth-child(1):after {width:100%}
.all-menu-pp .notice-box ul li:nth-child(2):after {width:78%}

.all-menu-pp
.all-mn-box ul li:hover:after, .notice-box ul li:hover:after {transform:scaleX(1)}

/*메인 슬라이드 영역*/
#visual .main-slide {position:relative}
#visual .main-slide img {outline:0; cursor:pointer}
#visual .main-slide button {position:absolute; top:50%; transform:translateY(-50%); width:64px; height:64px; background:rgba(255,255,255,0); z-index:3; cursor:pointer; outline:0}
#visual .main-slide button.slick-prev {left:86px; font-size:0; color:transparent}
#visual .main-slide button.slick-prev:before {content:"\e93b"; font-family:"xeicon"; font-size:64px; color:rgba(255,255,255,.4); transition:color .3s}
#visual .main-slide button.slick-prev:hover:before {color:#fff}
#visual .main-slide button.slick-next {right:86px; font-size:0; color:transparent}
#visual .main-slide button.slick-next:before {content:"\e93e"; font-family:"xeicon"; font-size:64px; color:rgba(255,255,255,.4); transition:color .3s}
#visual .main-slide button.slick-next:hover:before {color:#fff}
#visual .main-slide ul.slick-dots {position:absolute; bottom:20px; left:50%; transform:translateX(-50%)}
#visual .main-slide ul.slick-dots li {display:inline-block; width:16px; height:16px; margin:0 8px}
#visual .main-slide ul.slick-dots li button {font-size:0; color:transparent; width:16px; height:16px; cursor:pointer; border:3px solid #fff; border-radius:50%}
#visual .main-slide ul.slick-dots li.slick-active button {background:rgba(0,0,0,.2)}

/*배달주문 배너 영역*/
#delivery .inner-box {float:left; height:280px; border-bottom:1px solid #ddd}
#delivery .inner-box .box1 {float:left; width:600px; height:280px; background:url(../img/ico-delivery.png)no-repeat 76px 51px / 52px 37px}
#delivery .inner-box .box2 {float:left; width:600px; height:280px; background:url(../img/ico-takeout.png)no-repeat 76px 51px / 46px 37px}
#delivery .inner-box .item div {padding:106px 0 0 74px}
#delivery .inner-box .box1 span.tit {display:inline-block; font-size:45px; font-weight:300; color:#ff143c; line-height:45px; letter-spacing:-4px; vertical-align:middle}
#delivery .inner-box .box1 span.arrow {display:inline-block; width:35px; height:35px; background:#ff143c; border-radius:50%; margin-left:8px; border:0; vertical-align:-4px}
#delivery .inner-box .box2 span.tit {display:inline-block; font-size:45px; font-weight:300; color:#1382ff; line-height:45px; letter-spacing:-4px; vertical-align:middle}
#delivery .inner-box .box2 span.arrow {display:inline-block; width:35px; height:35px; background:#1382ff; border-radius:50%; margin-left:8px; border:0; vertical-align:-4px}
#delivery .inner-box .item span.arrow:after {content:""; display:inline-block; width:11px; height:11px; margin:11px 0 0 8px; border-style:solid; border-color:transparent #fff #fff transparent; border-width:0 2px 2px 0; transform:rotate(-45deg)}
#delivery .inner-box .item p.txt {padding-top:25px; font-size:15px; font-weight:400; color:#888; line-height:15px; letter-spacing:-1px}

#delivery .quick-box {float:left; height:260px}
#delivery .quick-box .box1 {float:left; width:400px; height:260px; background:url(../img/ico-quick1.png)no-repeat 76px 50px / 27px 25px}
#delivery .quick-box .box2 {float:left; width:400px; height:260px; background:url(../img/ico-quick2.png)no-repeat 76px 50px / 19px 27px}
#delivery .quick-box .box3 {float:left; width:400px; height:260px; background:url(../img/ico-quick3.png)no-repeat 76px 56px / 29px 20px}
#delivery .quick-box .item div {padding:94px 0 0 70px}
#delivery .quick-box .item span.tit {display:inline-block; font-size:28px; font-weight:300; color:#111; line-height:28px; letter-spacing:-4px}
#delivery .quick-box .item span.arrow {display:inline-block; width:24px; height:24px; margin-left:5px; text-align:center; line-height:14px; border:1px solid #111; border-radius:50%; vertical-align:7px}
#delivery .quick-box .item span.arrow:after {content:""; margin-left:-2px; display:inline-block; width:8px; height:8px; border-style:solid; border-color:transparent #111 #111 transparent; border-width:0 2px 2px 0; transform:rotate(-45deg); vertical-align:-2px}
#delivery .quick-box .item p.txt {padding-top:22px; font-size:15px; font-weight:400; color:#888; line-height:1.4; letter-spacing:-1px}

/*이벤트 배너 영역*/
#event {width:100%; height:430px; background:#f6f6f6}
#event .inner-box {float:left}
#event .inner-box .event-info {padding-top:124px}
#event .inner-box .event-info .tit {font-size:28px; font-weight:400; color:#111; line-height:1.4; letter-spacing:-1px}
#event .inner-box .event-info .tit strong {color:#268dd0}
#event .inner-box .event-info a.login-btn {display:inline-block; margin-top:37px; padding:14px 30px; background:#222; font-size:14px; font-weight:400; color:#fff; line-height:14px; letter-spacing:-1px}
#event .event-box {float:left; padding:110px 0 0 148px}
#event .event-box .card-slide {position:relative; width:772px; overflow:hidden}
#event .event-box .card-slide .card {display:inline; margin-left:6px; cursor:pointer}
#event .event-box button {position:absolute; top:50%; transform:translateY(-50%); width:20px; height:40px; z-index:3; cursor:pointer; outline:0}
#event .event-box button.slick-prev {left:-2px; font-size:0; color:transparent}
#event .event-box button.slick-prev:before {content:"\e93d"; font-family:"xeicon"; font-size:40px; color:#fff; background:#111; opacity:0.4}
#event .event-box button.slick-next {right:18px; font-size:0; color:transparent}
#event .event-box button.slick-next:before {content:"\e940"; font-family:"xeicon"; font-size:40px; color:#fff; background:#111; opacity:0.4}

/*배너 영역*/
#banner {width:100%; height:562px; border-bottom:1px solid #ddd}
#banner .inner-box {padding-top:80px; text-align:center; font-size:0}
#banner .inner-box .item {display:inline-block; width:324px; height:400px; margin-left:30px; border:1px solid #ddd; overflow:hidden}
#banner .inner-box .item .img {width:324px; height:298px; overflow:hidden}
#banner .inner-box .item .img img {display:block; transform:scale(1); transition:.3s}
#banner .inner-box a:hover .item img {transform:scale(1.2)}
#banner .inner-box .item p.tit {padding-top:28px; font-size:18px; font-weight:400; line-height:18px; letter-spacing:-1px; color:#111}
#banner .inner-box .item p.txt {padding-top:10px; font-size:16px; font-weight:200; line-height:16px; letter-spacing:-1px; color:#868686}

/*하단 영역*/
#footer {width:100%}
#footer .ft-copy span.logo {display:inline-block; padding-top:52px; }
#footer .ft-copy span.call {display:inline-block; padding-left:18px; font-size:30px; font-weight:500; line-height:30px; }
#footer .ft-copy .ft-nav {padding-top:28px}
#footer .ft-copy .ft-nav ul li {float:left}
#footer .ft-copy .ft-nav li a {display:block; color:#878787; padding:0 10px; font-size:16px; font-weight:300; line-height:16px; letter-spacing:-1px; }
#footer .ft-copy .ft-nav li a:first-child {padding-left:0}
#footer .ft-copy .ft-nav li a:hover {text-decoration:underline}
#footer .ft-copy address {padding-top:40px; font-size:14px; font-weight:300; color:#878a8f; line-height:1.6; letter-spacing:-1px}
#footer .ft-copy address span {letter-spacing:0}
#footer .ft-copy address em {display:inline-block; padding-top:20px; font-weight:500}

#footer .ft-cont {position:absolute; right:0; top:0; width:174px}
#footer .ft-cont .lang {padding-top:52px}
#footer .ft-cont .lang select {-webkit-appearance:none; appearance: none; width:100%; height:26px; border:0; font-size:14px; color:#888; padding-left:8px; border-bottom:1px solid #888; background:url(../img/img-arrow.png)no-repeat 95% 50% / 12px auto; outline:0}
#footer .ft-cont .app-box {padding-top:20px; font-size:12px; font-weight:400; color:#111; line-height:12px; text-align:right; vertical-align:middle; text-align:justify-all; text-align-last:justify}
#footer .ft-cont .app-box img {vertical-align:-10px; padding-left:14px; }
#footer .ft-cont .sns-box {padding-top:148px; text-align:justify-all; text-align-last:justify; opacity:.6}

#footer .ft-awards {margin-top:32px; width:100%; height:100px; background:#f5f5f5;}
#footer .ft-awards .inner-box {text-align:center; padding-top:30px}
#footer .ft-awards .inner-box div {display:inline-block; padding-left:26px;}
#footer .ft-awards .inner-box div:first-child {padding-left:0}
#footer .ft-awards .inner-box div img {display:block; float:left}
#footer .ft-awards .inner-box div span {display:inline-block; padding:4px 0 0 8px; font-size:12px; font-weight:300; color:#878787; text-align:left; line-height:1.2; letter-spacing:-1px}