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

.doc-wrap {padding-top:50px; color:#555; font-size:18px; line-height:1.667em; letter-spacing:-.03em;}
.doc-wrap .heading {font-family:'GmarketSans'; color:#000; font-size:24px; line-height:1.4em; margin-bottom:40px;}

.about {text-align:left;}
.about > .img {margin-bottom:70px;}

.about .group-flex {display: flex;  }
.about .group-flex > div{width: 50%;}
.about .group-flex > div > div {height: 330px;}
.about .group-flex  .left {padding-left: 120px; padding-right: 100px;}
/* .about .group-flex  .left .box { border: 1px solid #ddd;} */
.about .group-flex  .left  .txt-area {text-align: center; padding: 40px;border: 1px solid #ddd;}
.about .group-flex  .left .img img {width: 100%;height: 100%;}
.about .txt-area {padding: 55px; }
.bg-grey {background-color: #f6f6f6;}
.btn-support { display: flex; justify-content: center; align-items: center;   font-family: 'GmarketSans';color:#fff; font-size:20px; font-weight: 700; background-color: #000; border-radius: 50vh; width: 180px; height: 50px; margin: 20px auto 0; }
.about .group-flex .right h3 {color: #2c2c65; font-size:24px; }

.our-members {margin-top:110px;}
.our-members .title {text-align:center; margin-bottom:40px;}
.our-members .title h3 {color:#000; font-size:26px; line-height:1.3em; letter-spacing:-.03em;}
.our-members .title h3 small {color:#555; font-size:20px; font-weight:400; line-height:1.3em; letter-spacing:-.03em; margin-left:6px;}
.our-members .title p {font-size:20px; line-height:1.3em; line-height:1.6em; letter-spacing:-.03em; margin-top:10px;}
.our-members .row {display:flex; flex-wrap:wrap; margin:-20px;}
.our-members .col {width:50%; padding:20px;}
.our-members .box {display:flex; padding:24px 29px; border:1px solid #ddd; border-radius:15px;}
.our-members .box .img {width:40%; max-width:220%; margin-right:40px;}
.our-members .box .cnt {flex:1 1 auto; min-width:0; width:1%; padding-top:15px; line-height:1.444em;}
.our-members .box .cnt h4 {color:#000; font-size:28px; line-height:1.3em; letter-spacing:-.03em; margin-bottom:15px;}
.our-members .box .cnt h4 small {font-size:0.750em; font-weight:500; margin-left:6px;}
.our-members .box .cnt ul li {padding-left:1.4em; text-indent:-1.4em;}

.history {position:relative;}
.history:before {content:""; position:absolute; top:0; left:50%; width:1px; height:100%; background:#333;}
.history .group {position:relative; display:flex; padding-bottom:70px;}
.history .group:last-child {padding-bottom:30px;}
.history .group .year {width:132px; height:132px; display:flex; align-items:center; justify-content:center; text-align:center; color:#fff; font-family:'GmarketSans'; font-size:30px; font-weight:700; line-height:1em; background:#333; border-radius:100%;}
.history .group .cnt {flex:1 1 auto; min-width:0; width:1%; padding-top:32px;}
.history .group .cnt ul li {display:flex; line-height:1.556em; margin-bottom:12px;}
.history .group .cnt ul li .month {width:66px; color:#333; font-weight:800;}
.history .group .cnt ul li .txt {flex:1 1 auto; min-width:0; width:1%;}
.history .group:nth-child(odd) {margin-left:50%;}
.history .group:nth-child(odd) .year {margin-left:-66px; margin-right:35px;}
.history .group:nth-child(even) {margin-right:50%; flex-direction:row-reverse; text-align:right;}
.history .group:nth-child(even) .year {margin-right:-66px; margin-left:35px;}
.history .group:nth-child(even) .cnt ul li {flex-direction:row-reverse;}

.articles {text-align:center;}
.articles .update {text-align:left; margin-bottom:10px;}
.articles h4 {display:inline-block; min-width:210px; margin-bottom:30px; margin-top:54px; padding:0 25px; color:#000; font-size:22px; line-height:48px; border:1px solid #555; border-radius:50px;}
.articles .group {text-align:left; margin-bottom:27px;}
.articles h5 {color:#000; font-size:20px; line-height:1.3em; margin-bottom:10px;}
.articles ol > li {padding-left:1.1em; text-indent:-1.1em;}
.articles ol > li > ol {margin:5px 0;}

.business {display:flex; justify-content:space-between; margin-top:70px;}
.business .col {width:calc(33.33333333% - 30px); max-width:406px;}
.business h3 {position:relative; margin:0 auto -68px; width:137px; height:137px; display:flex; align-items:center; justify-content:center; color:#fff; text-align:center; font-size:18px; line-height:1.3em; padding:10px; border:1px solid #ddd; border-radius:100%;}
.business h3 span {display:flex; align-items:center; justify-content:center; width:100%; height:100%; background-color:#333; background-position:50% 50%; background-repeat:no-repeat; border-radius:100%;}
.business .box {height:calc(100% - 68px); padding:84px 24px 50px; border:1px solid #ddd; border-radius:15px;}
.business .n1 h3 span {background-image:url("../images/sub/biz_icon1.png");}
.business .n2 h3 span {background-image:url("../images/sub/biz_icon2.png");}
.business .n3 h3 span {background-image:url("../images/sub/biz_icon3.png");}

.supoprt-info {margin-top:100px; display:flex; text-align:center; color:#000;}
.supoprt-info .col {width:50%; padding:30px 30px 0; border-left:1px solid #ddd;}
.supoprt-info .col:first-child {border-left:0;}
.supoprt-info h3 {display:inline-flex; align-items:center; justify-content:center; width:250px; height:60px; margin-bottom:32px; font-size:20px; line-height:1.3em; border:1px solid #ddd; border-radius:50px;}
.supoprt-info h3 img {margin-right:10px;}
.supoprt-info .bold {font-size:20px; line-height:1.5em; margin-bottom:4px;}
.supoprt-info .bold img {vertical-align:middle; margin-top:-.2em;}