@import url('//fonts.googleapis.com/earlyaccess/jejumyeongjo.css'); /* 제주명조 */
@import url('https://cdn.rawgit.com/moonspam/NanumSquare/master/nanumsquare.css'); /* 나눔스퀘어 */
/* 카운트 숫자 */
@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@500&display=swap');
/* 에스코어드림 */
@font-face {
     font-family: 'S-CoreDream-4Regular';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-4Regular.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
@font-face {
    font-family: 'S-CoreDream-5Medium';
    src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-5Medium.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}
@font-face {
     font-family: 'S-CoreDream-7ExtraBold';
     src: url('https://cdn.jsdelivr.net/gh/projectnoonnu/noonfonts_six@1.2/S-CoreDream-7ExtraBold.woff') format('woff');
     font-weight: normal;
     font-style: normal;
}
/* 나눔 손글씨 안쌍체 */
@font-face {
     font-family: 'NanumAnSsangCe';
     src: url('../../fonts/NanumAnSsangCe.woff') format('woff');
}

/* 제주 명조 */
.jejumyeongjo { font-family: 'Jeju Myeongjo', serif; }

/*** common ***/
html, body, div, span, applet, object, iframe, table, caption, tbody, tfoot, thead, tr, th, td, 
del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, 
h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, 
dl, dt, dd, ol, ul, li, fieldset, form, label, legend {margin:0; padding:0; word-break: keep-all; box-sizing: border-box;}
i{ font-style: normal; }
ul{list-style:none;}
ol{list-style-position:inside;}
img, fieldset{border:none; vertical-align:middle;max-width: 100%;}
a {color:#000;text-decoration:none;}
a:hover {text-decoration:none;}
a:active {text-decoration:none;}
em{font-style:normal;}
caption, legend, .labelx{left:-9999px; font-size:0; position:absolute; display:none;}
table{width:100%;border-collapse:collapse;table-layout:fixed;}
/* common custom */
.colKey{ color: #FFEFC0; }
.wap_victim{ width: 100%; height: 100%; background-color: #fff; overflow: hidden; font-family: 'NanumSquare'; }
.vtSec{ overflow: hidden; position: relative; z-index: 2; width: 100%; padding: 70px 0; }
.vtSec .inner{ width: 100%; margin: auto; padding: 0 20px; box-sizing: border-box; }
strong{ font-weight: inherit; }
.blind{ position: absolute; font-size: 0; text-indent: -9999px; } 

/* 우측 퀵  스타일 */ 
.B{ z-index: 999; }

/* 우측 victim  퀵 */
.vtQuick{ position: fixed; bottom: 15px; left: 0; z-index: 99; width: 100%; text-align: center; }
.vtQuick a{ overflow: hidden; display: inline-block; max-width: 90%;  margin: auto; }
/* .vtQuick a .imgBox{ overflow: hidden; display: flex; align-items: flex-end; position: relative; z-index: 2; width: 100%; height: 90px; border-radius: 10px 10px 0 0; }
.vtQuick a .imgBox .bg{ position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: url('../../img/victim/vtQuick.jpg') no-repeat center / cover; transition: all 0.2s; }
.vtQuick a .imgBox .imgTxt{ width: 100%; padding: 5px 0; font-family: 'S-CoreDream-5Medium'; font-size: 12px; color: #fff; text-align: center; line-height: 1; }
.vtQuick a .txt{ padding: 5px 0 3px; font-family: 'S-CoreDream-4Regular'; font-size: 12px; font-weight: 400; color: #fff; text-align: center; } 
.vtQuick a:hover .bg{ transform: scale(1.05); }
.vtQuick a:hover .imgTxt{ color: #8FC11F; } */


/* 공통 텍스트 박스 */
.txtBoxTp1{}
.txtBoxTp1 .txt1{ font-family: 'Jeju Myeongjo', serif; font-size: 30px; font-weight: 500; color: #fff; line-height: 1.3; letter-spacing: -1px; }
.txtBoxTp1 .txt2{ font-size: 16px; font-weight: 400; color: #fff; line-height: 1.4; }
.txtBoxTp1 .txt2 strong{ font-size: 20px; font-weight: 600;  }
.txtBoxTp1 p + p{ margin-top: 20px; } 

/* vtSec1 */
.vtSec1{ height: 400px; }
.vtSec1 .bg{ position: absolute; top: 0; left: 0; z-index: -1; width: 101%; height: 101%; background: url('../../img/victim/vtSec1_bg.jpg') no-repeat 15% / cover; animation: vtSecBgAni 3s both; }
.vtSec1 .inner{ height: 100%; }
.vtSec1 .txtBox{ display: flex; flex-direction: column; justify-content: center; height: 100%; padding-right: 60px; }
.vtSec1 .tit{ margin-bottom: 20px; font-family: 'Jeju Myeongjo', serif; font-size: 40px; font-weight: 400; letter-spacing: -2px; line-height: 1.2; }
.vtSec1 .tit strong{ font-size: 45px; color: #fff; } 
.vtSec1 .tit i{ display: inline-block; opacity: 0; letter-spacing: -12px; animation: vtSecIAni 1s both; }
.vtSec1 .tit i:nth-child(3){ animation-delay: 0s; }
.vtSec1 .tit i:nth-child(4){ animation-delay: 0.2s; }
.vtSec1 .tit i:nth-child(5){ animation-delay: 0.4s; }
.vtSec1 .tit i:nth-child(6){ animation-delay: 0.6s; }
.vtSec1 .tit i:nth-child(7){ animation-delay: 0.8s; }
.vtSec1 .tit i:nth-child(8){ animation-delay: 1.0s; }
.vtSec1 .tit i:nth-child(9){ animation-delay: 1.2s; }
.vtSec1 .tit i:nth-child(10){ animation-delay: 1.4s; }
.vtSec1 .tit i:nth-child(11){ animation-delay: 1.6s; }
.vtSec1 .txt{ font-size: 18px; font-weight: 300; color: #fff; transition: all 2s; animation: vtSecTxtAni 1s 2s infinite alternate linear; }
@keyframes vtSecBgAni{
    0%{ transform: scale(1.1); }
    100%{ transform: scale(1.0); }
}
@keyframes vtSecIAni{
    0%{ opacity: 0; }
    100%{ opacity: 1; }
}
@keyframes vtSecTxtAni{
    0%{ opacity: 0.4; }
    100%{ opacity: 1; }
}


/* vtSec2 */
.vtSec2{ padding-top: 0; background: #4c4c47; }
/* .vtSec2{ height: 500px; }
.vtSec2 .bg{ position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: url('../../img/victim/vtSec2_bg.jpg') no-repeat 45% / cover; } */
.vtSec2 .inner{ display: flex; align-items: center; height: 100%; margin-top: 50px; }  

/* vtSec3 */
.vtSec3{ padding: 40px 0; background: #3B3B35; }
.vtSec3 .txt{ font-family: 'Jeju Myeongjo', serif; font-size: 24px; font-weight: 300; color: #fff; text-align: center; line-height: 1.3; }

/* vtSec4 */
.vtSec4{ background: #DBD6D3; }
.vtSec4 .bg{ position: absolute; top: 0; left: 0; width: 101%; height: 101%; opacity: 0.3; background: url('../../img/victim/vtSec4_bg.jpg') no-repeat 35% / cover; }
.vtSec4 .inner{ }   
.vtSec4 .txtBox{ }
.vtSec4 .txt1{ font-size: 24px; font-weight: 800; color: #54574A; line-height: 1.2; }
.vtSec4 .txt2{ font-size: 16px; font-weight: 400; color: #1A1A1A; line-height: 1.4; letter-spacing: -1px; }
.vtSec4 .txt2 strong{ font-size: 20px; font-weight: 800;  }
.vtSec4 p + p{ margin-top: 32px; } 
.vtSec4 .imgBox{ width: calc(100% + 40px); margin-left: -20px; }
.vtSec4 .imgBox img{ width: 100%; }

/* vtSec5 */
.vtSec5{ padding-top: 100px;}
.vtSec5 .bg{ position: absolute; top: 0; right: 0; width: 100%; height: 100%; z-index: -1; background: url('../../img/victim/vtSec5_bg.jpg') no-repeat 80% / cover; }
.vtSec5 .inner{ display: flex; flex-direction: column; justify-content: flex-end; height: 100%; }
.vtSec5 .wrap{ width: auto; }
.vtSec5 .wrap1{ padding: 30px 0; }
.vtSec5 .wrap1 .txtBox{ text-align: center; }
.vtSec5 .wrap1 .txtBox + .txtBox{ margin-top: 50px; }
.vtSec5 .wrap1 .txtBox .tit{ display: inline-block; position: relative; margin-bottom: 30px; font-size: 24px; font-weight: 600; color: #545451; }
.vtSec5 .wrap1 .txtBox .tit span{ display: inline-block; position: relative; }
.vtSec5 .wrap1 .txtBox .tit span::after{ content: ''; position: absolute; top: 0; left: 0; z-index: -1; width: 0%; height: 100%; background: #fff; transition: all 1s; }
.vtSec5 .wrap1 .txtBox .tit.aos-animate span::after{ width: 100%; }
.vtSec5 .wrap1 .txtBox .txt{ display: inline-block; font-size: 16px; font-weight: 400; color: #fff; line-height: 1.5; text-align: left; }
.vtSec5 .dotBox{ margin: 50px 0; text-align: center; }
.vtSec5 .dotBox .dot{ display: block; width: 5px; height: 5px; margin: 0 auto 18px; background: #fff; border-radius: 50%; }
.vtSec5 .dotBox .arrw{ display: block; width: 17px; height: 15px; margin: 0 auto; background: url('../../img/victim/vtSec5_arw.png') no-repeat center; }
.vtSec5 .wrap2{ margin-bottom: 20px; }
.vtSec5 .graphBox{ padding: 40px 15px; background: rgba(0,0,0,0.3); }
.vtSec5 .graphTit{ font-family: 'S-CoreDream-4Regular'; margin-bottom: 30px; font-size: 18px; font-weight: 500; color: #fff; text-align: center; }
.vtSec5 .graphTit .infoTxt{ display: block; margin-top: 5px; opacity: 0.5 font-family: inherit; font-size: 12px; color: #CACACA; text-align: center; }
.vtSec5 .graphItem1{ margin-bottom: 30px; }
.vtSec5 .graphItem1 .graph{ display: inline-block; position: relative; }
.vtSec5 .graphItem1 .graphLine{ display: flex; justify-content: space-around; align-items: flex-end; position: absolute; top: 0; right: 0; width: calc(88%); height: calc(83%); } 
.vtSec5 .graphItem1 .graphLine .path{ position: relative; width: 25px; height: 0; background: #B1B1B1; }
.vtSec5 .graphItem1 .graphLine .path4{ background: #FFB206;  }
.vtSec5 .graphItem1 .graphLine .path4 .num{ position: absolute; top: -30px; left: 50%; transform: translateX(-50%); opacity: 0; font-family: 'S-CoreDream-4Regular'; font-size: 14px; font-weight: 800; color: #FFB206; }
.vtSec5 .wrap2.aos-animate .graphItem1 .graphLine .path1{ height: 20%; transition: all 0.5s 0.3s; }
.vtSec5 .wrap2.aos-animate .graphItem1 .graphLine .path2{ height: 70%; transition: all 0.5s 0.6s; }
.vtSec5 .wrap2.aos-animate .graphItem1 .graphLine .path3{ height: 78%; transition: all 0.5s 0.9s; }
.vtSec5 .wrap2.aos-animate .graphItem1 .graphLine .path4{ height: 96%; transition: all 0.5s 1.2s; }
.vtSec5 .wrap2.aos-animate .graphItem1 .graphLine .path4 .num{ opacity: 1; transition: all 1s 1.7s; }
.vtSec5 .graphItem2{ text-align: center; }
.vtSec5 .graphItem2 .graph{ opacity: 0; display: inline-block; position: relative; transition: all 0.3s 0.5s; }
.vtSec5 .graphItem2 figure { display: block; height: 0; margin: 0 auto; position: relative; font-size: 16px; width: 210px; padding-bottom: 210px; }
.vtSec5 .graphItem2 svg { display: block; height: 100%; width: 100%; position: absolute; top: 0;  left: 0; overflow: visible; }
.vtSec5 .graphItem2 circle { fill:rgba(0,0,0,0); stroke-width:31.8309886184; stroke-dasharray: 0,0,0,100; stroke-dashoffset: 25; }
.vtSec5 .graphItem2 .pie1 { stroke: #B1B1B1;  }
.vtSec5 .graphItem2 .pie2 { stroke: #FFB206; transform: translateX(-2px); }
.vtSec5 .graphItem2 .graphTxt{ position: absolute; top: 50%; left: 12px; transform: translateY(-50%) scale(0); opacity: 0; font-family: 'S-CoreDream-4Regular'; font-size: 17px; font-weight: 400; color: #383A31; text-align: center; }
.vtSec5 .graphItem2 .graphTxt strong{ display: block; font-weight: 800; }
.vtSec5 .wrap2.aos-animate .graphItem2 .graph{ opacity: 1; }
.vtSec5 .wrap2.aos-animate .graphItem2 circle{ -webkit-animation: pie1 2s 0.5s ease both; animation: pie1 2s 0.5s ease both; }
.vtSec5 .wrap2.aos-animate .graphItem2 .pie2{ -webkit-animation-name: pie2; animation-name: pie2; }
.vtSec5 .wrap2.aos-animate .graphTxt{ opacity: 1; transform: translateY(-50%) scale(1); transition: all 1s 1.2s; }
.vtSec5 .sideTxt{ margin-top: 10px; opacity: 0.5; font-size: 14px; font-weight: 400; color: #fff; text-align: right; }
@keyframes pie1 { 50%,100% { stroke-dasharray: 50,48,0,0; } }
@keyframes pie2 { 50%,100% { stroke-dasharray: 0,50,48,30; } }

/* vtSec6 */
.vtSec6{ padding: 150px 0; }
.vtSec6 .bg{ position: absolute; top: 0; left: 0; z-index: -1; width: 101%; height: 101%; background: url('../../img/victim/vtSec6_bg.jpg') no-repeat center / cover; }
.vtSec6 .inner{ display: flex; align-items: center; height: 100%; }  

/* vtSec7 */
.vtSec7{ padding: 0 0 80px; background: #444; }
/* .vtSec7 .bg{ position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: url('../../img/victim/vtSec7_bg.jpg') no-repeat 10% / 1200px; } */
.vtSec7 .inner{ display: flex; align-items: center; justify-content: flex-end; height: 100%; margin-top: 50px; }  

/* vtSec8 */
.vtSec8{ padding: 0 0 80px 0; background: #444; }
/* .vtSec8 .bg{ position: absolute; top: 0; left: 0; z-index: -1; width: 100%; height: 100%; background: url('../../img/victim/vtSec8_bg.jpg') no-repeat 50% / 1200px; } */
.vtSec8 .inner{ display: flex; align-items: center; height: 100%; margin-top: 50px; }   

/* vtSec9 */
.vtSec9{ padding: 70px 0; }
.vtSec9 .bg{ position: absolute; top: 0; left: 0; z-index: -1; width: 101%; height: 101%; background: url('../../img/victim/vtSec9_bg.jpg') no-repeat center / cover; }
.vtSec9 .txtBox{ text-align: center; }  
.vtSec9 .txt{ font-family: 'NanumAnSsangCe'; font-size: 26px; font-weight: 400; color: #333; line-height: 1.4; }
.vtSec9 .txt span{ display: block; }


/* vtSec10 */
.vtSec10{ text-align: center; background: #F1E9DA; }
.vtSec10 .tit{ margin-bottom: 60px; font-size: 24px; font-weight: 800; color : #54574A; letter-spacing: -1px; }
.vtSec10 .tit strong{ color: #728A00; }
.vtSec10 .listBox ul{ display: flex; flex-direction: column; justify-content: space-between; }
.vtSec10 .listBox li{ width: 100%; max-width: 340px; margin-bottom: 20px; padding: 30px 15px 15px; background: #fff; }
.vtSec10 .listBox li .liTit{ position: relative; margin: 0px 0 20px; padding: 0 0 10px; font-size: 18px; font-weight: 800; color: #54574A; }
.vtSec10 .listBox li .liTit::after{ content: ''; position: absolute; bottom: 0; left: calc(50% - 20px); width: 0; height: 3px; background: #54574A; transition: all 1s; }
.vtSec10 .listBox li .liTxt{ margin-bottom: 20px; font-size: 16px; font-weight: 400; color: #808080; line-height: 1.4; letter-spacing: -1px;}
.vtSec10 .listBox li.aos-animate .liTit::after{ width: 40px; }

/* vtSec11 */
.vtSec11{ text-align: center; background: #728A00; letter-spacing: -1px; }
.vtSec11 .tit{ margin-bottom: 20px; font-family: 'Jeju Myeongjo', serif; font-size: 24px; font-weight: 400; color: #fff; line-height: 1.3; }
/* .vtSec11 .btn{ display: block; width: 820px; max-width: 100%; margin: auto; padding: 10px; background: #1A1A1A; border-radius: 50px; font-family: 'S-CoreDream-7ExtraBold'; font-size: 24px; font-weight: 800; color: #FFEFC0; transform: scale(1); transform-origin: 50% 50%;  animation: heartbeat 2s ease 0s infinite normal; }
.vtSec11 .btn:hover{ background: #3a4600; box-shadow: 0 10px 20px rgba(0,0,0,0.1); transform: scale(1.02); animation: none; transition: all 0.3s; } */
.vtSec11 .countBox{ margin-top: 40px; }
.vtSec11 .countTit{ margin-bottom: 10px; font-size: 20px; font-weight: 600; color: #fff; }
.vtSec11 .countNum{  }
.vtSec11 .countUp{ display: inline-block; }
.vtSec11 .countUp .digit{ margin: 0 -5px !important; }
/* .vtSec11 .countUp{ display: inline-block; min-width: 180px; height: 70px; background: url('../../img/victim/vtSec11_countBg.jpg') repeat-x left / contain; border-radius: 5px; font-family: 'Oswald', sans-serif; font-size: 50px; color: #fff; line-height: 70px; letter-spacing: 20px; text-align: right; }
.vtSec11 .countUp span{ display: inline-block; transform: translateX(7px); } */
.vtSec11 .countTxt{ display: inline-block; vertical-align: bottom; margin-left: 5px; font-size: 16px; font-weight: 800; color: #fff; }
/* @keyframes heartbeat {
    0% { transform: scale(1); }
    14% { transform: scale(1.02); }
    28% { transform: scale(1); }
    42% { transform: scale(1.02); }
    70% { transform: scale(1); }
} */
.vtSec11 .btnBox{ display: inline-block; margin-top: 40px; }
.vtSec11 .btnBox .btn{ display: inline-block; width: 280px; margin-top: 10px; padding: 10px; border: 4px solid #FFEEBF; border-radius: 15px; font-family: 'S-CoreDream-7ExtraBold'; font-size: 20px; font-weight: 500; letter-spacing: -1.5px; line-height: 1.1; transition: all 0.2s; }
.vtSec11 .btnBox .btnSpt1{ background: #FFEEBF; color: #728900; }
.vtSec11 .btnBox .btnSpt2{ background: #55600A; color: #ffeebf; }

/* vtSec12 */
.vtSec12{ padding: 20px 0; background: #fff; text-align: center; }
.vtSec12 .txt{ font-size: 14px; font-weight: 400; color: #808080; line-height: 1.5; }
.vtSec12 .txt span{ display: block; margin-bottom: 5px; }