@charset "UTF-8";

@import url("../fonts/Pretendard/Pretendard.css");

*{outline:none;text-shadow:none;box-shadow:none;-webkit-text-size-adjust:none;-webkit-backface-visibility:hidden;-webkit-tap-highlight-color:transparent;
/*font-feature-settings:"tnum";font-variant-numeric:tabular-nums;*/
-webkit-user-select:none; /* Safari */
-ms-user-select:none; /* IE 10 and IE 11 */
user-select:none; /* Standard syntax */
}

input,select,textarea{-ms-user-select:auto;-moz-user-select:auto;-webkit-user-select:auto;-khtml-user-select:auto;user-select:auto;}

html{margin:0;padding:0;overflow:hidden;touch-action:pan-x pan-y;}
body{position:relative;margin:0;padding:0;font-family:"Pretendard",Sans-serif;background-color:#f9fafc;overflow:hidden;touch-action: pan-x pan-y;}

[app-page]{position:fixed;left:0;top:0;width:100%;height:100%;overflow:hidden;}
[app-page].design_background{background-color:#EEF2FA;}
[app-page].design_background_white{background-color:#FFFFFF;}


[app-header]{position:absolute;z-index:10;top:0;left:0;width:100%;height:60px;padding:0 calc(15px + env(safe-area-inset-right)) 0 calc(15px + env(safe-area-inset-left));box-sizing:border-box;/*border-bottom:1px solid #aaaaaa;*/}
[app-header] .inner{position:relative;height:100%;}
[app-header] .title{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:calc(100% - 60px - 30px - 10px - env(safe-area-inset-left) - env(safe-area-inset-right));margin:0;padding:0;font-weight:600;font-size:18px;line-height:19px;color:#222222;white-space:nowrap;text-overflow:ellipsis;text-align:center;box-sizing:border-box;}
[app-header] .title.align_left{text-align:left;}
[app-header] .title.size_large{font-weight:700;font-size:18px;line-height:22px;}
[app-header] .button{position:absolute;left:0;top:50%;transform:translateY(-50%);width:30px;height:30px;margin:0;padding:0;-webkit-appearance:none;border:0;border-radius:0;background-color:transparent;font-size:0;color:transparent;background-repeat:no-repeat;background-position:center center;box-shadow:none;text-shadow:none;cursor:pointer;}
[app-header] .button:hover{background-color:transparent;}
[app-header] .button.button_back{background-image:url(../img/layout/header_button_back.svg);background-size:10px;}
[app-header] .reference{position:absolute;right:15px;top:50%;transform:translateY(-50%);text-align:right;font-weight:500;font-size:12px;line-height:16px;color:#222222;}
[app-header].design_background{background-color:#EEF2FA;}
[app-header].type_logo .logo{position:absolute;left:0;top:50%;transform:translateY(-50%);display:block;text-decoration:none;cursor:pointer;}
[app-header].type_logo .logo img{position:relative;display:block;height:20px;}
[app-header].type_logo .socials{position:absolute;right:0;top:50%;transform:translateY(-50%);}
[app-header].type_logo .socials ul{position:relative;margin:0;padding:0;list-style:none;}
[app-header].type_logo .socials ul:after{content:"";display:block;clear:both;}
[app-header].type_logo .socials ul li{position:relative;float:left;}
[app-header].type_logo .socials ul li:nth-child(n+2){margin-left:7px;}
[app-header].type_logo .socials .social{position:relative;display:block;margin:0;padding:0;border:0;-webkit-appearance:none;width:28px;font-size:0;color:transparent;border-radius:50%;background-size:100%;background-repeat:no-repeat;background-position:center center;cursor:pointer;}
[app-header].type_logo .socials .social:before{content:"";display:block;padding-bottom:100%;}
[app-header].type_logo .socials .social.type_kakao_plus{background-image:url(../img/layout/header_social_kakao_plus.png);}
[app-header].type_logo .socials .social.type_youtube{background-image:url(../img/layout/header_social_youtube.png);}
[app-header].type_logo .socials .social.type_blog{background-image:url(../img/layout/header_social_blog.png);}
[app-header].type_logo .socials .social.type_cafe{background-image:url(../img/layout/header_social_cafe.png);}


[app-content]{position:relative;z-index:1;height:calc(100% - 60px - 70px - env(safe-area-inset-bottom)/3);top:60px;box-sizing:border-box;padding:0;}
[app-content].no_header{top:auto;height:calc(100% - 70px - env(safe-area-inset-bottom)/3);}
[app-content].no_footer{height:calc(100% - 60px);}
[app-content].no_header.no_footer{top:auto;height:100%;}
[app-content].no_footer .template_content{padding-bottom:calc(env(safe-area-inset-bottom)/3) !important;}


[app-footer]{position:absolute;z-index:10;bottom:0;left:0;width:100%;height:calc(70px + env(safe-area-inset-bottom)/3);background:#FFFFFF;box-shadow:0px -2px 30px rgba(0,0,0,0.07);box-sizing:border-box;}
[app-footer] .inner{position:relative;height:100%;}


[app-navigator]{position:relative;}
[app-navigator] ul{margin:0;padding:0;list-style:none;}
[app-navigator] ul:after{content:"";display:block;clear:both;}
[app-navigator] ul li{float:left;width:20%;text-align:center;}
[app-navigator] .item{position:relative;display:block;min-width:50px;height:70px;padding-top:15px;text-decoration:none;box-sizing:border-box;cursor:pointer;}
[app-navigator] .item .icon{position:relative;width:24px;height:24px;margin:0 auto;}
[app-navigator] .item .icon:before,
[app-navigator] .item .icon:after{content:"";display:block;position:absolute;left:0;top:0;width:100%;height:100%;background-size:100%;background-repeat:no-repeat;background-position:center center;}
[app-navigator] .item .icon:after{opacity:0;}
[app-navigator] .item .title{position:relative;margin:0;padding:0;color:#CBCBDD;font-weight:500;font-size:13px;line-height:20px;text-align:center;white-space:nowrap;text-overflow:ellipsis;}
[app-navigator] .item:hover .icon:before{opacity:0;}
[app-navigator] .item:hover .icon:after{opacity:0.5;}
[app-navigator] .item:hover .title{color:#031A6E;opacity:0.5;}
[app-navigator] .item.active .icon:before{opacity:0;}
[app-navigator] .item.active .icon:after{opacity:1;}
[app-navigator] .item.active .title{color:#031A6E;}
[app-navigator] .item.active:hover .icon:before{opacity:0;}
[app-navigator] .item.active:hover .icon:after{opacity:1;}
[app-navigator] .item .icon.icon_home:before{background-image:url(../img/layout/navigator_item_icon_home.svg);}
[app-navigator] .item .icon.icon_home:after{background-image:url(../img/layout/navigator_item_icon_home_active.svg);}
[app-navigator] .item .icon.icon_interest:before,
[app-navigator] .item .icon.icon_interest:after{background-size:90%;}
[app-navigator] .item .icon.icon_interest:before{background-image:url(../img/layout/navigator_item_icon_interest.svg);}
[app-navigator] .item .icon.icon_interest:after{background-image:url(../img/layout/navigator_item_icon_interest_active.svg);}
[app-navigator] .item .icon.icon_ranking:before{background-image:url(../img/layout/navigator_item_icon_ranking.svg);}
[app-navigator] .item .icon.icon_ranking:after{background-image:url(../img/layout/navigator_item_icon_ranking_active.svg);}
[app-navigator] .item .icon.icon_news:before,
[app-navigator] .item .icon.icon_news:after{background-size:21px;}
[app-navigator] .item .icon.icon_news:before{background-image:url(../img/layout/navigator_item_icon_news.svg);}
[app-navigator] .item .icon.icon_news:after{background-image:url(../img/layout/navigator_item_icon_news_active.svg);}
[app-navigator] .item .icon.icon_mypage:before{background-image:url(../img/layout/navigator_item_icon_mypage.svg);}
[app-navigator] .item .icon.icon_mypage:after{background-image:url(../img/layout/navigator_item_icon_mypage_active.svg);}

@media (orientation: landscape){
	[app-content]{height:calc(100% - 60px - 60px - env(safe-area-inset-bottom)/3);}
	[app-content].no_header{height:calc(100% - 60px - env(safe-area-inset-bottom)/3);}
	[app-content].no_footer{height:calc(100% - 60px);}
	
	[app-footer]{height:calc(60px + env(safe-area-inset-bottom)/3);}
	[app-navigator] .item{height:60px;padding-top:5px;}
}