@charset "utf-8"; /* common */ .cr:after { display: block; content: ''; clear: both; } .tac { text-align: center; } .tal { text-align: left; } .tar { text-align: right; } h4 { font-size: 40px; color: #333; text-align: center; margin-bottom: 70px; } .t2 .file-info-list { margin-top: 15px; text-align: left; } .t2 .file-info-list ul {} .t2 .file-info-list li:before { display: inline-block; content: '-'; margin-right: 10px; } .t2 .file-info-list li { display: block; font-size: 14px; line-height: 20px; font-weight: normal; } .title-h5 { margin-bottom: 30px; } .title-h5 h5 { font-size: 23px; color: #333; float: left; } .title-h5 h5 + span { float: right; margin-top: 5px; } .info-text1 { font-size: 17px; color: #333; font-weight: bold; text-align: center; line-height: 30px; } .info-text2 { font-size: 27px; color: #333; font-weight: bold; text-align: center; letter-spacing: 18px; } .info-text2.mt { margin-top: 45px; } .info-text3 { text-align: center; } .info-text3.mt { margin-top: 50px; } .info-text3.mb { margin-bottom: 120px; } .info-text4 { text-align: right; } .info-text4.mt { margin-top: 30px; } .info-text4 span { margin-right: 20px; } .info-text4 span:last-child { margin-right: 0; } .info-text5 { text-align: right; } .info-text5.mt { margin-top: 35px; } .info-text5 span { margin-right: 100px; } .info-text5 span:last-child { margin-right: 0; } .info-text6 { margin-left: 10px; font-size: 14px; display: block; font-weight: normal; line-height: 22px; margin-top: 10px; } .application { font-size: 20px; color: #fff; background-color: #31409b; min-width: 240px; line-height: 45px; border-radius: 23px; } .application.white { color: #31409b; background-color: #fff; border: 1px solid #31409b; } .application.line { color: #474747; background-color: #fff; border: 1px solid #474747; } .application.yellow { background-color: #f8b919; } .application.small { min-width: 120px; font-size: 15px; } .application.small.mr { margin-right: 10px; } .em, .em:before { /* "*"와 분리하는 방법을 찾지못해서 일단 빨간색 빼둠. color: #ec0928; */ } .box-bg1 { background-color: #f8f8f8; padding: 35px 66px; margin-top: 60px; } .box-bg2 { margin-top: 30px; color: #333; } .box-bg2.mb { margin-bottom: 20px; } .box-bg2 .icon-star {} .box-bg2 .line-h { border-right: 1px solid #333; padding-right: 15px; margin-right: 10px; } .box-bg2 .icon-star:after { display: inline-block; height: 20px; content: ''; background-image: url(/images/icon/icon-star.png); margin-bottom: -3px; margin-left: 5px; } .box-bg2 .icon-star.num1:after { width: 20px; } .box-bg2 .icon-star.num2:after { width: 40px; } .box-bg2 .icon-star.num3:after { width: 60px; } .box-bg2 .icon-star.num4:after { width: 80px; } .box-bg2 .icon-star.num5:after { width: 100px; } .box-bg2 .left { border: 2px solid #f8b919; padding: 20px; float: left; width: 60%; } .box-bg2 .left .group:nth-child(1), .box-bg2 .right .group:nth-child(1) { float: left; } .box-bg2 .left .group:nth-child(2) { margin-top: 2px; } .box-bg2 .left .group:nth-child(2), .box-bg2 .right .group:nth-child(2) { float: right; font-size: 14px; } .box-bg2 .right { border: 2px solid #f8b919; padding: 20px; float: left; width: 40%; margin-left: -2px; } .box-bg2 .right .radio-wrap { width: 70%; display: flex; } .box-bg2 .right .radio-wrap .custom_radio { width: 48%; padding: 0; } /* radio */ .t2 div.group .custom_check.inline, .t2 div.group .custom_radio.inline { float: left; } .custom_radio { position: relative; padding: 15px; } .custom_radio input[type="radio"] { position: absolute; top: 0; left: 0; width: 20px; height: 20px; -webkit-appearance: none; -webkit-border-radius: 0; border: 1px solid #fff; padding-top: 4px; } .custom_radio label { position: absolute; top: 0; left: 0; z-index: 10; color: #484a4c; font-size: 0.875rem; line-height: 25px; cursor: pointer; padding-left: 33px; } .custom_radio label:before { content: ""; position: absolute; top: 4px; left: 5px; display: block; width: 18px; height: 18px; line-height: 18px; background: #fff; border: 1px solid #ddd; border-radius: 20px; } .custom_radio input[type="radio"]:checked + label:before { content: ""; text-align: center; font-weight: 800; line-height: 18px; color: #222; background: #f8b919 url(/images/common/icon_check.png) no-repeat; background-position: center; background-size: 12px; } /* //radio */ /* upload file */ .t2 input[type="text"].upload_text { /*읽기전용 인풋텍스트*/ float: left; width: 190px; /* 버튼 포함 전체 가로 길이*/ height: 50px; line-height: 19px; padding: 0 3px; border: 1px solid #bbb; background-color: #eff0f2; color: #999; text-indent: 10px; } .t2 input[type="text"].upload_text2 { /*읽기전용 인풋텍스트*/ float: left; width: calc(100% - 160px); /* 버튼 포함 전체 가로 길이*/ height: 50px; line-height: 19px; padding: 0 3px; border: 1px solid #bbb; background-color: #eff0f2; color: #999; text-indent: 10px; } .t2 input[type="text"].upload_text3 { /*읽기전용 인풋텍스트*/ float: left; width: calc(70% - 110px); /* 버튼 포함 전체 가로 길이*/ height: 50px; line-height: 19px; padding: 0 3px; border: 1px solid #bbb; background-color: #eff0f2; color: #999; text-indent: 10px; } /* 기업로고 */ .t2 .logo-data { width: 30%; float: left; height: 50px; margin-right: 10px; text-align: center; padding: 5px; background-color: #f7f7f7; } .t2 .logo-data img { /* width: 100%; */ width: auto; height: 100%; } /* //기업로고 */ .t2 .upload_text4 { float: left; margin-right: 10px; width: 30%; } .upload-btn_wrap input.input_file { /*파일찾기 폼 투명하게*/ position: absolute; top: 0; right: 0; cursor: pointer; opacity: 0; filter: alpha(opacity=0); -ms-filter: "alpha(opacity=0)"; -moz-opacity: 0; } .upload-btn_wrap { /*버튼테두리 감싼 div*/ overflow: hidden; position: relative; float: left; width: 100px; /*width, height 값은 button(찾아보기)값과 같아야함 */ height: 50px; } .upload-btn_wrap button { /*버튼 div*/ display: block; width: 100px; height: 50px; font-weight: bold; background: #31409b; border: 1px solid #31409b; color: #fff; } /* //upload file */ /* form table */ .t2 { width: 100%; border-top: 2px solid #3c3f45; } .t2.mb { margin-bottom: 80px; } .t2 th { text-align: center; font-weight: bold; color: #333; background: #eff0f2; padding: 15px 10px; border-bottom: 1px solid #aeb4bd; border-right: 0px solid #aeb4bd; } .t2 td { color: #333; font-weight: bold; background-color: #fff; border-bottom: 1px solid #e6e6e6; word-break: break-all; padding: 10px 0; line-height: 30px; vertical-align: middle; } .t2 td ul { display: inline-block; } .t2 td ul li { display: inline-block; } .t2 td ul li button { font-size: 12px; } .t2 td ul li button:after {} .t2 input[type="file"] { border: 1px solid #ddd; box-sizing: border-box; height: 50px; } .t2 .homepage label { float: left; text-align: left; width: 60px; letter-spacing: 0; line-height: 40px; } .t2 .homepage input { float: right; width: calc(100% - 60px); } .t2 .btn-modify { display: inline-block; text-align: center; width: 110px; height: 30px; background-color: #F0F2F5; border: 1px solid #CFD5DE; box-sizing: border-box; margin-left: 10px; font-size: 14px; } .t2 input[type="text"], .t2 input[type="password"], .t2 input[type="tell"] { background-color: #fff; border-radius: 0; border: 1px solid #dddddd; box-sizing: border-box; height: 50px; display: inline-block; text-indent: 20px; } .t2 .mail-select { display: inline-block; } .t2 .mail-selectbox { width: 100%; background-color: #fff; border-radius: 0; border: 1px solid #dddddd; box-sizing: border-box; height: 50px; display: inline-block; text-indent: 10px; } .t2 input[type="text"].tac { text-align: center; text-indent: 0; } .t2 input.rfq-Subject { width: calc(100% - 60px); margin-right: 19px; } .t2 .group { text-align: left; } .t2 .group.tac { text-align: center; } .t2 .group-file { width: 350px; text-align: right; } .t2 .group-file.inline { display: inline-block; vertical-align: middle; } .t2.th150 .group-file.inline { width: calc(100% - 165px); } .t2 .group-file:after { display: block; content: ''; clear: both; } .t2 input.vessel-name, .t2 input.delivery-to, .t2 input.delivery-by, .t2 input.reply-by { width: 100%; } .t2 div.group .name { font-weight: bold; } .t2 input.imo-number { width: calc(100% - 85px); } .t2 input.imo-number + .btn { display: inline-block; text-align: center; width: 80px; height: 30px; padding: 1px; background-color: #F0F2F5; border: 1px solid #CFD5DE; box-sizing: border-box; font-size: 14px; padding-top: 2px; cursor: pointer; } .t2 input.address { width: calc(100% - 150px); } .t2 input.address.w40 { width: 40%; vertical-align: middle; } .t2 input.address + .btn { display: inline-block; vertical-align: middle; text-align: center; width: 140px; height: 50px; line-height: 40px; padding: 1px; background-color: #fff; border: 1px solid #3c3f45; box-sizing: border-box; font-size: 14px; padding-top: 2px; cursor: pointer; margin-left: 5px; } .t2 .btn-file-down:before { display: inline-block; content: ''; width: 13px; height: 14px; background-image: url(/images/icon/btn-file-down.png); position: absolute; left: -8px; top: 3px; } .t2 .btn-file-down { position: relative; padding-left: 10px; margin-left: 20px; font-size: 14px; letter-spacing: -1px; color: #ec0928; text-decoration: underline; } .t2 .btn-close { text-align: center; width: 50px; height: 50px; padding: 1px; border: 1px solid #ddd; box-sizing: border-box; cursor: pointer; background-image: url(/images/icon/icon-del.png); background-repeat: no-repeat; background-position: center; } .t2 .btn-close.ml { display: block; float: left; margin-left: 10px; } .btn-more { display: inline-block; width: 50px; height: 50px; cursor: pointer; text-align: center; background-color: #31409b; background-image: url(/images/icon/icon-more.png); background-repeat: no-repeat; background-position: center; } .btn-more-file { display: inline-block; width: 50px; height: 50px; cursor: pointer; text-align: center; background-color: #fff; background-image: url(/images/icon/icon-more-file.png); background-repeat: no-repeat; background-position: center; border: 1px solid #ddd; box-sizing: border-box; } .btn-more-file.ml { margin-left: 10px; } .btn-more.mt { margin-top: 10px; } .t2 input[type="date"] { background-color: #fff; border-radius: 0; border: 1px solid #dddddd; box-sizing: border-box; height: 50px; display: inline-block; text-indent: 5px; font-family: 'NotoSansKR', sans-serif; } .t2 textarea { background-color: #fff; border-radius: 0; border: 1px solid #dddddd; box-sizing: border-box; display: inline-block; padding: 10px; font-family: 'NotoSansKR', sans-serif; width: 100%; /* width: calc(100% - 115px);*/ min-height: 150px; margin: 15px 0; } .t2 textarea.noresize { resize: none; } .t2 .items button { background-color: #fff; border-radius: 0; background-color: #F0F2F5; border: 1px solid #CFD5DE; box-sizing: border-box; display: inline-block; padding: 5px 10px; font-size: 14px; text-align: left; } .t2 .etc-mt { margin-top: 10px; } .t2 mt20 { margin-top: 20px; } .t2 ml20 { margin-left: 20px; } .t2 mr20 { margin-right: 20px; } .t2 mb20 { margin-bottom: 20px; } .t2 mt10 { margin-top: 10px; } .t2 ml10 { margin-left: 10px; } .t2 mr10 { margin-right: 10px; } .t2 mb10 { margin-bottom: 10px; } .t2 .w100 { width: 100%; } .t2 .w95 { width: 95%; } .t2 .w90 { width: 90%; } .t2 .w80 { width: 80%; } .t2 .w70 { width: 70%; } .t2 .w60 { width: 60%; } .t2 .w50 { width: 50%; } .t2 .w40 { width: 40%; } .t2 .w30 { width: 30%; } .t2 .w25 { width: 25%; } .t2 .w20 { width: 20%; } .t2 .w15 { width: 15%; } .t2 .w10 { width: 10%; } /* 반응형 form */ .rwd-table td:before { content: attr(data-th); display: inline-block; font-weight: bold; margin-left: 10px; vertical-align: middle; } .rwd-table div.group { display: inline-block; vertical-align: middle; } .rwd-table.th150 td:before { width: 150px; } .rwd-table.th150 div.group { width: calc(100% - 165px); } .rwd-table.th300 td:before { width: 545px; } .rwd-table.th300 div.group { width: calc(100% - 560px); } input.phonenum { width: 53px; } .wave:after { content: '~'; display: inline-block; } .hyphen:after { content: '-'; display: inline-block; margin-bottom: 5px; } /* //반응형 form */ /* //form table */ /* 2021.01.27(추가) */ .align_right { text-align: right; } .btn_line_black { border: 1px solid #000; padding: 10px 15px; margin: 20px 0; } /* 2021.02.23(추가) */ .align_cl { text-align: center; } /* Media Query */ @media all and (max-width:1200px) { .box-bg2 .left { width: 100%; } .box-bg2 .right { width: 100%; margin-left: 0; margin-top: 5px; padding: 10px; } .box-bg2 .right .radio-wrap { justify-content: flex-end; } .box-bg2 .right .radio-wrap .custom_radio { width: 20%; } } @media all and (max-width:900px) { .box-bg1 { margin-top: 40px; padding: 40px; } .box-bg2 { margin-top: 10px; } .box-bg2 .right .radio-wrap .custom_radio { width: 30%; } h4 { font-size: 30px; margin-top: 50px; } .title-h5 h5 { font-size: 20px; } .title-h5 { margin-bottom: 10px; } .t2.mb { margin-bottom: 40px; } .rwd-table td { display: block; width: 100%; } .t2 input[type="date"], .t2 input[type="text"], .t2 input[type="password"], .t2 input[type="tell"] { width: 100%; height: 30px; text-indent: 5px; } .t2 input[type="text"].upload_text3 { height: 30px; width: calc(100% - 100px); } /* 기업로고 */ .t2 .logo-data { width: 100%; height: 100%; padding: 20px; margin-bottom: 10px; } .t2 .logo-data img { width: auto; height: auto; } /* //기업로고 */ .t2 .upload_text4 { margin-right: 0; margin-bottom: 10px; } .t2 .mail-select { margin-top: 10px; } .t2 .mail-selectbox { height: 30px; } .t2 input[type="file"] { height: 30px; } .t2 .file-info-list ul { margin-top: 10px; } .t2 input[type="text"].upload_text { height: 30px; } .t2 input[type="text"].upload_text2 { height: 30px; } .t2 input[type="text"].tac { text-align: left; text-indent: 10px; } .upload-btn_wrap { /*width, height 값은 button(찾아보기)값과 같아야함 */ height: 30px; } .upload-btn_wrap button { /*버튼 div*/ height: 30px; } .t2 .btn-close { width: 30px; height: 30px; background-image: url(/images/icon/icon-del-m.png); } .btn-more-file { display: block; float: left; width: 30px; height: 30px; background-size: 14px; } .btn-more { width: 40px; height: 40px; } .t2 input.address + .btn { margin-left: 0; margin-top: 10px; height: 30px; line-height: 25px; } .t2 input.address.w40 + .btn { margin-top: 0; line-height: 25px; } .t2 .homepage label { line-height: 25px; } .t2 .homepage input { width: calc(100% - 60px); } .t2 div.group .custom_check.inline, .t2 div.group .custom_radio.inline { float: none; } .t2 .group.tac { text-align: left; } .t2 .w15, .t2 .w20, .t2 .w25, .t2 .w30 { width: 100%; } .t2.block td { display: block; width: 100%; } .t2.block tr td:nth-child(1) { border-bottom: 0; padding-bottom: 0; } .t2.block tr td:nth-child(2) { padding-top: 0; padding-bottom: 15px; } .t2.block2 th { display: none; } .t2.block2 td { display: block; width: 100%; } .t2.block2 td:before { content: attr(data-th); display: inline-block; font-weight: bold; vertical-align: middle; width: 100px; } .t2.block2 td:last-child { border-bottom: 1px solid #999; } .t2.block2 .group { width: calc(100% - 105px); display: inline-block; } .t2 .group-file { width: 100%; text-align: left; margin-top: 5px; } .t2 .group-file.inline { margin-top: 0; } .info-text1 { font-size: 15px; } .info-text2 { font-size: 20px; } .info-text2.mt { margin-top: 40px; } .info-text3 { font-size: 18px; } .info-text3.mt { margin-top: 30px; } .info-text3.mb { margin-bottom: 60px; } .info-text4.mt { margin-top: 30px; } .info-text5.mt { margin-top: 20px; } .info-text5 span { margin-right: 40px; } /* 2021.02.23(추가) */ .align_cl { text-align: left; } } @media all and (max-width:600px) { .info-text6 { font-size: 12px; line-height: 20px; } .info-text6 li { font-size: 12px; } .t2 .file-info-list li { font-size: 12px; font-weight: normal; } h4 { font-size: 22px; margin-top: 0px; margin-bottom: 20px; text-align: left; color: #31409b; } .application.small.mr { margin-right: 0; } .title-h5 h5 { font-size: 18px; } .title-h5 h5 + span { font-size: 14px; margin-top: 2px; } .btn-more { width: 30px; height: 30px; } .box-bg1 { padding: 30px; } .box-bg2.mb { margin-bottom: 15px; } .box-bg2 .left .group:nth-child(1), .box-bg2 .right .group:nth-child(1) { width: 100%; } .box-bg2 .left .group:nth-child(2), .box-bg2 .right .group:nth-child(2) { width: 100%; } .box-bg2 .left .group:nth-child(2) span { display: block; width: 100%; border-right: 0; } .box-bg2 .right .radio-wrap { justify-content: flex-start; margin-bottom: 26px; } .box-bg2 .right .radio-wrap .custom_radio { width: 40%; } .t2 select, .t2 input[type="file"], .t2 input[type="date"], .t2 input[type="text"] { font-size: 12px; } .t2 input.address.w40 { width: 100%; } .t2 input[type="text"].upload_text { width: 132px; text-indent: 5px; } .t2 td { display: table; padding: 0; } .t2 .group-file.inline { padding: 10px 0; } .t2.th150 .group-file.inline { width: calc(100% - 100px); } .t2.block td { padding: 10px 0; } .t2.block2 td { padding: 10px 0; } .t2 input.address + .btn { width: 100%; } .t2 input.address.w40 + .btn { margin-top: 8px; } .t2 .etc-mt { margin-top: 0; } .rwd-table.th150 td:before { width: 105px; margin-left: 0; } .company_search .rwd-table.th150 td:before { width: 100%; margin-top: 10px; margin-bottom: -10px; } .rwd-table .upload-before:before { width: 100%; } .rwd-table .upload-before .group-file.inline { width: 100%; padding-top: 0; } .rwd-table.th150 div.group { width: calc(100% - 105px); } .company_search .rwd-table.th150 div.group { width: 100%; } .rwd-table input.rfq-Subject { display: block; width: 100%; margin-bottom: 5px; } .rwd-table input.rfq-Subject-text { display: block; width: 100%; } .rwd-table input.imo-number { display: block; width: 100%; margin-bottom: 5px; } .rwd-table div.group { margin: 15px 0; } .rwd-table div.group.btns { margin-bottom: 10px; } .rwd-table div.group .name, .rwd-table div.group .email { display: block; margin-bottom: 5px; } .rwd-table .items button { display: block; margin-bottom: 5px; } .rwd-table div.group .btn-modify { margin-left: 0; } .info-text1 { font-size: 14px; line-height: 20px; } .info-text2 { letter-spacing: 0; font-size: 18px; } .info-text2.mt { margin-top: 20px; } .info-text3.mt { margin-top: 20px; } .info-text3.mb { margin-bottom: 40px; } .info-text5 span { margin-right: 20px; font-size: 13px; } } @media all and (max-width:320px) {} /* ie */ @media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) { input[type=text] {} } /* //Media Query */