
/* common */
#about { overflow: hidden; }
.sub_h1 { font-size: 48px; color: #222; font-family: 'paybooc-ExtraBold'; text-transform: uppercase; }
.sub_h1 i { display: inline-block; width:10px; height: 10px; background:#9e1b36; margin-left: 10px; position:relative; top:3px; }
.h1_desc { font-size: 20px; color: #333; line-height: 38px; font-family: 'paybooc-Medium'; }
.sub_p { font-size: 16px; font-weight: 300; color: #222; line-height: 28px; }


/*Content CSS*/
#about { padding-top:40px; }


/* s1 */
#s1 { padding:0 0 115px; }
#s1 .inner { position:relative; }
#s1 .h1_desc { margin-top: 30px; }

.s1_tit { position:absolute; left:0; top:45px; }
.s1_con { position:relative; text-align: center; }
.s1_con .s1_img { position:relative; z-index: 2; }
.s1_con .s1_img img { -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; -webkit-user-drag: none; }

.s1_con .s1_box { position:absolute; left:0; width:100%; top:0; height: 100%; }
.s1_box .dot_list { border-top: 1px solid rgba(0,0,0,0.2); }
.s1_box .dot_list.li1 { position:absolute; right:0; top:94px; width:488px; }
.s1_box .dot_list.li2 { position:absolute; left:0; bottom:94px; width:488px; }
.s1_box .dot_list.li3 { position:absolute; right:0; bottom:94px; width:488px; }

.s1_box .dot_list li { position:relative; border-bottom:1px solid rgba(0,0,0,0.2); padding:22px 0 23px; line-height: 1; text-align: left; font-size: 16px; font-weight: 300; color: #222; }
.s1_box .dot_list.li1 li { padding-left: 47px; }
.s1_box .dot_list.li2 li { padding-left: 11px; }
.s1_box .dot_list.li3 li { padding-left: 235px; }
.s1_box .dot_list.li3 li b { color:#590a27; }

.s1_box .dot_list li::before { content:""; position:absolute; top:50%; transform: translateY(-50%); width:4px; height: 4px; }
.s1_box .dot_list.li1 li::before { left:36px; background:#ff9a2b; }
.s1_box .dot_list.li2 li::before { left:0; background:#9e1b36; }
.s1_box .dot_list.li3 li::before { left:223px; background:#590a27; }



/* s2 */
#s2 { padding:100px 0 170px; background-image: linear-gradient(to left, #f1cdba, #fdf4e9); }
.s2_tit { display: flex; align-items: flex-end; }
.s2_tit .h1_desc { margin-left: 40px; }

.p_box { margin:40px 0 70px; width:100%; display: flex; }
.p_box p { width: 50%; background:#3e3e3e; color:#fff; font-size: 26px; font-family: 'paybooc-Bold'; padding:27px 0; line-height: 1; }
.p_box p:first-child { text-align: right; padding-right: 30px; }
.p_box p:last-child { text-align: left; padding-left: 30px; background:#9e1b36; }

.s2_con { position:relative; }
.s2_con .l_box { position:absolute; left:0; top:275px; width: 250px; padding:38px 0; font-size: 24px; color: #fff; line-height: 38px; font-family: 'paybooc-Bold'; background-color: #9e1b36; text-align: center; }
.s2_con .l_box::before { content:""; position:absolute; left:93px; bottom:calc(100% + 40px); width:267px; height: 54px; background:url('../img/ab_s2_arrow1.png') no-repeat center; }
.s2_con .l_box::after { content:""; position:absolute; left:93px; top:calc(100% + 40px); width:267px; height: 54px; background:url('../img/ab_s2_arrow2.png') no-repeat center; }
.s2_con .r_box { position:absolute; right:0; top:275px; width: 250px; padding:38px 0; font-size: 24px; color: #fff; line-height: 38px; font-family: 'paybooc-Bold'; background-color: #9e1b36; text-align: center; }
.s2_con .r_box::before { content:""; position:absolute; right:93px; bottom:calc(100% + 40px); width:267px; height: 54px; background:url('../img/ab_s2_arrow3.png') no-repeat center; }
.s2_con .r_box::after { content:""; position:absolute; right:93px; top:calc(100% + 40px); width:267px; height: 54px; background:url('../img/ab_s2_arrow4.png') no-repeat center; }

.s2_con .s2_list { margin:0 auto; width:500px; text-align: center; }
.s2_list li { width:100%; padding:45px 0 38px; margin:0 0 15px; background-color: #fff; box-shadow: 0 0 27px 0 rgba(0, 0, 0, 0.17); }
.s2_list li:last-child { margin-bottom: 0; }
.s2_list li h2 { font-size: 24px; color: #222; line-height: 1; font-family: 'paybooc-Bold'; }
.s2_list li .sub_p { margin:18px 0 0; }
