﻿/* common.css */

/*웹폰트*/
@font-face {
    font-family: 'SpoqaHanSans-Bold';
    src: url("../fonts/Spoqa Han Sans Bold.ttf") format('opentype');
    src: url("../fonts/Spoqa Han Sans Bold.woff") format("woff");
    src: url("../fonts/Spoqa Han Sans Bold.woff2") format("woff2");
}
@font-face {
    font-family: 'SpoqaHanSans-Light';
    src: url("../fonts/Spoqa Han Sans Light.ttf") format('opentype');
    src: url("../fonts/Spoqa Han Sans Light.woff") format("woff");
    src: url("../fonts/Spoqa Han Sans Light.woff2") format("woff2");
}
@font-face {
    font-family: 'SpoqaHanSans-Regular';
    src: url("../fonts/Spoqa Han Sans Regular.ttf") format('opentype');
    src: url("../fonts/Spoqa Han Sans Regular.woff") format("woff");
    src: url("../fonts/Spoqa Han Sans Regular.woff2") format('woff2');
}
@font-face {
    font-family: 'SpoqaHanSans-Thin';
    src: url("../fonts/Spoqa Han Sans Thin.ttf") format('opentype');
    src: url("../fonts/Spoqa Han Sans Thin.woff") format("woff");
    src: url("../fonts/Spoqa Han Sans Thin.woff2") format("woff2");
}
@font-face {
    font-family: 'KoPubWorldBatang_Pro';
    src: url("../fonts/KoPubWorld Batang_Pro Light.otf") format('opentype');
    src: url("../fonts/KoPubWorld Batang_Pro Light.woff") format('woff');
    src: url("../fonts/KoPubWorld Batang_Pro Light.woff2") format('woff2');
}
.KoPubWorldBatang_Pro{font-family:KoPubWorldBatang_Pro!important;font-weight:400!important;}
.SpoqaHanSans-Regular{font-family:SpoqaHanSans-Regular;}
.NotoSansCJKkr-Regular {font-family: SpoqaHanSans-Regular;letter-spacing: -0.84px;}

/*user select none*/
body, div, p, td, a, button, lable, h1, h2, h3, h5, h6 {font-family: 'SpoqaHanSans-Light';-ms-user-select: none;-moz-user-select: -moz-none;-webkit-user-select: none;-khtml-user-select: none;user-select: none;}

/*ui-content padding 값*/
.ui-content {padding-top: 56px;padding-bottom: 0px;padding-left: 0px;padding-right: 0px;}

html{font-size:100%;height:100%;width:100%;}
body{background-color:#fff!important;}

.ui-body-a,.ui-overlay-a{background:#fff;border:none;}
/*word-break: keep-all;*/.html,body,div,span,h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,big,cite,code,del,dfn,em,ins,kbd,q,s,samp,small,strike,strong,sub,sup,tt,var,b,u,i,center,ol,ul,li{word-break:keep-all;}
/*text-shadow 변경.ui-overlay-a,.ui-page-theme-a,.ui-page-theme-a .ui-panel-wrapper{text-shadow:0 0 0 #f3f3f3;}*/

/*하단 버튼 공용css*/
.common_btn{background:#27837C!important;height:2em;display:block;width:100%;margin:0;padding-left:0;padding-right:0;color:#fff!important;text-shadow:none!important;font-weight:400!important;font-size:1.25em;text-align:center;line-height:2em;border-radius:0!important;border:none!important;font-family:SpoqaHanSans-Regular;}
.common2Line_btn{width: fit-content;margin: auto;font-size: 1.25rem;line-height: 21px;font-family: SpoqaHanSans-Regular;}
.common2Line_btn>:nth-child(1){text-align: left; font-family: SpoqaHanSans-Regular;}
.common2Line_btn>:nth-child(2){font-family: SpoqaHanSans-Regular;}
/*개인정보 수집이용내역 팝업*/
#popup-confirm{max-width:400px;min-width:325px;min-height:300px;height:auto;background-color:#FFF!important;padding:0;border-radius:10px!important;}
#popup-confirm > .ui-header{padding-top:0;padding-bottom:0;position:relative;height:3.1em;line-height:2.2em;border-bottom:1px solid #E6E6E6;color:#00332e;letter-spacing:-.9px;font-size:18px;font-weight:700;background:#FFF!important;border-radius:10px 10px 0 0!important;}
#pp_title{width:100%;max-height:500px;overflow:auto;font-size:15pt;padding:5px 0;text-align:center;display:none;}
#pp_desc{width:93%;max-height:500px;overflow:auto;padding:20px 10px;font-size:15px;letter-spacing:.1px;text-align:center;font-family:SpoqaHanSans-Regular;color:#0D0D0D; margin: auto;}
#pp_bt_ok{background:#F1F1F1!important;height:3em;display:inline-block;width:50%!important;padding:.7em 0;position:absolute;bottom:0;margin:0;text-shadow:none!important;font-size:20px;text-align:center;line-height:1.8em;border-radius:0 0 0 10px!important;border:none!important;font-family:SpoqaHanSans-Light!important;font-weight:700!important;color:#5A5A5A!important;letter-spacing:-.9px;}
#pp_bt_cancel{background:#C3E5E2!important;height:3em;display:inline-block;width:50%!important;padding:.7em 0;position:absolute;bottom:0;right:0;margin:0;text-shadow:none!important;font-size:20px;text-align:center;line-height:1.8em;border-radius:0 0 10px 0!important;border:none!important;font-family:SpoqaHanSans-Light!important;font-weight:700!important;color:#003e38!important;letter-spacing:-.9px;}
#pp_btn{width: 100%;background:#C3E5E2!important;color:#00332e!important;font-weight:700!important;height:2.9em;display:block;position: relative;max-width:100%;min-width:325px;bottom:0;margin:0;padding:0;text-shadow:none!important;font-size:20px;text-align:center;line-height:2.9em;border-radius:0 0 10px 10px!important;border:none!important;font-family:SpoqaHanSans-Light;}
#popup-confirm > a:hover{background:#fff !important;}
#popup-confirm >.ui-header > h1{line-height:30px !important;}
#pp_desc>table{vertical-align: top; border-collapse: collapse;}
#pp_desc>.sign{text-align: left; text-align: left;position: relative;top: 22px;}
#pp_desc>p{text-align: left;line-height: 23px;margin-left: 23px; margin-top:0px; margin-bottom: 0px;}
.pp_desc_emphasis{font-size: 18px;color: #38c;font-weight: bold;text-decoration: underline;}
#pp_caption{margin-top: 33px; margin-bottom: -2px;}
#pp_caption2{margin-top: 15px;font-size: 15px;color: #636363;line-height: 15px;font-family: SpoqaHanSans-Regular sans-serif; padding:0px 10px;}
#pp_desc>table>tbody>tr>td{vertical-align: middle; padding: 10px 3px;}

#pp_desc>table>tbody>tr>td{border: 1px solid #636363;}
/*에러팝업*/
#popup-error >.ui-header > h1{line-height:30px !important;}
#popup-error{max-width:400px;min-width:325px;min-height:300px;height:auto;background-color:#fff!important;padding:0;}
#popup-error > .ui-header{padding-top:0;padding-bottom:0;position:relative;height:3.1em;line-height:2.2em;border-bottom:1px solid #E6E6E6;color:#00332e;letter-spacing:-.9px;font-size:18px;font-weight:700;background:#FFF!important;border-radius:10px 10px 0 0!important;}
#ep_title{width:100%;height:unset;overflow:auto;font-size:15pt;padding:10px;}
#ep_desc{width:100%;max-height:500px;overflow:auto;font-size:.7rem;padding:10px;}
#popup-message{max-width:400px;min-width:325px;min-height:300px;height:auto;background-color:#FFF!important;padding:0;border-radius:10px!important;}
#popup-message > .ui-header{padding-top:0;padding-bottom:0;position:relative;height:3.1em;line-height:2.2em;border-bottom:1px solid #E6E6E6;color:#00332e;letter-spacing:-.9px;font-size:18px;font-weight:700;background:#FFF!important;border-radius:10px 10px 0 0!important;}
#mp_title{width:100%;max-height:500px;overflow:auto;font-size:15pt;padding:5px 0;text-align:center;display:none;}
#mp_desc{width:93%;max-height:500px;overflow:auto;padding:20px 10px;font-size:15px;letter-spacing:-.4px;text-align:center;font-family:SpoqaHanSans-Regular;color:#0D0D0D;}
#mp_btn{width: 100%;background:#C3E5E2!important;color:#00332e!important;font-weight:700!important;height:3em;display:block;position:absolute;max-width:100%;min-width:325px;bottom:0;margin:0;padding:0;text-shadow:none!important;font-size:20px;text-align:center;line-height:3em;border-radius:0 0 10px 10px!important;border:none!important;font-family:SpoqaHanSans-Light;}
#popup-error > a:hover{background:#fff !important;}
#popup-message > a:hover{background:#fff !important;}
#popup-message >.ui-header > h1{line-height:30px !important;}
/*로그인팝업*/
#popup-confirm{max-width:400px;min-width:325px;min-height:300px;height:auto;background-color:#FFF!important;padding:0;border-radius:10px!important;}
#popup-confirm > .ui-header{padding-top:0;padding-bottom:0;position:relative;height:3.1em;line-height:2.2em;border-bottom:1px solid #E6E6E6;color:#00332e;letter-spacing:-.9px;font-size:18px;font-weight:700;background:#FFF!important;border-radius:10px 10px 0 0!important;}
#cp_title{width:100%;max-height:500px;overflow:auto;font-size:15pt;padding:5px 0;text-align:center;display:none;}
#cp_desc{width:93%;max-height:500px;overflow:auto;padding:20px 10px;font-size:15px;letter-spacing:-.4px;text-align:center;font-family:SpoqaHanSans-Regular;color:#0D0D0D; margin: auto;}
#cp_bt_ok{background:#F1F1F1!important;height:3em;display:inline-block;width:50%!important;padding:.7em 0;position:absolute;bottom:0;margin:0;text-shadow:none!important;font-size:20px;text-align:center;line-height:1.8em;border-radius:0 0 0 10px!important;border:none!important;font-family:SpoqaHanSans-Light!important;font-weight:700!important;color:#5A5A5A!important;letter-spacing:-.9px;}
#cp_bt_cancel{background:#C3E5E2!important;height:3em;display:inline-block;width:50%!important;padding:.7em 0;position:absolute;bottom:0;right:0;margin:0;text-shadow:none!important;font-size:20px;text-align:center;line-height:1.8em;border-radius:0 0 10px 0!important;border:none!important;font-family:SpoqaHanSans-Light!important;font-weight:700!important;color:#003e38!important;letter-spacing:-.9px;}
#popup-confirm > a:hover{background:#fff !important;}
#popup-confirm >.ui-header > h1{line-height:30px !important;}
/*배경선택 화면*/
#sb_container {height: 25vh;display: flex; min-height: 150px;}
#sb_box1 {font-size: 0;width: 32%;margin-left: 0%;margin-right: 0%;display: inline-flex;height: 100%;background-image: url(../images/common/audio_background1.png)!important;background-repeat: no-repeat;background-size: cover;border-radius: 8px;}
#sb_box2 {font-size: 0;width: 32%;margin-left: 2%;margin-right: 2%;display: inline-flex;height: 100%;background-image: url(../images/common/audio_background2.png)!important;background-repeat: no-repeat;background-size: cover;border-radius: 8px;}
#sb_box3 {font-size: 0;width: 32%;margin-left: 0%;margin-right: 0%;display: inline-flex;height: 100%;background-image: url(../images/common/audio_background3.png)!important;background-repeat: no-repeat;background-size: cover;border-radius: 8px;}
#sb_check_box1 {display:none; background-image: url(../images/common//selectbox_cheked.png);width: 25px;height: 25px;background-size: cover;position: relative;top: 80%;left: 63%;}
#sb_check_box2 {display:none; background-image: url(../images/common//selectbox_cheked.png);width: 25px;height: 25px;background-size: cover;position: relative;top: 80%;left: 63%;}
#sb_check_box3 {display:none; background-image: url(../images/common//selectbox_cheked.png);width: 25px;height: 25px;background-size: cover;position: relative;top: 80%;left: 63%;}

/*배경선택 팝업*/
#popup-select{max-width:400px;min-width:325px;min-height:355px;height:auto;background-color:#FFF!important;padding:0;border-radius:10px!important;}
#popup-select > .ui-header{padding-top:0;padding-bottom:0;position:relative;height:3.1em;line-height:2.2em;border-bottom:1px solid #E6E6E6;color:#00332e;letter-spacing:-.9px;font-size:17px;font-weight:700;background:#FFF!important;border-radius:10px 10px 0 0!important;}
#sp_title{width:100%;max-height:500px;overflow:auto;font-size:15pt;padding:5px 0;text-align:center;display:none;}
#sp_desc{width:93%;max-height:500px;overflow:auto;padding:20px 10px;font-size:15px;letter-spacing:-.4px;text-align:center;font-family:SpoqaHanSans-Regular;color:#0D0D0D;}
#sp_bt_ok{background:#C3E5E2!important;height:3em;display:inline-block;padding:.7em 0;position:absolute;bottom:0;margin:0;text-shadow:none!important;font-size:20px;text-align:center;line-height:1.8em;border-radius:0 0 0 10px!important;border:none!important;font-family:SpoqaHanSans-Light!important;font-weight:700!important;color:#003e38!important;letter-spacing:-.9px;}
#sp_container{height: 170px; display: flex; width: 88%; margin-left: auto; margin-right: auto; margin-bottom: 20px;}
#sp_box1{font-size: 0;width: 32%;margin-left: 0%;margin-right: 0%;display: inline-flex;height: 100%;background-image: url(../images/common/audio_background1.png)!important;background-repeat: no-repeat;background-size: cover;border-radius: 8px;}
#sp_box2{font-size: 0;width: 32%;margin-left: 2%;margin-right: 2%;display: inline-flex;height: 100%;background-image: url(../images/common/audio_background2.png)!important;background-repeat: no-repeat;background-size: cover;border-radius: 8px;}
#sp_box3{font-size: 0;width: 32%;margin-left: 0%;margin-right: 0%;display: inline-flex;height: 100%;background-image: url(../images/common/audio_background3.png)!important;background-repeat: no-repeat;background-size: cover;border-radius: 8px;}
#popup-select > a:hover{background:#fff !important;}
#popup-select >.ui-header > h1{line-height:30px !important;}
#sp_check_box1{display:none; background-image: url(../images/common//selectbox_cheked.png);width: 25px;height: 25px;background-size: cover;position: relative;top: 80%;left: 63%;}
#sp_check_box2{display:none; background-image: url(../images/common//selectbox_cheked.png);width: 25px;height: 25px;background-size: cover;position: relative;top: 80%;left: 63%;}
#sp_check_box3{display:none; background-image: url(../images/common//selectbox_cheked.png);width: 25px;height: 25px;background-size: cover;position: relative;top: 80%;left: 63%;}
/*ep 팝업*/
#popup-error {
	max-width: 400px;
	min-width: 325px;
	min-height: 300px;
	height: auto;
	background-color: #FFF !important;
	padding: 0;
	border-radius: 10px !important;
}
#popup-error > .ui-header{padding-top:0;padding-bottom:0;position:relative;height:3.1em;line-height:2.2em;border-bottom:1px solid #E6E6E6;color:#00332e;letter-spacing:-.9px;font-size:18px;font-weight:700;background:#FFF!important;border-radius:10px 10px 0 0!important;}
#ep_title{width:100%;max-height:500px;overflow:auto;font-size:15pt;padding:5px 0;text-align:center;display:none;}
#ep_desc{width:93%;max-height:500px;overflow:auto;padding:20px 10px;font-size:15px;letter-spacing:-.4px;text-align:center;font-family:SpoqaHanSans-Regular;color:#0D0D0D;}
#ep_btn{width:100%;background:#C3E5E2!important;color:#003e38!important;font-weight:700!important;height:3em;display:block;position:absolute;max-width:400px;min-width:325px;bottom:0;margin:0;padding:0;text-shadow:none!important;font-size:20px;text-align:center;line-height:3em;border-radius:0 0 10px 10px!important;border:none!important;font-family:SpoqaHanSans-Light;}

/*팝업 버튼 로그인css 충돌 방지*/
#popup-message > .ui-btn{background-color:#fff!important;}
.ui-icon-loading{background-size:1.8em 1.8em;background-image:url(images/ajax-loader.png);width:1.8em!important;height:1.8em!important;margin:.5em!important;-webkit-animation:loading_spin .5s linear infinite;animation:loading_spin .5s linear infinite;}
.ui-loader .ui-icon-loading{background-color:transparent!important;background-position:center;background-repeat:no-repeat;}
.ui-loader-default{background-color:#c4e5e270!important;filter:Alpha(Opacity=100);opacity:1.0;}
.ui-loader{margin-left:-1.4375em!important;margin-top:-1.4375em!important;border:none!important;box-shadow:0 0 5px #92adaab8;}

/*집중도팝업창 height 수정*/
#SUDS_final_popup{min-height: 100% !important;}

/*로딩 키프레임*/
@-webkit-keyframes loading_spin {0% {-webkit-transform: rotate(0deg);}100% {-webkit-transform: rotate(360deg);}}
@keyframes loading_spin {0% {transform: rotate(0deg);}100% {transform: rotate(360deg);}}

.ui-popup-screen {background-color: #000 !important;opacity: 0.75 !important;}

/*margin, padding, height등 지정값*/
.width63{width: 63% !important;	text-align: center;}
.width66{width: 66% !important;	text-align: center;}
.width75{width: 75% !important;	text-align: center;}
.width80{width: 80% !important;	text-align: center;}
.marginAuto{margin-left:auto!important;margin-right:auto!important;}
.heightAuto{height:auto!important;}
.height100{height:100%!important;}
.font-weight600{font-weight:600;}
.font-weight500{font-weight:500;}
.font-weight400{font-weight:400;}
.font-weightBold{font-weight:700;}
.font-size20px{font-size:20px!important;font-size:1.25rem!important;}
.table-container{display:table;}
.width100p{width:100%;}
.width165px{width:165px;}
.table-row{display:table-row;}
.padding1{padding:1px;}
.padding6{padding:6px;}
.padding12{padding:12px;}
.padding20{padding:20px;}
.paddingLeft0{padding-left:0;}
.paddingLeft6{padding-left:6px;}
.paddingRight6{padding-right:6px;}
.paddingRight9{padding-right:9px;}
.paddingLeft9{padding-left:9px;}
.paddingLeft12{padding-left:12px;}
.paddingRight12{padding-right:12px;}
.paddingRight16{padding-right:16px;}
.paddingLeft16{padding-left:16px;}
.paddingBottom6{padding-bottom:6px;}
.paddingBottom12{padding-bottom:12px;}
.paddingBottom16{padding-bottom:16px;}
.paddingTop2{padding-top:2px;}
.paddingTop6{padding-top:6px;}
.paddingTop12{padding-top:12px;}
.paddingTop20{padding-top:20px !important;}
.marginLeft5{margin-left: 5px;}
.maginLeft1em{margin-left:1em!important;}
.maginLeft2em{margin-left:2em!important;}
.maginLeft24{margin-left:24px;}
.marginTop12{margin-top:12px;}
.marginTop17{margin-top:1.063em!important;}
.marginTop20{margin-top: 20px;}
.marginTop25{margin-top: 25px;}
.marginTop40{margin-top: 40px !important;}
.marginTop80{margin-top: 80px;}
.marginTop10px{margin-top:10px;}
.marginBottom10{margin-bottom:10px;}
.marginBottom15{margin-bottom:15px;}
.marginBottom20{margin-bottom:20px;}
.lineHeight3em{line-height:3em!important;}
.height64{height:4rem;}
.textAlignCenter{text-align:center!important;}
.textAlignLeft{text-align:left!important;}
.textright{display:block!important;text-align:right!important;text-align:0!important;}
.table-cell{display:inline-table;vertical-align:middle;text-align:center;overflow:hidden;}
.line-height67px{line-height:67px;}
.debugBorder{border:dotted 1px red;}
.lineHeight325{line-height:3.25em!important;}
.lineHeight27{line-height:2.7em!important;}
.lineHeight325rem{line-height:3.25rem!important;}
.marginLeft325em{margin-left:3em!important;}
.marginLeft225rem{margin-left:2.25rem!important;}
.marginRight15rem{margin-right:1.5em!important;}
.marginRight10rem{margin-right:1em !important;}
.marginLeft15rem{margin-left:1.5rem!important;}
.marginBottom40{margin-bottom:40px !important;}
.margin0{margin:0!important;}
.absolute{position:absolute!important;}
.top18em{top:1.8em;}
.textAlignCenter{text-align:center;}
.textAlignRight{text-align:right;}
.maginLeft27em{margin-left:2.7em!important;}
.borderNone{border:none;}
.fontSize16{font-size:1rem !important;}
.fontSize20{font-size:1.25rem;}
.fontSize24{font-size:1.5rem;}
li.fontSize14{font-size:.875rem;}
li.letterSpacing84{letter-spacing:-.84px;}
li.lineHeight24{line-height:1.5rem;}
ul.padding22{padding:1.375rem;}
.bottom10px{padding-bottom:10px;}
.bottom67{bottom: 67px !important;}
.letter-spacing-08{letter-spacing:-.8px;}
.displayFlex{display: flex;}
.widthAuto{width: auto !important;}
.maxWidth320{max-width: 320px;}
.maxWidth281{max-width: 281px;}
/*/패널 백그라운드*/
.ui-page-theme-a, .ui-page-theme-a .ui-panel-wrapper {
	background-color: #FFFFFF !important;
}
.ui-panel {background-color: #FBFBFB !important}

/* header */
.ui-header{border:none;height:40px;padding-top:.5em;padding-bottom:.5em;position:fixed;z-index:10;width:100%;}
.ui-header > a,.ui-header > button{background-color:transparent!important;border:none!important;box-shadow:none!important;top:5px!important;border-radius:0!important;-webkit-border-radius:0!important;width:50px !important;height:50px !important;}
.ui-header > a:after,.ui-header > button:after{background-color:transparent!important;border-radius:0!important;-webkit-border-radius:0!important;}
.ui-header > .header_center > a,.ui-header > button{background-color:transparent!important;border:none!important;box-shadow:none!important;top:.9em!important;border-radius:0!important;-webkit-border-radius:0!important;}
.ui-header > .header_center > a:after,.ui-header > button:after{background-color:transparent!important;border-radius:0!important;-webkit-border-radius:0!important;}
.ui-header > h1{font-family:SpoqaHanSans-Regular;font-size:18px!important;line-height:18px;}
/*ui-btn 위치, 이미지 변경*/
.ui-btn-left{left:.7em!important;}
.ui-btn-right{right:1em!important;top:14px!important;}
.ui-icon-carat-l:after{background-image:url(../images/common/back_btn.png);background-color:#fff;}
.ui-icon-delete:after{background-image:url(../images/common/exit_icon.png);background-color:#FFF!important;}
.ui-icon-info:after{background-image:url(../images/common/book.png);background-position:center;}
/*back_btn_white*/
.ui-icon-carat-r:after {background-image: url("../images/common/back_btn_white.png");background-repeat: no-repeat;}
/* header 끝*/

/*헤더 title*/
h2{height:24px;width:auto;max-width:100%;max-height:100%;text-align:center;font-family:SpoqaHanSans-Regular sans-serif;font-size:18px;color:#222;top:3px;left:auto;right:auto;margin-left:auto;margin-right:auto;}
.header_logo{background:url(../images/common/logo.png) no-repeat;background-size:cover;height:34px;width:35px;display:inline-block;position:absolute;top:11px;left:17.75px;}

/*헤더 메뉴*/
.header_menu{background:url(../images/common/menu_icon.png) no-repeat;background-size:cover;height:15px;width:20px;display:inline-block;position:fixed;top:23px;right:19px;}

/*패널*/
/*패널 회원가입,로그인 위치조정*/.panel-btn-position{position: relative; display:inline-flex; bottom:5px;}
/*패널 색상변경*/.ui-panel-inner{background:#FBFBFB!important;height:64px;padding:0;}
/*패널 닫기 아이콘*/.panel_close{background:url(../images/common/exit_icon.png)center no-repeat;background-size:auto;height:37px;width:37px;display:inline-block;position:absolute;top:.7rem;right:1rem;}
/*패널 타이틀 이미지*/
.panel_title {background: url(../images/common/menu.png) no-repeat;background-size: cover;height: 24px;width: 72px;display: block;position: relative;left: 50px;top: 14px;}
/*패널 홈로고 아이콘*/.panel_logo{background:url(../images/common/logo.png) no-repeat;background-size:cover;height:2.125rem;width:2.25rem;display:inline-block;position:absolute;top:.6875rem;left:1.25rem;}
/*패널 뒤로가기 아이콘*/.header_back_btn{background:url(../images/common/back_btn.png) no-repeat;background-size:cover;height:15px;width:10px;display:inline-block;position:absolute;top:23px;left:20px;}
/*패널 그리드 영역*/.panel-grid-container{display:grid;grid-template-columns:100%;grid-template-columns:100%;height:auto;}
.panel-grid-item{text-align:left;display:inline-block;}
.panel-grid-item:focus{outline: none;}
.panel-grid-txt{display:inline-block;}
/*패널 오른쪽 화살표 아이콘*/.panel-grid-icon{background:url(../images/common/right_arrow.png) no-repeat;background-size:cover;height:9px;width:7px;display:inline-block;position:absolute;top:auto;right:25px;margin-top:7px;}
/*패널 하트 아이콘*/.panel-grid-icon2{background:url(../images/common/heart_icon.png) no-repeat;background-size:cover;height:10px;width:11px;display:inline-block;position:absolute;top:auto;right:25px;margin-top:7px;}
/*패널 하단 로그인,회원가입 영역*/.panel-grid-container2{display:grid;grid-template-columns:50% 50%;height:65px;width:100%;background-color:#F2F2F2;border:.5px solid #D4D4D4;}
/*패널 하단 물음표 아이콘*/.panel-grid-icon3{    background: url(../images/common/ICO_guide2.png) no-repeat;background-size: cover;height: 13px;width: 9px;display: inline-block;position: absolute;top: auto;right: 25px;margin-top: 5px;}
.panel-grid-item2{text-align:center;display:inline-block;border-right:.5px solid #D4D4D4;}
.panel-login-icon{background:url(../images/common/slidemenu_login.png) no-repeat;background-size:cover;height:24px;width:24px;display:inline-flex;position:relative;}
.panel-singup-icon{background:url(../images/common/slidemenu_join.png) no-repeat;background-size:cover;height:24px;width:24px;display:inline-flex;position:relative;}
.panel_headr{height:64px;}
.panel_content{height:auto;}
.panel_footer{height:65px;}
.positionFixed{position:fixed;}

/*li 이미지 변경*/
li.check {list-style:none;}
.li-check {background-image: url(../images/common/check.png);background-size: cover;width: 11px;height: 10px;position: relative;top: 18px;right: 19px;}

/*ui-shadow css 변경*/
.ui-shadow {-webkit-box-shadow: 0 0 0 rgba(0,0,0,.0);-moz-box-shadow: 0 0 0 rgba(0,0,0,.0);box-shadow: 0 0 0 rgba(0,0,0,.0);}

/*헤더, 푸터 색상 변경*/
.ui-bar-a, .ui-page-theme-a .ui-bar-inherit, html .ui-bar-a .ui-bar-inherit, html .ui-body-a .ui-bar-inherit, html body .ui-group-theme-a .ui-bar-inherit {background-color: #ffffff ;}
/*메뉴바 아이콘 이미지 변경*/
.ui-icon-bars:after {background-image: url("../images/common/menu_icon.png") !important;}
.white_bar:after {background-image: url("../images/common/menu_icon_white.png") !important;}

/*a태그 클릭시 css 변경 효과*/
.ui-page-theme-a .ui-btn.ui-btn-active, html .ui-bar-a .ui-btn.ui-btn-active, html .ui-body-a .ui-btn.ui-btn-active, html body .ui-group-theme-a .ui-btn.ui-btn-active, html head + body .ui-btn.ui-btn-a.ui-btn-active, .ui-page-theme-a .ui-checkbox-on:after, html .ui-bar-a .ui-checkbox-on:after, html .ui-body-a .ui-checkbox-on:after, html body .ui-group-theme-a .ui-checkbox-on:after, .ui-btn.ui-checkbox-on.ui-btn-a:after, .ui-page-theme-a .ui-flipswitch-active, html .ui-bar-a .ui-flipswitch-active, html .ui-body-a .ui-flipswitch-active, html body .ui-group-theme-a .ui-flipswitch-active, html body .ui-flipswitch.ui-bar-a.ui-flipswitch-active, .ui-page-theme-a .ui-slider-track .ui-btn-active, html .ui-bar-a .ui-slider-track .ui-btn-active, html .ui-body-a .ui-slider-track .ui-btn-active, html body .ui-group-theme-a .ui-slider-track .ui-btn-active, html body div.ui-slider-track.ui-body-a .ui-btn-active {background-color: #99CBC7;border-color: none !important;color: #ffffff;text-shadow: none !important;box-shadow: none !important;opacity:0.8;}

/*button 클릭시 css 변경 효과*/
.ui-page-theme-a .ui-btn:focus, html .ui-bar-a .ui-btn:focus, html .ui-body-a .ui-btn:focus, html body .ui-group-theme-a .ui-btn:focus, html head + body .ui-btn.ui-btn-a:focus, .ui-page-theme-a .ui-focus, html .ui-bar-a .ui-focus, html .ui-body-a .ui-focus, html body .ui-group-theme-a .ui-focus, html head + body .ui-btn-a.ui-focus, html head + body .ui-body-a.ui-focus {border-color: none;text-shadow: none !important;box-shadow: none !important;}

/*메뉴바 보더라인 변경*/
.ui-group-theme-a .ui-btn {border: none !important;}

/*보더 변경*/
.ui-btn-icon-notext.ui-btn-corner-all, .ui-btn-icon-notext.ui-corner-all {border-radius: 0 !important;border: none;background: none;}

/*공통title 관련 css*/.title{font-size:1.5em;display:block;font-family:SpoqaHanSans-Light;margin-bottom:1.125rem;margin-top:1.125rem;color:#434343;font-family:KoPubWorldBatang_Pro!important;font-weight:400!important;letter-spacing:-1.44px;}
/*공통li 관련 css*/.common_li{text-align:left;font-size:15px;letter-spacing:-.8px;color:#787878;margin-bottom:0.75rem;line-height:1.6rem;}
/*공통btn 관련 css*/.PTSD_btn{background:#E3F3F1!important;border-radius:10px!important;border:0!important;padding-left:0;color:#00332e!important;text-shadow:none!important;font-weight:400!important;font-size:1em;border:none!important;font-family:SpoqaHanSans-Regular;height:1.5em;width:87.2%;margin-left:auto;margin-right:auto;line-height:1.5!important;letter-spacing: -.8px;}
.PTSD_btn2{background:#fff!important;padding-left:0;color:#5E5E5E!important;text-shadow:none!important;font-weight:400!important;font-size:1.25em;border:none!important;font-family:SpoqaHanSans-Regular;height:3.4em;width:auto;margin-left:auto;margin-right:auto;border-radius:0!important;}
.right_arrow{background:url(../images/common/right_arrow.png) no-repeat;background-size:cover;height:12px;width:8px;display:inline-block;position:absolute;max-width:100%;max-height:100%;right:.75em;top:2.25em;}
.right_arrow2{background:url(../images/common/right_arrow.png) no-repeat;background-size:cover;height:12px;width:8px;display:inline-block;position:absolute;max-width:100%;max-height:100%;right:.75em;top:1.85em;}
.alignLeft{text-align:left!important;margin-left:3em;}
.next_btn{background:url(../images/common/next_btn.png) no-repeat;background-size:cover;height:12px;width:8px;display:inline-block;position:absolute;max-width:100%;max-height:100%;right:.75em;top:1.15em;}
.inline-block {display: inline-block;}
.width-unset{width:unset !important;}
.progressbtn {display: block;width: 90%;margin: auto;background: #E3F3F1;padding: 20px;box-sizing: border-box;border-radius: 6px;text-align: center;color: #00332e;font-weight: 600;letter-spacing: -0.81px;position: relative;margin-top: 10px;border: 0px;}

/*일러스트 영역*/
.img_wrapper {width: 100%;height: auto;}
.img_wrap{width:100%;height:auto;margin-left:auto;margin-right:auto;padding-top:1.375em;padding-bottom:1.375em;}
.bottom_img_wrap{width:100%;height:auto;margin-left:auto;margin-right:auto;padding-top:0;}
.bottom_img_wrap > img{width:100%;height:auto;}
.bottom_img_wrap2{width:100%;height:auto;margin-left:auto;margin-right:auto;padding-top:1.375em;}

/*텍스트 강조효과*/
.text_emphasis {background-color: #A6D6D3;}

/*textarea Css*/
.textareastyle {margin-left: auto;margin-right: auto;width: 87.2% !important;height: 65%;margin-top: 0em;margin-bottom: 0em;}

/*공용폰트컬러*/
.color3E3E3E {color: #3E3E3E !important;}
.color333333 {color: #333333 !important;}
.color555555 {color: #555555 !important;}

/*백그라운드컬러*/
.background-colorF5F5F5 {background-color: #F5F5F5 !important}

/*동영상 재생 백그라운드*/
.blackBG {background-color: #000;}

/*stab.html 공용css*/
.li_img {background: url(../images/common/check2.png) no-repeat; background-size: cover; height: 6px; width: 7.5px; display: inline-block; position: relative; top: 18px; left: 23px;}
.li_img2 {background: url(../images/common/check2.png) no-repeat; background-size: cover; height: 6px; width: 7.5px; display: inline-block; position: relative; top: 16px;}
.stab_li {text-align: left; font-size: 15px; letter-spacing: -0.8px; color: #3E3E3E; margin-bottom: 1rem; line-height: 1.5rem;}
.stab_margin {margin-left: 2.313rem; margin-right: 1.375rem;}
.marginTop-0 {margin-top: 0px;}
.marginTop-35 {margin-top: -35px;}
.marginTop-20 {margin-top: -20px;}
.marginTop10 {margin-top: 10px}
.marginBottom-20 {margin-bottom: 20px;}
.stab_title { background: #E3F3F1; width: 100%; height: 37px; opacity: 1; text-align: center; font-size: 0.875em; color: #434343; letter-spacing: -0.84px; text-shadow: 0px 0px 6px #00000008; line-height: 35px; padding-top: 2px;}
.stab_do_text {text-align: center; font-size: 0.875rem; letter-spacing: -0.7px; color: #434343; line-height: 28px; margin-top: 15px; margin-bottom: -3px;}

/* 로고 있는 텍스트 박스  marginAuto  */
.stab_wrapper{background:#F6F6F6;/* width: 87.5%;   */margin-left:1.375rem!important;margin-right:1.375rem!important;font-family:SpoqaHanSans-Regular;color:#555;font-size:14px;font-weight:700;text-align:center;line-height:22px;word-break:keep-all;height:auto;padding-left:10px;padding-right:10px;padding-bottom:10px; letter-spacing:-0.8px}
.stab_logo_png {width: 21px; height: 20px; margin-bottom: 20px; position: relative; top: 11px; line-height: 18px; letter-spacing: -0.6px;}
.width88 {width: 88% !important; margin-left: auto; margin-right: auto; word-break: keep-all;}
.stab_text_wrapper {text-align: left; font-family: SpoqaHanSans-Regular; font-size:0.875em; color: #555555; font-weight: bold; line-height: 24px;}
.illustration {background-size: cover; width: 100%; max-width:600px; height: auto;}
.margin-top-bottom0{margin-top:0em; margin-bottom:0em;}
.inputstyle {height: 47px;text-align: left;font-family: SpoqaHanSans-Light;font-size: 0.813em;color:#000!important;border: 0.5px solid #D2D2D2;border-radius: 3px;background: #FBFBFB;font-weight: 600;}
.inputstyle2 {height: 40px;text-align: left;font-family: SpoqaHanSans-Medium;font-size: 0.813em;color: #000 !important;border: 0.5px solid #D2D2D2;border-radius: 3px;background: #FBFBFB !important;font-weight: 600}

.division_btn {background: #27837c ; background-color: #27837c  !important; height: 2em;display: inline-block;width: 49% !important;padding: 0.7em 0px;position: relative;width: 100%;margin: 0em;text-shadow: none !important;font-weight: normal !important;font-size: 1em;text-align: center;line-height: 2em;border-radius: 5px !important;border: 0.5px solid #BFBFBF;font-family: SpoqaHanSans-Regular !important;color: #ffffff !important;letter-spacing: 0;}
.absolute_bottom1em {position: absolute;bottom: 1em;right: 5.5%;}
.greycolor {background: #0000008C !important;}
.min-height38em {min-height: 38em !important;}
.min-height40em {min-height: 40em !important;}
.min-height42em {min-height: 42em !important;}
.height100 {height: 100px !important;}

/*강조 텍스트*/
.emphasis_text{font-size:17px;text-align:left;padding-left:20px;padding-right:20px;box-sizing:border-box;word-break:keep-all;width:88%;height:auto;line-height:50px;margin-left:auto;margin-right:auto;background:#fff!important;color:#00332e;border-radius:5px;border:1px solid #B1D2CF;font-weight:600!important;}
.myResourceText{font-size:17px;text-align:center;padding-left:20px;padding-right:20px;box-sizing:border-box;word-break:keep-all;width:88%;height:50px;line-height:50px;margin-left:auto;margin-right:auto;margin-top:20px;margin-bottom:20px;background:#fff!important;color:#00332e;border-radius:5px;border:1px solid #B1D2CF;font-weight:600!important;}
.emphasis_text2{font-size:15px;text-align:left;font-family:KoPubWorldBatang_Pro;word-break:keep-all;width:auto;height:auto;line-height:40px;margin-left:auto;margin-right:auto;background:#27837c !important;color:#fff;padding:0 10px;}

/*오디오 배경 이미지*/
.display-none{display:none!important;}
.noBackground{background:none!important;}
.audio_background_img1{background:url(../images/common/audio_background1.png);background-repeat:no-repeat;background-size:cover;}
.audio_background_img2{background-image:url(../images/common/audio_background2.png);background-repeat:no-repeat;background-size:cover;}
.audio_background_img3{background-image:url(../images/common/audio_background3.png);background-repeat:no-repeat;background-size:cover;}
.audio_background_img4{background-image:url(../images/common/audio_background4.png);background-repeat:no-repeat;background-size:cover;}

/*오디오 관련 css*/
.audio_title{font-family:KoPubWorldBatang_Pro;font-size:24px;letter-spacing:.48px;color:#FFF;text-shadow:0 1px 2px #000;line-height:18px;text-align:center;position:absolute;bottom:-34px;left:50%;transform:translateX(-50%);}
.audio_fulltime{border-radius:15px;background:rgba(255,255,255,0.22);height:29px;width:102px;}
.audio_title_wrap{position:absolute;left:50%;transform:translateX(-50%);top:27%;}
.audio_fulltime_text{font-family:SpoqaHanSans-Light;text-align:center;font-size:15px;line-height:18px;letter-spacing:1px;color:#FFF;text-shadow:0 1px 2px #000;position:relative;top:5px;}
.audio_wrap{border-radius:33px;background:rgba(0,0,0,0.4);height:66px;width:340px;position:absolute;left:50%;transform:translateX(-50%);bottom:3%;}
.audio_playPause{background-image:url(../images/common/stopbtn.png);background-size:cover;width:45px;height:45px;position:relative;left:16px;top:11px;}
.playPause{background-image:url(../images/common/playbtn.png)!important;background-size:cover;width:45px;height:45px;position:relative;left:16px;top:11px;}
.audio_mute{background-image:url(../images/common/soundon.png);background-size:cover;width:24px;height:20px;position:relative;bottom:22px;left:260px;}
.audio_delete{background-image:url(../images/common/soundoff.png);background-size:cover;width:24px;height:20px;position:relative;bottom:22px;left:260px;}
.audio_currentTime{font-family:SpoqaHanSans-Regular;letter-spacing:-.4px;color:#FFF;font-size:12px;position:absolute;height:18px;display:inline-block;bottom:33px;left:82px;}
.audio_duration{font-family:SpoqaHanSans-Regular;letter-spacing:-.4px;color:#FFF;font-size:12px;position:absolute;height:18px;display:inline-block;bottom:33px;left:213px;}
.progressbar{display:block;background-color:rgba(255,255,255,1);width:161px;height:6px;border-radius:10px;position:absolute;left:50%;transform:translateX(-50%);bottom:45%;}
.downloadValue{display:block;height:2px;background-color:#696969;}
.progressValue{display:block;background-color:rgba(149,225,225,1);height:6px;border-radius:10px;}
.selectBG {background-image: url(../images/common/selectBackground.png);background-size: cover;width: 24px;height: 20px;position: relative;bottom: 44px;left: 295px;}

/*320px*/
@media all and (max-width:320px) {
.trauma_content{height:639px!important;}
.fontSize20{font-size:1.125rem;}
.text_position{position:relative;top:1.4rem;}
#popup-confirm{max-width:400px;min-width:288px;min-height:285px;height:auto;background-color:#FFF!important;padding:0;border-radius:10px!important;}
#popup-error{max-width:400px;min-width:288px;min-height:285px;height:auto;background-color:#FFF!important;padding:0;border-radius:10px!important;}
#popup-message{max-width:400px;min-width:288px;min-height:285px;height:auto;background-color:#FFF!important;padding:0;border-radius:10px!important;}
#popup-select {max-width: 400px;min-width: 288px;min-height: 355px;height: auto;background-color: #FFF!important;padding: 0;border-radius: 10px!important;}
#mp_btn{background:#C3E5E2!important;color:#00332e!important;font-weight:700!important;height:3em;display:block;position:absolute;max-width:400px;min-width:288px;bottom:0;margin:0;padding:0;text-shadow:none!important;font-size:20px;text-align:center;line-height:3em;border-radius:0 0 10px 10px!important;border:none!important;font-family:SpoqaHanSans-Light;}
#ep_btn{background:#C3E5E2!important;color:#00332e!important;font-weight:700!important;height:3em;display:block;position:absolute;max-width:400px;min-width:288px;bottom:0;margin:0;padding:0;text-shadow:none!important;font-size:20px;text-align:center;line-height:3em;border-radius:0 0 10px 10px!important;border:none!important;font-family:SpoqaHanSans-Light;}
#pp_btn{background:#C3E5E2!important;color:#00332e!important;font-weight:700!important;height:3em;display:block;position:absolute;max-width:400px;min-width:288px;bottom:0;margin:0;padding:0;text-shadow:none!important;font-size:20px;text-align:center;line-height:3em;border-radius:0 0 10px 10px!important;border:none!important;font-family:SpoqaHanSans-Light;}
}
/*360px*/
@media all and (max-width:360px) {
.ui-header > h1{font-family:SpoqaHanSans-Regular;font-size:17px!important;}
.audio_wrap{border-radius:33px;background:rgba(0,0,0,0.4);height:66px;width:316px;position:absolute;left:50%;transform:translateX(-50%);bottom:3%;}
.audio_mute{background-image: url(../images/common/soundon.png);background-size: cover;width: 22px;height: 18px;position: relative;bottom: 21px;left: 252px;}
.selectBG {background-image: url(../images/common/selectBackground.png);background-size: cover;width: 22px;height: 18px;position: relative;bottom: 40px;left: 283px;}
.audio_delete{background-image:url(../images/common/soundoff.png);background-size:cover;width:22px;height:18px;position:relative;bottom:21px;left:252px;}
.audio_playPause {background-image: url(../images/common/stopbtn.png);background-size: cover;width: 43px;height: 43px;position: relative;left: 16px;top: 12px;}
}
/*1024px*/
@media all and (min-width:1023px) {
    /*
.common_btn2{background:#27837c !important;height:2em;display:block;position:absolute;width:100%;bottom:0;margin:0;padding-left:0;color:#fff!important;text-shadow:none!important;font-weight:400!important;font-size:1.25em;text-align:center;line-height:2em;border-radius:0!important;border:none!important;font-family:SpoqaHanSans-Light;}
        */
.ui-content{ min-height:37.875em;}

}
.ui-title {margin-left: 3.2em !important;margin-right: 3.2em !important;}

/*페이지 메인 푸터구분*/
.__pageMainFooterDivisionContainer{display:grid;grid-template-rows:auto min-content;/*position:absolute;*//*top:64px;
	bottom:0;*/margin:0;padding:0;width:100%;/*height:calc(100vh - 64px);*/}
.__pageMainContainer{margin:0;padding:0;position: relative}
.__pageFooterContainer{margin:0;padding:0;}

/*공용 active*/
.panel-grid-container2 :active {opacity: 0.8;background: #6FBFB969;}
.panel-grid-container :active{opacity: 0.8;background: #f6f6f6;}
.ui-icon-bars:active{opacity: 0.5;}
.ui-icon-carat-l:active{opacity: 0.5;background:#ffffff !important;}
.common_btn:active{opacity: 0.8 !important;}
.PTSD_btn :active {opacity: 0.8;}
.history_btn_active :active {opacity: 0.8;background: #6FBFB969 !important;color: #2A5D58 !important;}
.history_btn :active {opacity: 0.8;background: none !important;}
.homework_btn2 :active {opacity: 0.8;background-color: #6FBFB969 !important;}
.greycolor:active {opacity: 0.8;background: #f6f6f6;}

/*패널 active*/
.panel_logo:after {opacity: 0.5;background: #C3E5E2 !important;}
.panel_close{opacity:0.5;}

/*공용 hover*/
.btn_hover {transition: all 0.9s;}
.btn_hover:hover {}
.hover1:hover {box-shadow: 550px 0 50px 50px rgba(230, 230, 230, 8) inset;}

/*오버플로우 히든*/
.overflowHidden{overflow-x: hidden;}

/*stab_skip 버튼*/
.stab_skip {position: absolute;top: 0;right: 0px;width: 59px;height: 39px;}
.stab_skip_img {width: 59px;height: 39px;}
.stab_skip :after {opacity: 0.5;}
.stab_skip :hover {opacity: 0.5;}

/*음성가이드 버튼 */
.voice_wrapper{position: fixed;max-width: 1100px; margin: auto;text-align: right;height: 72px;bottom:67px;right: 0px; z-index: 999;}
.voice_wrapper_medium{position: fixed;max-width: 1100px; margin: auto;text-align: right;height: 72px;bottom: 120px;right: 0px; z-index: 999;}
.voice_wrapper_medium194{position: fixed;max-width: 1100px; margin: auto;text-align: right;height: 72px;bottom: 194px;right: 0px; z-index: 999;}
.voice_wrapper_long{position: absolute;max-width: 1100px; margin: auto;text-align: right;height: 72px;top: 33vh;right: 0px; z-index: 999;}
.voice_wrapper_short{position: fixed;max-width: 1100px; margin: auto;text-align: right;height: 72px;bottom: 0px;right: 0px; z-index: 999;}
.voice_wrapper_longTop {position: absolute;max-width: 1100px;margin: auto;text-align: right;height: 72px;top: 21vh;right: 0px;z-index: 999;}
.voice_btn{position: relative;right: 3%;}
.__pageFooterContainer{margin-top:72px;}

/*자막켜기 버튼 */
.subtitles_wrapper{
	position: fixed;
	max-width: 1100px; 
	margin: auto;
	width: 72px;
	height: 72px;
	bottom:67px;
	left: 0px; 
	z-index: 999;
	text-align: center;
	background-image: url('../images/common/video_subtitles_on.png');
}

/*View Mobile*/
.viewMobile{display: block;}
.viewPC{display: none;}
.viewNone{display: none;}

/* media query ios landscape */
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation : landscape) {
	.ui-mobile-viewport {padding-left: constant(safe-area-inset-left); padding-left: env(safe-area-inset-left); padding-right: constant(safe-area-inset-right); padding-right: env(safe-area-inset-right);}
	.ui-mobile [data-role=page], .ui-page {padding-left: constant(safe-area-inset-left); padding-left: env(safe-area-inset-left); padding-right: constant(safe-area-inset-right); padding-right: env(safe-area-inset-right);}
}
/* iPhone X and Xs and 11 Pro*/
@media only screen and (min-device-width: 375px) and (max-device-width: 812px) and (-webkit-min-device-pixel-ratio: 3) and (orientation: landscape) {
	.ui-mobile-viewport {padding-left: constant(safe-area-inset-left); padding-left: env(safe-area-inset-left); padding-right: constant(safe-area-inset-right); padding-right: env(safe-area-inset-right);}
	.ui-mobile [data-role=page], .ui-page {padding-left: constant(safe-area-inset-left); padding-left: env(safe-area-inset-left); padding-right: constant(safe-area-inset-right); padding-right: env(safe-area-inset-right); width: 91%;}
	#stab_02_do_header{width:91%;}
	#stab_01_guide_header{width:91%;}
	.__mobile_header {width: 91%;}
	.ui-header{width:91%;}
}
/* iPhone XR and iPhone 11 */
@media only screen and (min-device-width: 414px) and (max-device-width: 896px) and (min-device-height: 896px) and (-webkit-device-pixel-ratio: 2) and (orientation: landscape) {
	.ui-mobile-viewport {padding-left: constant(safe-area-inset-left); padding-left: env(safe-area-inset-left); padding-right: constant(safe-area-inset-right); padding-right: env(safe-area-inset-right);}
	.ui-mobile [data-role=page], .ui-page {padding-left: constant(safe-area-inset-left); padding-left: env(safe-area-inset-left); padding-right: constant(safe-area-inset-right); padding-right: env(safe-area-inset-right); width: 91%;}
	#stab_02_do_header{width:91%;}
	#stab_01_guide_header{width:91%;}
	.__mobile_header {width: 91%;}
	.ui-header{width:91%;}
}
/* iPhone 11 Pro max and Xs Max*/
@media only screen and (min-device-width: 414px) and (max-device-width: 896px) and (min-device-height: 896px) and (-webkit-device-pixel-ratio: 3) and (orientation: landscape) {
	.ui-mobile-viewport {padding-left: constant(safe-area-inset-left); padding-left: env(safe-area-inset-left); padding-right: constant(safe-area-inset-right); padding-right: env(safe-area-inset-right);}
	.ui-mobile [data-role=page], .ui-page {padding-left: constant(safe-area-inset-left); padding-left: env(safe-area-inset-left); padding-right: constant(safe-area-inset-right); padding-right: env(safe-area-inset-right); width: 91%;}
	#stab_02_do_header{width:91%;}
	#stab_01_guide_header{width:91%;}
	.__mobile_header {width: 91%;}
	.ui-header{width:91%;}
}
input::-ms-input-placeholder {color: #00332e!important;font-family: SpoqaHanSans-Light;font-weight: 600}
input::-webkit-input-placeholder {color: #00332e!important;font-family: SpoqaHanSans-Light;font-weight: 600}
input::-moz-placeholder {color:#00332e!important;font-family: SpoqaHanSans-Light;font-weight: 600}

/*PC Css*/
@media (min-width:1300px) and (min-height:700px){
	.voice_btn{padding-right: 10px;}
	.voice_wrapper{position: fixed;max-width: 1100px;margin: auto;text-align: right;height: 72px;right: 0px;z-index: 0;top: 77px;right: calc(10% + 135px);bottom: auto;}
	.voice_wrapper_medium{position: fixed;max-width: 1100px;margin: auto;text-align: right;height: 72px;right: 0px;z-index: 0;top: 77px;right: calc(10% + 135px);bottom: auto;}
	.voice_wrapper_long{position: fixed;max-width: 1100px;margin: auto;text-align: right;height: 72px;right: 0px;z-index: 0;top: 77px;right: calc(10% + 135px);bottom: auto;}
	.voice_wrapper_medium194{position: fixed;max-width: 1100px;margin: auto;text-align: right;height: 72px;right: 0px;z-index: 0;top: 77px;right: calc(10% + 135px);bottom: auto;}
	.voice_wrapper_longTop {position: fixed;max-width: 1100px;margin: auto;text-align: right;height: 72px;right: 0px;z-index: 0;top: 77px;right: calc(10% + 135px);bottom: auto;}
	.viewMobile{display: none;}
	.viewPC{display: block;}
	.img_wrapper {max-width: 600px;}
	.web_BottomAuto{bottom: auto !important;}
}

/*IE 10+ Css*/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	.__pageMainFooterDivisionContainer{overflow: auto;}
	.IE_absolute_common_btn{position: absolute!important; bottom: 100px !important;}
	#bt_SUDS_ok{position: relative !important; bottom: -50px !important;}
	.IE_absolute{position: absolute !important;}
	.__pageMainFooterDivisionContainer{overflow: hidden;}
	.IE_absolute_common_btn_center{position: absolute !important; bottom: 80px !important; left: calc(50% - 550px);}
	.greycolor{background-color: #b6b6b7 !important;}
}
/*FireFox Css*/
@-moz-document url-prefix() {
    :invalid {
	box-shadow: none;
	}
	
	:-moz-submit-invalid {
	box-shadow: none;
	}
	
	:-moz-ui-invalid {
	box-shadow:none;
	}
}
/* 정류장 컬러값 */
/* 배움 정류장 */ 	.busstop_color_01 {color : #E85C37 !important}
/* 이완 정류장 */ 	.busstop_color_02 {color : #F38D18 !important}
/* 마음 정류장 */ 	.busstop_color_03 {color : #709131 !important}
/* 긍정 정류장 */ 	.busstop_color_04 {color : #61BEB5 !important}
/* 배움 정류장 1 */ .busstop_color_05 {color : #8E5B9F !important}
/* 특별 정류장 2 */ .busstop_color_06 {color : #D67575 !important}
/* ===================================================================
   Android API 36 edge-to-edge 대응
   시스템 바(상단 상태바 / 하단 네비게이션) 아래로 화면이 확장되므로
   OS가 알려주는 안전영역(safe area)만큼 상하 여백을 준다.
   - viewport-fit=cover 가 있어야 env() 값이 전달된다 (전 화면 적용됨)
   - 브라우저에서는 값이 0이라 표시에 영향이 없다
   =================================================================== */

/* 상단 헤더 */
.ui-header,
.__mobile_header {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}

/* 하단 고정 영역 (기법실행·입력완료 등 주요 버튼) */
.__pageFooterContainer,
.ui-footer {
    padding-bottom: constant(safe-area-inset-bottom);
    padding-bottom: env(safe-area-inset-bottom);
}

/* 페이지 본문 하단 여백 — 마지막 요소가 네비게이션 바에 가리지 않도록 */
.ui-content {
    padding-bottom: calc(16px + constant(safe-area-inset-bottom));
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
}

/* 우측 하단 음성 재생 버튼 */
.voice_wrapper,
#audiotoggle {
    margin-bottom: constant(safe-area-inset-bottom);
    margin-bottom: env(safe-area-inset-bottom);
}

/* 우측 슬라이드 메뉴 */
#panel-settings .panel_header {
    padding-top: constant(safe-area-inset-top);
    padding-top: env(safe-area-inset-top);
}
