@charset "utf-8";

/**
* --------------------------------
* Sub CSS
* --------------------------------
*/
/*body .sub {
	width:100%;
}*/
/* serveq */
#contents.serveq section.serveq1  { width:1180px; margin:0 auto 153px; padding-top:100px; }
.serveq .serveq1 .cont { position:relative; padding-left:366px; margin-top:146px; box-sizing:border-box; font-size:22px; color:#231f20; }
.serveq .serveq1 .cont p { position:relative; }
.serveq .serveq1 .cont.intro { min-height:220px; margin-top:95px; }
.serveq .serveq1 .cont.intro .img_intro { position:absolute; left:0; top:0; }
.serveq .serveq1 .cont.intro2 .img_intro { position:absolute; right:0; top:0; }
.serveq .serveq1 .cont.intro p { position:relative; line-height:26px; height:280px; }
.serveq .serveq1 .cont.intro p strong { display:block; font-size:24px; font-weight:600; line-height:34px; }
.serveq .serveq1 .cont.intro p span { position:absolute; left:0; bottom:-8px; display:block; margin-top:26px; font-size:20px; line-height:36px; letter-spacing:-0.01em; }
.serveq .serveq1 .cont.intro2 p { position:relative; line-height:26px; height:280px; left:-366px; }
.serveq .serveq1 .cont.intro2 p strong { display:block; font-size:24px; font-weight:600; line-height:34px; }
.serveq .serveq1 .cont.intro2 p span { position:absolute; left:0; bottom:-8px; display:block; margin-top:26px; font-size:20px; line-height:36px; letter-spacing:-0.01em; }
.serveq .serveq1 .cont h3 { position:absolute; left:0; top:0; display:block; font-size:30px; font-weight:600; color:#555; }
.serveq .serveq1 .cont.identity { margin-top:145px; }
.serveq .serveq1 .cont.identity p { top:-5px; font-size:24px; line-height:34px; }
.serveq .serveq1 .cont.identity dl { margin-top:32px; }
.serveq .serveq1 .cont.identity dl.dlf { margin-top:45px; }
.serveq .serveq1 .cont.identity dt { font-size:24px; line-height:28px; font-weight:600; }
.serveq .serveq1 .cont.identity dd { margin-top:17px; font-size:18px; line-height:28px; }
.serveq .serveq1 .cont.identity .img_slogan,
.serveq .serveq1 .cont.identity .img_frame { margin-top:19px; }
.serveq .serveq1 .cont.identity b { font-size:22px; color:#A42325; }
.serveq .serveq1 .cont.color p { font-size:18px; line-height:28px; }
.serveq .serveq1 .cont.color ul { display:block; width:100%; height:200px; margin-top:19px; background:url('/withonemotors/pjtCom/images/sub/img_brand_serveq02.jpg') no-repeat 0 0; }
.serveq .serveq1 .cont.color ul li { display:none; }
.serveq .serveq1 .cont.slogan { padding-top:3px; }
.serveq .serveq1 .cont.slogan dl:after { content:""; display:block; clear:both; }
.serveq .serveq1 .cont.slogan dt { float:left; width:314px; font-size:24px; font-weight:600; color:#807e7e; clear:both; }
.serveq .serveq1 .cont.slogan dd { position:relaitve; float:left; width:347px; height:23px; background:url('/withonemotors/pjtCom/images/sub/img_brand_serveq03.jpg') no-repeat 0 0; text-indent:-9999px; }
.serveq .serveq1 .cont.slogan dl:last-child { margin-top:28px; }
.serveq .serveq1 .cont.slogan dl:last-child dd { top:-3px; height:31px; background:url('/withonemotors/pjtCom/images/sub/img_brand_serveq04.jpg') no-repeat 0 0; }
.serveq .serveq1 .cont.motif p { font-size:18px; line-height:28px; }
.serveq .serveq1 .cont.motif ul { display:block; width:100%; height:250px; margin-top:19px; background:url('/withonemotors/pjtCom/images/sub/img_brand_serveq05.jpg') no-repeat 0 0; }
.serveq .serveq1 .cont.motif ul li { display:none; }

/**
* --------------------------------
* 인프라 CSS
* --------------------------------
*/

.infra > #contents > section > .txt { margin-top:20px; font-size:20px; line-height:36px; color:#231f20; }

/* quick_nav */
.quick_nav { position:absolute; top:800px; right:4%; transform:translate(0,-50%); z-index:10;}
.quick_nav.on { position:fixed; top:50%; }
.quick_nav ul { position:relative; }
.quick_nav ul:after { content:''; display:block; width:1px; background:#e4e4e4; }
.quick_nav ul li { position:relative; margin-top:37px; }
.quick_nav ul li:after { content:''; position:absolute; right:20px; top:50%; width:1px; height:76px; background:#e4e4e4; }
.quick_nav ul li:last-child:after { display:none; }
.quick_nav ul li:first-child { margin-top:0; }
.quick_nav ul li a { display:block; position:relative; height:39px; line-height:39px; padding-right:50px; font-size:14px; font-weight:400; text-align:right; z-index:1; color:#949494; transition:0.4s; }
.quick_nav ul li a:before { content:''; position:absolute; right:20px; top:50%; transform:translate(50%,-50%); display:block; width:13px; height:13px; background:#807e7f; border-radius:20px; transition:0.4s; }
.quick_nav ul li a:after { content:''; position:absolute; right:20px; top:50%; transform:translate(50%,-50%); display:block; width:12px; height:12px; border:1px solid rgba(128,126,127); border-radius:40px; transition:0.4s; }
.quick_nav ul li.on a { color:rgba(206,70,46,1); font-size:16px; font-weight:600; }
.quick_nav ul li.on a:before { background:#ce462e; }
.quick_nav ul li.on a:after { width:40px; height:40px; border-color:rgba(206,70,46,1); }

/* 물류시스템 */
.infra_distribute .img { width:1180px; text-align:center; margin:35px auto 75px; }
.infra_distribute .process { width:1180px; margin:0 auto; }
.infra_distribute .process > .tit { font-size:30px; text-align:center; color:#555; margin-bottom:23px; }
.infra_distribute .process .img { margin:0; }
.infra_distribute .process > p { text-align:center; font-size:18px; line-height:26px; color:#555555; margin-bottom:56px; }
.infra_distribute .process_list { padding:0 28px; overflow:hidden; }
.infra_distribute .process_list li { float:left; text-align:center; margin-left:20px; }
.infra_distribute .process_list b { display:block; font-size:24px; color:#231f20; margin:35px 0 14px; }
.infra_distribute .process_list p { font-size:18px; line-height:26px; color:#555555; }
.infra_distribute .process_list > li:nth-child(1) { width:200px; margin-left:0; }
.infra_distribute .process_list > li:nth-child(2) { width:209px; }
.infra_distribute .process_list > li:nth-child(3) { width:213px; }
.infra_distribute .process_list > li:nth-child(4) { width:212px; }
.infra_distribute .process_list > li:nth-child(5) { width:210px; }
.infra_distribute .view_table { color:blue }

/* 셰프플라자 */
#contents .infra_plaza { padding-top:135px;}
.infra_plaza .service_list { width:1180px; margin:94px auto 0; text-align:center; }
.infra_plaza .service_list:after { content:''; display:block; clear:both; }
.infra_plaza .service_list li { position:relative; display:inline-block;width:300px; height:300px; text-align:center; margin-left:-9px; border-radius:6px; border:6px solid rgba(44,16,4,0.5); border-radius:300px; vertical-align:middle; }
.infra_plaza .service_list li:first-child { margin-left:0; }
.infra_plaza .service_list li:nth-child(2) { border-color:rgba(206,70,45,0.7); z-index:1; }
.infra_plaza .service_list li:nth-child(3) { border-color:rgba(198,183,180,0.8);  z-index:2; }
.infra_plaza .service_list b { display:block; font-size:24px; color:#231f20; padding-top:103px; }
.infra_plaza .service_list p { margin-top:15px; font-size:18px; line-height:28px; color:#231f20; }
.infra_plaza .img_area { width:1180px; margin:60px auto 0; }
.infra_plaza .location { position:relative; width:1180px; font-size:0; margin:95px auto 0;}
.infra_plaza .location:after { content:''; display:block; clear:both; }
.infra_plaza .location img { float:right; }
.infra_plaza .location > .tit { display:inline-block; font-size:25px; line-height:40px; vertical-align:top; color:#555; margin-top:11px; }
.infra_plaza .location .address { display:inline-block; font-size:18px; line-height:28px; color:#231f20; margin:11px 50px 0 75px; }
.infra_plaza .location .address dt { font-size:24px; font-weight:bold; margin-top:10px; }
.infra_plaza .location .address dt:first-child { margin-top:0; }

.infra_plaza .branch_location { position:relative; width:1180px; height:409px; font-size:0; margin:120px auto 0; }
.infra_plaza .branch_location:after { content:''; display:block; clear:both; }
.infra_plaza .branch_location > .tit { display:inline-block; font-size:30px; line-height:40px; vertical-align:top; color:#555; margin-top:11px; }
.infra_plaza .branch_location img { position:relative; top:-271px; float:right; }
.infra_plaza .branch_location .branch_title { width:360px; }
.infra_plaza .branch_location .branch_title img { position:relative; top:0px; float:none; }
.infra_plaza .branch_location .branch_address { display:inline-block; font-size:18px; line-height:28px; color:#231f20; margin:11px 50px 0 0px; }
.infra_plaza .branch_location .branch_address dt { font-size:24px; font-weight:bold; margin-top:10px; }
.infra_plaza .branch_location .branch_address dt:first-child { margin-top:0; }

/* 고객지원 안내 */
.service .about > section { padding-bottom:110px; }
.service .about .service_area { width:1180px; margin:52px auto 0; }
.service .about .service_area .txt1 { font-size:30px; text-align:center; color:#807e7e; font-weight:600; }
.service .about .service_area .txt2 { font-size:18px; text-align:center; line-height:28px; color:#231f20; margin:24px 0 54px; }

.service .about .service_list { width:100%; font-size:0; text-align:center; margin-top:35px; }
.service .about .service_list > li { display:inline-block; width:295px; }
.service .about .service_list .item { font-size:24px; color:#231f20; }
.service .about .service_list .txt { font-weight:500; font-size:18px; line-height:28px; margin-top:24px; }
.service .about .special_area { width:1180px; margin:98px auto 0; }
.service .about .special_area .txt1 { font-size:30px; text-align:center; color:#807e7e; font-weight:600; margin-bottom:60px; }
.service .about .special_list > li { display:inline-block; position:relative; width:350px; margin-left:50px; color:#fff; }
.service .about .special_list li:first-child { margin-left:0; }
.service .about .special_list li b { display:block; width:100%; color:#231f20; font-weight:600; }
.service .about .special_list li img { margin-top:20px; }
.service .about .special_list li .item { display:block; text-align:center; font-size:24px; text-align:center; }
.service .about .special_list li ul { padding:0 0 0 52px; margin-top:26px; box-sizing:border-box; }
.service .about .special_list li ul li { margin-top:10px; font-size:18px; line-height:28px; color:#231f20; text-indent:-10px; }
.service .about .special_list li ul li:first-child { margin-top:0; }
.service .about .wom_gallery { width:100%;text-align:center; }

/* common */
.ui-state-disabled, .ui-widget-content .ui-state-disabled { height:0; overflow:hidden; }

.txt_area textarea { width:100%; height:100%; box-sizing:border-box; border:1px solid #b5b5b5; padding:8px 15px; line-height:24px; outline:none; }
.txt_area textarea:focus { border:1px solid rgba(0,0,0,1); }


/* 기타 옵션 */
.sub_space { width:100%;height:50px; }

.cal_dx { width:100%; text-align:center; }
.screen { margin:0 auto; width:450px; height:350px; background:url(../images/sub/cal_bg.jpg); background-size:contain; }
.service .about .service_area table .cal_table { border:1px; border-color:red; width:100%; }

.infra_area { width:100%; padding:120px 0 120px 0 !important; }
.infra_area .header_area { position:relative; text-align:center; }
.infra_area .header_area .tit { font-size:30px; color:#231f20; }
.infra_area .header_area .desc { font-size:16px; color:#807e7e; margin:14px 0 50px 0; }
.infra_list { width:1180px; margin:0 auto; overflow:hidden; }
.infra_list li { float:left; position:relative; text-align:center; margin-left:8px; }
.infra_list li:first-child { margin-left:24px; }
.infra_list li .hover_area { position:absolute; left:0; top:0; display:block; width:100%; height:100%; padding-top:108px; box-sizing:border-box; background:rgba(0,0,0,0); transition:0.6s; }
.infra_list li .hover_area b { position:relative; display:block; padding-top:70px; font-size:30px; color:#fff; }
/*.infra_list li .hover_area b:before { content:''; position:absolute; left:50%; top:0; margin-left:-32px; display:block; width:64px; height:52px; background:url('/pjtCom/images/main/icon_infra.png') no-repeat -148px 0; opacity:0; transition:0.6s; }
.infra_list li:nth-child(2) .hover_area b:before { background-position-x:-74px; }
.infra_list li:nth-child(3) .hover_area b:before { background-position-x:0px; }*/
.infra_list li .hover_area p { margin-top:20px; font-size:16px; line-height:24px; color:#fff;  opacity:0; transition:0.6s; }
.infra_list li .hover_area a { display:inline-block; width:118px; height:38px; margin-top:32px; line-height:38px; border:1px solid rgba(255,255,255,1); color:rgba(255,255,255,1); background:rgba(255,255,255,0); border-radius:2px; font-size:14px; font-weight:600;  opacity:0; transition:0.6s; }
.infra_list li:hover .hover_area { padding-top:50px; background:rgba(0,0,0,0.71); }
.infra_list li:hover .hover_area b:before,
.infra_list li:hover .hover_area p,
.infra_list li:hover .hover_area a { opacity:1; }
.infra_list li .hover_area a:hover { background:rgba(255,255,255,1); color:#231f20; }


#infra_list .fl, #infra_list .fr{position:relative; text-shadow:1px 2px 0px #000;}
#infra_list .fl .hover_area { position:absolute; left:0; top:0; display:block; width:100%; height:100%; padding-top:0; box-sizing:border-box; background:rgba(0,0,0,0); transition:0.6s; }
#infra_list .fl .hover_area b { position:relative; display:block; padding-top:20px; font-size:30px; color:#fff; }
/*.infra_list li .hover_area b:before { content:''; position:absolute; left:50%; top:0; margin-left:-32px; display:block; width:64px; height:52px; background:url('/pjtCom/images/main/icon_infra.png') no-repeat -148px 0; opacity:0; transition:0.6s; }
.infra_list li:nth-child(2) .hover_area b:before { background-position-x:-74px; }
.infra_list li:nth-child(3) .hover_area b:before { background-position-x:0px; }*/
#infra_list .fl .hover_area p { margin-top:20px; font-size:16px; line-height:24px; color:#fff;  opacity:0; transition:0.6s; }
#infra_list .fl .hover_area a { display:inline-block; width:118px; height:38px; margin-top:32px; line-height:38px; border:1px solid rgba(255,255,255,1); color:rgba(255,255,255,1); background:rgba(255,255,255,0); border-radius:2px; font-size:14px; font-weight:600;  opacity:0; transition:0.6s; }
#infra_list .fl:hover .hover_area { padding-top:50px; background:rgba(0,0,0,0.71); }
#infra_list .fl:hover .hover_area b:before,
#infra_list .fl:hover .hover_area p,
#infra_list .fl:hover .hover_area a { opacity:1; }
#infra_list .fl .hover_area a:hover { background:rgba(255,255,255,1); color:#231f20; text-shadow:0px 0px 0px; }

#infra_list .fr .hover_area { position:absolute; left:0; top:0; display:block; width:100%; height:100%; padding-top:0; box-sizing:border-box; background:rgba(0,0,0,0); transition:0.6s; }
#infra_list .fr .hover_area b { position:relative; display:block; padding-top:20px; font-size:30px; color:#fff; }
/*.infra_list li .hover_area b:before { content:''; position:absolute; left:50%; top:0; margin-left:-32px; display:block; width:64px; height:52px; background:url('/pjtCom/images/main/icon_infra.png') no-repeat -148px 0; opacity:0; transition:0.6s; }
.infra_list li:nth-child(2) .hover_area b:before { background-position-x:-74px; }
.infra_list li:nth-child(3) .hover_area b:before { background-position-x:0px; }*/
#infra_list .fr .hover_area p { margin-top:20px; font-size:16px; line-height:24px; color:#fff;  opacity:0; transition:0.6s; }
#infra_list .fr .hover_area a { display:inline-block; width:118px; height:38px; margin-top:32px; line-height:38px; border:1px solid rgba(255,255,255,1); color:rgba(255,255,255,1); background:rgba(255,255,255,0); border-radius:2px; font-size:14px; font-weight:600;  opacity:0; transition:0.6s; }
#infra_list .fr:hover .hover_area { padding-top:50px; background:rgba(0,0,0,0.71); }
#infra_list .fr:hover .hover_area b:before,
#infra_list .fr:hover .hover_area p,
#infra_list .fr:hover .hover_area a { opacity:1; }
#infra_list .fr .hover_area a:hover { background:rgba(255,255,255,1); color:#231f20; text-shadow:0px 0px 0px;}


.infra_list .txt_area { position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; color:#fff; }
.infra_list .txt_area .item { font-weight:600; font-size:40px; }
.infra_list li.counsel { margin:8px 0 0 24px; }
.infra_list .txt_area .txt { font-size:18px; line-height:22px; margin-top:23px; }
.infra_list li.counsel .txt_area { padding-left:92px; box-sizing:border-box; }
.infra_list li.counsel .txt_area .item { font-size:30px; }
.infra_list li.counsel .txt_area .item:after { display:none; }
.infra_list li.counsel .txt_area .txt { font-size:16px; line-height:22px; margin-top:10px; }

.infra_list_contact { width:1180px; margin:0 auto; overflow:hidden; }
.infra_list_contact li { float:left; position:relative; text-align:center; margin-left:8px; }
.infra_list_contact li .fl{float:left;}
.infra_list_contact li .fr{float:right;margin-left:8px;}
.infra_list_contact li:first-child { margin-left:24px; }
.infra_list_contact .txt_area { position:absolute; top:50%; left:0; transform:translateY(-50%); width:100%; color:#fff; }
.infra_list_contact .txt_area .item { font-weight:600; font-size:40px; }
.infra_list_contact li.counsel:nth-child(1) { margin:8px 0 0 24px; }
.infra_list_contact li.counsel:nth-child(2) { margin:8px 0 0 8px; }
.infra_list_contact .txt_area .txt { font-size:18px; line-height:22px; margin-top:23px; }
.infra_list_contact li.counsel .txt_area { padding-left:92px; box-sizing:border-box; }
.infra_list_contact li.counsel .txt_area .item { font-size:30px; }
.infra_list_contact li.counsel .txt_area .item:after { display:none; }
.infra_list_contact li.counsel .txt_area .txt { font-size:16px; line-height:22px; margin-top:10px; }

.infra .infra_plaza .branch_wrap { background:red; color:blue; }

@media (max-width: 450px) {
	body {width:400px;}
	#contents .serveq .tit img { width:400px; }
}
@media (min-width: 451px) and (max-width: 767px) {
	
}
@media (min-width: 768px) and (max-width: 991px) {
	
}
@media (min-width: 992px) and (max-width: 1199px) {
	/*main {width:100%;}
	#contents.serveq section.serveq1  { width:990px; padding-top:100px; }
	.serveq1 .intro .img_intro img { width: 264px; height: 224px; }
	.serveq1 .identity .img_slogan img { width: 652px; height: 224px; }
	.serveq1 .identity .img_frame img { width: 652px; height: 224px; }
	.serveq1 .identity .img_history img { width: 625px; height: 575px; }
	.serveq .serveq1 .cont.intro p { right:30px; }*/
}