@charset "utf-8";@import "./reset.css";@import "./font.css";html,
body { width: 100%; height: 100%; min-width: 290px; color: #fff; font-family: "scdream3","NanumSquare"; font-size: 14px; font-weight: normal; line-height: 20px; word-break: keep-all; } 

.wrap.statistics { text-align: center; height: 100%; background: rgb(20, 180, 138); background-image: url("../images/content/bg.png"),
 linear-gradient(
 0deg,
 rgba(20, 180, 138, 1) 0%,
 rgba(70, 181, 152, 1) 35%,
 rgba(96, 205, 199, 1) 100%
 ); background-size: contain; } 

.content { max-width: 1440px; margin: 0 auto; } 
.statistics_h1 { font-size: 28px; font-weight: 500; display: flex; align-items: center; justify-content: center; padding-top: 40px; } 
.statistics_h1 img { margin-right: 10px; width: 35px; } 
.statistics_h1 h1 {text-shadow: 2px 2px 2px rgb(0 0 0 / 50%);font-weight: bold;font-size: 40px; letter-spacing: 5px;} 
.content_statistics { display: flex; margin-top: 40px; } 
.content_left { display: flex; flex-direction: column; width: 50%; } 
.round_box {position: relative; display: flex;width: 90%;align-items: flex-start;box-sizing: content-box;padding: 20px;background-color: #167073;border-radius: 100px;margin-top: 15px;flex-direction: column;box-sizing: border-box;height: calc((100% - 45px)/4);justify-content: center;} 
.round_box:nth-child(odd){padding-left: 150px;}
.round_box:nth-child(even){padding-right: 100px; padding-left: 70px;}
.round_box:first-child { margin-top:0;}
.round_box:nth-child(1)::before{content: " "; background:url(../images/content/chatbot_ico01.png) no-repeat; display: inline-block; width: 107px; height: 85px; position: absolute; left: 35px;}
.round_box:nth-child(2)::after{content: " "; background: url(../images/content/chatbot_ico02.png) no-repeat; display: inline-block; width: 95px; height: 91px; position: absolute; right: 9px; bottom: -8px;}
.round_box:nth-child(3)::before{content: " "; background: url(../images/content/chatbot_ico03.png) no-repeat; display: inline-block; width: 93px; height: 93px; position: absolute; left: 35px;}
.round_box:nth-child(4)::after{content: " "; background: url(../images/content/chatbot_ico04.png) no-repeat; display: inline-block; width: 107px; height: 90px; position: absolute; right: 32px; bottom:5px;}

.round_tit {display: flex;/* width: 115px; *//* height: 115px; *//* border-radius: 100%; *//* background-color: #fff; *//* padding: 10px; *//* margin: 0 10px; *//* color: #167073; */font-size: 24px;font-weight: 700;line-height: 24px;align-items: flex-start;justify-content: flex-start; margin-bottom:15px;} 
.round_txt {/* width: calc(100% - 170px); */margin-right: 20px;text-align: left;font-size: 17px; word-spacing: 1px; line-height: 24px;} 
.round_txt span { font-family: "Noto Sans KR", sans-serif; font-weight: 300; font-size: 11px; display: block; line-height: 18px; } 
.round_tit span br {display: inline-block; content:''; padding: 0 2px;}
.round_txt a { color: #fff; font-weight: 700; } 

.content_right { display: flex; width: 50%; position:relative; flex-direction:column; } 
.status_box {display: flex;flex-wrap: wrap;justify-content: space-between;width: 100%;height: 710px;border-radius: 0 0 10px 10px; padding: 30px;background-color: rgba(255, 255, 255, 1);box-sizing: border-box;overflow-y: scroll;} 
.content_right h1 {display: flex;width: 100%;height:60px;font-size: 24px;font-family: scdream6;color: #000;background:#fff;border-radius:10px 10px 0 0;align-items: center;justify-content: center;position: relative;} 
.content_right h1::after {content:'';display:block;width:100%;height:1px;background: linear-gradient(to left, #ddd 20%, #777 50%, #ddd 80%);position:absolute;left:0;bottom:0;}


.image_box {position: relative;width: calc((100% - 30px)/2);height: 445px;border: 1px solid #ddd;background-color: rgba(255, 255, 255, 0.7);box-sizing: border-box;color: #000;margin-bottom:30px;padding: 20px;} 

.image_box img { width: 100%; border: 1px solid #d6d6d6;margin-bottom: 15px;} 

.image_box div button img{border: none; margin-bottom: 0;}

.image_box:hover,.image_box:active{box-shadow: 0px 0px 10px #a7a7a7; z-index: 0; transition: 0.5s;}

.txt_box {font-family: "Noto Sans KR", sans-serif;clear: both;/* margin: 0 10px; */text-align: left;} 
.txt_box h4 {font-family: "scdream6";/* font-weight: 500; */font-size: 16px;} 
.txt_box span { font-family: "Noto Sans KR", sans-serif; font-size: 12px; color: #777;} 
.txt_box p::before { content: " "; background-image: url("../images/content/ico_02.png"); background-repeat: no-repeat; display: inline-block; width: 10px; height: 11px; margin-right: 3px; } 
.tit_box { margin-bottom: 10px; } 
.txt_ul .sm_txt { font-family: "Noto Sans KR", sans-serif; font-size: 12px; } 
.txt_ul li { margin-bottom: 5px; padding-left: 15px; text-indent: -15px;} 
.txt_box strong {font-weight:bold;}
.txt_ul li:first-child::before { content: " "; background-image: url("../images/content/ico_02.png"); background-repeat: no-repeat; display: inline-block; width: 10px; height: 11px; margin-right: 3px; } 

.btn_box{font-family: "scdream6"; position: absolute; bottom: 0; border-top: 1px solid #ddd; padding: 10px 0; width: 85%; clear: both; left: 50%; transform: translateX(-50%);}
.btn_box a{float: left; cursor: pointer;}
.btn_box button{float: right; font-family: "scdream6";}
.btn_box img{border: none; margin-bottom: 0; vertical-align: sub; margin-right: 5px; width: initial;}
.image_box button {background-color: #fff;border-radius: 30px; font-weight: bold;} 
.image_box .status_btn::before { content: url("../images/content/ico_01.png"); vertical-align: sub; margin-right: 5px; width: 18px; height: 18px; display: inline-block; } 
.image_box:nth-last-child(1),.image_box:nth-last-child(2){margin-bottom: 0;}

.image_box01{cursor: pointer;display: block;} 

/* 아래의 모든 코드는 영역::코드로 사용 */
.status_box::-webkit-scrollbar { width: 14px; /* 스크롤바의 너비 */}

.status_box::-webkit-scrollbar-thumb { height: 50%; /* 스크롤바의 길이 */
 background: #666; /* 스크롤바의 색상 */
 border: 4px solid transparent; border-radius: 10px; background-clip: padding-box; } 

.status_box::-webkit-scrollbar-track { background: rgba(255, 255, 255, 0); /*스크롤바 뒷 배경 색상*/}

/* 유의사항 팝업 */
.precautions_popup { position: fixed; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.5); visibility: hidden; -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s; -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s; transition: opacity 0.3s 0s, visibility 0s 0.3s; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; z-index: 2;} 

.precautions_top { background-color: #14b48a; border-radius: 5px 5px 0 0; padding: 15px; font-family: "scdream5"; font-size: 18px; text-align: center; color: #fff; } 
.precautions_top span { font-size: 12px; } 
.precautions_close { position: absolute; top: 15px; right: 20px; width: 15px; height: 15px; text-indent: -1000px; } 
.precautions_close span { overflow: hidden; display: block; width: 100%; height: 100%; background-image: url(../images/content/close_btn.png); background-repeat: no-repeat; background-position: center center; background-size: auto; -webkit-transform: rotate(0deg); transform: rotate(0deg); -webkit-transition: transform 0.3s ease; transition: transform 0.3s ease; } 
.precautions_close span:hover,
.precautions_close span:focus { -webkit-transform: rotate(180deg); transform: rotate(180deg); } 

.precautions_top::before { content: " "; background-image: url("../images/content/popup_ico01.png"); width: 37px; height: 30px; display: inline-block; } 
.precautions_top h2 { display: inline-block; } 
.precautions_top h2 span { display: block; } 

.precautions_mid { font-family: "Noto Sans KR", sans-serif; padding: 15px 30px; overflow-y: scroll; height: 400px; text-align: left;} 
.precautions_mid div { margin-top: 10px; } 
.precautions_mid span { display: block; text-indent: -1em; margin-left: 1em; } 
.precautions_mid h4:before { content: " "; display: inline-block; vertical-align: middle; width: 20px; height: 20px; background-image: url("../images/content/pop_ico.png"); background-repeat: no-repeat; } 

.precautions_mid ul li,
.precautions_mid p { text-indent: -1em; margin-left: 2em; } 
.precautions_mid ul li::before,
.precautions_mid p::before { content: " "; display: inline-block; vertical-align: middle; width: 8px; height: 8px; background-image: url("../images/content/pop_ico02.png"); background-repeat: no-repeat; margin-right: 5px; } 

/* 상세정보 스크롤바 */
.precautions_mid::-webkit-scrollbar { width: 10px; } 
.precautions_mid::-webkit-scrollbar-thumb { background-color: #ccc; border-radius: 10px; background-clip: padding-box; width: 3px; border: 3px solid transparent; } 
.precautions_mid::-webkit-scrollbar-track { background-color: rgba(255, 255, 255, 0.3); border-radius: 10px; margin: 0; } 

.precautions_popbox { position: relative; width: 50%; min-width: 280px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); transition-duration: 0.3s; color: #000; background-color: #fff; border-radius: 5px; } 
.precautions_popup { opacity: 0; } 
.precautions_popup.is-visible {opacity: 1; visibility: visible; transition: opacity 0.3s 0s, visibility 0s 0s; z-index: 9;} 

/* 다운로드 팝업 */
.download_popup{position: fixed; left: 0; top: 0; height: 100%; width: 100%; background-color: rgba(0, 0, 0, 0.5); visibility: hidden; -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s; -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s; transition: opacity 0.3s 0s, visibility 0s 0.3s; display: flex; flex-wrap: wrap; justify-content: center; align-items: center;}
.download_popbox { position: relative; width: 25%; min-width: 280px; box-shadow: 0 0 20px rgba(0, 0, 0, 0.2); transition-duration: 0.3s; color: #000; background-color: #fff; border-radius: 5px; } 
.download_popup { opacity: 0; } 
.download_popup.is-visible01 {opacity: 1; visibility: visible; transition: opacity 0.3s 0s, visibility 0s 0s; z-index: 9;}
.precautions_mid.download{height: 130px; text-align: center; padding: 15px;}
.precautions_mid.download p{margin-top: 15px;}
.precautions_mid.download button{width: 150px; padding: 10px; border-radius: 5px; background-color: #167073; color: #fff; margin-top: 30px;}
.download_popup .precautions_top::before{vertical-align: sub;}
.excel_download::before{content: " "; background: url("../images/content/download.png"); width: 20px; height: 20px; display: inline-block; margin-right: 5px; vertical-align: middle;}

@media screen and (max-width: 1919px){
 .wrap.statistics {height: initial;min-height: 100%;}
 .download_popbox{width: 30%;}
 .precautions_mid.download p{text-indent: 0;margin-left: 0;}
 }

@media screen and (max-width: 1440px){
 .content_statistics { margin: 20px 50px; } 
 .status_box { margin-bottom: 50px; } 
 .statistics_h1 { font-size: 24px; } 
 .statistics_h1 img { width: 30px; }
 .image_box{height: 440px;}
 .round_box{height: calc((100% - 75px)/4); padding: 30px;}
}

@media all and (max-width: 1400px){
 .content_statistics { flex-direction: column; } 
 .content_left { width: 100%; margin-top: 20px; } 
 .round_box { width: 75%; margin: 10px auto; } 
 .cotent_right { margin: 20px auto; }
 .download_popbox{width: 50%;}
 .content_right{margin: 30px auto 0; width: 70%;}
 }

@media all and (max-width: 768px){
 .round_box { width: 85%; } 
 .status_box { width: initial; max-width: 580px; padding: 30px 10px; justify-content: center;} 
 .image_box { width: 320px; } 
 .precautions_popbox { width: 80%; }
 .precautions_mid.download p{margin-top: 10px;}
 .precautions_top::before{content: none;}
 .round_tit{font-size: 20px;}
 
 }
@media all and (max-width: 700px){
 .statistics_h1 h1{font-size: 24px;}
 .round_box { flex-direction: column; border-radius: 5px; width: 95%;} 
 .round_txt { width: 100%; text-align: center; margin-right: 0; margin-top: 10px; font-size: 14px;} 
 .precautions_top { font-size: 14px; } 
 .precautions_top::before { content: none; } 
 .precautions_close { top: 10px; right: 15px; } 
 .precautions_popbox { width: 100%; margin-top: 10em; } 
 .content_right{width: 95%;}
 .round_box:nth-child(even){padding-top: 20px; padding-left: 20px; padding-right: 70px;}
 .round_tit{margin: 0 auto; font-size: 18px;}
 .round_box:nth-child(1)::before{left: 20px; top: 45px; width: 90px; height: 67px; background-size: 80%;}
 .round_box:nth-child(2)::after{right: -40px; width: 90px; height: 67px; background-size: 80%;} 
 .round_box:nth-child(3)::before{left: 20px; width: 82px; height: 73px; background-size: 80%;}
 .round_box:nth-child(4)::after{bottom: -15px; right: -30px; width: 90px; height: 62px; background-size: 80%;}
 .round_box:nth-child(odd){padding-left: 100px;}
 .image_box { height: 455px; } 
 }
@media all and (max-width: 440px){
 .content_statistics { margin: 15px; }
 .round_box:nth-child(2)::after{right: -22px; bottom: -4px;}
 .round_box:nth-child(4)::after{right: -22px; bottom: -6px;}
 .content_right h1{font-size:20px;}

 }
@media all and (max-width: 320px){
 .round_box{width: 95%;} 
 .status_box {overflow-x: hidden;}
 .content_right { width: 95%; }
 .round_box:nth-child(1)::before{top:10px; left: 15px; width: 45px; height: 33px;}
 .round_box:nth-child(2)::after{width: 45px; height: 35px; right: -6px;} 
 .round_box:nth-child(3)::before{width: 40px; height: 33px; left: 3px; bottom: -4px;}
 .round_box:nth-child(4)::after{width: 45px; height: 30px; right: -3px;}
 .round_box:nth-child(odd){padding: 10px 20px;}
 .round_box:nth-child(even){padding: 10px 20px;}
 .round_tit{font-size: 16px;}
 }
 @media all and (max-width: 290px){
    .image_box{height: 480px;}
    .round_box:nth-child(1)::before{left: 7px;}
 }
 .hidden{overflow:hidden; position:absolute; top:0; left:-30000px; line-height:1px; font-size:1px;}
 
.root {display:inline-block;position:relative;text-indent: 0 !important; margin-left:10px} 
.root::before { content:'√'; position:absolute; left:-8px}
.root:after {content:'';display:block;width:100%;height:1px;background:#3d3d3d;position:absolute;top: 3px;}