@charset "utf-8";


/* --------------- 1024px --------------- */
@media screen and (max-width:1024px){
  /* header 영역 */
  .wrap{width:100%; max-width:1024px; min-width:inherit;}
  .inner_header{position: relative; width:100%; max-width:1024px; height:45px;}
  .logo {left:50%; top:50%; width:187px; height:23px; transform:translate(-50%, -50%);}
  .inner_header > .nav_box{float:none; position: absolute; left:0; top:0; width:100%; max-width:1024px; height: 45px; padding:0; text-align:inherit;}
  .nav_box > .pc_tnb{display:none;}
  .gnb_open_btn{position:absolute; left: 16px; top: 50%; display:block; width:28px; height:18px; background:url(../images/icon/menu_icon.png); transform:translateY(-50%); z-index:100;}
  .nav_box > .pc_gnb_box{display:none;}

	/* 모바일 메뉴 관련 */
	.mobile_gnb_box{display:block; position:fixed; left:-100%; top:0; width:350px; height:100vh; background-color:#fff; z-index:120;}
	.mobile_gnb > li{width:100%;}
	.mobile_gnb > li > a{display:block; width:100%; height:70px; margin:0; padding-left:16px; background:none; border-bottom:1px solid #e2e2e2; color:#383838; font-family: 'Nanum Gothic', sans-serif; font-size:19px; line-height:70px; letter-spacing:-0.05rem; box-sizing:border-box;}
	.btn_close{display:block; position:absolute; right:-35px; top:10px; width:25px; height:25px; background:url(../images/icon/close_icon.png) no-repeat; font-size:0; text-indent:-9999px;}
	.mobile_bg{display:none; position:fixed; left:0; top:0; width:100%; height:100vh; background-color:rgba(0, 0, 0, 0.5); z-index:115;}
	
	/* 공통 */
  .container{width:100%; max-width:1024px;}
  /* visual-section 메인페이지 슬라이드 영역 */
  .visual-section .slider_box{position:relative; width:100%; max-width:1024px; height:430px;}
	.visual-section .slider_box:before{content:''; position:absolute; left:0; top:0; width:100%; height:100%; background-color:rgba(129, 129, 129, 0.1); z-index:110;}
	.slider_list .slider_visual {height:430px; background-size:cover;}
	.slider_list .slider_visual .pc, .slider_list .slider_visual:after, .slider_list .slider_visual .pc:after{display:none;}
	.slider_list .slider_visual h2 {left:0; top:0; width:40%; height:100%; padding:85px 10px 0 10px; font-size:30px; background:rgba(0, 0, 0, 0.4); color:#fff; box-sizing:border-box; z-index:115;}
	.visual-section .cycle-pager{left:10px; top:15px;}
	
  /* contents-section 메인페이지 컨텐츠 영역 */
  .contents-section {width:100%; max-width:1024px; background-color:#f4f4f4;}
  .contents-section .main_content{width:100%; max-width:1024px; margin:0 auto;}
  .race_about{padding:0;}
  .race_about > ul{width:100%; height:100%; background-color:transparent; box-shadow:none;}
  .race_about > ul > li > a{margin:20px 0;} 
  .sr_sns{width:90%;}
  .sr_sns li a{margin:0 2px;}
	
  /* sr - section  메인페이지 에스알 컨텐츠 영역*/
	.sr-section {max-width:1024px}
	.sr_box{width:100%; height:inherit; padding:0;}
	.sr_box .sr_biz{float:none; width:100%; margin:0; padding:30px 0; border-bottom:1px solid #e2e2e2; text-align:center;}
	.sr_biz > h3{margin-bottom:30px;}
	.sr_biz_link{width:98%; margin:0 auto;}
  .sr_biz_link li{width:16.66666%;}
	.sr_biz_link li a{border-radius:100%; min-width:100px; max-width:100px; margin:0 auto;}
	.quick_menu{float:none; width:100%; padding:30px 0;}
	.quick_menu > ul > li{width:25%;}

  /* ------ 767 - 1024 서브페이지 ------ */

  /* 서브페이지 공통영역 */
  .page_info{width:100%;}
  .page_info > h2{font-size:30px;}
  .page_info > p{font-size:14px; font-weight:300; line-height:24px;}

  /* about_race 레이스램프스 소개 페이지 */
  .sub_visual{position: relative; min-width:320px; max-width:1024px; overflow:hidden;}
  .sub_visual > img{position:absolute; top:0; left:50%; transform:translateX(-50%);}
  .sub_container{width:100%; max-width:1024px; padding:0 20px; box-sizing:border-box;}
  .about{width:100%; margin:0 auto;}
  .about_img{width:289px; height:193px;}
  .about > em{font-size:15px;}
  .about > p{font-size:14px;}
	
	/* sales 레이스램프스 - international 페이지 */
	.sales > ul > li{width:25%;}
    
  /* race-korea 레이스램프스 korea 소개 페이지 */
  .race-korea{width:100%; margin:0 auto;}
  .race-korea > .race-korea_img {width:289px; height:193px;}
  .race-korea > p{font-size:14px;}

  /* product 제품소개 페이지 */
  /* 각 제품페이지 공통영역 */
  .product_container{width:100%; max-width:1024px; padding:0 20px; box-sizing:border-box;}
  .pd_nav{width:95%; max-width:1024px; padding:35px 15px 40px; box-sizing:border-box;} 
  .pd_nav_list > li{width:14.2857%;}
  .pd_nav_list > li > a{margin:0 auto 20px;}
  .pd_summary > .pd_slider{height:580px; padding-right:39px;}
  .slider-for{height:480px;}
  .pd_summary > h3{font-size:28px;}
  .pd_text > dl > dt{font-size:22px;}
  .pd_text > dl > dd{margin-bottom:0; font-size:15px;}
  .pd_comp > h3{font-size:25px}
	.pd_images > li{width:22%; max-width:none; margin:0 4% 10px 0;}
	.pd_images > li:nth-child(4n){margin-right:0;}
  .pd_desc > h3{font-size:28px;}
  .pd_desc > dl >dt{font-size:20px;}
  .pd_desc > dl >dd{font-size:15px;}
	
	/* 제품비교 trailer ramps 제품  */
	.pd_tr > ul > li> a{width:95%; height:auto;}
	

	/* trailer.php */
.trailer_box{width:90%;}
.trailer_item{position:relative; width:100%; height:80vh; padding:20px 20px 70px; box-sizing:border-box; box-shadow:0px 5px 5px 0px rgba(0, 0, 0, 0.4); overflow-y:auto}
.trailer_item .tr_close{position:static; left:0; top:0; right:0; bottom:0; width:100%; height:35px; margin-bottom:40px; text-align:right; vertical-align:top;}
.trailer_item .tr_close span{width:34px; height:35px; background-size:cover; vertical-align:top;}

/* 슬라이드 적용할 부분 */
.trailer_item > .tr_slider{float:none; width:100%;}
.trailer_item .tr_slider_box{width:100%; height:100%;}
.trailer_item .tr_vis {float:none; width:100%; height:315px; margin-bottom:15px;}
.trailer_item .tr_vis img {height:100%; width:auto;}
.trailer_item .tr_nav{width:100%; height:83px;}
.trailer_item .tr_nav span {display:inline-block; width:83px; height:83px; margin:0 4px;}
.trailer_item .tr_nav span:first-child {margin-left:0;}
.trailer_item .tr_nav span img {width:100%; height:100%;}
.trailer_item .tr_nav .mCSB_horizontal.mCSB_inside > .mCSB_container {margin-bottom:0;}
.trailer_item .tr_con{float:none; width:100%; height:auto; margin-left:0;}
.trailer_item .tr_con > dl{height:auto; margin-bottom:50px; padding-top:30px;}
.trailer_item .tr_con > dl > dt:before{content:''; display:block; width:47px; height:2px; margin-bottom:20px; background-color:#ff7e02;}
.trailer_item .tr_con > dl > dt{margin-bottom:25px; font-size:21px; font-weight:bold;}
.trailer_item .tr_con > dl > dd{padding-left:10px; margin-bottom:5px; font-size:14px; line-height:21px;}
.trailer_item .tr_con > em{display:inline-block; margin-top:20px; font-size:18px; font-weight:bold; line-height:24px;}
.trailer_item .tr_con .lnk_btn{display:block; width:200px; height:60px; margin:0 auto; background:#ff7e02; color:#fff; font-size:18px; font-weight:bold; letter-spacing:-0.045rem; line-height:60px; text-align:center;}

	
	
  /* community 커뮤니티 페이지 */
	.cs_img{width:44.086%; max-width:410px;}
  .cs_info{width:54.060%; padding:20px;}
  .cs_info > p{font-size:16px;}
  .cs_info > dl > dt{font-size:20px;}
  .cs_info > dl > dt.tel{font-size:21px;}
  .cs_info > dl > dd.tel{font-size:37px;}
  .cs_info > dl > dd{font-size:20px; margin-bottom:25px;}
  .faq_ser input[type=search]{width:80%;}
  .faq_ser .faq_btn {width:20%;}
  .faq_list{width:100%; max-width:984px;}
  .add-info > div > p{font-size:15px; line-height:23px;}
  .add-info > div > .link_btn{width:221px; height:78px;}

  /* footer */
  #footer{padding:35px 0;}
  .inner_footer{max-width:1024px; text-align:center;}
  .inner_footer > div{width:100%;}
  .sr_shop_btn{display:none;}
}

@media screen and (max-width:1000px){
  .cs_info > p{margin-bottom:20px; font-size:14px;}
  .cs_info > dl > dt{font-size:18px;}
  .cs_info > dl > dt.tel{font-size:20px;}
  .cs_info > dl > dd.tel{font-size:35px;}
  .cs_info > dl > dd{font-size:18px;}
	.cs_info > dl > dd.time{margin-bottom:0;}
}
@media screen and (max-width:968px){
  .pd_nav_list > li{width:16.6666%;}
	.pd_images > li{width:32%; margin:0 2% 10px 0;}
	.pd_images > li:nth-child(4n){margin-right:2%;}
	.pd_images > li:nth-child(3n){margin-right:0;}
}
@media screen and (max-width:855px){
  .cs_info > dl > dt{font-size:16px;}
  .cs_info > dl > dt.tel{font-size:18px;}
  .cs_info > dl > dd.tel{font-size:30px;}
  .cs_info > dl > dd{font-size:16px;}
  .inner_footer{font-size:12px;}
  .inner_footer > div > span:last-child:after{display:none;}
}
@media screen and (max-width:845px){
	.race_about > ul{padding:36px 25px;}
	.race_about > ul > li > a{font-size:20px;}
	.sales > ul > li{width:33.3333%;}
  .pd_nav_list > li{width:20%;}
}

/* --------------- 767px (모바일) --------------- */
@media screen and (max-width:767px){
  .wrap{width:100%; max-width:767px;}
  .search_box{display:none;}
	.mobile_gnb_box{width:77.7777%;}
  
  /* content - wrap */
  .container{width:100%; max-width:767px;}

  /* visual-section 메인페이지 슬라이드 영역 */
  .visual-section .slider_box{width:100%; max-width:767px; height:252px;}
	.slider_list .slider_visual {height:252px;}
	.slider_list .slider_visual h2 {font-size:22px; line-height:30px;}
  .sub_visual{max-width:767px;}

  /* contents-section 메인페이지 컨텐츠 영역 */
  .contents-section {width:100%; max-width:767px; background-color:#f4f4f4;}
  .contents-section .main_content{width:100%; max-width:767px; margin:0 auto;}
  .main_content > div{float:none;}
  .notice{width:100%;}
	.notice > h2{margin-bottom:10px; font-size:20px;}
	.contact{width:100%; height:auto; padding:20px 0; background-color:#fff;}
	.contact > h2{font-size:20px;}
	.sr_sns{width:100%; border-bottom:0;}
	.sr_sns li a{margin:0 8px;}
	.sr_tel p{padding-top:0;}
  .race_about{width:100%; height:auto; padding:0; border-top:1px solid #e2e2e2;}
  .race_about > ul{width:100%; height:auto; padding:0; background-color:transparent; box-shadow:none;}
  .race_about > ul > li > a{width:100%; height:45px; margin:0; border-bottom:1px solid #e2e2e2; font-size:20px; text-align:center; line-height:45px;}
	.race_about > ul > li > a:before{display:none;}
	.race_about > ul > li > a:after{display:none;}
  .sr-section {max-width:767px;}
  .sr_box {width:100%; max-width:767px; box-sizing:border-box;}
  .sr_box > .sr_biz {width:100%; height:auto;}
	.sr_biz > h3{margin-bottom:20px; text-align:center;}

  /* --------------- SUB 서브페이지 --------------- */
  /* 공통 */
  /* 서브페이지 공통영역 */
  .sub_visual{position: relative; max-width:767px; overflow:hidden;}
  .sub_visual > img{position:absolute; height:169px; top:0; left:50%; transform:translateX(-50%);}
  .sub_lnb{width:417px; margin:0 auto;}
  .sub_lnb > ul > li > a{width:137px; font-size:15px; letter-spacing:-0.01rem;}
  .sub_container{width:100%; max-width:767px; padding:0 20px; box-sizing:border-box;}
  .page_info{width:100%;}
  .page_info > h2{float:none; font-size:22px; font-weight:normal; text-align:left;}
  .page_info > p{float: none; display:none;}

  /* about_race 레이스램프스 소개 페이지 */
  .about > .about_img{float:none; width:289px; height:193px; margin:0 auto;}
  .about > strong{width:100%; padding-top:40px; font-size:21px; text-align:center;}
  .about > em{width:100%; padding-top:20px; font-size:15px;}
  .about > em> br{display:none;}
  .about > p{width:100%; font-size:14px; text-align:justify;}
  .about > p > br{display:none;}
  /* race-korea 레이스램프스 korea 소개 페이지 */    
  .race-korea{width:100%; margin:0 auto;}
  .race-korea > .race-korea_img {float:none; width:289px; height:193px; margin:0 auto 40px;}
  .race-korea > p{width:100%; font-size:14px; text-align:justify;}

  /* product 제품소개 페이지 */
  /* 각 제품페이지 공통영역 */
  .product_container{width:100%; max-width:767px; padding:0 20px; box-sizing:border-box;}
  .pd_nav{width:100%; max-width:767px; padding:35px 0 40px; box-sizing:border-box;}
  .pd_nav_list > li > a{margin-bottom:20px;}
  .pd_summary > .pd_slider{float:none; width:100%; height:auto; padding-right:0}
  .slider-for{height:480px;}
  .slider-nav span{width:60px; height:60px;}
	.pd_summary{padding-bottom:0;}
  .pd_summary > h3{font-size:25px;}
  .pd_summary > .pd_text{float:none; width:100%; height:auto; padding:55px 0;}
  .pd_text > dl > dt{font-size:21px;}
  .pd_text > dl > dd{margin-bottom:0; font-size:14px;}
  .pd_comp > h3{font-size:22px;}
  .pd_desc > h3{font-size:22px;}
  .pd_desc > dl >dt{font-size:18px;}
  .pd_desc > dl >dd{font-size:14px; text-align:left;}
	
	/* 제품비교 > trailer ramps 제품 테이블 */
	.pd_tr > ul > li{width:48%; margin-right:4%; margin-bottom:15px;}
	.pd_tr > ul > li:nth-child(2n){margin-right:0;}

  /* community 커뮤니티 페이지 */
  .cs_info{width:100%; height:auto; padding:20px;}
  .cs_info > p{font-size:16px;}
  .cs_info > dl > dt{font-size:20px;}
  .cs_info > dl > dt.tel{font-size:21px;}
  .cs_info > dl > dd.tel{font-size:37px;}
  .cs_info > dl > dd{font-size:20px;}
	.cs_img{width:95%; min-width:280px; max-width:none; margin:0 auto; margin-bottom:20px; float:none;}
	.cs_img img{width:100%; min-width:280px; max-width:410px; height:auto; margin:0 auto; display:block;}
	.faq_ser .faq_btn {font-size:18px;}
	.sr_faq > p{font-size:14px;}
	.faq_list > li{float:none; width:100%;}
	.faq_list > li > a{border-right:1px solid #ff7e02; border-bottom:none; font-size:18px;}
	.faq_list > li:last-child > a{border-bottom:1px solid #ff7202;}
	.add-info{height:auto; box-shadow:none;}
	.add-info > div{float:none; width:100%; margin-bottom:16px; box-shadow:0px 0px 5px 0px rgba(68, 68, 68, 0.57);}
	.add-info > div > input[type=button]{font-size:18px;}
  /* footer */
  #footer{width:100%; padding:35px 0;}
  .inner_footer{max-width:767px; padding:0 25px; font-size:15px; line-height:25px; text-align:left; box-sizing:border-box;}
  .inner_footer div span{padding:0;}
  .inner_footer div span:after{display:none;}
  .sr_shop_btn{display:none;}
  .only_mobile{display:block;}
	
	/* board */
	.notice_board, .gallery {padding-top:30px; margin:0 auto 50px;}
	.map{width:100%; margin:0;}
}

@media screen and (max-width:737px){
	.sr_biz_link{width:80%; margin:0 auto;}
	.sr_biz_link li{width:33.3333%; max-width:none;}
	.sr_biz_link li a{margin:5px auto;}
	.map_table th, .map_table td{font-size:14px; line-height:25px;}
	.map_table th{width:60px; padding-left:0; text-align:center;}
	.map_table td{width:calc(100% - 60px); padding:0 10px;}
}
@media screen and (max-width:680px){
	.sales > ul > li{width:50%;}
	.sales > ul > li div{margin-bottom:8px; font-size:15px;}
	.pd_nav_list > li{width:25%;}
}
@media screen and (max-width:667px){
	.pd_images > li{width:49%; margin:0 2% 10px 0;}
	.pd_images > li:nth-child(4n){margin-right:2%;}
	.pd_images > li:nth-child(3n){margin-right:2%;}
	.pd_images > li:nth-child(2n){margin-right:0;}
}
@media screen and (max-width:570px){
	.pd_nav_list > li{width:33.3333%;}  
}
@media screen and (max-width:450px){
	.list_btn{width:175px; height:72px; font-size:21px; line-height:72px;}
}
@media screen and (max-width:435px){
	.sub_lnb{width:100%; max-width:400px; margin:0 auto;}	
	.sales > ul > li{width:100%;}	
	.sub_lnb{padding-bottom:0;}
	.sub_lnb > ul > li{float:none; width:80%; margin:0 auto;}
	.sub_lnb > ul > li > a{width:100%; margin:3px 0;}
	.pd_nav_list > li{width:50%;}
}
@media screen and (max-width:450px){
	.logo {width:163px; height:20px; margin-left:10px;}
	.quick_menu > ul > li > a span{font-size:12px;}
	.slider_list .slider_visual h2{width:55%;}
	.sr_biz_link{width:70%; margin:0 auto;}
	.sr_biz_link li{width:50%;}
	.page_info > h2{font-size:17px; font-weight:bold;}
	.sub_visual{height:140px; transition:all 0.3s;}
	.sub_visual > img{width:auto; height:100%; }
	.sub_lnb > ul > li:nth-child(2) > a{border-left-width:1px; border-right-width:1px;}
	.sub_lnb > ul > li> a{border-color:#eee;}
	.community h3{font-size:22px;}
	.cs_img{overflow:hidden;}
	.cs_img > img{width:100%; height:auto;}
	.cs_info{float:none; width:100%; height:auto; padding:20px 20px; text-align:center;}
	.cs_info > p{font-size:14px; text-align:center;} 
	.cs_info > dl > dt{font-size:18px; font-weight:800;}
	.cs_info > dl > dd{margin-bottom:20px;}
	.cs_info > dl > dd.tel{font-size:30px;}
	.cs_info > dl > dt.mail{font-size:18px;}
	.cs_info > dl > dd.mail{font-size:18px;}
	.cs_info > dl > .time{font-size:18px; margin-bottom:0;}
.inner_footer{padding:0; text-align:center; font-size:13px;}
}