@charset "utf-8";
/*
Theme name::CRANE-GREY
Code Number :crag1409003
*/

@import url('http://fonts.googleapis.com/css?family=Lato:400,700'); /* font-family:"Lato"; */
@import url('/resource/common/css/font-awesome.min.css');
@import url('/resource/common/css/pages.css');
@font-face {
	font-family:"Myriad";
	src:url("/resource/common/fonts/Myriad.eot?#iefix");
	src:url("/resource/common/fonts/Myriad.eot?#iefix") format("eot"),url("/resource/common/fonts/Myriad.woff") format("woff");
}
@font-face {
  font-family:"NBG";
  src:url("/resource/common/fonts/NanumBarunGothic.eot?#iefix");
  src:url("/resource/common/fonts/NanumBarunGothic.eot?#iefix") format("eot"),url("/resource/common/fonts/NanumBarunGothic.woff") format("woff");
}

/* common */
html,body {font-family:"Myriad","NBG","Apple SD Gothic","Malgun Gothic",Arial,"돋움",Dotum,sans-serif; font-size:1em; color:#333;}
html, body, ul, ol, li, form, fieldset, legend {line-height:1.75;}
h1, h2, h3, h4, h5, h6 {line-height:1.5;}
a {color:#333;}
a:hover, a:focus, a:active {text-decoration: none;}
hr {margin:0; border:none;}
.sort ul {padding:0; list-style:none;}
.sort a {display:inline-block; width:20px; height:20px; text-indent:-999em; background:url('../img/common/ico_sort.png') left top no-repeat;}
.sort .new a {background-position:0 0;}
.sort .view a{background-position:0 -20px;}
.sort .like a {background-position:0 -40px;}
.sort .new a:hover,.sort .new.active a {background-position:-20px 0;}
.sort .view a:hover,.sort .view.active a {background-position:-20px -20px;}
.sort .like a:hover,.sort .like.active a {background-position:-20px -40px;}
.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;}
#wrap .btn.btnPoint,#wrap .pagination a:hover,#wrap .pagination a:focus,#wrap .pagination .active a {color:#fff; border-color:#333336; background-color:#4a4a4d;}
#wrap .pagination .prev a:hover,#wrap .pagination .next a:hover {color:#fff;}
#wrap .pointColor,#wrap .shopDone header h1:before,#gallery .carousel-control .fa,.related .tileTitle:after,.downFile h3,.infourl h3,.searchResult .keyCode {color:#4a4a4d;}
#wrap .pointBg,#accNav a,.container .disPercent,#wrap.carousel-indicators li.active,.entry .carousel-indicators .active,.btnTop,.gotoHome a,.swipe .indicator .active,.entry .swipe .indicator .active {background-color:#4a4a4d;}
#wrap .disPercent:before {border-color:transparent #4a4a4d transparent transparent;}
#wrap .tabNav a:hover:before,#wrap .tabNav .active a:before {border-color:#4a4a4d}
#confirmLayer a,#confirmLayer .txt:before,#confirmLayer .close button:hover,#member input[type="checkbox"]:checked+.icoCheck,.searchWrap .searchCon button[type="submit"] {background-color:#4a4a4d;}
#confirmLayer a:hover,#member .join_submit a:hover,#member input[type="submit"]:hover,#member input[type="button"].btnPoint:hover{background-color:#333336;}
.tile ul,.inshop ul {list-style:none;}
.btnTop:hover {color:#fff; text-decoration:none;}
.official_crag #layDimm {opacity:.3;}
.ellip {overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ellipMulti {overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; word-wrap:break-word; line-height:1.75; display: -webkit-box; -webkit-line-clamp:2; height:41px;}
span.ellip {display:inline-block; max-width:100%; height:25px;}
a:hover span.ellip ,a:focus span.ellip, .on span.ellip{display:inline-block; border-bottom:2px solid #3c3c3c;}
.on .subMenuName span.ellip {display:inline; border:none;}

/* Layout */
.container {max-width:1280px; margin:0; padding:0;}
#header {position:relative; height:60px; z-index:999;}
#gnb {margin:0; height:60px; border:none; border-radius:0; background:none; box-shadow:none; z-index:99;}
.navbar-header {position:fixed; top:0; width:100%; height:60px; padding:10px 0; background:#d7d9d9; z-index:9;}
.navbar-header h1 {position:absolute; left:50%; width:120px; height:40px; margin:0 0 0 -60px; padding:0; font-size:0;}
.navbar-header img {height:100%; vertical-align:top;}
.navbar-header a {float:none; height:auto; padding:0;}
.navbar-header .navbar-toggle {position:absolute; top:50%; left:0; width:20px; margin:-11px 0 0 15px; padding:0; border:none; border-radius:0; z-index:9;}
.navbar-default .navbar-header .navbar-toggle:hover,.navbar-default .navbar-header .navbar-toggle:focus,.navbar-default .navbar-header .navbar-toggle:active {background:none;}
.heightHeader #gnb .navbar-collapse {position:fixed; top:0; bottom:0; left:-240px; width:240px; height:100%; padding:0; border:none; background-color:#fff; box-shadow:none; z-index:99;}
.heightHeader.right #gnb .navbar-collapse {right:-240px; left:auto;}
.heightHeader #gnb .navbar-nav {margin:0; padding:0;}
.heightHeader #gnb .gnbHome {display:block; position:relative; padding:18px 0 18px 50px; color:#fff; background-image:url('../img/common/ico_nav_close.png'); background-position:200px 50%; background-repeat:no-repeat;}
.heightHeader #gnb .homeIco {display:inline-block; position:absolute; top:0; bottom:0; left:0; width:45px; background:url('../img/common/ico_home.png') 20px 50% no-repeat;}
.heightHeader #gnb .gnbClose {display:inline-block; position:absolute; top:0; bottom:0; right:0; width:60px; padding:0; border:none; background:none;}
.heightHeader #gnb .navbar-nav li {border-bottom:1px solid #e9e9e9;}
.heightHeader #gnb .navbar-nav a {padding:15px 20px; font-size:15px; font-weight:normal; color:#333; background:url('../img/common/ico_arr_nav.png') 205px 50% no-repeat;}
.heightHeader #gnb .navbar-nav li.on {background-color:#ededed;}
.heightHeader #gnb .navbar-nav .dropdown>a {background:url('../img/common/ico_arr_nav_down.png') 200px 50% no-repeat;}
.heightHeader #gnb .navbar-nav .dropdown.open {border-bottom:none;}
.heightHeader #gnb .navbar-nav .dropdown.open>a {background-image:url('../img/common/ico_arr_nav_up.png');}
.heightHeader #gnb .navbar-nav .dropdown-menu {float:none; min-width:0; width:100%; padding:0; border-radius:0; border-top:1px solid #e0e0e0; box-shadow:none; background:#f5f5f5;}
.heightHeader #gnb .navbar-nav .dropdown-menu li {border-color:#e0e0e0;}
.heightHeader #gnb .navbar-nav .dropdown-menu .dropdown-3rd {border-bottom:none;}
.heightHeader #gnb .navbar-nav .dropdown-menu a {font-size:14px; color:#555; background-image:none;}
.heightHeader #gnb .navbar-nav .dropdown-menu .subMenuName {display:inline-block; position:relative; padding-left:15px;}
.heightHeader #gnb .navbar-nav .dropdown-menu .subMenuName:before {content:""; display:inline-block; position:absolute; top:50%; left:0; width:7px; height:1px; margin-top:-1px; background:#d1d1d1;}
.heightHeader #gnb .navbar-nav .dropdown .dropdown>a {position:relative; background:none;}
.heightHeader #gnb .navbar-nav .dropdown .dropdown>a:before {content:""; position:absolute; top:50%; right:26px; width:10px; height:2px; margin-top:-1px; background:#c0c0c0;}
.heightHeader #gnb .navbar-nav .dropdown .dropdown>a:after {content:""; position:absolute; top:50%; right:30px; width:2px; height:10px; margin-top:-5px; background:#c0c0c0;}
.heightHeader #gnb .navbar-nav .dropdown .dropdown.open>a:after {display:none;}
.heightHeader #gnb .navbar-nav .menu-3rd {display:none; padding:0; list-style:none; border-top:1px solid #dadada; background:#f0f0f0;}
.heightHeader #gnb .navbar-nav .open .open .menu-3rd {display:block;}
.heightHeader #gnb .navbar-nav .menu-3rd li:last-child {border-bottom:none;}
.heightHeader #gnb .navbar-nav .menu-3rd a {display:block; padding-left:35px;}
.heightHeader #gnb .navbar-nav .menu-3rd .subMenuName:before {background:#d4d4d4;}
.familySite {width:120px; margin:30px auto 0;}
.familySite a {display:block; padding:8px 10px;}
.familySite img {max-width:100%;}
.heightHeader .headerSns {display:block; text-align:center;}
.gnbDim {display:none; position:fixed; width:100%; height:100%; background:rgba(0,0,0,0.8); 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;}
.icoMenu {display:block; width:100%; height:2px; margin:4px 0; background:#4a4a4d;}
#util {position:absolute; top:50%; right:15px; font-size:0; margin-top:-13px; z-index:99;}
#util .searchBtn {width:26px; height:26px; margin:0; padding:0; font-size:0; line-height:1; color:lime; vertical-align:middle; border:none; background:url('../img/common/ico_util.png') 0 0 no-repeat; z-index:99;}
#util .searchBtn:hover,#util .searchBtn:focus,#util .searchBtn:active {background-position:-26px 0;}
#util ul {display:inline-block; margin:0; padding:0; font-size:0; list-style:none; vertical-align:middle;}
#util li {display:inline-block;}
#util a {display:inline-block; width:26px; height:26px; background:url('../img/common/ico_util.png') left top no-repeat;}
#util li li {display:block; font-size:12px;}
#util li li a {display:block; width:auto; height:auto; color:#999; background:none;}
#util .mypage a {background-position:0 -26px;}
#util .cart a {background-position:0 -52px;}
#util .mypage a:hover,#util .mypage a:focus,#util .mypage a:active,#util .mypage .active {background-position:-26px -26px;}
#util .cart a:hover,#util .cart a:focus,#util .cart a:active,#util .cart .active {background-position:-26px -52px;}
#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:#666;}
#util .open .dropdown-menu {display:block;}
.tile {overflow:hidden;}
.tile a {display:block;}
.topBg {height:100px; background-size:cover;}
.detail {position:relative; padding-left:15px; padding-right:15px; border-bottom:1px solid #ededed; background:#fff;}
.entry {position:relative; max-width:800px; min-height:700px; margin:0 auto; padding:70px 0; font-size:0.9em;}
.entry header {margin-bottom:30px; text-align:center; margin-top:20px; margin-bottom:40px;}
.entry h1 {margin-bottom:0.3em; font-size:38px;}
.entry h2 {margin-top:0; font-size:18px; font-weight:normal;}
.entry h3 {font-size:1.2em;}
.entry h4 {font-size:1.1em;}
button.closer {position:absolute; top:0; right:0; width:40px; height:40px; padding:0; text-indent:-999em; border:none; background:#4a4a4d 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 {margin: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 #ededed; background:#fff;}
.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,.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;}
.related .tile .date {display:none;}

#footer {padding:40px 15px; font-size:12px; text-align:center; color:#bbbbbf; background:#4a4a4d;}
#footer ul {padding:0; margin:0; list-style:none; text-align:center;}
#footer li {display:inline-block; margin:3px 10px;}
#footer p {margin:0;}
#footer a,#footer address {color:#bbbbbf;}

/* main */
.swipe .learnmore {display:inline-block; padding:5px 10px; font-size:14px; color:#fff; border-radius:3px; background:#4a4a4d; display:none;}
.promotion {background:#e4e4e6;}

.swipe {position:relative; overflow:hidden;}
.swipe .indicator {position:absolute; bottom:5px; left:50%; z-index:9; width:60%; margin-left:-30%; margin-bottom:0; padding-left:0; text-align:center; list-style:none;}
.swipe .indicator li {display:inline-block; width:12px; height:12px; margin:0 5px; text-indent:-999em; border-radius:100%; border:2px solid #fff; cursor:pointer;}
.swipe .indicator .active {margin:0 5px; border:none;}
.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%; height:340px; background-size:cover;}
.swipe .swipeControl {display:none; position:absolute; top:0; bottom:0; width:10%; color:#fff; text-align:center;}
.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:60px; height:80px; margin-top:-40px; margin-left:-30px; background:url('../img/common/ico_kv_arr.png') no-repeat;}
.swipe .swipeControl.left .prev {background-position:0 0;}
.swipe .swipeControl.right .next {background-position:0 100%;}
.swipe .swipeControl.left:hover .prev,.swipe .swipeControl.left:focus .prev,.swipe .swipeControl.left:active .prev {background-position:100% 0;}
.swipe .swipeControl.right:hover .next,.swipe .swipeControl.right:focus .next,.swipe .swipeControl.right:active .next {background-position:100% 100%;}
.swipe .caption h3 {margin:0 0 10px; font-size:24px; color:#19191a;}
.swipe .caption h4 {overflow:hidden; max-height:5.25em; margin:0 0 20px; font-size:14px; color:#636365; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; font-weight:normal; line-height:1.75;}
.swipe .learnmore {display:inline-block; padding:5px 10px; font-size:14px; color:#fff; border-radius:3px; background:#4a4a4d;}

.entry .swipe {padding-bottom:40px;}
.entry .swipe .item {height:auto;}
.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 {width:35px;}
.entry .swipe .swipeControl .prev,.entry .swipe .swipeControl .next {width:28px; height:55px; margin-top:-28px; margin-left:-14px; background:url('../img/common/ico_gall_arr.png') 0 0 no-repeat;}
.entry .swipe .swipeControl.left .prev {background-position:100% 0;}
.entry .swipe .swipeControl.right .next {background-position:100% 100%;}
.shortCut.container {margin:45px auto; margin-bottom:57px;}
.shortCut {padding:0 15px; text-align:center;}
.shortCut h3 {font-size:18px; font-weight:bold; color:#5c5c5c; line-height:1.5; margin:0; margin-bottom:30px;}
.shortCut .tile {display:table; width:100%; max-width:450px; margin:5px auto; border:1px solid #e9e9eb;}
.shortCut .tile .tileImg {display:table-cell; width:45%; background:transparent;}
.shortCut .tile .tileTitle {display:table-cell; width:55%; text-align:left; vertical-align:middle; padding: 20px 0; padding-right: 10px;}
.shortCut .tileImg img {width:100%;}
.shortCut .tileTitle p {font-size:13px; color:#636365; margin-bottom:10px;}
.shortCut .tileTitle a {font-size:13px; font-weight:bold; color:#323233;}
.shortCut .tileTitle a:before {display:block; width:17px; height:1px; margin:10px 0; content:""; background:#c8c8cc;}

.mainVideo {padding:30px 20px; background:#ebebec;}
.mainVideo .videoImg a {display:block; position:relative; background-size:cover;}
.mainVideo .videoImg a:after {content:""; position:absolute; top:50%; left:50%; width:75px; height:75px; margin-top:-37px; margin-left:-37px; background:url('../img/common/ico_video.png') 50% 50% no-repeat; background-size:cover; opacity:0.6; transition:opacity 0.3s;}
.mainVideo .videoImg a:hover:after,.mainVideo .videoImg a:focus:after {opacity:0.9;}
.mainVideo .videoTxt {padding-top:20px;}
.mainVideo .videoTxt a {display:block; color:#333;}
.mainVideo .videoTxt .main {margin:0 0 0.5em; font-size:16px;}
.mainVideo .videoTxt .sub {margin:0 0 1.5em; font-size:12px; line-height:1.75;}
.mainVideo .videoTxt .readmore {display:inline-block; padding:3px 15px 5px; font-size:12px; border:1px solid #636365; border-radius:30px; transition:background-color 0.3s;}
.mainVideo .videoTxt a:hover .readmore,.mainVideo .videoTxt a:focus .readmore {color:#fff; background-color:#636365;}
#videoPopup .videoCloser {background-color:#636365;}

.newsLetter {padding:30px 0; background:#ebebec;}
.newsLetter .container {padding:0 22px;}
.newsLetter p {margin:0 0 7px; padding-top:3px; padding-left:34px; background:url('../img/ico_mail.png') left 6px no-repeat; background-size:26px 20px; font-size:14px;}
.newsLetter .newsletterForm {position:relative;}
.newsLetter .newsletterForm input[type="text"] {width:100%; height:40px; padding:0 85px 0 10px; font-size:13px; border:1px solid #bbbbbf; border-right:none;}
.newsLetter .newsletterForm button[type="submit"] {position:absolute; top:0; right:0; width:80px; height:40px; line-height:40px; font-size:13px; color:#fff; border:none; border-radius:0 3px 3px 0; background:#4a4a4d; padding-top:0px;}
.newsLetter .newsletterForm button:hover {background:#333;}
.newsletterForm .err {display:none; position:absolute; top:-40px; right:0; width:auto; height:auto; padding:10px 15px; font-size:14px; line-height:1; color:#fff; background:#333; z-index:9;}
.newsletterForm .err:after {display:inline-block; position:absolute; bottom:-20px; left:50%; margin-left:-10px; content:""; border-style:solid; border-color:#333 transparent transparent transparent; border-width:10px;}

.newsWrap {position:relative; margin:0 auto; margin-top:20px; margin-bottom:30px; }
.newsWrap>h3 {position:relative; width:100%; margin:0 auto; padding:18px; font-size:15px; color:#19191a; background:#f3f3f4; cursor:pointer;}
.newsWrap>h3:after {position:absolute; top:18px; right:18px; content:"\f0d7"; font-family:fontAwesome; color:#19191a;}
.newsWrap .filter {display:none; position:absolute; width:100%; padding:0; list-style:none; z-index:9;}
.newsWrap .filter li {width:100%; margin:0 auto; border-top:1px solid rgba(0,0,0,0.1); background:#f3f3f4;}
.newsWrap .filter li:last-child {display:none;}
.newsWrap .filter a {display:block; padding:10px 18px; color:#636365;}
.newsWrap .filter a:hover,.newsWrap .filter a:focus,.newsWrap .filter a:hover,.newsWrap .filter .active a {color:#19191a; text-decoration:none;}
.newsWrap .filter .underline {display:inline-block; padding-bottom:1px; border-bottom:2px solid transparent;}
.newsWrap .filter a:hover .underline,.newsWrap .filter a:focus.underline,.newsWrap .filter a:active.underline,.newsWrap .filter .active .underline {border-color:#19191a;}
.newsWrap>h3.open:after {content:"\f0d8";}

.news {margin:0 auto; margin-bottom:20px; padding:0 10px; font-size:0;}
.news .tile {float:left; width:50%; margin-top:40px; padding:0 10px;}
.news .tile:nth-of-type(2n+1) {clear:left;}
.news .tileImg {position:relative; margin:10px; border:2px solid #aaa; border-radius:10px; background-size:cover;}
.news a:hover .tileImg,.news a:hover .tileImg,.news a:focus .tileImg,.news a:focus .tileImg {border-color:#1e1e1e;}
.news .tileTitle {text-align:center;}
.news .tile a:hover {text-decoration:none;}
.tile .tileTitle h3 {overflow:hidden; font-size:15px; color:#19191a; text-overflow:ellipsis; white-space:nowrap;}
.tile .tileTitle .sub {margin:0; max-height:4.5em; overflow:hidden; font-size:13px; color:#919194; display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2;}
.tile .tileTitle .price {color:#999;}
.tile .tileTitle .discount {color:#333;}
.tile .category {margin:0; font-size:13px; color:#bebec2;}
.news .tileTitle .discount {display:block;}
.loadMore {text-align:center;}
.loadMore button {padding:10px 40px; font-size:13px; color:#fff; border:none; border-radius:3px; background:#8e8e8e; text-decoration:none;}
.loadMore button:hover {background-color:#2f2f32;}
.fa-angle-right {margin-left:10px;}

/* sub */
h3.searchResult {margin:40px 0 -20px; text-align:center; padding:0 20px; font-size:18px; line-height:1.5;}
.gotoHome {margin-top:80px; text-align:center;}
.gotoHome a {display:inline-block; padding:10px 30px; color:#fff;}
.gotoHome a:hover {color:#fff;}
.gotoHome a .fa {margin-left:10px;}
.topBg {height:280px; color:#191919;}
.topBg .title {margin-top:0; margin-bottom:0.3em; font-size:30px;}
.topBg .subTitle {margin:0; font-size:16px;}
#bbs {max-width:800px; margin:0 auto;}

/* title position */
.titlePosition .container {height:100%;}
.titlePosition .titleBox {display:table; position:static; width:100%; height:100%;}
.titlePosition .titleBox .titleCell {display:table-cell; padding:60px 20px; text-align:left; 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 .titleCell {padding:25px 15px;}

/* bbs */
.infoOutline {width:auto; max-width:1170px;margin-bottom:40px;}
.innerOutline {width:auto; max-width:1170px; margin-bottom:40px; padding:40px 15px; background:#fff;}

/* shop */
.shop #shop.shopView {margin-bottom:0;}

/* Media Queries */
@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;}
}
@media screen and (min-width:480px) {
	.swipe .caption h4 {-webkit-line-clamp:3;}
	.swipe .caption a {display:inline-block;}
	.swipe .indicator {bottom:10px;}
	.shortCut .tileTitle p {margin-bottom:25px;}
}
@media screen and (max-width:767px) {
	.heightHeader #gnb .navbar-nav a .ellip {display:inline;border:none;}
}
@media screen and (min-width:768px) {
	body {background:#fff url('../img/common/bg_body_768.png') center top repeat-y;}
	.container {margin:auto;}
	#header>.container {position:relative;}
	#header {height:auto; background:#d7d9d9;}
	#gnb {height:auto;}
	.navbar-header {position:static; width:auto; height:70px; background:none;}
	.navbar-header h1 {position:static; width:auto; height:50px; max-width:100px; margin:0;}
	.navbar-nav {padding:0;}
	.navbar-nav .dropdown .fa-chevron-down {display:none;}
	.heightHeader #gnb .navbar-collapse {position:static; width:auto; height:auto; background:none; z-index:99;}
	.heightHeader #gnb .gnbHome {display:none;}
	.heightHeader #gnb .navbar-nav {float:none; margin-right:160px; font-size:0; text-align:center;}
	.heightHeader #gnb .navbar-nav li {display:inline-block; float:none; border:none;}
	.heightHeader #gnb .navbar-nav li.on {background:none;}
	.heightHeader #gnb .navbar-nav a {padding:25px 10px; font-size:12px; background:none;}
	.heightHeader #gnb .navbar-nav .menuBar {position:relative;}
	.heightHeader #gnb .navbar-nav .menuBar:after {display:none; content:""; position:absolute; top:100%; left:0; width:100%; height:2px; margin-top:3px; background:#333;}
	.heightHeader #gnb .navbar-nav a:hover .menuBar:after,.heightHeader #gnb .navbar-nav a:focus .menuBar:after,.heightHeader #gnb .navbar-nav .on .menuBar:after {display:block;}
	.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 {left:50%; width:140px; min-width:0; margin-left:-70px; padding:8px 0; text-align:center; border:none; background:#454545;}
	.heightHeader #gnb .navbar-nav .dropdown-menu li {display:block;}
	.heightHeader #gnb .navbar-nav .dropdown-menu a {height:auto; padding:8px 20px; font-size:13px; color:#fff;}
	.heightHeader #gnb .navbar-nav .dropdown-menu .subMenuName {display:inline-block; position:relative; padding-left:0;}
	.heightHeader #gnb .navbar-nav .dropdown-menu .subMenuName:before {display:none;}
	.heightHeader #gnb .navbar-nav .menu-3rd {display:block; border:none; background:none;}
	.heightHeader #gnb .navbar-nav .menu-3rd a {padding-left:35px;}
	.heightHeader #gnb .navbar-nav .menu-3rd .subMenuName:before {display:block; left:-12px;}
	.familySite {position:absolute; top:50%; right:85px; width:80px; margin:-18px 0 0;}
	.familySite a {padding:3px 5px;}
	.heightHeader .headerSns {display:none;}
	.heightHeader .gnbDim {display:none !important;}
	#util {right:0;}
	.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;}
	#footer {padding:40px 0;}
	.swipe .item {height:480px;}
	.swipe .swipeControl {display:block;}
	.swipe .caption h3 {margin-bottom:20px; font-size:32px;}
	.swipe .caption h4 {margin-bottom:30px; font-size:15px;}
	.swipe .learnmore {padding:10px 20px; font-size:16px;}
	.swipe .learnmore:hover {background:#333;}
	.titlePosition .titleBox .titleCell {padding:80px 100px;}
	.titlePosition.topBg .titleBox .titleCell {padding:40px;}
	.shortCut {margin:100px auto; padding:0;}
	.shortCut h3 {font-size:26px; margin-top:20px;}
	.shortCut .tile {display:inline-block; width:30%; max-width:none; margin:0; padding:0 35px; vertical-align:top; border:none;}
	.shortCut .tile .tileImg {display:block; width:100%; padding:0 20px;}
	.shortCut .tile .tileTitle {display:block; width:100%; padding:10px 5px 0; text-align:center; vertical-align:top;}
	.shortCut .tileTitle a {display:inline-block; padding:10px 16px; font-size:12px; font-weight:normal; color:#646466; border-radius:3px; background:#d9d9db; text-decoration:none;}
	.shortCut .tileTitle a:before {display:none;}
	.shortCut .tileTitle a:hover {background:#CACACA;}
	.newsLetter p {float:left; width:45%; height:40px; margin:0; padding-left:70px; background-position:left center; background-size:58px 40px; line-height:40px; padding-top:0; }
	.newsLetter .newsletterForm {float:right; width:50%; text-align:right;}
	.newsLetter .newsletterForm input[type="text"] {padding:0 10px;}
	.newsLetter .newsletterForm button[type="submit"] {width:95px;}
	.newsWrap {position:static; margin:60px auto;}
	.newsWrap>h3 {position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; border:none;}
	.newsWrap .filter {display:block !important; position:static; text-align:center;}
	.newsWrap .filter li {display:inline-block; position:relative; width:auto; max-width:none; margin:0 22px; border:none; background:none; font-size:14px;}
	.newsWrap .filter li:before {display:inline-block; position:absolute; top:50%; left:-30px; content:""; width:1px;  height:12px; margin-top:-6px; background:#7c7c7f;}
	.newsWrap .filter li:first-child:before {display:none;}
	.newsWrap .filter a {padding:0;}
	.news {margin-bottom:30px; padding:0 20px;}
	.news .tile {width:33.33%; margin-top:50px; padding:0 20px;}
	.news .tile:nth-of-type(2n+1) {clear:none;}
	.news .tile:nth-of-type(3n+1) {clear:left;}
	.news .tileImg {margin:13px;}
	.loadMore button {font-size:14px;}
	.mainVideo {padding:0;}
	.mainVideo .container {padding:0 15px;}
	.mainVideo .videoImg {float:left; width:50%;}
	.mainVideo .videoTxt {float:left; width:50%; padding-left:20px;}
	.mainVideo .videoTxt .main {font-size:20px;}
	.mainVideo .videoTxt .sub {font-size:13px; display:-webkit-box; -webkit-box-orient:vertical; overflow:hidden; max-height:5.25em; -webkit-line-clamp:3;}
	h3.searchResult {margin:50px 0 0; font-size:22px;}
	.innerOutline {margin:0 auto 60px; padding:40px; border:1px solid #ededed;}
	.infoOutline {margin-bottom:60px;}
	.topBg {height:380px;}
	#content.subMain .newsWrap,#content.shop .newsWrap {margin-top:0;}
	.tile .tileTitle .sub {display: -webkit-box;}
	.shareThis {padding-bottom:80px;}
	.related .tile {width:25%;}
	.related .tileTitle {padding:30px 20px;}
	#videoPopup iframe {position:absolute; top:50%; left:50%; width:90% !important; height:60% !important; margin-top:-30% !important; margin-left:-45% !important;}
}
@media screen and (min-width:992px) {
	body {background:#fff url('../img/common/bg_body.png') center top repeat-y;}
	.heightHeader #gnb .navbar-nav a {padding:25px 20px; font-size:14px;}
	.heightHeader #gnb .navbar-nav .dropdown-menu a { padding: 10px 20px; }
	.swipe .caption h3 {margin-bottom:25px; font-size:45px;}
	.swipe .caption h4 {margin-bottom:40px;}
	.shortCut .tile {padding:0 55px;}
	.newsLetter p {width:50%; line-height:40px; color:#5c5c5c; font-size:1em;}
	.newsLetter .newsletterForm {width:40%;}
	.newsWrap {margin:80px auto;}
	.news {margin-bottom:45px; margin-left:0; margin-right:0; padding:0;}
	.news .tile {width:25%; margin-top:65px;}
	.news .tile:nth-of-type(3n+1) {clear:none;}
	.news .tile:nth-of-type(4n+1) {clear:left;}
	.mainVideo .videoImg a:after {width:150px; height:150px; margin-top:-75px; margin-left:-75px; background-image:url('../img/common/ico_video_x2.png');}
	.mainVideo .videoTxt {padding-top:35px; padding-left:45px;}
	.mainVideo .videoTxt .main {font-size:28px;}
	.mainVideo .videoTxt .sub {margin-bottom:2.2em; font-size:14px;}
	.mainVideo .videoTxt .readmore {padding:3px 25px 5px; font-size:13px;}
	.newsWrap .filter li {margin:0 30px;}
	h3.searchResult {margin-top:60px; font-size:28px;}
	.innerOutline {padding:45px 60px;}
	#videoPopup iframe {width:960px !important; height:540px !important; margin-top:-270px !important; margin-left:-480px !important;}
}
@media screen and (min-width:1200px) {
	.navbar-header h1 {max-width:120px;}
	.heightHeader #gnb .navbar-nav {margin-right:200px;}
	.familySite {right:100px; width:100px; margin-top:-17px;}
}
@media screen and (min-width:1280px) {
	#header>.container {padding:0;}
	.heightHeader #gnb .navbar-nav a {padding:25px;}
	.titlePosition .titleBox .titleCell {padding:100px 0;}
	.titlePosition.topBg .titleBox .titleCell {padding:40px 0;}
	.mainVideo .videoTxt {padding-top:50px; padding-left:50px;}
	.mainVideo .videoTxt .main {font-size:34px;}
	.mainVideo .videoTxt .sub {font-size:16px;}
	.mainVideo .videoTxt .readmore {padding:5px 35px 7px; font-size:14px;}
	.swipe .item {height:600px;}
	.news {margin:0 -20px 60px; padding:0;}
	.topBg {height:400px;}
	.topBg .title {font-size:38px;}
	.topBg .subTitle {font-size:18px;}
	.infoOutline {margin-top:65px;}
	.innerOutline {margin-top:65px; padding:60px 80px; border:1px solid #ededed;}
	.detail {border:1px solid #ededed;}
	#videoPopup iframe {width:1280px !important; height:720px !important; margin-top:-360px !important; margin-left:-640px !important;}
}
@media screen and (min-width:1440px) {
	.related {margin:0;}
	.related h3 {margin-left:0;}
	.related .relatedWrap {margin:0 -5px;}
}