/* 인사말 */
.greetings{display: flex; gap:5rem; padding-bottom: 10rem;}
.greetings p{width: 40%; height: fit-content; position: relative; padding:0 0 5rem 5rem ;}
.greetings p::before{content: ''; width: 50%; height: 50%; border-radius: 0 0 10rem 0; background: var(--main_color); position:absolute; bottom: 0; left: 0; z-index: -1;}
.greetings dl{width:60%}
.greetings dl dt{font-weight: bold; font-size:3.6rem; padding-bottom: 2rem;}
.greetings dl dt span{display: inline-block; position: relative;}
.greetings dl dt span::before{content: ''; width:100%; height: 50%; background: var(--sub_color); position: absolute; bottom: 0; left: 0; z-index:-1; opacity: 0.5;}
.greetings dl dd em{text-align: right; font-weight: bold; font-size: 2.4rem; display: block;}

/* 운영목적 */
.mission_list{display: flex; gap:5rem}
.mission_list h4{width: 20%;}
.mission_list p{width: 80%; background: #fafafa; padding:3rem; font-weight: bold; font-size:4rem; text-align: center;}
.mission_list p i{display: inline-block; padding:2rem}
.mission_list p span{color:var(--main_color)}
.mission_list:nth-child(2) p span{color:var(--sub_color)}
.mission_list ul{width: 80%;}


/* 연혁 */
.bg_con{padding:10rem 0; background: #fafafa;}
.history_con{display: flex; flex-wrap: wrap; position: relative; padding:5rem 0 0; justify-content:space-between; }
.history_con::before{content: ''; width: 1px; height: calc(100% - 10rem); background:#e6e6e6; position: absolute; top:0; left:0; }
.history_con:after{content:'HISTORY'; display: block; width: 100%; color: #ccc; padding-top: 7rem; font-size: 8rem; font-weight: 800; line-height: 6rem; opacity: 0.3;}
.history_con dl{position: relative;  margin-top:5rem; width: 100%; padding-left: 4rem;}
.history_con dl:first-child{margin-top: 0;}

.history_con dl:before{content: ''; width: 1rem; height: 1rem; background: #fff; border:2px solid  var(--main_color); border-radius: 100%; position: absolute; top: 3.1rem; left:-.5rem; z-index: 1;}
.history_con dl:after{content: ''; width: 3rem; height:1px; background: var(--main_color); position: absolute; top:3.5rem; left: 0; }
.history_con dl dt{ font-weight: bold; font-size:4rem; color:var(--main_color); padding-top:1rem}
.history_con dl dd{padding-top:2rem; position:relative; word-break:break-all}
.history_con dl dd b,
.history_con dl dd span.txt{display:block;}




@media all and (min-width:768px) {


.history_con::before{content: ''; top: 0; left: 50%; transform: translateX(-50%);}
.history_con:after{text-align: center; font-size: 10rem; line-height: 7rem;}
.history_con dl{ width:50%; margin-left: 50%; padding-left: 0;}
.history_con dl:before{ top:4.2rem;}
.history_con dl:after{ top:4.7rem; width: 4rem;}
.history_con dl:nth-child(odd){margin-left: 0; margin-right: 50%;}

.history_con dl:nth-child(odd){padding-right:2rem; text-align:right;  margin-top:5rem;}
.history_con dl:nth-child(odd):before{left:auto;  right:-.5rem}
.history_con dl:nth-child(odd):after{left:auto; right: 0;}
.history_con dl:nth-child(even){padding-left:2rem}


.history_con dl dt{padding-top:2rem}
.history_con dl dd{padding-left:5rem;}
.history_con dl dd b{position:absolute; left:0;}
.history_con dl:nth-child(odd) dd b{left:auto; right:0;}
.history_con dl:nth-child(odd) dd{padding-left:0; padding-right:5rem}


.history_con dl:nth-child(odd){padding-right:7rem;}
.history_con dl:nth-child(even){padding-left:7rem}
}


@media all and (min-width:1280px) {

.history_con::before{ height: calc(100% - 20rem);}
.history_con:after{font-size: 20rem; line-height: 14rem; padding-top: 15rem;}
/*
.history_con dl{margin-top:20rem}*/

.history_con dl:before{ top:5rem;}
.history_con dl:after{ top:5.4rem; }


}


/* 오시는길 */
.map{display: flex; gap:5rem; margin-bottom: 10rem;}
.map_info{flex-basis:30%; display: flex; flex-direction: column; gap:2rem}
.map_info p{margin-bottom: var(--fmb);}
.map_info dl{border-bottom: 1px solid #ccc; padding-bottom: var(--fmb);}
.map_info dl dt{font-weight: bold; font-size:3rem; margin-bottom: 1rem;}
.map_info dl dd{margin-bottom: 2rem;}
.map_info li{display: flex; gap:2rem; align-items: center; padding:1rem 0; }
.map_info li span{display: inline-flex; width:30%; font-weight: bold;}
.map_info li span i{color:var(--main_color); display: inline-block; margin-right: 1rem;}
.map_area{flex-basis:70%}
.section_address {display: none;}
.map_bus{display: flex; gap:3rem; align-items: center; border:1px solid #ccc; padding:2rem}
.map_bus p{display: flex; justify-content: center; align-items: center;  width: 10rem; height: 10rem; background: var(--main_color); border-radius: 100px;}
.map_bus dl{display: flex; gap:3rem}
.map_bus dl dt{font-weight: bold; font-size:2rem}
.map_bus dl dt span{display: block;}
.map_bus dl dd span{color:var(--sub_color); font-weight: bold;}


/* 사업안내 */
.business_wrap{display: flex; flex-wrap: wrap; gap:3rem; margin-right: -3rem; text-align: center;}
.business_list{width: calc(33% - 3rem);}
.business_list p{overflow: hidden; border-radius: 3rem; margin-bottom: 2rem;}
.business_list dl dt{font-weight: bold; font-size:2.4rem}
.business_list dl dt span{display: flex; justify-content: center; align-items: center; width: 4rem; height: 4rem; background: var(--sub_color); border-radius: 100px; color:#fff; margin: auto; font-size:2rem} 

/* 프로그램 */
.program_wrap{display: flex; flex-wrap: wrap; gap:3rem; margin-right:-6rem}
.program_list{width: calc(33% - 3rem); border:1px solid #ccc; border-radius: 3rem; padding:3rem} 
.program_list p{margin: 2rem 0;} 


/* 중독이란? */
.info_top{position: relative; overflow: hidden; border-radius: 3rem; padding:3rem; position: relative;}
.info_top::before{content: ''; width: 30%; height: 30%; background: var(--sub_color); position: absolute; top: 0; right: 0; z-index: -1;}
.info_top dl{position: absolute; bottom: 0; left:0; background: var(--main_color); color:#fff; padding:2rem 10rem; text-align: center;}
.info_top dl dt{font-weight: bold; font-size:3rem;}
.info_top dl dd{font-size:1.6rem}

.flex_list{display:flex; gap:10rem; border-bottom: 3px dashed #ccc; margin-bottom: 3rem; padding:5rem 0}
.flex_tit{width: 20%;}
.flex_con{width:80%}


.info_list{display: flex; gap:10rem; text-align: center;}
.info_list p{overflow: hidden; border-radius: 3rem; margin-bottom: 2rem;}
.info_list dl dt{font-weight: bold; font-size:2.2rem}

/* 알코올 중독 */
.alcohol_list{display: flex; gap:10rem; text-align: center;}
.alcohol_list li{flex:1; position: relative;}
.alcohol_list li::before{content: '▶'; font-weight: bold; font-size: 3rem; position: absolute; top: 0; right: -5rem; color:var(--sub_color)}
.alcohol_list li:last-child::before{display: none;}
.alcohol_list li dl dt{font-weight: bold; font-size:2.6rem; background: var(--main_color); color:#fff; margin-bottom: 2rem; border-radius: 100px;}
.alcohol_list li dl dd span{display: block; font-weight: bold; font-size:2.4rem }
.alcohol_list li dl dd img{display: block; margin: auto;}


/* 도박중독 */
.check_list li{position: relative; padding:0.5rem 0 0.5rem 4rem}
.check_list li::before{content: ''; width: 2.5rem; height: 2.5rem; background: url(../images/info/check_bg.png) no-repeat; background-size: cover; position: absolute; top: 8px; left: 0;}

/* 자가진단 */

.test_info{display: flex; gap:5rem;}
.test_info dl{display:flex; gap:2rem; flex:1}
.test_info dl input{border:1px solid #ccc; padding:1rem}
.test_info dl dt{font-weight: bold;}
.test_table { border-top: 3px solid #000; width: 100%; margin: 0 0 0.5rem 0 }
.test_table th { border-bottom: 1px solid #ccc; color: #000; background: #2d4472; color: #fff; position: relative }
.test_table th::before { content: ''; position: absolute; top: 25%; right: 0; width: 1px; height: 50%; background: #fff }
.test_table th:last-child::before { display: none }
.test_table th, .test_table td { padding: 1rem; }
.test_table td { border-right: 1px solid #ccc; border-bottom: 1px solid #ccc; text-align: center; }
.test_table td:nth-child(2) { text-align: left }
.test_table td:last-child { border-right: none; padding: 0 }
.test_table td ul { display: flex; align-items: center; }
.test_table td ul li { flex: 1; border-right: 1px solid #ccc; padding:.5rem; min-height: 60px }
.test_table td ul li:last-child { border: none }
.test_number { display: none }
.test_table em{font-weight:normal}
.text_3 li:first-child { width: 20%; flex: none }
.test_btn { width: 150px; height: 50px; margin: 0 auto; padding: 3rem 0;  }
.test_btn a { display: block; background: #40699d; color: #fff; line-height: 50px; font-weight: bold; text-align: center;border-radius: 100px;}
.test_btn>input { display: block; background: #40699d; color: #fff; line-height: 50px; font-weight: bold; border: 0px; width: 120px; }
.test_radio { position: relative; padding-left: 35px; cursor: pointer; user-select: none;}
.test_radio input { position: absolute; opacity: 0; cursor: pointer; }
.checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; border-radius: 50%; margin:0 0 1rem 0 }
.test_radio:hover input ~ .checkmark { background-color: #ccc; }
.test_radio input:checked ~ .checkmark { background-color: #40699d; }
.checkmark:after { content: ""; position: absolute; display: none; }
.test_radio input:checked ~ .checkmark:after { display: block; }
.test_radio .checkmark:after { top: 4px; left: 4px; width: 12px; height: 12px; border-radius: 50%; background: white; }
.test_button { border: none; background: #69C; color: #fff; font-weight: bold; text-align: center; padding: 1rem 2rem; margin: 2rem auto; border-radius: 100px; cursor: pointer; }
.drug_box { overflow: hidden; padding: 2rem; border: 10px solid #ccc }

.comm_table { width: 100%; margin: 30px 0; border-top: 5px solid #40699d; border-left: 1px solid #ccc; }
.comm_table th { padding: 15px 20px; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; text-align: center; font-weight: bold; background: #F6F6F6; position: relative; }
.comm_table td { padding: 15px 20px; border-bottom: 1px solid #ccc; border-right: 1px solid #ccc; text-align: center; background: #fff }
.comm_table tr:hover { background: #F0FCFF }

/* 자가진단 결과 */
.test_result { overflow: hidden; text-align: center; }
.test_result dl { overflow: hidden; padding: 2rem 0 }
.test_result dl dt { font-weight: bold; font-size: 4rem; margin: 0 0 4rem 0 }
.test_result dl dt span { display: block; font-weight: normal; color: #365691; font-size:4rem }
.test_result dl dd { display: inline-block; background: #365691; color: #fff; padding: 2rem 4rem; font-size: 3rem }
.test_result ul { display: flex; justify-content: center; border: 1px solid #ccc; padding: 5rem; margin: 5rem 0 }
.test_result ul li { width: 250px; height: 250px; background: #365691; color: #fff; display: flex; flex-direction: column; justify-content: center; border-radius: 100%; font-size: 2.4rem; margin: 2rem }
.test_result ul li p { color: #fff; font-weight: bold; font-size: 3rem }
.test_result ul li:first-child { background: #666 }
.test_result ul li:last-child { background: #5698ab }
.test_result_txt ul li { width: 150px; height: 150px }
.btn_online2 { display: inline-block }
.btn_online2 a { display: block; background: var(--main_color); color: #fff; padding: 2rem 4rem }






/* 체크박스  */
.check { position: relative; padding-left: 35px; margin-bottom: 12px; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; display: inline-block; margin:0 1rem 1rem 0}
.check input { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
.checkmark { position: absolute; top: 0; left: 0; height: 25px; width: 25px; background-color: #eee; }
.check:hover input ~ .checkmark { background-color: #ccc; }
.check input:checked ~ .checkmark { background-color: #40699d; }
.checkmark:after { content: ""; position: absolute; display: none; }
.check input:checked ~ .checkmark:after { display: block; }
.check .checkmark:after { left: 9px; top: 5px; width: 5px; height: 10px; border: solid white; border-width: 0 3px 3px 0; -webkit-transform: rotate(45deg); -ms-transform: rotate(45deg); transform: rotate(45deg); }




/* 상담안내 */
.counsel_list{display: flex; flex-wrap: wrap; gap:3rem; margin-right:-3rem}
.counsel_list li{width: calc(33% - 3rem); background: #fafafa; border-radius: 3rem; padding:3rem; display: flex; gap:2rem; align-items: center;}
.counsel_list li p{display: flex; justify-content: center; align-items: center; width:7rem; height: 7rem; border-radius: 100px; background: var(--main_color);}
.counsel_list li p img{width: 50%;}
.counsel_list li dl dt{font-weight: bold; font-size:2.5rem; margin-bottom:1rem;}



/* 대상자 의뢰 */
.form_table { border-top: 2px solid var(--main_color); margin: 0 }
.form_table i { color: #F00; padding: 0 0.5rem }
.input_full { width: 100%; border: 1px solid #ccc; padding: 0.5rem 1rem; }
.input_3 { width: 31%; border: 1px solid #ccc; padding: 0.5rem 1rem; }
.form_table .radio_inline p { display: inline-block; margin: 0 1rem 0 0 }
.pribacy_box{height:200px; overflow-y:scroll; padding:2rem;  border:1px solid #ccc; margin:0; text-align:left; clear:both; scrollbar-color: #365691 #fafafa; scrollbar-width: thin;}
.pribacy_box p{font-size:0.8rem; color:#666; margin:0 0 0.5rem 0}
.pribacy_tit{overflow:hidden}
.pribacy_tit h4{float:left;}
.pribacy_tit p{float:right; margin-top:1rem}



/* 온라인문의 */
.online_form{display: flex; gap:5rem}
.online_form h3{flex-basis: 30%;  font-size:1.6rem; font-weight: normal; padding:0 0 2rem 0}
.online_form h3 span{display: block; font-weight: bold; color:var(--main_color); font-size: 3rem;}
.online_form h3 p{position: relative;}



/* 라디오버튼 */
.radio_wrap {display: inline-block; position: relative; padding-left: 3rem; margin-right: 1rem; margin-bottom: 1.2rem; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none;}
.radio_wrap input {position: absolute; opacity: 0; cursor: pointer;}
.checkmark {position: absolute; top: 0;left: 0; height: 2rem; width: 2rem; background-color: #eee; border-radius: 50%;}
.radio_wrap:hover input ~ .checkmark {background-color: #ccc;}
.radio_wrap input:checked ~ .checkmark {background-color:var(--sub_color);}
.checkmark:after {content: ""; position: absolute; display: none; }
.radio_wrap input:checked ~ .checkmark:after { display: block;  }
.radio_wrap .checkmark:after { top: 50%; left: 50%; transform: translate(-50%, -50%);  width: 8px;  height: 8px; border-radius: 50%; background: white; }

.form_area{width: 70%;}
.online_form p{padding-top: 2rem;}
.online_form dl{display:flex; align-items: center; padding:3rem 0; border-bottom:1px dotted #ccc}
.online_form dl dt{width:20%; text-align: center;}
.online_form dl dd{width: 80%;}
.form_input{border: 1px solid #ccc; padding:1rem; width:100%; font-size:1.4rem}
.form_text{border: 1px solid #ccc; padding:2rem; width:100%; height: 30rem; overflow-y: auto;  font-size:1.4rem}
#btn_submit{background: var(--sub_color); color:#fff; padding:1rem 2rem}



/* 아코디언 */
.beefup {margin: 1em 0; border: 1px solid #ddd; border-radius: 4px; }
.beefup:hover {border-color: #ccc;}
.beefup:first-child {margin-top: 0;}
.beefup__head, .beefup__body {padding: 2rem;}
.beefup__head {cursor: pointer; position: relative; margin: 0; padding-right: 50px;}
.beefup__head span{display: inline-flex; justify-content: center; align-items: center; width: 5rem; height: 5rem; margin-right: 3rem; border-radius: 100%; background: var(--sub_color); color:#fff; font-family: var(--font-eng);}
button.beefup__head, .beefup__head > button { cursor: pointer; display: block; width: 100%; background: none; border: 0; font: inherit; text-align: inherit;}
button.beefup__head[aria-disabled], .beefup__head > button[aria-disabled] {cursor: default; outline: 0; }
.beefup__head > button{position: relative; z-index: 1; margin: -10px -50px -10px -20px; padding: inherit; width: calc(100% + 70px); background: inherit; border: inherit;}
.beefup__head::after {transition: transform 0.2s ease-out; content: ""; transform: translate(0, -50%) rotate(45deg); position: absolute; top: 50%; right: 20px; z-index: 0; margin-top: -2px; padding: 3px; border-width: 0 2px 2px 0; border-style: solid; color: #ccc;}
.beefup.is-open > .beefup__head::after {transform: translate(0, -50%) rotate(225deg); margin-top: 2px;}
.mockup{background: #fafafa; padding:2rem}