#FOOTER-MENU_INQUIRY .contents_inner {padding-top:145px;} #FOOTER-MENU_INQUIRY .step_indicator span {display: inline-block; font-size:40px; line-height:40px; vertical-align: bottom;} #FOOTER-MENU_INQUIRY .step_indicator .current {float:left;} #FOOTER-MENU_INQUIRY .step_indicator .next {float:right; font-size:26px; color:#cccccc;} #FOOTER-MENU_INQUIRY .step_indicator .next:after {content:""; position:relative; top:-1px; width:10px; height:10px; display: inline-block; border-top:2px solid #cccccc; border-right:2px solid #cccccc; transform:rotate(45deg); margin-left:5px; box-sizing: border-box; vertical-align: middle;} #FOOTER-MENU_INQUIRY .fclear {clear:both;} #FOOTER-MENU_INQUIRY .steps {margin-top:60px; display: none;} #FOOTER-MENU_INQUIRY .steps.on {display: block;} #FOOTER-MENU_INQUIRY .product_list {width:100%; font-size:0; padding-bottom:60px;} #FOOTER-MENU_INQUIRY .product_list a {position:relative; display: inline-block; vertical-align: top;} #FOOTER-MENU_INQUIRY .product_list a:before {content:""; position:absolute; top:0; left:0; width:calc(100% + 1px); height:calc(100% + 1px); border:1px solid #cccccc; box-sizing: border-box;} #FOOTER-MENU_INQUIRY .product_list a:after {content:""; position:absolute; top:0; left:0; width:calc(100% - 3px); height:calc(100% - 3px); border:2px solid #007acc; opacity:0; transition:opacity 0.3s;z-index: 1} #FOOTER-MENU_INQUIRY .product_list a .copy {display: table; width:100%; text-align: center;} #FOOTER-MENU_INQUIRY .product_list a .copy .copy_inner {display: table-cell; vertical-align: middle;} #FOOTER-MENU_INQUIRY .product_list a:hover:after {opacity:1;} /* ============================ STEP1 ============================ */ #INQUIRY_STEP1 .list_box2{position: relative;} #INQUIRY_STEP1 .category.isW{display: block} #INQUIRY_STEP1 .category.isM{display: none} #INQUIRY_STEP1 .category {position:relative; width:100%; border-left:1px solid #ccc; border-right:1px solid #ccc;background: #f6f6f6;height: 0px;overflow: hidden;transition: height 0.3s; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #INQUIRY_STEP1 .category.on{height: 120px;border-top:1px solid #ccc; } #INQUIRY_STEP1 .category .category_inner{ padding:20px;width: 100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #INQUIRY_STEP1 .category .category_copy {font-size:16px; color:#222222;line-height: 1;margin-bottom: 20px;} #INQUIRY_STEP1 .category .category_list {width:100%; box-sizing: border-box; font-size:0;} #INQUIRY_STEP1 .category .category_list a {display: inline-block; padding:11px 13px; border:1px solid #cccccc; border-radius: 2px; font-size:16px; color:#222222; vertical-align: top; margin-right:10px;transition: all 0.3s;display: none} #INQUIRY_STEP1 .category .category_list a.on {border-color:#007acc;background-color: #fff} #INQUIRY_STEP1 .category .category_list a:hover{border-color:#007acc;} #INQUIRY_STEP1 .category .category_list a:before{display: none} #INQUIRY_STEP1 .category .category_list a:after{display: none} /* 카테고리-발전기용 */ #INQUIRY_STEP1 .category.category1 a{display: none} #INQUIRY_STEP1 .category.category1 a.type_diesel, #INQUIRY_STEP1 .category.category1 a.type_gas{display: inline-block} /* 카테고리-산업용 */ #INQUIRY_STEP1 .category.category2 a{display: none} #INQUIRY_STEP1 .category.category2 a.type_powerunit, #INQUIRY_STEP1 .category.category2 a.type_pump, #INQUIRY_STEP1 .category.category2 a.type_construction, #INQUIRY_STEP1 .category.category2 a.type_forklift, #INQUIRY_STEP1 .category.category2 a.type_agricultural{display: inline-block} /* 카테고리-차량용 */ #INQUIRY_STEP1 .category.category3 a{display: none} #INQUIRY_STEP1 .category.category3 a.type_diesel, #INQUIRY_STEP1 .category.category3 a.type_cng{display: inline-block} /* 카테고리-선박용 */ #INQUIRY_STEP1 .category.category4 a{display: none} #INQUIRY_STEP1 .category.category4 a.type_propulsion, #INQUIRY_STEP1 .category.category4 a.type_auxiliary{display: inline-block} /* 카테고리-부품&서비스 */ #INQUIRY_STEP1 .category.category5 a{display: none} #INQUIRY_STEP1 .category.category5 a.type_parts, #INQUIRY_STEP1 .category.category5 a.type_service, #INQUIRY_STEP1 .category.category5 a.type_reman, #INQUIRY_STEP1 .category.category5 a.type_manual{display: inline-block} /* 카테고리-부품&서비스 */ #INQUIRY_STEP1 .category.category6 a{display: none} #INQUIRY_STEP1 .category.category6 a.type_etc{display: inline-block} #INQUIRY_STEP1 .product_list{padding-bottom: 30px} #INQUIRY_STEP1 .product_list a.list_box {width:33.33%;text-align: center;height: 346px;display: inline-block} #INQUIRY_STEP1 .product_list a.list_box:nth-of-type(3n):before{width: 100%} #INQUIRY_STEP1 .product_list a.list_box:nth-of-type(3n):after{width: calc(100% - 4px)} #INQUIRY_STEP1 .product_list a.list_box .box_inner {display: table;height: 100%;width: 100%} #INQUIRY_STEP1 .product_list a.list_box .box_inner .list_inner {display: table-cell;vertical-align: middle;padding-top: 50px} #INQUIRY_STEP1 .product_list a.list_box .thumb {position: relative;text-align: center;transform: scale(0.9);transition: transform 0.3s} #INQUIRY_STEP1 .product_list a.list_box .thumb>img{} #INQUIRY_STEP1 .product_list a.list_box .thumb .img_area {position: absolute;width: 100%;height: 100%;left: 50%;top: 50%;transform: translate(-50%,-50%);} #INQUIRY_STEP1 .product_list a.list_box .thumb .img_area img{opacity: 1; -webkit-transition: opacity 0.1s; -moz-transition: opacity 0.1s; -ms-transition: opacity 0.1s; -o-transition: opacity 0.1s; transition: opacity 0.1s; } #INQUIRY_STEP1 .product_list a.list_box .thumb .img_area img.off {position: absolute;top: 50%;left: 50%;opacity: 1;transform: translate(-50%,-50%);width: auto;height: auto;max-width: 100%;max-height: 100%} #INQUIRY_STEP1 .product_list a.list_box .thumb .img_area img.on {position: absolute;top: 50%;left: 50%;opacity: 0;transform: translate(-50%,-50%);width: auto;height: auto;max-width: 100%;max-height: 100%} #INQUIRY_STEP1 .product_list a.list_box .copy {height:128px;} #INQUIRY_STEP1 .product_list a.list_box .copy span {font-size:20px; color:#666666; line-height: 30px;} #INQUIRY_STEP1 .product_list a.list_box:hover .thumb .img_area img.off{opacity: 0} #INQUIRY_STEP1 .product_list a.list_box:hover .thumb .img_area img.on{opacity: 1} #INQUIRY_STEP1 .product_list a.list_box:hover .copy span {color: #222} #INQUIRY_STEP1 .product_list a.list_box.on .thumb{transform: scale(1)} #INQUIRY_STEP1 .product_list a.list_box.on .thumb .img_area img.off{opacity: 0} #INQUIRY_STEP1 .product_list a.list_box.on .thumb .img_area img.on{opacity: 1} #INQUIRY_STEP1 .product_list a.list_box.on:after {opacity:1;} #INQUIRY_STEP1 .product_list a.list_box.on .copy span {color: #222} #INQUIRY_STEP1 .btn_next{margin-top: 60px} /* ============================ STEP2 ============================ */ #INQUIRY_STEP2 .product_list a {width:25%;} #INQUIRY_STEP2 .product_list a:nth-of-type(3n):before{width: calc(100% + 1px)} #INQUIRY_STEP2 .product_list a:nth-of-type(3n):after{width: calc(100% - 3px)} #INQUIRY_STEP2 .product_list a:nth-of-type(4n):before{width: 100%} #INQUIRY_STEP2 .product_list a:nth-of-type(4n):after{width: calc(100% - 4px)} #INQUIRY_STEP2 .product_list a .thumb {padding:45px 0 0;text-align: center} #INQUIRY_STEP2 .product_list a .copy {height:93px;} #INQUIRY_STEP2 .product_list a .copy span {font-size:18px; color:#666666; line-height:25px;} #INQUIRY_STEP2 .product_list a.on:after{opacity: 1} #INQUIRY_STEP2 .product_list a.on .copy span{color: #222} /* ============================ STEP3 ============================ */ #INQUIRY_STEP3 .input_area {width:100%; border:1px solid #cccccc; padding:60px 112px 100px; box-sizing: border-box; margin-bottom:60px;} #INQUIRY_STEP3 .detail_info {position:relative; font-size:0; padding-bottom:60px; border-bottom:1px solid #cccccc;} #INQUIRY_STEP3 .detail_info > div {display: inline-block; vertical-align: top;} #INQUIRY_STEP3 .detail_info .thumb {width:56%;} #INQUIRY_STEP3 .detail_info .thumb img {width:100%; max-width:230px;} #INQUIRY_STEP3 .detail_info .copy {width:44%; color:#222222;} #INQUIRY_STEP3 .detail_info .copy dl dt {font-size:26px; margin-bottom:30px;} #INQUIRY_STEP3 .detail_info .copy dl dd {font-size:16px; margin-bottom:8px; line-height:21px;} #INQUIRY_STEP3 .detail_info .copy dl dd span {display:inline-block; width:198px;vertical-align: top;padding-right: 20px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #INQUIRY_STEP3 .detail_info.none .thumb{width: 45%;vertical-align: middle} #INQUIRY_STEP3 .detail_info.none .copy{font-size: 32px;width: 55%;vertical-align: middle} #INQUIRY_STEP3 .form_area{margin-top: 30px;} #INQUIRY_STEP3 .user_list_area{width: 100%;height: 100%;} #INQUIRY_STEP3 .user_list_area .user_list_area_info{position: absolute;right: 112px;top: 55px;font-size: 14px;color: #666} #INQUIRY_STEP3 .user_list_area ul{ } #INQUIRY_STEP3 .user_list_area ul li{font-size: 0;margin-top:28px} #INQUIRY_STEP3 .user_list_area ul li:first-child{margin-top: 0} #INQUIRY_STEP3 .user_list_area ul li>div{display: inline-block;vertical-align: top;height: 62px;line-height: 62px;} #INQUIRY_STEP3 .user_list_area ul li>div.input_tit{font-size: 18px;color: #222;width: 152px;} #INQUIRY_STEP3 .user_list_area ul li>div.input_box{width: calc(100% - 152px);padding-left: 38px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #INQUIRY_STEP3 .user_list_area ul li .input_tit span.required{font-size:18px;color: #007acc;padding-left: 4px;} #INQUIRY_STEP3 .user_list_area ul li .input_box input{font-size: 18px;width: 100%;height: 62px;line-height: 62px;color: #999;border-bottom: 1px solid #ccc;vertical-align: top; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* user name */ #INQUIRY_STEP3 .user_list_area ul li.name_area .input_box{font-size: 0} #INQUIRY_STEP3 .user_list_area ul li.name_area .input_box input{width: 48%;display: inline-block;vertical-align: top;} #INQUIRY_STEP3 .user_list_area ul li.name_area .input_box input.input_first_name{margin-right: 2%} #INQUIRY_STEP3 .user_list_area ul li.name_area .input_box input.input_surname{margin-left: 2%} /* user e-mail */ #INQUIRY_STEP3 .user_list_area ul li.mail_area .input_box{font-size: 0} #INQUIRY_STEP3 .user_list_area ul li.mail_area .input_box .cform{display: inline-block;vertical-align: top} #INQUIRY_STEP3 .user_list_area ul li.mail_area .input_box .input_mail_id{width: 40%} #INQUIRY_STEP3 .user_list_area ul li.mail_area .input_box span.cform{width: 6%;text-align: center;font-size: 20px;color: #222} #INQUIRY_STEP3 .user_list_area ul li.mail_area .input_box .input_mail_domain{width: 54%;} /* user contents */ #INQUIRY_STEP3 .user_list_area ul li.contents_area{margin-top: 42px} #INQUIRY_STEP3 .user_list_area ul li.contents_area .input_box{height: 260px} #INQUIRY_STEP3 .user_list_area ul li.contents_area .input_box textarea{width: 100%;height: 100%;overflow-y: auto;padding: 25px 32px;background: #f5f5f5;font-size: 16px;resize: none; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } /* user upload file */ #INQUIRY_STEP3 .user_list_area ul li.file_area{margin-top: 42px;position: relative;} #INQUIRY_STEP3 .user_list_area ul li.file_area>div{vertical-align: top} #INQUIRY_STEP3 .user_list_area ul li.file_area .input_tit{line-height: 1} #INQUIRY_STEP3 .user_list_area ul li.file_area .input_box{height: 100%} #INQUIRY_STEP3 .user_list_area ul li.file_area .upload_area {position: relative; font-size:0;line-height: 40px} #INQUIRY_STEP3 .user_list_area ul li.file_area .upload_area #file {position: absolute;left: 0;top: 0;display: inline-block;width:90px;height:40px;cursor:pointer;-ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=0);opacity: 0;} #INQUIRY_STEP3 .user_list_area ul li.file_area .upload_area label {display:inline-block;width: 90px;height: 40px;line-height: 40px;font-size: 14px;text-align: center;margin: 0 auto;border: 1px solid #999;background-color: #fff;cursor:pointer;color:#222;vertical-align: top; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;} #INQUIRY_STEP3 .user_list_area ul li.file_area .upload_area #file:hover+label{background: #007acc;color: #fff;border-color:#007acc} #INQUIRY_STEP3 .user_list_area ul li.file_area .upload_area .input_file_name {width: calc(100% - 140px);background: #fff; margin-left:20px;border:none; height:40px; font-size:14px;} #INQUIRY_STEP3 .user_list_area ul li.file_area .upload_area .btn_delete {position: absolute; right: 0; top: 50%; display: inline-block; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%); display:none;} #INQUIRY_STEP3 .user_list_area ul li.file_area .upload_area .btn_delete span {font-size:16px;color:#999;} #INQUIRY_STEP3 .user_list_area ul li.file_area p.caption {color: #666; margin-top:16px;font-size: 14px;line-height: 1} /* agree */ #INQUIRY_STEP3 .clear_line{width: 100%;height: 1px;background: #ccc;margin: 55px auto ;} #INQUIRY_STEP3 .agree_area .gu_box_title {margin-bottom:30px;} #INQUIRY_STEP3 .agree_area .agree_box_inner {padding:36px 25px 35px 40px;background:#f7f7f7;height:420px;-webkit-box-sizing:border-box; -moz-box-sizing:border-box; box-sizing:border-box;} #INQUIRY_STEP3 .agree_area .agree_box_inner .textarea {height:368px;overflow-y:scroll; padding-right:25px;color:#555;overflow-x:hidden;} #INQUIRY_STEP3 .agree_area .agree_box_inner .textarea::-webkit-scrollbar {width: 4px;height: 1px;} #INQUIRY_STEP3 .agree_area .agree_box_inner .textarea::-webkit-scrollbar-track {background-color: #f7f7f7;} #INQUIRY_STEP3 .agree_area .agree_box_inner .textarea::-webkit-scrollbar-track-piece {background-color: #f7f7f7;} #INQUIRY_STEP3 .agree_area .agree_box_inner .textarea::-webkit-scrollbar-thumb {background-color: #a8a8a8;} #INQUIRY_STEP3 .agree_area .agree_box_inner .textarea::-webkit-scrollbar-button:start {background-color: #f7f7f7;} #INQUIRY_STEP3 .agree_area .agree_box_inner .textarea::-webkit-scrollbar-button:end {background-color: #f7f7f7;} #INQUIRY_STEP3 .agree_area .agree_box_inner .textarea strong {display:block;} #INQUIRY_STEP3 .agree_area .agree_box_inner .textarea [class*='type_bullet'] li {position:relative; padding-left:10px;} #INQUIRY_STEP3 .agree_area .agree_box_inner .textarea [class*='type_bullet'] li:before {content:'-'; position:absolute;left:0;} #INQUIRY_STEP3 .agree_area .agree_box_inner .textarea .gu_box_sub_title {margin:20px 0 15px;} #INQUIRY_STEP3 .agree_area .agree_desc {padding-top:30px;color:#222;} #INQUIRY_STEP3 .agree_area .agree_desc.agree_all {padding-top:40px; font-size:18px;} #INQUIRY_STEP3 .agree_area .agree_desc.agree_all > div {font-size:18px;} #INQUIRY_STEP3 .agree_area .agree_desc > div {display:inline-block; vertical-align:middle;} #INQUIRY_STEP3 .agree_area .agree_desc .btn_agree {position:relative;float:right;cursor:pointer;} #INQUIRY_STEP3 .agree_area .agree_desc .btn_agree:before {content:''; position:absolute; width:20px;height:20px;left:-30px;top:50%;border:1px solid #c8c8c8; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%);} #INQUIRY_STEP3 .agree_area .agree_desc .btn_agree.on:after {content:''; position:absolute; width:12px;height:12px;left:-25px;top:50%;background:#007acc; -webkit-transform:translateY(-50%); -moz-transform:translateY(-50%); -ms-transform:translateY(-50%); -o-transform:translateY(-50%); transform:translateY(-50%);} /* 셀렉트박스 */ #INQUIRY_STEP3 .fclear .gu_sort_area {float:right;margin-bottom:50px;} #INQUIRY_STEP3 .gu_sort_area .gu_sort_name a{padding-bottom: 0} #FOOTER-MENU_INQUIRY .btn_next{text-align: center;margin: 85px auto 0px} /* ============================ popup ============================ */ #FOOTER-MENU_INQUIRY .gu_popup .pop_contents{min-height: 267px;width: 522px;padding: 50px 80px;text-align: center} #FOOTER-MENU_INQUIRY .gu_popup .pop_contents .pop_cnt_tit{font-size: 22px;line-height: 28px;color:#222} #FOOTER-MENU_INQUIRY .gu_popup .pop_contents .pop_cnt_desc{font-size: 16px;line-height: 24px;color:#666;margin-top: 10px;} #FOOTER-MENU_INQUIRY .gu_popup .pop_contents .popup_bottom{margin-top: 35px} /* ================================== Laptop css ================================== */ @media all and (max-width: 1280px) { } /* ================================== Tablet css ================================== */ @media all and (max-width: 1080px) { #FOOTER-MENU_INQUIRY .step_indicator span{font-size: 32px;line-height: 32px} #FOOTER-MENU_INQUIRY .step_indicator .next{font-size: 21px} #FOOTER-MENU_INQUIRY .btn_next{margin: 40px auto 0;} #FOOTER-MENU_INQUIRY .product_list a:hover:after {opacity:0;} #FOOTER-MENU_INQUIRY .product_list a.on:after {opacity:1;} #INQUIRY_STEP1 .product_list{padding-bottom: 22px} #INQUIRY_STEP1 .product_list a.list_box{height: 250px} #INQUIRY_STEP1 .product_list a.list_box .box_inner .list_inner{padding-top: 0} #INQUIRY_STEP1 .product_list a.list_box .copy{height: 50px} #INQUIRY_STEP1 .product_list a.list_box .copy span{font-size: 16px;line-height: 20px;} #INQUIRY_STEP1 .product_list a.list_box .copy span br{display: block} #INQUIRY_STEP1 .product_list a.list_box:hover .thumb .img_area img.off{opacity: 1} #INQUIRY_STEP1 .product_list a.list_box:hover .thumb .img_area img.on{opacity: 0} #INQUIRY_STEP1 .product_list a.list_box:hover .copy span {color: #666} #INQUIRY_STEP1 .product_list a.list_box.on .thumb .img_area img.off{opacity: 0} #INQUIRY_STEP1 .product_list a.list_box.on .thumb .img_area img.on{opacity: 1} #INQUIRY_STEP1 .product_list a.list_box.on .copy span {color: #222} #INQUIRY_STEP1 .category .category_inner{padding: 24px 16px 20px } #INQUIRY_STEP1 .category .category_copy{font-size: 12px;} #INQUIRY_STEP1 .category .category_list a{font-size: 14px;padding: 9px 11px} #INQUIRY_STEP2 .product_list a .thumb{padding: 20px 20px 0 } #INQUIRY_STEP2 .product_list a .thumb img{width: 100%} #INQUIRY_STEP2 .product_list a .copy{height: 58px } #INQUIRY_STEP2 .product_list a .copy span{font-size:14px;line-height: 18px} #INQUIRY_STEP3 .input_area{padding: 75px 56px 58px} #INQUIRY_STEP3 .detail_info .thumb{width: 45%} #INQUIRY_STEP3 .detail_info .copy{width: 55%} #INQUIRY_STEP3 .detail_info .thumb img{max-width: 240px} #INQUIRY_STEP3 .detail_info.none .copy{font-size: 26px} #INQUIRY_STEP3 .agree_area .agree_desc { font-size:14px;} #INQUIRY_STEP3 .agree_area .agree_desc .btn_agree:before { width:18px; height:18px;} #INQUIRY_STEP3 .agree_area .agree_desc .btn_agree:after { width:10px; height:10px;} #INQUIRY_STEP3 .agree_area .agree_desc.agree_all { font-size:16px;} #INQUIRY_STEP3 .agree_area .agree_desc.agree_all > div { font-size:16px;} #INQUIRY_STEP3 .agree_area .agree_box_inner {padding:25px 20px 25px 30px;height:250px;} #INQUIRY_STEP3 .agree_area .agree_box_inner .textarea {height:188px;} #FOOTER-MENU_INQUIRY .user_list_area ul li{margin-top: 30px} #FOOTER-MENU_INQUIRY .user_list_area ul li>div{height: 50px;line-height: 50px;} #FOOTER-MENU_INQUIRY .user_list_area ul li .input_box input{height: 50px;line-height: 50px;font-size: 15px;} #FOOTER-MENU_INQUIRY .user_list_area ul li>div.input_tit{font-size: 15px;width: 128px} #FOOTER-MENU_INQUIRY .user_list_area ul li>div.input_box{width: calc(100% - 128px)} #FOOTER-MENU_INQUIRY .user_list_area ul li.name_area .input_box input.input_first_name{width: 44%;margin-right: 2%} #FOOTER-MENU_INQUIRY .user_list_area ul li.name_area .input_box input.input_surname{width: 52%;margin-left: 2%} #FOOTER-MENU_INQUIRY .user_list_area ul li.mail_area .input_box span.cform{font-size: 14px} #FOOTER-MENU_INQUIRY .user_list_area ul li.contents_area .input_box textarea{padding: 25px 20px;font-size: 13px} #FOOTER-MENU_INQUIRY .user_list_area ul li.file_area .upload_area #file{width: 112px;} #INQUIRY_STEP3 .user_list_area ul li.file_area .upload_area #file:hover+label{background-color: #fff;color: #222;border-color:#999} #FOOTER-MENU_INQUIRY .user_list_area ul li.file_area .upload_area label{width: 112px;font-size: 12px;} #FOOTER-MENU_INQUIRY .user_list_area ul li.file_area .upload_area .input_file_name{width: calc(100% - 200px); white-space: nowrap; -ms-text-overflow: ellipsis; -o-text-overflow: ellipsis; text-overflow: ellipsis; overflow: hidden;} #INQUIRY_STEP3 .user_list_area ul li.file_area .upload_area .btn_delete{height: 40px} #FOOTER-MENU_INQUIRY .user_list_area ul li.file_area p.caption{font-size: 12px;margin-top: 10px} #FOOTER-MENU_INQUIRY .btn_submit .gu_btn_arrow_right{opacity: 1} #INQUIRY_STEP3 .gu_sort_area .gu_sort_name a{padding-top: 0;height: 100%} #FOOTER-MENU_INQUIRY .gu_btn{min-width: 120px;padding: 13px 21px; font-size:13px;} } /* ================================== Mobile css ================================== */ @media all and (max-width: 766px){ #FOOTER-MENU_INQUIRY .contents_inner{padding-top: 60px} #INQUIRY_STEP1 .category.isW{display: none} #INQUIRY_STEP1 .category.isM{display: block} #FOOTER-MENU_INQUIRY .step_indicator span{font-size: 24px;line-height: 24px;width: 100%} #FOOTER-MENU_INQUIRY .step_indicator .next{font-size: 16px;width: 100%;margin-top: 15px;text-align: right} #FOOTER-MENU_INQUIRY .step_indicator .next:after{width: 8px;height: 8px} #FOOTER-MENU_INQUIRY .steps{margin-top: 40px} #FOOTER-MENU_INQUIRY .btn_next{margin: 40px auto 0} #INQUIRY_STEP1 .product_list{padding-bottom: 15px;} #INQUIRY_STEP1 .product_list a.list_box{width: 50%;height: 100%} #INQUIRY_STEP1 .product_list a.list_box .box_inner .list_inner{padding: 20px 0} #INQUIRY_STEP1 .product_list a.list_box:nth-of-type(3n):before{width: calc(100% + 1px)} #INQUIRY_STEP1 .product_list a.list_box:nth-of-type(3n):after{width: calc(100% - 3px)} #INQUIRY_STEP1 .product_list a.list_box:nth-of-type(2n):before{width: 100%} #INQUIRY_STEP1 .product_list a.list_box:nth-of-type(2n):after{width: calc(100% - 4px)} #INQUIRY_STEP1 .product_list a.list_box .thumb>img{width: 100%;padding: 0 25px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #INQUIRY_STEP1 .product_list a.list_box .copy{padding: 0 10px; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #INQUIRY_STEP1 .product_list a.list_box .copy span{font-size: 14px;line-height: 18px} #INQUIRY_STEP1 .category .category_inner{padding: 22px 15px 20px} #INQUIRY_STEP1 .category .category_copy{font-size: 11px;margin-bottom: 7px} #INQUIRY_STEP1 .category .category_list a{margin-top: 8px;margin-right: 8px} #INQUIRY_STEP1 .category.on{height: 100%} #INQUIRY_STEP2 .product_list{padding-bottom: 0} #INQUIRY_STEP2 .product_list a{width: 50%} #INQUIRY_STEP2 .product_list a:nth-of-type(3n):before{width: calc(100% + 1px)} #INQUIRY_STEP2 .product_list a:nth-of-type(3n):after{width: calc(100% - 3px)} #INQUIRY_STEP2 .product_list a:nth-of-type(4n):before{width: calc(100% + 1px)} #INQUIRY_STEP2 .product_list a:nth-of-type(4n):after{width: calc(100% - 3px)} #INQUIRY_STEP2 .product_list a:nth-of-type(2n):before{width: 100%} #INQUIRY_STEP2 .product_list a:nth-of-type(2n):after{width: calc(100% - 4px)} #INQUIRY_STEP2 .product_list a .thumb{padding: 20px 10px 0} #INQUIRY_STEP2 .product_list a .copy{height: 48px} #INQUIRY_STEP3 .user_list_area ul li.name_area .input_box input{width: 100%} #INQUIRY_STEP3 .input_area{padding: 44px 20px 50px} #INQUIRY_STEP3 .detail_info{padding-bottom: 40px} #INQUIRY_STEP3 .detail_info .thumb{float: none;width: 100%;text-align: center} #INQUIRY_STEP3 .detail_info .thumb img{max-width: 210px} #INQUIRY_STEP3 .detail_info .copy{float: none;width: 100%;margin-top: 15px} #INQUIRY_STEP3 .detail_info.none .thumb{width: 100%} #INQUIRY_STEP3 .detail_info.none .copy{font-size: 21px;line-height: 28px;width: 100%} #INQUIRY_STEP3 .detail_info .copy dl dd{font-size: 14px;line-height: 22px;margin-bottom: 4px} #INQUIRY_STEP3 .detail_info .copy dl dd span{width: 60%} #INQUIRY_STEP3 .agree_area .agree_desc {font-size: 13px; line-height: 23px; padding-top: 12px;} #INQUIRY_STEP3 .agree_area .agree_desc > div{display:block; margin-bottom:10px;} #INQUIRY_STEP3 .agree_area .agree_desc .btn_agree { /*font-size:16px;*/ font-size:14px;} #INQUIRY_STEP3 .agree_area .agree_desc.agree_all .btn_agree {font-size:16px;} #INQUIRY_STEP3 .agree_area .agree_desc.agree_all > div { font-size:14px;line-height:24px;} #INQUIRY_STEP3 .agree_area .agree_box_inner {padding:25px 20px 10px 20px;} #FOOTER-MENU_INQUIRY .user_list_area ul li{margin-top: 32px} #FOOTER-MENU_INQUIRY .user_list_area ul li>div{display: block;width: 100%;height: 42px;line-height: 42px;} #FOOTER-MENU_INQUIRY .user_list_area ul li>div.input_tit{height: unset;line-height: 1;width: 100%;margin-bottom: 3px;font-size: 14px} #FOOTER-MENU_INQUIRY .user_list_area ul li>div.input_box{width: 100%;margin:0;padding: 0;font-size: 14px} #FOOTER-MENU_INQUIRY .user_list_area ul li .input_box input{height: 42px;line-height: 42px;font-size: 14px} #FOOTER-MENU_INQUIRY .user_list_area ul li.name_area .input_box input.input_first_name{width: 48%;margin-right: 2%} #FOOTER-MENU_INQUIRY .user_list_area ul li.name_area .input_box input.input_surname{width: 48%;margin-left: 2%} #FOOTER-MENU_INQUIRY .user_list_area ul li.contents_area .input_box{margin-top: 20px} #FOOTER-MENU_INQUIRY .user_list_area ul li.file_area .input_box{margin-top: 20px} #FOOTER-MENU_INQUIRY .user_list_area ul li.file_area .upload_area #file{width: 90px} #FOOTER-MENU_INQUIRY .user_list_area ul li.file_area .upload_area label{width: 90px} #FOOTER-MENU_INQUIRY .user_list_area ul li.file_area .upload_area .input_file_name{width: calc(100% - 140px);margin-left: 10px;} #FOOTER-MENU_INQUIRY .user_list_area ul li.file_area .upload_area .btn_delete{height: 40px} #FOOTER-MENU_INQUIRY .user_list_area ul li.file_area .upload_area .btn_delete span{font-size: 13px} #FOOTER-MENU_INQUIRY .user_list_area ul li.file_area p.caption{margin-top: 20px;line-height: 18px} .gu_sort_area .gu_sort_name{width: 100%} .gu_sort_area .gu_selectbox .gu_selectbox_inner a{font-size: 12px} #FOOTER-MENU_INQUIRY .gu_sort_area .gu_selectbox{min-width: 100%} #FOOTER-MENU_INQUIRY .gu_popup .pop_contents{width: 90%;padding: 40px 15px;min-height: 100%} #FOOTER-MENU_INQUIRY .gu_popup .pop_contents .pop_cnt_tit{font-size: 18px;line-height: 21px} #FOOTER-MENU_INQUIRY .gu_popup .pop_contents .pop_cnt_desc{font-size: 13px;line-height: 19px} #FOOTER-MENU_INQUIRY .gu_popup .pop_contents .popup_bottom{margin-top: 27px;} } @media all and (max-width: 380px){ #INQUIRY_STEP1 .category.category2.on{height: 145px} } @media all and (max-width: 355px){ #FOOTER-MENU_INQUIRY .step_indicator span{font-size: 21px;} #FOOTER-MENU_INQUIRY .step_indicator .next{font-size: 15px} }