@charset "utf-8";
/*
Theme Name - Code Number : FOOD-WHITE - fw1604002
*/


.f_shg {font-family:"SeoulHangang","Pretendard",sans-serif; font-weight:normal;}
.f_normal {font-family:"Pretendard",sans-serif; font-weight:normal;}
.f_opensansL {font-family:'Pretendard','Noto Sans KR','Nanum Gothic','Microsoft YaHei',sans-serif;font-weight: 300}
.f_opensansR {font-family:'Pretendard','Noto Sans KR','Nanum Gothic','Microsoft YaHei',sans-serif;}

/* common */
html,body {font-family:'Pretendard','Noto Sans KR','Nanum Gothic','Microsoft YaHei',sans-serif; font-size:1em; color:#333; line-height:1.75;}
a {color:#333;}
a:hover,a:focus,a:active {text-decoration:none; color:inherit;}
hr {margin:0; border:none;}
.container {max-width:1160px; width:auto; margin:0 auto; padding:0;}
.shareThis {position:relative; padding:30px 0 65px; text-align:center;}
.form-control,input[type="text"],input[type="password"],input[type="email"],input[type="tel"],input[type="search"] {border:1px solid #d9d9d9; box-shadow:none; -webkit-appearance:none;}
.tile ul,.inshop ul {list-style:none;}
.btnTop {position:fixed; right:13px; bottom:13px; color:#fff; padding:10px 11px; border-radius:5px; width:2.5em; font-size:14px; text-align:right; text-decoration:none; z-index:99;}
.btnTop:hover,.btnTop:focus,.btnTop:active {color:#fff; text-decoration:none;}

/* Color setting */
#wrap .btn.btnPoint,#wrap .pagination a:hover,#wrap .pagination a:focus,#wrap .pagination a:active,#wrap .pagination .active a {color:#fff; border-color:#172338; background-color:#1e2c46;}
#wrap .pagination .prev a:hover,#wrap .pagination .prev a:focus,#wrap .pagination .prev a:active,
#wrap .pagination .next a:hover,#wrap .pagination .next a:focus,#wrap .pagination .next a:active {color:#fff;}
#wrap .pointColor,#wrap .shopDone header h1:before,.related .tileTitle:after,.downFile h3,.infourl h3,.showDate h3,.searchResult .keyCode {color:#1e2c46;}
#wrap .pointBg,#accNav a,.shop .disPercent,.btnTop,.gotoHome a,.swipe .indicator .active,.entry .swipe .indicator .active {background-color:#1e2c46;}
#wrap .disPercent:before {border-color:transparent #1e2c46 transparent transparent;}
#wrap .tabNav a:hover:before,#wrap .tabNav a:focus:before,#wrap .tabNav a:active:before,#wrap .tabNav .active a:before {border-color:#1e2c46}
#confirmLayer a,#confirmLayer .txt:before,#confirmLayer .close button:hover,#confirmLayer .close button:focus,#confirmLayer .close button:active,
#member input[type="radio"]:checked+.icoCheck,#member input[type="checkbox"]:checked+.icoCheck,.searchWrap .searchCon button[type="submit"] {background-color:#1e2c46;}
#confirmLayer a:hover,#confirmLayer a:focus,#confirmLayer a:active,
#member input[type="submit"]:hover,#member input[type="submit"]:focus,#member input[type="submit"]:active,
#wrap .btnPoint:hover,#wrap .btnPoint:focus,#wrap .btnPoint:active {background-color:#172338;}

/* header */
#header {position:fixed; top:0; left:0; width:100%; z-index:999;}
#gnb {margin:0; border:none; border-radius:0; background:none; box-shadow:none; z-index:99;}
.navbar .navbar-header {float:none;}
.navbar-header .navbar-toggle {display:block; position:absolute; top:16px; right:16px; width:35px; height:35px; margin:0; padding:0; border:none; border-radius:100%; background:#fff; box-shadow:0 0 1px rgba(0,0,0,0.1); transition:right 0.3s; z-index:999;}
.navbar-header .navbar-toggle:hover,.navbar-header .navbar-toggle:focus {background:#fff;}
.icoMenu {display:block; position:absolute; top:50%; left:50%; width:16px; height:2px; margin-left:-8px; margin-top:-1px; background:#645246; transition:all 0.3s;}
.icoMenu.top {margin-top:-6px;}
.icoMenu.bottom {margin-top:4px;}
.dimmedBody .navbar-toggle .top {margin-top:-1px; transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg);}
.dimmedBody .navbar-toggle .mid {transform:rotate(45deg); -webkit-transform:rotate(45deg); -o-transform:rotate(45deg); -ms-transform:rotate(45deg); opacity:0;}
.dimmedBody .navbar-toggle .bottom {margin-top:-1px; transform:rotate(-45deg); -webkit-transform:rotate(-45deg); -o-transform:rotate(-45deg); -ms-transform:rotate(-45deg);}
.dimmedBody .navbar-toggle {right:7px; box-shadow:none;}
.dimmedBody .navbar-toggle,.dimmedBody .navbar-header .navbar-toggle:hover,.dimmedBody .navbar-header .navbar-toggle:focus {background:none;}
.dimmedBody .navbar-toggle .icoMenu {background:#fff; box-shadow:none;}
.dimmedBody .navbar h1 {margin-top:10px; margin-left:80px;}
.navbar-nav {-ms-overflow-style:none; overflow: -moz-scrollbars-none;}
.navbar-nav::-webkit-scrollbar {display:none;}
.navbar h1 {position:absolute; top:14px; left:15px; width:88px; height:38px; margin:0; z-index:999; transition:margin 0.3s, top 0.3s;}
.fix .navbar h1 {top:-60px; margin-top:0;}
.navbar h1 a {display:block; float:none; height:100%; padding:0; background-size:contain;}
.navbar h1 img {vertical-align:top;}
.navbar-nav a {display:block;}
.heightHeader #gnb .navbar-collapse {position:fixed; top:0; bottom:0; left:-270px; width:270px; height:100%; padding:80px 0 120px 0; border:none; box-shadow:none; z-index:99;}
.heightHeader #gnb .navbar-nav {float:none; margin:0; padding:30px 0; border-top:5px solid #1e2c46;}
.heightHeader #gnb .navbar-nav a {position:relative; padding:10px 30px; font-size:16px; font-weight:normal; color:#181818; white-space:normal; background:none;}
.heightHeader #gnb .navbar-nav li {position:static; float:none;}
.heightHeader #gnb .navbar-nav>li>a:before {content:""; position:absolute; top:50%; left:0; width:0; height:2px; margin-top:-1px; border-bottom:2px solid #1e2c46; border-color:inherit; transition:width 0.3s;}
.heightHeader #gnb .navbar-nav>li>a:hover:before,.heightHeader #gnb .navbar-nav>.on>a:before,.heightHeader #gnb .navbar-nav>.open>a:before {width:24px;}
.heightHeader #gnb .navbar-nav .menuName {position:relative;}
.heightHeader #gnb .navbar-nav .menuName:before {content:""; position:absolute; top:50%; left:100%; width:10px; height:2px; margin-top:-1px; margin-left:5px; border-bottom:2px solid #1e2c46; border-color:inherit; transition:border-color 0.3s;}
.heightHeader #gnb .navbar-nav .menuName:after {content:""; position:absolute; top:50%; left:100%; width:2px; height:10px; margin-top:-5px; margin-left:9px; border-left:2px solid #1e2c46; border-color:inherit; transition:opacity 0.3s;}
.heightHeader #gnb .navbar-nav .open .menuName:after {opacity:0;}
.heightHeader #gnb .navbar-nav .dropdown-menu {position:static; float:none; min-width:0; width:100%; padding:0; border:none; border-radius:0; box-shadow:none; background:none;}
.heightHeader #gnb .navbar-nav .dropdown-menu .dropdown-3rd {border-bottom:none;}
.heightHeader #gnb .navbar-nav .dropdown-menu a {font-size:12px; color:#787878;}
.heightHeader #gnb .navbar-nav .dropdown-menu .subMenuName {display:inline-block; position:relative;}
.heightHeader #gnb .navbar-nav .dropdown-menu .subMenuName:after {display:none; content:""; position:absolute; top:100%; left:0; width:100%; height:1px; border-bottom:1px solid #1e2c46; border-bottom-color:inherit;}
.heightHeader #gnb .navbar-nav .dropdown-menu a:hover .subMenuName:after,.heightHeader #gnb .navbar-nav .dropdown-menu .on>a .subMenuName:after {display:block;}
.heightHeader #gnb .navbar-nav .menu-3rd {display:none; padding:0; list-style:none;}
.heightHeader #gnb .navbar-nav .open .open .menu-3rd {display:block;}
.heightHeader .headerSns {display:block; text-align:center;}
.gnbDim {display:none; position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.5); z-index:99;}
.headerSns {display:none; margin:25px 0; padding:0; list-style:none;}
.headerSns li {display:inline-block; margin:0 12px;}
.headerSns li a {color:#969696;}
.navbar-form {margin:0; padding:0; border:none;}
.searchWrap {display:none; position:fixed; top:0; left:0px; right:0px; bottom:0; width:100%; text-align:center; z-index:1200;}
.searchWrap .searchCon {position:absolute; left:5px; right:5px; top:160px; z-index:999; width:90%; max-width:530px; margin:auto; padding:10px 76px 10px 10px; border-radius:3px; background:#fff; text-align:right;}
.searchWrap .searchCon .form-control {width:100%; height:40px; border:0px; padding:10px; font-size:14px; -webkit-appearance:none; border:1px solid #ededed;}
.searchWrap .searchCon input.form-control {color:#333;}
.searchWrap .searchCon input.form-control::-webkit-input-placeholder {color:#999;}
.searchWrap .searchCon input.form-control:-moz-placeholder {color:#999;}
.searchWrap .searchCon input.form-control::-moz-placeholder {color:#999;}
.searchWrap .searchCon input.form-control:-ms-input-placeholder {color:#999;}
.searchWrap .searchCon button[type="submit"] {position:absolute; top:10px; bottom:10px; right:10px; width:56px; height:auto; padding:0; font-size:13px; color:#fff; border:none; border-radius:3px;}
.searchWrap .searchCon button .fa {display:none;}
.searchWrap .dimWrap {position:fixed; top:0; left:0; right:0; bottom:0; z-index:1; background:#000; opacity:0.8;}

#util {margin-top:50px; padding:30px; text-align:center; z-index:99;}
#util .searchBtn {width:40px; height:40px; margin:0 5px; padding:0; font-size:0; line-height:1; vertical-align:middle; border:1px solid #34405d; border-radius:100%; background:url('../img/common/ico_util.png') 0 0 no-repeat; background-size:80px auto; z-index:99;}
#util .searchBtn:hover,#util .searchBtn:focus,#util .searchBtn:active {border-color:#1e2c46; background-color:#1e2c46; background-position:-40px 0;}
#util ul {display:inline-block; margin:0; padding:0; font-size:0; list-style:none; vertical-align:middle;}
#util li {display:inline-block; margin:0 5px; vertical-align:top;}
#util a {display:inline-block; width:40px; height:40px; border:1px solid #34405d; border-radius:100%; background:url('../img/common/ico_util.png') 0 0 no-repeat; background-size:80px auto;}
#util li li {display:block; margin:0; font-size:12px;}
#util li li a {display:block; width:auto; height:auto; color:#999; border:none; border-radius:0; background:none;}
#util .mypage a {background-position:0 -40px;}
#util .cart a {background-position:0 -80px;}
#util .mypage a:hover,#util .mypage a:focus,#util .mypage a:active,#util .mypage .active {border-color:#1e2c46; background-color:#1e2c46; background-position:-40px -40px;}
#util .cart a:hover,#util .cart a:focus,#util .cart a:active,#util .cart .active {border-color:#1e2c46; background-color:#1e2c46; background-position:-40px -80px;}
#util .dropdown-menu {display:none; left:50%; min-width:0; width:100px; margin-top:10px; margin-left:-50px; padding:5px 0; border:none; box-shadow:0 2px 5px rgba(0,0,0,0.15);}
#util .dropdown-menu a {padding:3px 15px;}
#util .dropdown-menu:before {content:""; position:absolute; top:-10px; left:50%; width:0; height:0; margin-left:-5px; border-style:solid; border-width:5px; border-color:transparent transparent #fff transparent;}
#util .dropdown-menu a:hover,#util .dropdown-menu a:focus,#util .dropdown-menu a:active {color:#fff; background:#1e2c46;}
#util .open .dropdown-menu {display:block;}
#util .companyInfo {margin-top:35px; text-align:left;}
#util .companyInfo ul {display:block; font-size:12px; color:#a8a8a8;}
#util .companyInfo li {display:block; margin:8px 0; line-height:1.5;}
#util .companyInfo a {display:initial; width:auto; height:auto; color:inherit; border:none; border-radius:0; background:none;}
.lang {margin:10px 0 0; padding:0; list-style:none; text-align:center; font-size:0;}
.lang li {display:inline-block; position:relative; padding:0 15px; vertical-align:top;}
.lang li:before {content:""; position:absolute; top:50%; left:0; width:0; height:12px; margin-top:-6px; border-left:1px solid #c0c0c0;}
.lang li:first-child:before {display:none;}
.lang li a {display:block; padding:5px; font-size:14px; opacity:0.6;}
.lang .active a {opacity:1;}
/* keyVisual */
.swipe {position:relative; width:100%; overflow:hidden;}
.swipe a {display:block; width:100%; height:100%;}
.swipe .indicator {position:absolute; bottom:0; left:50%; z-index:9; width:60%; margin-left:-30%; margin-bottom:0; padding-left:0; text-align:center; font-size:0; list-style:none;}
.swipe .indicator li {display:inline-block; width:10px; height:10px; margin:0 2px; vertical-align:top; border-radius:100%; background:#ccc; cursor:pointer;}
.swipe .indicator li .summary {display:none; max-height:2.6em; line-height:1.3; overflow:hidden; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
.swipe.promotion .indicator li {position:relative; border-radius:0;}
.swipe.promotion .indicator li:before {content:""; position:absolute; bottom:100%; left:0; width:100%; height:0; background-color:inherit; transition:height 0.3s, background-position 0.3s;}
.swipe.promotion .indicator li:hover:before,.swipe.promotion .indicator .active:before {height:10px;}
.swipe.promotion .indicator li:nth-of-type(1) {background-color:#342b2a;}
.swipe.promotion .indicator li:nth-of-type(2) {background-color:#1e2c46;}
.swipe.promotion .indicator li:nth-of-type(3) {background-color:#ffb60f;}
.swipe.promotion .indicator li:nth-of-type(4) {background-color:#afa345;}
.swipe.promotion .indicator li:nth-of-type(5) {background-color:#645246;}
.swipe .swipeItem {position:relative; width:100%; overflow:hidden;}
.swipe .swipeItem:after {content:""; display:block; clear:both;}
.swipe .item {position:relative; float:left; overflow:hidden; width:100%; background-size:cover;}
.swipe .item video {position:absolute; top:0; left:0; width:100%; height:100%; object-fit:cover;}
.swipe .swipeControl {position:absolute; top:0; bottom:0; width:50px; color:#fff; text-align:center; z-index:9;}
.swipe .swipeControl.left {left:0;}
.swipe .swipeControl.right {right:0;}
.swipe .swipeControl .prev,.swipe .swipeControl .next {display:inline-block; position:absolute; top:50%; left:50%; z-index:5; width:25px; height:25px; margin-top:-12px; margin-left:-12px; background:url('../img/common/btn_kv_arr.png') no-repeat; background-size:50px auto; transition:background-position 0.3s;}
.swipe .swipeControl.left .prev {background-position:0 0;}
.swipe .swipeControl.right .next {background-position:100% 100%;}
.swipe.promotion .swipeControl.left:hover .prev,.shortCut .swipe .swipeControl.left:hover .prev {background-position:100% 0;}
.swipe.promotion .swipeControl.right:hover .next,.shortCut .swipe .swipeControl.right:hover .next {background-position:0 100%;}
.swipe .container {position:relative; z-index:1;}
.swipe .caption .main {margin:0 0 0.3em; font-size:32px; line-height:1.3;}
.swipe .caption .sub {margin:0; font-size:14px; line-height:1.75;}
.entry .swipe {padding-bottom:40px;}
.entry .swipe .item img {max-width:100%;}
.entry .swipe .indicator {bottom:10px;}
.entry .swipe .indicator li {width:10px; height:10px; margin:0 2px; border:none; background:#ccc;}
.entry .swipe .indicator .active {margin:0 2px;}
.entry .swipe .swipeControl {display:none; width:35px;}
.entry .swipe .swipeControl .prev,.entry .swipe .swipeControl .next {width:28px; height:55px; margin-top:-28px; margin-left:-14px; background:url('../img/common/btn_gall_arr.png') 0 0 no-repeat;background-size:28px auto;}
.entry .swipe .swipeControl.left .prev {background-position:100% 0;}
.entry .swipe .swipeControl.right .next {background-position:100% 100%;}
#keyVisual .item {height:568px; min-height:568px; box-shadow:inset 0 -1px 2px rgba(0,0,0,0.1);}

/* title position */
.titlePosition .container {width:auto; height:100%;}
.titlePosition .titleBox {display:table; position:static; width:100%; height:100%; padding-bottom:20px;}
.titlePosition .titleBox .titleCell {display:table-cell; padding:70px 60px; text-align:center; vertical-align:middle;}
.titlePosition .titleCell.pos_tl {text-align:left; vertical-align:top;}
.titlePosition .titleCell.pos_tc {text-align:center; vertical-align:top;}
.titlePosition .titleCell.pos_tr {text-align:right; vertical-align:top;}
.titlePosition .titleCell.pos_ml {text-align:left; vertical-align:middle;}
.titlePosition .titleCell.pos_mc {text-align:center; vertical-align:middle;}
.titlePosition .titleCell.pos_mr {text-align:right; vertical-align:middle;}
.titlePosition .titleCell.pos_bl {text-align:left; vertical-align:bottom;}
.titlePosition .titleCell.pos_bc {text-align:center; vertical-align:bottom;}
.titlePosition .titleCell.pos_br {text-align:right; vertical-align:bottom;}
.titlePosition.topBg .titleBox {padding-bottom:0;}
.titlePosition.topBg .titleBox .titleCell {padding:30px 40px;}
.titlePosition.topBg:not([style*="background-image"]) .titleBox .titleCell {padding-bottom:0;}

.mainBanner {background:#000;}
.mainBanner a {display:block; height:240px; background:#645246; background-size:cover; transition:opacity 0.3s;}
/* .mainBanner a:hover {opacity:0.9;} */
.mainBanner .container {position:relative; height:100%;}
.mainBanner .container:after {content:""; position:absolute; top:50%; right:15px; width:40px; height:40px; margin-top:-20px; border-radius:100%; background:#1e2c46 url('../img/common/btn_arr_banner.png') 0 0 no-repeat; background-size:100%; transition:background-color 0.3s;}
.mainBanner a:hover .container:after {background-color:#ffb100;}
.mainBanner .bannerTitle {display:table; width:100%; height:100%;}
.mainBanner .bannerTitle .cell {display:table-cell; padding:25px 60px 25px 20px; vertical-align:middle;}
.mainBanner .main {margin:0 0 0.3em; font-size:27px; font-weight:normal; line-height:1.3;}
.mainBanner .sub {margin:0; font-size:12px; line-height:1.75;}
#videoPopup .videoCloser {background-color:#645246;}

/* tile */
.tile a {display:block; width:auto;}
.tileImg {position:relative; overflow:hidden; background-size:cover;}
.tileImg:after {content:""; position:absolute; top:-2px; left:-2px; right:-2px; bottom:-2px; border:1px solid #1e2c46; transition:border-width 0.3s;}
a:hover .tileImg:after {border-width:5px;}
.tileTitle .main {margin:0 0 0.3em; font-size:14px; line-height:1.3;}
.tileTitle .sub {margin:0; font-size:12px; line-height:1.75;}

.sectionTitle {padding:0 15px; text-align:center;}
.sectionTitle .main {margin:0 0 0.3em; font-size:21px; font-weight:normal; line-height:1.3;}
.sectionTitle .sub {margin:0; font-size:12px; font-weight:normal; line-height:1.75; color:#484848;}
.sectionTitle .categoryBar {margin:20px 0;}
.categoryBar {display:block; position:relative; padding-top:18px; padding-left:15px; padding-right:15px; text-align:center;  font-weight:bold;line-height:1;}
.categoryBar.searchTit {font-size:16px; line-height:1.3;}
.categoryBar.subBar {margin-top:20px; margin-bottom:-30px;}
.categoryBar:before {content:""; position:absolute; top:0; left:50%; width:30px; height:1px; margin-left:-15px; background:#3d3d3d;}
.categoryBar:after {content:""; position:absolute; top:3px; left:50%; width:16px; height:1px; margin-left:-8px; background:#3d3d3d;}

.tileList {padding:50px 15px 38px;}
.tileList .tile {margin-bottom:12px; padding:0 6px;}
.tileList .tileImg {height:0; padding-bottom:70%;}
.tileList .tileTitle {padding:18px 10px;}
.tileList .tileTitle .main {margin:0 0 0.5em; font-size:15px; font-weight:normal; line-height:1.3; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tileList .tileTitle .sub {margin:0; font-size:12px; font-weight:normal; line-height:1.75; color:#787878;}
.tileList .tileTitle .subtit {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tileList .tileTitle .price .fixed {font-size:0.9em; text-decoration:line-through;}
.tileList .tileTitle .date {display:block; font-size:12px; line-height:1;}
.tileList .tileTitle .date1 {margin-bottom:1.5em;}
.tileList .tileTitle .date2 {display:none; margin-top:1.3em;}
.loadMore {margin-top:10px; margin-bottom:10px; text-align:center;}
.loadMore .viewmore {display:inline-block; padding:10px 30px; vertical-align:top; font-size:12px; line-height:1; color:#fff; border:none; background:#1e2c46; transition:background-color 0.3s;}
.loadMore .viewmore:hover {background-color:#ffb100;}
.loadMore .viewmore .fa {position:relative; top:0; left:0; margin-left:3px; transition:top 0.3s, left 0.3s;}
.loadMore .viewmore:hover .fa {top:5px;}
.shortCut .loadMore .viewmore:hover .fa {top:0; left:5px;}

.list01.mainContents {background:#f5f5f5;}

.list02 .shortCut {overflow:hidden; background-color:#fff;}
.list02 .shortCut .swipeContents {width:80%; overflow:visible;}
.list02 .shortCut .tile {margin-bottom:0; padding:0;}
.list02 .shortCut .tile a {margin:0 6px;}
.list02 .shortCut .tileTitle .sub {height:5.25em; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;}
.list02 .shortCut .loadMore {margin-top:14px;}

.list04 .shortCut {padding-left:0; padding-right:0; background-color:#fff;}
.list04 .shortCut .tile {margin-bottom:0; padding:0;}
.list04 .shortCut .tile a {width:auto; max-width:none;}
.list04 .shortCut .tileTitle {max-width:260px; margin:0 auto;}
.list04 .shortCut .tileTitle .main {display:block; max-height:none; font-size:14px; white-space:nowrap;}
.list04 .shortCut .tileTitle .main:after {display:none;}
.list04 .shortCut .tileTitle .sub {height:5.25em; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;}
.list04 .shortCut .tileImg {width:160px; height:160px; margin:0 auto; padding-bottom:0;}
.shortCut .swipe .swipeControl .prev,.shortCut .swipe .swipeControl .next {top:80px; width:38px; height:38px; margin-top:-19px; margin-left:-19px; background-image:url('../img/common/btn_swipe_arr.png'); background-size:76px auto;}

.list01 {background:#f7f8fa;}
.list01 .tiles {margin:0 -6px;}
.list01 .tile {float:left; width:50%;}
.list01 .tile.tile05 {float:right;}
.list01 .tile:nth-of-type(3n+1) {clear:left;}
.list01 .tile a {position:relative; background:#fff; box-shadow:0 30px 40px -20px rgba(0,0,0,0.1);}
.list01 .tile .tileImg {padding-bottom:69%;}
.list01 .tile .tileImg:after {display:none;}
.list01 .tile.tile1x2 .tileImg {padding-bottom:138%; padding-top:12px;}
.list01 .tileTitle {position:absolute; top:3px; left:3px; right:3px; bottom:3px; padding:15px 30px 15px 15px; transition:background-color 0.3s;}
.list01 .tileTitle .main {font-size:12px; white-space:normal; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
.list01 .tileTitle .sub {color:inherit; height:4.5em; line-height:1.5; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3; display:none;}
.list01 .tileTitle .date {margin-top:1.75em; color:inherit;}
.list01 .tileTitle .date1 {display:none;}
.list01 .tileTitle .date2 {display:block;}
.list01 .tileTitle:after {content:""; position:absolute; bottom:10px; right:10px; width:15px; height:15px; border-radius:100%; background:#1e2c46 url('../img/common/btn_arr_tile.png') 0 0 no-repeat; background-size:100%; opacity:0; transition:opacity 0.3s;}
.list01 a:hover .tileTitle {background:rgba(255,255,255,0.7);}
.list01 a:hover .tileTitle:after {opacity:1;}

.list02 {background:#fff;}
.list02 .tileImg {padding-bottom:61%;}
.list02 .tileTitle .date {color:#c0c0c0;}
.list02 .loadMore {margin-top:0;}

.list03 {background:#f7f8fa;}
.list03 .tile {margin-bottom:24px;}
.list03 .tile a {box-shadow:0 0 15px rgba(0,0,0,0.03);}
.list03 .tileImg {padding-bottom:70%;}
.list03 .tileTitle {padding:15px; background:#fff;}
.list03 .tileTitle .date {color:#c0c0c0;}
.list03 .loadMore {margin-top:0;}

.list04 .tile a {width:80%; max-width:360px; margin:0 auto;}
.list04 .tileImg {padding-bottom:100%; border-radius:100%;}
.list04 .tileImg:after {border-radius:100%;}
.list04 .tileTitle {text-align:center;}
.list04 .tileTitle .main {max-height:2.6em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; white-space:normal;}
.list04 .tileTitle .main:after {content:""; display:block; width:24px; height:1px; margin:0.9em auto 0.6em; background:#333;}
.list04 .tileTitle .date {margin-top:1.75em; color:#c0c0c0;}
.list04 .tileTitle .date1 {display:none;}
.list04 .tileTitle .date2 {display:block;}
.list04 .loadMore {margin-top:0;}

/* sub */
h3.searchResult {margin-top:80px; margin-bottom:50px; padding:0 20px; font-size:18px; text-align:center;}
.gotoHome {margin-top:100px; margin-bottom:100px; text-align:center;}
.gotoHome a {display:inline-block; padding:10px 30px; color:#fff;}
.gotoHome a:hover,.gotoHome a:focus,.gotoHome a:active {color:#fff;}
.gotoHome a .fa {margin-left:10px;}
.topBg {padding-top:30px; background-size:cover;}
.topBg[style*="background-image"] {height:280px; min-height:280px;}
.topBg .title {margin:0 0 0.3em; font-size:30px; line-height:1.3;}
.topBg .subTitle {margin:0; font-size:14px; line-height:1.75;}

/* info */
.infoOutline {position:relative; width:auto; margin-top:20px; padding:0;}
.innerOutline {position:relative; padding:40px 15px;}
.innerOutline #bbs,.innerOutline #shop,.innerOutline #member {max-width:1080px; margin:0 auto; padding-top:0;}
.detail {position:relative; padding-top:60px; padding-left:15px; padding-right:15px; border:1px solid #ebebeb;}
.entry {position:relative; max-width:800px; min-height:300px; margin:0 auto; padding:0; line-height:1.75;}
.entry header {margin-bottom:30px;}
.entry h1,.shop #shop.shopView h1,.bbs #bbs header h1 {margin:0 0 0.5em; font-size:1.8em; line-height:1.3;}
.entry h2,.shop #shop.shopView h2,.bbs #bbs header h2 {margin:0; font-size:1em; font-weight:normal; line-height:1.75;}
.entry .pages {font-family:'Pretendard','Noto Sans KR','Nanum Gothic','Microsoft YaHei',sans-serif;}
#bbs .board {font-family:'Pretendard','Noto Sans KR','Nanum Gothic','Microsoft YaHei',sans-serif;}
.shop #shop.shopView {max-width:800px; margin-bottom:0; padding-top:0;}
.shopView .dtCont {font-family:'Pretendard','Noto Sans KR','Nanum Gothic','Microsoft YaHei',sans-serif;}
button.closer {position:absolute; top:0; right:0; width:50px; height:50px; padding:0; text-indent:-999em; border:none; background:url('../img/common/icon_layer_close.png') center center no-repeat; transition:background-color 0.5s; z-index:9;}
#content button.closer.bottomCloser {bottom:0;}
.related {max-width:1280px; margin:0 auto 20px; padding:0 5px;}
.related h3 {margin:30px 0 20px 5px; font-size:16px;}
.related .tile {width:50%; margin:0; padding:5px;}
.related .tile a {border:1px solid #ebebeb;}
.related .tileTitle {position:relative; padding:20px;}
.related .tile h4 {overflow:hidden; margin:0 0 0.5em; font-size:14px; line-height:1.3; height:1.3em; white-space:nowrap; text-overflow:ellipsis;}
.related .tile h5 {overflow:hidden; margin:0; font-size:13px; font-weight:normal; color:#999; line-height:1.75; height:3.5em; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
.related .tile p {overflow:hidden; margin:0; font-size:13px; font-weight:normal; color:#999; line-height:1.75; height:1.75em; white-space:nowrap; text-overflow:ellipsis;}

/* footer */
#footer {padding:25px 15px; text-align:center; font-size:10px; color:#787878; background:#262626;}
#footer p,#footer address {margin:0;}
#footer a {color:inherit;}
#footer ul {margin:0; padding:0; list-style:none;}
.footerSns li {display:inline-block; margin:0 5px;}
.footerInfo {display:none;}
.footerInfo li {margin:0.5em 0; line-height:1.3;}
.footerLogo {width:120px; height:40px; margin:0 auto 10px; background-size:contain;}
#footer .copy {}

/* Media Queries */
@media screen and (min-width:320px) {

}
@media screen and (min-width:360px) {
	.searchWrap .searchCon  {padding:15px 110px 15px 15px;}
	.searchWrap .searchCon .form-control {height:42px; padding:5px 15px; font-size:16px;}
	.searchWrap .searchCon button[type="submit"] {top:15px; bottom:15px; right:15px; width:80px; font-size:15px;}
	.shareThis .btn {margin:0 3px;}
}
@media screen and (min-width:768px) {
	div#noticePop {top:90px;}
	.navbar-header .navbar-toggle {top:30px; right:30px; width:54px; height:54px;}
	.dimmedBody .navbar-toggle {right:0;}
	.dimmedBody .navbar h1 {margin-left:102px;}
	.navbar h1 {left:30px; margin-top:24px;}
	.heightHeader #gnb .navbar-collapse {left:-384px; width:384px;}
	.heightHeader #gnb .navbar-nav a {padding:15px 30px; font-size:18px;}
	.heightHeader #gnb .navbar-nav .dropdown-menu a {font-size:16px;}
	#util .companyInfo {font-size:13px;}
	.searchWrap .searchCon  {padding:15px 125px 15px 15px;}
	.searchWrap .searchCon .form-control {height:50px; font-size:20px;}
	.searchWrap .searchCon button[type="submit"] {width:95px; padding:0 15px; text-align:left; font-size:16px;}
	.searchWrap .searchCon button[type="submit"] .fa {display:inline-block; float:right; font-size:27px;}
	.entry .swipe .swipeControl {display:block;}
	.swipe .swipeControl {width:100px;}
	.swipe .swipeControl .prev, .swipe .swipeControl .next {width:50px; height:50px; margin-top:-25px; margin-left:-25px; background-size:100px auto;}
	.swipe .caption .main {font-size:42px;}
	.swipe .caption .sub {font-size:18px;}
	.swipe.promotion .indicator li {height:6px;}
	.swipe.promotion .indicator li:hover:before,.swipe.promotion .indicator .active:before {height:18px;}
	.titlePosition .titleBox .titleCell {padding:130px 120px;}
	.titlePosition.topBg .titleBox .titleCell {padding:60px;}
	#keyVisual .item {height:660px;}

	.mainBanner a {height:280px;}
	.mainBanner .container:after {right:44px;}
	.mainBanner .bannerTitle .cell {padding-left:44px; padding-right:100px;}
	.mainBanner .sub {font-size:13px;}
	#videoPopup iframe {position:absolute; top:50%; left:50%; width:90% !important; height:60% !important; margin-top:-30% !important; margin-left:-45% !important;}

	.sectionTitle {padding:0 100px;}
	.sectionTitle .main {font-size:36px;}
	.sectionTitle .sub {font-size:16px;}
	.sectionTitle .categoryBar {margin-top:22px; margin-bottom:48px;}
	.categoryBar {display:block; position:relative; padding-top:18px; line-height:1;}
	.categoryBar:before {width:50px; margin-left:-25px;}
	.categoryBar:after {top:5px; width:36px; margin-left:-18px;}
	.categoryBar.subBar {margin-top:40px; margin-bottom:-60px;}
	.categoryBar.searchTit {font-size:18px;}
	.tileList {padding:100px 40px 72px;}
	.tileList .tiles {margin-left:-10px; margin-right:-10px;}
	.tileList .tile {float:left; width:25%; margin-bottom:20px; padding:0 10px;}
	.tileList .tile:nth-of-type(3n+1) {clear:none;}
	.tileList .tile:nth-of-type(4n+1) {clear:left;}
	a:hover .tileImg:after {border-width:8px;}
	.tileList .tileTitle {padding:20px 10px;}
	.tileList .tileTitle .sub {font-size:13px; height:5.25em; overflow:hidden; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:3;}
	.loadMore {margin-top:20px; margin-bottom:20px;}
	.loadMore .viewmore {padding:15px 35px; font-size:14px;}
	.loadMore .viewmore .fa {margin-left:10px;}

	.list02 .shortCut .swipeContents {width:33.33%;}
	.list02 .shortCut .tile a {margin:0 10px;}
	.list04 .shortCut {padding-left:30px; padding-right:30px;}
	.list04 .shortCut .swipeContents {width:33.33%; overflow:visible;}
	.list04 .shortCut .tile a {margin:0 10px;}

	.shortCut .swipe .swipeControl {display:none;}

	.list01 .tile:nth-of-type(4n+1) {clear:none;}
	.list01 .tile:nth-of-type(6n+1) {clear:left;}
	.list01 .tile.tile04 {float:right;}
	.list01 .tile.tile1x2 .tileImg {padding-top:20px;}
	.list01 .tileTitle {top:6px; left:6px; right:6px; bottom:6px; padding:20px 20px 15px 20px;}
	.list01 .tileTitle .sub {display:none;}
	.list01 .tileTitle .main {font-size:16px;}
	.list01 .tile.tile1x2 .tileTitle .main {font-size:20px;}
	.list01 .tile:not(.tile1x2) .tileTitle .sub {height:3em; -webkit-line-clamp:2;}
	.list01 .tileTitle:after {bottom:15px; right:15px; width:30px; height:30px;}
	.list03 .tile {margin-bottom:60px;}
	.list03 .tileTitle {padding:25px;}
	.list04 .tileImg {width:220px; height:220px; margin:0 auto; padding-bottom:0;}

	h3.searchResult {font-size:24px;}
	/* .topBg[style*="background-image"] {min-height:300px;} */
	.topBg .title {font-size:40px;}
	.topBg .subTitle {font-size:16px;}
	button.closer {width:60px; height:60px;}
	.infoOutline {margin-top:40px;}
	.innerOutline {padding:60px 30px;}
	.entry {min-height:700px;}
	.entry h1,.shopView h1,.bbs #bbs header h1 {font-size:2em;}
	.entry h2,.shopView h2,.bbs #bbs header h2 {font-size:1.2em;}
	.shareThis {padding-bottom:80px;}
	.shareThis .btn {width:60px; height:60px; margin:0 8px;}
	.related {margin-bottom:60px;}
	.related .tile {width:25%;}
	.related .tileTitle {padding:30px 20px;}
	#footer {padding:50px 44px; text-align:left; font-size:13px;}
	#footer .container {position:relative;}
	.footerLogo {position:absolute; top:0; left:0; bottom:0; width:180px; height:100%; margin:0;}
	.footerInfo {display:block; margin-left:220px;}
	#footer .footerInfo ul {float:left; width:50%; padding-left:30px;}
	#footer .copy {margin-top:10px; margin-left:220px; padding-left:30px;}
}
@media screen and (min-width:992px) {
	.container {padding:0;}
	.innerOutline {padding:80px 30px 80px;}
	#videoPopup iframe {width:960px !important; height:540px !important; margin-top:-270px !important; margin-left:-480px !important;}
}
@media screen and (max-width:1279px) {
	.heightHeader #gnb .navbar-collapse {background:#fff !important;}
	.heightHeader #gnb .navbar-nav a {color:#181818 !important}
	.heightHeader #gnb .navbar-nav .dropdown-menu a {color:#787878 !important}
	.heightHeader #gnb .navbar-nav a:hover,.heightHeader #gnb .navbar-nav .open>a,.heightHeader #gnb .navbar-nav .on>a,
	.heightHeader #gnb .navbar-nav .dropdown-menu a:hover,.heightHeader #gnb .navbar-nav .dropdown-menu .on>a {color:#1e2c46 !important;}
	.heightHeader #gnb .navbar-nav,.heightHeader #gnb .navbar-nav .open .menuName:before {border-color:#1e2c46 !important;}
	.heightHeader #gnb .navbar-nav .open .dropdown-menu {display:block !important;}
	.heightHeader #gnb .navbar-nav .dropdown-menu {background:none !important;}
	.heightHeader #gnb .navbar-nav .dropdown-menu .menu-3rd {background-color:#f0f0f0;}
}
@media screen and (min-width:1280px) {
	div#noticePop {top:70px;}
	#content {padding-top:0;}
	#header .container {position:relative;}
	#header {height:auto;}
	#gnb {height:auto;}
	.gnbLine {position:absolute; top:100%; left:0; width:100%; height:0; border-bottom:0 solid #1e2c46; border-color:inherit; box-shadow:inset 0 2px 4px 2px rgba(0,0,0,0.2); transition:border-width 0.3s;}
	.fix .gnbLine,.isBar .gnbLine {border-width:10px;}
	.fix .navbar h1 {top:14px; margin-top:-3px;}
	.fix .heightHeader #gnb .navbar-nav>li>a {padding-top:20px; padding-bottom:20px;}
	.fix .heightHeader #gnb .navbar-nav>li>a:before {margin-top:-8px;}
	.fix .heightHeader #gnb .navbar-nav>li>a:hover:before,.fix .heightHeader #gnb .navbar-nav>.on>a:before,.fix .heightHeader #gnb .navbar-nav>.open>a:before {height:8px;}
	.fix #util {margin-top:-18px;}
	.fix #util a,.fix #util .searchBtn {width:36px; height:36px; background-size:72px auto;}
	.fix #util .mypage a {background-position:0 -36px;}
	.fix #util .cart a {background-position:0 -72px;}
	.fix #util .searchBtn:hover,.fix #util .searchBtn:focus,.fix #util .searchBtn:active {background-position:-36px 0;}
	.fix #util .mypage a:hover,.fix #util .mypage a:focus,.fix #util .mypage a:active,.fix #util .mypage .active {background-position:-36px -36px;}
	.fix #util .cart a:hover,.fix #util .cart a:focus,.fix #util .cart a:active,.fix #util .cart .active {background-position:-36px -72px;}
	.navbar-header {position:static; width:auto; background:none;}
	.navbar-header .navbar-toggle {display:none;}
	.navbar-nav {padding:0;}
	.navbar h1 {left:60px; margin-top:2px; border:none; z-index:1;}
	.navbar-nav .dropdown .fa-chevron-down {display:none;}
	.heightHeader #gnb .navbar-collapse {position:static; width:auto; height:auto; margin:0; padding:0; text-align:center;}
	.heightHeader #gnb .navbar-nav {position:relative; padding:0; border:none;}
	.heightHeader #gnb .navbar-nav li {display:inline-block; position:relative; vertical-align:top;}
	.heightHeader #gnb .navbar-nav a {padding:25px; background:none; transition:padding 0.3s;}
	.heightHeader #gnb .navbar-nav>.on>a,.heightHeader #gnb .navbar-nav>.open>a {color:#1e2c46 !important;}
	.heightHeader #gnb .navbar-nav>li>a:before {top:100%; left:50%; width:1px; height:0; margin-top:-20px; margin-left:-1px; border-bottom:none; border-right:1px solid #1e2c46;  border-color:inherit; transition:height 0.3s, margin 0.3s;}
	.heightHeader #gnb .navbar-nav>li>a:hover:before,.heightHeader #gnb .navbar-nav>.on>a:before,.heightHeader #gnb .navbar-nav>.open>a:before {width:1px; height:20px;}
	.heightHeader #gnb .navbar-nav .menuName:before,.heightHeader #gnb .navbar-nav .menuName:after {display:none;}
	.heightHeader #gnb .navbar-nav .dropdown>a {background:none;}
	.heightHeader #gnb .navbar-nav .dropdown.open {border-bottom:none;}
	.heightHeader #gnb .navbar-nav .dropdown.open>a {background:none;}
	.heightHeader #gnb .navbar-nav .dropdown-menu {position:absolute; top:100%; left:50%; min-width:0; width:960px; margin-left:-480px; text-align:center; z-index:1;}
	.heightHeader #gnb .navbar-nav .dropdown-menu a {height:auto; padding:15px 20px; font-size:14px;}
	.heightHeader #gnb .navbar-nav .dropdown-menu .subMenuName {display:inline-block; position:relative; padding-left:0;}
	.heightHeader #gnb .navbar-nav .menu-3rd {position:absolute; top:0; left:100%; width:160px; border:none; background:none; box-shadow:inset 2px 0 4px rgba(0,0,0,0.1);}
	.heightHeader #gnb .navbar-nav .menu-3rd a {padding-left:35px;}
	.heightHeader #gnb .navbar-nav .menu-3rd .subMenuName:before {display:block; left:-12px; height:0; border-top:1px solid #d4d4d4; border-color:inherit;}
	.heightHeader .headerSns {display:none;}
	.heightHeader .gnbDim {display:none !important;}
	#util {position:absolute; top:50%; right:60px; margin:-20px 0 0; padding:0;}
	#util .searchBtn {margin-right:0;}
	#util .companyInfo {display:none;}
	.swipe .swipeControl {width:140px;}
	.swipe .caption .main {font-size:60px;}
	.swipe .caption .sub {font-size:16px;}
	.swipe.promotion .indicator li {position:relative; width:120px; height:45px; margin:0; font-size:13px; box-shadow:inset 0 -10px 0px -4px rgba(0,0,0,0.1);}
	.swipe.promotion .indicator li:before {background:url('../img/common/ico_indicator.png') 50% 15px no-repeat; background-color:inherit; background-size:5px auto;}
	.swipe.promotion .indicator li:hover:before,.swipe.promotion .indicator .active:before {height:15px; background-position:50% 100%;}
	.swipe .indicator li .summaryBox {display:table; width:100%; height:100%;}
	.swipe .indicator li .cell {display:table-cell; text-align:center; vertical-align:middle;}
	.swipe .indicator li .summary {display:block; display:-webkit-box; padding:0 20px; color:#fff;}
	.titlePosition.topBg .titleBox .titleCell {padding:60px 0;}
	#keyVisual .item {height:470px;}
	.titlePosition .titleBox {padding-top:70px;}
	.titlePosition .titleBox .titleCell {padding:80px 140px;}
	.titlePosition.topBg .titleBox .titleCell {padding:60px 0;}

	.mainBanner a {height:480px;}
	.mainBanner .container:after {right:0; width:80px; height:80px; margin-top:-40px;}
	.mainBanner .bannerTitle .cell {padding-left:0; padding-right:0;}
	.mainBanner .main {font-size:54px;}
	.mainBanner .sub {font-size:16px;}
	#videoPopup iframe {width:1280px !important; height:720px !important; margin-top:-360px !important; margin-left:-640px !important;}

	.categoryBar.subBar {margin-top:60px; margin-bottom:-50px;}
	.sectionTitle .main {font-size:40px;}
	.tileList {padding:110px 0 80px;}
	.tileList .tileTitle {padding:26px 20px;}
	.tileList .tileTitle .main {font-size:18px;}
	.tileList .tileTitle .sub {font-size:14px;}
	.loadMore .viewmore {padding:20px 60px;}

	.list02 .shortCut .tile a {margin:0 20px;}
	.list02 .shortCut .tileTitle {padding:40px 20px;}
	.list02 .shortCut .loadMore {margin-bottom:40px;}
	.list04 .shortCut {padding-left:0; padding-right:0; padding-bottom:85px;}
	.list04 .shortCut .tile a {margin:0 20px;}

	.list01 .tile .tileImg {padding-bottom:190px;}
	.list01 .tile.tile1x2 .tileImg {padding-bottom:380px;}
	.list01 .tileTitle {top:10px; left:10px; right:10px; bottom:10px; padding:25px 60px 15px 30px;}
	.list01 .tileTitle .main {font-size:20px;}
	.list01 .tileTitle .sub {display:block; display:-webkit-box; height:auto; max-height:4.5em;}
	.list01 .tile.tile1x2 .tileTitle {padding-top:30px;}
	.list01 .tile.tile1x2 .tileTitle .main {font-size:26px;}
	.list01 .tileTitle:after {bottom:30px; right:30px;}
	.list02 .tile {margin-top:30px; margin-bottom:22px;}
	.list02 .tile:nth-of-type(1),.list02 .tile:nth-of-type(2),.list02 .tile:nth-of-type(3),.list02 .tile:nth-of-type(4) {margin-top:0;}
	.list03 .tile {margin-top:20px; margin-bottom:60px;}
	.list03 .tile:nth-of-type(1),.list03 .tile:nth-of-type(2),.list03 .tile:nth-of-type(3),.list03 .tile:nth-of-type(4) {margin-top:0;}
	.list04 .tile {margin-top:32px; margin-bottom:26px;}
	.list04 .tile:nth-of-type(1),.list04 .tile:nth-of-type(2),.list04 .tile:nth-of-type(3),.list04 .tile:nth-of-type(4) {margin-top:0;}
	
	.topBg {padding-top:0;}
	.topBg[style*="background-image"] {height:310px;}
	.topBg:not([style*="background-image"]) {margin-bottom:-8px;}
	.detail {padding-top:80px;}
	button.closer {width:80px; height:80px;}
	#member {padding-top:240px;}
	.detail {padding-top:80px;}
	.related {margin-bottom:80px; padding:0;}
	.related h3 {margin-left:0;}
	.related .relatedWrap {margin:0 -5px;}
	.gotoHome {margin-top:150px;}

	.footerInfo {margin-left:300px;}
	#footer .copy {margin-left:300px;}
}
@media screen and (min-width:1500px) {
	.navbar h1 {left:0;}
	#util {right:0;}
	.titlePosition .titleBox .titleCell {padding:90px 0;}
}