/*공통css*/
.c_wrap {width: 100%; padding: 100px 0;}
.con1300 { width: 100%; max-width: 1300px; margin: 0 auto;}

/*Content CSS*/
#c3_wrap {width: 100%; background: url('../img/dot_bg.jpg'); padding: 100px 0;}
#c3_wrap .con1300 {position: relative;}
#c3_wrap .con1300 > .title {width: 100; position: relative; text-align: center;}
#c3_wrap .con1300 > .title h1 {font-size: 45px; font-family: 'NanumSquare',sans-serif;color: #333; font-weight: 800; letter-spacing: 1px; }
#c3_wrap .con1300 > .title h1 span { color: #ffa800; }
#c3_wrap .con1300 > .title h1::after {display: block; width: 50px; height: 1px; background: #000; margin: 15px auto 60px auto; content: "";}

#c3_btn {width: 256px; position: absolute; top: 20px; right: 0;}
#c3_btn a { display: block; width: 100%; height: 53px; line-height: 53px; border: 1px solid #000; text-align: center; font-family: 'NanumSquare',sans-serif; font-size: 16px; color:#000; transition: all 0.3s; font-weight: 400; }
#c3_btn a span {display: inline-block; width: 24px; height: 10px; background: url('../img/c_arrow_b.png')no-repeat 50% 50%; margin-left: 10px; transition: all 0.3s;}

#c3_btn a:hover {background: #ffa800; border: 1px solid #ffa800; color:#fff;}
#c3_btn a:hover span { background: url('../img/c_arrow_w.png')no-repeat 50% 50%; margin-left: 17px;}

#c3_wrap .article {width: 100%; display: flex; flex-direction: row; justify-content: space-between;}
#c3_wrap .article .left {width: calc(50% - 10px); background: #fff; border: 1px solid #ddd; min-height: 310px; padding: 36px 40px; }
#c3_wrap .article .left .title {Width: 100%; padding-bottom: 13px; border-bottom: 1px solid #ddd; display: flex; flex-direction: row; justify-content: space-between; align-items: flex-end; margin-bottom: 20px;}
#c3_wrap .article .left .title h1 {font-family: 'NanumSquare',sans-serif; font-size: 26px; color:#000; font-weight: 600; }
#c3_wrap .article .left .title .more {width: 35px;}
#c3_wrap .article .left .title .more a {width: 100%; height: 35px; background: #333; line-height: 35px; text-align: center; display: block; font-size: 0;transition: all 0.3s;}
#c3_wrap .article .left .title .more a img {transition: all 0.3s; transform: rotate(0);}
#c3_wrap .article .left .title .more a:hover {background: #ffa800}
#c3_wrap .article .left .title .more a:hover img { transform: rotate(90deg);}

/* #c3_wrap .article .left .notice_list ul li {width: 100%; padding-left: 20px; position: relative; margin-top: 14px;}
#c3_wrap .article .left .notice_list ul li::after {width: 4px; height: 4px; background: #ffa800; transform: rotate(45deg); position: absolute; left: 0; top: 50%; margin-top: -2px; display: block; content: "";}
#c3_wrap .article .left .notice_list ul li a {width: 100%; display: flex; flex-direction: row; justify-content: space-between; }
#c3_wrap .article .left .notice_list ul li a h1 {font-size: 14px; font-weight: 300; color:#333; }
#c3_wrap .article .left .notice_list ul li a p {font-size: 14px; font-weight: 300; color:#bdbdbd; } */

#c3_wrap .article .left .notice_list ul {margin-top:30px; width: 100%;}
#c3_wrap .article .left .notice_list ul li {display: flex; align-items: center; padding:22px 0; border-bottom:1px solid #efefef; width: 100%; }
#c3_wrap .article .left .notice_list ul li:last-child {border-bottom: 0; }
#c3_wrap .article .left .notice_list ul li:first-child {padding-top:0; }
#c3_wrap .article .left .notice_list ul li div {text-align: center; margin-right:20px; width:65px; min-width:65px;}
#c3_wrap .article .left .notice_list ul li div span {font-size:30px; font-weight: 600; color:#ffba00; font-family: 'NanumSquare',sans-serif; line-height: 35px;}
#c3_wrap .article .left .notice_list ul li div p {font-size:14px; font-weight: 600; color:#333;  font-family: 'NanumSquare',sans-serif; white-space: nowrap;}
#c3_wrap .article .left .notice_list ul li a {overflow: hidden; position: relative; top:2px ;}
#c3_wrap .article .left .notice_list ul li a h2 {font-size:17px; font-weight: 600; color:#333; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; transition: all .2s ease;  font-family: 'NanumSquare',sans-serif; }
#c3_wrap .article .left .notice_list ul li a p {font-size:14px; font-weight: 300; color:#9e9e9e; margin-top:5px; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
#c3_wrap .article .left .notice_list ul li a:hover h2 {color:#ffba00; }




#c3_wrap .article .right {width: calc(50% - 10px); display: flex; flex-direction: row; justify-content: space-between;}
#c3_wrap .article .right .box {width: calc(50% - 10px); padding: 24px;}
#c3_wrap .article .right .box a {display: block; z-index: 3; width: 100%; height: 100%;  position: relative; display: flex; flex-direction: column; justify-content: center; text-align: center; border: 1px solid #fff; }
#c3_wrap .article .right .box:nth-child(1) {background: #ffa800;}
#c3_wrap .article .right .box:nth-child(2) {background: #334149;}

#c3_wrap .article .right .box a .icon {width: 94px; height: 105px; text-align: center; line-height: 105px; margin: 0 auto 20px auto;}
#c3_wrap .article .right .box a .icon img {vertical-align:middle; transition:transform 500ms}
#c3_wrap .article .right .box a:hover .icon img {transform:rotateY(180deg); transition:transform 500ms}
#c3_wrap .article .right .box a h1 {font-family: 'NanumSquare',sans-serif; font-size: 18px; color:#fff; font-weight: 600; }
#c3_wrap .article .right .box a p {font-family: 'NanumSquare',sans-serif; font-size: 12px; color:#fff; margin-top: 10px; font-weight: 400; }



@media screen and (max-width:1600px) {
    #c3_wrap .con1300  {padding: 0 30px;}

}

@media screen and (max-width:1300px) {
    #c3_wrap .con1300 {width: 100%;}
    #c3_wrap .article .left .notice_list ul li a h1 { width: 70%; white-space: nowrap;   overflow: hidden;   text-overflow: ellipsis; }
}


@media screen and (max-width:1200px) {
    #c3_btn {width: 256px; position: static; margin: 50px auto 0 auto}
}

@media screen and (max-width: 960px) {
    #c3_wrap {padding: 80px 0;}
    #c3_wrap .con1300 > .title h1::after {margin: 15px auto 40px auto;}

    #c3_wrap .article {width: 100%; display: block;}
    #c3_wrap .article .left {width: 100%; margin-bottom: 20px; min-height: auto;}
    #c3_wrap .article .right {width: 100%;}
    #c3_wrap .article .right .box a { padding: 50px 20px;}

}

@media screen and (max-width: 640px) {
    #c3_wrap {padding: 60px 0;}
    #c3_wrap .con1300 > .title h1 {font-size: 30px;}
    #c3_wrap .con1300 > .title h1::after {margin: 15px auto 30px auto;}
    #c3_wrap .con1300  {padding: 0 20px;}
    #c3_wrap .article .left { margin-bottom: 14px; }
    #c3_wrap .article .right .box {width: calc(50% - 7px); padding: 15px;}
    #c3_btn {width: 100%; position: static; margin: 15px auto 0 auto;}
    #c3_btn a {height: 40px; line-height: 40px;}

    #c3_wrap .article .left .notice_list ul li div {margin-right: 10px ;}
    #c3_wrap .article .left .notice_list ul li div span {font-size:24px; line-height: 30px;}
    #c3_wrap .article .left .notice_list ul li div p {font-size:13px;}
    #c3_wrap .article .left .notice_list ul li a p {font-size:13px; }

}