@charset "euc-kr";
/* CSS Document */
@import url(http://fonts.googleapis.com/earlyaccess/notosanskr.css);

/*201606_APP_Info*/
.yellow{color:#fcff00 !important}
.black{color:#000; font-weight:200}
.white{color:#fff; font-weight:200}
.blue{color:#106ef2; font-weight:200}

/*main*/
.m_wrap{width:100%; height:100%}
.m_wrap{padding-top:4%; height:100%; text-align:center; font-family:'Noto Sans KR' , sans-serif ; background:url(/msiren/image/contents/app_bg.jpg) no-repeat; background-size:100%;}
.m_wrap ul{width:100%; font-size:1em; color:#fff; font-weight:300}
.m_wrap ul li{text-align:left; padding-left:2%; width:46%; float:left}
.m_wrap ul li:last-child{text-align:right; padding-left:0; padding-right:2%}
.m_wrap ul li img{width:50%; opacity:0.5}
.m_wrap h1{padding-top:15%; clear:both; font-size:3.8em; color:#fff; font-weight:500; line-height:1.2em;}
.m_wrap h1 span{font-weight:400}
.m_wrap h2{font-size:2em; padding-top:3%; color:#fff; font-weight:300}
.m_wrap h2 span{font-weight:500}
.m_wrap a img{width:76.25%; margin:15% auto 3%;}
.m_wrap p{text-align:left; font-size:1.4em; font-weight:200; color:#fff; margin:0 12%}
/*contents*/
.m_container{width:100%; height:100%; letter-spacing:-1px}
.m_container .m_contents{width:100%; height:100%;}
.m_container .m_contents h1{font-size:1.8em; padding:5% 8% 0 8%; font-weight:500; color:#000; margin-bottom:3%;}
.m_container .m_contents h2{ padding:0 8%; line-height:1.35em; font-size:1.25em; font-weight:400}
.m_container p{font-size:1.2em; padding:0 8% 3%; line-height:1.35em; font-weight:200; position:absolute; top:81.5%; color:#fff; background:#106ef2}
.m_container.none_bg dl{text-align:left;margin:4% 13%; border-bottom:1px dotted #ccc; padding-bottom:4%}
.m_container.none_bg dl dt{font-size:1em; font-weight:500;}
.m_container.none_bg dl dd{font-size:1em; font-weight:200;}
.m_container.none_bg dl:first-child{background:url(/msiren/image/contents/app_icon_01.png) no-repeat; background-size:20%; margin-top:10%; padding-left:18%}
.m_container.none_bg dl:nth-child(2){background:url(/msiren/image/contents/app_icon_02.png) no-repeat; background-size:20%; padding-left:18%}
.m_container.none_bg dl:last-child{background:url(/msiren/image/contents/app_icon_03.png) no-repeat; border-bottom:0; background-size:20%; padding-left:18%}
.m_container.none_bg p{background:none !important; color:#333;}
/*contents_background*/
.ctn_01{background:url(/msiren/image/contents/app_ctn_01_02.jpg) #106ef2 no-repeat; overflow:hidden; background-size:100%;}
.ctn_02{background:url(/msiren/image/contents/app_ctn_02_02.jpg) #106ef2 no-repeat; overflow:hidden; background-size:100%;}
.ctn_03{background:url(/msiren/image/contents/app_ctn_03_02.jpg) #106ef2 no-repeat; overflow:hidden; background-size:100%;}
.ctn_04{background:url(/msiren/image/contents/app_ctn_04_02.jpg) #106ef2 no-repeat; overflow:hidden; background-size:100%;}
.ctn_05{background:url(/msiren/image/contents/app_ctn_05_02.jpg) #106ef2 no-repeat; overflow:hidden; background-size:100%;}
.ctn_06{background:url(/msiren/image/contents/app_ctn_06_02.jpg) #106ef2 no-repeat; overflow:hidden; background-size:100%;}
.ctn_07{background:url(/msiren/image/contents/app_ctn_07_02.jpg) #106ef2 no-repeat; overflow:hidden; background-size:100%;}
/*back*/
.m_foot{width:100%; padding-top:15%; height:100%; text-align:center; font-family:'Noto Sans KR' , sans-serif ; background:url(/msiren/image/contents/app_bg.jpg) no-repeat; background-size:100%;}
.m_foot h1{font-size:2.2em; color:#fff; line-height:1.3em; font-weight:500; margin-bottom:3%}
.m_foot h1:last-child{margin-bottom:0}
.m_foot h2{font-size:1.4em; color:#fff; font-weight:300;margin-top:5%}
.m_foot > ul{width:80%; margin:7% auto;}
.m_foot > ul > li{background:url(/msiren/image/contents/app_blit.png) no-repeat; padding-left:6%; text-align:left; font-size:1.1em; font-weight:200; color:#fff; margin-top:2%}
.m_foot p{margin-top:7%}
.m_foot p img{width:76.25%; margin:0 auto; margin-bottom:2%}

@media all and (min-width:321px) and (max-width:479px){
/*main*/
.m_wrap{width:100%; height:100%}
.m_wrap{padding-top:8%; height:100%; text-align:center; font-family:'Noto Sans KR' , sans-serif ; background:url(/msiren/image/contents/app_bg.jpg) no-repeat; background-size:100%;}
.m_wrap ul{width:100%; font-size:1em; color:#fff; font-weight:300}
.m_wrap ul li{text-align:left; padding-left:2%; width:46%; float:left}
.m_wrap ul li:last-child{text-align:right; padding-left:0; padding-right:2%}
.m_wrap ul li img{width:50%; opacity:0.5}
.m_wrap h1{padding-top:20%; clear:both; font-size:4em; color:#fff; font-weight:500; line-height:1.2em;}
.m_wrap h1 span{font-weight:400}
.m_wrap h2{font-size:2.2em; padding-top:3%; color:#fff; font-weight:300}
.m_wrap h2 span{font-weight:500}
.m_wrap a img{width:76.25%; margin:18% auto 3%;}
.m_wrap p{text-align:left; font-size:1.4em; font-weight:200; color:#fff; margin:0 12%}
/*contents*/
.m_container{width:100%; height:100%; letter-spacing:-1px}
.m_container .m_contents{width:100%; height:100%;}
.m_container .m_contents h1{font-size:2.3em; padding:6% 8% 0 8%; font-weight:500; color:#000; margin-bottom:3%;}
.m_container .m_contents h2{ padding:0 8%; line-height:1.35em; font-size:1.4em; font-weight:400}
.m_container p{font-size:1.4em; line-height:1.4em; padding:0 8% 3%; font-weight:200; position:absolute; top:80%; color:#fff; background:#106ef2}
.m_container.none_bg dl{text-align:left; margin:5% 11%; border-bottom:1px dotted #ccc; padding-bottom:4%}
.m_container.none_bg dl dt{font-size:1.4em; font-weight:500;}
.m_container.none_bg dl dd{font-size:1.25em; font-weight:200;}
.m_container.none_bg dl:first-child{background:url(/msiren/image/contents/app_icon_01.png) no-repeat; background-size:20%; margin-top:10%; padding-left:18%}
.m_container.none_bg dl:nth-child(2){background:url(/msiren/image/contents/app_icon_02.png) no-repeat; background-size:20%; padding-left:18%}
.m_container.none_bg dl:last-child{background:url(/msiren/image/contents/app_icon_03.png) no-repeat; border-bottom:0; background-size:20%; padding-left:18%}
.m_container.none_bg p{background:none !important; color:#333;}
/*contents_background*/
.ctn_01{background:url(/msiren/image/contents/app_ctn_01_02.jpg) #106ef2 no-repeat; overflow:hidden; background-size:100%;}
.ctn_02{background:url(/msiren/image/contents/app_ctn_02_02.jpg) #106ef2 no-repeat; overflow:hidden; background-size:100%;}
.ctn_03{background:url(/msiren/image/contents/app_ctn_03_02.jpg) #106ef2 no-repeat; overflow:hidden; background-size:100%;}
.ctn_04{background:url(/msiren/image/contents/app_ctn_04_02.jpg) #106ef2 no-repeat; overflow:hidden; background-size:100%;}
.ctn_05{background:url(/msiren/image/contents/app_ctn_05_02.jpg) #106ef2 no-repeat; overflow:hidden; background-size:100%;}
.ctn_06{background:url(/msiren/image/contents/app_ctn_06_02.jpg) #106ef2 no-repeat; overflow:hidden; background-size:100%;}
.ctn_07{background:url(/msiren/image/contents/app_ctn_07_02.jpg) #106ef2 no-repeat; overflow:hidden; background-size:100%;}
/*back*/
.m_foot{width:100%; padding-top:15%; height:100%; text-align:center; font-family:'Noto Sans KR' , sans-serif ; background:url(/msiren/image/contents/app_bg.jpg) no-repeat; background-size:100%;}
.m_foot h1{font-size:2.4em; color:#fff; line-height:1.3em; font-weight:500; margin-bottom:3%}
.m_foot h1:last-child{margin-bottom:0}
.m_foot h2{font-size:1.8em; color:#fff; font-weight:300; margin-top:5%}
.m_foot > ul{width:80%; margin:7% auto;}
.m_foot > ul > li{background:url(/msiren/image/contents/app_blit.png) no-repeat; padding-left:6%; text-align:left; font-size:1.4em; font-weight:200; color:#fff; margin-top:5%}
.m_foot p{margin-top:10%}
.m_foot p img{width:76.25%; margin:0 auto; }
}

@media all and (min-width:480px){
/*main*/
.m_wrap{width:100%; height:100%}
.m_wrap{padding-top:8%; height:100%; text-align:center; font-family:'Noto Sans KR' , sans-serif ; background:url(/msiren/image/contents/app_bg.jpg) no-repeat; background-size:100%;}
.m_wrap ul{width:100%; font-size:1em; color:#fff; font-weight:300}
.m_wrap ul li{text-align:left; padding-left:2%; width:46%; float:left}
.m_wrap ul li:last-child{text-align:right; padding-left:0; padding-right:2%}
.m_wrap ul li img{width:50%; opacity:0.5}
.m_wrap h1{padding-top:20%; clear:both; font-size:4.2em; color:#fff; font-weight:500; line-height:1.2em;}
.m_wrap h1 span{font-weight:400}
.m_wrap h2{font-size:2.4em; padding-top:3%; color:#fff; font-weight:300}
.m_wrap h2 span{font-weight:500}
.m_wrap a img{width:76.25%; margin:20% auto 3%;}
.m_wrap p{text-align:left; font-size:1.4em; font-weight:200; color:#fff; margin:0 12%}
/*contents*/
.m_container{width:100%; height:100%; letter-spacing:-1px}
.m_container .m_contents{width:100%; height:100%;}
.m_container .m_contents h1{font-size:2.4em; padding:6% 8% 0 8%; font-weight:500; color:#000; margin-bottom:3.5%;}
.m_container .m_contents h2{ padding:0 8%; line-height:1.4em; font-size:1.6em; font-weight:400}
.m_container p{font-size:1.6em; line-height:1.4em; padding:0 8% 3%; font-weight:200; position:absolute; top:80%; color:#fff; background:#106ef2}
.m_container.none_bg dl{text-align:left; margin:8% 12%; border-bottom:1px dotted #ccc; padding-bottom:4%}
.m_container.none_bg dl dt{font-size:1.5em; font-weight:500;}
.m_container.none_bg dl dd{font-size:1.4em; font-weight:200;}
.m_container.none_bg dl:first-child{background:url(/msiren/image/contents/app_icon_01.png) no-repeat; background-size:20%; margin-top:10%; padding-left:18%}
.m_container.none_bg dl:nth-child(2){background:url(/msiren/image/contents/app_icon_02.png) no-repeat; background-size:20%; padding-left:18%}
.m_container.none_bg dl:last-child{background:url(/msiren/image/contents/app_icon_03.png) no-repeat; border-bottom:0; background-size:20%; padding-left:18%}
.m_container.none_bg p{background:none !important; color:#333;}
/*contents_background*/
.ctn_01{background:url(/msiren/image/contents/app_ctn_01_02.jpg) #106ef2 no-repeat; overflow:hidden; background-size:100%;}
.ctn_02{background:url(/msiren/image/contents/app_ctn_02_02.jpg) #106ef2 no-repeat; overflow:hidden; background-size:100%;}
.ctn_03{background:url(/msiren/image/contents/app_ctn_03_02.jpg) #106ef2 no-repeat; overflow:hidden; background-size:100%;}
.ctn_04{background:url(/msiren/image/contents/app_ctn_04_02.jpg) #106ef2 no-repeat; overflow:hidden; background-size:100%;}
.ctn_05{background:url(/msiren/image/contents/app_ctn_05_02.jpg) #106ef2 no-repeat; overflow:hidden; background-size:100%;}
.ctn_06{background:url(/msiren/image/contents/app_ctn_06_02.jpg) #106ef2 no-repeat; overflow:hidden; background-size:100%;}
.ctn_07{background:url(/msiren/image/contents/app_ctn_07_02.jpg) #106ef2 no-repeat; overflow:hidden; background-size:100%;}
/*back*/
.m_foot{width:100%; padding-top:25%; height:100%; text-align:center; font-family:'Noto Sans KR' , sans-serif ; background:url(/msiren/image/contents/app_bg.jpg) no-repeat; background-size:100%;}
.m_foot h1{font-size:2.6em; color:#fff; line-height:1.3em; font-weight:500; margin-bottom:3%}
.m_foot h1:last-child{margin-bottom:0}
.m_foot h2{font-size:1.8em; color:#fff; font-weight:300; margin-top:5%}
.m_foot > ul{width:80%; margin:10% auto 0;}
.m_foot > ul > li{background:url(/msiren/image/contents/app_blit.png) no-repeat; padding-left:6%; text-align:left; font-size:1.4em; font-weight:200; color:#fff; margin-top:5%}
.m_foot p{margin-top:15%}
.m_foot p img{width:76.25%; margin:0 auto; }
}