@charset "utf-8"; @import url(//fonts.googleapis.com/earlyaccess/nanumgothic.css); /*Common*/ article, aside, details, figcaption, figure, footer, hgroup, menu, nav, section, header { display: block; } html, body, form, fieldset,ol, ul, li, h1, h2, h3, h4, h5, h6, img, p, figure{ margin:0; padding:0; -webkit-text-size-adjust:none; font:normal 1em "Nanum Gothic",Malgun Gothic,dotum,sans-serif;} fieldset, img, input, button{ border:0; vertical-align:middle} body {margin:0; padding:0; width:100%; -webkit-text-size-adjust:none; -webkit-appearance:none;/*form스타일초기화*/ text-align:center;} h1, h2, h3, h4, h5, h6 { font:normal 1.384615384615385em "Nanum Gothic",Malgun Gothic,dotum,sans-serif;/*18/13*/ font-weight:600;} ol, ul, li { list-style: none; padding:0; margin:0; } a { text-decoration:none; color:#000; cursor:pointer; font:normal 1em "Nanum Gothic",Malgun Gothic,dotum,sans-serif;} a:hover {color:#555;} input,textarea,a,span{ font:normal 1em "Nanum Gothic",Malgun Gothic,dotum,sans-serif; } input { text-indent:10px; } button{ cursor:pointer; } div{ position:relative; } table{border-collapse:collapse;} input {border-radius:2px; border:1px solid #ccc !important;} textarea {border-radius:2px; border:1px solid #ddd !important;} ::-webkit-input-placeholder{color:#888;} /* 웹킷 전용 속성 */ textarea:-moz-placeholder, input:-moz-placeholder{color:#888;} /* 파이어폭스 전용 속성 */ img {-ms-interpolation-mode: bicubic;} header,section,article,footer{ position:relative; } td, th{font-size:12px;} .hide { display:none; } /*Layout*/ #namuWrap{width:100%; height:100%;} #namuWrap header{position:fixed; top:0px; left:0px; width:100%; height:35px; background-color:#FFF; border-bottom:solid 1px #333; z-index:999} #namuWrap header h1{ width:100%; height:35px; text-indent:-99999px; background:url("../img/mobile/logo.png") no-repeat 10px 15px; background-size: 114px 15px} #namuWrap header .video_play{float:right; color:#fff; margin:-35px 10px 0px 0px; font-size:11px; padding:5px 15px 5px 10px; border-radius:100px; border:1px solid #fff; background:url("../img/mobile/arrow.png") no-repeat 55px 7px; background-size: 5px 7px} #namuWrap header .video_play:hover{ border-radius:100px; background:url("../img/mobile/arrow.png") no-repeat 55px 7px #1A82CA; background-size: 5px 7px } #serviceList{width:100%; height:100%;} #serviceList h2{display:none} #serviceList .main_bnr_container{width:100%; height:495px; background:url("../img/mobile/bg_bnr.png") repeat-x; background-size: 21px 495px} #serviceList .main_bnr{width:100%; height:495px; background:url("../img/mobile/bg_img.png") no-repeat center; background-size: 500px 495px } #serviceList .main_bnr h3{position:absolute; top:55px; width:100%; color:#fff; font-weight:100} #serviceList .main_bnr h3 span{color:#b1ff5d} #serviceList .main_bnr p{position:absolute; top:455px; width:100%; color:#fff; font-size:0.9em} #serviceList .appdown{width:100%; height:68px; border-top:1px solid #ddd; border-bottom:1px solid #ddd;} #serviceList .appdown .googleplay{width:50%; height:68px; float:left; background:url("../img/mobile/icon_googleplay.png") no-repeat 10px 17px; background-size: 25px 25px; box-shadow:inset -1px 0px 0px #ddd} #serviceList .appdown .appstore{width:50%; height:68px; float:right; background:url("../img/mobile/icon_appstore.png") no-repeat 10px 17px; background-size: 25px 25px;} #serviceList .appdown span{padding:12px 5px 0px 40px; display:block; text-align:left; font-size:1em;font-weight:bold;} #serviceList .appdown span.gray{padding-top:0px; font-size:0.8em} #serviceList .service_guide{width:100%; margin:0 auto; } #serviceList .service_guide h3{font-size:0.9em; padding:15px 0px 0px 0px; color:#208eda} #serviceList .service_guide h4{font-size:1.2em; padding:15px 0px 5px 0px;} #serviceList .service_guide p{font-size:0.9em; color:#777; padding-bottom:10px} #serviceList .service_guide li{padding:15px 0px 20px 0px; border-bottom:1px solid #ddd} #serviceList .service_guide li p.service_img01{margin:0 auto; width:148px; height:89px; background:url("../img/mobile/service_img01.png") no-repeat center; background-size:148px 89px} #serviceList .service_guide li p.service_img02{margin:0 auto; width:174px; height:198px; background:url("../img/mobile/service_img02.png") no-repeat center; background-size:174px 198px} #serviceList .service_guide li p.service_img03{margin:0 auto; width:64px; height:34px; background:url("../img/mobile/service_img03.png") no-repeat center; background-size:64px 34px} #serviceList .service_guide li p.service_img04{margin:0 auto; width:28px; height:28px; background:url("../img/mobile/service_img04.png") no-repeat center; background-size:28px 28px} #serviceList .service_guide li p.service_img05{margin:0 auto; width:26px; height:34px; background:url("../img/mobile/service_img05.png") no-repeat center; background-size:26px 34px} #namuWrap footer{width:100%; background-color:#333e4e} #namuWrap footer .link{width:80%; margin:0 auto; text-align:center;} #namuWrap footer .link h4{font-size:0.8em; color:#6f8098; padding:32px 0 16px 0;} #namuWrap footer .link a{display:inline-block; float:center; width:52px; height:52px; margin-left:2px; text-indent:-9999px;} #namuWrap footer .link a.line{background:url("../img/mobile/link_line.png") no-repeat center; background-size:52px 52px} #namuWrap footer .link a.kakaotalk{background:url("../img/mobile/link_kakaotalk.png") no-repeat center; background-size:52px 52px} #namuWrap footer .link a.facebook{background:url("../img/mobile/link_facebook.png") no-repeat center; background-size:52px 52px} #namuWrap footer .link a.kakaostory{background:url("../img/mobile/link_kakaostory.png") no-repeat center; background-size:52px 52px} #namuWrap footer .link a.line:hover{background:url("../img/mobile/link_line_on.png") no-repeat center; background-size:52px 52px} #namuWrap footer .link a.kakaotalk:hover{background:url("../img/mobile/link_kakaotalk_on.png") no-repeat center; background-size:52px 52px} #namuWrap footer .link a.facebook:hover{background:url("../img/mobile/link_facebook_on.png") no-repeat center; background-size:52px 52px} #namuWrap footer .link a.kakaostory:hover{background:url("../img/mobile/link_kakaostory_on.png") no-repeat center; background-size:52px 52px} #namuWrap footer .copyright{font-size:0.7em; color:#4e5d73; padding:10px 0px} #namuWrap footer .pc_btn{margin:10px; padding-top:10px; } #namuWrap footer .pc_btn a{font-size:12px;background-color:#333e4e; padding:9px 22px;color:#9cadc5; border:solid 2px #b0bdd1; border-radius:50px;} #namuWrap footer .pc_btn a:hover{background-color:#3c485b; color:#fff;} #namuWrap footer .text01{font-size:12px; color:#768294;padding-top:18px;} /*class*/ .gray{color:#999} /*mobile_derect*/ #serviceList .direct_bnr_container{width:100%; height:401px; background-color:#4189c7} #serviceList .direct_bnr img{margin:98px 0 0 25px;float:left;width:115px;height:26px;} #serviceList .direct_bnr{width:100%; height:401px; background:url("../img/mobile/direct_bg_img.png") no-repeat center; background-size:320px 401px; margin-top: 75px } #serviceList .direct_bnr .icon_directlogo{width:100%;height:26px;background:url("../img/mobile/icon_directlogo.png") no-repeat left; background-size:115px 26px;margin:-10% 0 0 25px;} #serviceList .direct_bnr h3 {text-align:left; font-size:27px; color:#fff; position: absolute;top:32px;padding-left:25px;} #serviceList .direct_bnr h3 span{font-size:18px;} #serviceList .direct_bnr p{text-align:left; font-size:12px; color:#c0e1fe; position: absolute;top:130px;padding:2px 0 0 25px;} /*mobile_mypc*/ #serviceList .mypc_bnr_container{width:100%; height:401px; background-color:#0aabcd} #serviceList .mypc_bnr{width:100%; height:401px; background:url("../img/mobile/mypc_bg_img.png") no-repeat center; background-size:320px 401px; margin-top:75px;} #serviceList .mypc_bnr img{ margin-top:61px;width:100px;height:35px;} serviceList .mypc_bnr h3 {text-align:left; font-size:18px; color:#fff;font-weight:100; position: absolute;top:34px;padding-left:25px;} serviceList .mypc_bnr p{text-align:left; font-size:12px; color:#99edff; position: absolute;top:106px;padding:2px 0 0 25px;} #serviceList .mypc_bnr h3.mypc-text {font-size:18px; color:#fff;font-weight:100; position: absolute;top:34px;width:100%;} #serviceList .mypc_bnr p{font-size:12px; color:#99edff; position: absolute;top:106px;width:100%} #serviceList .mypc_service_guide{width:100%; margin:0 auto; } #serviceList .mypc_service_guide h3{font-size:0.9em; padding:15px 0px 0px 0px; color:#0aabcd;} #serviceList .mypc_service_guide h4{font-size:1.2em; padding:15px 0px 5px 0px;color:#3d3d3d} #serviceList .mypc_service_guide p{font-size:0.9em; color:#777; padding-bottom:10px} #serviceList .mypc_service_guide li{padding:15px 0px 20px 0px; border-bottom:1px solid #ddd} #serviceList .mypc_service_guide li p.mypc_service_img01{margin:0 auto; width:38.5px ; height:36px; background:url("../img/mobile/mypc_icon01.png") no-repeat center; background-size:38.5px 36px} #serviceList .mypc_service_guide li p.mypc_service_img02{margin:0 auto; width:40.5px ; height:33px; background:url("../img/mobile/mypc_icon02.png") no-repeat center; background-size:40.5px 33px} #serviceList .mypc_service_guide li p.mypc_service_img03{margin:0 auto; width:31px; height:37.5px; background:url("../img/mobile/mypc_icon03.png") no-repeat center; background-size:23.5px 37.5px} #serviceList .mypc_service_guide li p.mypc_service_img04{margin:0 auto; width:31px; height:37px; background:url("../img/mobile/mypc_icon04.png") no-repeat center; background-size:31px 37px} #serviceList .mypc_service_guide li p.mypc_service_img05{margin:0 auto; width:55px; height:41.5px; background:url("../img/mobile/mypc_icon05.png") no-repeat center; background-size:55px 41.5px} /*mobile_team*/ #serviceList .team_bnr_container{width:100%; height:401px; background-color:#e1e5f1} #serviceList .team_bnr{width:100%; height:401px; background:url("../img/mobile/team_bg_img1.png") no-repeat bottom; background-size:320px 347px;margin-top:35px; } #serviceList .team_bnr img{width:127px;height:35px;margin:0 auto;margin-top:65px} #serviceList .team_bnr h3.team-text{padding-top:10px; width: 100%; color: #333;font-weight:900;line-height:1.2em;font-size:18px;} #serviceList .team_bnr p{text-align:center; font-size:12px; color:#a8b7ff; position: absolute;top:109px ;margin:0 auto;width:100%;} #serviceList .team-service_guide{width:100%; margin:0 auto; background-color:#e9edf2;} #serviceList .team-service_guide h3{font-size:0.9em; padding:15px 0px 0px 0px; color:#5060b5;} #serviceList .team-service_guide h4{font-size:1.2em; padding:15px 0px 5px 0px;color:#000} #serviceList .team-service_guide p{font-size:0.9em; color:#777; padding-bottom:10px} #serviceList .team-service_guide li{padding:15px 0px 20px 0px; border-bottom:1px solid #ddd} #serviceList .team-service_guide li p.team-service_img01{margin:0 auto; width:320px ; height:350px; background:url("../img/mobile/team_icon01.png") no-repeat center; background-size:276px 303px} #serviceList .team-service_guide li p.team-service_img02{margin:0 auto; width:48px ; height:48px; background:url("../img/mobile/team_icon02.png") no-repeat center; background-size:48px 48px} #serviceList .team-service_guide li p.team-service_img03{margin:0 auto; width:40px; height:26px; background:url("../img/mobile/team_icon03.png") no-repeat center; background-size:40px 26px} #serviceList div.team-service_guide li p.team-service_img04{margin:0 auto; width:26.5px; height:34px; background:url("../img/mobile/team_icon04.png") no-repeat center; background-size:26.5px 34px} /*nav*/ #namuWrap .m-clcud{position:fixed;} #namuWrap nav{height:35px;width:100%; margin:0 auto;} #namuWrap nav.dir{background-color:#FFF;} #namuWrap nav.mpc{background-color:#e7f7fa;} #namuWrap nav.tam{background-color:#eeeff7;} #namuWrap nav .ser_img{background:url("../img/mobile/icon_cloud.png")no-repeat center;height:29px; padding-top:12px;background-size:40px 29px;margin-bottom:2px;} #namuWrap nav .ser_img:hover{background:url("../img/mobile/icon_cloud_over.png")no-repeat center;background-size:40px 29px;} #namuWrap nav a.btn-dir-on{background:url("../img/mobile/nav_direct_on.png")no-repeat;background-size: 55px 13px;} #namuWrap nav a.btn-team-on{background:url("../img/mobile/teamboxlogo.png")no-repeat;background-size: 78px 20px;} #namuWrap nav a.btn-my-on{background:url("../img/mobile/nav_mypc_on.png")no-repeat center;background-size: 55px 13px;} #namuWrap nav a.btn-dir{background:url("../img/mobile/nav_direct.png")no-repeat;background-size: 55px 13px;} #namuWrap nav a.btn-tam{background:url("../img/mobile/nav_team.png")no-repeat;background-size: 55px 13px;} #namuWrap nav a.btn-my{background:url("../img/mobile/nav_mypc.png")no-repeat;background-size: 55px 13px;} #namuWrap nav a.btn-dir:hover{background:url("../img/mobile/nav_direct_over.png")no-repeat;background-size:55px 13px;} #namuWrap nav a.btn-tam:hover{background:url("../img/mobile/nav_team_over.png")no-repeat;background-size: 55px 13px;} #namuWrap nav a.btn-my:hover{background:url("../img/mobile/nav_mypc_over.png")no-repeat;background-size: 55px 13px;} #namuWrap nav a{display: inline-block; float: center;width: 80px;height:20px;margin:7px 12px; text-indent: -9999px;} #namuWrap nav button{position:absolute; left:0px; width:30px; height:20px; background: url("../img/webView/back_arrow.png") no-repeat; background-size:30px 20px; margin-top:7px;} /*intro*/ #serviceList .intro-container{width:100%; height:534px; background-color:#63C3DA} #serviceList .intro-bnr img{margin:48px 0 0 25px;float:left;width:156px;height:18px;} #serviceList .intro-bnr{width:100%; height:533px; background:url("../img/mobile/intro_bg04.png") no-repeat top; background-size:320px 533px; } #serviceList .intro-bnr .icon_directlogo{width:100%;height:26px;background:url("../img/mobile/icon_directlogo.png") no-repeat left; background-size:115px 26px;margin:-10% 0 0 25px;} #serviceList .intro-bnr h3 {text-align:left; font-size:27px; color:#fff; position: absolute;top:72px;padding-left:25px;} #serviceList .intro-bnr h3 span{font-size:18px;} #serviceList .intro-bnr p{text-align:left; font-size:12px; color:#fff; position: absolute;top:137px;padding:2px 0 0 25px;} /*intro버튼*/ #serviceList .btn-link a.btn-direct{background:url("../img/mobile/intro_btn04.png")no-repeat bottom;background-size:91px 107px;} #serviceList .btn-link a.btn-team{background:url("../img/mobile/intro_btn05.png")no-repeat bottom;background-size:91px 107px;} #serviceList .btn-link a.btn-mypc{background:url("../img/mobile/intro_btn06.png")no-repeat bottom;background-size:91px 107px;} #serviceList .btn-link a.btn-direct:hover{background:url("../img/mobile/intro_btn04_over.png")no-repeat bottom;background-size:91px 107px;} #serviceList .btn-link a.btn-team:hover{background:url("../img/mobile/intro_btn05_over.png")no-repeat bottom;background-size:91px 107px;} #serviceList .btn-link a.btn-mypc:hover{background:url("../img/mobile/intro_btn06_over.png")no-repeat bottom;background-size:91px 107px;} #serviceList .btn-link a{display:inline-block;text-indent: -9999px;width: 90px;height:106px;padding: 0px;} #serviceList .btn-link{width: 100%; margin: 0 auto;text-align: center;position: absolute;top:390px;} /*event popup*/ .m_event{ position:absolute; top:5%; left:5%; z-index:998; width:90%; border:1px solid #333; box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.2), 0 0 6px rgba(0, 0, 0, 0.4); } .m_event .m_btm{ background-color:#f8f8f8; line-height:30px; } .m_event .m_btm label{ float:left; color:#999; font-size:12px; } .m_event .m_btm a{ position:absolute; width:30px; right:10px; float:right; font-weight:bold; color:#333; line-height:30px; font-size:12px; } /*event main*/ .event_img{width:100%; margin-top:36px;} .img_btn{position:absolute; width:100%; height:8%; top:59.5%;} .event_googlePlay_btn{position:relative; width:50%; height:45%; float:left;} .event_appStore_btn{position:relative; width:50%; height:45%; float:left;} .event_teamboxDetail_btn{position:relative; width:80%; height:40%; top:60%; margin:0 auto;}