@charset "utf-8";

.intro-doc.doc01 {margin:95px 0 180px; }
.intro-doc .box {display:flex; align-items:center; }
.intro-doc .box .box-t {padding-left:70px;}
.intro-doc .box .box-t h2 {font-size:28px; color:#222;}
.intro-doc .box .box-t p {margin-top:20px; color:#505050;}
.intro-doc .box:nth-child(even) {display:flex; flex-direction:row-reverse; justify-content:space-between; margin:80px 0;}
.intro-doc .box:nth-child(even) .box-t {padding-left:0; padding-right:70px;}

.intro-doc .doc02-tit {font-size:24px; color:var(--color-primary); font-weight:700; line-height:1.2em; letter-spacing:.43em; text-align:center;}
.intro-doc .doc02-txt {margin:25px 0 40px; font-size:18px; color:#505050; line-height:1.5em; text-align:center;}
.intro-doc.doc02 .img {background-image:url('../images/sub/intro-bg.jpg'); background-repeat:no-repeat; background-size:cover; width:100%; height:450px; background-position:50%;}
.loyalty-list {display:flex;}
.loyalty-list .list-box {width:33.3%;}
.loyalty-list h3 {margin:70px 0 25px; font-size:24px; font-weight:500; color:#222; line-height:1.2em;}
.loyalty-list h3 span {color:var(--color-primary);}
.loyalty-list li {position:relative; padding-left:20px; color:#505050;}
.loyalty-list li::before {content:''; position:absolute; width:5px; height:5px; background-color:var(--color-primary); border-radius:100%; left:0; top:10px;}

.process-wrap {display:flex; flex-wrap:wrap; margin:0 -22.5px;}
.process-wrap li {width:33.3%; padding:0 22.5px;}
.process-wrap li:nth-child(n+4) {margin-top:45px;}
.proc-box {position:relative; }
.proc-box .step-box {position:absolute; left:0; top:0; width:170px; height:60px; text-align:center; background-color:rgba(255,255,255,.95);}
.proc-box .step-box p {font-size:20px; color:#222; line-height:60px;}
.proc-box .step-box p span {margin-right:15px; font-weight:700; color:var(--color-primary);}

.prod-top {padding-bottom:15px; margin-bottom:30px; border-bottom:1px solid #ddd;}
.prod-top .prod-tit {font-size:32px; font-weight:700; color:#222; line-height:1.2em;}

.bbs-prod {display:flex;}
.bbs-prod .prod-list {margin-right:100px; width:300px;}
.bbs-prod .list-tit {margin-bottom:15px; font-size:20px; font-weight:700;line-height:1.75em; letter-spacing:-.03em; color:#242424;}
.bbs-prod .list-box {box-shadow:0px 2px 6.6px 3.4px rgba(0, 0, 0, 0.05);}
.bbs-prod .list-box ul {display: block; padding:13px 0;}
.bbs-prod .list-box li {display:flex; align-items:center; padding:12px 0 12px 30px; font-size:16px; line-height:1.75em; letter-spacing:-.03em; color:#242424;}
.bbs-prod .list-box li::after {content:''; position:absolute; width:5px; height:8px; right:30px; top:50%; transform:translateY(-50%); background-image:url('../images/sub/bbs-arrow.png'); background-repeat:no-repeat; background-size:contain;}
.bbs-prod .list-box li.active {background-color:#f4f4f4; }
.bbs-prod .list-box li.active:after {width:20px; height:20px; right:22px; background-image:url('../images/sub/bbs-arrow-on.png');}
.bbs-prod .list-box li a {width:100%; height:100%;}
.prod-wrap {flex:1 1 auto; min-width:0; width:1%;}
.bbs-prod input::placeholder {color:#aeaeae; font-size:16px;}

.situation-wrap {padding-bottom:50px; margin-bottom:45px; border-bottom:1px solid #ddd;}
.situation-wrap:last-child {padding:0; margin:0; border:0;}
.situation-wrap h2 {margin-bottom:15px; font-size:32px; color:#222; }
.situation-wrap .st-box {display:flex; align-items:center;}
.situation-wrap .st-box.box2 {margin-top:30px;}
.situation-wrap .st-box .img {margin-right:65px;}
.situation-wrap .st-box .st-text {font-size:18px; color:#505050;}
.situation-wrap .st-box .st-text ul {margin-top:35px;}
.situation-wrap .st-box .st-text li {position:relative; padding-left:15px;}
.situation-wrap .st-box .st-text li::before {content:''; position:absolute; width:5px; height:5px; background-color:var(--color-primary); border-radius:100%; left:0; top:10px;}

.pdf-down {margin-top:30px;}
.pdf-down a {position: relative; font-size: 18px; font-weight: 400; color: #242424;}
.pdf-down a::after {content:''; position: absolute; width: 20px; height: 20px; right: -30px; top: 0px; background-image: url('../images/sub/bbs-arrow-on.png');}

/* quick-wrap */
.quick-wrap {width:90vw; max-width:500px; border-radius:10px; background:#fff;}
.quick-wrap .content img {position: absolute; top: 50%; left: 0; transition: .4s ease-in-out; transform: translateY(-50%); 
-ms-transform: translateY(-50%); -webkit-transform: translateY(-50%); width: 100%; height: auto !important; max-width: 100%;min-height: 100%; object-fit: cover;}
.quick-wrap .content {position: relative; padding-bottom: 137%;}

.quick-wrap.ty2 .content img {height: 100% !important;}