@charset "utf-8";

/*-------------------------------------------------------------------
	@ Layout
-------------------------------------------------------------------*/
/* header */
header{position: fixed; left: 0; top: 0; width: 100%; height: 90px; border-bottom: 1px solid rgba(221, 221, 221, 0.50); text-align: center; box-sizing: border-box; z-index: 9000;}
header h1{position: absolute; left: 100px; top: 0;}
header h1 span{position: absolute; left: 175px; top: 0; color: #FFF; font-size: 18px; font-weight: 700; line-height: 90px; white-space: nowrap;}
header h1 a{display: block; width: 156px; height: 90px; background: url('../images/logo_w.svg') center no-repeat; text-indent: -9999em;}
header .nav{display: inline-flex; gap: 220px;}
header .nav li a{display: block; position: relative; padding: 0 20px; color: #FFF; font-size: 18px; font-weight: 500; line-height: 90px;}
header .nav li a.on{font-weight: 700;}
header .nav li a.on::after{position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: #fff; content: "";}
header .sma{display: block; position: absolute; right: 100px; top: 0; width: 148px; height: 90px; background: url('../images/sma.png') center no-repeat; text-indent: -9999em;}
header.scroll{border-bottom: 1px solid rgba(221, 221, 221, 1); background: #fff;}
header.scroll h1 a{background-image: url('../images/logo.svg');}
header.scroll h1 span{color: #333;}
header.scroll .nav li a{color: #333;}
header.scroll .nav li a:hover{color: #009fe3; font-weight: 700;}
header.scroll .nav li a.on{color: #009fe3;}
header.scroll .nav li a.on::after{display: none;}
header.scroll .sma{background-image: url('../images/sma_on.png');}

/* footer */
footer{width: 100%; border-top: 1px solid #ddd;}
footer .sns{border-bottom: 1px solid #ddd;}
footer .sns > div{display: flex; align-items: center; justify-content: space-between; width: 1400px; height: 70px; margin: 0 auto;}
footer .sns p{color: #000; font-size: 14px; font-weight: 700;}
footer .sns .link{display: flex; gap: 30px;}
footer .sns .link li a{display: block; width: 24px; height: 19px; text-indent: -9999em;}
footer .sns .link li .fb{background: url('../images/ico_facebook.svg') center no-repeat;}
footer .sns .link li .ig{background: url('../images/ico_insta.svg') center no-repeat;}
footer .sns .link li .yt{background: url('../images/ico_youtube.svg') center no-repeat;}
footer .sns .link li .bl{background: url('../images/ico_blog.svg') center no-repeat;}
footer .info-box{padding: 40px 0;}
footer .info-box > div{width: 1400px; margin: 0 auto;}
footer .info-box .menu{display: flex;}
footer .info-box .menu ul{display: flex; align-items: flex-end; margin-left: 60px;}
footer .info-box .menu ul li{margin-right: 40px;}
footer .info-box .menu ul li a{display: block; color: #000; font-size: 14px; font-weight: 400;}
footer .info-box .menu ul li a.privacy{color: #009FE3;}
footer .info-box .info{margin-top: 30px;}
footer .info-box .info ul{display: flex;}
footer .info-box .info ul li{position: relative; padding-right: 10px; margin-right: 10px; color: #666; font-size: 14px; font-weight: 400;}
footer .info-box .info ul li::after{position: absolute; right: 0; top: 50%; width: 1px; height: 10px; margin-top: -5px; background: #d9d9d9; content: "";}
footer .info-box .info ul li:last-child::after{display: none;}
footer .info-box .info ul li .btn-mail{padding-right: 10px; background: url('../images/ico_ft_mail.svg') right 5px no-repeat; vertical-align: top;}
footer .info-box .info ul li a{vertical-align: top; color: #666;}

/* common */
.content{width: 1400px; padding: 100px 0; margin: 0 auto; box-sizing: border-box;}
.content.full{width: 100%;}
.visual{display: flex; justify-content: center; align-items: center; width: 100%; height: 590px; background: url('../images/bg_visual.jpg') center / cover no-repeat;}
.visual p{color: #FFF; font-size: 32px; font-weight: 700;}
.sub-menu{margin-top: -80px; background: rgba(0, 0, 0, 0.40);}
.sub-menu ul{display: flex; width: 1400px; margin: 0 auto;}
.sub-menu ul > li{flex: 1; max-width: 33.333%;}
.sub-menu ul > li a{display: block; color: #FFF; font-size: 18px; line-height: 80px; text-align: center;}
.sub-menu ul > li a.on{background: #fff; color: #009FE3; font-weight: 700;}
.sub-menu2{border-bottom: 1px solid #ddd; text-align: center;}
.sub-menu2 ul{display: inline-flex;}
.sub-menu2 ul > li a{display: block; position: relative; padding: 0 30px; color: #333; font-size: 18px; line-height: 80px; text-align: center;}
.sub-menu2 ul > li a.on{color: #009FE3; font-weight: 700;}
.sub-menu2 ul > li a.on::after{position: absolute; left: 0; bottom: -1px; width: 100%; height: 3px; background: #009FE3; content: "";}
.tab-menu{display: flex; margin-top: 40px;}
.tab-menu li{flex: 1;}
.tab-menu li a{display: block; position: relative; background: #DDD; color: #111; font-size: 20px; font-weight: 700; line-height: 80px; text-align: center;}
.tab-menu li a.on{background: #009FE3; color: #fff;}
.tab-menu li a.on::after{position: absolute; left: 50%; bottom: -17px; width: 33px; height: 18px; margin-left: -16px; background: url('../images/ico_tab_arw.svg') no-repeat; content: "";}
h2{display: block; color: #111; font-size: 36px; font-weight: 700;}
h2 + p{margin-top: 20px; color: #111; font-size: 20px; font-weight: 400; line-height: 34px;}
h3{display: block; color: #111; font-size: 30px; font-weight: 700; line-height: 34px;}
h3 + p{color: #111; font-size: 20px; font-weight: 400; line-height: 34px; margin-bottom: 20px;}
h4{display: block; color: #111; font-size: 20px; font-weight: 700; line-height: 34px;}
h3 + h4{margin-top: 20px;}
fieldset + h3{margin-top: 100px;}

/* table */
.infoTable{width: 100%; margin-top: 60px; border-top: 2px solid #111;}
.infoTable th,
.infoTable td{padding: 13px 20px; border-bottom: 1px solid #111;}
.infoTable th{background: #EEF8FD; color: #111; font-size: 16px; font-weight: 700; text-align: left;}
.infoTable th label{vertical-align: top;}
.infoTable td input{height: 36px; padding: 0 10px; border: 1px solid #CCC; box-sizing: border-box;}
.infoTable td select{height: 36px; padding: 0 10px; border: 1px solid #CCC; box-sizing: border-box;}
.infoTable td textarea{height: 300px; padding: 10px; border: 1px solid #CCC; box-sizing: border-box;}
.infoTable td .msg{margin-top: 10px; color: #666; font-size: 13px; font-weight: 400;}

.infoTable02{width: 100%; border-top: 2px solid #111;}
.infoTable02 th,
.infoTable02 td{padding: 13px 20px; border-bottom: 1px solid #111; background: #fff; color: #111; font-size: 16px; font-weight: 400; text-align: left;}
.infoTable02 th{background: #EFEFEF; font-weight: 700;}
.infoTable02 td ul li{line-height: 34px;}
.infoTable02 td ul li::before{content: "•"; margin-right: 10px;}

.guTable{width: 100%; margin-top: 12px; border-top: 2px solid #111;}
.guTable th,
.guTable td{padding: 13px 20px; border-bottom: 1px solid #111; background: #fff; color: #111; font-size: 16px; font-weight: 400; text-align: center;}
.guTable thead th{background: #EFEFEF; font-weight: 700;}
.guTable tbody th{background: #EEF8FD; font-weight: 700;}
.guTable tbody td{text-align: left;}
.guTable tbody td ul li{line-height: 34px;}
.guTable tbody td ul li::before{content: "•"; margin-right: 10px;}


/* button */
.btn-group{display: flex; justify-content: center; margin-top: 100px; text-align: center;}
.btn-group button{margin: 0 5px;}
.btn{display: inline-flex; align-items: center;}
.btn-pri{background: #009FE3; color: #fff;}
.btn-sec{background: #333; color: #fff;}
.btn-ter{background: #666; color: #fff;}
.btn-lg{height: 62px; padding: 0 70px; font-size: 18px; font-weight: 700;}
.btn-md{height: 52px; padding: 0 24px; font-size: 16px; font-weight: 700;}
.btn-sm{height: 36px; padding: 0 20px; font-size: 14px; font-weight: 400;}
.btn-file{padding-right: 56px; background-image: url('../images/ico_file.svg'); background-position: right 24px center; background-repeat: no-repeat;}

/* radio checkbox */
input[type="radio"]{display: block; position: absolute; overflow: hidden; height: 1px; border: 0; width: 1px; clip: rect(1px, 1px, 1px, 1px);}
input[type="radio"] + label{display: inline-block; position: relative; padding-left: 34px; font-size: 18px; line-height: 24px; color: #111; cursor: pointer;}
input[type="radio"] + label:before{position: absolute; top: 1px; left: 0; width: 24px; height: 24px; background: url('../images/radio.svg') center / 24px auto no-repeat; cursor: pointer; box-sizing: border-box; content: "";}
input[type="radio"]:checked + label:before{background: url('../images/radio_checked.svg') center / 24px auto no-repeat;}
label + input[type="radio"] + label{margin-left: 30px;}


/*-------------------------------------------------------------------
	@ Pages
-------------------------------------------------------------------*/
/* app */
.app-guide{margin-top: 40px;}
.app-guide li{position: relative; color: #111; font-size: 20px; line-height: 34px;}
.app-guide li::before{content: "•"; margin-right: 10px;}
.app-guide li a{margin-left: 30px;}
.privacy-info{padding: 30px; margin-top: 20px; border: 1px solid #AAA; color: #111; font-size: 20px; line-height: 34px;}
.privacy-info dt{font-weight: 700;}
.privacy-info dd + dt{margin-top: 35px;}
.privacy-info .noti{margin-top: 35px; color: #D8282E;}
.consent{margin-top: 20px; text-align: center;}

/* CEO */
.ceo{background: url('../images/bg_ceo.jpg') center / cover no-repeat;}
.ceo > div{width: 1400px; margin: 0 auto;}
.ceo h2{display: block; color: #111; font-size: 36px; font-weight: 700; line-height: 52px;}
.ceo h2 strong{color: #1D6DE5;}
.ceo p{color: #111; font-size: 20px; line-height: 34px;}
.ceo h2 + p{margin-top: 30px;}
.ceo p + p{margin-top: 36px;}

/* 조직도 */
.org{background: #F6FCFF;}
.org > div{width: 1400px; margin:0 auto;}

/* 지원프로그램 */
.support .tit{display: block; width: 1400px; margin: 0 auto 25px; color: #009FE3; font-size: 20px; font-weight: 700;}
.support .list{display: flex; gap: 40px; width: 1400px; margin: 40px auto 0;}
.support .list li{width: 440px;}
.support .list li button{width: 100%; height: 100px; padding-left: 40px; border: 1px solid #AAA; background: url('../images/ico_arw_b.svg') right 40px center no-repeat #fff; color: #111; font-size: 24px; font-weight: 500; line-height: 34px; text-align: left; box-sizing: border-box;}
.support .list li button.on{border-color: #009FE3; background: url('../images/ico_arw_t.svg') right 40px center no-repeat #009FE3; color: #fff;}
.support .list:nth-of-type(1){margin-top: 0;}
.support .item{display: none; padding: 60px 0 60px; margin-top: 40px; background: #F6FCFF;}
.support .item.on{display: block;}
.support .item > div{width: 1400px; margin: 0 auto;}
.support .item h3{margin-top: 0;}

/* 4대 실천사항 */
.guide{color: #111; font-size: 20px; font-weight: 400; line-height: 34px;}
.guide h2 + h3{margin-top: 40px;}
.guide h3{font-size: 24px; font-weight: 700;}
.guide h3 + p{margin-top: 10px;}
.guide .tit{font-weight: 700;}
.guide p + h3{margin-top: 40px;}
.guide p + p{margin-top: 40px;}
.guide ul + p{margin-top: 40px;}
.guide table + p{margin-top: 40px;}
.guide .tit + p{margin-top: 10px;}
.guide p + ul{margin-top: 10px;}
.guide .step01 > li + li{margin-top: 10px;}
.guide .step01 > li img{display: block; margin-top: 10px;}
.guide .step02{padding-left: 26px;}
.guide .step02 > li{padding-left: 31px; text-indent: -31px;}
.guide .step03 > li{padding-left: 31px; text-indent: -12px;}
.guide .txt-blue{color: #009fe3; font-weight: 400;}

/* 윤리경영 */
.moral01{display: flex; align-items: center; width: 100%; height: 770px; background: url('../images/bg_moral01.jpg') center / cover no-repeat;}
.moral01 > div{width: 1400px; margin: 0 auto;}
.moral01 h2{color: #FFF; }
.moral01 p{color: #FFF;}

/* 사이버 신문고 */
.deal01 .txt-box{padding: 30px; margin: 60px 0; border: 1px solid #AAA;}
.deal01 .txt-box h4{margin-top: 20px;}
.deal01 .txt-box .bul{margin-top: 5px;}
.deal01 .txt-box .bul li{padding-left: 10px; color: #111; font-size: 20px; line-height: 34px;}
.deal01 .txt-box .bul li::before{content: "•"; margin-right: 10px;}
.deal02 .report{display: flex; justify-content: space-between; margin-top: 60px;}
.deal02 .report a{display: flex; align-items: center; justify-content: center; width: 680px; height:300px; background: #EEF8FD;}
.deal02 .report a span{display: block; width: 200px; padding-top: 130px; color: #222; font-size: 28px; font-weight: 500; line-height: 34px; text-align: center;}
.deal02 .report a.btn-realname span{background: url('../images/ico_realname.svg') center top / 110px auto no-repeat;}
.deal02 .report a.btn-anonymous span{background: url('../images/ico_anonymous.svg') center top / 110px auto no-repeat;}

/* 신규제안(오픈소싱) */
.propo01 > div{width: 1400px; margin: 0 auto;}
.propo01 .info-box{width: 100%; padding: 100px 0; margin-top: 100px; background: #F6FCFF;}
.propo01 .info-box > div{width: 1400px; margin: 0 auto;}
.propo01 .info-box h3{margin-top: 40px; font-size: 24px;}
.propo01 .info-box h3:nth-of-type(1){margin-top: 0;}
.propo01 .info-box h3 + p{margin-top: 10px;}
.propo01 .info-box .bul{margin-top: 10px;}
.propo01 .info-box .bul li{padding-left: 10px; color: #111; font-size: 20px; line-height: 34px;}
.propo01 .info-box .bul li::before{content: "•"; margin-right: 10px;}
.propo01 .info-box .bul li a{vertical-align: top;}
.propo01 .info-box .bul li a[class^="btn"]{vertical-align: middle;}
.propo01 .info-box .step{margin-top: 60px;}
.propo02 .report{display: flex; justify-content: space-between; margin-top: 60px;}
.propo02 .report a{display: flex; align-items: center; justify-content: center; width: 100%; height:300px; background: #EEF8FD;}
.propo02 .report a span{display: block; width: 200px; padding-top: 130px; color: #222; font-size: 28px; font-weight: 500; line-height: 34px; text-align: center;}
.propo02 .report a.btn-realname span{background: url('../images/ico_realname.svg') center top / 110px auto no-repeat;}

.infoTable th span.star {
	color: #e6712b;
}