@charset "utf-8";
/* 작성자 : 모바일 통합마켓 구축 PJT 김선미 */
/* Date : 2021-06-14 Keyword : MA_ST_MOBILE.css 생성 */
/* 최종 수정일 : 2021-08-26 */
/* 수정 내용 : 김선미, 디자인시안과 동기화 반영 */

@import "CLONE_NUI_common.css"; /* [표준차용]Nexus 표준 공통 로딩애니메이션/메시지팝업 관련 복제 CSS */

/* 독립_마켓서비스 MA(모바일 통합마켓) 공통(common)
==================================================== */
/* initial */
html, body{width:100%;height:100%;}
html, body, ul, ol, li, form, fieldset, legend, h1, h2, h3, h4, h5, h6, p, button{margin:0;padding:0;}
html, body, applet, object, iframe, blockquote, pre,abbr, address, big, code,del, dfn, em, small, strong, 
sub, sup,b, u, i, center,dl, dt, dd, ol, ul, li,fieldset, form, label, h1, h2, h3, h4, h5, h6,
input, textarea, select, legend,article, aside, canvas, details, embed, table, th, td, figure, figcaption, 
footer, header, hgroup,menu, output,time, mark, audio, video, p, div, span, img, button {font-family:'Malgun Gothic','맑은 고딕';}
body{font-size:1em;letter-spacing:0;}
header, main, footer, section, article, aside, details, menu, nav, figcaption, figure, hgroup{display:block}
* , :before, :after {box-sizing:border-box;}
table{table-layout:fixed;width:100%;border-collapse:collapse;border-spacing:0;}
caption, th, td{text-align:left;vertical-align:top;font-weight:normal;}
li{list-style:none;}
fieldset,img{border:0;vertical-align:middle;}
input, textarea {vertical-align:middle;}
textarea {resize:none;}
input[type="radio"], input[type="checkbox"]{margin:0;padding:0;border:0px;vertical-align:top;}
select {vertical-align:middle;-webkit-appearance:none;-moz-appearance:none;appearance:none;}
select::-ms-expand {display: none;}
button {display:inline-block;cursor:pointer;border:none;background:transparent;vertical-align:middle;text-align:center;line-height:normal;font:inherit;}
button:disabled{cursor:default;}
a{cursor:pointer;text-decoration:none;}

/* color */
.MAS-atoms-text-pointColor01{color:#6becf8;}

/* 로그인 템플릿
==================================================== */
/* 레이아웃 Default */
.MAS-template-login-wrap{position:relative;width:100%;height:100%;min-width:360px;min-height: 570px; /* 2021-07-19 김선미 : [통합테스트-Test Case ID : PJ20211118_K01]min-height 추가 */
    background-image:url('../images/login2x/bg_market.png'), linear-gradient(45deg, #3677fd 0%, #00bbdd 50%);
    background-repeat:no-repeat;}
.MAS-container-appTop-wrap{position:relative;height:calc(100% - 143px);} /* 상단 */
.MAS-container-appBottom-wrap{position:absolute;left:0;right:0;bottom:0;height:143px;background:#fff;} /* 하단 */
.MAS-layout-login-wrap{position:absolute;left:50%;bottom:0;margin-left:-180px;width:360px;} /* 상/하단 공통 마켓 레이아웃 기준(width:360px;) */
.MAS-container-appTop-wrap .MAS-layout-login-wrap{bottom:2.3%;height:313px;} /* 2021-07-19 김선미 : [통합테스트-Test Case ID : PJ20211118_K01]height 추가 */

/* 최초설치 로그인/메인 구분자 cssClass(.MAS-beforeAppSetup) */
.MAS-template-login-wrap.MAS-beforeAppSetup .MAS-container-appTop-wrap{height:calc(100% - 234px);} /* 상단 */
.MAS-template-login-wrap.MAS-beforeAppSetup .MAS-container-appBottom-wrap{height:234px;} /* 하단 */

/* 마켓 소개 영역 */
.MAS-container-appIntro-wrap{margin:2px 18px 15px;}
    /* 마켓 타이틀 */
    .MAS-title-depth1-wrap{}
    .MAS-title-depth1-wrap .MAS-title-depth1{position:relative;font-size:1.4375em;color:#fff;letter-spacing:-1px;}
    .MAS-title-depth1-wrap .MAS-title-app{font-weight:normal;}

/* 로그인 정보 영역 */    
.MAS-container-loginInfo-wrap{margin: 0 18px 16px;padding: 12px 0 11px;border-radius:5px;
    background:linear-gradient(39deg, #2c9dc7 0%, #40aad1 100%);
    background:linear-gradient(39deg, #0d97cf 0%, #00a8c6 100%);
    background: linear-gradient(39deg, rgba(13, 151, 207, 0.6) 0%, rgba(0, 168, 198, 0.6) 100%);}
.MAS-container-loginInfo-wrap.MAS-beforeAppSetupMain{padding:0;}
.MAS-container-loginInfo-wrap.MAS-beforeAppSetupMain .MAS-subComment-wrap{height:34px;line-height:34px;padding: 0 16px;} /* 2021-07-13 김선미 : 최초설치 메인 구분자 cssClass(.MAS-beforeAppSetupMain) 추가 */

    /* 마켓 부가설명 */
    .MAS-subComment-wrap{padding:0 29px;}
    .MAS-subComment-wrap .MAS-subComment{font-size:0.6875em;color:#f0f2f5;}

    /* 업무구분 선택 */
    .MAS-workOption-wrap{margin:21px 29px 6px;}
    .MAS-radio-wrap{position:relative;display:inline-block;margin: 0 5px 0 0;vertical-align: top;cursor:pointer;}
    .MAS-radio-wrap input[type="radio"]{position:relative;width:16px;height: 16px;border-radius:50%;background:rgba(10, 188, 221, 0.4);border:1px solid rgba(255, 255, 255,0.5);-webkit-appearance: none;color:rgba(255, 255, 255, 1);}
    .MAS-radio-wrap input[type="radio"]:checked{background:rgba(255, 255, 255, 1);}
    .MAS-radio-wrap input[type="radio"]:checked::after{content:'';position:absolute;left:2px;top:2px;display:block;width:10px;height:10px;border:1px solid #00bbdd;border-radius:50%;}
    .MAS-radio-wrap input[type="radio"]:disabled{background:rgba(123, 222, 240, 0.3);border:1px solid rgba(255, 255, 255,0.3);cursor: default;}
    .MAS-radio-wrap span{height:16px;line-height: 16px;margin-left: 0;padding-left: 8px;font-size:0.75em;color:#f0f2f5;vertical-align:top;}

    /* 아이디/비밀번호 입력 */
    .MAS-idpw-wrap{margin:0 29px 11px;}   
    .MAS-idpw-wrap input[type="text"], .MAS-idpw-wrap input[type="password"],
    .MAS-idpw-wrap input[type="text"]:not(:disabled):hover, .MAS-idpw-wrap input[type="password"]:not(:disabled):hover{width:100%;height:34px;line-height:34px;padding:0 30px 0 16px;background:rgba(255, 255, 255, 0.2);border:1px solid rgba(0, 187, 221, 0.2);font-size:0.75em;color:#fff !important;}
    .MAS-idpw-wrap input[type="text"]:focus, .MAS-idpw-wrap input[type="password"]:focus{border:1px solid rgba(0, 187, 221, 1);}
    .MAS-idpw-wrap input[readonly],
    .MAS-idpw-wrap input[disabled]{color:#fff;background:transparent;border:1px solid #16b3d8;cursor:default;}        

        /* 2021-08-26 김선미 : 디자인시안과 동기화 반영, placeholder Single Attribute */
    .MAS-idpw-wrap input::-ms-input-placeholder{color:rgba(255, 255, 255, 0.6) !important;} /* for Edge(also supports ::-webkit-input-placeholder) */
    .MAS-idpw-wrap input:-ms-input-placeholder{color:rgba(255, 255, 255, 0.6) !important;} /* for IE10-11, IE Mobile 10-11 */        
    .MAS-idpw-wrap input::-webkit-placeholder{color:rgba(255, 255, 255, 0.6) !important;} /* for Chrome */ 
    .MAS-idpw-wrap input::-webkit-input-placeholder{color:rgba(255, 255, 255, 0.6) !important;} /* for Chrome<=56, Android Browser 2.1-4.4.4, Samsung Internet <=6.2 */ 
    .MAS-idpw-wrap input::placeholder{color:rgba(255, 255, 255, 0.6) !important;} 
        /* //2021-08-26 김선미 : 디자인시안과 동기화 반영, placeholder Single Attribute */
    
    .MAS-idpw-wrap .MAS-idpw.MAS-id{margin:0 0 12px 0;}
    .MAS-idpw-wrap .MAS-idpw{position:relative;}
    .MAS-idpw-wrap .MAS-idpw::after{content:'';position:absolute;right:10px;top:6px;display:block;width:17px;height:20px;background:url('../images/login2x/icon_market.png') no-repeat;background-size:129px 54px;opacity: 0.6;}
    .MAS-idpw-wrap .MAS-idpw.MAS-id::after{background-position:0 0;}
    .MAS-idpw-wrap .MAS-idpw.MAS-pw::after{background-position:-17px 0;}

    /* 로그인 옵션 확인 */
    .MAS-idpwOption-wrap{margin:0 29px;text-align:right;}    
    .MAS-checkbox-wrap{position:relative;display:inline-block;margin: 0 0 0 5px;vertical-align: top;cursor:pointer;}
    .MAS-checkbox-wrap input[type="checkbox"]{position:relative;width:16px;height: 16px;background:rgba(123, 222, 240, 0.6);-webkit-appearance: none;color:rgba(255, 255, 255, 1);}
    .MAS-checkbox-wrap input[type="checkbox"]:checked{}
    .MAS-checkbox-wrap input[type="checkbox"]:checked::after{content:'';position:absolute;left:5px;top:5px;display:block;width:8px;height:5px;background:url('../images/login2x/icon_market.png') no-repeat -34px 0;background-size:129px 54px;}
    .MAS-checkbox-wrap input[type="checkbox"]:disabled{background:rgba(123, 222, 240, 0.4);cursor: default;}
    .MAS-checkbox-wrap span{height:16px;line-height: 16px;margin-left: 0;padding-left: 8px;font-size:0.75em;color:#f0f2f5;vertical-align:top;}

    /* 액션버튼 영역 */
    .MAS-loginBtn-wrap{height: 36px;margin: 0 18px;}/* 2021-07-19 김선미 : [통합테스트-Test Case ID : PJ20211118_K01]height 추가 */
    .MAS-loginBtn-wrap .MAS-loginBtn{width:100%;height:36px;line-height:36px;background:rgba(255, 255, 255, 1);border-radius:5px;font-size:0.875em;font-weight:bold;color:#00bbdd;}
    .MAS-loginBtn-wrap .MAS-loginBtn:active{background:rgba(255, 255, 255, 0.7);}
    .MAS-loginBtn-wrap .MAS-loginBtn:disabled{background:rgba(255, 255, 255, 0.4);}
    
/* APP 다운로드/설치 영역 */
.MAS-container-appDownSetup-wrap{width:100%;margin:61px 0 32px 0;padding:0 18px;}
.MAS-container-appDownSetup-wrap::after{content:'';clear:both;display:block;}
    /* 마켓 APP 설치/매뉴얼 공통 */
    .MAS-appSetup-wrap{position:relative;width:calc(50% - 5px);height:125px;background:#edf7fe;border:1px solid #39a1be;border-radius: 5px;box-shadow: rgba(0, 0, 0, 0.05) 0 4px 5px;}    
    .MAS-appSetup-wrap::after{content:'';position:absolute;right:10px;top:39px;display:block;width:38px;height:38px;background:url('../images/login2x/icon_market.png') no-repeat;background-size: 129px 54px;}  
    .MAS-appSetup-wrap .MAS-appSetup-title{margin:13px 0;font-size:0.8125em;;font-weight:bold;color:#1c68b0;text-align:center;}
    .MAS-appSetup-wrap .MAS-appSetup-Info{margin:0 16px 15px;font-size:0.6875em;line-height:16px;color:#6a6a6a;}
    .MAS-appSetup-wrap .MAS-downBtn-wrap{margin:0 14px 8px;}
    .MAS-appSetup-wrap .MAS-downBtn-wrap .MAS-downBtn{width:100%;height:25px;line-height:25px;font-size: 0.875em;background:#fff;border-radius:5px;font-weight:bold;color:#2dcbe8;}

    /* 마켓 APP 설치 */
    .MAS-appSetup-down{}
    .MAS-appSetup-wrap.MAS-appSetup-down{float:left;}
    .MAS-appSetup-wrap.MAS-appSetup-down::after{background-position:-50px 0;}

    /* 마켓 APP 매뉴얼 */
    .MAS-appSetup-manual{}
    .MAS-appSetup-wrap.MAS-appSetup-manual{float:right;}
    .MAS-appSetup-wrap.MAS-appSetup-manual::after{top:41px;background-position:-92px 0;}

/* 표준 디바이스 확인 영역 */
.MAS-container-deviceinInfo-wrap{margin:0 18px 22px;}
    /* 안내문구 */
    .MAS-helpComment-device-wrap{margin:0 4px 15px;}
    .MAS-helpComment-device-wrap .MAS-helpComment-device{line-height:16px;color:#767676;font-size:0.75em;}

    /* 액션버튼 영역 */
    .MAS-deviceBtn-wrap{width:100%;height:40px;border-radius:3px;}
    .MAS-deviceBtn-wrap:after{content:'';clear:both;display:block;}
    .MAS-deviceBtn-wrap .MAS-deviceBtn,
    .MAS-deviceBtn-wrap .MAS-deviceBtn:active{float:left;position:relative;width:50%;height:40px;line-height:40px;padding:0 15px;background:rgba(241, 242, 242, 1);border:1px solid rgba(208, 208, 208, 1);color:rgba(102, 102, 102, 1);font-weight:bold;font-size:0.75em;} /* 2021-08-26 김선미 : 디자인시안과 동기화 반영 */
     @media all and (-ms-high-contrast:none){
        .MAS-deviceBtn-wrap .MAS-deviceBtn,
        .MAS-deviceBtn-wrap .MAS-deviceBtn:active{line-height:0;}
     }
    .MAS-deviceBtn-wrap .MAS-deviceBtn:before{content:'';position:absolute;left:0;bottom:-2px;width:100%;height:2px;background:rgba(0, 0, 0, 0.05);}
    .MAS-deviceBtn-wrap .MAS-deviceBtn:after{content:'';position:absolute;right:15px;top:50%;margin-top:-4px;width:6px;height:10px;background:url('../images/login2x/icon_market.png') no-repeat -51px -38px;background-size: 129px 54px;}
    .MAS-deviceBtn-wrap .MAS-deviceBtn[disabled]::after{opacity: 0.4;}
    .MAS-deviceBtn-wrap .MAS-deviceBtn.MAS-deviceMobile{border-right:0;border-radius:3px 0 0 3px;}
    .MAS-deviceBtn-wrap .MAS-deviceBtn.MAS-deviceTab{border-radius:0 3px 3px 0;}
    .MAS-deviceBtn-wrap .MAS-deviceBtn:disabled{background:rgba(241, 242, 242, 0.4);border:1px solid rgba(208, 208, 208, 0.4);color:rgba(102, 102, 102, 0.4);}

/* 앱 안내 영역 */
.MAS-container-appInfo-wrap{min-height: 90px;padding:11px 18px 0 38px;background:#f0f2f5;line-height: 17px;font-size:0.6875em;color:#5e5e5e;}
    /* 안내문구 */
    .MAS-helpComment-app-wrap{position:relative;}
    .MAS-helpComment-app-wrap::after{content:'';position:absolute;left:-18px;top:3px;display:block;width:13px;height:13px;background:url('../images/login2x/icon_market.png') no-repeat -100px -38px;background-size: 129px 54px;}
    .MAS-helpComment-app-wrap.MAS-caution{}

/* footer > Copyright 영역 */
.MAS-copyright-wrap{height:33px;line-height:33px;text-align:center;font-size:0.5625em;;letter-spacing:-0.4px}


/* 로그인 템플릿 > Break Point - 2021-07-15 김선미 : 밀도별 CASE 정리
==================================================== */
/* 
CASE01. screenDensity 중밀도(Medium, mdpi), Width 360px 이하
- 기기(Device) 기준 : Device Small(중밀도)
- SFMI UX 기준 : Phone(360px*640px) 범주
*/
@media all and (max-width:360px) {   
    /* 최초설치/로그인 템플릿 배경 이미지 위치, 사이즈 재정의 */
    .MAS-template-login-wrap{
        background-position:108% 10%;    
        background-size: 192px 192px, 100% 100%;
    }    
    /* 로그인 정보 영역 비율(유동) 재정의 */
    /* .MAS-container-appTop-wrap .MAS-layout-login-wrap{Design Default : bottom} */ 
}

/* 
CASE02. screenDensity 고밀도(High, hdpi), Width 360px 초과/720px 이하
- 기기(Device) 기준 : Device Small(고밀도)
*/
@media all and (min-width:361px) and (max-width:720px){    
    /* 최초설치/로그인 템플릿 배경 이미지 위치, 사이즈 재정의 */
    .MAS-template-login-wrap{
        background-position:108% 10%;
        background-size: 210px 210px, 100% 100%;
    }
    /* 로그인 정보 영역 비율(유동) 재정의 */
    /* .MAS-container-appTop-wrap .MAS-layout-login-wrap{Design Default : bottom} */ 
}

/* 
CASE03. screenDensity 초고밀도(x High, xhdpi), Width 720px 초과
- 기기(Device) 기준 : Device Large
- SFMI UX 기준 : Tab Window(1234px*770px)/Tab Android(1280px*680px)/PC(1280px, 1300px, 1600px) 범주 
*/
@media all and (min-width:721px){    
    /* 최초설치/로그인 템플릿 배경 이미지 위치, 사이즈 재정의 */
    .MAS-template-login-wrap{
        background-position:60% 10%;
        background-size: 192px 192px, 100% 100%;
        min-height: 652px; /* 2021-07-19 김선미 : [통합테스트-Test Case ID : PJ20211118_K01]min-height 추가 */
    }    
    /* 로그인 정보 영역 비율(유동) 재정의 */
    .MAS-container-appTop-wrap .MAS-layout-login-wrap{bottom:auto;top:25%;}
}


/* 마켓 레이어팝업
==================================================== */
/* 마켓 레이어팝업 레이아웃 Default */
.MAS-template-popLayer-wrap{position:absolute;z-index:999;top:0;right:0;bottom:0;left:0;background:#fff;}

/* 마켓 레이어팝업 타이틀 */
.MAS-titleTypeLayer-depth1-wrap{border-bottom:1px solid #d4d4d4;}
.MAS-titleTypeLayer-depth1-wrap .MAS-titleTypeLayer-depth1{height:51px;line-height:51px;text-align:center;font-size:0.9375em;letter-spacing:-1px;color:#333;}

/* 마켓 레이어팝업 컨텐츠 레이아웃 */
.MAS-container-standardDevice-wrap,
.MAS-container-appManual-wrap{height:calc(100% - 88px);border-bottom: 1px solid #f0f0f0;}
.MAS-standardDevice-wrap,
.MAS-appManual-wrap{height:100%;}
.MAS-standardDevice-wrap:after,
.MAS-appManual-wrap:after{content:'';clear:both;display:block;}  

/* 표준 디바이스 
- 기기(Device) 기준 : Device Small landscape, Device Large Portrait, Device Large landscape 
*/
    /* 표준 디바이스 컨텐츠 레이아웃 */
    .MAS-container-standardDevice-wrap{margin:0 30px;}

    /* 표준 디바이스 타이틀 */
    .MAS-list-title{width:100%;height:30px;line-height:30px;background:#f5f5f5;}
    .MAS-list-title:after{content:'';clear:both;display:block;}
    .MAS-list-title .MAS-deviceName,
    .MAS-list-title .MAS-modelName{float:left;display:block;width:25%;text-align:center;font-size:0.6875em;color:#888;}

    /* 표준 디바이스 */
    .MAS-standardDeviceInner-wrap{height:calc(100% - 69px);overflow-y:auto;}
    .MAS-standardDevice{float:left;width:50%;}

    /* 표준 디바이스-모바일, 태블릿 공통 */
    .MAS-list-titleSub{padding:7px 0 0;font-size:0.8125em;font-weight:bold;}
    .MAS-list-titleSub .MAS-titleSub{height:32px;line-height:32px;color:#444;}
    .MAS-list-device{margin:6px 0 0 0;font-size:0.6875em;color:#666;}
    .MAS-list-device ul li{height:25px;line-height:25px;}
    .MAS-list-device ul li span{display:inline-block;padding:0 10px 0 55px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
    .MAS-list-device ul li span:first-child{width:60%;}
    .MAS-list-device ul li span:last-child{width:40%;}

/* 매뉴얼 
- 기기(Device) 기준 : Device Large landscape 
*/
    /* 매뉴얼 컨텐츠 영역 */
    .MAS-appManualInner-wrap{height:100%;overflow-y:auto;padding-left:10px;}    
    .MAS-appManual-wrap{display:-webkit-box;display:-webkit-flex;display:flex;flex-wrap:wrap;max-width: 1110px;margin: 0 auto;padding-top:10px;} /* appManualBox 1행 3열 배치 */

    /* 매뉴얼 아이템 영역 */
    .MAS-appManualBox{width: 360px;margin-right:10px;margin-bottom:10px;}
    .MAS-appManualBox .MAS-appManualBoxIn{padding: 20px 30px;background: #f5f5f5;border-radius: 10px;}
    .MAS-appManualBox .MAS-appManualBoxIn:after{content:'';clear:both;display:block;}
    .MAS-appManual-titleSub{padding:0 0 7px 30px;font-size:0.8125em;}
    .MAS-appManual-titleSub .MAS-titleSub{min-height:43px;color:#444;text-indent:-30px;}
    .MAS-appManualNum{display:inline-block;width:26px;height:26px;line-height:26px;background:#00bbdd;color:#fff;font-size:16px;font-weight:bold;border-radius:50%;text-align:center;text-indent: 0;}    
    .MAS-appManualTxt{font-size:0.875em;}
    .MAS_appManualFontpoint{font-weight:bold;color:#00bbdd;}
    .MAS-appManual-detail{position:relative;width:300px;min-height:200px;background:#ccc;padding:3px;} /* Device Large landscape 캡쳐형 */
    .MAS-appManual-detail.detailType_portrait{width:150px;min-height:320px;} /* Device Small Portrait 캡쳐형 */    
    .MAS-appManual-detail img{width:294px;height:200px;}
    .MAS-appManual-detail.detailType_portrait > img{width: 144px;height: 314px;}    

        /* 안드로이드 5번 : 모바일 아이콘 중 '삼성화재마켓' 아이콘 클릭 CASE */
    .MAS-appManual-detail.detailType_portrait.android_appManual05 > img{height:auto;}
        
        /* 안드로이드 9번 : 모바일 아이콘 중 '드림포탈' 아이콘 클릭 → 로그인 후 드림포탈 사용 CASE */
    .android_appManual0901,
    .android_appManual0902{float:left;} 
    .MAS-appManual-detail.detailType_portrait.android_appManual0901 > img{height:auto;}

    /* 매뉴얼 가이드 */
    .MAS-appManual-guide{position: absolute;left: 50%;width:280px;margin-left:-140px;}
    .MAS-appManual-guide img{width:100%;height:auto;border:2px solid #ff0000;}
    .MAS-appManual-guide.none-guide img{border:0;}
    .MAS-appManual-hand{position:absolute;width:45px;height:60px;background:url('../images/manual2x/img_hand.png') no-repeat 0 0;background-size:cover;font-size:0;line-height:0;text-indent:-999999px;}
        
     /* 포탈 아이디, 비밀번호와 동일 */
    .MAS-appManual-memo{position: absolute;right:17px;top:20px;z-index: 5;text-align: center;}    
    .MAS-appManual-detail.detailType_portrait .MAS-appManual-memo{position: absolute;right:-150px;}
	.MAS-appManual-memo > div.type01{display: table-cell;vertical-align: middle;width: 100px;height: 100px;color: #fff;background: rgba(53, 120, 253, 0.7);font-size: 13px;font-weight: bold;border-radius: 50%;letter-spacing: -1px;}	

/* 마켓 레이어팝업 닫기 */
.MAS-closeTypeLayer-btn{position:absolute;right:31px;top:14px;display:block;width:24px;height:24px;} /* 팝업 닫기 버튼(Touch FeedBack padding:4px;) */    
.MAS-closeTypeLayer-btn span{position:relative;display:block;width:100%;height:100%;font-size:0;line-height:0;text-indent:-999999px;}
.MAS-closeTypeLayer-btn span::after{content:'';position:absolute;display:block;width:16px;height:16px;left:50%;top:50%;margin: -8px 0 0 -8px;background:url('../images/login2x/icon_market.png') no-repeat 0 -20px;background-size: 129px 54px;} /* 팝업 닫기 아이콘, 2021-07-21 김선미 : [통합테스트-Test Case ID : PJ20211118_N04]이미지 위치조정 transform -> margin 으로 변경 */    


/* 로그인 레이어팝업 > Break Point - 2021-07-15 김선미 : 밀도별 CASE 정리
==================================================== */
/* 
CASE04. 표준 디바이스
- 기기(Device) 기준 : Device Small Portrait
*/
@media all and (max-width:720px) {
    /* 표준 디바이스 목록 영역 */
    .MAS-container-standardDevice-wrap{margin:0 15px;height: calc(100% - 72px);}

    /* 표준 디바이스 타이틀 */
    .MAS-list-title.MAS-standardDeviceSmall .MAS-deviceName,
    .MAS-list-title.MAS-standardDeviceSmall .MAS-modelName{width:50%;}

    /* 표준 디바이스-모바일, 태블릿 공통 */
    .MAS-list-device ul li span{padding:0 10px;}

    /* 표준 디바이스-모바일/태블릿 */
    .MAS-standardDevice.MAS-standardDeviceSmall{display:block;clear:left;width: 100%;}
    .MAS-standardDevice.MAS-standardDeviceLarge{width:100%;} /* 2021-07-12 김선미 : 반응형 관련 cssClass 재정리 */
    
    /* 마켓 레이어팝업 닫기 */
    .MAS-closeTypeLayer-btn{right:16px;}

    /* 매뉴얼 */    
    .MAS-appManual-memo{position: absolute;right:7%;top:7%;} /* 포탈 아이디, 비밀번호와 동일 */
}

/* 
CASE05. 매뉴얼
- 기기(Device) 기준 : Device Small Portrait
*/
@media all and (max-width:766px) { 
    .MAS-appManualInner-wrap{padding-left:0px;}
    .MAS-appManual-wrap{padding-top:0;} /* appManualBox 1행 1열 배치 */
    
    .MAS-appManualBox{width:calc(100%);min-width: 360px;margin:0;}
    .MAS-appManualBox:nth-of-type(even){background:#f5f5f5;}
    .MAS-appManualBox:last-child{margin-bottom:0;}
    .MAS-appManualBox .MAS-appManualBoxIn{padding: 20px 30px;background: transparent;border-radius: 0;}
    .MAS-appManual-titleSub .MAS-titleSub{min-height:0;}     
    .MAS-appManual-detail{width:auto;min-height:200px;}
    .MAS-appManual-detail img{width:100%;height:auto;}
} 

/* 
CASE06. 매뉴얼
- 기기(Device) 기준 : Device Small landscape, Device Large Portrait
*/
@media all and (min-width:767px) and (max-width:1136px){
    .MAS-appManual-wrap{max-width: 740px;margin: 0 auto;} /* appManualBox 1행 2열 배치 */ 
}


/* 마켓 템플릿
==================================================== */
/* 공통 */
.MAS-ellipsis{width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

/* 레이아웃 Default */
.MAS-template-market-wrap{position:relative;width:100%;height:100%;min-width:360px;background:#fff;}
.MAS-layout-market-wrap{width:100%;height:100%;}
.MAS-marketTop-wrap{position:fixed;z-index:5;width:100%;height:45px;background:#3578fd;} /* 마켓 상단 영역 fix */
.MAS-container-market-wrap{padding:45px 0 0 0;} /* 마켓 본문 영역 */

/* 설치그룹목록/앱목록/앱상세 구분자 */
.MAS-template-market-wrap.MAS-setupGroupList{} /* 설치그룹목록 */
.MAS-template-market-wrap.MAS-marketList{} /* 앱목록 */
.MAS-template-market-wrap.MAS-marketView{} /* 앱상세 */

/* 헤더 영역 */
.MAS-header-wrap{position:relative;width:100%;height:100%;text-align:center;min-width: 360px;}
    /* 타이틀/그룹명 */
    .MAS-header-title-wrap{position: relative;padding: 9px 0 8px;letter-spacing: -1px;} /* 2021-07-21 김선미 : [통합테스트-Test Case ID : PJ20211118_N04]이미지 위치조정 transform -> padding 으로 변경 */
    .MAS-header-title-wrap .MAS-title-depth1{position:relative;display:inline-block;padding:0 9px 0 38px;height: 27px;line-height: 27px;vertical-align:middle;font-size:1em;color:#fff;}
    .MAS-header-title-wrap .MAS-title-depth1:after{content:'';position:absolute;left:0;top:-2px;display:block;width:31px;height:31px;background:url('../images/market2x/icon_app.png') no-repeat 0 0;background-size:88px 50px;}
    .MAS-header-title-wrap .MAS-title-groupName{display:inline-block;height: 27px;line-height: 27px;vertical-align:middle;border-radius:5px;padding:0 7px;font-size:0.8125em;;font-weight:bold;color:#edf7fe;background:rgba(0, 0, 0, 0.15);}
    
    /* 앱상세 > 앱명 */
    .MAS-header-titleApp-wrap{position: relative;padding: 9px 0 8px;letter-spacing: -1px;} /* 2021-07-21 김선미 : [통합테스트-Test Case ID : PJ20211118_N04]이미지 위치조정 transform -> padding 으로 변경 */
    .MAS-header-titleApp-wrap .MAS-logoAppImg{display:inline-block;width:28px;height:28px;margin-right:10px;}
    .MAS-header-titleApp-wrap .MAS-title-depth1{position:relative;display:inline-block;height: 28px;line-height: 28px;vertical-align:middle;font-size:1em;;color:#edf7fe;}    

    /* 유틸리티 버튼 */
    .MAS-utillity-btnGroup01 button,
    .MAS-utillity-btnGroup02 button{position:relative;top:50%;margin-top: -13px;display:block;font-size:0;line-height:0;text-indent:-999999px;z-index:5;} /* 2021-07-21 김선미 : [통합테스트-Test Case ID : PJ20211118_N04]이미지 위치조정 transform -> margin 으로 변경 */
    .MAS-utillity-btnGroup01 button:after,
    .MAS-utillity-btnGroup02 button:after{content:'';position:absolute;left:0;top:0;left: 50%;top: 50%;margin: -9px 0 0 -10px;} /* 2021-07-21 김선미 : [통합테스트-Test Case ID : PJ20211118_N04]이미지 위치조정 transform -> margin 으로 변경 */

    .MAS-utillity-btnGroup01{position:absolute;left:7px;top:0;height:100%;}
    .MAS-utillity-btnGroup01 .MAS-utillity-homeBtn{width:28px;height:27px;} /* 홈(처음으로) 버튼(Touch FeedBack padding:4px;) */        
    .MAS-utillity-btnGroup01 .MAS-utillity-homeBtn:after{width:20px;height:19px;background:url('../images/market2x/icon_app.png') no-repeat -68px 0;background-size:88px 50px;} /* 홈(처음으로) 이미지 */        
    
    .MAS-utillity-btnGroup02{position:absolute;right:36px;top:0;height:100%;}
    .MAS-utillity-btnGroup02 .MAS-utillity-exitBtn{width:25px;height:26px;} /* 종료(나가기) 버튼(Touch FeedBack padding:4px;) */
    .MAS-utillity-btnGroup02 .MAS-utillity-exitBtn:after{width:17px;height:18px;background:url('../images/market2x/icon_app.png') no-repeat -31px 0;background-size:88px 50px;} /* 종료(나가기) 이미지 */


/* 마켓 탭 영역 */    
.MAS-marketTab-wrap{position:relative;width:100%;height:100%;}
.MAS-marketTab-wrap:after{content:'';position:absolute;left:0;bottom:0;width:100%;border-bottom: 1px solid #dcdfe1;}
.MAS-marketTab-wrap ul{}
.MAS-marketTab-wrap ul:after{content:'';clear:both;display:block;}
.MAS-marketTab-wrap ul li{float:left;width:50%;height:41px;border-bottom:1px solid #dcdfe1;}
.MAS-marketTab-wrap ul li.active{border-bottom:3px solid #00bbdd;}
.MAS-marketTab-wrap ul li button{display:block;width:100%;height:100%;line-height:41px;text-align:center;font-size:0.8125em;;color:#767676;}
.MAS-marketTab-wrap ul li.active button{font-weight:bold;color:#444;}

/* 마켓 설치그룹 목록 영역 */
.MAS-groupList-wrap{border-top:8px solid #edeef0;}
    .MAS-groupListItem-wrap{padding-top:12px;}
    .MAS-groupListItem-wrap span{vertical-align:middle;}
    .MAS-groupListItem-wrap li{border-bottom:1px solid #f0f0f0;}
    .MAS-groupListItem-wrap li a{position:relative;display:block;min-height:69px;padding:16px 24px 0 44px;}
    .MAS-groupListItem-wrap li a:before{content:'';position:absolute;left:21px;top:50%;margin-top: -8px;display:block;width:16px;height:16px;background:#99e4f1 url('../images/market2x/icon_app.png') no-repeat -14px -31px;background-size:88px 50px;border-radius:50%;} /* 2021-07-21 김선미 : [통합테스트-Test Case ID : PJ20211118_N04]이미지 위치조정 transform -> margin 으로 변경 */
    .MAS-groupListItem-wrap li a:after{content:'';position:absolute;right:18px;top:50%;margin-top: -5px;display:block;width:6px;height:11px;background:url('../images/market2x/icon_app.png') no-repeat -31px -31px;background-size:88px 50px;border-radius:50%;} /* 2021-07-21 김선미 : [통합테스트-Test Case ID : PJ20211118_N04]이미지 위치조정 transform -> margin 으로 변경 */
    /*.MAS-groupType01{position:absolute;top:50%;transform:translate(0, -50%);width:calc(100% - 68px);} 2021-07-21 김선미 : [통합테스트-Test Case ID : PJ20211118_N04]이미지 위치조정 transform 삭제 */
    .MAS-groupType01 .MAS-groupName{display:block;color:#444;font-size:0.875em;font-weight:bold;}
    .MAS-groupType01 .MAS-groupDes{display:block;    margin-top: 5px;color:#2286ab;font-size:0.8125em;}

/* 마켓 앱목록 영역 */
.MAS-marketList-wrap{}
    .MAS-marketSubTitle-wrap{position:relative;height:42px;line-height:42px;padding-left:13px;background:#f3f4f5;font-size:0.75em;font-weight:bold;color:#444;}
    .MAS-marketSubTitle-wrap .MAS-setupCount{font-weight:bold;color:#2889dc;}
    .MAS-marketSubTitle-wrap button{position:absolute;right:14px;top:8px;display:block;height:26px;line-height:26px;padding:0 9px;background:#00bbdd;border-radius:3px;text-align:center;letter-spacing:-1px;color:#fff;font-size: 1.125em;}
    .MAS-marketSubTitle-wrap button[disabled]{color:rgba(255, 255, 255, 0.5);opacity: 0.5;}

    .MAS-marketAppItem-wrap{}
        .MAS-marketAppItem-wrap span{vertical-align: top;}
        .MAS-marketAppItem-wrap li{border-bottom:1px solid #f0f0f0;}
        .MAS-marketAppItem-wrap li a{position:relative;display:block;min-height:67px;padding:15px 85px 0 60px;}    
        .MAS-appIcon{position:absolute;left:13px;top:50%;margin-top: -18px;display:block;width:36px;height:36px;border-radius:6px;background:transparent;} /* 2021-07-21 김선미 : [통합테스트-Test Case ID : PJ20211118_N04]이미지 위치조정 transform -> margin 으로 변경 */
        .MAS-appIcon img{display:block;width:100%;height:100%;border-radius:6px;}
        .MAS-appInfoType01{width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;height: 18px;line-height: 18px;} /* 자식요소(.MAS-appNotice) 존재로 말줄임처리 정상 랜더링 불가능, 앱설명만 말줄임(...) 적용시 추가 테스트 필요(max-width 비율적용 고려가능, 현시점 미고려상태) */
        .MAS-appInfoType01 .MAS-appName{color:#444;font-size:0.875em;font-weight:bold;}
        .MAS-appInfoType01 .MAS-appNotice{display:inline-block;height:16px;line-height:16px;margin-top:1px;padding:0 3px;border-radius:2px;font-size:0.6875em;text-align:center;color:#fff;}
        .MAS-appInfoType01 .MAS-appNotice.MAS-appNew{background:#00d49f;}
        .MAS-appInfoType01 .MAS-appNotice.MAS-appUp{background:#ffb70a;}
        .MAS-appInfoType02{width:100%;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;font-size:0.8125em;height: 18px;line-height: 18px;} /* 자식요소(.MAS-appNotice) 존재로 말줄임처리 정상 랜더링 불가능, 앱설명만 말줄임(...) 적용시 추가 테스트 필요(max-width 비율적용 고려가능, 현시점 미고려상태) */
        .MAS-appInfoType02 .MAS-appDes{color:#2286ab;}
        .MAS-appInfoType02 .MAS-appSeparate{margin:0 4px;color:#f0f0f0;}
        .MAS-appInfoType02 .MAS-appVer{color:#959595;}
        .MAS-appInfoType03{position:absolute;right:14px;top:15px;text-align:right;font-size:0.8125em;height: 18px;line-height: 18px;}
        .MAS-appInfoType03 .MAS-appSetupStatus{display:block;color:#444;font-weight:bold;min-height:18px;}/* 2021-08-03 김선미 : 미설치/업데이트/설치됨 CASE 중 '미설치' 표현제거(AS-IS 운영 기준)를 위한 default 높이(min-height) 추가 */
        .MAS-appInfoType03 .MAS-appSetupDate{display:block;color:#959595;}

/* 마켓 앱상세 영역 */
.MAS-marketView-wrap{}
    .MAS-marketViewSubTopSec-wrap{}
        .MAS-appActionBtn-wrap{min-height:50px;padding:8px 15px;border-bottom:1px solid #dbdbdb;}
        .MAS-appActionBtn-wrap ul{display:table;table-layout:fixed;width:100%;}
        .MAS-appActionBtn-wrap ul li{display:table-cell;width:50%;}
        
        .MAS-appActionBtn-wrap ul li{padding:0 4px;}
        .MAS-appActionBtn-wrap ul li:first-child{padding-left:0;}
        .MAS-appActionBtn-wrap ul li:last-child{padding-right:0;}
            
                /* face type button */
            .MAS-appActionBtn-wrap button{position:relative;display:block;width:100%;height:33px;line-height:33px;border-radius:8px;border:1px solid #00bbdd;background:#00bbdd;text-align:center;font-size:0.75em;font-weight:bold;color:#fff;}
            .MAS-appActionBtn-wrap button:before{content:'';position:absolute;left:50%;top:50%;/*transform:translate(0, -50%);*/display:block;background:url('../images/market2x/icon_app.png') no-repeat;background-size:88px 50px;} /* 2021-07-21 김선미 : [통합테스트-Test Case ID : PJ20211118_N04]이미지 위치조정 transform 삭제 */
            .MAS-appActionBtn-wrap button.MAS-appActionBtn-setupBtn{text-indent: 22px;} /* 설치 */
            .MAS-appActionBtn-wrap button.MAS-appActionBtn-setupBtn:before{width:17px;height:18px;background-position:-50px 0;margin-left: -23px;margin-top: -8px;} /* 2021-07-21 김선미 : [통합테스트-Test Case ID : PJ20211118_N04]이미지 위치조정 margin-top 추가 */
            .MAS-appActionBtn-wrap button.MAS-appActionBtn-updateBtn{text-indent: 28px;} /* 업데이트 */
            .MAS-appActionBtn-wrap button.MAS-appActionBtn-updateBtn:before{width:14px;height:14px;background-position:-50px -31px;margin-left: -29px;margin-top: -7px;} /* 2021-07-21 김선미 : [통합테스트-Test Case ID : PJ20211118_N04]이미지 위치조정 margin-top 추가 */
            .MAS-appActionBtn-wrap button.MAS-appActionBtn-exeBtn{text-indent: 21px;} /* 실행 */
            .MAS-appActionBtn-wrap button.MAS-appActionBtn-exeBtn:before{width:14px;height:12px;background-position:-36px -20px;margin-left: -22px;margin-top: -6px;} /* 2021-07-21 김선미 : [통합테스트-Test Case ID : PJ20211118_N04]이미지 위치조정 margin-top 추가 */
            .MAS-appActionBtn-wrap button[disabled]{color:rgba(255, 255, 255, 0.5);opacity: 0.5;}
            .MAS-appActionBtn-wrap button[disabled]:before{opacity:0.5;}
            
                /* line type button */
            .MAS-appActionBtn-wrap button.MAS-appActionBtn-deleteBtn{background:transparent;color:#00bbdd;text-indent: 21px;} /* 제거 */
            .MAS-appActionBtn-wrap button.MAS-appActionBtn-deleteBtn:before{width:13px;height:15px;background-position:-50px -15px;margin-left: -21px;margin-top: -7px;} /* 2021-07-21 김선미 : [통합테스트-Test Case ID : PJ20211118_N04]이미지 위치조정 margin-top 추가 */
            .MAS-appActionBtn-wrap button.MAS-appActionBtn-deleteBtn[disabled]{color:rgba(0, 187, 222, 0.5);border-color:rgba(0, 187, 222, 0.5);}
        
        .MAS-appPreview-wrap{padding:18px 15px 0;}
        .MAS-appPreview-wrap:after{content:"";display:block;clear:both;}
        .MAS-appPreview-wrap li{float:left;margin-bottom:18px;}
        .MAS-appPreview-wrap li img{display:block;margin:0 auto;border:3px solid #ccc;}
        .MAS-appPreview-wrap.MAS-appPreviewType01 li{width: calc(100% / 2);min-width: 133px;} /* 세로형이미지 : 1행 최대 2개 */ /* 2021-07-22 김선미 : [통합테스트-Test Case ID : PJ20211118_O03]width 수정, min-width 추가 */
        .MAS-appPreview-wrap.MAS-appPreviewType01 li img{width:123px;height:205px;}
        .MAS-appPreview-wrap.MAS-appPreviewType02 li{width:100%;min-width: 215px;} /* 가로형이미지 : 1행 최대 1개 */ /* 2021-07-22 김선미 : [통합테스트-Test Case ID : PJ20211118_O03]width 수정, min-width 추가 */
        .MAS-appPreview-wrap.MAS-appPreviewType02 li img{width:205px;height:123px;}
        
    .MAS-marketViewSubContents-wrap{}
        .MAS-marketViewSubTitle-wrap{padding:0 15px;height:34px;line-height:34px;background:#f3f4f5;font-size:0.75em;font-weight:bold;color:#444;letter-spacing:-1px;}
        .MAS-marketViewSubCon-wrap{padding:15px 20px 18px;line-height:15px;font-size:0.8125em;color:#7a7d85;letter-spacing:-1px;}
        .MAS-marketViewSubCon-wrap .MAS-marketViewEtcInfo li{position:relative;padding-left:8px;}
        .MAS-marketViewSubCon-wrap .MAS-marketViewEtcInfo li:after{content:'';position:absolute;left:0;top:7px;display:block;width:3px;height:3px;border-radius:50%;background:#7a7d85;}/* 2021-07-21 김선미 : [통합테스트-Test Case ID : PJ20211118_N04]이미지 위치조정 transform 삭제, top 수치 변경 */
        .MAS-marketViewEtcInfo .MAS-appSeparate{margin:0 4px;}


/* 마켓 탑 버튼 */
.MAS-topMove-btn{position:fixed;z-index:5;width:28px;height:28px;background:rgba(192, 194, 198, 0.9);border-radius: 50%;font-size:0;line-height:0;text-indent:-999999px;}
.MAS-topMove-btn:after{content:'';position:absolute;left:7px;top:7px;width:14px;height:15px;background:url('../images/market2x/icon_app.png') no-repeat 0 -31px;background-size:88px 50px;}
.MAS-marketList .MAS-topMove-btn,
.MAS-setupGroupList .MAS-topMove-btn{right:13px;bottom:11px;} /* 앱목록/설치그룹 목록 > 탑 버튼 */
.MAS-marketView .MAS-topMove-btn{right:13px;bottom:11px;} /* 앱상세 > 탑 버튼 */


/* 마켓앱 > Break Point - 2021-07-15 김선미 : 밀도별 CASE 정리
==================================================== */
/* 
CASE01. screenDensity 중밀도(Medium, mdpi), Width 360px 이하
- 기기(Device) 기준 : Device Small(중밀도)
- SFMI UX 기준 : Phone(360px*640px) 범주
*/
@media all and (max-width:360px) {
}

/* 
CASE02. screenDensity 고밀도(High, hdpi), Width 360px 초과/720px 이하
- 기기(Device) 기준 : Device Small(고밀도)
*/
@media all and (min-width:361px) and (max-width:720px){    
}

/* 
CASE03. screenDensity 초고밀도(x High, xhdpi), Width 720px 초과
- 기기(Device) 기준 : Device Large
- SFMI UX 기준 : Tab Window(1234px*770px)/Tab Android(1280px*680px)/PC(1280px, 1300px, 1600px) 범주 
*/
@media all and (min-width:721px){  
    /* 마켓 탭 */
    .MAS-marketTab-wrap ul li{position:relative;z-index:2;width:180px;}

    /* 앱 미리보기 이미지 */    
    .MAS-appPreview-wrap.MAS-appPreviewType01 li{width: calc(100% / 6);} /* 세로형이미지 : 1행 최대 6개 */ /* 2021-07-22 김선미 : [통합테스트-Test Case ID : PJ20211118_O03]width 수정 */
    .MAS-appPreview-wrap.MAS-appPreviewType02 li{width: calc(100% / 5);} /* 가로형이미지 : 1행 최대 5개 */ /* 2021-07-22 김선미 : [통합테스트-Test Case ID : PJ20211118_O03]width 수정 */
}