.layout_wrap {position: relative; max-width: 1000px; margin:20px auto; background: #fff; -webkit-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.3);
    -moz-box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.3); box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.3);}
.layout_wrap strong {font-weight:bold;}
.layout_wrap i {font-style:italic;}
.layout_cont {min-height: 600px; padding-bottom: 30px;}
.layout_foot {position: relative; background: #325ADB; padding: 25px 20px;}
.layout_foot::after {content: ""; display: block; clear: both;}
.layout_foot > .btn-group {float: right;}
.layout_foot > a {position: absolute; top: 50%; left: 20px; display: block; transform: translateY(-50%);}
.logo {padding: 20px 0 10px 20px;}
.survey_Q {position: relative; display: flex; align-items: baseline; padding: 20px;}
.survey_Q>p { font-size: 2rem; color: #000; line-height: 1.6;}
.survey_Q>p.Q_no {padding-right: 5px; white-space: nowrap;}
.survey_Q>p>strong {font-weight: 700;}
.survey_Q strong {font-weight:bold;}
.step_gage {position: relative; top:0; left: 0; right: 0; bottom: 0; height: 5px; background: #ddd;}
.step_gage>span {display: block; height: 4px; background: linear-gradient(90deg, #d8e2ff 0%, #325ADB 100%);}
.survey_wrap {font-size: 1.6rem;}
.survey_A {padding: 20px;}
.survey_type {position: relative; padding-bottom: 20px; text-align: right;}
.survey_type>span {display: inline-block; font-size: 1.6rem; color: #325ADB;}
.Answer {padding: 20px; overflow-x: auto; font-size: 1.8rem; border-top: solid 1px #C6CBD7;}
.Answer>p {color: #000; font-size: 1.8rem;}
.Answer.bg-cl {background-color: #F5F7FF; }
.selType {table-layout: fixed; width: 100%;}
.selType td {vertical-align: top; color: #000;}
.selType p {padding: 12px 0;}
.text-etc {width: 250px; margin-left: 10px;}
.coment {color: #000;}
.map-box {display: flex; justify-content: center; align-items: center; border-top: solid 1px #C6CBD7; padding: 20px 0;}
.map-all {width: 350px; text-align: center;}
.map-arrow {padding: 20px;}
.map-detail {width: calc(100% - 450px); text-align: center;}
.selType strong {font-weight:bold;}

.result {display: flex; justify-content: space-between; padding-top: 10px; border-top: solid 1px #C6CBD7;}
.result p {line-height: 36px;}
.result input {color: #325ADB; text-align: center;}
.column_1 li {width: 100%;}
.column_2 li {width: 50%;}
.mailto {line-height: 20px; font-size: 1.8rem; color: #CDD7F6;}
.mailto::before {content: "?"; display: inline-block; vertical-align: middle; width: 20px; height: 20px; background: #5B7BE2; border: solid 1px #CDD7F6; border-radius: 50%; color: #fff; font-size: 1.4rem; line-height: 20px; text-align: center; margin-right: 5px;}
.btn-group {height: 2rem;}
.btn-group a {display: inline-block; font-size: 2rem; line-height: 20px;}
.btn-group a+a {margin-left: 50px;}
.btn-group a.btn-back {color: #C6CBD7;}
.btn-group a.btn-next {color: #fff; font-weight: 500;}
.btn-group a.btn-back::before {content: ""; display: inline-block; vertical-align: middle; width: 9px; height: 18px; background: url(../images/icon_next.png) no-repeat; background-size: 100%; margin-right: 10px; transform: rotate(180deg); opacity: .5;}
.btn-group a.btn-next::after {content: ""; display: inline-block; vertical-align: middle; width: 9px; height: 18px; background: url(../images/icon_next.png) no-repeat; background-size: 100%; margin-left: 10px;}
.text-caution {position: relative; display: inline-block; color: #000; font-size: 1.4rem; padding: 5px 10px 5px 20px; background: #fff; border-radius: 20px; margin-top: 8px;}
.text-caution::before {content: "*"; color: #FF6056; font-size: 2rem; position: absolute; left: 10px; top: 50%; transform: translateY(-50%);}
.text-caution strong {color: #FF6056;}
.slid-wrap {font-size: 1.6rem; color: #000;}
.slid-wrap>p {display: flex; justify-content: space-between;}
.value {display: block; margin: 20px 0; text-align: center;}
.value p {display: inline-block; font-size: 1.6rem; background: #fff; border:solid 1px #325ADB; border-radius: 20px; padding: 8px 20px 10px;}
.value p span {color: #325ADB; font-size: 1.8rem; font-weight: 700;}

.lank {display: flex; align-items: center; font-size: 1.8rem; color: #000; line-height: 1.2;}
.lank>input {width: 50px; text-align: center; cursor: pointer; font-size: 2rem; font-weight: 700; color: #325ADB; margin-right: 10px;}
.lank>input.text-etc {width: 250px; text-align: left; color: #000; font-size: 1.6rem; font-weight: 100;}

.rank>font {display: flex; align-items: center; font-size: 1.8rem; color: #000; line-height: 1.2;}
.rank>font>input {width: 50px; text-align: center; cursor: pointer; font-size: 2rem; font-weight: 700; color: #325ADB; margin-right: 10px;}
.rank>font>input.text-etc {width: 250px; text-align: left; color: #000; font-size: 1.6rem; font-weight: 100;}

.finish-wrap {padding: 0 30px;}
.thks_mssg {text-align: center;}
.thks_mssg>p {font-size: 2.4rem; line-height: 1.4; color: #000;}
.thks_mssg>p>img {width: 500px;}

.caution {background: #E2E9FD; font-size: 1.4rem; text-align: center; padding: 10px 0; margin: 20px 0 0 0;}
.caution p {color: #325ADB;}
.caution p:before {content: ""; display: inline-block;vertical-align: middle; width: 16px; height: 16px; background: url(../images/icon_caution.png) no-repeat; margin-right: 5px; background-size: 100%;}

.data-list {border: solid 1px #325ADB; overflow: hidden;}
.data-list dl {display: flex; border-bottom: dashed 1px #C6CBD7;}
.data-list dl:last-of-type {border: 0;}
.data-list dt {color: #325ADB; font-weight: 500; width: 150px; background: #F5F7FF; padding: 15px; text-align:center;}
.data-list dd {color: #000; font-weight: 500; font-size: 1.9rem; padding: 15px 20px; }
.data-list dd span {font-size: 1.6rem; padding-left: 5px;}
.data-list.wide dt {width: 220px;}
.clr_blue {font-size: 2rem; font-weight: 700; color: #FF6056;}
.btn_payback {text-align: right; margin-top: 10px;}
.btn_payback a {display: inline-block; background: #325ADB; color: #fff; font-size: 1.6rem; padding: 7px 10px 8px 10px; border-radius: 4px;}
.payback dt {background: #333; text-align: center; padding: 10px 0 12px 0;}
.payback dt>p {font-size: 1.8rem; color: #fff;}
.payback dt>p>strong {font-size: 2.2rem; font-weight: 500; color: #fbff00;}
.payback dd {background: #f5f5f5; padding: 10px 0 10px 30px; border: solid 1px #C6CBD7; border-top:0; font-size: 1.6rem; color: #000;}
.advertising {margin-top: 30px;}
.advertising img {width: 100%;}

.button_wrap {text-align: center; margin: 20px 0;}
.button_wrap a {display: inline-block; vertical-align: middle; width: 180px; background: #325ADB; color: #fff; font-size: 1.6rem; border-radius: 24px; padding: 14px 0 16px 0;}

.guide_wrap {position: relative; max-width: 800px; margin: auto; padding: 20px 0 30px 0; font-weight: 100;}
.guide_wrap h2 {font-size: 3rem; color: #000; text-align: center; padding: 10px 0;}
.guide_box1 {display: flex;border-radius: 30px 0 30px 0; background: #325ADB; overflow: hidden; text-align: center; margin-top: 30px;}
.guide_box1>div {flex: 1;}
.guide_box1 h3 {display: block; font-size: 2rem; color: #fff; line-height: 1.4;}
.guide_box1 h3 strong {font-weight: 500; font-size: 2.2rem;}
.guide_box1 p {font-size: 1.6rem; color: #BFD2FE; line-height: 1.2; margin-top: 10px;}
.box1::before, .box2::before, .box3::before {content: ""; display: inline-block; width: 60px; height: 60px;}
.box1::before {background: url(../images/icon_guide01.png) center center; background-size: 100%;}
.box2::before {background: url(../images/icon_guide02.png) center center; background-size: 100%;}
.box3::before {background: url(../images/icon_guide03.png) center center; background-size: 100%;}
.box1, .box2, .box3 {padding: 20px;}
.box2 {border-left: dashed 1px #C6CBD7; border-right: dashed 1px #C6CBD7; background: #4D76FC;}

.guide_box2 {background: #F5F7FF; border-radius: 0 30px 0 30px; padding: 20px; margin-top: 30px;}
.guide_box2>div+div {margin-top: 20px;}
.guide_box2 h3 {color: #000; font-size: 1.8rem; font-weight: 500; line-height: 1.4;}
.guide_box2 p {color: #5D667B; font-size: 1.4rem; line-height: 1.4;}

.btn-start {text-align: center; margin-top: 30px;}
.btn-start a {width: 220px; display: inline-block; color: #325ADB; font-size: 2rem; font-weight: 400; padding: 10px 0 12px 0; border: solid 2px #325ADB; border-radius: 30px;}
.btn-start a::before {content: ""; display: inline-block; vertical-align: middle; width: 22px; height: 16px; background: url(../images/Icon_ok.png) center center; background-size: 100%; margin-right: 5px;}

.mail_form {position: relative; margin: 0 auto; width: 800px; font-size: 1.6rem; padding: 30px; background: #fff;}
.mail_form .data-list {border: solid 1px #0B52A4; border-radius: 6px;}
.logo-box {position: relative; margin-bottom: 10px;height: 34px; text-align: right; padding-top: 18px;}
.logo-box .Logo {position: absolute; top: 0; left: 0;}
.multimedia {position: relative; width: 400px; margin: 30px auto; padding-left: 50px;}
.multimedia::before {content: ""; position: absolute; left: 0; top: 2px; width: 42px; height: 42px; background: url(../images/icon_play.png);}
.multimedia>p {font-size: 16px; color: #000; line-height: 1.4;}
.multimedia>p>strong {color:#325ADB; font-weight: 700;}
.go_link {text-align: center; line-height: 1.4;}
.go_link>a {text-decoration: underline;}
.banner_box {display: flex; margin-top:30px;}
.banner_box>div {flex: 1; font-size: 0;}
.banner_box>div>a {display: inline-block; width: calc(50% - 5px); border: solid 1px #ddd; border-radius: 6px; color: #000; background: #F5F7FF; font-size: 1.6rem; text-align: center; padding: 10px;}
.banner_box>div>a.quest::before {content: ""; display: block; height: 32px; background: url(../images/icon_question.png) center center no-repeat; margin-bottom: 10px;}
.banner_box>div>a.pig::before {content: ""; display: block; height: 32px; background: url(../images/icon_payback.png) center center no-repeat; margin-bottom: 10px;}
.banner_box>div>a+a {margin-left: 10px;}
.banner_box>div>p {font-size: 1.6rem; line-height: 1.2; }
.banner_box>div>p>strong {display: block; color: #000; font-weight: 500; line-height: 1.4;  }
.banner_box>div+div {background: url(../images/icon_mark.png) right 20px center no-repeat #F5F7FF; border: solid 1px #ddd; border-radius: 6px; padding: 10px 0 10px 20px; margin-left: 10px; }
.banner_box>div.banner-Q {position: relative; display: block; background: url(../images/icon_QA.png) left 30px center no-repeat #F5F7FF; background-size: 50px; border: solid 1px #ddd; padding: 20px 20px 20px 100px;}
.banner_box>div.banner-Q a {position: absolute; right: 20px; top: 50%; width: 100px; background: #325ADB; color: #fff; padding: 10px; transform: translateY(-50%);}
.copyright {text-align: center; margin: 20px 0; padding: 20px 0; background: #f5f5f5;}
.copyright>p {font-size: 1.3rem; line-height: 1.4;}
.text-guide {margin: 20px 0; text-align: center;}
.text-guide>p {font-size: 1.4rem; line-height: 1.2;}
.text-guide>p:first-child {margin-bottom: 10px;}
.text-guide span {text-decoration: underline; font-weight: 700; color: #FF6056;}
.mail_form h2 {text-align: center; margin-bottom: 30px;}
.mail_form h2>span {position: relative; display: inline-block; font-size: 2rem; font-weight: 700; color: #000;}
.mail_form h2>span::before {content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 5px; background: rgba(50, 90, 219, 0.3);}
.guide-content {margin: 20px 0;}
.guide-content p {color: #000; line-height: 1.4; margin-bottom: 20px;}
.guide-content p.gift {border: solid 1px #ddd; border-radius: 6px; color: #325ADB; background: #F5F7FF; font-size: 1.6rem; padding: 10px; text-align: center;}

.finish-box {position: absolute; top: 50%; left: 50%; width: 60%; transform: translate(-50%, -50%);
    padding: 40px; border: solid 0px #C6CBD7;}
.finish-box dt {text-align: center;}
.finish-box dd {text-align: center; padding-top: 20px;}
.finish-box dd p {font-size: 1.8rem; margin-top: 10px; color: #325ADB}
.finish-box dd strong {font-weight: 700;}
.finish-msg { border-top: dashed 1px #325ADB; border-bottom: dashed 1px #325ADB; padding-bottom: 20px; line-height:28px; }

.message-box {
    position: relative;
    border-radius: 8px; 
    padding: 20px;
    margin: 20px 20px 20px 20px;
	/*추가*/
	line-height:25px;
	text-align: left;
}
.message-box>p {color: #000; font-size: 1.9rem; }
.message-box dt {color: #000; font-size: 1.9rem; font-weight: 700; text-align: center;}
.message-box dd {text-align: left; padding-top: 10px; font-size: 1.7rem; color: #000; line-height: 1.4;}
.blue {border: dashed 1px #325ADB; background: #F5F7FF;}
.gray {border: dashed 1px #999; background: #f5f5f5;}
.red {border: dashed 1px #cc8e8e; background: #fff0f0;}
.orange {border: dashed 1px #fca05e; background: #fff6eb;}
.green {border: dashed 1px #6db166; background: #f2fff1;}
.purple {border: dashed 1px #916eaa; background: #fef2ff;}
.white {border: dashed 1px #c0c0c0; background: #ffffff;}
.yellow {border: dashed 1px #c0c0c0; background: #ffffee;}

.al-center {text-align: center !important;}
.al-left {text-align: left !important;}
.al-right {text-align: right !important;}

.address {display: flex; align-items: center; font-size: 1.8rem; border: solid 1px #C6CBD7; background: #F5F7FF;}
.address dt {width: 30%; text-align: center; color: #325ADB;}
.address dd {padding: 10px; width: 70%; border-left: dashed 1px #CDD7F6; background: #fff;}
.address p+p {margin-top: 10px;}

@media all and (max-width:768px) {
    .layout_wrap {max-width: 100%; min-height: 100%; margin: 0; padding: 0;}
    .layout_cont {min-height: auto;}
    .layout_foot {padding: 20px 16px;}
    .logo {padding: 16px 0 10px 16px;}
    .logo img {width: 30%;}
    .survey_Q, .survey_A {padding: 10px;}
    .Answer {padding: 10px;}
    .text-etc {width: 170px !important;}    
    .map-box {flex-wrap: wrap;}
    .map-all {width: 100%;}
    .map-detail {width: 100%}
    .map-detail img {max-width: 100%;}
    .map-arrow {text-align: center; transform: rotate(90deg);width: 60px; height: 60px; padding: 0;}
    .result {display: block;}
    .result p {line-height: 36px; text-align: center;}
    .column_2 li {width: 100%;}
    .btn-group a+a {margin-left: 20px;}
    .btn-group a.btn-back::before,.btn-group a.btn-next::after {width: 7px; height: 14px;}

    .finish-wrap {padding: 0 16px;}
    .thks_mssg>p>img {width: 50%;}
    .caution {position: relative; padding: 10px 10px 10px 30px; text-align: left;}
    .caution p {line-height: 1.4;}
    .caution p:before {position: absolute; left:10px; top: 50%; transform: translateY(-50%);}
    .data-list {padding: 0;}
    .data-list dl {display: block;}
    .data-list dt, .data-list dd {display: block; width: 100%; text-align:left;}
    .data-list dt {margin-bottom: 5px;}
    .data-list dt.blank {display: none;}
    .data-list dd::before {display: none;}
    .payback dt {line-height: 1.4; padding: 5px 0 7px 0;}
    .button_wrap a {padding: 10px 0 12px 0;}

    .guide_wrap {padding: 16px;}
    .guide_wrap h2 {padding: 0;}
    .guide_box1 {display: block; margin-top: 16px; text-align: left;}
    .guide_box1 p {margin-top: 5px;}
    .box1, .box2, .box3 {padding: 16px 16px 16px 82px; position: relative;}
    .box1::before, .box2::before, .box3::before {width: 50px; height: 50px; position: absolute; left: 16px; top: 50%; transform: translateY(-50%);}
    .box2 {border-top: dashed 1px #C6CBD7; border-bottom: dashed 1px #C6CBD7; border-left: 0; border-right: 0;}
    .guide_box2, .btn-start {margin-top: 16px;}
    .btn-start a {width: 180px;}
    .btn-start a::before {width: 14px; height: 10px;}
    
    .mail_form {width: 100%; padding: 16px;}
    .banner_box {display: block; margin-top:20px;}
    .banner_box>div+div {padding: 10px 0 10px 20px; margin-left: 0; margin-top: 10px;}
    .multimedia {position: relative; width: auto; text-align: center; margin: 10px auto; padding-left: 0;}
    .multimedia::before {content: ""; position: relative; display: inline-block; left: unset; top: unset; width: 36px; height: 36px; background: url(../images/icon_play.png); background-size: 100%;}
    .finish-box {position: relative; width: 90%; top: 30px; left: 5%; transform: unset;}
    .finish-msg {padding: 0 10px 20px 10px;}
    .finish-msg::before {width: 80px; height: 80px; margin-top: -40px;}
    
    .address {display: block;}
    .address dt {width: 100%; border-bottom: dashed 1px #CDD7F6; padding: 10px 0;}
    .address dd {width: 100%; border: 0;}
}
@media all and (max-width:280px) {
    .layout_foot {left: 8px; width: calc(100% - 16px); padding: 12px 8px;}
    .survey_Q, .survey_A {padding: 20px 8px;}
    .Answer {padding: 16px 8px;}
    .Answer>ul>li .text-etc {width: 100%; margin: 5px 0 0 0;}
    .message-wrap {width: 96%;}
    .message-box::before {width: 60px; height: 60px; margin-top: -30px;}
}

/** 테이블 **/
.matrix-wrap {border:solid 1px #C6CBD7; overflow-y: auto;}
.matrix-wrap::-webkit-scrollbar {width: 8px; height: 8px;}
.matrix-wrap::-webkit-scrollbar-thumb {background-color: rgba(50, 90, 219, 0.5);border-radius: 8px;}
.matrix-wrap::-webkit-scrollbar-track {background-color: #e8edff;border-radius: 8px;}
.matrix {border-collapse: collapse;border-spacing: 0; width: 100%; font-size: 1.6rem;}
.matrix>thead {position: sticky; top: 0; z-index: 1;}
.matrix th.fix-head {color: #000; background: #F5F7FF;border-bottom:solid 1px #C6CBD7; }
.matrix>thead>tr>th {text-align: center; vertical-align: bottom;}
.matrix>thead>tr>th:nth-child(1) {text-align: center; vertical-align: middle;}

.matrix tr {
    border-bottom: 1px dashed #C6CBD7;
}
.matrix tbody tr:last-child {border-bottom: 0;}
.matrix th {    
    line-height: 20px;
    border-right: dashed 1px #C6CBD7;
	border-left : dashed 1px #C6CBD7;
    background-color: #F5F7FF;
    padding: 10px 4px;
    font-size: 1.8rem;
    color: #000;
}
.matrix td {    
    line-height: 1;
    border-right: dashed 1px #C6CBD7;
    background: #fff;
    padding: 10px 4px;
    font-size: 1.6rem;
    text-align: center;
}
 

.matrix th:nth-of-type(1),
.matrix td:nth-of-type(1) {border-left:0; margin-left: 0;}
.matrix th:last-child,
.matrix td:last-child {border-right:0;}

.scaleTable {border-collapse: collapse;border-spacing: 0; width: 100%; font-size: 1.6rem;}
.scaleTable th.fix-head {position: sticky; z-index: 10; top: 0; color: #000; background: #F5F7FF;border-bottom:solid 1px #C6CBD7;}
.scaleTable>thead>tr>th {text-align: center;}
.scaleTable tr {
    border-bottom: 1px dashed #C6CBD7;
}
.scaleTable tbody tr:last-child {border-bottom: 0;}
.scaleTable th {    
    line-height: 1;
    border-right: dashed 1px #C6CBD7;
	border-left : dashed 1px #C6CBD7;
    background-color: #F5F7FF;
    padding: 10px 4px;
    font-size: 1.8rem;
    color: #000;
}
.scaleTable td {    
    line-height: 1;
    border-right: dashed 1px #C6CBD7;
    background: #fff;
    padding: 10px 4px;
    font-size: 1.8rem;
    color: #000;
    text-align: center;
}
.scaleTable th:nth-of-type(1),
.scaleTable td:nth-of-type(1) {border-left:0; margin-left: 0;}
.scaleTable th:last-child,
.scaleTable td:last-child {border-right:0;}

.scale-type {font-size: 1.8rem; color: #000; padding: 0;}
.scale-type table {width: 100%;}
.scale-type th, .scale-type td {position: relative; text-align: center;}
.scale-type th {vertical-align: middle; padding: 10px 0;}
.scale-type td::before {content: ""; width: 100%; height: 6px; background: #ddd; position: absolute; left: 50%; top: calc(50% - 3px);}
.scale-type td:last-child:before {display: none;}

.table-total {border-collapse: collapse;border-spacing: 0; width: 100%;}
.table-total thead {border-top:solid 1px #999; border-bottom: 1px dashed #C6CBD7;}
.table-total thead th {    
    background-color: #F5F7FF;
    line-height: 1;
    padding: 10px 4px;
    font-size: 1.6rem;
    color: #000;
    text-align: center;
}
.table-total tbody tr {
    border-bottom: 1px dashed #C6CBD7;
}
.table-total tbody tr:last-child {border-top: solid 1px #325ADB; border-bottom: 0;}
.table-total tbody td {
    line-height: 1;
    background: #fff;
    padding: 10px 4px;
    font-size: 1.6rem;
    color: #000;
}
.table-total tbody td:last-child {text-align: center;}
.table-total tbody td strong {display: block; line-height: 1.4;}
.table-total tbody td+td {border-left: dashed 1px #C6CBD7;}
.table-total tbody tr:last-child td {border: 0;}
.table-total tbody tr:last-child td {color: #325ADB; text-align: center;}
.table-total tbody tr:last-child td input {border: solid 1px #325ADB}
.table-total tbody td input {width: 100px; border-radius: 30px;}

.categoryTable {border-collapse: collapse;border-spacing: 0; width: 100%; font-size: 1.6rem;}
.categoryTable tr {
    border-bottom: 1px dashed #C6CBD7;
}
.categoryTable tbody tr:last-child {border-bottom: 0;}
.categoryTable th {    
    width: 30%;
    line-height: 1;
    border-right: dashed 1px #C6CBD7;
	border-left : dashed 1px #C6CBD7;
    background-color: #F5F7FF;
    padding: 10px 4px;
    font-size: 1.8rem;
    color: #000;
    text-align: center;
}
.categoryTable td {
    width: 70%;
    line-height: 1;
    border-right: dashed 1px #C6CBD7;
    background: #fff;
    font-size: 1.6rem;
    padding: 0;
}
.categoryTable th:nth-of-type(1),
.categoryTable td:nth-of-type(1) {border-left:0; margin-left: 0;}
.categoryTable th:last-child,
.categoryTable td:last-child {border-right:0;}
.categoryTable td table {width: 100%;}
.categoryTable td table td {padding: 10px;}

.noneFlex {border-collapse: separate;border-spacing: 0; width: 100%; font-size: 1.6rem;}
.noneFlex thead {position: sticky; top: 0; z-index: 1;}
.noneFlex thead>tr>th {color: #000; background: #F5F7FF;border-bottom:solid 1px #C6CBD7;text-align: center;}
.noneFlex tr {
 
}
.noneFlex tbody tr:last-child {border-bottom: 0;}
.noneFlex th {    
    line-height: 1.3;
    border-right: dashed 1px #C6CBD7;
    border-bottom: dashed 1px #C6CBD7;
    background-color: #F5F7FF;
    padding: 10px 4px;
    font-size: 1.8rem;
    color: #000;
}
.noneFlex td {    
    line-height: 1;
    border-right: dashed 1px #C6CBD7;
    border-bottom: dashed 1px #C6CBD7;
    background: #fff;
    padding: 10px 4px;
    font-size: 1.6rem;
    text-align: center;
}

.noneFlex th:nth-of-type(1),
.noneFlex td:nth-of-type(1) {border-left:0; margin-left: 0;}
.noneFlex th:last-child,
.noneFlex td:last-child {border-right:0;}

@media all and (max-width:560px) {
    .matrix {position: relative; display: block; width: 100%;}
    .matrix>thead {display: block; width: 100%;}
    .matrix>thead>tr {display: flex; border-bottom: 0;}
    .matrix>thead>tr>th.fix-head {
        flex: 1; 
        padding: 10px 0;
        border-left: 0; 
        word-break:break-all;
        display: flex;
        align-items: flex-end;
        justify-content: center;}
    .matrix>thead>tr:first-child>th:first-child {display: none;}
    .matrix>tbody {display: block; width: 100%;}
    .matrix>tbody>tr {display: flex; flex-wrap: wrap; border-bottom: 1px solid #C6CBD7;}
    .matrix>tbody>tr:last-child {border: 0;}
    .matrix>tbody>tr>th {display: block; width: 100%; border-bottom: dashed 1px #C6CBD7; border-right: 0; border-left: 0;}
    .matrix>tbody>tr>td {flex: 1;}
    .scale-type {padding: 0;}
    .table-total tbody td input {width: 80px;}   
    .categoryTable td table td {padding: 5px;}
}
@media all and (max-width:280px) {
    .table-total tbody td input {width: 60px;}
}


/** 입력박스 **/
input {
  height: 32px; 
  background: #fff;
  border:solid 1px #C6CBD7;
  outline: medium;
  -moz-appearance:none;
  -webkit-appearance:none;
  appearance:none;
  vertical-align: middle;
  font-size: 1.6rem;
  color: #000;
  padding: 10px 10px 12px 10px;
  border-radius: 20px;
}
input:focus {border: 1px solid #325ADB;color: #666; background: #fff;}
input:disabled {background:#eee; color: #999;}
input:-ms-clear {display: none;}

input::-webkit-inner-spin-button,
input::-webkit-clear-button {display: none;}

input::placeholder {color:#aaa; font-size: 1.4rem; font-weight: 100;}
input::-webkit-input-placeholder {color:#aaa;}
input::-ms-input-placeholder {color:#aaa;}

input[type=file] {border: 0; border-radius: 0; padding: 2px 0; height: auto;}


/** check&radio 1 **/
.input_rdo, 
.input_chk {
    min-width: 24px;
    min-height: 24px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
    padding-left: 28px;
    color: #000;
    font-size: 1.8rem;
    line-height: 1.4;
}
.input_rdo input[type="radio"],
.input_chk input[type="checkbox"] {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    width: 24px;
    height: 24px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    opacity: 0;
}
.input_rdo i,
.input_chk i {
    width: 24px;
    height: 24px;
}
.input_rdo i:before, .input_rdo i:after,
.input_chk i:before, .input_chk i:after {
    position: absolute;
}
.input_rdo i:before {
    content: '';
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border: 1px solid #C6CBD7;
    background: #fff;
    border-radius: 100%;
}
.input_chk i:before {
    content: '';
    top: 0;
    left: 0;
    width: 24px;
    height: 24px;
    border: 1px solid #C6CBD7;
    background: #fff;
    border-radius: 4px;
}
.input_rdo input:checked + i:after, .input_chk input:checked + i:after {
    content: '';
    width: 14px;
    height: 9px;
    top: 6px;
    left: 5px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
}
.input_rdo input:checked + i:before, .input_chk input:checked + i:before {
    background: #325ADB;
    border-color: #325ADB;
}
.input_rdo input:disabled + i,
.input_chk input:disabled + i {
    cursor: default;
}
.input_rdo input:disabled + i:before,
.input_chk input:disabled + i:before {
    opacity: 0.2;
    background-color: #ddd;
    border-color: #555;
}
.input_rdo input:disabled:checked + i:before,
.input_chk input:disabled:checked + i:before {
    opacity: 0.2;
    background-color: #333;
    border-color: #C6CBD7;
}
.input_rdo span,
.input_chk span {display: inline-block; vertical-align: middle; font-size: 1.8rem; line-height: 24px; padding-left: 28px;}
.input_rdo input:checked+i+span,
.input_chk input:checked+i+span {color: #325ADB;}


/** check&radio 2 **/
.input_rdo2, 
.input_chk2 {
    min-width: 24px;
    min-height: 24px;
    display: inline-block;
    vertical-align: middle;
    position: relative;
    cursor: pointer;
}
.input_rdo2 input[type=radio],
.input_chk2 input[type=checkbox] {
    position: absolute;
    top: 0;
    left: 0;
    padding: 0;
    margin: 0;
    width: 24px;
    height: 24px;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    -ms-appearance: none;
    -o-appearance: none;
    opacity: 0;
    z-index: 9999;}
.input_rdo2 i,
.input_chk2 i {
    position: relative;
    display: inline-block;
    vertical-align: middle;
    width: 24px;
    height: 24px;
}
.input_rdo2 i:before,
.input_chk2 i:before {
    display: block;
    vertical-align: middle;
}
.input_rdo2 i:after,
.input_chk2 i:after {
    position: absolute;
}
.input_rdo2 i:before {
    content: '';
    width: 24px;
    height: 24px;
    border: 1px solid #C6CBD7;
    background: #fff;
    border-radius: 100%;
}
.input_chk2 i:before {
    content: '';
    width: 24px;
    height: 24px;
    border: 1px solid #C6CBD7;
    background: #fff;
    border-radius: 4px;
}
.input_rdo2 input:checked + i:after {
    content: '';
    width: 14px;
    height: 9px;
    top: 6px;
    left: 5px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
}
.input_chk2 input:checked + i:after {
    content: '';
    width: 14px;
    height: 9px;
    top: 6px;
    left: 5px;
    border-left: 3px solid #fff;
    border-bottom: 3px solid #fff;
    transform: rotate(-45deg);
    -webkit-transform: rotate(-45deg);
    -ms-transform: rotate(-45deg);
}
.input_rdo2 input:checked + i:before, .input_chk input:checked + i:before {
    background: #325ADB;
    border-color: #325ADB;
}
.input_rdo2 input:disabled + i,
.input_chk2 input:disabled + i {
    cursor: default;
}
.input_rdo2 input:disabled + i:before,
.input_chk2 input:disabled + i:before {
    opacity: 0.2;
    background-color: #ddd;
    border-color: #555;
}
.input_rdo2 input:disabled:checked + i:before,
.input_chk2 input:disabled:checked + i:before {
    opacity: 0.2;
    background-color: #333;
    border-color: #C6CBD7;
}
.input_rdo2,
.input_chk2 {display: inline-block; vertical-align: middle; color: #000; font-size: 1.8rem;}



.whenHover {color: #325ADB;}
.disabled {color: #999;}
.input_rdo .text-etc,
.input_chk .text-etc {display: inline-block;}

/**모달 팝업**/
.modal-mask {
    position: fixed;
    z-index: 9998;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
    display: table;
    transition: opacity .3s ease;
  }

  .modal-wrapper {
    display: table-cell;
    vertical-align: middle;
  }

  .modal-container {
    width: 600px;
    margin: 0px auto;
    background: #fff;
    transition: all .3s ease;
  }
  .modal-header {
    position: relative; 
    padding: 30px;
}
  .modal-header p {
    margin-top: 0;
    color: #333;
    font-size: 2.4rem;
    text-align: left;
  }
  .modal-header button {display:block; width: 30px; height: 30px; position: absolute; top:20px; right: 20px;font-size:0; background: transparent;}
  .modal-header button::before {content:""; display: block; height:1px; background-color: #333; position:absolute; left:0; right:0; top:50%; 
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform:rotate(45deg);}
  .modal-header button::after {content:""; display: block; height:1px; background-color: #333; position:absolute; left:0; right:0; top:50%; 
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform:rotate(-45deg);}

  .modal-body {
    max-height: 700px;
    padding: 0 30px 30px 30px;        
    background-color: #fff;
    overflow: auto;
  }

.modal-wrapper input[type=text] {width: 100%; height: 46px;padding: 15px 10px 15px 10px;border-radius: 4px;border: solid 1px #dbdbdb;background-color: #fff;}
.modal-wrapper textarea {width: 100%; padding: 15px 10px 15px 10px;border-radius: 4px;border: solid 1px #dbdbdb;background-color: #fff;}

.guide {background: #F5F7FF; padding: 15px; margin-bottom: 20px;}
.guide p {font-size: 1.4rem; line-height: 1.4; color: #333;}

.form_table {border-top: solid 1px #333; border-bottom: solid 1px #333; padding: 10px; font-size: 0;}
.form_table dt, .form_table dd {display: inline-block; vertical-align: middle; padding: 5px; font-size: 1.4rem; }
.form_table dt {width: 20%;font-weight: 500; color: #333;}
.form_table dd {width: 80%;}

.btn_wrap {margin-top: 20px; text-align: center;}
.btn_wrap a {display: inline-block; width: 120px; height: 42px; line-height: 40px; background: #777; font-size: 1.6rem; color: #fff; border-radius: 22px;}
.btn_wrap a.send {background: #325ADB;}
.btn_wrap a+a {margin-left: 10px;}

  @media ( max-width: 600px ) {
  	.modal-container {width: 100%; height: 100%;}
	.modal-body {max-height: auto; padding: 10px;}

	.guide {padding: 15px; margin-bottom: 10px;}

  	.form_table {padding: 5px;}
  	.form_table dt {width: 15%;}
  	.form_table dd {width: 85%;}

  	.btn_wrap a {width: 120px;}
  }

.btn-button {color: #fff; font-size: 1.4rem; background: #325ADB; height: 30px; border-radius: 15px; padding: 0 10px; cursor:pointer;}
.textarea {width: 100%; border: solid 1px #C6CBD7;}
.btn-down {background: url(../images/icon_down.png) center center no-repeat #325ADB; width: 24px; height: 24px; border-radius: 50%; font-size: 0;}
.btn-side {background: url(../images/icon_down.png) center center no-repeat #325ADB; width: 24px; height: 24px; border-radius: 50%; font-size: 0; transform:rotate(-90deg);}

.slid-wrap .slide-bar {width: 100%; height: 10px; padding: 0; margin: 10px 0;}
.slid-wrap  input[type=range] {
    -webkit-appearance: none;
}
.slid-wrap input[type=range]:focus {
    outline: none;
}
/*webkit (Chrome)의 경우*/
.slid-wrap input[type=range]::-webkit-slider-runnable-track {
    width: 100%;
    height: 10px;
    border-radius: 5px;
    cursor: pointer;
    background: #ddd;
}
.slid-wrap input[type=range]::-webkit-slider-thumb {
    height: 30px;
    width: 30px;
    background: #325ADB;
    border-radius: 50%;
    cursor: pointer;
    -webkit-appearance: none;
    margin-top: -10px; /*chrome의 경우 margin-top값을 부여해야합니다.*/
}
.slid-wrap  input[type=range]:focus::-webkit-slider-runnable-track {
    background: #325ADB; /*네모버튼에 포커스를 줬을때 뒤에 라인(ㅡ)의 효과*/
}
/*Firefox의 경우*/
.slid-wrap  input[type=range]::-moz-range-track {
    width: 100%;
    height: 10px;
    border-radius: 5px;
    cursor: pointer;
    background: #325ADB;
}
.slid-wrap  input[type=range]::-moz-range-thumb {
    height: 30px;
    width: 30px;
    background: #325ADB;
    border-radius: 50%;
    cursor: pointer;
}
/*IE의 경우*/
.slid-wrap  input[type=range]::-ms-track {
    width: 100%;
    height: 10px;
    border-radius: 5px;
    cursor: pointer;
    background: transparent;
    border-color: transparent;
    color: transparent;
}
.slid-wrap  input[type=range]::-ms-fill-lower {
    background: #325ADB;
}
.slid-wrap  input[type=range]::-ms-fill-upper {
    background: #325ADB;
}
.slid-wrap  input[type=range]::-ms-thumb {
    margin-top: 1px;
    height: 15px;
    width: 10px;
    background: #ffffff;
    cursor: pointer;
}
.slid-wrap  input[type=range]:focus::-ms-fill-lower {
    background: #325ADB;/*네모버튼에 포커스를 줬을때 뒤에 라인(ㅡ)의 효과*/
}
.slid-wrap  input[type=range]:focus::-ms-fill-upper {
    background: #325ADB; /*네모버튼에 포커스를 줬을때 뒤에 라인(ㅡ)의 효과*/
}


 
/*======================== 추가 ========================*/
.clr_blueS {font-size: 1.5rem;  color: #FF6056;}

.complete_mssg {position: relative; width: 100%; margin: 30px auto 140px auto; border-top: solid 1px #225ce3; border-bottom: solid 1px #225ce3; padding: 20px 0; text-align: center;}
.complete_mssg>p {font-size: 18px; color: #000;}


.survey_M {position: relative; display: flex; align-items: baseline; padding: 20px;} 
.survey_M>p { font-size: 1.8rem; color: #414141; line-height: 1.6;}


.survey_tts {align-items: baseline; padding: 20px;  text-align: right;}

input.img-button {
	background: url( "/survey_form/survey_form/202307/images/tts.png" ) no-repeat;
	border: none;
	width: 40px;
	height: 40px;
	cursor: pointer;
	text-align:right;
}

/*   select  */
.selectBox {border: solid 1px #C6CBD7}
.selectBox:focus {border: 1px solid #325ADB;}