﻿@charset "utf-8";


/*********** ********************************************************************************************/
/*********** ********************************************************************************************/
/* 786px 이하일때 */
@media screen and (max-width: 786px) {
	

/* 레이아웃 */
.header,
.topVisual,
.totalSearchWrap,
.priceQuickWrap,
.categoryWrap,
.premiumWrap,
.contentWrap,
.footer       {min-width:100%; width:100%; }

.header .wrap,
.topVisual .wrap,
.totalSearchWrap .wrap,
.priceQuickWrap .wrap,
.categoryWrap .wrap,
.premiumWrap .wrap,
.contentWrap .wrap,
.footer .wrap {width:100%;}

.contentWrap {min-height:600px;}


/* header */
.header {z-index:10;}
.header .wrap {height:60px;}
.header h1 {width:180px; height:40px; top:12px; left:15px;}

.header .mobileOnly {display:block !important; position:absolute; border-left:1px solid rgba(255,255,255,0.2); right:0; top:0; height:60px; width:60px; clear:both; overflow:hidden;}
.header .mobileOnly .iconBtn {display:inline-block;  width:60px; height:60px; float:left; position:relative;}
.header .mobileOnly .iconBtn:before {
	font-family:'AMB-iconfont' !important;  speak:none; font-style:normal; font-weight:normal; font-variant:normal; text-transform:none; line-height:1;
	-webkit-font-smoothing: antialiased;  -moz-osx-font-smoothing: grayscale;
	display:inline-block; content:'\e910'; font-size:22px;  line-height:25px;
}
.header .mobileOnly .iconBtn.search {display:none;}

.header .mobileOnly .iconBtn.menu.opened:before {content:'\e90e';}
.header .mobileOnly .iconBtn.menu.closed:before {content:'\e910';}

.header .nav {display:block; right:0px; top:60px; width:100%; background:rgba(0,0,0,0.8); border-top:1px solid rgba(255,255,255,0.4); z-index:10; border-bottom:1px solid rgba(255,255,255,0.2); box-shadow:0 2px 2px rgba(0,0,0,0.2);}

.header .nav ul {width:100%;}
.header .nav ul.depth_01>li {display:block; float:none; position:relative;}
.header .nav ul.depth_01>li>a {display:block; padding:10px 25px; line-height:30px; height:auto; font-weight:600; color:#fff; border-bottom:1px solid rgba(255,255,255,0.2);}
.header .nav ul.depth_01>li>ul {display:block; position:relative; top:0px; z-index:1; width:100%; background:rgba(0,0,0,0.3); color:#fff; border:0px; padding:0px 30px; margin:0 auto;} 
.header .nav ul.depth_01>li>ul>li>a {padding:15px 10px; margin:0px 0; border-bottom:1px dashed rgba(255,255,255,0.2); position:relative; padding-left:10px;}
.header .nav ul.depth_01>li>ul>li>a:before {display:block; content:''; width:3px; height:3px; background:#fff; position:absolute; left:0; top:50%; margin-top:-2px;}

.header .nav ul.depth_01>li a:hover {animation:ani_down 0.2s ease-out 0s 1 alternate; color:#fff;}
.header .nav ul.depth_01>li:hover>ul {display:block; animation:ani_down 0.2s ease-out 0s 1 alternate;}

.header .nav ul.depth_01>li a>span {font-size:inherit;}

.header .headSearchBox {display:block; height:60px; top:60px; left:0px; clear:both; z-index:12; border-top:1px solid rgba(0,0,0,0.2); right:0; background:#fff; padding:10px 10px;}
.header .headSearchBox .inp {width:calc(100% - 40px); height:40px; }
.header .headSearchBox .searchBtn {vertical-align:middle; height:40px; width:40px; float:right;} 
.header .indivisual {display:none;}

.header .nav {top:120px;}
.header .headSearchBox,
.header .nav {display:none;}

/* main topVisual */
.topVisual {}
.topVisual .wrap {padding:60px 20px; color:#fff;}


/* subVisual */
.subVisual {height:60px; padding:0;}
.subVisual .wrap {display:none;}


/* categoryWrap */
.categoryWrap {}
.categoryWrap .wrap {padding:40px 10px;}
.categoryWrap .wrap h3 {margin-bottom:30px;}

.categoryBox {margin-left:0px;  margin-right:0px;}
.categoryBox .unit {width:33.3%; margin-bottom:10px;}

.categoryBox .unit .tit {}
.categoryBox .unit .listBox {padding:5px 10px; height:230px;}
.categoryBox .unit .listBox .list {padding:5px 0 5px 10px;}
.categoryBox .unit .listBox .list:before {top:10px; left:3px;}


/* priceQuickWrap */
.priceQuickWrap .wrap {padding:30px 10px;}
.priceQuickWrap  .priceQuickBox .btnUnit {width:33.3%;}
.priceQuickWrap  .priceQuickBox .btnUnit > a {margin:0 5px 10px; min-height:70px;}


/* totalSearchWrap */
.totalSearchWrap {position:relative;}
.totalSearchWrap .wrap {padding:30px 10px;}

.totalSearchBox {padding:20px 10px 20px; text-align:center;}
.totalSearchBox .title {padding:0 0 10px; text-align:center; margin-bottom:10px;}

.totalSearchBox .inp {height:30px; line-height:30px;}
.totalSearchBox .tit {}
.totalSearchBox .btn.search {clear:both; position:relative; bottom:0; right:0; height:40px !important; line-height:30px; padding:0 10px; margin-top:20px; width:calc(100% - 80px) !important; border-radius:30px !important;}

.totalSearchBox .tableStyle {display:initial;  width:auto; margin:0px 0;}
.totalSearchBox .tableStyle .colCell {display:inline-block; float:left;}
.totalSearchBox .colCell:last-child {text-align:left;}

.tableStyle.col1 .colCell {width:100%;}
.tableStyle.col2 .colCell {width:50%;}
.tableStyle.col3 .colCell {width:50%;}
.tableStyle.col4 .colCell {width:50%;}

.tableStyle .colCell .unit {margin:3px 5px;}
.tableStyle .colCell .unit .tit  {width:60px !important;  padding:0 0px 0 5px !important;}
.tableStyle .colCell .unit .cont {text-align:left; padding:0 0 0 5px !important;}

/* premiumWrap */
.premiumWrap {}
.premiumWrap .wrap {padding:30px 10px;}

/* contentWrap */
.totalSearchWrap + .contentWrap .wrap h2 {margin-top:-30px;}
.wrap h2 .title{font-size:24px;}

.contentWrap .wrap {padding:30px 10px;}
.wrap h3 {margin-bottom:10px;}
.wrap h3 .tit {line-height:30px; font-size:16px;}

.premiumWrap .wrap h3,
.contentWrap .wrap h3 {padding:0 5px;}

h3 .listRange {font-size:13px;}

/* footer */
.footer {}
.footer .wrap {padding:30px 15px;}
.footer .wrap h1 {display:block; width:150px; height:40px; position:relative; top:0px; left:0; margin-bottom:20px;}
.footer .wrap .address,
.footer .wrap .copyright {margin-left:0px; }
.footer .wrap .copyright {}

/* LIST */
.listBox {overflow:auto;}
.photoStyle {margin:0 0px;}
.photoStyle li {width:33.3%; margin-bottom:10px; height:270px;}

.photoStyle li a {margin:0 5px;}
.photoStyle li:nth-child(5n - 0) a {margin-right:5px;}
.photoStyle li:nth-child(5n + 1) a {margin-left:5px;}

.photoStyle li .imgBox {height:160px;}
.photoStyle li .imgBox .img {text-align:center;}
.photoStyle li .contBox {height:180px; top:90px;}

.photoStyle li .contBox .overlay,
.photoStyle li .contBox .otherCont {padding:10px 10px; }
.photoStyle li .contBox .overlay   {height:70px;}
.photoStyle li .contBox .otherCont {height:105px; padding:10px 10px}

.photoStyle li .contBox .tit    {margin-top:0px; font-size:15px; }
.photoStyle li .contBox .sCont {padding:0px 0 3px 10px; font-size:13px;}
.photoStyle li .contBox .sCont.category {font-size:14px;}

.photoStyle li .contBox .otherCont .percent {position:absolute; top:20px; font-size:14px; }
.photoStyle li .contBox .otherCont .percent .unit > em { padding:0 4px; font-size:26px; }
.photoStyle li .contBox .otherCont .price {font-size:13px; margin:5px 0 5px 50%;}
.photoStyle li .contBox .otherCont .price .unit {margin:2px 0;}
.photoStyle li .contBox .otherCont .price .unit > em {margin:0 5px 0 0; padding:0 4px;}
.photoStyle li .contBox .otherCont .name {padding-left:18px !important;}
.photoStyle li .contBox .otherCont .name:before {margin-top:-4px;  margin-right:3px;}

.touchSliderBox .photoStyle li{padding:0 5px;}

/* request */
/* Register */

/* mapWrap */

/* etcBoxWrap */
.etcBoxWrap .etcBox {padding:20px 0;}

/* linkManWrap */
.linkManWrap {padding:10px 10px; margin:10px 5px 0;}
.linkManWrap .photoBox {width:100%; text-align:center;}
.linkManWrap .photoBox img {max-width:300px;}
.linkManWrap .photoBox .exText {text-align:left;}
.linkManWrap .formBox * {font-size:13px;}

/* detail*/
.photoView {margin:10px 0 20px 0;}

.photoView .photoBox {width:100%; float:none;}
.photoView .photoList {width:100%; float:none;}

.photoView .photoBox .imgBox {display:inline-block; width:100%; max-width:100%;}
.photoView .photoBox .imgBox img {width:100%;}

.photoView .photoList .imgBox {display:inline-block; width:auto; float:left; text-align:center;}
.photoView .photoList .imgBox a {display:block; width:100px; height:75px; margin:0 auto 10px; border:1px solid rgba(0,0,0,0.2);}
.photoView .photoList .imgBox a img {width:100%; height:100%;}


/* hasRightCont */
.hasRightCont { clear:both; position:relative;}
.hasRightCont .wrap {position:relative; clear:both;  overflow:;}
.hasRightCont .leftContWrap {float:none; overflow:hidden; margin-right:0px;}
.hasRightCont .rightContWrap {width:100%; position:relative; right:0; top:0px;}

.hasRightCont .leftContWrap .photoStyle li {width:33.3%;}

.bottomArea .amb_btnstyle.btn {margin:2px 0;}

.companyWrap .otherBox .unit {float:none; width:100%; padding:70px 20px;}
.companyWrap .otherBox .unit,
.companyWrap .otherBox .unit * {font-size:22px;}

/* winPopup */
.winPopup .contentWrap .wrap {padding-left:20px; padding-right:20px;}
.winPopup .footer .wrap {padding-left:20px; padding-right:20px;}

/* .main  //////////////////////////// */
.main .header .nav ul.depth_01>li>ul {background:rgba(0,0,0,0.8); color:#fff; border:0px;} 

.main .header .headSearchBox {background:rgba(0,0,0,0.8); border-top:1px solid rgba(255,255,255,0.3);}

.main .topVisual {padding-top:100px; height:300px; border-bottom:0px solid #000;}
.main .topVisual .wrap {display:;}
.main .topVisual .wrap .topImg {margin:-45px auto 0; width:160px;}
.main .topVisual .wrap .bText {display:block; margin:13px auto 0; font-size:22px !important;}
.main .topVisual .wrap .bText em {display:inline-block; }
.main .topVisual .wrap .sText {margin:5px auto 0; font-size:12px !important;}

.main .totalSearchWrap {}
.main .totalSearchWrap + .categoryWrap {}

.main .totalSearchWrap .totalSearchBox {padding:10px 5px 10px;}
.main .totalSearchWrap .totalSearchBox .tit {}
.main .totalSearchWrap .totalSearchBox .btn.search {bottom:0; height:35px;  padding:0 10px;}
.main .totalSearchWrap .totalSearchBox .btn.search:before {display:inline-block; vertical-align:middle;  margin:-2px 3px 0 0;}

.main .totalSearchWrap .tableStyle {margin:0px 0; width:auto;}


.paging {padding:10px 0px; margin:5px 0;}
.paging ul.paginglist li {background:none; margin:2px 0px;}
.paging ul.paginglist li a {line-height:30px; height:30px; min-width:30px; padding:0 0px; font-size:13px;}
.paging ul.paginglist li a i {height:26px; font-size:14px;}

}





/* 620px 이하일때 */
@media screen and (max-width: 620px) {
	.photoStyle li {width:50%; margin-bottom:10px; height:240px;}

	.photoStyle li .imgBox {height:130px;}
	.photoStyle li .contBox {height:160px; top:80px;}

	.photoStyle li .contBox .overlay,
	.photoStyle li .contBox .otherCont {padding:5px 10px; }
	.photoStyle li .contBox .overlay   {height:50px;}
	.photoStyle li .contBox .otherCont {height:105px; padding:5px 10px}

	.photoStyle li .contBox .tit    {margin-top:-2px; font-size:14px; }
	.photoStyle li .contBox .sCont  {padding:0px 0 3px 10px; font-size:13px;}
	.photoStyle li .contBox .sCont.category {font-size:13px;}

	.photoStyle li .contBox .otherCont .percent {position:absolute; top:16px; left:6px; font-size:13px; }
	.photoStyle li .contBox .otherCont .percent .unit > em { padding:0 4px; font-size:22px; }
	.photoStyle li .contBox .otherCont .price {font-size:13px; margin:5px 0 5px 50%;}
	.photoStyle li .contBox .otherCont .price .unit {margin:2px 0;}
	.photoStyle li .contBox .otherCont .price .unit > em {margin:0 3px 0 0; padding:0 4px;}
	.photoStyle li .contBox .otherCont .name {padding-left:18px !important; margin-top:-3px;}

	.g_column {padding-right:0;}
	.w_2_1 {width:100%;}

	.rowBox .w_2_1:nth-of-type(2) > h3 {margin-top:30px;}

	.hasRightCont .leftContWrap .photoStyle li {width:50%;}

	.hasRightCont .leftContWrap .amb_form_table.formSty {table-layout:auto;}
	.hasRightCont .leftContWrap .detailView h3 {margin-bottom:5px;}
	.hasRightCont .leftContWrap .rowBox .w_2_1 .amb_form_table.formSty tbody th {min-width:85px !important;}
	.hasRightCont .leftContWrap .rowBox .w_2_1 .amb_form_table.formSty tbody td {min-width:;}

	.writeBox .amb_form_table.formSty {table-layout:auto;}
	.writeBox .amb_form_table.formSty tbody th {width:30% !important;}
	.writeBox .amb_form_table.formSty tbody td .inp.w50p {width:100% !important;} 
	.writeBox .amb_form_table.formSty tbody td .inp + .hint {padding-left:0;}


}

/* 500px 이하일때 */
@media screen and (max-width: 499px) {
	.categoryBox {overflow:auto;}
	.categoryBox .unit {float:left; width:50%; margin-bottom:10px;}

	.categoryBox .unit .listBox {padding:10px 10px; font-size:15px; border-top:0; height:auto;}
	.categoryBox .unit .listBox .list {padding:5px 0 5px 10px; }
	.categoryBox .unit .listBox .list:before {top:10px; left:3px;}

	.tableStyle.col1 .colCell,
	.tableStyle.col2 .colCell,
	.tableStyle.col3 .colCell,
	.tableStyle.col4 .colCell {width:100%;}

	.bottomArea {}
	.companyWrap .gayBox {padding:25px 20px;}
	.companyWrap .otherBox .unit {padding:60px 20px;}
	.companyWrap .otherBox .unit,
	.companyWrap .otherBox .unit * {font-size:18px;}

	.main .topVisual .wrap .topImg {margin:-70px auto 0; width:160px;}
	.main .topVisual .wrap .bText {display:block; margin:13px auto 0; font-size:22px !important;}
	.main .topVisual .wrap .sText {margin:5px 30px 0; font-size:12px !important;}


}

