@charset "utf-8";
/* doc.css는 디자인페이지 스타일을 정의합니다. */

.doc-pg .top-box{display:flex;align-items:center;padding:20px 80px;min-height:400px;overflow:hidden;background:url('/images/sub/doc-top-bg.jpg')no-repeat 50% 50%/cover;}
.doc-pg .top-box .wrap{margin-right:40px;}
.doc-pg .top-box .wrap .store{margin-bottom:10px;font-size:var(--fz20);font-weight:700;line-height:1.4em;}
.doc-pg .top-box .wrap .tit{font-weight:400;font-size:var(--fz60);color:var(--dark);line-height:1.13em;}
.doc-pg.move .top-box .wrap .tit{line-height:1em;}
.doc-pg .top-box .wrap .tit strong{font-weight:700;}
.doc-pg .top-box .wrap .tit small{font-size: clamp(1.25rem, 0.9211rem + 1.3158vw, 2.5rem);font-weight:700;}
.doc-pg .top-box .wrap .tt{margin-top:25px;}
.doc-pg .top-box .img{display:flex;justify-content:flex-end;min-width:0;width:1%;flex:1 1 auto;}
.doc-pg .top-box.type2{padding-right:60px;}
.doc-pg .top-box.type2 .img{margin-bottom:-107px;}
.doc-pg .list{margin-top:60px;}
.doc-pg .list ul{display:flex;flex-wrap:wrap;margin:0 -20px -40px;}
.doc-pg .list ul li{width:50%;padding:0 20px;margin-bottom:40px;}
.doc-pg .list ul li .box{position:relative;height:100%;padding:40px;text-align:center;background-color: #fff;box-shadow:8px 8px 16px rgba(0,0,0,.16);border-radius:var(--bd20);overflow:hidden;}
.doc-pg .list ul li .box .num{width:140px;height:140px;padding:25px;background:url('/images/sub//marry-num-bg1.png')no-repeat 50% 50%/cover;position: absolute;left:0;top:0;font-size: clamp(1.25rem, 0.9211rem + 1.3158vw, 2.5rem);line-height:1em;color: #fff;font-weight:700;text-align:left;}
.doc-pg .list ul li .box .ic{margin-bottom:15px;}
.doc-pg .list ul li .box .tt{font-size:var(--fz20);font-weight:700;color:var(--dark);line-height:1.4em;}
.doc-pg .list ul li .box .tt .cl{color:var(--pri);}

.doc-pg .list ul li.st2 .box .num{background-image: url('/images/sub/marry-num-bg2.png');}
.doc-pg .list ul li.st2 .box .tt .cl{color:var(--snd);}

.doc-pg .list ul li.st3 .box .num{background-image: url('/images/sub/marry-num-bg3.png');}
.doc-pg .list ul li.st3 .box .tt .cl{color:var(--thr);}

.doc-btn{display:flex;justify-content:center;align-items:center;max-width:580px;width:100%;height:80px;margin:80px auto 0;border-radius:40px;box-shadow:8px 8px 16px rgba(0,0,0,.16);font-size:24px;font-weight:700;color:var(--dark);line-height:1.2em;transition:.3s;}
.doc-btn:hover{background-color:var(--pri);color: #fff;}

.doc-pg .top-box .wrap .doc-more{width:180px;margin:50px 0 0;background-color: #242424;border-color: #242424;}
.doc-pg .top-box .wrap .doc-more span{color: #fff;}
.doc-pg .top-box .wrap .doc-more span:after{background-image: url('/images/main/btn-arr-on.png');}
.doc-pg .top-box .wrap .doc-more:hover{background-color: #242424;border-color: #242424;}
.doc-pg .top-box .wrap .doc-more:hover span{color: #fff;}
.doc-pg .top-box .wrap .doc-more:hover span:after{background-image: url('/images/main/btn-arr-on.png');}

.doc-pg .list.x3 ul li{width:33.3333%;}

.doc-pg.sml .list{margin-top:90px;}
.doc-pg .content{margin-top:80px;}
.doc-pg .content .title{margin-bottom:40px;text-align:center;font-size:var(--fz40);font-weight:700;color:var(--pri);}
.doc-pg .content ul{display:flex;flex-wrap:wrap;margin:0 -20px -35px;}
.doc-pg .content ul li{width:50%;padding:0 20px;margin-bottom:35px;text-align:center;}
.doc-pg .content ul li .img img{border-radius:var(--bd24);}
.doc-pg .content ul li .tit{margin:20px 0 10px;font-size:var(--fz28);font-weight:700;color:var(--dark);line-height:1.4em;}

.doc-pg .content ul li .img.type2 img{box-shadow:8px 8px 16px rgba(0,0,0,.16);}