.promotion {position:relative;background-color:#f1f1f7;padding-bottom:60px;counter-reset:number;}
@media (min-width: 601px) and (max-width: 1280px) {
    .promotion {width:1280px;}
    .promotion .btn_scroll {left:auto!important;right:0;}
}
.promotion .logo {width:1200px;margin:0 auto;padding-top:37px;text-align: right;}
.promotion .top_banner {position:relative;height:450px;background:url(../img/promotion/bg_top.jpg) center top no-repeat;background-size:cover;margin-bottom:10px;}
.promotion .logo>span {right:0;}
.promotion .btn_scroll {position: absolute;bottom:0;left:calc(50% + 600px);margin:20px;}
.promotion ul:after {content:"";clear:both;display:block;}
.promotion .tabs {background-color:#474b72;height:100px;margin-top:-10px;}
.promotion .tabs img {vertical-align: middle;margin-right:10px;}
.promotion .tabs_conts {width:1200px;margin:0 auto;}
.promotion .tabs ul {width:1200px;margin:0 auto;}
.promotion .tabs ul>li {position: relative;float:left;width:calc(100% / 3);height:100px;}
.promotion .tabs ul>li>a {position: absolute;bottom:0;display:block;width:100%;height:100px;background-color:#474b72;font-weight:500;font-size:24px;color:#a1a3b5;text-align:center;transition:all .2s ease-in-out;padding-top:31px;}
.promotion .tabs ul>li>a:hover, .promotion  .tabs ul>li>a.active {height:110px;background-color:#31355c;font-size:28px;color:#fff}
.promotion .tabs ul>li.down>a {background-color:#3771d3;color:#fff}
.promotion .num {display:inline-block;width:38px;height:38px;border-radius:50%;background:#9c9cb6;font-size:22px;color:#fff;text-align:center;margin-right:20px;}
.promotion .num:after {display:block;counter-increment:number;content:counter(number);padding-top:4px;}
.promotion .btn_go {display:block;background-color:#484c6f;color:#fff;text-align:center;}
.promotion .btn_go span {display:inline-block;vertical-align:middle;}
.promotion .btn_go.icon span:after {content:"";display:inline-block;width:8px;height:18px;margin-left:16px;background:url(../img/promotion/ico_arraw.png) no-repeat;vertical-align: middle;}
.promotion .tit_img {margin:73px 0 43px;padding-left:50px;}
.promotion .box {background-color:#fff;padding:35px 0 50px;}
.promotion .box .item {position: relative;text-align:center;}
.promotion .box .txt_box {text-align:left;margin:0 auto;}
.promotion .box .txt_box .tit {font-weight:500;font-size:30px;color:#272838;margin-bottom:16px;}
.promotion .box .txt_box .tit .num, .promotion .box .txt_box .tit .numtxt {display:inline-block;vertical-align:middle;}
.promotion .box .txt_box .numtxt {margin-top:-3px;}
.promotion .box .txt_box .txt {height:86px;font-size:20px;color:#323445;padding-left:60px;}
.promotion .box .figure {margin: 0 auto 20px;}
.promotion .box.inline ul>li{float:left;width:50%;text-align:center;}
.promotion .box.inline ul>li:nth-child(1) {padding-left:110px;}
.promotion .box.inline ul>li:nth-child(1) .item {width:440px;}
.promotion .box.inline ul>li:nth-child(1) .txt_box {margin-left:32px;}
.promotion .box.inline ul>li:nth-child(2) {padding-left:40px;}
.promotion .box.inline ul>li:nth-child(2) .item {width:520px;}
.promotion .box.inline .figure.mg {margin-top:-20px;}
.promotion .box.inline .txt2 {font-size:22px;color:#272838;}
.promotion .box.inline .txt2 img {display:inline-block;vertical-align:middle;margin:0 6px}
.promotion .box.inline .btn_go {width:188px;padding:15px 0 17px;font-size:19px;margin:0 auto;}
.promotion .box.block .btn_go {font-size:18px;padding:14px 0 16px;line-height: 1.3;}
.promotion .box.block .item {width:1010px;}
.promotion .box.block ul {margin-left:110px;}
.promotion .box.block ul>li {margin-bottom:70px;}
.promotion .box.block ul>li:last-child{margin-bottom:30px;}
.promotion .box.block ul>li:nth-child(1) .figure {text-align:left;}
.promotion .box.block ul>li:nth-child(1) .btn_go {width:290px;margin:40px 0 0 61px;}
.promotion .box.block ul>li:nth-child(2) .txt_box {float: left;}
.promotion .box.block ul>li:nth-child(2) .figure {float:right;margin: 10px 15px 0 0;border:1px solid #e5e5e5;}
.promotion .box.block ul>li:nth-child(2) .btn_go {position:absolute;bottom:0;left:61px;width:170px;}
.promotion .box2.inline .txt_box {margin-left:0!important;}
.promotion .box2.inline .txt_box .txt {height:auto;margin-bottom:20px;}
.promotion .box2.inline .figure {text-align:left;}
.promotion .box2.inline .txt2 {font-size:20px;color:#000;text-align:left;padding-left:72px;text-indent:20px;}
.promotion .box2.inline .txt2:before {display: inline-block;content: "\203B";margin-right: 8px;margin-left: -61px;}
.promotion .box2.inline ul>li:nth-child(1) .item {width:467px;}
.promotion .box2.inline ul>li:nth-child(1) .figure {margin:0 0 20px 51px;}
.promotion .box2.inline ul>li:nth-child(2) .figure {margin:0 0 0 61px;}
.promotion .box2.inline ul>li:nth-child(2) .figure img {margin-right:20px;}
.promotion .box2.inline ul>li:nth-child(2) .btns .link {display:table;margin-bottom:10px;}
.promotion .box.list {padding:40px 50px 50px;}
.promotion .box.list .number {counter-reset: number;margin-top:-35px;}
.promotion .box.list .number li {display:block;font-weight:500;font-size:20px;color:#000;padding:35px 0;border-bottom:1px solid #e5e5e5;}
.promotion .box.list .number li:before {display:inline-block;counter-increment:number;content:counter(number)".";margin-right:2px;}
.promotion .box.list .number li:last-child {border-bottom:0;}
.promotion .box.list .number p {font-weight:400;font-size:18px;line-height:1.67;margin:15px 0;padding-left:24px;}
.promotion .box.list .number p:only-child {margin-bottom:0;}
.promotion .box.list .number img {margin-left:24px;}
.promotion .box.list .number .btn_go {display:inline-block;font-size:18px;padding:13px 35px 15px;margin-right:6px;}
.promotion .box.list .ml20 {margin-left:24px;}
.promotion .box.list .mgt {margin-top:30px;}
.promotion .box.list .ml10 {margin-left:10px;}
.promotion .box.list .mgtb {margin:10px 0;}

/*20190611 리본 */
.tabButton.reborn-tab li a {padding-left: 57px; padding-right: 57px;}
#head_banner_area.reborn {height: 299px; background: url(../img/reborn/h-bg.jpg) no-repeat center 0;}
#head_banner_area.reborn .txt {float: left; padding: 38px 0 0 0;}
#head_banner_area.reborn .txt > button {margin: 37px 0 0 5px;}
#head_banner_area.reborn .des {float: right; padding: 140px 45px 0 0; font-size: 16px;}
#head_banner_area.reborn .des table {border-spacing: 0; width: auto;}
#head_banner_area.reborn .des table th {color: #4fb2ba; padding: 0 10px 0 0;}
#head_banner_area.reborn .des table td {color: #fff;}
.reborn-box .goods-in {overflow: hidden; padding: 0 60px 0 52px;}
.reborn-box .goods-in .goods {float: left;}
.reborn-box .goods-detail {margin: 0 0 0 615px; border-top: 1px solid #000;}
.reborn-box .goods-detail .goods-name {padding: 20px 0 20px 34px; font-size: 24px; color: #000;}
.reborn-box .goods-detail .goods-name p {font-size: 17px; color: #5d5d5d;}
.reborn-box .goods-detail dl {overflow: hidden; border-top: 1px solid #d9d9d9; line-height: 30px;}
.reborn-box .goods-detail dl dt {float: left; padding: 14px 0 0 34px; width: 103px; font-size: 15px; line-height: 30px; color: #262626;}
.reborn-box .goods-detail dl dt.dt {line-height: 21px;}
.reborn-box .goods-detail dl dd {overflow: hidden; padding: 14px 0 14px 0; margin: 0 0 0 137px; font-size: 13px; color: #000;}
.reborn-box .goods-detail dl dd .v,
.reborn-box .goods-detail dl dd .v2 {font-size: 29px; line-height: 30px; display: inline-block; vertical-align: middle;}
.reborn-box .goods-detail dl dd .v2 {color: #236be3;}
.reborn-box .goods-detail dl dd .won {position: relative; top: 5px;}
.reborn-box .goods-detail dl dd .count {overflow: hidden;}
.reborn-box .goods-detail dl dd .count input[type="text"] {float: left; padding: 0; width: 44px; height: 21px; border: 1px solid #cbcbcb; text-align: center;}
.reborn-box .goods-detail dl dd .count div {position: relative; float: left; margin-left: 1px; vertical-align: top; height: 21px; width: 11px;}
.reborn-box .goods-detail dl dd .count div button {position: absolute; left: 0; display: block; border: 1px solid #cbcbcb; width: 11px; height: 10px; font-size: 0;}
.reborn-box .goods-detail dl dd .count div button.up {top: 0;}
.reborn-box .goods-detail dl dd .count div button.down {bottom: 0;}
.reborn-box .goods-detail dl dd .count div button:after {content:''; position: absolute; top: 50%; left: 50%; margin: -1px 0 0 -3px; border-bottom: 3px solid #b0b0b0; border-left: 3px solid transparent; border-right: 3px solid transparent;}
.reborn-box .goods-detail dl dd .count div button.down:after {border-bottom: 0 none; border-top: 3px solid #b0b0b0;}
.reborn-box .goods-detail dl dd .caution {clear:both; line-height: 1.1em; padding-top: 5px;}
.reborn-box .goods-detail .btns {padding-top: 16px; text-align: center;}
.reborn-box .goods-des {margin-top: 66px; padding: 25px 0; border-top: 1px solid #e5e5e5;}
.reborn-box .goods-des > p {margin-top: 25px;font-size: 17px; line-height: 25px; color: #4f4f4f;}
.content + .reborn-list-wrap { background: url(../img/reborn/bg-list.jpg) no-repeat 0 0;
    -webkit-background-size: cover;
    background-size: cover;
}
.content + .reborn-list-wrap .reborn-list {width: 1200px; margin: 0 auto;}
.content + .reborn-list-wrap .reborn-list > ul {overflow: hidden; padding: 86px 0 137px;}
.content + .reborn-list-wrap .reborn-list > ul > li {float: left; width: 378px; height: 717px; padding: 63px 10px 0 38px; margin: 0 0 0 33px; color: #000; background: #fff url('../img/reborn/good-1.jpg') 100% 100% no-repeat;}
.content + .reborn-list-wrap .reborn-list > ul > li:first-child {margin-left: 0;}
.content + .reborn-list-wrap .reborn-list > ul > li:nth-child(2) {background-image: url('../img/reborn/good-2.jpg');}
.content + .reborn-list-wrap .reborn-list > ul > li:nth-child(3) {background-image: url('../img/reborn/good-3.jpg');}
.content + .reborn-list-wrap .reborn-list > ul > li .num {font-weight: bold; font-size: 55px;}
.content + .reborn-list-wrap .reborn-list > ul > li .tt {position: relative; margin-bottom: 28px; padding: 2px 0 16px; font-size: 35px;}
.content + .reborn-list-wrap .reborn-list > ul > li .tt:after {content:''; display: block; position: absolute; left: 0; bottom: 0; font-size: 0; height: 1px; width: 40px; background-color: #000;}
.content + .reborn-list-wrap .reborn-list > ul > li .tt-sub,
.content + .reborn-list-wrap .reborn-list > ul > li .list li {margin-bottom: 2px; font-size: 15px; color: #373737; padding-left: 8px; text-indent: -8px;}

.reborn-complete {text-align: center;}
.reborn-complete .complete-msg,
.reborn-complete .complete-add {width: 1200px; margin: 0 auto;}
.reborn-complete .complete-msg {padding: 81px 0; border-bottom: 1px solid #e6e7e9; font-size: 40px; color: #236be3;}
.reborn-complete .complete-msg span {color: #393939;}
.reborn-complete .complete-add {padding: 58px 0 100px; font-size: 24px; color: #393939;}
.reborn-complete .complete-add .btns {padding-top: 18px;}
.reborn-complete .complete-add .btns button {margin: 0 2px;}

/* 20주년 */
.header-menu-hidden .header {display: none;}
.anniversary-wrap {background: url('../img/promotion/anniversary/bg.png') center 0 no-repeat;
  background-size: cover;
}
.anniversary-wrap .logo-line {padding-top: 65px;}
.anniversary-wrap .logo-line > a {display: inline-block; height: 29px; width: 167px; font-size: 0; background: url('../img/promotion/anniversary/home-btn.png') no-repeat 0 0;}
.anniversary-wrap * {
  word-wrap:break-word; word-break:keep-all;
}
.anniversary-wrap .anniversary-wrap-in {margin: 0 auto; width: 1200px; padding-bottom: 107px;}
.anniversary-wrap .anniversary-wrap-in .a-logo {padding-top: 9px; text-align: center;}
.anniversary-wrap .anniversary-wrap-in .explain {margin-top: 60px; text-align: center; color: #fff; font-size: 26px; line-height: 40px;}
.anniversary-wrap .anniversary-wrap-in .explain img {position: relative; top: -3px; vertical-align: middle;}
.anniversary-wrap .anniversary-wrap-in .explain span {color: #FFCD3E; font-weight: 500;}
.anniversary-wrap .anniversary-links {margin: 100px 65px 0;}
.anniversary-wrap .anniversary {display: table; width: 100%; table-layout:fixed;}
.anniversary-wrap .anniversary > a {position: relative; display: table-cell; padding-bottom: 40px; color: #fff; border-left: 1px solid #595A7C; font-size: 19px; line-height: 33px; font-weight: 700; text-align: center;}
.anniversary-wrap .anniversary > a:first-child {border-left: 0;}
.anniversary-wrap .anniversary > a:after {content:''; position: absolute; left: 50%; bottom: 1px; margin-left: -5px; display: inline-block; width: 10px; height: 10px; border-left: 2px solid #fff; border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}
.anniversary-wrap .anniversary > a span {display: block; color: #FFDD7D;}
.anniversary-wrap .annibox {margin-top: 60px; padding: 60px 50px; background-color: #fff;}
.anniversary-wrap .anni-header {overflow: hidden; position: relative; font-size: 26px; line-height: 35px; color: #3C3CA2;}
.anniversary-wrap .anni-header:after {content:''; position: absolute; top: 50%; right: 0; left: 0; height: 1px; font-size: 0; background-color: #3C3CA2;}
.anniversary-wrap .anni-header span {float: right; padding-left: 50px; position: relative; z-index: 1; display: block; background-color: #fff;}
.anniversary-wrap .anni-header span.num {float: left; padding-left: 0; width: 70px;}
.anniversary-wrap .anni-header p {clear: both; text-align: right;}
.anniversary-wrap .anni1 {display: flex; justify-content:space-between; flex-wrap:wrap;}
.anniversary-wrap .anni1 > div {position: relative; width: calc(50% - 10px); margin-top: 10px; font-size: 20px; line-height: 38px; min-height:383px; font-weight: 500 ; color: #000; letter-spacing: -1px;
  box-sizing: border-box;
}
.anniversary-wrap .anni1 > div:first-child {border: 15px solid #F2F2F2;}
.anniversary-wrap .anni1 > div:first-child > p {padding: 45px 25px 0;}
.anniversary-wrap .anni1 > div:not(:first-child) {padding: 60px 40px 0; background-color: #E6E9F2;}
.anniversary-wrap .anni1 > div:not(:first-child):after,
.anniversary-wrap .anni1 > div:not(:first-child):before {content:''; position: absolute; width: 45px; height: 33px; background-repeat: no-repeat; background-position: 0 0;}
.anniversary-wrap .anni1 > div:not(:first-child):before {top: 0; left: 25px; background-image: url('../img/promotion/anniversary/ddaom1.png');}
.anniversary-wrap .anni1 > div:not(:first-child):after {right: 25px; bottom: 0; background-image: url('../img/promotion/anniversary/ddaom2.png');}
.anniversary-wrap .anni1 > div:not(:first-child) .copy1 span {color: #3C3CA2;}
.anniversary-wrap .anni1 > div:not(:first-child) .member {position: absolute; right: 25px; bottom: 48px; font-size: 16px; line-height: 32px; font-weight: 400;}
.anniversary-wrap .add-copy {margin-top: 14px; text-align: right; font-size: 20px; line-height: 27px; color: #000;}
.anniversary-wrap .anni2 .items {display: flex; justify-content: space-between; margin-top: 30px;}
.anniversary-wrap .anni2 .items .item {width: 32%;}
.anniversary-wrap .anni2 .items .item .des-wrap {padding: 20px 10px 30px 21px; border: 1px solid #E8E8E8;}
.anniversary-wrap .anni2 .items .item .pic {overflow: hidden; position: relative; padding-top: 68%;}
.anniversary-wrap .anni2 .items .item .pic img {position: absolute; left: 0; bottom: 0; width: 100%;}
.anniversary-wrap .anni2 .items .item .auth {color: #3C3CA2; font-size: 20px; line-height: 29px;}
.anniversary-wrap .anni2 .items .item .des {margin-top: 10px; font-size: 18px; line-height: 23px; color: #686868;}
.anniversary-wrap .anni2 .items .item .links {margin-top: 20px;}
.anniversary-wrap .anni2 .items .item .links li {position: relative; padding-left: 10px;}
.anniversary-wrap .anni2 .items .item .links li:after {content:''; position: absolute; top: 10px; left: 0; width: 4px; height: 4px; font-size: 0; background-color: #3C3CA2;
  border-radius: 50%;
}
.anniversary-wrap .anni2 .items .item .links a {font-size: 18px; line-height: 27px; color: #3C3CA2;}
.anniversary-wrap .anni2 .items .item .links a u {text-decoration: underline;}
.anniversary-wrap .anni2 .items .item .links a * {vertical-align: middle;}
.anniversary-wrap .anni2 .items .item .links a img {margin-left: 4px;}

.anniversary-wrap .anni3 {margin-top: 20px; font-size: 18px; line-height: 27px; color: #fff;}
.anniversary-wrap .anni3 .item {position: relative; display: flex; justify-content: space-between; margin-top: 20px; height: 201px; background-repeat: no-repeat; background-position: 0 0;}
.anniversary-wrap .anni3 .item > .des:before,
.anniversary-wrap .anni3 .item:before {content:''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.5);}
.anniversary-wrap .anni3 .item > div {position: relative; width: 50%;}
.anniversary-wrap .anni3 .item > .links {padding: 40px 0 0 60px;}
.anniversary-wrap .anni3 .item > .links .tit {font-size: 30px; line-height: 45px; font-weight: 500;}
.anniversary-wrap .anni3 .item > .links .tit span {font-size: 18px; line-height: 27px; font-weight: normal;}
.anniversary-wrap .anni3 .item > .links ul {margin-top: 10px;}
.anniversary-wrap .anni3 .item > .links ul > li + li {margin-top: 5px;}
.anniversary-wrap .anni3 .item > .links a * {vertical-align: middle;}
.anniversary-wrap .anni3 .item > .des p {position: relative; font-size: 18px; line-height: 23px; padding: 40px 50px 0 50px;}
.anniversary-wrap .anni4 {display: flex; justify-content: space-between; margin-top: 20px;}
.anniversary-wrap .anni4 .item {padding: 25px 20px 21px 30px; border: 1px solid #E8E8E8; width: calc(50% - 10px);}
.anniversary-wrap .anni4 .item .cate span {display: inline-block; color: #fff; padding: 0 10px; font-size: 13px; line-height: 24px; background-color: #3C3CA2;
  border-radius: 4px;
}
.anniversary-wrap .anni4 .item .twrap,
.anniversary-wrap .anni4 .item a {display: inline-block; margin-top: 10px; max-width:100%; overflow: hidden; font-size: 21px; line-height: 26px; color:#3C3CA2; font-weight: 500;}
.anniversary-wrap .anni4 .item .twrap *,
.anniversary-wrap .anni4 .item a * {vertical-align: middle;}
.anniversary-wrap .anni4 .item .twrap .ltext,
.anniversary-wrap .anni4 .item a .ltext {display: inline-block; max-width:100%;
  overflow:hidden;white-space:nowrap; word-wrap:normal; text-overflow:ellipsis; display:block;
}
.anniversary-wrap .anni4 .item .twrap .date,
.anniversary-wrap .anni4 .item a .date {float: right; padding: 3px 0 0 6px; font-size: 14px; line-height: 20px; color: #222;}
.anniversary-wrap .anni4 .item .twrap .date em,
.anniversary-wrap .anni4 .item a .date em {position: relative; top: 2px;}
.anniversary-wrap .anni4 .item .twrap .date img,
.anniversary-wrap .anni4 .item a .date img {margin-left: 8px;}
.anniversary-wrap .anni4 .item .des {margin-top: 6px; font-size: 18px; line-height:23px; color: #222;}
.anniversary-wrap .anni5 {display: flex; justify-content: space-between; margin-top: 30px;}
.anniversary-wrap .anni5 .item {width: 32%;}
.anniversary-wrap .anni5 .item > a {position: relative; display: block;}
.anniversary-wrap .anni5 .item > a:before {content:''; position: absolute; z-index: 1; top: 0; right: 0; bottom: 0; left: 0; background-color: rgba(0,0,0,0.4);}
.anniversary-wrap .anni5 .item .pic {overflow: hidden; position: relative; padding-top: 113.314447592068%;}
.anniversary-wrap .anni5 .item .pic img {position: absolute; left: 0; bottom: 0; width: 100%;}
.anniversary-wrap .anni5 .item .copy1 {position: absolute; z-index: 2; top: 0; left: 0; color: #fff; padding: 50px 10px 0 30px;}
.anniversary-wrap .anni5 .item .copy1 .cate {font-size: 18px; line-height: 27px;}
.anniversary-wrap .anni5 .item .copy1 .tit {font-size: 24px; line-height: 36px; font-weight: 500; text-decoration: underline;}
.anniversary-wrap .anni5 .item .copy1 .star-point {margin-top: 10px; font-size: 18px; line-height: 19px;}
.anniversary-wrap .anni5 .item .copy1 .star-point * {vertical-align: top;}
.anniversary-wrap .anni5 .item .copy1 .star-point span {display: inline-block;font-size: 0; height: 17px; width: 88px; background:url('../img/promotion/anniversary/star-off.png');}
.anniversary-wrap .anni5 .item .copy1 .star-point span span {display: block; height: 100%; background:url('../img/promotion/anniversary/star-on.png');}
.anniversary-wrap .anni5 .item .copy2 {position: absolute; z-index: 2; left: 0; bottom: 0; padding: 30px 30px 63px 30px; height: 212px; color: #fff; background-color: rgba(0,0,0,0.5);
  box-sizing: border-box;
}
.anniversary-wrap .anni5 .item .copy2 .txt {font-size: 18px; line-height: 23px;
  overflow:hidden;text-overflow:ellipsis; height:115px; word-wrap:break-word;display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;
}
.anniversary-wrap .anni5 .item .copy2 .member {position: absolute; right: 20px; bottom: 20px; font-size: 16px; line-height: 24px; opacity: 0.8;}

.anniversary-wrap .anni5 + .add-copy2 {margin-top: 20px; font-size: 18px; line-height: 27px; color: #858585;}
.anniversary-wrap .gotop {position: fixed; left: 50%; bottom: 100px; width: 70px; height: 70px; margin-left: 527px; background-color: rgba(255,255,255,0.8); font-size: 0;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url('../img/promotion/anniversary/go-top.png');
  border-radius: 50%;
  box-shadow:0 0 3px 3px rgba(0,0,0,0.15)
}

/* 튜토리얼 개선 */
.tutorial-wrap {padding-bottom: 100px;}
.tutorial-wrap1 {padding-bottom: 40px;}
.tutorial-wrap .content-in {margin: 0 auto; width: 1200px;}
.tutorial-wrap > .content-in {position: relative;}
.tutorial-wrap .visual {padding: 135px 0 0 0; height: 530px; background: url('../img/promotion/tutorial/top-visual.png') center bottom no-repeat;
  background-size: cover;
}

.tutorial-wrap .visual .copys {margin-top: 38px; color: #000;}
.tutorial-wrap .visual .copys .p1 {font-size: 24px; line-height: 29px; font-weight: 300;}
.tutorial-wrap .visual .copys .p2 {font-size: 60px; line-height: 89px; font-weight: 700;}
.tutorial-wrap .tabs {position: relative; margin-top: -110px; z-index: 1; display: flex; justify-content: space-between;}
.tutorial-wrap .tabs > a {width: 31.58333333333333%; padding: 31px 0 31px 40px; background-color: #fff;
  box-shadow: 0 10px 20px rgba(9,14,101,0.08);
  transition: background-color 0.4s;
}
.tutorial-wrap .tabs > a .s1 {font-size: 26px; line-height: 42px; color: #000;
  transition: color 0.4s;
}
.tutorial-wrap .tabs > a .s2 {display: block; font-size: 38px; line-height: 56px; color: #012392;
  transition: color 0.4s;
}
.tutorial-wrap .tabs > a:hover,
.tutorial-wrap .tabs > a.current {background-color: #005FFF;}
.tutorial-wrap .tabs > a:hover .s1,
.tutorial-wrap .tabs > a:hover .s2,
.tutorial-wrap .tabs > a.current .s1,
.tutorial-wrap .tabs > a.current .s2 {color: #fff;}
.tutorial-wrap .h2 {margin-top: 95px; border-left: 7px solid #012392; padding-left: 17px; font-weight: 300; color: #222; font-size: 44px; line-height: 1em;}
.tutorial-wrap .h2 span {color: #012392; font-weight: 400;}
.tutorial-wrap .subTabs {margin-top: 30px; display: flex; justify-content: space-between;}
.tutorial-wrap .subTabs .item {position: relative; display: flex; width: 48.33333333333333%; padding: 38px 0 38px 38px; border: 1px solid #CECECE; text-align: left;
  transition: all 0.4s;
}
.tutorial-wrap .subTabs .item .pic {}
.tutorial-wrap .subTabs .item .p-wrap {padding: 34px 0 0 46px;}
.tutorial-wrap .subTabs .item .p-wrap .p1 {font-size: 30px; line-height: 45px; color: #333; font-weight: 700;}
.tutorial-wrap .subTabs .item .p-wrap .p2 {margin-top: 8px; font-size: 18px; line-height: 25px; color: #666;}
.tutorial-wrap .subTabs .item:hover {border-color:#005FFF;}
.tutorial-wrap .subTabs .item.current {background-color: #005FFF; border-color: #005FFF;}
.tutorial-wrap .subTabs .item.current:after {content: ''; position: absolute; left: 50%; bottom: -14px; margin-left: -27px; border-top: 19px solid #005FFF; border-left: 27px solid transparent; border-right: 27px solid transparent;}
.tutorial-wrap .subTabs .item.current .p-wrap .p1,
.tutorial-wrap .subTabs .item.current .p-wrap .p2 {color: #fff;}

.tutorial-wrap .comment_container.inner .commentWrite {padding: 0 0 40px 0;}
.tutorial-wrap .comment_container.inner .commentWrite .textareawrap textarea,
.tutorial-wrap .comment_container.inner .commentWrite .textareawrap textarea + .btn_submit {border-color:#CECECE; background-color: #F3F3F3;
  transition: all 0.4s;
}
.tutorial-wrap .comment_container.inner .commentWrite .textareawrap textarea + .btn_submit {opacity: 1;}
.tutorial-wrap .comment_container.inner .commentWrite .textareawrap.isActive textarea {border-color: #005FFF; background-color: #fff;}
.tutorial-wrap .comment_container.inner .commentWrite .textareawrap.isActive textarea + .btn_submit {border-color: #005FFF; background-color: #005FFF; color: #fff;}
.tutorial-wrap .comment_container.inner .reply_wrap {position: relative;}
.tutorial-wrap .comment_container.inner .reply_wrap .reply_profile {width: 80px; height: 80px;}
.tutorial-wrap .comment_container.inner .reply_wrap .reply_con {width: calc(100% - 100px);}
.tutorial-wrap [class*='s-type'] {position: absolute; top: 78px; left: 40px; width: 80px; height: 34px; font-size: 16px; line-height: 34px; color: #000; text-align: center; background-repeat: no-repeat; background-position: 0 0;}
.tutorial-wrap .s-type1 {background-image: url('../img/promotion/tutorial/tag-new.png');}
.tutorial-wrap .s-type2 {background-image: url('../img/promotion/tutorial/tag-old.png');}

.tutorial-wrap .tuto-list {margin-top: 40px;}
.tutorial-wrap .tuto-list ul li {padding: 38px 30px 37px; background-color: #F5F6F8;}
.tutorial-wrap .tuto-list ul li + li {margin-top: 30px;}
.tutorial-wrap .tuto-list ul li .tit {font-size: 26px; font-weight: 500; color: #236BE3;}
.tutorial-wrap .tuto-list ul li .tit * {vertical-align: middle;}
/* LCUX-22578 퍼블리싱 - [SERICEO] 매직가이드 > 고급 클래스 업데이트 */
.tutorial-wrap .tuto-list ul li [class*='icon'] {display: inline-block; font-size: 14px; line-height: 24px; padding: 0 10px; vertical-align: middle; color: #fff; font-weight: 400; border-radius: 30px;}
.tutorial-wrap .tuto-list ul li [class*='icon'] + [class*='icon'] {margin-left: 5px;}
.tutorial-wrap .tuto-list ul li .icon-empty {font-size: 17px; color: #495161;}
.tutorial-wrap .tuto-list ul li .icon1 {background-color: #236AE2;}
.tutorial-wrap .tuto-list ul li .icon2 {background-color: #176556;}
.tutorial-wrap .tuto-list ul li .icon3 {background-color: #896E55;}
.tutorial-wrap .tuto-list ul li .icon4 {background-color: #375B6E;}
.tutorial-wrap .tuto-list ul li .icon5 {background-color: #5D8FAA;}
.tutorial-wrap .tuto-list ul li .icon6 {background-color: #9ea2a5;}
.tutorial-wrap .tuto-list ul li .des {margin-top: 20px; font-size: 16px; line-height: 24px; color: #000;}
.tutorial-wrap .tuto-list ul li .des a,
.tutorial-wrap .tuto-list ul li .des span {color: #236AE2;}
.tutorial-wrap .tuto-list ul li .des a {border-bottom: 1px solid #236AE2; text-decoration: none;}
.tutorial-wrap .tuto-list ul li .des a.link {padding-right: 16px; background:url('../img/promotion/tutorial/link_icon.png') 100% center no-repeat;}
.tutorial-wrap .tuto-list ul li .des-sub {font-size: 15px; line-height: 22px; font-weight: 300;}
.tutorial-wrap .tuto-list ul li .des dl {display: flex;}
.tutorial-wrap .tuto-list ul li .des dl + dl {margin-top: 10px;}
.tutorial-wrap .tuto-list ul li .des dl dt {width: 100px; font-size: 16px; line-height: 24px; color: #236AE2; min-width: 162px;}
.tutorial-wrap .tuto-list ul li .des dl dt [class*='icon'] {color: #fff; font-size: 12px; line-height: 20px; padding: 0 8px}
.tutorial-wrap .tuto-list ul li .des dl dd {flex: 1; font-size: 16px; line-height: 24px; color: #000;}

.tutorial-wrap .tuto-info {margin-top: 40px;}
.tutorial-wrap .tuto-info dt {padding: 4px 0 4px 30px; font-size: 23px; line-height: 36px; color: #fff; font-weight: 500; background-color: #012392;}
.tutorial-wrap .tuto-info dd {font-size: 17px; line-height: 26px; color: #000; font-weight: 500;}
.tutorial-wrap .tuto-info dd ul {border-bottom: 1px solid #a8a8a8;}
.tutorial-wrap .tuto-info dd ul li {padding: 15px 0 15px 30px; border-top: 1px solid #f2f2f2;}
.tutorial-wrap .tuto-info dd ul li:first-child {border-top: 0 none;}
.tutorial-wrap .tuto-info dd ul li > * {display: inline-block;}
.tutorial-wrap .tuto-info dd ul li .cate {position: relative; padding-left: 16px; margin-right: 15px;}
.tutorial-wrap .tuto-info dd ul li .cate:after {content:''; position: absolute; top: 10px; left: 0; width: 6px; height: 6px; font-size: 0; background-color: #236AE2;
  border-radius: 50%;
}

.tutorial-wrap .tuto-info dd ul li .period {margin-right: 15px;}

/* 20230519 */
.tutorial-wrap .comment_container.inner .reply_wrap .reply_profile {
  background-size:100% auto !important;
}