@charset "utf-8";
/* Common */ 
body,p,h1,h2,h3,h4,h5,h6,ul,ol,li,dl,dt,dd,table,th,td,form,fieldset,legend,input,textarea,button,select{ margin:0;padding:0; letter-spacing:-0.7px}  
body,input,textarea,select,button,table{ font-family:'돋움',Dotum,arial,sans-serif; font-size:13px; color:#555}  
img,fieldset{ border:0}
ul,ol{ list-style:none}
em,address{ font-style:normal}
a{ text-decoration:none; color:#666}
/* layout */
body					{ width:100%; min-width:320px; background-color:#fff}
header					{ position:relative; width:100%}
footer					{ position:relative; width:100%; padding:15px 0; background-color:#7c7d80; color:#fff}
.wrap					{ position:relative; padding:10px}
.fl-left				{ float:left}
.fl-right				{ float:right}
.text-align-right		{ text-align:right}
.text-align-center		{ text-align:center}
.align-center			{ margin:0 auto}
.clearfix:before,.clearfix:after{ content:""; display:table}
.clearfix:after			{ clear:both}
.clearfix				{ zoom:1}
/* header */
.header-top				{ padding:3% 0 1% 0; background:#f8fcfd}
.header-top h1			{ text-align:center}
.header-top h1 img		{ max-width:115px}
/* footer */
address					{ width:90%; margin:0 auto; font-size:10px; text-align:center}
address span			{ padding:3px; line-height:14px}
.copyright				{ font-size:9px; text-align:center; padding:10px 0 15px 0; text-transform:uppercase}
.btn_pcver				{ text-align:center; padding-top:1%}
.btn_pcver > a			{ font-size:11px; font-weight:700; color:#fff; text-align:center; background:#5ec4d3; padding:5px 7px; text-transform:uppercase}
/* gnb */
.gnb					{ position:relative; z-index:9999; width:100%; padding:0; margin:0; background-color:#559cdd; height:32px}
.gnb ul					{ width:96%; margin:0 2%; background:url(/m/images/common/menu-btn.png) 0 8px no-repeat; background-size:16px; display:inline-block}
.gnb ul.home			{ width:96%; margin:0 2%; background:url(/m/images/common/menu-home.png) left no-repeat; background-size:16px; display:inline-block}
.gnb li					{ height:20px; padding:6px; float:left}
.gnb li					{ font-weight:100; font-size:13px; line-height:22px; color:#fff}
.gnb li.first			{ padding-left:30px}
.gnb li a				{ font-weight:100; font-size:13px; line-height:22px; padding:12px 0; color:#fff; padding-right:20px; background:url(/m/images/common/menubar-arrow.png) right no-repeat; background-size:10px; letter-spacing:-1px}
.gnb li:hover > ul		{ display: block}
.gnb .sub				{ display:none; width:100%; margin:0; padding:0; position:absolute; top:32px; left:0; z-index:10; border-top:none}
.gnb .sub li			{ width:100%; float:none; padding:7px 0; margin:0;  background:#559cdd; border-top:1px solid #4788c4}
.gnb .sub a				{ display:block; width:85%; margin-left:2%; padding:0; padding-left:30px; background:url(/m/images/common/menu-arrow.png) right no-repeat; background-size:8px}
.gnb .sub li:hover > a	{ text-shadow:none}
/* Table */
.default					{ width:100%; border-bottom:3px solid #e2e2e2; border-collapse:collapse; margin:25px 0 0 0}
.default table				{ width:100%; font-size:13px}
.default caption			{ padding-bottom:8px; font-weight:700; text-align:right}
.default thead th			{ background:#f4f4f4; border-top:3px solid #00a8e1; padding:15px 0}
.default tbody th			{ background:#f4f4f4; border-bottom:1px solid #e2e2e2; padding:15px}
.default th,.default td		{ border:0; padding:14px; vertical-align:middle; border:1px solid #e2e2e2; border-top:0; line-height:18px}
.default th					{ color:#00a8e1; font-weight:700; text-align:center; border-bottom:1px solid #e2e2e2; line-height:18px; vertical-align:middle}
.default td img				{ margin:0 5px; width:35px}
.default td.align-center	{ text-align:center}
/* Dropcaps(rectangle, round, border) */
.dropcap{
	display:block;
	float:left;
    margin:0 10px 0 0;
    font-size:20px;
	font-weight:700;
	line-height:20px;
	text-align:center;
	text-transform:uppercase}
.dropcap.rectangle	{ border-radius:5px 5px 5px 5px}
.dropcap.mint		{ background-color:#70d7e6; color:#fff; padding:5px 8px}
.dropcap.purple		{ background-color:#93a0f4; color:#fff; padding:5px 8px}
.dropcap.blue		{ background-color:#559cdd; color:#fff; padding:5px 8px}

/* Main Content */
.main-service			{ position:relative}
.main-service .main-visual{ float:none; margin-bottom:10px; width:100%}
.servie-message			{ position:relative}
.servie-message h2		{ position:absolute; top:20px; left:40px; display:block; font-size:18px; color:#222; font-weight:700; line-height:20px}
.servie-message h2 strong{ display:inline-block; color:#0071ac; font-weight:700}
.servie-message h2 strong span{ color:#52a600}
.servie-message img		{ width:100%}
.main-service .group1	{ width:100%}
.main-service .group1 div{ background:url(/m/images/content/sprite-service.png) no-repeat; background-size:auto}
.main-service .group1 div{ float:left; width:33.33%; height:90px; margin-bottom:10px}
.main-service .group1 a	{ display:block; width:100%; height:100%; font-size:14px; color:#fff; font-weight:700}
.main-service .group1 p	{ display:none}
.main-service .group1 p	{ margin:7px 0 0 0; font-size:11px; line-height:16px; text-align:center}
.main-service .group1 span{ display:block; padding:60px 0 0 0; text-align:center}
.main-service .group1 div.svc-join{ background-position:50% 10px; background-color:#66cedd}
.main-service .group1 div.svc-join p{ color:#d8f1f5}
.main-service .group1 div.svc-introduce{ background-position:50% -105px; background-color:#8c96bd}
.main-service .group1 div.svc-introduce p{ color:#e0e3ec}
.main-service .group1 div.svc-use{ background-position:50% -225px; background-color:#559cdd}
.main-service .group1 div.svc-use p{ color:#d5e4f5}
.main-service .download	{ width:100%}
.main-service .download > div{ height:145px; background:#559cdd url(/m/images/content/sprite-service.png) no-repeat; background-size:auto; background-position:95% -340px}
.main-service .download > div span{ display:block; padding:15px 0 0 15px; font-size:14px; color:#fff; font-weight:700}
.main-service .download > div p{ margin:7px 0 0 17px; font-size:11px; color:#d5e4f5; line-height:16px}
.main-service .download > div ul{ margin:17px 0 0 17px}
.main-service .download > div li{ display:inline-block}
.main-service .help-info{ margin-top:10px; width:100%}
.main-service .help-info > div{ padding-bottom:20px; text-align:center; border:1px solid #f0f0f0}
.main-service .help-info > div strong{ display:block; margin:20px 0 15px 0; font-size:18px; font-weight:800; text-align:center; vertical-align:middle}
.main-service .help-info > div strong span{ display:block; margin-bottom:5px; text-align:center}
.main-service .help-info > div a{ color:#555; text-decoration:none}
.main-service .help-info > div ul{ display:inline-block}
.main-service .help-info > div li label,
.main-service .help-info > div li span{ display:inline-block; font-size:12px; font-weight:700; line-height:24px; text-align:left}
.main-service .help-info > div li label{ width:80px; padding-left:23px; background:url(/m/images/content/sprite-work.png) no-repeat}
.main-service .help-info > div li label.week{ background-position:0 4px}
.main-service .help-info > div li label.launch{ background-position:0 -26px}
.main-service .help-info > div li label.holiday{ background-position:0 -56px}

/* Sub Contents */
.content					{ position:relative; padding:5px}
.content h3					{ font-size:18px; color:#222; font-weight:800; margin-bottom:10px; text-transform:uppercase}
/* 서비스가입 */
.service-join				{ line-height:18px}
.service-join h4			{ color:#5ec4d3; font-weight:700; margin-top:15px; padding-bottom:0}
.service-join strong a		{ font-weight:700}
.service-join p				{ font-size:14px; margin-top:15px}
.service-join span a		{ display:block; width:100%; height:100%; font-size:15px; color:#fff; font-weight:800; line-height:55px; text-transform:uppercase; text-decoration:none}
.service-join span			{ display:inline-block; margin:5px 0 0 0}
.service-join .save-app,
.service-join .program,
.service-join .save-usim,
.service-join .hts			{ padding-left:80px; width:200px; height:55px; letter-spacing:-1px; background-size:contain}
.service-join .save-app		{ background:url(/m/images/content/btn-save-app.png) no-repeat}
.service-join .program		{ background:url(/m/images/content/btn-program.png) no-repeat}
.service-join .save-usim	{ background:url(/m/images/content/btn-save-usim.png) no-repeat}
.service-join .hts			{ background:url(/m/images/content/btn-hts.png) no-repeat}
.app-download				{ }
.app-download ul			{ margin-top:5px; text-align:center}
.app-download li			{ display:inline-block; margin:0 3px}
.app-download li a			{ font-size:13px; color:#363636; font-weight:700; text-decoration:none}
.app-download li a img		{ width:48px}
/* 서비스소개 */
.introduce					{ line-height:18px}
ul.service-ul				{ margin-top:30px}
ul.service-ul li			{ position:relative; float:left; width:33%; height:134px; line-height:20px; background:url(/images/introduce/ul-left-bar.gif) top left no-repeat}
ul.service-ul li.second-width{ width:34%}
ul.service-ul li strong,
ul.service-ul li span		{ display:block; padding-left:30px}
ul.service-ul li strong		{ font-size:16px; color:#559cdd; font-weight:700; margin-bottom:5px}
ul.service-ul li img		{ position:absolute; top:45px; right:40px}
ul.function-ul				{ }
ul.function-ul li			{ margin-bottom:15px; height:155px; background-repeat:no-repeat; background-size:contain; background-position:top center}
ul.function-ul li.last		{ margin-bottom:0}
ul.function-ul li.func1		{ background-image:url(/images/introduce/function1.png)}
ul.function-ul li.func2		{ background-image:url(/images/introduce/function2.png)}
ul.function-ul li.func3		{ background-image:url(/images/introduce/function3.png)}
ul.function-ul li strong	{ display:block; padding-top:32px; font-size:14px; color:#046ebb; font-weight:700; text-align:center; line-height:20px}
ul.feature-ul				{ }
ul.feature-ul li			{ margin:-1px 0; padding:15px 0; border:1px solid #eee; border-left:0; border-right:0}
ul.feature-ul label,
ul.feature-ul span			{ display:inline-block; vertical-align:top}
ul.feature-ul label			{ width:34%}
ul.feature-ul label img		{ width:85px}
ul.feature-ul span			{ width:65%}
ul.feature-ul span strong	{ display:block; font-size:15px; color:#5ec4d3; font-weight:700; margin-bottom:10px}
ul.feature-ul span span		{ display:block; width:100%; margin-bottom:10px; line-height:18px}
ul.feature-ul span span.last{ margin-bottom:0}
/* 서비스이용방법 */
.use-guide					{ padding-top:10px}
.use-guide ul,
.use-guide li:after			{ display:block; content:""; clear:both}
.use-guide li				{ float:left}
.use-guide .image-holder	{ height:230px; line-height:230px; text-align:center}
.use-guide .image-holder img{ height:100%; vertical-align:middle}
.use-guide .description		{ margin:25px 0 0 0}
.use-guide .description strong{ display:block; padding-top:5px; font-size:15px; color:#363636; font-weight:700; letter-spacing:-1px}
.use-guide .description p	{ margin-top:15px; font-size:13px; color:#363636; font-weight:700; line-height:18px; letter-spacing:-1px; text-align:justify}
.point-color				{ color:#5ec4d3}
.point-color.saveusim		{ color:#93a0f4}
.use-add					{}
.use-add div				{ padding:15px 0 20px 0; border-top:1px solid #eee}
.use-add div.last			{ padding-bottom:0}
.use-add div div			{ border:0; padding:0; margin:0}
.use-add div span			{ margin-right:3px; width:13px; height:13px; font-size:14px; line-height:12px}
.use-add div strong			{ padding-top:10px; font-size:14px; color:#363636; font-weight:700; line-height:18px; letter-spacing:-1px}
.use-add div strong span	{ color:#559cdd}
.use-add div > p			{ padding-top:10px}
.use-add div > ul			{ }
.use-add div > ul li		{ float:left; width:50%}
.use-add div > ul li img	{ width:120px}
.use-add div > ul li.last img{ width:auto; height:120px}
.use-add div > ul li p		{ margin:10px 5px 0 0; height:70px; text-align:justify}
/* 서비스문의 */
.help > div					{ padding-bottom:20px; text-align:center; border:1px solid #f0f0f0; background:none}
.help > div strong			{ display:block; margin:20px 0 15px 0; font-size:24px; font-weight:800; text-align:center; vertical-align:middle}
.help > div strong span		{ display:block; margin-bottom:5px; font-size:16px; font-weight:400; text-align:center}
.help > div a				{ color:#555; text-decoration:none}
.help > div ul				{ display:inline-block}
.help > div li label,
.help > div li span			{ display:inline-block; font-size:13px; font-weight:700; line-height:24px; text-align:left}
.help > div li label		{ width:80px; padding-left:23px; background:url(/m/images/content/sprite-work.png) no-repeat}
.help > div li label.week	{ background-position:0 4px}
.help > div li label.launch	{ background-position:0 -26px}
.help > div li label.holiday{ background-position:0 -56px}
.service-join.help			{ margin-top:-1px}
.service-join.help h4		{ margin-bottom:5px; font-size:15px; font-weight:700}
.service-join.help p		{ margin:0; padding-bottom:1px; line-height:18px}
.service-join.help span		{ display:block; margin:5px 0 0 0; font-size:16px}
.service-join.help span img	{ margin-right:5px; width:40px; vertical-align:middle}
.service-join.help span a	{ display:inline-block; width:auto; height:auto; line-height:18px}

/* iPhone landscape */
@media only screen and (min-width:480px) and (max-width:1024px) {
/* Main Content */
.main-service .main-visual{ float:left; margin-bottom:10px; width:65%}
.servie-message			{ height:350px; margin-right:10px; background:url(/m/images/content/visual.jpg) top left no-repeat}
.servie-message h2		{ position:static; padding:35px 0 0 60px; font-size:22px; line-height:26px}
.servie-message img		{ display:none}
.main-service .group1	{ float:right; width:35%}
.main-service .group1 div{ float:none; width:auto; height:110px}
.main-service .group1 p	{ display:block}
.main-service .group1 p	{ margin:7px 0 0 15px; text-align:left}
.main-service .group1 span{ padding:35px 0 0 15px; text-align:left}
.main-service .group1 div.svc-join{ background-position:95% 25px}
.main-service .group1 div.svc-introduce{ background-position:92% -94px}
.main-service .group1 div.svc-use{ background-position:95% -215px}
.main-service .download	{ float:left; width:65%}
.main-service .download > div{ margin-right:10px}
.main-service .help-info{ float:right; margin-top:0; width:35%}
.main-service .help-info > div{ padding-bottom:0; height:145px; text-align:left}
.main-service .help-info > div strong span{ display:inline-block; margin-bottom:0; margin-right:10px; vertical-align:middle}
.main-service .help-info > div ul{ display:block; margin-left:12px}
.main-service .help-info > div li label{ width:52px}
/* Sub Contents */
.service-join				{ background:url(/images/service-join/imagery-service.png) top right no-repeat; background-size:40%}
.app-download li a img		{ width:65px}
.service-join span a		{ line-height:45px}
.service-join span			{ margin:5px 5px 0 0}
.service-join .save-app,
.service-join .program,
.service-join .save-usim,
.service-join .hts			{ padding-left:60px; width:160px; height:50px}
ul.function-ul li			{ float:left; width:32.5%; margin-right:5px; height:115px; background-size:100% 105px}
ul.function-ul li.last		{ margin-right:0}
ul.function-ul li strong	{ padding-top:12px; font-size:11px; line-height:16px}
ul.feature-ul label img		{ width:110px}
.help > div					{ float:left; width:49.55%}
.service-join.help			{ margin-top:0; margin-left:-1px}
.service-join.help.mail		{ width:99.4%; margin:-1px 0 0 0 }
.use-add div > ul li		{ width:33.33%}
.use-add div > ul li img	{ width:130px}
.use-add div > ul li.last img{ width:auto; height:205px}
}