.text_bg_box {width: 100%; height: auto; background-image: url(/pages/gjonestop/img/text_bg_box.jpg); background-repeat: no-repeat; background-size: cover; background-position: center right; color: #fff; padding: 50px; margin-bottom: 80px;}
.text_bg_box h4 {font-size: 2.4rem; line-height: calc(2.4rem * 1.5); font-weight: 600; position: relative; margin-bottom: 24px;}
.text_bg_box h4::before {content: ''; display: block; position: absolute; left: 0; top: -10px; width: 24px; height: 4px; background-color: #de7a86;}
.text_bg_box p {font-size: 2rem; line-height: calc(2rem * 1.75); font-weight: 200; margin-bottom: 40px;}
.text_bg_box p:last-child {margin-bottom: 0;}

.cnt_wrap {width: 100%; max-width: 1200px; margin: 0 auto; text-align: center;}
.cnt_wrap .next_arrow {display: block; height: 42px; margin: 40px auto; background-image: url(/pages/gjonestop/img/next_icon.png); background-position: center; background-repeat: no-repeat; background-size: auto;}

.cnt_wrap .head_cnt {width: 100%; text-align: center; position: relative; display: flex; justify-content: space-space-around;}
.cnt_wrap .head_cnt li {flex: 0 1 auto; width: 100%; display: inline-block; font-size: 2rem; font-weight: 600; color: #fff; background-color: #81a1c7; padding: 24px; margin-right: 24px; border: 1px solid #506885;}
.cnt_wrap .head_cnt li:last-child {margin-right: 0;}
.cnt_wrap .head_cnt::before {transform: translateX(-50%) translateX(-18px) translateY(-50%) rotate(36deg);}
.cnt_wrap .head_cnt::after {transform: translateX(-50%) translateX(18px) translateY(-50%) rotate(-36deg);}

.cnt_wrap .main_cnt {width: 100%; position: relative; height: auto; overflow:  hidden;}
.cnt_wrap .main_cnt::before {content: ''; display: block; width: 210px; height: 210px; border-radius: 50%; background-color: #de7a86; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.cnt_wrap .main_cnt::after {content: 'ONE-STOP'; display: inline-block; font-size: 3rem; font-weight: 800; color: #fff; position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);}
.cnt_wrap .main_cnt > li {width: calc(50% - 12px); height: auto; min-height: 314px; border: 4px solid #d5d5d5; float: left; padding: 40px; margin-right: 24px; margin-bottom: 24px; text-align: center;}
.cnt_wrap .main_cnt > li:nth-child(2n+2) {margin-right: 0;}
.cnt_wrap .main_cnt .tit {display: inline-block; margin-bottom: 40px; font-size: 3rem; font-weight: 800; line-height: 6rem; padding-left: 70px; background-repeat: no-repeat; background-position: center left; background-size: 60px 60px; color: #393131;}
.cnt_wrap .main_cnt .tit#t1 {background-image: url(/pages/gjonestop/img/sub_2_1_icons_1.png);}
.cnt_wrap .main_cnt .tit#t2 {background-image: url(/pages/gjonestop/img/sub_2_1_icons_2.png);}
.cnt_wrap .main_cnt .tit#t3 {background-image: url(/pages/gjonestop/img/sub_2_1_icons_3.png);}
.cnt_wrap .main_cnt .tit#t4 {background-image: url(/pages/gjonestop/img/sub_2_1_icons_4.png);}

.cnt_wrap .main_cnt .list {display: block; padding-left: 60px;}
.cnt_wrap .main_cnt .list > li {display: block; margin-bottom: 12px; padding-left: 24px; position: relative; text-align: left;}
.cnt_wrap .main_cnt .list > li::before {content: ''; display: block; width: 5px; height: 5px; background-color: #4b4b4b; border-radius: 50%; position: absolute; left: 0; top: 10px;}
.cnt_wrap .last_cnt {display: inline-block; font-size: 2rem; font-weight: 600; padding: 24px; background-color: #646577; color: #fff; }


@media screen and (max-width:1000px) {
  .cnt_wrap .main_cnt .list {padding-left: 0;}
}
@media screen and (max-width:800px) {
  .text_bg_box {position: relative;}
  .text_bg_box::before {content: ''; display: block; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.6); position: absolute; left: 0; top: 0;}
  .text_bg_box h4 {font-size: 2rem;}
  .text_bg_box p {position: relative; font-size: 1.6rem;}

  .cnt_wrap .head_cnt {display: block; width: 100%;}
  .cnt_wrap .head_cnt li {flex: none; width: 100%; font-size: 2.4rem; margin-bottom: 24px;}

  .cnt_wrap .main_cnt {padding-top: 180px;}
  .cnt_wrap .main_cnt::before {top: 50px; width: 100%; height: 40px; border-radius: 0; padding: 24px;}
  .cnt_wrap .main_cnt::after {top: 50px; font-size: 2.4rem;}
  .cnt_wrap .main_cnt > li {width: 100%;}

  .cnt_wrap .last_cnt {display: block; width: 100%; font-size: 2.4rem;}
}
@media screen and (max-width:600px) {
  .cnt_wrap .main_cnt .tit {font-size: 2.4rem;}
  .text_bg_box {padding: 40px 24px;}

  .cnt_wrap .head_cnt li {padding: 12px;}
  .cnt_wrap .last_cnt {padding: 12px;}
  .cnt_wrap .main_cnt > li {padding: 24px;}
}
@media screen and (max-width:400px) {
  .cnt_wrap .last_cnt {font-size: 2rem;}
  .cnt_wrap .head_cnt li {font-size: 2rem;}
  .cnt_wrap .main_cnt::after {font-size: 2rem;}
}