/*공통*/
.con_wrap {overflow: hidden; background: url('../img/sub_wrap_bg.png'); width: 100%; padding: 50px 0;}
.con_1280 {width: 100%; margin: 0 auto;}
.c_title {width: 100%;}
.c_title h2 { font-family: 'Raleway',sans-serif; font-weight: 600; font-size: 16px; color:#857874; margin-bottom: 10px; text-transform: uppercase; word-break: keep-all;}
.c_title h3 { font-weight: 500; font-size: 16px; color:#f4ac96; margin-bottom: 10px; word-break: keep-all;}
.c_title h1 { font-family: 'NanumSquare',sans-serif; font-weight: 500; font-size: 36px; color:#000; margin-bottom: 10px; word-break: keep-all;}
.c_title p {  font-weight: 300; font-size: 16px; color:#888787; line-height: 26px; word-break: keep-all;}
.c_line { width: 207px; height: 9px; display: flex; flex-direction: row; justify-content: space-between; align-items: center; margin: 20px auto 0 auto; }
.c_line span {width: 9px; height: 9px; background: #857874; display: block;}
.c_line::before {width: 83px; height: 1px; background:#857874; display: block; content: ""}
.c_line::after {width: 83px; height: 1px; background:#857874; display: block; content: ""}

.s_tab_btn {width: 100%; margin: 0 auto; margin-bottom: 50px;}
.s_tab_btn ul {width: 100%; display: flex; flex-direction: row; justify-content: center;}
.s_tab_btn ul li { width: 32%; margin-right: 2%;}
.s_tab_btn ul li:last-child {margin-right: 0}
.s_tab_btn ul li a { width: 100%; height: 50px; border-radius: 3px; border: 1px solid rgba(133,120,116,0.2); background: rgba(133,120,116,0.05); color:#857874; display: block; cursor: pointer; font-size: 15px; text-align: center; line-height: 50px;}
.s_tab_btn ul li a.active {background: #857874; border: 1px solid #857874; color:#fff;}

.top_tab_btn {width: 100%; margin: 0 auto; margin-bottom: 50px;}
.top_tab_btn ul {width: 100%; display: flex; flex-direction: row; justify-content: center;}
.top_tab_btn ul li { width: 200px; margin-right: 15px;}
.top_tab_btn ul li:last-child {margin-right: 0}
.top_tab_btn ul li a { width: 200px; height: 50px; border-radius: 3px; border: 1px solid rgba(133,120,116,0.2); background: rgba(133,120,116,0.05); color:#857874; display: block; cursor: pointer; font-size: 15px; text-align: center; line-height: 50px; transition: all 0.3s;}
.top_tab_btn ul li a:hover {background: #857874; border: 1px solid #857874; color:#fff;}

.s_title {width: 100%; text-align: center;}
.s_title h2 {color: #000; margin: 0 0 30px 0; font-size: 15px; word-break: keep-all;}
.s_title h2 span {color:#857874}
.s_title h1{font-family: 'NanumSquare',sans-serif; font-size: 30px; font-weight: 700; color:#000; word-break: keep-all;}

.ab_txt h1 {font-size: 20px; font-family: 'NanumSquare',sans-serif; font-weight: 500; color:#000; text-align: center;}
.ab_txt h1::before {width: 30px; height: 2px; background: #f4ac96; display: block; content: ""; margin: 0 auto 15px auto;}
.ab_txt ul {width: 100%; margin-top: 20px; border-top: 1px solid #857874;}
.ab_txt ul li {padding: 15px; border-bottom: 1px solid #eee; padding-left: 80px; position: relative; font-size: 13px; font-weight: 300; color:#666; line-height: 26px; word-break: keep-all; letter-spacing: -0.3px;}
.ab_txt ul li:nth-child(2n) {background: #f7f7f7}
.ab_txt ul li span {display: block; font-size: 14px; font-weight: 500; color:#333; position: absolute; left: 15px;}

/*Content CSS*/
#pd1_c1 {padding: 0 15px;}
#pd_hashtag {margin-top: 30px; position: relative; z-index: 3; border: 2px solid #ebe9e9; padding: 15px;}
#pd_hashtag ul {display: flex; flex-direction: row; justify-content: center; flex-wrap: wrap;}
#pd_hashtag ul li {margin: 7px 10px; font-family: 'NanumSquare',sans-serif;  font-size: 17px; font-weight: 700; color:#857874; font-style: italic; transition: all 0.2s;}


#pd1_c1_article {margin: 35px 0; }
#pd1_c1_img { display: flex; flex-direction: row; justify-content: space-between; width: 100%; margin-bottom: 20px; }
#pd1_c1_img div {overflow: hidden;}
#pd1_c1_img div img {transition: all 0.4s;width: 100%; }

#pd1_c1_txt {width: 100%;}
.pd1_txt h1 {font-size: 20px; font-family: 'NanumSquare',sans-serif; color:#333; font-weight: 700;}
.pd1_txt h1::after {width: 50px; height:2px; display: block; content: ""; background: #f4ac96; margin: 20px 0;}
.pd1_txt > ul li {position: relative; padding-left: 15px; font-size: 16px; font-weight: 300; color:#666; line-height: 26px; letter-spacing: -0.4px;margin-bottom: 7px;}
.pd1_txt > ul li::before {display: block; content: ""; width: 5px; height: 5px; border-radius: 50%; background: #857874; position: absolute; top: 11px; left: 0;}


#pd1_c2 {padding: 50px 15px 50px 15px; width: 100%; background: url('../img/pd1_c2_bg.jpg')no-repeat 50% 0%; background-size: cover;overflow: hidden;}
#pd1_c2_article {position: relative;}
#pd1_c2_txt {width: 100%; position: relative; z-index: 2;}
#pd1_c2_img{ position: relative; z-index: 2;}
#pd1_c2_img div {overflow: hidden;}
#pd1_c2_img div img { width: 100%;}

#pd1_c2_icon1 {position: absolute; top: -307px; right: -307px;width: 615px; }
#pd1_c2_icon2 {position: absolute; bottom: -307px; left: -307px;  width: 615px; }
#pd1_c2_icon1 img { animation: rota1 15s; animation-delay: 0s; animation-timing-function: linear; animation-iteration-count: infinite; }
#pd1_c2_icon2 img {  animation: rota2 20s; animation-delay: 0s; animation-timing-function: linear; animation-iteration-count: infinite; }

@keyframes rota1 {
100% {transform: rotate(360deg); }
}
@keyframes rota2 {
100% { transform: rotate(-360deg);}
 }

.pd_table {width: 100%; margin-top: 27px;}
.pd_table table {width: 100%; border-collapse: collapse;}
.pd_table table thead th { background: #f7d6cc; border: 1px solid #f4bca9;}
.pd_table table th, .pd_table table td {border: 1px solid #ddd; padding: 10px 15px; font-size: 16px; font-weight: 300;  font-family: 'Noto Sans KR', sans-serif; letter-spacing: -0.7px; word-break: keep-all;text-align: center;}
.pd_table table th {font-weight: 400; font-size: 15px; color:#000; background: #f3f3f3; line-height: 26px; }
.pd_table table td {font-size: 15px; font-weight: 300; color:#666; line-height: 26px; background: #fff; }
.c_red {color: #d74f4f!important;}
.c_blue {color: #3b62cf!important;}
.pd_table .graph_table th {font-size:14px; padding:8px; }
.pd_table .graph_table th.g_head {background: #f7d6cc ; border: 1px solid #f4bca9;}

.graph_wr {background: #fff; position: relative; margin-bottom: 20px; border-top: 2px solid #f4ac96; padding:20px 15px; }
.graph_data {display: flex; justify-content: center;  padding-bottom: 20px; }
.graph_data li {font-size:12px; font-weight: 300; color:#666; display: flex; align-items: center; letter-spacing: -0.5px;}
.graph_data li span {display: block; width:20px; height:15px; background: rgba(255, 99, 132, 0.2); border:1px solid rgba(255, 99, 132, 1); margin-right:8px;}
.graph_data li:nth-child(2) span {margin-left: 20px;background: rgba(54, 162, 235, 0.2); border:1px solid rgba(54, 162, 235, 1); }

.graph_article {display: flex; flex-direction: row; justify-content: space-between; width: 100%; }
.graph_box {width: 48%; margin-right: 4%; text-align: center; }
.graph_box:last-child {margin-right: 0;}

.graph_con { margin: 0 auto; text-align: center;}
.graph_con canvas {width: 100%; }

.graph_unit {font-size:12px; font-weight: 300; color:#666; letter-spacing: -.5px; margin-bottom: 10px; text-align: left;}
.graph_box .red {color:#d74f4f; font-size:12px; font-weight: 400; letter-spacing: -.5px; display: inline; padding-left: 38px;}
.graph_box .blue {color:#3b62cf; font-size:12px; font-weight: 400; letter-spacing: -.5px; display: inline; padding-left: 38px;}

.graph_source {margin-top: 20px; }
.graph_source p {font-size:13px; font-weight: 300; color:#666; position: relative; padding-left: 8px;}
.graph_source p b {font-weight: 500; color:#666; display: inline-block; min-width:56px; margin-right:10px;}
.graph_source p::before {display: block; content: ""; width: 3px; height: 3px; border-radius: 50%; background: #857874; position: absolute; top: 8px; left: 0;}


@media screen and (max-width: 600px) {


}

@media screen and (max-width: 500px) {


}