@charset "UTF-8";


@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.8/dist/web/static/pretendard-dynamic-subset.css");

@font-face {
    font-family: "OneShinhan";
    font-style: normal;
    font-weight: 400;
    src: local("OneShinhanLight"), url(./fonts/OneShinhanLight.woff) format("woff");
}
@font-face {
    font-family: "OneShinhan";
    font-style: normal;
    font-weight: 500;
    src: local("OneShinhanMedium"), url(./fonts/OneShinhanMedium.woff) format("woff");
}

/* ========================================== reset ========================================================= */
body,h1, h2, h3,h4,div,form,fieldset,legend,textarea,p,blockquote,th,td,input,select,textarea,button  {margin: 0; padding: 0; }
dl,ol,ul,li,menu,dt,dd {list-style: none; margin: 0; padding: 0;}
/* =========================================================================================================== */

html,body{font-family: "Pretendard Variable", Pretendard, AppleSDGothic, "Apple SD Gothic Neo", sans-serif;color: #121418;line-height: 1.56;text-size-adjust: 100%;}
html,body,p,ul,h1,h2,h3,h4,h5{margin:0;padding:0;}


article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
    display: block;
}

ol, ul {
    list-style: none;
}

blockquote, q {
    quotes: none;
}

blockquote:before, blockquote:after, q:before, q:after {
    content: "";
    content: none;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

img, fieldset {
    border: 0;
    vertical-align: middle;
}

em, address {
    font-style: normal;
}

html, body {
    height: 100%;
    background: transparent;
}
body.bg-gray{background: #F3F6FB;}

textarea, button, select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    margin: 0;
}

body, button {
    font-size: 14px;
    line-height: 1.56;
    letter-spacing: -0.5px;
    /* font-family: "OneShinhan", AppleSDGothic, "Apple SD Gothic Neo", sans-serif;*/
    font-family: "Pretendard Variable", Pretendard, AppleSDGothic, "Apple SD Gothic Neo", sans-serif;
    word-wrap: break-word;
    word-break: break-all;
    color: #121418;
}

strong {
    font-weight: 700;
}

a {
    text-decoration: none;
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    color: #121418;
}

button {
    -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    padding: 0;
}

input, textarea, label {
    -webkit-tap-highlight-color: transparent;
}

input[type=checkbox], input[type=radio] {
    border-color: transparent;
}

:focus {
    outline: 0 none;
}

/*ÀÚµ¿¿Ï¼º ½ºÅ¸ÀÏ º¯°æ*/
input:-webkit-autofill, input:-webkit-autofill:hover, input:-webkit-autofill:focus, input:-webkit-autofill:active, textarea:-webkit-autofill, textarea:-webkit-autofill:hover, textarea:-webkit-autofill:focus, textarea:-webkit-autofill:active, select:-webkit-autofill, select:-webkit-autofill:hover, select:-webkit-autofill:focus, select:-webkit-autofill:active {
    -webkit-box-shadow: 0 0 0 1000px white inset !important;
    border-radius: 12px;
}

/*À̹ÌÁö ÀúÀå, ÅؽºÆ® ¼±Åà ¹æÁö*/
body {
    -webkit-touch-callout: none;
    -webkit-user-select: none !important;
    -moz-user-select: -moz-none !important;
    -ms-user-select: none !important;
    user-select: none !important;
}

img {
    pointer-events: none;
}

.mt4{margin-top:4px !important}
.mt6{margin-top:6px !important}
.mt8{margin-top:8px !important}

.mt16{margin-top:16px !important}
.mt24{margin-top:24px !important}

/*
 * layout
 */
html {
    --safeAreaInsetTop: constant(safe-area-inset-top);
    --safeAreaInsetTop: env(safe-area-inset-top);
    --safeAreaInsetBottom: constant(safe-area-inset-bottom);
    --safeAreaInsetBottom: env(safe-area-inset-bottom);
    --containerPaddingBottom: 40px;
    --stickyBottomMargin: 16px;
}

body.is-hold {
    overflow: hidden;
}

html, body {
    height: 100%;
}

body {
    overflow-x: hidden;
}

.header-wrap {
    position: sticky;
    z-index: 100;
    left: 0;
    right: 0;
    top: 0;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: justify;
    -ms-flex-pack: justify;
    justify-content: space-between;
    border-bottom: 1px solid transparent;
    font-size: 0;
    -webkit-transition: border-color 0.3s ease-in-out;
    transition: border-color 0.3s ease-in-out;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    height: 56px;
    background: #F3F6FB;
}

.header-wrap .header-left {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: start;
    -ms-flex-pack: start;
    justify-content: flex-start;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
    margin-left: 24px;
    overflow: hidden;
}
.header-wrap a, .header-wrap button {
    display: inline-block;
    width: 32px;
    height: 32px;
    background-color: transparent;
    border: none;
    font-size: var(--t8-font-size);
    line-height: var(--t8-line-height);
    letter-spacing: -0.5px;
    color: #121418;
    text-indent: -9999px;
    overflow: hidden;
}
.header-wrap .header-left button {
    margin-left: -9px;
}

.header-wrap .header-right {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    margin-right: 14px;
}

.header-wrap .header-right > button {
    margin-right: 12px;
}

.header-wrap .header-right > button:last-child {
    margin-right: 0;
}

.header-wrap button{width: 24px;height: 24px;background-size: 100% auto; }
.header-wrap button.icon-header-share{background-image: url(../img/icon-top-share24.png);}
.header-wrap button.icon-header-info{background-image: url(../img/icon-top-info24.png);}


.header-wrap a.icon-header-voice, .header-wrap button.icon-header-voice {
    background: url(../img/icons32_voice.png) no-repeat 0 0;
    background-size: 100% auto;
}
.header-wrap a.icon-header-chatbot, .header-wrap button.icon-header-chatbot {
    background-position: -224px 0;
    background-repeat: no-repeat;
    background-color: transparent;
}

.header-wrap a.icon-header-chatbot, .header-wrap button.icon-header-mycare{
    background: url(../img/icons32_mypage.png) no-repeat 0 0;
    background-size: 100% auto;
}

.header-wrap h1 {
    font-size: 16px;
    letter-spacing: -0.5px;
    font-weight: 500;
    color: #121418;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
    display: inline-block;
    white-space: nowrap;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
}
.header-wrap h1.logo span{display:block;background: url(../img/logo-shinhan-bank.png) no-repeat;width: 101px;height: 24px;background-size: 100% auto;text-indent: -9999px;}

#guide-contents, #contents-area {
    position: relative;
    min-height: calc(100vh - 49px - var(--safeAreaInsetBottom));
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -ms-flex-direction: column;
    flex-direction: column;
}

#guide-contents > .container, #contents-area > .container {
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    position: relative;
    padding: 4px 24px calc(var(--containerPaddingBottom) + var(--safeAreaInsetBottom));
}

.sticky-button.button-group {position: sticky;z-index: 110;left: 0;right: 0;bottom: 0;margin-top: -20px;padding: 20px 20px 0;background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0px, white 10px); } 
.sticky-button.button-group::after {content: "";display: block;height: var(--safeAreaInsetBottom);min-height: var(--stickyBottomMargin); } 
.sticky-button.button-group.no-floating {position: relative;z-index: 1; } 

.blind {position: absolute;overflow: hidden;display: inline-block;width: 1px;height: 1px;margin: -1px;border: 0;clip: rect(1px, 1px, 1px, 1px);-webkit-clip-path: inset(50%);clip-path: inset(50%); } 
.cf:before, .cf:after { content:""; display:table; } 
.cf:after { clear:both; } 
.widthAuto { width: auto !important; } 
.dt { display: table !important; } 
.dtc { display: table-cell !important; } 
.rel { position:relative !important; } 
.afN:after { display:none !important } 
.bfN:before { display:none !important } 
p.text{font-size: 14px;color:#565C63;}

.fp{font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, Roboto, "Helvetica Neue", "Segoe UI", "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", sans-serif;}

/*¸ÞÀÎ*/
.staff-info{background-color: #fff;border-radius: 16px;box-shadow: 0px 5px 12px 0px rgba(22, 37, 66, 0.05);}
.staff-info .staff{margin:0 20px;padding:20px 0 16px 0;border-bottom:1px solid #F3F6FB;display: flex;justify-content: space-between;align-items: center;}
.staff-info .staff .info{position: relative;padding-left:54px;display:flow;flex:10;}
.staff-info .staff .info img{position: absolute;left:0;top:50%;width: 44px;transform: translateY(-50%);}
.staff-info .staff .info span{font-family: Pretendard;height: 19px;font-size: 12px;color:#565B64;display: block;}
.staff-info .staff .info span.name{font-size: 16px;font-weight: 600;height: 25px;}
.staff-info .staff .s-btns{display: flex;justify-content: flex-end;align-items: flex-end;flex: 9;}
.staff-info .staff .s-btns a{border-radius: 12px;background-color: #F3F6FB;font-family: Pretendard;font-weight: 500;line-height: 40px;padding:0 10px;max-width: 54px;text-align:center;}
.staff-info .staff .s-btns a + a{background-color: #E6EDFF;text-align:center;}

.rm-staff-info{background-color: #fff;border-radius: 16px;margin-top:8px;box-shadow: 0px 5px 12px 0px rgba(22, 37, 66, 0.05);}
.rm-staff-info .staff{margin:0 20px;padding:20px 0 16px 0;border-bottom:1px solid #F3F6FB;display: flex;justify-content: space-between;align-items: center;}
.rm-staff-info .staff .info{position: relative;padding-left:54px;display:flow;flex:10;}
.rm-staff-info .staff .info img{position: absolute;left:0;top:50%;width: 44px;transform: translateY(-50%);}
.rm-staff-info .staff .info span{font-family: Pretendard;height: 19px;font-size: 12px;color:#565B64;display: block;}
.rm-staff-info .staff .info span.name{font-size: 16px;font-weight: 600;height: 25px;color:#121619;}
.rm-staff-info .staff .s-btns{display: flex;justify-content: flex-end;align-items: flex-end;flex: 9;}
.rm-staff-info .staff .s-btns a{border-radius: 12px;background-color: #F3F6FB;font-family: Pretendard;font-weight: 500;line-height: 40px;padding:0 10px;max-width: 54px;text-align:center;}
.rm-staff-info .staff .s-btns a + a{background-color: #E6EDFF;text-align:center;}

@media (min-width: 481px) {
		.staff .s-btns a + a{margin-left: 8px;}
}

@media (max-width: 480px) {
	.staff .s-btns{flex-direction: column;flex: 3;}
	.staff .s-btns a{font-size: 14px;}
	.staff .s-btns a + a{margin-top: 5px;}
}

.q-btns{display: flex;padding:16px 20px;justify-content: space-between;}
.q-btns .ce{font-weight: 600;flex:7;}
.q-btns .ce span{display:inline-block;position: relative;padding-right: 10px;flex:4;}
/*
.q-btns .ce span::after{content:"";width: 7px;height: 7px;border:solid #121619;border-width: 1px 1px 0 0;position: absolute;right:0;top:50%;transform: translateY(-65%) rotate(45deg);}
*/
.q-btns .r-area{display: flex;}
.q-btns .r-area a{color:#565B64;position: relative;padding-right: 8px;margin-right: 8px;font-size: 13px;}
.q-btns .r-area a::after{content: "";width: 1px;height: 14px;background: #EBEFF5;position: absolute;right:0;top:50%;transform: translateY(-60%);}
.q-btns .r-area a:last-child{padding:0;margin: 0;}
.q-btns .r-area a:last-child::after{display: none;}

.benefit-info{background:#0040E8;border-radius: 16px;margin-top:16px;padding:20px 20px 0 20px;position: relative;}
.benefit-info *{color:#fff;}
.benefit-info .tit{font-size: 16px;font-family: "OneShinhan";font-weight: 500;margin-bottom:16px;}
.list-dot > li{font-size: 14px;position: relative;padding-left:12px;margin-top:8px;}
.list-dot > li::before{content: "";width: 4px;height: 4px;background: #fff;border-radius: 100%;position: absolute;left:0;top:8px;}
.list-dot > li strong{font-weight: 600;}
.list-dot2 > li{font-size: 13px;position: relative;padding-left:12px;margin-top:8px;}
.list-dot2 > li::before{content: "";width: 3px;height: 3px;background: #fff;border-radius: 100%;position: absolute;left:0;top:8px;}
.benefit-info .bg-img{position: absolute;right:0;top:0;width: 100px;}
.msg-blue-box{display: block;margin-top:10px;}
.msg-blue-box p{display:inline-block;border-radius: 8px;background:#005DF9;box-shadow: 2px 2px 5px 0px rgba(0, 51, 184, 0.50), -0.5px -0.5px 0.5px 0px #1539CB inset, 0.5px 0.5px 0.5px 0px rgba(255, 255, 255, 0.25) inset;position: relative;padding:4px 12px 4px 30px;}
.msg-blue-box p:before{content: "";width: 16px;height: 16px;background: url(../img/icon-benefit-coin.png) no-repeat;background-size:100% auto;position: absolute;left:10px;top:50%;transform: translateY(-50%);}
.msg-blue-box p::after{content: "";width: 9px;height: 7px;background:url(../img/icon-arrow-blue.png) no-repeat;background-size: 100% auto;position: absolute;left:19px;top:-6px;}
.msg-blue-box p span{font-size: 13px;}
.msg-blue-box .per{color:#FEDA4A;font-weight: 700;font-size: 18px;padding-left: 4px;}
.benefit-info .btn-detail{border-top:1px solid #005DF9;}
.benefit-info .btn-detail a{display: block;text-align: center;padding:14px 0;}
.benefit-info .btn-detail a span{display: inline-block;position: relative;padding-right:16px;}
.benefit-info .btn-detail a span::after{content: "";width: 7px;height: 7px;border:solid #fff;border-width: 0 1px 1px 0;position: absolute;right:0;top:50%;transform: translateY(-90%) rotate(45deg);transition: .3s}
.benefit-info .btn-detail a.on span::after{transform: translateY(-30%) rotate(225deg);}
.benefit-info .slide-area .list-dot{padding-bottom: 16px;}
.benefit-info .slide-area{overflow: hidden;height: 115px;}
.memo-info{background: #fff;box-shadow: 0px 5px 12px 0px rgba(22, 37, 66, 0.05);border-radius: 20px;margin-top:16px;padding:10px 20px 10px 20px;}
.memo-info .title {font-size: 16px;font-family: "OneShinhan";font-weight: 500;margin-bottom: 5px; font-weight:bold;}
.memo-info .content {font-size: 14px;font-family: "OneShinhan";margin: 0px;}
.product-info{background: #fff;box-shadow: 0px 5px 12px 0px rgba(22, 37, 66, 0.05);border-radius: 20px;margin-top:16px;padding:24px 20px;}
.tit-more{display: flex;justify-content: space-between;align-items: center;}
.tit-more p{font-family: OneShinhan;font-size: 16px;font-weight: 500;}
.tit-more a{position: relative;padding-right: 18px;color:#565B64;}
.tit-more a::after{content: "";width:14px;height:14px;position: absolute;right:0;top:50%;background:url(../img/icon-arrow-right.png) no-repeat;background-size: 100% auto;transform: translateY(-55%);}
.product-info .prod-list{}
.product-info .prod-list li{margin-top:20px;}
.product-info .prod-list li a{display: block;position: relative;padding:3px 0 2px 66px;}
.product-info .prod-list li img{width: 50px;position: absolute;left:0;top:50%;transform: translateY(-52%);}
.product-info .prod-list li span{display: block;color:#565B64;font-size: 13px;}
.product-info .prod-list li span.name{color:#121418;font-size: 16px;font-weight: 600;}

.white-area{background: #fff;margin:24px -24px 0 -24px;padding:24px;}
.story-list{margin-top:12px;}
.story-list li{border-bottom:1px solid #F3F6FB;}
.story-list li a{position: relative;padding:20px 0 20px 99px;display: block;}
.story-list li a::after{content: "";width:14px;height:14px;background:url(../img/icon-arrow-righ2.png) no-repeat;background-size:100% auto;position: absolute;right:0;top:50%;transform:translateY(-55%);}
.story-list li img{width: 86px;position: absolute;left:0;top:50%;transform: translateY(-50%);}
.story-list li span{display: block;color:#565B64;padding-right: 18px;}
.story-list li .title{font-size: 16px;font-weight: 600;color:#121418;}

.dividers-group {height: 10px;margin: 24px -24px;background-color: #F3F6FB;border: 0;}
.event-banner{margin-top:16px;overflow: hidden;}
.event-banner a{display: block;position: relative;height: 109px;overflow: hidden;border-radius: 16px;}
.event-banner img{height:100%;vertical-align: middle;position:absolute;left:50%;top:0;transform: translateX(-50%);}
.event-banner .eventPeriod{position: absolute;left:50%;top:82%;color:#fff;transform: translate(-50%, -50%);font-size: 14px;letter-spacing: -1px;margin-left:-63px;}
.event-banner .swiper-pagination{position: static;}
.event-banner .swiper-pagination .swiper-pagination-bullet{width: 6px;height: 6px;margin:0 2px !important;transition: .3s;}
.event-banner .swiper-pagination-bullet-active{width: 16px !important;border-radius: 9999px;background:#121418;}

.noti-list li{border-bottom: 1px solid #F3F6FB;margin-top:12px;}
.noti-list li a{display: block;padding:20px 24px 20px 0;position: relative;}
.noti-list li a span[class*='label']{display:inline-block ;font-size: 12px;background: #E6EDFF;color:#005DF9;font-weight: 700;padding:1.29px 6px 0 6px;border-radius: 9999px;vertical-align: middle;}
.noti-list li a span[class*='label'].new{background-color: #FFE7E7;color:#D61111;}
.noti-list li a span.tit{font-size: 16px;font-weight: 500;letter-spacing: -0.5px;vertical-align: middle;line-height: 20px;margin:0 0 0 0px;line-height: 1.6;}
.noti-list li a span.tit p{font-size: 13px;font-weight: 500;letter-spacing: -0.5px;vertical-align: middle;line-height: 20px;margin:0 0 0 0px;line-height: 1.6;}
.noti-list li a span.date{display: block;font-size: 13px;color:#808892;margin-top:4px;}
/*
.noti-list li a::after{content: "";width:14px;height:14px;background:url(../img/icon-arrow-righ2.png) no-repeat;background-size:100% auto;position: absolute;right:0;top:50%;transform:translateY(-55%);}
*/
.noti-list li:last-child{border: 0;}

.service-list{display: flex;justify-content: space-between;margin-top:28px;}
.service-list span{display: block;text-align: center;line-height: 1.43;font-weight: 500;}
.service-list .img{border-radius: 24px;border:1px solid #EBEFF5;background: #fff;box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.02);padding:9px;margin-bottom:8px;width: 64px;box-sizing: border-box;}
.service-list .img img{width: 44px;vertical-align: middle;}
.service-list .app .img{background: 0;border:0;box-shadow: none;padding:0;}
.service-list .app .img img{width: 64px;}

body.full #contents-area{min-height: 100vh;}
body.full #contents-area .container{padding:0;}
body.full .mid-area{position: fixed;left:0;top:50%;right:0;transform: translateY(-50%);text-align: center;}
body.full .mid-area .txt{font-size: 16px;color:#3A3F49;margin-top:28px}
body.full .mid-area .mt16 img{height: 20px; object-fit:contain;}

body.full .bot-area{position: fixed;left:0;bottom:52px;right:0;text-align: center;}
body.full .bot-area p{line-height: 0;}
body.full .bot-area img{height: 24px;vertical-align: middle;}


/* ============================================= error css ==================================================== */
.error { margin-top: 120px; text-align: center}
.error .stitle { font-size: 18px; color: #222;padding: 30px 0 0;}
.error .stxt { font-size: 14px; color: #666;padding: 10px 0;}
.error .btn { margin:40px auto;width: 190px; text-align: center; }
.error .btn a { border-radius: 30px; box-sizing: border-box; width: 190px;display: block; padding: 10px 0; vertical-align: middle; background:#6386db; color: #fff; font-size: 16px; }
.error .btn .arrow { width: 10px; height: 14px; float: right; margin-top: 3px; margin-right: 20px;
    background-image:url(../images/ico_arrow.png); 
    background-size:8px 14px; 
    background-position:0px 0px;  
    background-repeat:no-repeat; 
}
/* ============================================================================================================ */

/* ============================================== Æ©Å丮¾ó ===================================================== */ 
.tutorial { background: #fff; position: relative; padding-top: 10px; line-height: 1.3;}
.tutorial .close { float: right;}
.tutorial .close_btn {
    width: 20px; height:20px;
    background-image:url(../images/ico_pack.png); 
    background-size:100px 50px; 
    background-position:-80px -30px;  
    background-repeat:no-repeat;
    display: block;
    position: absolute; top: 15px; right: 15px;  text-indent: -999em;
    
}

.tutorial h1 {font-size: 20px; font-weight: 700; color: #000; padding: 30px 0 0 20px; font-family:'OneShinhanM' }
.tutorial h3 { font-size: 15px; font-weight: 700; color: #496ec8; }
.tutorial .sec { padding: 30px 20px; border-bottom: thin solid #ccc; }
.tutorial .box1 { padding: 16px 10px; margin: 12px 0 0;border:thin solid #ddd; box-sizing: border-box; border-radius:5px; background: #fafafa;position: relative;  }

.tutorial .box1 .part1 { display: inline-block; width: 49%; text-align: center; margin:10px auto;  }
.tutorial .box1 .part1 p { margin-top: 20px; color: #333; font-size: 14px;font-weight: 800;}
.tutorial .box1 .h_line { width: 1px; height: 70px; border-left:thin solid #ccc;margin:0 auto; position: absolute; top:45px; }
.tutorial .sec .txt1 { font-size: 13px; color: #666; padding-top:10px;}

.tutorial .box2 {padding: 0 10px; margin: 12px 0 0;border:thin solid #ccc; border-radius:5px; background: #fafafa;}
.tutorial .box2 .part3 { display: block; padding: 20px 0px; }
.tutorial .box2 .part3:first-child {border-bottom:thin solid #ccc; }

.tutorial .ico_area { float: left; width: 25%; padding-top: 5px;}
.tutorial .ico_area2 { float: left; width: 25%;  }
.tutorial .ico {background:url(../images/tuto_ico.png) no-repeat; background-size: 150px 250px; width: 50px; height: 50px; display: block;margin: 0 auto; text-indent: -999em; }
.tutorial .ico1 {background-position:0px 0px;}
.tutorial .ico2 {background-position:0px -65px;}
.tutorial .ico3 {background-position:0px -130px;}
.tutorial .ico4 {background-position:0px -195px;}
.tutorial .ico5 {background-position:-80px 0px;}
.tutorial .ico6 {background-position:-80px -65px;}

.tutorial .step {display: inline-block; width: 74%; }
.tutorial .step dt { color: #333; font-size: 14px; font-weight: 800; padding-bottom: 6px; }
.tutorial .step dd {font-size: 13px; color: #666; padding: 2px 0; margin-inline-start: 0px;}
.tutorial .arrow_ico {
    width: 24px; height: 12px;
    background-image:url(../images/ico_pack.png); 
    background-size:100px 50px; 
    background-position:-30px -35px;  
    background-repeat:no-repeat;
    display: block;
    margin: 15px auto 10px;
} 

.mt10{margin-top:10px;}
/* ============================================================================================================= */
/* =========================================== ¿µ¾÷Á¡ À̹ÌÁö modal ============================================== */
.modal, .modal-overlay, .modal-body{
	visibility:hidden;
	position:absolute;
	background:#fff;
}  
 
.modal.active{
	visibility:visible;
	text-align:center;  
	position:fixed;
	bottom:0%;  
/* 	left:4%;    */
	z-index:3;
	animation:fadeIn .5s cubic-bezier(0.165, 0.840, 0.440, 1.000) forwards;
}  

.modal-overlay.active{
	visibility:visible;
	position:fixed;
	top:0; 
	left:0;
	width:100%;  
	/* opacity:0.7; */
	z-index:1; 
	background:white;
	/* background:#131212; */
}
 
.modal-body.active{
	/* margin : 80px auto 0; */
	visibility:visible;
}
/* ========================================================================================================== */