@charset "utf-8";

@media (max-width:1800px) {
	#header {padding:0 50px;}
	#header .pull-right {position:absolute; top:0; right:0;}
	#gnb {margin-left:210px;}
	#gnb > ul > li {margin-left:35px;}
	#gnb > ul > li > a {font-size:17px;}
	.util {margin-left:30px;}
	.util a {margin-left:20px;}
}

@media (max-width:1400px) {
	.quick {display:none;}

	#gnb {padding-top:30px;}
	#gnb > ul > li > a {line-height:70px;}
	#gnb .submenu {top:70px;}
	.top-search {margin-top:4px;}
	.util {margin-top:15px;}

	.left-menu {width:200px;}
	.category > ul > li > a {font-size:14px; padding:9px 12px;}
	.category .submenu {padding:10px 12px;}
	.category .submenu ul li a {font-size:13px;}
	.sub #container.has-cate #contArea {margin-left:230px;}

	.main-portfolio .cnt{padding:0 80px;}
	.main-portfolio .slick-prev{left:-65px;}
	.main-portfolio .slick-next{right:-65px;}
}

/* landscape tablet and desktop */
@media (max-width:1024px) {
	.only-desktop {display:none;}
	.only-tablet {display:block;}
	.only-mobile {display:none;}

	/* header */
	#wrapper {padding-top:70px;}
	#header {position:fixed; top:0; left:0; width:100%; height:70px; padding:0 30px;}
	#header .pull-left {float:none;}
	#header .pull-right {float:none; position:static;}
	.sitelogo {float:none; margin-top:0; padding:10px 0; text-align:center;}
	.sitelogo img {height:50px;}
	.btn-m-menu {display:block;}
	.top-search-btn {display:block;}
	#gnb {display:none;}
	.top-search {display:none;}
	.util {display:none;}
	.mobile-navigation {display:block;}

	/* main */
	.main-home,
	.main-home .background {height:400px;}
	.main-home .slick-arrow {display:none !important;}
	.main-home .txt img {height:100px;}

	.main-product .cnt ul li{width:33.333%;}

	.main-comm .cnt{max-width:380px; margin:0 auto;}
	.main-comm .box{float:none; width:100%; padding:0;}
	.main-comm .board-zone{margin-top:30px;}

	/* sub */
	.sub-visual {margin-top:0; background-size:cover;}

	/* content */
	.bullet1{padding-left:17px; font-size:16px; line-height:26px;}
	.bullet1:after{width:12px; height:12px; border-width:2px;}

	.con-txt{font-size:14px; line-height:24px;}

	.greeting .section01 .banner{height:350px; background-size:auto 350px;}
	.greeting .section01 .banner .txt{width:370px; padding:30px 0 0 20px;}
	.greeting .section01 .banner .txt h3{font-size:18px;}
	.greeting .section02 .con{max-width:590px; margin:0 auto;}
	.greeting .section02 .con ul{}
	.greeting .section02 .con ul li{width:50%; margin-bottom:20px;}
	.greeting .section02 .con ul li .con-txt{padding-left:17px;}

	.business .title .con-txt{padding-left:17px;}
	.business .pd-box{padding:0 17px;}
	.business .section01 .pd-box .con ul li{width:25%;}

	.product-info .item .con ul li{width:33.333%;}
	.product-info .item .con ul li:nth-child(3n+1){clear:left;}
	.product-info .pd-box{padding:0 17px;}

	.process .list ol li .con > .bullet1:before{top:19px;}

	.inquiry .title .con-txt{padding-left:17px;}

	/* shop */
	.goods-sort {font-size:14px;}
	.goods-sort .fl {float:none;}
	.goods-sort .fr {float:none;}
	.goods-sort .fr:after {content:""; display:block; clear:both;}
	.goods-sort .sort {margin:0 -11px;}
	.goods-sort .sort li {padding:0 11px;}
	.goods-sort .search {float:right; margin-left:0;}
	.goods-sort .search .input {width:160px;}

	.goods-list ul li {width:33.33333333%;}
	.goods-list ul li:nth-child(4n+1) {clear:none;}
	.goods-list ul li:nth-child(3n+1) {clear:left;}
	.goods-list ul li .overlay .inner {font-size:14px; line-height:20px;}
	.goods-list ul li .tit {font-size:14px; line-height:20px;}
	.goods-list ul li .price {font-size:14px; line-height:20px;}

	.goods-summary .photo {width:45%;}
	.goods-summary .info {float:left; width:55%; margin-left:0;}
	.goods-summary .info .btns{font-size:0; line-height:0;}
	.goods-summary .info .btns .col{width:calc(33.333% - 6px);}
}

/* portrait tablet */
@media (max-width:800px) {	
	body, input, textarea, select, button, table {font-size:14px; line-height:1.7em;}

	/* sub */
	.sub-visual {margin-bottom:0;}
	.sub-visual .inner {height:160px;}
	.lnb {display:none;}
	.lnb-m {display:block;}
	.cate-depth2-m{display:block;}

	.cate-depth2 {display:none; background:#f68220; margin:0 0 20px;}
	.cate-depth2 ul li {float:left; width:auto; border-left:1px solid #fff;}
	.cate-depth2 ul li:first-child {border-left:0;}
	.cate-depth2 ul li a {display:block; padding:10px 22px; color:#fff; font-size:15px; line-height:1.2em; text-align:center;}
	.cate-depth2 ul li.active {background:#fff;}
	.cate-depth2 ul li.active a {color:#f68220;}

	.sub #container.has-cate #contArea {margin-left:0;}

	/* shop */
	.goods-list ul li {width:33.3333333%;}
	.goods-list ul li:nth-child(4n+1) {clear:none;}
	.goods-list ul li:nth-child(3n+1) {clear:left;}
	.goods-item .box {padding:26px; border-width:3px;}
	.goods-item .icon {bottom:4px;}
	.goods-item .icon img {height:17px;}
	.goods-item .tit {font-size:14px;}
	.goods-item .price {font-size:15px;}

	.opt-label {display:block;}
	.opt-cnt {margin-left:0;}

	.order-step {background-size:auto 50px;}
	.order-step h2 img {height:55px;}

	.shop-table {display:none;}
	.order-table {display:block;}

	.order-list {display:block;}
	.point-m {display:block;}

	.total-price {font-size:14px;}
	.total-price h3 {font-size:22px;}
	.total-price ul {margin-left:220px;}
	.total-price ul li {padding:10px 0;}
	.total-price ul li .price {font-size:1.1em;}

	.order-info-wrap .col {float:none; width:100%;}
	.order-info-wrap .col:first-child {margin-bottom:30px;}

	/* member */
	.login-area .login-box {border-radius:15px; display:block; margin:0 auto;}
	.login-area .login-box:nth-child(2) {margin-top:30px;}

	.join-area #emailID {width:45% !important;}
	.join-area #emailDomain {width:45% !important;}
	.join-area #emailList {display:block; width:100% !important; margin-top:5px;}

	.find-account {border-radius:15px; display:block; margin:0 auto;}
	.find-wrap .find-account:nth-child(2) {margin-top:30px;}


	/* board */
	.board-search .total-page {font-size:12px;}
	.board-search .select {width:90px; vertical-align:top;}
	.board-search .input {width:160px; vertical-align:top;}
	.board-search .btn {font-size:13px !important; height:35px; vertical-align:top;}

	.board-list {display:none;}
	.board-list-m {display:block;}

	.gallery-list {margin:0 -15px;}
	.gallery-list ul li {width:50%;}
	.gallery-list ul li:nth-child(3n+1) {clear:none;}
	.gallery-list ul li:nth-child(2n+1) {clear:left;}

	.faq {margin:0 -15px;}
	.faq .tit {background:url("../images/bbs/faq_q.png") 15px 8px no-repeat; background-size:auto 25px;}
	.faq .tit a {padding:10px 50px 10px 66px; line-height:20px;}
	.faq .tit .icon {top:10px;}
	.faq .cnt {padding:10px 15px; color:#5e5d5d; line-height:20px;}
	.faq .cnt .buttons {margin-bottom:0;}
	.faq li.active .tit {background-color:#f5f5f5; background-size:auto 25px;}
	.faq li.active .tit a {}
	.faq li.active .tit .icon {}
	.faq .none {padding:50px 0; text-align:center; color:#999;}

	.board-view .head .tit {font-size:15px;}
	.board-view .head .info {font-size:14px;}

	.prev-next {font-size:14px;}

	.btn-pack.small {padding:0 8px; font-size:12px; line-height:24px; height:26px;}
	.btn-pack.medium {font-size:14px;}
	.btn-pack.xlarge {font-size:16px; line-height:45px; height:47px; padding:0 30px;}

} 

/* Landscape phone */
@media (max-width:640px) {
	.only-desktop-tablet {display:none;}
	.only-desktop {display:none;}
	.only-tablet {display:none;}
	.only-mobile {display:block;}

	.contain {padding-left:18px; padding-right:18px;}

	/* header */
	#wrapper {padding-top:60px;}
	#header {padding:0 18px; height:60px}
	.sitelogo img {height:40px;}
	html.search-opened .top-search {top:60px; padding:5px 18px;}
	.top-search .close {top:11px; right:18px;}
	
	/* main */
	.main-home,
	.main-home .background {height:320px;}
	.main-home .txt{-webkit-transform:none; transform:none;}
	.main-home .slide1 .txt{width:auto; left:7%; top:16%; margin-left:0; margin-top:0;}
	.main-home .slide1 .txt img{height:48px;}
	.main-home .slide2 .txt{width:auto; left:8%; top:18%; margin-left:0; margin-top:0;}
	.main-home .slide2 .txt img{height:45px;}

	.sec-tit {font-size:22px; line-height:22px;}

	.main-link{padding:40px 0;}
	.main-link .head{margin-bottom:30px;}
	.main-link .head h2 {margin-bottom:5px;}
	.main-link .head h2 img{height:20px;}
	.main-link .head p{font-size:14px;}
	.main-link .cnt{padding:20px;}
	.main-link .cnt ul{margin-top:-30px;}
	.main-link .cnt ul li{width:50%; padding:0 5%; margin-top:30px;}
	.main-link .cnt ul li .img{margin-bottom:10px;}
	.main-link .cnt ul li .tit{font-size:15px;}

	.main-product{padding:0 0 50px;}
	.main-product .head{margin-bottom:30px;}
	.main-product .head h2 {margin-bottom:5px;}
	.main-product .head h2 img{height:20px;}
	.main-product .head p{font-size:14px;}
	.main-product .cnt ul li{width:50%;}

	.main-portfolio{padding:40px 0;}
	.main-portfolio .head{margin-bottom:30px;}
	.main-portfolio .head h2 {margin-bottom:5px;}
	.main-portfolio .head h2 img{height:20px;}
	.main-portfolio .head p{font-size:14px;}
	.main-portfolio .cnt{padding:0 2.5px;}
	.main-portfolio .slick-slide{margin:0 2.5px;}
	.main-portfolio .buttons{margin:30px auto 0;}
	.main-portfolio .buttons a{font-size:15px; line-height:30px;}

	.main-comm{padding:40px 0;}
	.main-comm .box1 .tel .p1{font-size:22px; line-height:28px;}
	.main-comm .box1 .tel .p2{font-size:13px; line-height:18px;}
	.main-comm .box1 .link .btn{height:40px; font-size:14px; line-height:38px;}

	/* footer */
	.foot-links {padding:6px 0; overflow:hidden; text-align:center;}
	.foot-links ul {display:block; width:auto; margin:0 -18px;}
	.foot-links ul li {border:0 !important; display:inline-block;}
	.foot-links ul li a {padding:4px 5px; font-size:13px; line-height:18px; letter-spacing:-.05em;}
	.foot-info {text-align:center;}
	.foot-info .f-logo {float:none; margin-top:0; margin-bottom:20px;}
	.foot-info .f-logo img {height:40px;}
	.foot-info .f-info {margin-left:0; font-size:12px; line-height:18px;}
	.scroll-top {bottom:10px; right:10px; width:36px; height:36px; background-size:100%;}
	
	/* sub */
	.sub-visual .inner {height:110px;}
	.sub-visual .contain {padding-top:30px;}
	.sub-visual h2 {float:none; font-size:20px; padding-bottom:6px;}
	.sub-visual h2:before{width:125px; margin-left: -62.5px;}
	.sub-visual p {float:none; font-size:14px; margin-top:6px;}

	.lnb-m ul li a {font-size:14px; padding:9px 10px;}

	.cate-depth1 {margin:0;}
	.cate-depth2 {margin:0; padding:0 3px;}

	.sub #container {padding:0;}
	#contArea {padding-left:18px; padding-right:18px;}
	.sub-title {margin:0 -18px 20px; padding:10px 18px 0;}
	.sub-title h2 {font-size:18px; line-height:40px;}
	.sub-title .path {display:none;}


	/* content */
	.greeting .section01 .banner{height:auto; background:none;}
	.greeting .section01 .banner .img{display:block;}
	.greeting .section01 .banner .txt{position:relative; width:100%; padding:20px 15px;}
	.greeting .section01 .banner .txt h3{font-size:16px;}
	.greeting .section01 .con{padding:20px 0 0 49px;}
	.greeting .section01 .con:after{top:0; width: 66.5px; height: 66.5px; background-size:cover;}
	.greeting .section01 .con .con-txt{margin-bottom:20px;}
	.greeting .section02 h3{font-size:18px; margin-bottom:20px;}
	.greeting .section02 h3 span{padding-bottom:10px;}
	.greeting .section02 h3 span:after{height:2px;}

	.root_daum_roughmap .wrap_map{height:300px !important;}
	.location .info{padding:20px; background:#f5f5f5;}
	.location .info h3{font-size:16px;}
	.location .info ul li{font-size:14px; line-height:26px;}

	.business .section01 .pd-box .con{padding:0; background:none;}
	.business .section01 .pd-box .con ul li .tit{font-size:13px; line-height:20px;}
	.business .section01 .pd-box .con ul li{width:50%;}
	.business .section02 .pd-box .con ul li{width:50%;}
	.business .section03 .pd-box .con ul li{width:50%;}

	.product-info .item .con ul li{width:50%;}
	.product-info .item .con ul li:nth-child(3n+1){clear:none;}
	.product-info .item .con ul li:nth-child(2n+1){clear:left;}
	.product-info .item .con ul li .img{margin-bottom:5px;}
	.product-info .item .con ul li .tit{font-size:13px; line-height:20px;}

	.process .list ol li{padding:20px 20px 20px 0;}
	.process .list ol li .img{float:none; width:116px; margin-bottom:15px;}
	.process .list ol li .con{margin-left:0; padding-top:0;}
	.process .list ol li .con > .bullet1:before{display:none;}
	.process .list ol li .con > .con-txt{padding-left:17px;}
	.process .list ol li:nth-child(6) .con .bg-box{position:relative; left:0; top:0; margin-top:20px;}

	.inquiry .title .btn{position:relative; left:0; top:0; max-width:248px; margin:10px 0 0 17px; height:37px; font-size:15px; line-height:35px;}

	.summer-event-txt {font-size:18px;}

	/* shop */
	.goods-sort .fl {float:none;}
	.goods-sort .fr {float:none;}
	.goods-sort .sort {float:none; overflow:hidden; margin:0 -11px 10px; font-size:14px; }
	.goods-sort .sort li {padding:0 11px;}
	.goods-sort .search {float:none; margin-left:0;}
	.goods-sort .search .input {width:calc(100% - 70px)}
	.goods-list {margin:0 -18px; padding-left:18px; padding-right:18px;}
	.goods-list ul {margin:0 -7px;}
	.goods-list ul li {width:50%; padding:0 7px; margin-bottom:25px;}
	.goods-list ul li:nth-child(3n+1) {clear:none;}
	.goods-list ul li:nth-child(2n+1) {clear:left;}
	.goods-list ul li .overlay {display:none;}
	.goods-list ul li .tit {font-size:13px; line-height:18px;}
	.goods-list ul li .price {font-size:13px; line-height:18px;}

	.goods-summary .photo {float:none; width:100%; margin-bottom:20px;}	
	.goods-summary .info {float:none; width:100%; padding-left:0;}	
	.goods-summary .info .table > table > tbody > tr > th {width:95px; height:34px;}
	.goods-summary .info .btns {margin:0 -2px;}
	.goods-summary .info .btns .col {display:block; width:33.33333333%; float:left; padding:0 2px; margin:0;}
	.goods-summary .info .btns .bt {font-size:14px;}

	.goods-view-tab {margin:0 -18px 20px;}
	.goods-view-tab ul li {height:45px;}
	.goods-view-tab ul li a {font-size:13px;}

	.goods-detail-tit {font-size:15px;}
	.goods-detail-table th {padding:5px 10px; width:35%; font-size:12px;}
	.goods-detail-table td {padding:5px 10px; font-size:12px;}
	.goods-detail-table td li {padding-left:9px; text-indent:-9px;}

	.guide-table th {padding:10px; font-size:13px;}
	.guide-table td {padding:10px 0 10px 10px; word-break:break-all; font-size:13px;}

	.order-step {background:none !important; padding-bottom:5px;}
	.order-step h2 img {height:50px;}

	.order-info {font-size:13px; line-height:1.5em;}
	.order-info ol li {padding-left:14px; text-indent:-14px;}
	.order-table .photo img {width:65px; height:65px;}

	.total-price {padding:14px;}
	.total-price h3 {float:none; font-size:17px; margin-bottom:20px;}
	.total-price ul {margin-left:0;}
	.total-price ul li {padding:8px 0;}

	.order-info-table .select {width:100% !important;}
	.order-info-table tbody th {width:25%; padding:6px 10px; font-size:13px; line-height:1.5em;}
	.order-info-table tbody td {padding:6px 10px; font-size:13px; line-height:1.5em;}
	.order-info-table tbody td span {display:inline-block;}
	.order-info-table tbody td .input-point {width:90px !important;}
	.order-info-table tbody td .txt {line-height:1.4em;}

	input#orderPhone1,
	input#orderPhone2,
	input#orderPhone3,
	input#orderMobile1,
	input#orderMobile2,
	input#orderMobile3
	input#shipPhone1,
	input#shipPhone2,
	input#shipPhone3,
	input#shipMobile1,
	input#shipMobile2,
	input#shipMobile3 {width:30% !important;}
	
	/* member */
	.login-area .login-box {padding:18px; border-radius:12px;}
	.login-area .login-box .tit {padding-bottom:15px;}
	.login-area .login-box .tit p {display:none;}
	.login-area .login-box .tit h3 {font-size:18px; text-align:center;}
	.login-area .login-box .form {padding:13px 10px;}
	.login-area .login-box .form fieldset {padding:0;}
	.login-area .login-box .form .btn-pack.login {position:static; width:100%; height:40px; margin-top:12px; display:block;}
	.login-area .naver {padding-bottom:13px;}
	.login-area .not-member {padding:13px 0 0; letter-spacing:-.05em;}
	.login-area .not-member li span {margin-right:4px;}

	.join-area {line-height:1.4em;}
	.join-area h3 {font-size:16px;}
	.join-area .box {padding:10px; height:110px;}
	.join-area .chk {margin-bottom:25px;}
	.join-area .form table th {padding:5px 10px;}
	.join-area .form table td {padding:5px 0 5px 10px}
	.join-area .form table td span {display:inline-block;}
	.join-area input#userID {width:calc(100% - 78px) !important;}
	.join-area input#bankName,
	.join-area input#bankDate,
	.join-area input#userPwd,
	.join-area input#userName,
	.join-area input#pwdConfirm {width:100% !important;}
	.join-area input#birth {width:100px !important;}
	.join-area input#tel1,
	.join-area input#tel2,
	.join-area input#tel3,
	.join-area input#mobile1,
	.join-area input#mobile2,
	.join-area input#mobile3 {width:calc(33.3% - 7px) !important;}
	.join-area input#emailID {width:calc(50% - 9px) !important;}
	.join-area input#emailDomain {width:calc(50% - 10px) !important;}
	.join-area select#emailList {width:100% !important; margin-top:5px;}

	.agree {font-size:14px; line-height:1.6em;}

	.find-account {padding:18px; border-radius:12px;}
	.find-account .form {padding:13px 10px;}
	.find-account .form fieldset {padding:0;}
	.find-account .form .btn-pack.btn {position:static; width:100%; height:40px; margin-top:12px; display:block;}

	
	.member-leave {padding:18px;}
	.member-leave .top {background-size:45px; background-position:50% 0; padding:50px 0 18px; margin-bottom:18px; font-size:12px; line-height:1.5em;}
	.member-leave .top strong {font-size:14px;}
	.member-leave fieldset .group label {width:80px;}
	.member-leave fieldset p {margin-bottom:15px; font-size:13px; line-height:1.5em;}
	.member-leave .input {width:calc(100% - 86px) !important;}

	/* board */
	.board-search .total-page {display:none;}
	.board-search .search {float:none; text-align:left;}
	.board-search .search .select {width:80px;}
	.board-search .search .input {width:calc(100% - 150px);}

	.board-list {display:none;}
	.board-list-m {display:block; margin:0 -18px;}
	.board-list-m li {padding:15px 18px;}

	.gallery-list ul {padding:0 15px;}
	.gallery-list ul li .tit {font-size:14px;}

	.board-view {margin:0 -18px;}
	.board-view .head .tit {font-size:15px; padding:10px 18px;}
	.board-view .head .info {font-size:12px; padding:8px 18px;}
	.board-view .head .files {padding:10px 18px 0;}
	.board-view .head .files .fileLayer {max-width:60%; right:15px;}
	.board-view .head .files .fileLayer a {word-break:break-all; line-height:1.2em;}
	.board-view .head .files .fileLayer img {vertical-align:middle;}
	.board-view .body {padding:15px 18px 25px;}

	.board-write {margin:0 -18px;}
	.board-write .group {padding:5px 0 5px 90px;}
	.board-write .title {top:6px; left:15px; width:75px;}
	.board-write .files_table .input {width:50% !important;}
	.board-write .textarea {width:100% !important;}
	.board-write input#title {width:75% !important;}

	.prev_next {margin:0 -18px;}
	.prev_next dt {width:73px; padding:8px 0 8px 15px; text-align:left; margin-right:0;}
	.prev_next dd {margin-left:80px; padding-right:15px; color:#777;}
	.prev_next dd a {display:inline-block; vertical-align:top; max-width:95%; color:inherit; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}

	.board-password {width:100%; padding:75px 10px 35px; background-size:45px;}
	.board-password dl dt {font-size:15px;}
	.board-password .input {width:50% !important;}

	.paginate {margin:20px 0;}
	.paginate a, .paginate strong {line-height:32px; font-size:14px;}
	.paginate a.direction {width:28px; height:32px;}
	.paginate a.direction.prev {margin-right:10px;}
	.paginate a.direction.next {margin-left:10px;}

	.mailform {margin:0 -15px;}
	.mailform table tbody td {padding:9px 10px;}
	.mailform table tbody th {padding:9px 10px;}
	.form-agree .btn {position:static;}
	.form-agree .scroll-box {height:120px;}

	.btn-pack.medium {padding:0 9px;}
	.btn-pack.large {height:38px; line-height:36px; font-size:15px; padding:0 18px;}
	.btn-pack.xlarge {height:42px; line-height:40px; font-size:16px; padding:0 22px;}

	.review-view-info {padding:18px; margin-bottom:15px;}
	.review-view-info .img img {width:70px; height:70px;}
	.review-view-info .info {margin-left:85px;}
	.review-view-info .tit {padding:0; font-size:16px;}
	.review-view-info .price {font-size:14px;}
	.review-view-info .grade {font-size:14px; padding:8px 0 0 0;}

	
} 

/* Landscape phones and down */
@media (max-width:480px) {
	/* content */
	.greeting .section02 .con ul li{float:none; width:100%;}
	.greeting .section02 .con ul li .img img{width:100%;}

}