@charset "utf-8";

.mob_btn, .gnb_close{display:none}
.mob_login{margin:0 auto;margin-top:20px;display:none;text-align:center;color:#fff;}
.mob_login > a{padding:8px;border:1px solid #fff;color:#fff;}
#header{position:relative; width:100%; }
.header_wrap{position:relative; width:1150px; margin:0 auto; display:table; padding:30px 0}
.gnb, .logo{display:table-cell; vertical-align:middle}
.logo{width:200px; padding-left:40px}
.logo a{display:block; text-align:center}
.logo p{font-weight:bold; font-size:18px; display:block; position:absolute}
.gnb>ul{overflow:hidden}
.gnb>ul>li{float:left; position:relative; padding:0 15px}
.gnb>ul>li>p{display:none}
.gnb>ul>li:after{position:absolute; width:1px; height:15px; content:""; top:50%; margin-top:-7.5px; left:0; background-color:#c1c5c7}
.gnb>ul>li:first-child::after{display:none}
.gnb>ul>li>a{font-size:18px; color:#545859; font-family: 'NanumBarunGothic', sans-serif; display:block}
.gnb>ul>li:hover a{color:#ff9920}
.gnb>ul>li.select a{color:#ff9920}
.sub_menu{display:none}
.login{text-align:right; display:table-cell; vertical-align:middle; padding-right:20px}
.login a{color:#545859; font-family: 'NanumBarunGothic', sans-serif;font-size:18px;}
.header_bottom{position:relative; background-color:#f6f6f6; width:100%; height:27px}


.contents_wrap{position:relative; margin:0 auto; width:100%;}
.contents_wrap2{position:relative; margin:0 auto; width:100%; float:left; max-width:930px; padding:0 20px; box-sizing:border-box; display:table-cell}
.contents{position:relative; margin:0 auto; width:1150px;  padding-top:40px; display:table}
.right_con{position:relative; padding:20px; box-sizing:border-box; color:#545454;}
.right_con>p{color:#545454;line-height:150%;}
.green{color:#689e00}
.yellow{color:#ff9920}

/*title*/
.title_top{position:relative; border-bottom:1px solid #dfdfdf;  padding-bottom:10px;}
.title_top h2{font-weight:bold; color:#2e3241; padding-left:20px; font-size:16px}
.title_nav{position:absolute; right:20px; bottom:10px}
.title_nav>ul{overflow:hidden}
.title_nav>ul>li{float:left; margin-left:15px; position:relative}
.title_nav>ul>li>a{color:#999; font-size:12px}
.title_nav>ul>li::after{position:absolute; content: "\e93f"; font-family: "xeicon"; color:#999; left:-14px; top:50%; transform:translateY(-35%)}
.title_nav>ul>li:first-child::after{display:none}

/*left_menu*/
.left_menu_wrap{max-width:240px; width:240px; display:table-cell; vertical-align:top}
.left_menu_wrap>h2{color:#2e3241; font-size:20px; font-weight:bold; padding-top:20px; text-align:center;font-family: 'NanumBarunGothic', sans-serif; font-weight:bold}
.left_menu_wrap>ul{width:180px; position:relative; margin:0 auto;}
.left_menu{margin-top:15px;}
/* 8월 20일 : 좌우 20px에서 10px로 수정 */
.left_menu>ul{padding:0 10px; box-sizing:border-box;}
.left_menu>ul>li{ box-sizing:border-box; position:relative; border-bottom:1px solid #ebebeb; height:40px; line-height:40px;}
/* 8월 20일 : 좌우 20px에서 10px로 수정 */
.left_menu>ul>li>a{padding:0 10px;display:block; font-size:12px; font-weight:bold}
.left_menu>ul>li i{position:absolute; right:10px; top:10px; font-size:18px; color:#e9e9e9}
.left_menu>ul>li.select{background-color:#686b76; }
.left_menu>ul>li.select>a{color:#FFF; font-size:14px }
.left_menu>ul>li.select i{color:#FFF}

/*contents001*/
.list{position:relative; width:100%; padding:20px; box-sizing:border-box;}
.list>p{color:#545454; font-size:16px}
.list>ul{margin-top:30px; display:flex; flex-wrap:wrap}

/*.list>ul>li{ margin-left:10px; width:360px; position:relative;}*/
.list>ul>li{ margin-left:16px; width:356px; position:relative;}

.list>ul>li:nth-child(3n+1){margin-left:0}
.list>ul>li:nth-child(n+4){margin-top:30px}
.list>ul>li figure{ box-sizing:border-box;}
.list>ul>li figure>img{width:100% !important; height:auto !important}
.list>ul>li figure>p{font-size:12px; color:#313649; line-height:18px; position:absolute; top:10px; left:10px}
.list>ul>li h3{color:#313649; font-weight:bold; margin-top:10px; font-size:16px}
.list>ul>li>a>p{color:#ff9920; font-size:14px;}

/*contents002*/
.con_top{margin-top:30px; display:table; width:100%; }
.num{display:table-cell; vertical-align:middle; color:#313649; font-size:12px}
.con_select{display:table-cell; vertical-align:middle; text-align:right}
.con_select select{padding:10px 50px 10px 10px; font-size:12px}
.data{padding-bottom:100px}
.data>ul>li{padding:20px; box-sizing:border-box; border:1px solid #dfdfdf; margin-top:10px;  width:100%; display:table}
.data_img{margin:0;padding:0;background-color:#dfdfdf; width:158px; height:118px; display:inline-block;}
.data_text{padding-left:10px; box-sizing:border-box; display:inline-block;vertical-align:top;}
.data_text>h3{color:#545454; font-weight:bold; font-size:16px; margin-left:10px}
.data_text>p{color:#545454; font-size:14px; margin:10px 10px 0; }
.data_text>ul{overflow:hidden}
.data_text>ul>li{float:left; margin-left:10px; margin-top:10px}
/*.data_text>ul>li:first-child{margin-left:0}*/
.data_text>ul>li>a{display:block;  box-sizing:border-box; font-size:13px; border-radius:3px}
.data_btn1>li>a{background-color:#ff9920; color:#FFFFFF;padding:0 10px; border:1px solid #fc7d0d}
.data_btn2>li>a{background-color:#686b76; color:#FFF; padding:5px 10px;}
/*.data_btn2{margin-top:10px}*/

/*tsol*/
.guide_wrap{position:relative; margin-top:20px}
.guide{overflow:hidden; border:1px solid #d4d4d4; position:relative; margin-bottom:10px}
.guide_text{float:right}
.guide_btn{float:left}
.guide_btn>a{width:190px; height:50px; display:block; color:#FFF; background-color:#686b76; line-height:50px; border-radius:5px; text-align:center; font-size:24px; position:absolute; top:50%; margin-top:-25px; left:65px}
.guide .text_box{text-align:right; padding-top:50px; padding-bottom:30px}
.guide1 .text_box{padding-right:70px}
.guide2 .text_box{padding-right:70px}
.guide3 .text_box{padding-right:70px}
.guide .num_img{position:absolute; right:0; z-index:-9; top:35px}
.guide .text_box h3{font-size:24px; color:#f7c830}
.guide1 .text_box h3{font-size:24px; color:#689e00}
.guide .text_box p{margin-top:30px; color:#545454; line-height:24px}

.guide1{border-top:4px solid #abd25f;}
.guide2{border-top:4px solid #f7c830;}
.guide3{border-top:4px solid #f1594b;}
.guide0{border-top:4px solid #dfdfdf;}


/*board*/
.board_wrap{margin:0 auto 175px; width:100%; position:relative}
.board_wrap table{width:100%; border:1px solid #dfdfdf; }
.board_wrap table td{box-sizing:border-box; text-align:center; border-top:1px solid #dfdfdf;color:#999; font-size:12px}
.board_wrap table td a{color:#545454; display:block; padding:25px 0}
.board_wrap table td i{color:#e0e0e0; font-weight:bold}
.board_wrap table tr:first-child td{border-top:none}
.board_wrap table td.board_title{text-align:left}
.board_bottom{position:relative; width:100%; margin:20px auto 0; overflow:hidden}
.search{float:right}
.search input[type="text"]{height:30px; width:160px; border:1px solid #dfdfdf; padding:0 10px; box-sizing:border-box; font-size:12px}
.search button{border:1px solid #dfdfdf; height:30px; line-height:30px; vertical-align:middle; padding:0 10px; color:#626262}
/*paging*/
.paging {clear: both;font-weight: 600; float:left}
.paging>ul{overflow:hidden}
.paging>ul>li{float:left; margin-left:2px; border:1px solid #DDD; box-sizing:border-box; width:30px; height:30px;}
.paging>ul>li:first-chlid{margin-left:0}
.paging .page {text-align: center;}
.paging a { display:block; vertical-align: top; text-align: center; line-height: 28px; box-sizing:border-box;  transition:0.5s; color:#888; font-size:12px}
.paging a:hover{background-color:#f4f4f4;}
.paging a.current{background-color:#2e3241; color:#FFF}
.paging a.next, .paging a.prev{font-weight:bold}
.paging>ul>li.next2, .paging>ul>li.prev2{margin-left:0; border-left:none}

/*paging2*/
.paging2 {clear: both;font-weight: 600;}
.paging2>ul{overflow:hidden}
.paging2>ul>li{display:inline-block;margin-left:2px; border:1px solid #DDD; box-sizing:border-box; width:30px; height:30px;}
.paging2>ul>li:first-chlid{margin-left:0}
.paging2 .page {text-align: center;}
.paging2 a { display:block; vertical-align: top; text-align: center; line-height: 28px; box-sizing:border-box;  transition:0.5s; color:#888; font-size:12px}
.paging2 a:hover{background-color:#f4f4f4;}
.paging2 a.current{background-color:#2e3241; color:#FFF}
.paging2 a.next, .paging a.prev{font-weight:bold}
.paging2>ul>li.next2, .paging2>ul>li.prev2{margin-left:0; border-left:none}
/*view*/
.view_wrap{position:relative; width:100%; border:1px solid #dfdfdf; box-sizing:border-box}
.view_title{position:relative; background-color:#f4f4f4; padding:10px; box-sizing:border-box;}
.title{color:#545454; font-size:14px}
.date{color:#999; font-size:12px}
.view_con{position:relative; width:100%; padding:10px; box-sizing:border-box; font-size:12px}
/* 20210821 추가 */
.view_con p{font-size:12px}
.btn_area{position:relative; display:block; text-align:center; margin:0 auto; margin-top:20px}
.back_btn{position:relative; border:1px solid #333; width:145px; height:40px; line-height:40px; display:inline-block; text-align:center; margin:0 auto; margin-top:20px}
.back_btn2{position:relative; border:1px solid #000;background:#000; color:#fff;width:145px; height:40px; line-height:40px; display:inline-block; text-align:center; margin:0 auto; margin-top:20px}

#footer{position:relative; width:100%; background-color:#f6f6f6; padding-top:10px}
.footer_top{position:relative; width:100%; background-color:#2e3650; text-align:center}
.footer_top>ul{overflow:hidden;display:table; margin:0 auto}
.footer_top>ul>li{float:left; padding:20px 10px; box-sizing:border-box; position:relative}
.footer_top>ul>li>a{color:#FFF; font-weight:bold; font-family: 'NanumBarunGothic', sans-serif;}
.footer_top>ul>li::after{position:absolute; content:""; width:1px; height:10px; top:50%; margin-top:-5px; left:0px; background-color:#FFF}
.footer_top>ul>li:first-child::after{display:none}
.footer_wrap{position:relative; width:1110px; margin:0 auto; display:table; padding:20px 0}
.footer_wrap>div{display:table-cell; vertical-align:middle}
.foot_logo{width:120px; padding-right:20px}
.foot_text>p{color:#888; font-size:12px;font-weight:bold;}
.foot_text>p>span{color:#bababa;font-weight:bold;}

/*login_box*/
.login_box{position:relative; width:900px; margin:0 auto; border:1px solid #CCC; padding:35px; box-sizing:border-box}
.login_box h3{font-size:30px; color:#333;  width:560px; margin:0 auto; margin-bottom:10px;}
.login-form{overflow:hidden; width:560px; margin:0 auto}
.login-form .input {float: left; width: 420px;margin-right: 10px;}
.login-form .input input { height: 45px; width: 100%; display: block; margin-bottom: 4px;}
.login-form .command { float: left; width: 100px;}
.login-form .command input { width: 100px; height: 95px; background-color: #ffd800; color: #000; font-size: 18px;  font-weight: 900;}
.login-form .save {clear: both; padding: 10px 0;position:relative}

.login_btn{position:absolute; right:30px; top:5px}
.login_btn>ul{overflow:hidden}
.login_btn>ul>li{float:left; border:1px solid #AAA; box-sizing:border-box; padding:3px 10px; margin-left:5px}
.login_btn>ul>li>a{font-size:12px}
.login_text{position:relative; width:100%; margin:0 auto; border-top:1px solid #CCC; padding-top:35px; margin-top:50px}
.login_text>p{font-size:18px; margin-bottom:5px; color:#333; width:90%; margin:0 auto}

.login_guide{position:relative; width:900px; margin:0 auto; display:table; margin-top:30px}
.login_guide>div{display:table-cell; vertical-align:middle; padding:0 10px; box-sizing:border-box}
.login_guide>div li{font-size:16px; color:#333}

.channelBtn{position:absolute;top:20px;right:10px;}

/* form 추가 */
.input01{margin-top:0;padding:10px;width:100%;}
.textarea01{margin-top:0;padding:10px;width:99%;height:200px;}

/* etc */
.mb10{margin-bottom:10px;}
.bor01{border-top:1px solid #dfdfdf;}
.bg01{background:#fcfcfc;}
.fc01{color:#dfdfdf;}
.btn01{margin-right:10px;margin-bottom:10px;padding:5px 10px; display:inline-block;background-color:#ffffff; color:#ff9920;border:1px solid #ff9920;border-radius:3px;}

.div_first{display:block;}
.div_second{display:none;}

@media all and (max-width:1200px) {
.header_wrap{width:100%}
.logo{padding-left:10px; width:150px}
.gnb>ul>li>a{font-size:16px}
.logo p{font-size:14px}
.login a{font-size:16px}

.contents{width:100%; padding-left:10px; padding-right:10px; box-sizing:border-box}
.title_top h2{padding-left:0}
.list{padding:20px 0}
.list>ul>li{width:32.66%; margin-left:1%}
.footer_wrap{width:100%}
}

@media all and (max-width:912px) {
.logo img{max-width:70%}

.gnb>ul>li:hover a{color:#fff}
.gnb>ul>li.select a{color:#fff}

.login{display:none}
.mob_login{display:block;}

.mob_btn{float:right; vertical-align:middle; display:block; padding-right:10px}
.mob_btn>i{cursor:pointer; color:#686b76; font-size:30px; font-weight:bold}	
.gnb{position:fixed;  top:0; width:270px; height:100%; background-color:#686b76; z-index:9; right:-280px}
.gnb_close{display:block; right:10px; top:10px; position:absolute; cursor:pointer}
.gnb_close i{ color:#FFF; font-size:30px; font-weight:bold}
.gnb>ul{ width:90%; margin:40px auto 0 }
.gnb>ul>li{float:none; padding:0; border-bottom:1px solid #69718c}
.gnb>ul>li:after{display:none}
.gnb>ul>li>a{color:#FFF; line-height:45px; display:none}
.gnb>ul>li>a.sub_none{display:block}
.gnb>ul>li>p{display:block;color:#FFF; line-height:45px; font-size:16px;    font-family: 'NanumBarunGothic', sans-serif; cursor:pointer}
.sub_menu>li>a{display:block;line-height:45px; color:#FFF; padding-left:10px; box-sizing:border-box;}
.title_nav{display:none}
.footer_wrap{padding-left:10px; padding-right:10px; box-sizing:border-box}
.foot_logo{padding-right:10px;width:85px}
.foot_logo img{max-width:100%}
.footer_top{display:none}
.foot_text>p>span{display:none}

.left_menu_wrap{display:none}

.login_box h3{font-size:20px}	
	
	
.login_box{width:95%; padding:50px 0}
.login_guide{width:90%;}
.login_text{width:90%}
.login_text>p{width:90%}
.login_guide>div li, .login_text>p{font-size:16px}

.list>ul>li h3{font-size:14px}
.list>ul>li>a>p{font-size:14px}

.channelBtn{position:relative;top:0;left:0;}
.div_first{display:none;}
.div_second{display:block;}
}

@media all and (max-width:800px) {
.list>ul>li{width:49%; margin-left:2%}
.list>ul>li:nth-child(3n+1){margin-left:2%}
.list>ul>li:nth-child(2n+1){margin-left:0}
.list>ul>li:nth-child(n+3){margin-top:30px}	
}

@media all and (max-width:700px) {
.login-form{width:280px}
.login-form .input{width:280px}
.login-form .command{float:none}
.login-form .command input{width:280px; height:50px; line-height:50px}
.login_btn{position:relative; right:0}
.login_btn>ul>li:first-child{margin-left:0}
.login_box h3{text-align:center; font-size:25px; width:100%}
.login_guide{display:block}
.login_guide>div{display:block}
.login_icon{text-align:center}
.login_guide>div li, .login_text>p{font-size:14px}
}
@media all and (max-width:600px) {

}
@media all and (min-width:912px) {
.sub_menu{display:none !important}	
}