<div class="content">
  <div class="head head-type-1">
    <div class="title ">농촌봉사활동 참여</div>
  </div>
  <div class="body body-type-2">
    <div class="img-box pt-img"
       style="background-image:url(https://junekorea.github.io/img1/ph/nonghyup/volunteer.jpg)"> 
      <div class="pt-box flex">
        <div flex-1-0-0><a href="#" class="block">개인참여</a></div>
        <div flex-1-0-0><a href="#" class="block">기업.단체참여</a></div>
      </div>

    </div>
/* 폰트적용 */
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

html {
  font-family: "Noto Sans KR", sans-serif;
}

html {
  
    font-family: "Roboto", "Noto Sans KR", sans-serif;
  }
  
  /* 노말라이즈 */
  body, ul, li, h1 {
    margin:0;
    padding:0;
    list-style:none;
  }
  
  a {
    color:inherit;
    text-decoration:none;
  }
  
  label[for] {
    cursor:pointer;
    user-select:none;
  }
  
  /* 라이브러리 */
  .block {
    display:block;
  }
  
  .inline-block {
    display:inline-block;
  }
  
  .absolute-left {
    position:absolute;
    left:0;
  }
  
  .absolute-right {
    position:absolute;
    right:0;
  }
  
  .absolute-bottom {
    position:absolute;
    bottom:0;
  }
  
  .absolute-top {
    position:absolute;
    top:0;
  }
  
  .absolute-center {
    position:absolute;
    left:50%;
    transform:translateX(-50%);
  }
  
  .absolute-middle {
    position:absolute;
    top:50%;
    transform:translateY(-50%);
  }
  
  .absolute-middle.absolute-center {
    position:absolute;
    top:50%;
    left:50%;
    transform:translateX(-50%) translateY(-50%);
  }
  
  .relative {
    position:relative;
  }
  
  .cell {
    float:left;
    box-sizing:border-box;
  }
  
  .cell-right {
    float:right;
    box-sizing:border-box;
  }
  
  .row::after {
    content:"";
    display:block;
    clear:both;
  }
  
  .clear-both {
    clear:both;
  }
  
  .img-box > img {
    width:100%;
    display:block;
  }
  
  .con {
    margin-left:auto;
    margin-right:auto;
  }
  
  .margin-0-auto {
    margin-left:auto;
    margin-right:auto;
  }
  
  .text-align-center {
    text-align:center;
  }
  
  .text-align-right {
    text-align:right;
  }
  
  .line-height-0 {
    line-height:0;
  }
  
  .line-height-0 > * {
    line-height:normal;
  }
  
  .width-30px {
    width:30px;
  }
  
  .width-35px {
    width:35px;
  }
  
  .width-40px {
    width:35px;
  }
  
  .width-45px {
    width:35px;
  }
  
  .width-50px {
    width:50px;
  }
  
  .width-80px {
    width:80px;
  }
  
  .width-100px {
    width:100px;
  }
  
  .width-100p {
    width:100%;
  }
  
  .width-60p {
    width:60%;
  }
  
  .width-55p {
    width:55%;
  }
  
  .width-50p {
    width:50%;
  }
  
  .width-45p {
    width:45%;
  }
  
  .width-40p {
    width:40%;
  }
  
  .width-30p {
    width:30%;
  }
  
  .width-35p {
    width:35%;
  }
  
  .width-100p-except-30px {
    width:calc(100% - 30px);
  }
  
  .width-100p-except-35px {
    width:calc(100% - 35px);
  }
  
  .width-100p-except-40px {
    width:calc(100% - 40px);
  }
  
  .width-100p-except-50px {
    width:calc(100% - 50px);
  }
  
  .width-100p-except-80px {
    width:calc(100% - 80px);
  }
  
  .width-100p-except-100px {
    width:calc(100% - 100px);
  }
  
  .height-100p {
    height:100%;
  }
  
  .height-50p {
    height:50%;
  }
  
  .border-box {
    box-sizing:border-box;
  }
  
  .font-size-dot-8rem {
    font-size:.8rem;
  }
  
  .table-row {
    display:table;
  }
  
  .table-row.row::after {
    display:inline;
    clear:non;
  }
  
  .table-row > .cell {
    float:none;
    display:table-cell;
  }
  
  .border-red {
    border:10px solid red;
  }
  
  .border-green {
    border:10px solid green;
  }
  
  .border-blue {
    border:10px solid blue;
  }
  
  .border-gold {
    border:10px solid gold;
  }
  
  .border-pink {
    border:10px solid pink;
  }
  
  /* 라이브러리 - flex */
  * > .flex {
    display:flex;
  }
  
  * > .flex-grow-1 {
    flex-grow:1;
  }
  
  * > .flex-jc-c {
    justify-content:center;
  }
  
  * > .flex-jc-s {
    justify-content:flex-start;
  }
  
  * > .flex-jc-e {
    justify-content:flex-end;
  }
  
  * > .flex-jc-sb {
    justify-content:space-between;
  }
  
  * > .flex-ai-c {
    align-items:center;
  }
  
  * > .flex-ai-s {
    align-items:flex-start;
  }
  
  * > .flex-ai-e {
    align-items:flex-end;
  }
  
  * > .flex-as-s {
    align-self:stretch;
  }
  
  * > .flex-as-c {
    align-self:center;
  }
  
  * > .flex-as-s {
    align-self:flex-start;
  }
  
  * > .flex-as-e {
    align-self:flex-end;
  }
  
  * > .flex-column-nowrap {
    flex-flow:column nowrap;
  }
  
  * > .flex-column-wrap {
    flex-flow:column wrap;
  }
  
  .flex-ch-basis-0 > * {
    flex-basis:0;
  }
  
  * > .flex-1-0-0 {
    flex:1 0 0;
  }
  

/* 시작 */

.content > .head > .title {
  font-size: 22px;
  font-weight:bold;
  
}

.content > .body > .img-box{
  border: 1px solid #242424;
  height:150px;
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  margin-top:10px;  
  position:relative;
}


.content > .body > .img-box > .pt-box {
  position:absolute;
  bottom:0;
  left:0;
  width: 100%;
}

.content > .body > .img-box > .pt-box > div {
  border-left: 1px solid white;
  width:50%;
  background-color:orange;
}

.content > .body > .img-box > .pt-box > div > a {
  padding: 5px 10px;
  text-align:center;
  font-weight:bold;
  font-size:16px;
  color:white;
  letter-spacing:1.5px;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.