@charset "utf-8";

/* 설문조사 폼 */
/* .survey {background-color: #0044A0; height: 100%;} */
.survey {background-color: #F6F8FA; min-height: 100%; word-break: keep-all; padding-bottom: 80px;}
.survey #header .inner {position: relative; max-width: 1400px; width: 100%; height: 100%; margin: 0 auto;}
.survey .logo {left: 50%; transform: translateX(-50%);}
.survey .logo > img {height: 35px;}
.survey .con_inner {width: 1200px;}

/* .survey_form {background-color: #fff; padding: 60px 80px; border-top: 3px solid #0044A0; box-shadow: 0 10px 20px 0 rgba(0, 0, 0, 0.05);} */
.survey_form .top {text-align: center; border-bottom: 1px solid #eee; padding-bottom: 60px;}
.survey_form .top h1 {display: block; font-size: 30px; font-weight: 800; margin-bottom: 20px;}
.survey_form .top .date {background-color: #F6F8FA; padding: 20px 20px; font-size: 18px; color: #666;}
.survey_form .top .txt {font-size: 16px; color: #999; margin-top: 30px; word-break: keep-all;}

.survey_form .top ~ .bottom {margin-top: 60px;}
/* .survey_form .bottom {margin-top: 60px;} */
.survey_form .bottom .item + .item {margin-top: 60px;}
.survey_form .bottom .item .tit {position: relative; margin-bottom: 20px;}
.survey_form .bottom .item .tit b {position: absolute; top: 5px; left: 0; display: inline-block; width: 45px; height: 26px; line-height: 26px; text-align: center; border-radius: 15px; background-color: var(--mitc-gray); color: #fff; vertical-align: middle;}
.survey_form .bottom .item .tit b:after {content: ''; position: absolute; bottom: -15px; right: 14px; width: 0; height: 0; border-top: 10px solid var(--mitc-gray); border-left: 8px solid transparent; border-bottom: 7px solid transparent;}
.survey_form .bottom .item .tit > div {display: inline-block;  vertical-align: middle; margin-left: 60px;}
.survey_form .bottom .item .tit h3 {position: relative; display: inline; font-size: 20px; font-weight: 800; word-break: keep-all;}
.survey_form .bottom .item .tit .marking {position: relative; display: inline-block; color: #DC4252; vertical-align: top; margin-left: 5px;}
.survey_form .bottom .item .tit p {color: #999;}
.survey_form .bottom .item .img {position: relative; display: block !important; text-align: center; margin-left: 0 !important;}
.survey_form .bottom .item textarea {padding: 10px 10px; height: 160px; width:100%;}

.survey_form .option_list li + li {margin-top: 5px;}

.survey_form .component_list {font-size: 0;}
.survey_form .component_list li {display: inline-block; width: 20%;}

.survey_form .survey_table {width: 100%;}
.survey_form .survey_table th {padding: 15px 20px; background-color: #F6F8FA; font-size: 17px; color: #666; font-weight: 600; text-align: center; vertical-align: middle;}
.survey_form .survey_table td {padding: 20px 20px; text-align: center; vertical-align: middle;}

.survey_list > li {display: block;}
.survey_list > li .item_header {background-color: #F6F8FA; padding: 20px 20px;}
.survey_list > li .item_header h4 {font-size: 17px; font-weight: 600;}
.survey_list .option_list {font-size: 0; padding: 15px 0;}
.survey_list .option_list li {display: inline-block; width: calc(100% / 5); font-size: 1rem; text-align: center; vertical-align: middle; margin-top: 0 !important; border-right: 1px solid #eee;}
.survey_list .option_list li:last-child {border-right: 0;}


.survey_form .end {border-top: 1px solid #eee; margin-top: 60px; padding-top: 20px; text-align: center;}
.survey_form .end p {font-size: 16px; color: #999;}

.survey_form .button_area {padding-top: 60px;}
.survey_form .button {width: 160px; height: 50px;}
.survey_form .button span {line-height: 48px; font-size: 18px;}

/* survey_tb */
.survey_tb {width: 100%; vertical-align: top; border-top: 2px solid var(--mitc-gray);}
.survey_tb th {padding: 10px 12px; font-size: 1rem; font-weight: 600; border-bottom: 1px solid #eee; background-color: #F6F8FA; text-align: center; vertical-align: middle; border-bottom: 1px solid #eee; border-right: 1px solid #eee;}
.survey_tb thead th {white-space: nowrap;}
.survey_tb td {padding: 10px 12px; font-size: 1rem; font-weight: 400; color: #666; border-bottom: 1px solid #eee; text-align: center; vertical-align: middle; word-break: break-all; border-bottom: 1px solid #eee; border-right: 1px solid #eee;}

.survey_tb td[rowspan],
.survey_tb th[rowspan] {border-left: 1px solid #eee;}
.survey_tb th:first-child,
.survey_tb td:first-child {border-left: 0;}
.survey_tb th:last-child,
.survey_tb td:last-child {border-right: 0;}

.survey_tb .designRadio{justify-content:center;}


@media (max-width: 1024px) {
    .survey #header {height: 140px;}
    .survey .logo > img {height: 40px;}

    .survey .con_inner {width: 100%;}

    .survey_form .top h1 {font-size: 28px;}

    /* survey_tb */
    .scrollTable .bbsList {white-space: nowrap;}
}

@media (max-width: 768px) {
    .survey_form .top h1 {font-size: 22px;}
    .survey_form .top .date {font-size: 16px;}
    .survey_form .bottom .item .tit h3 {font-size: 17px;}
    .survey_form .bottom .item .img {margin-top: 30px;}

    .survey_form .button_area {padding-top: 40px;}

    .survey_list > li .item_header h4 {font-size: 16px;}
    .survey_list .option_list li {width: calc(100% / 2); text-align: left; border-right: 0; margin: 10px 0;}

    /* survey_tb */
    .survey_tb colgroup {display: none;}
    .survey_tb .bbsList {min-width: 640px;}
}

@media (max-width: 576px) {
    /* 설문조사 로그인 */
    .survey_tab .tab_item {font-size: 1rem;}

    .survey_login .login_cont {max-width: none;}

    .survey_login .agr_box li a {margin-top: 10px;}

    /* 설문조사 폼 */
    .survey .logo > img {height: 30px;}

    .survey_form .top {padding-bottom: 40px;}
    .survey_form .top h1 {font-size: 18px;}
    .survey_form .top .txt {font-size: 1rem; margin-top: 10px;}

    .survey_form .scrollTable {overflow-x: auto;}
    .survey_form .scrollTable table td {white-space: nowrap;}
}

@media (max-width: 420px) {
    .survey_list .option_list li {width: 100%;}
}