header { padding: 1.5rem 0; text-align: center; position: fixed; border-bottom: 1px solid #ddd;top: 0; left: 0; width: 100%; background: #fff; z-index: 9999;}
header .home { width: 4rem; text-align: center; position: absolute; left: 1.5rem; top: 50%; transform: translateY(-50%); }
header .logo_wrap img{ width: 18rem;}

.top { display: flex; justify-content: space-between; align-items: center; padding: 2rem 1.5rem;}
.top .left h1 { font-family: 'ONE-Mobile-Title'; font-size: 2.8rem; line-height: 1.2;}
.top .left p { font-size: 1.4rem; color: #9c9c9d; font-weight: 600; margin-top:1rem;}
.top img { width: 40%; }


.contents_wrap { width: calc(100vw - 1.5rem); margin: 2rem 0 2rem auto; position: relative;}
.contents_wrap .title { background: #f2f2f2; border-radius: 1rem 0 0 1rem; padding: 1.5rem 4rem; display: flex; align-items: center; justify-content: space-between;}
.contents_wrap .title p { color: #2a67f3; font-weight: 600; font-size: 1.8rem; position: relative;}
.contents_wrap .title p:before { content: ''; position: absolute; left: -2.1rem; top: 50%; transform: translateY(-50%); width: .7rem; height:.7rem; border-radius: 50%; background: #2a67f3; } 
.contents_wrap .title button { display: flex; gap: 1rem; font-weight: 600; align-items: center; font-size: 1.6rem; color: #5f5d5d;}
.contents_wrap .title button img { width: 1.6rem;}
.contents_wrap .content { /* width: 90%;  */padding-left: 4rem;margin: 0 0 0 auto; max-height: 0; overflow: hidden; transition: .5s; transition-delay: 0.1s;}
.contents_wrap.on .content { max-height: 30rem;}
.contents_wrap .content .info { margin: 1.5rem 0; font-size: 1.4rem; line-height: 1.3; color: #9c9c9d; font-weight: 500;} 
.contents_wrap .content { }
.contents_wrap .content ul:before { content: ''; width: 1px; height: 0; background: #333;position: absolute; left: 2.2rem; top: 2.5rem; transition: .3s;transition-delay: 0.1s;}
.contents_wrap.on .content ul:before { height: calc(100% - 5.5rem); }
.contents_wrap .content ul li { padding-right: 4rem; margin: 2rem 0;}
.contents_wrap .content ul li a { display: flex; justify-content: space-between; align-items: center;font-size: 1.8rem; position: relative; font-weight: 600;}
.contents_wrap .content ul li a:before { content: ''; position: absolute; left: -2.1rem; top: 50%; transform: translateY(-50%); width: .7rem; height:.7rem; border-radius: 50%; background: #3e3a39; } 
.contents_wrap .content ul li a img { width: 1.6rem; transform: rotate(-90deg); }

.benefit { border-radius: 1rem 0 0 1rem; padding:1.5rem 3rem; display: flex; align-items: center; justify-content: space-between; width: calc(100vw - 1.5rem); margin: 2rem 0 2rem auto; background: linear-gradient(90deg, #1e31bf, #53cce1);}
.benefit .img_wrap {width: 10rem; height: 8rem;}
.benefit .img_wrap img { width: 100%;}
.benefit .left p:nth-child(1) { color: #fff; font-size: 2rem;}
.benefit .left p:nth-child(2) { color: #ffffff87; font-size: 1.6rem; margin-top: 1rem;}