@charset "UTF-8";

/* 타이틀 이미지 */
header#txtTitle { background-image:url('/res/img/sub/visual/v_support_faq.jpg'); background-position:center center; }

/* 탭 */
section#mqFAQ > div.tab > ul > li { font-weight:bold; text-align:center; }
section#mqFAQ > div.tab > ul > li > a { display:block; color:#666; }

/* 내용 */
section#mqFAQ > div.list > h3 { text-align:center; }
section#mqFAQ > div.list > dl { border-bottom:1px solid #ddd; line-height:1.6; }
section#mqFAQ > div.list > dl:first-of-type { border-top:3px solid #ccc; }
section#mqFAQ > div.list > dl.enter { border-top-color:#757575; }
section#mqFAQ > div.list > dl > dt > a { display:block; color:#555; display:-ms-flexbox; display:flex; align-items:center; }
section#mqFAQ > div.list > dl > dt > a:focus,
section#mqFAQ > div.list > dl > dt > a:hover { background-color:#f5f5f5; }
section#mqFAQ > div.list > dl > dt > a > span.q { color:#0dac67; font-weight:bold; padding-right:20px; margin-right:20px; }
section#mqFAQ > div.list > dl > dt > a:focus > span.q,
section#mqFAQ > div.list > dl > dt > a:hover > span.q { color:#f00; }
section#mqFAQ > div.list > dl.enter > dt > a { background-color:#0dac67; color:#fff; font-weight:bold; text-decoration:none; }
section#mqFAQ > div.list > dl.enter > dt > a > span.q { color:#ff0; }
section#mqFAQ > div.list > dl > dd { background-color:#e1faef; word-wrap:break-word; }

/*** Mobile ***/
@media screen and (min-width:1px) and (max-width:639px) {
	section#mqFAQ > div.tab > ul { display:-ms-flexbox; display:flex; flex-wrap:wrap; font-size:1.3em; }
	section#mqFAQ > div.tab > ul > li { width:50%; border-bottom:1px solid #dadada; }
	section#mqFAQ > div.tab > ul > li > a { padding-top:12px; padding-bottom:12px; }
	section#mqFAQ > div.tab > ul > li:nth-of-type(2n+2) > a { border-left:1px solid #dadada; }
	section#mqFAQ > div.tab > ul > li > a:focus,
	section#mqFAQ > div.tab > ul > li > a:hover { background-color:#f5f5f5; color:#333; }
	section#mqFAQ > div.tab > ul > li.active > a { background-color:#0dac67; color:#fff; }

	section#mqFAQ > div.list { margin-top:30px; }
	section#mqFAQ > div.list > h3 { font-size:3em; margin-bottom:30px; }
	section#mqFAQ > div.list > dl > dt > a { font-size:1.3em; padding:15px 20px; }
	section#mqFAQ > div.list > dl > dt > a > span.q { width:25px; font-size:1.6em; }
	section#mqFAQ > div.list > dl > dd { font-size:1.2em; padding:20px; }
}

/*** Tablet **/
@media screen and (min-width:640px) and (max-width:1019px) {
	section#mqFAQ > div.tab > ul > li { font-size:1.4em; }

	section#mqFAQ > div.list { margin-top:40px; }
	section#mqFAQ > div.list > h3 { font-size:3em; margin-bottom:30px; }
	section#mqFAQ > div.list > dl > dt > a { font-size:1.4em; padding:15px 20px; }
	section#mqFAQ > div.list > dl > dt > a > span.q { width:30px; font-size:1.7em; }
	section#mqFAQ > div.list > dl > dd { font-size:1.2em; padding:20px; }
}

/*** Tablet & Desktop ***/
@media screen and (min-width:640px) {
	section#mqFAQ > div.tab { background-color:#0dac67; }
	section#mqFAQ > div.tab > ul { display:-ms-flexbox; display:flex; }
	section#mqFAQ > div.tab > ul > li { flex-grow:1; }
	section#mqFAQ > div.tab > ul > li > a { padding-top:20px; padding-bottom:20px; color:#fff; }
	section#mqFAQ > div.tab > ul > li > a:focus,
	section#mqFAQ > div.tab > ul > li > a:hover { background-color:rgba(255, 255, 255, .75); color:#000; }
	section#mqFAQ > div.tab > ul > li.active > a { background-color:#fff; color:#0dac67; text-decoration:underline; }
}

/*** Desktop ***/
@media screen and (min-width:1020px) {
	section#mqFAQ > div.tab { width:100%; }
	section#mqFAQ > div.tab > ul { width:1000px; margin-left:auto; margin-right:auto; }
	section#mqFAQ > div.tab > ul > li { font-size:1.8em; }

	section#mqFAQ > div.list { width:1000px; margin:50px auto; }
	section#mqFAQ > div.list > h3 { font-size:3.3em; margin-bottom:40px; }
	section#mqFAQ > div.list > dl > dt > a { font-size:1.5em; padding:15px 25px; }
	section#mqFAQ > div.list > dl > dt > a > span.q { width:40px; font-size:1.8em; }
	section#mqFAQ > div.list > dl > dd { font-size:1.3em; padding:25px; }
}