@charset "utf-8";
/* VIEWER */
html{font-size:20px; font-family:'Noto Sans KR', sans-serif; -webkit-font-smoothing: subpixel-antialiased; -ms-font-smoothing: subpixel-antialiased; font-smoothing: antialiased}
body{font-size:1rem;}

.viewer-coachMarks-wp{width:100%; height: 100%; position: fixed; top:0; left:0; background-color:rgba(0,0,0,0.8); z-index: 200; word-break:keep-all; display: none;}
.viewer-coachMarks-wp .coachMarks-area{position: relative; width: 100%; height: 100%;}

/*도움말 공통 css*/
.viewer-coachMarks-wp .coachMarks-area div p span.color-pink{color:#ff4949;}
.viewer-coachMarks-wp .coachMarks-area div p span.color-yellow{color: #fff151;}
.viewer-coachMarks-wp .coachMarks-area div p{color:#fff; letter-spacing:-0.4px; font-size:0.85rem;}
.viewer-coachMarks-wp .coachMarks-area div .icon_bg{background:#555; position:relative; border-radius:7px; width:35px; height:32px;}
.viewer-coachMarks-wp .coachMarks-area div .line{width:2px; height:80px; background:#fff;}
.viewer-coachMarks-wp .coachMarks-area div .line::before{content:''; display:block; width:8px; height:8px; background:#fff; margin-left:-3px; border-radius:50%;}
/*도움말 공통 css*/

/*이전페이지 설명*/
.coachMarks01 .icon_bg{top:14px; left:4px;}
.coachMarks01 .icon_bg span{display:block; background:url(/assets/img/icon_viewer_back.png) center / 10px no-repeat; border-radius:50%; width:100%; height:100%; margin-left:-1px;}
.coachMarks01 .line{width:2px; height:82px; background: #fff; position: absolute; top:44px; left:20px;}
.coachMarks01 p{margin-top:100px; margin-left:10px;}
/*이전페이지 설명*/

/*메뉴설명*/
.coachMarks02{position: absolute; top:14px; right:12px;}

.coachMarks02 ul li{float: left; position: relative; margin-left: 25px;}
.coachMarks02 ul li:nth-of-type(1) .icon_bg span{display: block; background: url(/assets/img/icon_viewer_home.png) center / 25px no-repeat #555; border-radius: 50%; width: 100%; height: 100%;}
.coachMarks02 ul li:nth-of-type(2) .icon_bg span{display: block; background: url(/assets/img/icon_viewer_giftbox.png) center / 25px no-repeat #555; border-radius: 50%; width: 100%; height: 100%;}
.coachMarks02 ul li:nth-of-type(3) .icon_bg span{display: block; background: url(/assets/img/icon_viewer_scroll.png) center / 25px no-repeat #555; border-radius: 50%; width: 100%; height: 100%;}
.coachMarks02 ul li:nth-of-type(4) .icon_bg span{display: block; background: url(/assets/img/icon_viewer_list.png) center / 25px no-repeat #555; border-radius: 50%; width: 100%; height: 100%;}

.coachMarks02 ul li .line{position: absolute; margin-top: -2px;}
.coachMarks02 ul li:nth-of-type(1) .line{height: 80px; left:16px;}
.coachMarks02 ul li:nth-of-type(2) .line{height: 120px; left:16px;}
.coachMarks02 ul li:nth-of-type(3) .line{height: 160px; left:16px;}
.coachMarks02 ul li:nth-of-type(4) .line{height: 200px; left:16px;}

.coachMarks02 ul li p{position:absolute; text-align:right}
.coachMarks02 ul li:nth-of-type(1) p{width: 230px; right:3px; top:116px}
.coachMarks02 ul li:nth-of-type(2) p{width: 312px; right:3px; top:156px}
.coachMarks02 ul li:nth-of-type(3) p{width: 254px; right:3px; top:196px}
.coachMarks02 ul li:nth-of-type(4) p{width: 250px; right:3px; top:236px}
/*메뉴설명*/

/*하단부 자동스크롤 설명*/
.coachMarks03{position: absolute; top:74%; left:50%; margin-left:-214px; display: flex; justify-content: center; align-items: center;}
.coachMarks03 img{width:30px; height:40px; float:left; display:block;}
.coachMarks03 div{margin-left: 10px;}
.coachMarks03 div p .txtpoint{position: relative;}
.coachMarks03 div p .txtpoint:before{content: ''; width: 3px; height: 3px; background: #fff; display: inline-block; position: absolute; top:0; left:40%;}
/*하단부 자동스크롤 설명*/

/*정주행 설명*/
.coachMarks04{position: absolute; bottom:5px; left:50%; margin-left:-122px;}
.viewer-coachMarks-wp .coachMarks-area .coachMarks04 .icon_bg{width:106px; margin:-3px auto 4px;}
.coachMarks04 .line{margin:auto; position: relative; margin-top: 6px; z-index: 50;}
.coachMarks04 .line::before{position:absolute; bottom: 0px;}
.coachMarks04 .icon_bg span{background: url(/assets/img/icon_viewer_nonstop.png) 20px 55% / 20px no-repeat ; width: 100%; height: 100%; display: block; color:#fff; line-height: 31px; font-size: 0.8rem; text-indent: 40px;}
.coachMarks04 p{text-align: center;}
/*정주행 설명*/

/*닫기*/
.coachMarks05{width:100%; height:100%; position:absolute; top:0; left:0;}
.coachMarks05 a{width:100px; height:100px; display:block; position: absolute; top:50%; left:50%; margin-left:-50px; margin-top:-50px; }
.coachMarks05 a span{width:100%; height:100%; display:block; background: url(/assets/img/icon_help_close.png) center / 32px no-repeat rgba(0,0,0,0.5); border-radius:50%;}
.coachMarks05 span:after{content:'도움말 닫기'; color:#fff; font-size:0.9rem; position:absolute; bottom:-30px; text-indent:7px;}
/*닫기*/

/* ************************************** *
 * TABLET VER
 * ************************************** */

@media (min-width:768px) and (max-width:1023px){
    html{font-size:18px}
    body{font-size:1rem; margin:0; padding:0}

    /*이전페이지 설명*/
    .coachMarks01 .icon_bg{top:8px}
    .coachMarks01 .line{top:40px}
    .coachMarks01 p{margin-top: 96px;}
    /*이전페이지 설명*/

    /*메뉴설명*/
    .coachMarks02{right: 4px; top:8px}
    .coachMarks02 ul li{margin-left: 4px;}
    .coachMarks02 ul li:nth-of-type(1) p{width: 210px; right:3px; top:114px}
    .coachMarks02 ul li:nth-of-type(2) p{width: 280px; right:3px; top:154px}
    .coachMarks02 ul li:nth-of-type(3) p{width: 206px; right:3px; top:194px}
    .coachMarks02 ul li:nth-of-type(4) p{width: 228px; right:3px; top:234px}
    /*메뉴설명*/

    /*하단부 자동스크롤 설명*/
    .coachMarks03{margin-left:-194px;}
    .coachMarks03 div{margin-top:4px;}
    /*하단부 자동스크롤 설명*/

    /*정주행 설명*/
    .coachMarks04 .icon_bg span{text-indent:44px;}
    /*정주행 설명*/

    /*닫기*/
    .coachMarks05 a{width:80px; height:80px; margin-left:-40px; margin-top:-40px; }
    .coachMarks05 a span{}
    .coachMarks05 span:after{text-indent:0; width: 100%; margin-left:3px; bottom:-24px;}
    /*닫기*/
}


/* ************************************** *
 * MOBILE VER
 * ************************************** */

@media (min-width:0) and (max-width:767px){
    html{font-size:16px; background:#fff}
    body{font-size:1rem; margin:0; padding:0}

    /*공통 css*/
    .viewer-coachMarks-wp .coachMarks-area div .line{height:60px;}
    /*공통 css*/

    /*이전페이지 설명*/
    .coachMarks01 .icon_bg{top:8px}
    .coachMarks01 p{margin-top: 70px; width: 80px;}
    .coachMarks01 .line{top:38px}
    /*이전페이지 설명*/

    /*메뉴설명*/
    .coachMarks02{right: 4px; top:8px}
    .coachMarks02 ul li{margin-left: 4px; text-align: right;}
    .coachMarks02 ul li:nth-of-type(1) p{width: 111px; right:13px; top:94px}
    .coachMarks02 ul li:nth-of-type(2) p{width: 162px; right:13px; top:134px}
    .coachMarks02 ul li:nth-of-type(3) p{width: 94px; right:13px; top:174px}
    .coachMarks02 ul li:nth-of-type(4) p{width: 127px; right:13px; top:214px}
    .coachMarks02 ul li:nth-of-type(1) .line{height: 60px; left:16px;}
    .coachMarks02 ul li:nth-of-type(2) .line{height: 100px; left:16px;}
    .coachMarks02 ul li:nth-of-type(3) .line{height: 140px; left:16px;}
    .coachMarks02 ul li:nth-of-type(4) .line{height: 180px; left:16px;}
    /*메뉴설명*/

    /*하단부 자동스크롤 설명*/
    .coachMarks03{position: absolute; top:70%; left: 50%; margin-left: -174px;}
    .coachMarks03 img{width: 30px; height: 40px; float: left; display: block;}
    .coachMarks03 div{width: 100%; margin-top: 6px;}
    /*하단부 자동스크롤 설명*/

    /*정주행 설명*/
    .coachMarks04{margin-left: -97px;}
    .coachMarks04 .icon_bg span{background: url(/assets/img/icon_viewer_nonstop.png)10px 55% / 20px no-repeat; text-indent: 32px;}
    .viewer-coachMarks-wp .coachMarks-area .coachMarks04 .icon_bg{width: 78px;}
    /*정주행 설명*/

    /*닫기*/
    .coachMarks05 a{width:80px; height: 80px; margin-left:-40px; margin-top:-40px;}
    .coachMarks05 span:after{text-indent:5px; bottom:-20px;}
    /*닫기*/

}

@media (min-width:0) and (max-width:320px){
    .viewer-coachMarks-wp .coachMarks-area div p{font-size: 0.8rem;}
    .viewer-coachMarks-wp .coachMarks-area div .line{height: 60px;}

    /*이전페이지 설명*/
    .coachMarks01 p{margin-top: 70px; width: 70px;}
    /*이전페이지 설명*/

    /*메뉴설명*/
    .coachMarks02 ul li{margin-left: 4px;}
    .coachMarks02 ul li:nth-of-type(1) p{width: 98px; right:13px; top:94px}
    .coachMarks02 ul li:nth-of-type(2) p{width: 143px; right:13px; top:134px}
    .coachMarks02 ul li:nth-of-type(3) p{width: 83px; right:13px; top:174px}
    .coachMarks02 ul li:nth-of-type(4) p{width: 112px; right:13px; top:214px}
    .coachMarks02 ul li:nth-of-type(1) .line{height: 60px; left:16px;}
    .coachMarks02 ul li:nth-of-type(2) .line{height: 100px; left:16px;}
    .coachMarks02 ul li:nth-of-type(3) .line{height: 140px; left:16px;}
    .coachMarks02 ul li:nth-of-type(4) .line{height: 180px; left:16px;}
    /*메뉴설명*/

    /*하단부 자동스크롤 설명*/
    .coachMarks03{position: absolute; top:70%; left: 50%; margin-left: -138px;}
    .coachMarks03 img{width: 24px; height: 32px; float: left; display: block;}
    .coachMarks03 div{margin-left: 8px; margin-top: 2px;}
    /*하단부 자동스크롤 설명*/

    /*정주행 설명*/
    .coachMarks04{margin-left: -86px;}
    .coachMarks04 .icon_bg span{background: url(/assets/img/icon_viewer_nonstop.png) 8px 55% / 20px no-repeat; text-indent: 28px;}
    .viewer-coachMarks-wp .coachMarks-area .coachMarks04 .icon_bg{width: 70px;}
    /*정주행 설명*/

    /*닫기*/
    .coachMarks05 a{width: 64px; height: 64px; margin-left: -32px; margin-top: -32px;}
    .coachMarks05 a span{background: url(/assets/img/icon_help_close.png) center / 24px no-repeat rgba(0,0,0,0.5);}
    .coachMarks05 span:after{text-indent:-4px; width: 71px; bottom:-22px}
    /*닫기*/
}