@charset "utf-8";

.sub-visual {height:400px; background-repeat: no-repeat; background-position: center center; background-size: cover; margin-top: 100px;}
.sub-visual01 {background-image: url('../img/sub/sub-visual01.jpg');}
.sub-visual02 {background-image: url('../img/sub/sub-visual02.jpg');}
.sub-visual03 {background-image: url('../img/sub/sub-visual03.jpg');}
.sub-visual04 {background-image: url('../img/sub/sub-visual04.jpg');}
.sub-visual05 {background-image: url('../img/sub/sub-visual05.jpg');}
.sub-visual06 {background-image: url('../img/sub/sub-visual06.jpg');}
.sub-visual h2 {opacity: 0; display: flex; justify-content: center; align-items: center; height: 100%; font-size: 55px; font-weight: 700; line-height: 1.4em; color: #fff;}

.sub_1 .lnb,
.sub_3 .lnb {margin-top: 70px;}
.lnb ul {display: flex; justify-content: center;}
.lnb ul li {padding: 0 5px;}
.lnb ul li a {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 160px; height: 160px; background: #f5f5f5; border-radius: 5px; text-align: center; transition: all 0.4s;}
.lnb ul li a:hover {background: #f05323;}
.lnb ul li.active a {background: #f05323;}
.lnb ul li .icon {width: 60px; height: 60px; background-repeat: no-repeat; background-position: center center; margin-bottom: 10px; transition: all 0.5s;}
.sub_1 .lnb ul li:nth-child(1) .icon {background-image: url('../img/sub/s01-01.png');}
.sub_1 .lnb ul li:nth-child(2) .icon {background-image: url('../img/sub/s01-02.png');}
.sub_1 .lnb ul li:nth-child(3) .icon {background-image: url('../img/sub/s01-03.png');}
.sub_1 .lnb ul li:nth-child(4) .icon {background-image: url('../img/sub/s01-04.png');}
.sub_1 .lnb ul li:nth-child(5) .icon {background-image: url('../img/sub/s01-05.png');}
.sub_1 .lnb ul li:nth-child(1) a:hover .icon, 
.sub_1 .lnb ul li:nth-child(1).active a .icon {background-image: url('../img/sub/s01-01-on.png');}
.sub_1 .lnb ul li:nth-child(2) a:hover .icon, 
.sub_1 .lnb ul li:nth-child(2).active a .icon {background-image: url('../img/sub/s01-02-on.png');}
.sub_1 .lnb ul li:nth-child(3) a:hover .icon, 
.sub_1 .lnb ul li:nth-child(3).active a .icon {background-image: url('../img/sub/s01-03-on.png');}
.sub_1 .lnb ul li:nth-child(4) a:hover .icon, 
.sub_1 .lnb ul li:nth-child(4).active a .icon {background-image: url('../img/sub/s01-04-on.png');}
.sub_1 .lnb ul li:nth-child(5) a:hover .icon, 
.sub_1 .lnb ul li:nth-child(5).active a .icon {background-image: url('../img/sub/s01-05-on.png');}

.sub_3 .lnb ul li:nth-child(1) .icon {background-image: url('../img/sub/s03-01.png');}
.sub_3 .lnb ul li:nth-child(2) .icon {background-image: url('../img/sub/s03-02.png');}
.sub_3 .lnb ul li:nth-child(3) .icon {background-image: url('../img/sub/s03-03.png');}
.sub_3 .lnb ul li:nth-child(4) .icon {background-image: url('../img/sub/s03-04.png');}
.sub_3 .lnb ul li:nth-child(1) a:hover .icon, 
.sub_3 .lnb ul li:nth-child(1).active a .icon {background-image: url('../img/sub/s03-01-on.png');}
.sub_3 .lnb ul li:nth-child(2) a:hover .icon, 
.sub_3 .lnb ul li:nth-child(2).active a .icon {background-image: url('../img/sub/s03-02-on.png');}
.sub_3 .lnb ul li:nth-child(3) a:hover .icon, 
.sub_3 .lnb ul li:nth-child(3).active a .icon {background-image: url('../img/sub/s03-03-on.png');}
.sub_3 .lnb ul li:nth-child(4) a:hover .icon, 
.sub_3 .lnb ul li:nth-child(4).active a .icon {background-image: url('../img/sub/s03-04-on.png');}
.lnb ul li span {font-size: 20px; font-weight: 600; line-height: 1.4em; color: #666; transition: all 0.5s;}
.lnb ul li.active span, .lnb ul li a:hover span {color: #fff;}

.real-cont {padding: 80px 0 150px;}
.real-cont.type02 {padding-bottom: 0;} 
.page-title {text-align: center;}
.page-title h3 {position: relative; font-size: 52px; font-weight: 700; line-height: 1.4em; color: #000; margin-bottom: 22px; padding-top: 30px;}
.page-title h3:before {position: absolute; top: 0; left: 50%; margin-left: -15px; content: ''; width: 30px; height: 6px; background: #ef5222;}
.page-title p {font-size: 25px; font-weight: 600; line-height: 1.7em; color: #666; margin-bottom: 60px;}

/* s1 */
.overview .img-box {width: 100%; height: 360px; background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius: 5px; overflow: hidden; margin-bottom: 60px;}
.range-system .overview .img-box {background-image: url('../img/sub/range-system-img.jpg');}
.range-problem .overview .img-box {background-image: url('../img/sub/range-problem-img.jpg');}
.range-harass .overview .img-box {background-image: url('../img/sub/range-harass-img.jpg');}
.range-sexual .overview .img-box {background-image: url('../img/sub/range-sexual-img.jpg');}
.range-report .overview .img-box {background-image: url('../img/sub/range-report-img.jpg');}
.overview > p {font-size: 20px; line-height: 1.7em; color: #666; text-align: center;}

.circle-box {display: flex; justify-content: center; margin-top: 70px; margin-bottom: 65px;}
.circle-box > div {padding: 0 15px;}
.circle-box .circle-result {position: relative; padding-left: 105px;}
.circle-box .circle-result:before {position: absolute; top: 50%; left: 35px; margin-top: -21px; content: ''; width: 25px; height: 43px; background: url('../img/sub/s01-circle-box-arrow.png') no-repeat center center;}
.circle-box .inner {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 230px; height: 230px; border-radius: 50%; background: #f5f5f5; text-align: center;}
.circle-result .inner {background: #f05323;}
.circle-box b {display: block; font-size: 28px; font-weight: 600; line-height: 1.3em; color: #000;}
.circle-result b {color: #fff;}
.circle-box p {font-size: 18px; line-height: 1.66em; color: #666; margin-top: 10px;}

/* s2-1 */
.process .cont01 {margin-bottom: 150px;}
.process .cont01 ol {display: flex; margin: 0 -15px;}
.process .cont01 ol li {padding: 0 15px;}
.process .cont01 ol li .inner {width: 260px; height: 100%; border: 1px solid #ddd; border-radius: 10px; padding: 38px 20px 42px; text-align: center;}
.process .cont01 ol li .icon {width: 110px; height: 110px; background-repeat: no-repeat; background-position: center center; margin: 0 auto 25px;}
.process .cont01 ol li:nth-child(1) .icon {background-image: url('../img/sub/process-icon01.png');}
.process .cont01 ol li:nth-child(2) .icon {background-image: url('../img/sub/process-icon02.png');}
.process .cont01 ol li:nth-child(3) .icon {background-image: url('../img/sub/process-icon03.png');}
.process .cont01 ol li:nth-child(4) .icon {background-image: url('../img/sub/process-icon04.png');}
.process .cont01 ol li:nth-child(5) .icon {background-image: url('../img/sub/process-icon05.png');}
.process .cont01 ol li h4 {font-size: 28px; font-weight: 600; line-height: 1.3em; color: #000; margin-bottom: 15px;}
.process .cont01 ol li p {font-size: 18px; line-height: 1.66em; color: #666;}
.process .cont02 {padding: 140px 0; background: #f5f5f5;}
.process .cont02 .page-title h3 {padding-top: 0;}
.process .cont02 .page-title h3:before {display: none;}
.process .cont02 .wrap {display: flex; justify-content: center;}
.process .cont02 .title-box {margin-right: 55px;}
.process .cont02 .title-box li {position: relative; margin-bottom: 50px;}
.process .cont02 .title-box li:after {position: absolute; bottom: -34px; left: 50%; margin-left: -23px; content: ''; width: 46px; height: 23px; background: url('../img/sub/process-arrow.png') no-repeat center center;}
.process .cont02 .title-box li:last-child:after {display: none;}
.process .cont02 .title-box .inner {display: flex; justify-content: center; align-items: center; width: 370px; height: 80px; background: #fff; border-radius: 10px; font-size: 22px; font-weight: 600; line-height: 1.3em; color: #000; text-align: center;}
.process .cont02 .title-box li.bg-orange .inner {background: #f05323; color: #fff;}
.process .cont02 .details-box {border-top: 1px solid #ddd;}
.process .cont02 .details-box ul {width: 450px; border-bottom: 1px solid #ddd; padding: 39px 4px;}
.process .cont02 .details-box ul li {position: relative; font-size: 18px; line-height: 1.5em; color: #666; padding-left: 15px; margin-bottom: 5px;}
.process .cont02 .details-box ul li:last-child {margin-bottom: 0;}
.process .cont02 .details-box ul li:before {position: absolute; top: 11px; left: 0; content: ''; width: 4px; height: 4px; background: #f05323;	}

/* s3 */
.program-introduction .wrap {position: relative; display: flex;}
.program-introduction .wrap:before {position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 100%; border: 1px solid #ddd; border-radius: 5px; z-index: -1;}
.program-introduction .img-box {max-width: 710px; width: 100%; height: 450px; background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius: 5px;}
.program-consult .program-introduction .img-box {background-image: url('../img/sub/program-consult-img.jpg');}
.program-secret .program-introduction .img-box {background-image: url('../img/sub/program-secret-img.jpg');}
.program-disadvantage .program-introduction .img-box {background-image: url('../img/sub/program-disadvantage-img.jpg');}
.program-right .program-introduction .img-box {background-image: url('../img/sub/program-right-img.jpg');}
.program-introduction .text-box {display: flex; align-items: center; padding: 20px 35px 20px 70px;}
.program-introduction .text-box ul {}
.program-introduction .text-box ul li {position: relative; font-size: 20px; line-height: 1.7em; color: #666; padding-left: 15px; margin-bottom: 15px;}
.program-introduction .text-box ul li:last-child {margin-bottom: 0;}
.program-introduction .text-box ul li:before {position: absolute; top: 14px; left: 0; content: ''; width: 4px; height: 4px; background: #ef5222;}

/* s4 */
.tab-menu {margin-bottom: 80px;}
.tab-menu ul {display: flex; justify-content: center;}
.tab-menu ul li {padding: 0 5px;}
.tab-menu ul li a {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 160px; height: 160px; background: #f5f5f5; border-radius: 5px; text-align: center; transition: all 0.4s;}
.tab-menu ul li a:hover {background: #f05323;}
.tab-menu ul li.active a {background: #f05323;}
.tab-menu ul li .icon {width: 60px; height: 60px; background-repeat: no-repeat; background-position: center center; margin-bottom: 10px; transition: all 0.5s;}
.write .tab-menu ul li:nth-child(1) .icon {background-image: url('../img/sub/s01-01.png');}
.write .tab-menu ul li:nth-child(2) .icon {background-image: url('../img/sub/s01-02.png');}
.write .tab-menu ul li:nth-child(3) .icon {background-image: url('../img/sub/s01-03.png');}
.write .tab-menu ul li:nth-child(4) .icon {background-image: url('../img/sub/s01-04.png');}
.write .tab-menu ul li:nth-child(5) .icon {background-image: url('../img/sub/s01-05.png');}
.write .tab-menu ul li:nth-child(1) a:hover .icon, 
.write .tab-menu ul li:nth-child(1).active a .icon {background-image: url('../img/sub/s01-01-on.png');}
.write .tab-menu ul li:nth-child(2) a:hover .icon, 
.write .tab-menu ul li:nth-child(2).active a .icon {background-image: url('../img/sub/s01-02-on.png');}
.write .tab-menu ul li:nth-child(3) a:hover .icon, 
.write .tab-menu ul li:nth-child(3).active a .icon {background-image: url('../img/sub/s01-03-on.png');}
.write .tab-menu ul li:nth-child(4) a:hover .icon, 
.write .tab-menu ul li:nth-child(4).active a .icon {background-image: url('../img/sub/s01-04-on.png');}
.write .tab-menu ul li:nth-child(5) a:hover .icon, 
.write .tab-menu ul li:nth-child(5).active a .icon {background-image: url('../img/sub/s01-05-on.png');}
.tab-menu ul li span {font-size: 20px; font-weight: 600; line-height: 1.4em; color: #666; transition: all 0.5s;}
.tab-menu ul li.active span, .tab-menu ul li a:hover span {color: #fff;}

.write .img-box {width: 100%; height: 360px; background-repeat: no-repeat; background-position: center center; background-size: cover; border-radius: 5px; overflow: hidden; margin-bottom: 63px;}
.write-system .img-box {background-image: url('../img/sub/write-system-img.jpg');}
.write-problem .img-box {background-image: url('../img/sub/write-problem-img.jpg');}
.write-harass .img-box {background-image: url('../img/sub/write-harass-img.jpg');}
.write-sexual .img-box {background-image: url('../img/sub/write-sexual-img.jpg');}
.write-report .img-box {background-image: url('../img/sub/write-report-img.jpg');}

.write .tab-cont-title {margin-bottom: 30px;}
.write .tab-cont-title h4 {position: relative; font-size: 32px; font-weight: 600; line-height: 1.4em; color: #000; padding-left: 45px;}
.write .tab-cont-title h4:before {position: absolute; top: 50%; left: 0; margin-top: -15px; content: '?'; width: 30px; height: 30px; font-size: 18px; font-weight: 800; line-height: 30px; color: #fff; background: #f05323; border-radius: 50%; text-align: center;}
.write .topic .tab-cont-title h4:before {content: '?';}
.write .notice .tab-cont-title h4:before {content: '!';}
.write .tab-cont-title p {font-size: 18px; line-height: 1.7em; color: #666; margin-top: 14px;}
.write .topic {padding-bottom: 60px; margin-bottom: 55px; border-bottom: 1px solid #ddd;}
.write .topic ul {display: flex; flex-wrap: wrap; margin: -10px;}
.write .topic ul li {width: 25%; padding: 10px;}
.write .topic ul li .inner {display: flex; justify-content: center; align-items: center; min-height: 150px; height: 100%; border: 1px solid #ddd; border-radius: 5px; }
.write .topic ul li .inner p {position: relative; font-size: 18px; font-weight: 500; line-height: 1.66em; color: #000; text-align: center; padding-top: 33px;}
.write .topic ul li .inner p:before {position: absolute; top: 0; left: 50%; margin-left: -13px; content: ''; width: 27px; height: 21px; background: url('../img/sub/write-check-icon.png') no-repeat center center;}
.write .notice ul {background: #f7f7f7; border-radius: 5px; padding: 45px 40px;}
.write .notice ul li {position: relative; font-size: 18px; line-height: 1.7em; color: #666; padding-left: 15px;}
.write .notice ul li:before {position: absolute; top: 13px; left: 0; content: ''; width: 4px; height: 4px; background: #f05323;}

.check-wrap {margin-top: 55px; text-align: center;}
.check-wrap .check-box {margin-bottom: 45px;}
.check-box label {display: flex; justify-content: center; align-items: center; font-size: 18px; font-weight: 700; line-height: 1.5em; color: #333; cursor: pointer;}
.check-box input[type='checkbox'] {display: none;}
.check-box .check-mark {position: relative; display: inline-block; width: 22px; height: 22px; background: #f7f7f7; border:1px solid #c2c2c2; border-radius: 3px; margin-right: 10px;}
.check-box input[type='checkbox']:checked + .check-mark {background: #ef5222; border: 1px solid #ef5222;}
.check-box .check-mark:after {display: none; position: absolute; left: 2px; top:-3px; content:'✔'; font-size: 16px; width: 16px; height: 16px; text-align: center; color: #fff;}
.check-box input[type='checkbox']:checked + .check-mark:after {display: block;}
.check-box p {font-size: 18px; font-weight: 700; line-height: 1.5em; color: #333;}
.check-wrap a {width: 190px; line-height: 58px; font-size: 20px; font-weight: 600; color: #fff; background: #ef5222; border: 1px solid #ef5222; border-radius: 5px; text-align: center; margin: 0 auto; transition: all 0.5s;}
.check-wrap a:hover {background: #fff; color: #ef5222;}

.write-agree .check-box {display: flex; justify-content: center; align-items: center;}
.write-agree .check-box .wrap {display: flex; margin-left: 30px;}
.write-agree .check-box .wrap label {margin-right: 20px;}
.check-box input[type='radio'] {margin-right: 10px;}

input[type='radio'] {position: relative; width: 22px; height: 22px; border: 1px solid #c2c2c2; background: #f7f7f7; border-radius: 50%; flex-shrink:0; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; cursor: pointer;}
input[type='radio']:after {opacity: 0; position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); content: ''; width: 12px; height: 12px; background: #ef5222; border-radius: 50%; }
input[type='radio']:checked {background-color: #fff; border: 1px solid #ef5222; }
input[type='radio']:checked:after {opacity: 1;}

.popup {display: none; width: 100%; height: 100%;}
.popup .wrap {position: fixed; top: 50%; left: 50%; transform: translate(-50%,-50%); display: flex; flex-direction: column; justify-content: center; align-items: center; width: 500px; height: 250px; background: #fff; border-radius: 10px; z-index: 110;}
.popup .wrap b {font-size: 22px; font-weight: 600; line-height: 1.5em; color: #000; text-align: center; margin-bottom: 23px;}
.popup .wrap p {font-size: 18px; line-height: 1.5em; color: #666; text-align: center;}
.popup .wrap .btn-wrap {display: flex; gap: 5px}
.popup .wrap button {width: 150px; line-height: 58px; font-size: 20px; font-weight: 600; color: #fff; background: #ef5222; border: 1px solid #ef5222; border-radius: 5px; text-align: center;}
.popup .wrap a {width: 200px; line-height: 58px; font-size: 20px; font-weight: 600; color: #fff; background: #ef5222; border: 1px solid #ef5222; border-radius: 5px; text-align: center; margin-top: 20px;}
.popup-bg {display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: #000; opacity: 0.7; z-index: 100;}	

/* s4 실명 익명 선택 페이지 */
.agree-tab-menu {margin-top: 45px; margin-bottom: 50px;}
.agree-tab-menu ul {display: flex; justify-content: center;}
.agree-tab-menu ul li {width: 180px; height: 65px;}
.agree-tab-menu ul li:nth-child(1) {margin-right: 5px;}
.agree-tab-menu ul li a {font-size: 20px; font-weight: 600; line-height: 63px; color: #666; text-align: center; background: #f7f7f7; border: 1px solid #f7f7f7; border-radius: 5px; transition: all 0.5s;}
.agree-tab-menu ul li.active a {color: #f05323; background: #fff; border:1px solid #f05323;}
.agree-tab-menu ul li a:hover {color: #f05323;}
.write-agree #tab-name > p {font-size: 32px; font-weight: 600; line-height: 1.5em; color: #000; margin-bottom: 50px; text-align: center;}
.write-agree #tab-name .privacy-box h4 {height: 80px; font-size: 26px; font-weight: 600; line-height: 80px; color: #000; background: #f7f7f7; padding: 0 30px; border-radius: 5px;}
.write-agree #tab-name .privacy-box .content {height: 300px; overflow: auto; padding: 20px 30px; border: 1px solid #ddd; border-radius: 5px; margin-top: 10px;}  
.write-agree #tab-name .privacy-box .content::-webkit-scrollbar {width: 5px;}
.write-agree #tab-name .privacy-box .content::-webkit-scrollbar-thumb {background: #ddd; border-radius: 5px; cursor: pointer;}
.write-agree #tab-name .privacy-box .content::-webkit-scrollbar-track {background: transparent; border-radius: 5px;}

.popup-anony .wrap {width: 620px; height: 460px; padding: 0 5px;}
.popup-anony .wrap b {margin-bottom: 10px;}
.popup-complete .wrap {width: 620px; height: 350px;}

/* s4 접수 완료 안내 페이지 */
.write-complete .wrap {display: flex; flex-direction: column; justify-content: center; align-items: center; width: 840px; height: 420px; border: 1px solid #ddd; border-radius: 5px; text-align: center; margin: 0 auto;}
.write-complete .icon {width: 90px; height: 90px; background: url('../img/sub/s04-check-icon.png') no-repeat center center #000; border-radius: 50%; margin: 0 auto 35px;}
.write-complete b {display: block; font-size: 32px; font-weight: 600; line-height: 1.3em; color: #000; text-align: center; margin-bottom: 15px;}
.write-complete p {font-size: 22px; font-weight: 500; line-height: 1.3em; color: #666; margin-bottom: 35px;}
.write-complete p span {color: #ef5222;}
.write-complete a {display: inline-block; width: 190px; height: 60px; font-size: 20px; font-weight: 600; line-height: 58px; color: #fff; background: #ef5222; border: 1px solid #ef5222; border-radius: 3px; text-align: center; transition: all 0.5s;}
.write-complete a:hover {background: #fff; color: #ef5222;}

/* s5 */
.result-tab-menu {margin-top: 45px; margin-bottom: 50px;}
.result-tab-menu ul {display: flex; justify-content: center;}
.result-tab-menu ul li {width: 180px; height: 65px;}
.result-tab-menu ul li:nth-child(1) {margin-right: 5px;}
.result-tab-menu ul li a {font-size: 20px; font-weight: 600; line-height: 63px; color: #666; text-align: center; background: #f7f7f7; border: 1px solid #f7f7f7; border-radius: 5px; transition: all 0.5s;}
.result-tab-menu ul li.active a {color: #f05323; background: #fff; border: 1px solid #f05323;}
.result-tab-menu ul li a:hover {color: #f05323;}

.result .tab-cont .wrap {width: 740px; border-radius: 10px; border: 1px solid #ddd; margin: 0 auto 40px; padding: 60px 75px;}
.result .tab-cont .item {display: flex; align-items: center; margin-bottom: 20px;}
.result .tab-cont .item:last-child {margin-bottom: 0;}
.result .tab-cont label {max-width: 115px; width: 100%; font-size: 18px; font-weight: 700; line-height: 1.3em; color: #000;}
.result .tab-cont label span {color: #f05323; padding-left: 10px;}
.result .tab-cont .input-wrap {width: 1%; flex: 1 1 auto;}
.result .tab-cont input {width: 100%; line-height: 50px; font-size: 18px; color: #666; background: #f7f7f7; border-radius: 5px;	border: none; padding: 0 17px;}
.result .tab-cont input:focus {background: #fff; outline: 1px solid #000;}
.result .tab-cont .input-wrap ul {display: flex; width: 100%;}
.result .tab-cont .input-wrap ul li {position:relative; width:33.3333333%; margin-right: 26px;}
.result .tab-cont .input-wrap ul li:last-child {margin-right: 0;}
.result .tab-cont .input-wrap ul li:after {position:absolute; right:-16px; top:50%; content:''; width:6px; height:1px; background:#666;}
.result .tab-cont .input-wrap ul li:last-child:after {display: none;}
.result .btn-area a {width: 190px; line-height: 58px; font-size: 20px; font-weight: 600; color: #fff; background: #ef5222; border: 1px solid #ef5222; border-radius: 5px; text-align: center; margin: 0 auto 30px; transition: all 0.5s;}
.result .btn-area a:hover {background: #fff; color: #ef5222;}
.result .notice p {font-size: 18px; line-height: 1.77em; color: #f05323; text-align: center;}

/* s5 처리결과 확인 리스트 */
/* .result-list table .status-save {width: 80px; line-height: 34px; background: #ef5222; border: 1px solid #ef5222; border-radius: 13px; font-size: 16px; font-weight: 600; color: #fff; text-align: center;}
.result-list table .status-submit {width: 80px; line-height: 34px; background: #fff; border: 1px solid #ef5222; border-radius: 13px; font-size: 16px; font-weight: 600; color: #ef5222; text-align: center;}

 */