/**** 공통 레이아웃 ****/

/* 본문 레이아웃 */
#container_body{padding: 190px 50px 0; width: auto; max-width: 100%; font-size: 0;}
#container_title{display: none;}
.contents_inner{font-size: 0;}
.contents_left{display: inline-block; vertical-align: top; width: 25%; margin-right: 0%; font-size: 15px;}
.contents_left .text01{font-size: 56px; line-height: 1; margin-bottom: 22px; font-weight: 300; color: #252525; margin-left: -3px;}
.contents_left .text02{font-size: 16px; line-height: 28px; font-weight: 300;}
.contents_right{display: inline-block; vertical-align: top; width: 75%; font-size: 15px;}
.cut_layout{width:1280px; margin-left:auto; margin-right: auto;}

/* 공통 본문타이틀 */
.contents_right .sub_title01{font-size: 25px; line-height: 1; margin-bottom: 38px;}
.contents_right .sub_title02{font-size: 18px; line-height: 1; margin-bottom: 30px;}

/* 블루 bg용 상단영역 */
.blue_top { background: url(../img/goods/list_bg.jpg)no-repeat 50% 50%; background-size: cover; padding-top: 30px; }
.blue_top h1 { text-align: center; font-size: 30px; color: #fff; font-weight: normal; line-height: 230px; }

/* 공통 리스트형 테이블 */
.list_table_wrap{margin-bottom: 80px;}
.list_table_wrap table{width: 100%;}
.list_table_wrap thead tr th{border-bottom: 1px solid #e6e6e6; border-top: 1px solid #cecece;}
.list_table_wrap thead tr th,
.list_table_wrap tbody tr td{font-size: 15px;padding: 22px 0;}
.list_table_wrap tbody tr td *{color: #666;}
.list_table_wrap thead tr th{font-weight: normal;}
.list_table_wrap tbody tr td{border-bottom: 1px solid #e6e6e6;}
.list_table_wrap thead tr th > div,
.list_table_wrap tbody tr td > div{padding: 0 10px; line-height: 27px;}
.list_table_wrap tr .tb_date{width: 10%;}
.list_table_wrap tr .tb_subject{width: *;}
.list_table_wrap tr .tb_subject *{color: #222;}
.list_table_wrap tr .tb_price{width: 10%;}
.list_table_wrap tr .tb_btn{width: 10%;}
.list_table_wrap tr .tb_w3{width: 3%;}
.list_table_wrap tr .tb_w5{width: 5%;}
.list_table_wrap tr .tb_w10{width: 10%;}
.list_table_wrap tr .tb_w12{width: 12%;}
.list_table_wrap tr .tb_w15{width: 15%;}
.list_table_wrap tr .tb_w20{width: 20%;}
.list_table_wrap tr .tb_w30{width: 30%;}

/* 공통 세로형 테이블 */
.vetical_table_wrap{margin-bottom: 80px;}
.vetical_table_wrap table{width: 100%;border-top: 1px solid #222;}
.vetical_table_wrap tr th,
.vetical_table_wrap tr td{font-size: 15px;padding: 22px 0;border-bottom: 1px solid #e6e6e6; vertical-align: top; }
.vetical_table_wrap tr th{font-weight: normal;}
.vetical_table_wrap tr td{}
.vetical_table_wrap th > div{padding: 0 30px; line-height: 28px;}
.vetical_table_wrap td > div{padding: 0 10px; line-height: 28px;}
.vetical_table_wrap tr .tb_wauto{width: *;}
.vetical_table_wrap tr .tb_w10{width: 10%;}
.vetical_table_wrap tr .tb_w12{width: 12%;}
.vetical_table_wrap tr .tb_w15{width: 15%;}
.vetical_table_wrap tr .tb_w20{width: 20%;}

/* 테이블 공통 하단 텍스트 */
.fot_notice{font-size: 15px; color: #989898; text-align: right;}
.list_table_wrap + .fot_notice,
.vetical_table_wrap + .fot_notice{margin-top: -50px;}

/* 하단 공통 페이징 시작 */
.paging{margin: 50px 0;}
.paging ul li {margin: 0 5px;}
.paging ul li a{display:block; color:#505050; width:35px; height:35px; border:1px solid #eee; line-height:33px;}
.paging ul li.act a{color:#4ab8ff; border-color:#4ab8ff;}
.paging ul li a img{margin-top:-2px;}

/* 공통 포인트 컬러 */
.point_color{color: #4ab8ff !important;}

/* 공통 하단버튼 */
.tab_cont + .fot_btn_wrap{margin-top: -40px;}
.fot_btn_wrap > *{margin: 0 3px;}
.fot_btn_blue_m{background: #4ab8ff; border: none; cursor: pointer; width: 272px; height: 60px; text-align: center; color: #fff !important; font-size: 19px; line-height: 58px; display: inline-block; vertical-align: top;padding: 0; box-sizing: border-box;}
.fot_btn_white_m{background: #fff; border: 1px solid #ccc; cursor: pointer; width: 272px; height: 60px; text-align: center; font-weight: 300; color: #222; font-size: 19px; line-height: 58px; display: inline-block; vertical-align: top;padding: 0; box-sizing: border-box;}
.fot_btn_black_m{background: #000; border: none; cursor: pointer; width: 272px; height: 60px; text-align: center; color: #fff !important; font-size: 19px; line-height: 58px; display: inline-block; vertical-align: top;padding: 0; box-sizing: border-box;}
.fot_btn_blue_s{background: #4ab8ff; border: none; cursor: pointer; width: 163px; height: 52px; text-align: center; color: #fff !important; font-size: 16px; line-height: 50px; display: inline-block; vertical-align: top;padding: 0; box-sizing: border-box;}
.fot_btn_white_s{background: #fff; border: 1px solid #ccc; cursor: pointer; width: 163px; height: 52px; text-align: center; font-weight: 300; color: #222; font-size: 16px; line-height: 50px; display: inline-block; vertical-align: top; padding: 0; box-sizing: border-box;}
.fot_btn_black_s{background: #000; border: none; cursor: pointer; width: 163px; height: 52px; text-align: center; color: #fff !important; font-size: 16px; line-height: 50px; display: inline-block; vertical-align: top; padding: 0; box-sizing: border-box;}
.table_btn_blue{background: #4ab8ff; border: none; cursor: pointer; width: 57px; height: 26px; text-align: center; color: #fff !important; font-size: 14px; line-height: 24px; display: inline-block; vertical-align: top;padding: 0; box-sizing: border-box;}
.table_btn_white{background: #fff; border: 1px solid #000; cursor: pointer; width: 57px; height: 26px; text-align: center; color: #222; font-size: 14px; line-height: 24px; display: inline-block; vertical-align: top;padding: 0; box-sizing: border-box;}
.table_btn_black{background: #000; border: none; cursor: pointer; width: 57px; height: 26px; text-align: center; color: #fff !important; font-size: 14px; line-height: 24px; display: inline-block; vertical-align: top;padding: 0; box-sizing: border-box;}

/* 공통 버튼 모션 */
.btn_motion {width: 235px; height: 60px; text-indent: 20px; line-height: 60px;background:url("../img/icon/card_arrow.png") 93% center no-repeat;}
.btn_motion a.btn {text-align: left; cursor: pointer; border: 1px solid #c3c3c3;font-size: 16px; font-weight: 300; color: #fff; display: block; width: 100%; line-height: 60px; height: 100%; position: relative; -webkit-font-smoothing: antialiased; }
.btn_motion .line-one { display: block; position: absolute; width: 1px; background-color: #cfcfcf; left: 0; bottom: 0; }
.btn_motion .line-two { display: block; position: absolute; height: 1px; background-color: #cfcfcf; left: 0; top: 0; }
.btn_motion .line-three { display: block; position: absolute; width: 1px; background-color: #cfcfcf; right: 0; top: 0; }
.btn_motion .line-four { display: block; position: absolute; height: 1px; background-color: #cfcfcf; right: 0; bottom: 0; }
.btn_motion a.btn:hover { border-color: transparent; }
.btn_motion a.btn:hover .line-one { -webkit-animation: move1 1500ms infinite ease; animation: move1 1500ms infinite ease; }
.btn_motion a.btn:hover .line-two { -webkit-animation: move2 1500ms infinite ease; animation: move2 1500ms infinite ease; }
.btn_motion a.btn:hover .line-three { -webkit-animation: move3 1500ms infinite ease; animation: move3 1500ms infinite ease; }
.btn_motion a.btn:hover .line-four { -webkit-animation: move4 1500ms infinite ease; animation: move4 1500ms infinite ease; }
@-webkit-keyframes move1 {
  0% { height: 100%; bottom: 0; } 
  54% { height: 0; bottom: 100%; } 
  55% { height: 0; bottom: 0; } 
  100% { height: 100%; bottom: 0; }
}
@keyframes move1 {
  0% { height: 100%; bottom: 0; } 
  54% { height: 0; bottom: 100%; } 
  55% { height: 0; bottom: 0; } 
  100% { height: 100%; bottom: 0; }
}
@-webkit-keyframes move2 {
  0% { width: 0; left: 0; } 
  50% { width: 100%; left: 0; } 
  100% { width: 0; left: 100%; }
}
@keyframes move2 {
  0% { width: 0; left: 0; } 
  50% { width: 100%; left: 0; } 
  100% { width: 0; left: 100%; }
}
@-webkit-keyframes move3 {
  0% { height: 100%; top: 0; } 
  54% { height: 0; top: 100%; } 
  55% { height: 0; top: 0; } 
  100% { height: 100%; top: 0; }
}
@keyframes move3 {
  0% { height: 100%; top: 0; } 
  54% { height: 0; top: 100%; } 
  55% { height: 0; top: 0; } 
  100% { height: 100%; top: 0; }
}
@-webkit-keyframes move4 {
  0% { width: 0; right: 0; } 
  55% { width: 100%; right: 0; } 
  100% { width: 0; right: 100%; }
}
@keyframes move4 {
  0% { width: 0; right: 0; } 
  55% { width: 100%; right: 0; }
  100% { width: 0; right: 100%; }
}

/* form 공통 */
form.basic_form dl {margin-bottom:35px;}
form.basic_form dt {color:#666; font-size:15px; font-weight:500; display:block; margin-bottom:15px;}
form.basic_form dd input { width:100%; height:56px; border:1px solid #dcdcdc; font-size:15px; color:#252525; padding:0 1.5%; box-sizing:border-box;text-indent: 0px;}
form.basic_form dd input[type="button"],
form.basic_form dd input[type="submit"]{font-size: 19px;border: none !important; height:60px;}
form.basic_form dd select::-ms-expand {display:none;}
form.basic_form dd select {width:100%; height:56px; border:1px solid #dcdcdc; font-size:15px; color:#252525; padding:0 1.5%; box-sizing:border-box; background: url('../img/member/sel_arrow.png') #fff no-repeat 98% 50%; border-radius: 0px; -webkit-appearance: none; -moz-appearance: none; appearance: none;}
form.basic_form dd input.err_txt {border:1px solid #f13333 !important; background:url("../img/icon/icon_error.png") 98% center no-repeat;}
form.basic_form dd input:focus {border:1px solid #343434 !important; box-shadow:none !important;}
form.basic_form dd input::placeholder{color: #aeaeae;}

/** 공통 좌측메뉴 **/
.navi_wrap{margin-top: 50%;}
.navi_wrap li{line-height: 30px;}
.navi_wrap li a{font-size: 16px; line-height: 1; overflow: hidden; display: inline-block;opacity: 0.5;display: inline-block;transition-timing-function: linear;transition-timing-function: cubic-bezier(0, 0, 1, 1);transition: all 0.5s;-webkit-transition: all 0.5s;-ms-transition: all 0.5s;}
.navi_wrap li a:hover{opacity: 1; font-weight: 500;}
.navi_wrap li.on a{opacity: 1; font-size: 25px; font-weight: bold; margin: 5px 0;}
/* 메뉴 오버효과 */
.navi_wrap li a span{position: relative; display: inline-block; -webkit-transition: -webkit-transform 0.5s; -moz-transition: -moz-transform 0.5s; transition: transform 0.5s;transition-timing-function: linear;transition-timing-function: cubic-bezier(0, 0, 1, 1);}
.navi_wrap li a:hover{margin-left: 5px;}
.navi_wrap li.on a:hover{}
/* 
.navi_wrap li a:hover span{-webkit-transform: translateY(-100%); -moz-transform: translateY(-100%); transform: translateY(-100%);}
.navi_wrap li a span::before { position: absolute; top: 100%; content: attr(data-hover); font-weight: 500; -webkit-transform: translate3d(0,0,0); -moz-transform: translate3d(0,0,0); transform: translate3d(0,0,0); -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; }
.navi_wrap li.on a:hover span::before{font-weight: bold;}
*/

/* 페이징 */
.paging { margin: 70px 0px; text-align:center;}
.paging a {vertical-align: top; display:inline-block; margin:0 5px; color: #383838; font-size: 12px; font-family: 'Lato', sans-serif; width: 35px; height: 35px; line-height: 33px; border: 1px solid #e6e6e6; -khtml-transition: all 0.3s ease-in-out; -moz-transition: all 0.3s ease-in-out; -ms-transition: all 0.3s ease-in-out; -o-transition: all 0.3s ease-in-out; transition: all 0.3s ease-in-out;    }
.paging a.on,
.paging a.actv{border-color:#49bbf7; color:#49bbf7;z-index: 1; position: relative;}
.paging a img{padding: 12px 0;}
.paging a.jump { font-size: 0; }
.paging a.first { background: url(../img/icon/icon-paging-first.png) no-repeat center; }
.paging a.prev { background: url(../img/icon/icon-paging-prev.png) no-repeat center; }
.paging a.next { background: url(../img/icon/icon-paging-next.png) no-repeat center; }
.paging a.last { background: url(../img/icon/icon-paging-last.png) no-repeat center; }
.paging a.current { border-color: #4ab8ff; color: #4ab8ff; position: relative; z-index: 10; }

/* 견적의뢰 공통 하단 */
.estimate-view-bottom { width: 1280px; margin: 80px auto 150px; }
.estimate-view-bottom .quote { width: 893px; background: #f2f2f2; }
.estimate-view-bottom p { line-height: 151px; font-size: 25px; color: #191919; text-indent: 48px; }
.estimate-view-bottom a.btn-link { position: absolute; top: 50%; right: 49px; margin-top: -30px; }
.estimate-view-bottom .right-box { width: 387px; background: #191919; }
.estimate-view-bottom .right-box p { color: #fff; font-family: 'Lato', sans-serif; }
.estimate-view-bottom .right-box a.btn-list { color: #fff; font-size: 15px; display: block; width: 60px; height: 60px; box-sizing: border-box; border: 1px solid #fff; background: url(../img/icon/icon-bars.png) no-repeat center; -webkit-font-smoothing: antialiased; position: absolute; top: 50%; right: 50px; margin-top: -30px; }
.estimate-view-bottom .right-box a.btn-list .line-one { display: block; position: absolute; width: 1px; background-color: white; left: 0; bottom: 0; }
.estimate-view-bottom .right-box a.btn-list .line-two { display: block; position: absolute; height: 1px; background-color: white; left: 0; top: 0; }
.estimate-view-bottom .right-box a.btn-list .line-three { display: block; position: absolute; width: 1px; background-color: white; right: 0; top: 0; }
.estimate-view-bottom .right-box a.btn-list .line-four { display: block; position: absolute; height: 1px; background-color: white; right: 0; bottom: 0; }
.estimate-view-bottom .right-box a.btn-list:hover { border-color: #191919; } 
.estimate-view-bottom .right-box a.btn-list:hover .line-one { -webkit-animation: move1 1500ms infinite ease; animation: move1 1500ms infinite ease; } 
.estimate-view-bottom .right-box a.btn-list:hover .line-two { -webkit-animation: move2 1500ms infinite ease; animation: move2 1500ms infinite ease; } .estimate-view-bottom .right-box a.btn-list:hover .line-three { -webkit-animation: move3 1500ms infinite ease; animation: move3 1500ms infinite ease; } .estimate-view-bottom .right-box a.btn-list:hover .line-four { -webkit-animation: move4 1500ms infinite ease; animation: move4 1500ms infinite ease; }
.estimate-view-bottom a.btn-link:after { background: #f2f2f2; }


/** 쓰기페이지 캡차 **/
.captcha_wrap .flex{align-items: flex-end;-webkit-align-items: -webkit-flex-end;-ms-align-items: -ms-flex-end;}
.captcha_wrap .inline{margin-bottom: 0px !important;display: flex;display: -webkit-flex;display: -ms-flex;align-items: flex-end;-webkit-align-items: -webkit-flex-end;-ms-align-items: -ms-flex-end;}
.captcha_wrap #btnRefreshCaptcha{cursor: pointer; width: 150px; height: 90px; background: #fff; border: 1px solid #dcdcdc; line-height: 90px;}
.captcha_wrap #btnRefreshCaptcha img{width: 16px; vertical-align: -4px; margin-right: 8px;}
.captcha_wrap #captchaString{margin-left: 10px;  width: 80%; height: 56px; border: 1px solid #dcdcdc; font-size: 15px; color: #252525; padding: 0 1.5%; box-sizing: border-box; text-indent: 0px;}
.captcha_wrap #captchaString::placeholder{color: #aeaeae;}


/**** 모바일/테블릿 리사이징 ****/

@media(max-width: 1280px) {

    /* 본문 레이아웃 */
    #container_body { padding: 100px 15px 0; } 
	.contents_left { width: 100%; display: block;} 
	.contents_left .text01 {font-size: 20px ;padding-bottom: 15px; border-bottom: 1px solid #222; margin-bottom: 0;} 
	.contents_left.has_child .text01{ cursor: pointer;}
	.contents_left.has_child .text01:after{content:""; width: 20px; height: 20px; float: right; background: url('../img/icon/icon-arrow-down-b.png') no-repeat center; background-size: 10px;-moz-transition: all 0.5s ease-in-out; -ms-transition: all 0.5s ease-in-out; -o-transition: all 0.5s ease-in-out; transition: all 0.5s ease-in-out; }
	.contents_left.has_child .text01.on:after{transform: rotate(180deg);}
	.contents_left .text02 { display: none;} 
	.contents_left .text02 br { display: none; } 
	.contents_left .navi_wrap{margin-top: 0px;padding-top: 18px;display: none;}
	.contents_left .navi_wrap li{}
	.contents_left .navi_wrap li a{font-size: 13px;line-height: 19px;}
	.contents_left .navi_wrap li.on a{font-size: 14px;font-weight: 500;margin: 0;}
    .contents_right { width: 100%; display: block; margin-top: 40px;}
	.cut_layout{width: 100%; padding: 0 15px; box-sizing: border-box;}

    /* 공통 본문타이틀 */ 
	.contents_right .sub_title01 { font-size: 22px; line-height: 1; margin-bottom: 28px; font-weight: normal; display: block;} 
	.contents_right .sub_title02 { font-size: 16px; line-height: 1; margin-bottom: 30px; }

	/* 공통 버튼 모션 */
	.btn_motion{width: 173px; height: 42px; text-indent: 10px;background-size: 15px;}
	.btn_motion a.btn{font-size: 12px; line-height: 42px; }

	/* 견적의뢰 공통 하단 */
	.estimate-view-bottom,
	.estimate-view-bottom .quote,
	.estimate-view-bottom .right-box{width: 100%;}
}

@media(max-width: 769px) {

	/* 본문 레이아웃 */
    #container_body { padding-bottom: 0px; } 
    .container { width: auto; }

	/* 공통 본문타이틀 */ 
	.contents_right{font-size: 12px;}
	.contents_right .list_title .sub_title01,	
	.contents_right .list_title .sub_title01 + .pull-right{float: none; display: block; width: 100%;}
	.navi_wrap li a:hover{margin-left: 0; opacity: 0.5;font-weight: normal;}

	/* 블루 bg용 상단영역 */
	.blue_top h1{font-size: 18px;line-height: 100px;}

	/* 공통 버튼 모션 */
	.btn_motion .btn span{display: none !important;}
	.btn_motion a.btn:hover{border-color: #c3c3c3;}

	/* 공통 하단버튼 */
	.fot_btn_wrap > *{margin-bottom: 5px;}
	.fot_btn_white_m,
	.fot_btn_blue_m{width: 100%; height: 47px; line-height: 47px; font-size: 13px;}
	.fot_btn_white_s,
	.fot_btn_blue_s{width: 100%; height: 47px; line-height: 47px; font-size: 13px;}

	/* 페이징 */
	.paging {margin: 40px 0;}
	.paging a{width: 27px; height: 27px; line-height: 26px;font-size: 11px;margin: 0px;margin-left: -1px;}
	.paging a img { padding: 10px 0; width: auto; height: 7px; }

	/* form 공통 */
	form.basic_form dl { margin-bottom: 20px; }
	form.basic_form dt{font-size: 13px;margin-bottom: 12px;}
	form.basic_form dd input, 
	form.basic_form dd select{height: 42px; line-height: 42px; font-size: 12px;}
	form.basic_form dd input[type="text"],
	form.basic_form dd input[type="password"],
	form.basic_form dd input[type="button"],
	form.basic_form dd input[type="submit"],
	form.basic_form dd button{-webkit-border-radius: 0; -webkit-appearance: none; padding-left: 10px; font-size: 12px;}

	/* 견적의뢰 공통 하단 */
	.estimate-view-bottom p{line-height: normal; font-size: 16px; color: #191919; text-indent: 0;}
	.estimate-view-bottom .left-box,
	.estimate-view-bottom .right-box{width: 100%;padding: 20px 15px; box-sizing: border-box;}
	.estimate-view-bottom .left-box{position: relative;}
	.estimate-view-bottom a.btn-link{display: none;}
	.estimate-view-bottom a.mo_link{display: block; width: 100%; height: 100%; position: absolute; top: 0; left: 0;}
	.estimate-view-bottom .right-box a.btn-list{ width: 35px; height: 35px; margin-top: -18px;background-size: 45%;right: 15px;}

	/* 쓰기페이지 캡차 */
	.captcha_wrap .flex{display: block;}
	.captcha_wrap #captchaImage{width: auto; height: 60px;}
	.captcha_wrap #btnRefreshCaptcha{width: 100%;height: 60px;line-height: 58px;}
	.captcha_wrap #captchaString { margin: 10px 0 0;height: 42px;line-height: 42px;font-size: 12px;width: 100%;}
}

@media (max-width: 350px) {

	/* 페이징 */
	.paging a{width: 24px; height: 24px; line-height: 23px; font-size: 10px;}
}