/*이사장 인사말*/
.greetArea{display: grid; grid-template-columns: 1fr 4fr; grid-gap: 50px;}
.greetArea .tit{font-size: 24px; font-weight: 600; margin-bottom: 20px; line-height: 40px; color: #000;}
.greetArea .tit b{font-size: 30px;}
.greetArea .ment{color: #555; line-height: 24px;}
.greetArea .name{font-size: 24px; margin-top: 30px;}

/*역대이사장*/
.allTimeArea{position: relative;}
.allTimeBox::before{position: absolute; content: ""; right: 50%; top: 0; width: 1px; height: 100%; background: #4276c8; }
.allTimetype{margin-bottom: 20px; width: 100%; display: block;}
.allTimetype::after{content: ""; overflow: hidden; display: block; clear: both;}
.allTimetype .inner.right{float: right; width: 50%; padding-left: 50px; box-sizing: border-box; position: relative;}
.allTimetype .inner.right::before{content: ""; position: absolute; width: 12px; height: 12px; background: #fff; border: 3px solid #32446D; border-radius: 50%; left: -10px; top: 0;}
.allTimetype .inner.left{float: left; width: 50%; padding-right: 50px; box-sizing: border-box; text-align: right; position: relative;}
.allTimetype .inner.left::before{content: ""; position: absolute; width: 12px; height: 12px; background: #fff; border: 3px solid #32446D; border-radius: 50%; right: -8px; top: 0;}
.allTimetype .inner .box p{font-size: 20px; font-weight: 600; position: relative;}
.allTimetype .inner.right .box p::before{position: absolute; content: ""; width: 30px; height: 1px; background: #32446D; left: -42px; top: 9px;}
.allTimetype .inner.left .box p::before{position: absolute; content: ""; width: 30px; height: 1px; background: #32446D; right: -40px; top: 9px;}
.allTimetype .inner .box .tit{display: grid; grid-template-columns: 1fr 6fr; grid-gap: 10px; margin-top: 10px;}
.allTimetype .inner .box .tit .dlBox{font-size: 15px;}
.allTimetype .inner .box .tit .dlBox dl{display: grid; grid-template-columns: 1fr 3fr; border-top: 1px solid #ddd; border-right: 1px solid #ddd; border-left: 1px solid #ddd;}
.allTimetype .inner .box .tit .dlBox dl:last-child{border-bottom: 1px solid #ddd; border-top: 1px dashed #ddd;}
.allTimetype .inner.left .box .tit .dlBox dl{text-align: left;}
.allTimetype .inner .box .tit .dlBox dl dd{background: #f9f9f9; }
.allTimetype .inner .box .tit .dlBox dl dd, .allTimetype .inner .box .tit .dlBox dl dt{padding: 7px 10px; box-sizing: border-box; width: 100%; display: flex; align-items: center;}

/*찾아오시는길*/
.mapBox{width: 100%; height: 300px;}
.mapBox .root_daum_roughmap_landing .border2{display: block !important;}
.subConBox .textType .wayBox{padding: 40px 25px;}
.subConBox .textType .wayBox> ol{display: grid; grid-template-columns: 1fr 1fr;}
.subConBox .textType .wayBox> ol> li{position: relative; padding:0 30px; box-sizing: border-box; display: grid; grid-template-columns: 120px auto; grid-gap: 30px;}
.subConBox .textType .wayBox> ol> li::before{content: ""; position: absolute; left: 0; top: 0; width: 1px; height: 100%; border-right: 1px dashed #ddd;}
.subConBox .textType .wayBox> ol> li:first-child::before{display: none;}
.subConBox .textType .wayBox> ol> li .img{background: #F1F5FB; width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center;}
.subConBox .textType .wayBox> ol> li .tit{padding: 10px 0; box-sizing: border-box;}
.subConBox .textType .wayBox> ol> li .tit b{font-size: 22px;}

/*운영현황_자산운용개요*/
.propertyArea .grayBox2{padding-left: 240px !important; background: url(/images/uce/sub/property.png)no-repeat 25px center;}

/*개요_운용금리 등 변동*/
.interBox{margin-bottom: 15px;}
.interBox p.year{font-size: 30px; text-align: center; font-weight: 700; margin-bottom: 15px; color: #32446D;}
.intertype{padding-bottom: 15px; width: 100%; display: block; position: relative;}
.intertype::before{position: absolute; content: ""; right: 50%; top: 0; width: 1px; height: 100%; background: #4276c8; }
.intertype::after{content: ""; overflow: hidden; display: block; clear: both;}
.intertype .inner.right{float: right; width: 50%; padding-left: 50px; box-sizing: border-box; position: relative;}
.intertype .inner.right::before{content: ""; position: absolute; width: 12px; height: 12px; background: #fff; border: 3px solid #32446D; border-radius: 50%; left: -10px; top: 0;}
.intertype .inner.left{float: left; width: 50%; padding-right: 50px; box-sizing: border-box; text-align: right; position: relative;}
.intertype .inner.left::before{content: ""; position: absolute; width: 12px; height: 12px; background: #fff; border: 3px solid #32446D; border-radius: 50%; right: -8px; top: 0;}
.intertype .inner .box p{font-size: 20px; font-weight: 600; position: relative;}
.intertype .inner.right .box p::before{position: absolute; content: ""; width: 30px; height: 1px; background: #32446D; left: -42px; top: 9px;}
.intertype .inner.left .box p::before{position: absolute; content: ""; width: 30px; height: 1px; background: #32446D; right: -40px; top: 9px;}
.intertype .inner .box ol> li{color: #333;}
.intertype .inner .box ol> li::before{content: "·"; padding-right: 5px;}

/*ci*/
.ciArea{text-align: center;}
.ciArea img{display: block; text-align: center; margin: 0 auto 20px auto;} 

/*제휴복지서비스*/
.partnerArea> ol{display: grid; grid-template-columns: 1fr 1fr; grid-gap: 20px;}
.partnerArea> ol> li{border: 1px solid #ddd; padding: 20px; box-sizing: border-box; display: grid; grid-template-columns: 2fr 3fr; grid-gap: 20px;}
.partnerArea> ol> li .img{width: 100%; height: 100%; border: 1px solid #ddd; box-sizing: border-box; display: flex; align-items: center; justify-content: center;}
.partnerArea> ol> li .tit p{font-size: 20px; color: #32446D; margin-bottom: 5px;}
.partnerArea> ol> li .tit span{font-size: 13px; color: #555;}
.partnerArea> ol> li .tit dl{display: grid; grid-template-columns: 1fr 4fr;}
.partnerArea> ol> li .tit dl dd, .partnerArea> ol> li .tit dl dt{font-size: 15px; color: #333; display: inline-block; line-height: 24px;}
.partnerArea> ol> li .tit> a.btn{padding: 7px; box-sizing: border-box; display: block; font-size: 15px; text-align: center; margin-top: 5px;}
.partnerArea> ol> li .tit> a.btn.btn01{color: #fff; background: #ED7322;}
.partnerArea> ol> li .tit> a.btn.btn02{border: 1px solid #ED7322; color: #ED7322;}
.partnerArea> ol> li .tit> a.btn.btn03{border: 1px solid #ddd; color: #777; background: #f9f9f9;}
.partnerArea> ol> li .tit dl dd, .partnerArea> ol> li .tit dl dt{font-size: 15px;color: #333;display: inline-block;word-break: break-all;line-height: 24px;}

/*기구 및 조직*/
.orgArea .orgBox3{display: grid; grid-template-columns: repeat(3, 1fr); margin: 0 170px 40px 170px; grid-gap: 50px;}
.orgArea .orgBox3First li:last-child::after{display: none !important;}
.orgArea .orgBox3Third> li{background: #fcf5f2 !important; color: #ED7322 !important; border: 1px solid #ED7322 !important;}
.orgArea .orgBox3Third li:nth-child(1)::before, .orgArea .orgBox3Third li:nth-child(3)::before{content: ""; position: absolute; width: calc(100% + 54px); height: 1px; left: 50%; bottom: -40px; transform: translateX(-50%); background: #ddd; z-index: 1;}
.orgArea .orgBox3> li{border: 1px solid #ddd; box-sizing: border-box; background: #32446D; text-align: center; border-radius: 10px; color: #fff; position: relative;}
.orgArea .orgBox3> li> a{padding: 15px; box-sizing: border-box; display: block;}
.orgArea .orgBox3> li::after{content: ""; position: absolute; right: 50%; bottom: -40px; width: 1px; height: 40px; background: #ddd;}
.orgArea .orgBox3> li.first{background: #ED7322; color: #fff;}
.orgArea .orgBox3> li.first::after{height: 170px; bottom: -170px; z-index: 1;}
.orgArea .orgBox3> li.first::before{content: ""; position: absolute; width: calc(100% + 104px); height: 1px; background: #ddd; left: 50%; bottom: -170px; z-index: 1; transform: translateX(-50%);}
.orgArea .orgBox3> li.third{background: #f9f9f9; color: #333; }
.orgArea .orgBox3> li.third::after{display: none !important;}
.orgArea .orgBox4{display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 50px; margin: 80px auto 40px auto;}
.orgArea .orgBox4Last{margin: 40px auto !important;}
.orgArea .orgBox4> li{border: 1px solid #ddd; background: #f9f9f9; text-align: center; border-radius: 10px; color: #333; position: relative; box-sizing: border-box;}
.orgArea .orgBox4> li> a{padding: 15px; box-sizing: border-box; display: block;}
.orgArea .orgBox4> li::before{content: ""; position: absolute; right: 50%; top: -43px; width: 1px; height: 43px; background: #ddd; z-index: 1;}
.orgArea .none, .orgArea .orgBox3Third> li.none{background: #fff !important; border: none !important;}
.orgArea .none::after, .orgArea .none::before{display: none !important;}

/*신청절차*/
.statsArea05{display: grid; grid-template-columns: repeat(3, 1fr); grid-column-gap: 100px; grid-row-gap: 20px;}
.statsArea> li{border: 1px solid #ddd; border-radius: 20px; position: relative;}
.statsArea> li::after{content: ""; position: absolute; right: -86px; top: 80px; width: 70px; height: 40px; background: url(/images/uce/sub/stats.png)no-repeat right center;}
.statsArea> li:nth-child(3n):after, .statsArea> li:last-child::after{display: none !important;}
.statsArea> li p.tit{background: #f9f9f9; color: #333; padding: 15px; box-sizing: border-box; text-align: center; border-radius: 20px 20px 0 0; border-bottom: 1px solid #ddd;}
.statsArea> li p.ment{padding: 15px; box-sizing: border-box; border-radius: 0 0 20px 20px; min-height: 140px; display: flex; align-items: center; justify-content: center; text-align: center;}

/*자주찾는질문*/
.quesArea> ul> li{margin-bottom: 5px; border: 1px solid #ddd; box-sizing: border-box;}
.quesArea> ul> li b{font-size: 24px; vertical-align: middle; margin-right: 10px;}
.quesArea> ul> li p{padding: 15px 30px; cursor: pointer; box-sizing: border-box;  background: url(/images/uce/sub/select.png)no-repeat right 30px center;}
.quesArea> ul> li p.active{background: url(/images/uce/sub/select2.png)no-repeat right 30px center; background-color: #fcf5f2 !important;}
.quesArea> ul> li p span{background: #ddd; color: #fff; padding: 5px 10px; border-radius: 20px; box-sizing: border-box; font-size: 15px; margin-right: 10px;}
.quesArea> ul> li p span.type01{background: #0B9B9B;}
.quesArea> ul> li p span.type02{background: #0074E5;}
.quesArea> ul> li p span.type03{background: #008000;}
.quesArea> ul> li p span.type04{background: #CC1076;}
.quesArea> ul> li p span.type05{background: #E7AF22;}
.quesArea> ul> li .preBox{display: none; padding: 15px 30px; background: #fff; box-sizing: border-box;}
.quesArea> ul> li .preBox pre{white-space: pre-wrap; word-wrap: break-word; overflow: hidden; font-family: '아리따-돋움(TTF)', sans-serif, '맑은고딕', '돋움' ,arial; color: #333; margin: 5px 0;}

/*개인정보처리방침*/
.subTable{margin-top: 10px;}
.borderR{border-right: 1px solid #ddd !important;}
.personArea .textType{margin-top: 100px ;}
.personArea .textType:nth-child(1){margin-top: 0;}
.personArea .textType:nth-child(1) .grayBox2{margin-bottom: 30px;}

/*회원서비스헌장*/
.memberArea> p{font-size: 24px; margin-bottom: 50px; line-height: 36px; font-weight: 300; text-align: center;}
.memberArea .textType ul li{text-align: center;}
.memberArea .textType ul li span{font-size: 24px; font-weight: 500;}
.memberArea .textType p{font-size: 20px; text-align: center; margin-top: 40px;}

 
/*****테블릿가로*****/
@media all and (min-width:1221px) and (max-width:1530px) {  

    /*역대이사장*/
    .allTimetype .inner .box .tit .dlBox{height: 76px;}

    /*찾아오시는길*/
    .subConBox .textType .wayBox{padding: 30px 25px;}

    /*기구 및 조직*/
    .orgArea .orgBox4{margin: 80px 30px 40px 30px;}

}


/*****테블릿세로*****/
@media all and (min-width:768px) and (max-width:1220px) { 

    /*이사장 인사말*/
    .greetArea{grid-gap: 40px;}
    .greetArea .tit{line-height: 30px; font-size: 20px;}
    .greetArea .tit b{line-height: 40px;}

    /*역대이사장*/
    .allTimetype .inner .box .tit{display: block !important;}
    .allTimetype .inner .box .tit .dlBox{margin-top: 10px;}
    .allTimetype .inner .box .tit .dlBox dl{grid-template-columns: 2fr 3fr;}

    /*찾아오시는길*/
    .subConBox .textType .wayBox{padding: 30px;}
    .subConBox .textType .wayBox> ol{display: block;}
    .subConBox .textType .wayBox> ol> li{padding: 0;}
    .subConBox .textType .wayBox> ol> li::before{display: none;}
    .subConBox .textType .wayBox> ol> li:first-child{padding-bottom: 20px;}
    .subConBox .textType .wayBox> ol> li:last-child{border-top: 1px dashed #ddd; box-sizing: border-box; padding-top: 20px;}

    /*ci*/
    .ciArea img{width: 100%;} 

    /*제휴복지서비스*/
    .partnerArea> ol{display: block;}
    .partnerArea> ol> li{margin-bottom: 10px;}

    /*기구 및 조직*/
    .orgArea .orgBox3{margin: 0 100px 20px 100px;}
    .orgArea .orgBox4{margin: 50px 0 0 0;}
    .orgArea .orgBox3> li.first::before{bottom: -150px;}
    .orgArea .orgBox3> li.first::after{height: 150px; bottom: -150px;}
    .orgArea .orgBox3> li::after{height: 25px; bottom: -25px;}
    .orgArea .orgBox4> li::before{height: 25px; top: -25px;}
    .orgArea .orgBox3Third li:nth-child(1)::before, .orgArea .orgBox3Third li:nth-child(3)::before{bottom: -27px;}
    .orgArea .orgBox4Last{margin-top: 20px !important;}

    /*신청절차*/
    .statsArea05{grid-column-gap: 70px;}
    .statsArea> li::after{right: -65px; top: 86px; background-size: 54px;}
    .statsArea> li p.ment{height: initial;}

}


/*****모바일*****/
@media all and (max-width:767px) { 

    /*이사장 인사말*/
    .greetArea{display: block; text-align: center;}
    .greetArea img{width: 200px;}
    .greetArea .tit{font-size: 15px; line-height: 24px; margin-top: 20px;}
    .greetArea .tit b{font-size: 20px; line-height: 26px;}
    .greetArea .name{font-size: 20px;}

    /*역대이사장*/
    .allTimeBox::before, .allTimetype .inner.right .box p::before, .allTimetype .inner.left .box p::before, .allTimetype .inner.left::before, .allTimetype .inner.right::before{display: none;}
    .allTimetype{margin-bottom: 30px;}
    .allTimetype .inner.right{width: 100%; padding-left: 0;}
    .allTimetype .inner.left{width: 100%; padding-right: 0; text-align: left;}
    .allTimetype .inner .box p{font-size: 17px;}
    .allTimetype .inner .box .tit{display: grid; grid-template-columns: 1fr 5fr;}
    .allTimetype .inner .box .tit img{width: 68px;}
    .allTimetype .inner .box .tit .dlBox{font-size: 13px;}
    .allTimetype .inner .box .tit .dlBox dl{grid-template-columns: 2fr 3fr}
    
    /*찾아오시는길*/
    .mapBox{height: 150px;}
    .mapBox .wrap_map{height: 150px !important;}
    .subConBox .textType .wayBox{padding: 20px;}
    .subConBox .textType .wayBox> ol{display: block;}
    .subConBox .textType .wayBox> ol> li{padding: 0; grid-gap: 15px; grid-template-columns: 80px auto;}
    .subConBox .textType .wayBox> ol> li::before{display: none;}
    .subConBox .textType .wayBox> ol> li:first-child{padding-bottom: 20px;}
    .subConBox .textType .wayBox> ol> li:last-child{border-top: 1px dashed #ddd; box-sizing: border-box; padding-top: 20px;}
    .subConBox .textType .wayBox> ol> li .img{width: 80px; height: 80px;}
    .subConBox .textType .wayBox> ol> li .img img{width: 50px;}
    .subConBox .textType .wayBox> ol> li .tit b{font-size: 17px;}

    /*운영현황_자산운용개요*/
    .propertyArea .grayBox2{background: url(/images/uce/sub/property.png)no-repeat center 20px; padding: 170px 20px 20px 20px !important; background-size: 150px !important; text-align: center;}

    /*개요_운용금리 등 변동*/
    .interBox{margin-bottom: 10px;}
    .interBox p.year{font-size: 22px; margin-bottom: 10px;}
    .intertype .inner .box p{font-size: 15px;}
    .intertype .inner .box ol> li{line-height: 16px;}

    /*ci*/
    .ciArea img{width: 100%;} 

    /*제휴복지서비스*/
    .partnerArea> ol{display: block;}
    .partnerArea> ol> li{margin-bottom: 10px; display: block;}
    .partnerArea> ol> li .img{height: 150px; margin-bottom: 15px;}
    .partnerArea> ol> li .tit p{text-align: center; margin-bottom: 10px;}
    .partnerArea> ol> li .tit> a.btn01{padding: 10px;}

     /*기구 및 조직*/
    .orgArea .orgBox3{grid-gap: 10px; margin: 20px auto;}
    .orgArea .orgBox3> li> a{padding: 10px;}
    .orgArea .orgBox3> li.first::after{height: 120px; bottom: -120px;}
    .orgArea .orgBox3> li.first::before{bottom: -124px; width: 100%;}
    .orgArea .orgBox3Third{margin: 20px 40px !important;}
    .orgArea .orgBox3Third li:nth-child(1)::before, .orgArea .orgBox3Third li:nth-child(3)::before{width: calc(100% + 18px);}
    .orgArea .orgBox4{grid-gap: 0; }
    .orgArea .orgBox4> li{display: flex; align-items: center; justify-content: center; width: 50px; margin: 0 auto;}
    .orgArea .orgBox4> li> a{padding: 10px 20px;}

    /*신청절차*/
    .statsArea05{display: block;}
    .statsArea> li{margin-bottom: 10px;}
    .statsArea> li::after{display: none;}
    .statsArea> li p.tit{padding: 10px;}
    .statsArea> li p.ment{min-height: 100px;}

    /*회원서비스헌장*/
    .memberArea> p{font-size: 20px; margin-bottom: 30px; line-height: 28px; }
    .memberArea .textType ul li span{font-size: 20px; font-weight: 500;}

}