/* cs */
.cs_inner_box { width: 100%; font-family: 'NanumSquare'; }
.cs_tit { font-size: 2rem; margin-bottom: 15px; }
.cs_box_list {
	width: 100%; background-color: #131314;
	font-size: 0; word-break: break-all; word-spacing: 0;
	margin-bottom: 30px; border-radius: 10px;
}
.cs_box_list li {
	font-size: 1.6rem; display: inline-block; width: 50%;
	height: 120px;
    vertical-align: middle;
}
.cs_box_list > li:first-child { border-right: 1px solid #1e222d; }

.cs_box {
	padding: 40px 20px 20px 100px;
	background-position: 40px center;
	background-size: 50px; background-repeat: no-repeat;
	height: 120px;
}
.cs_box.call { background-image: url('/s/front/images/hd/sns_icon_chat.png'); }
.cs_box.kakao { background-image: url('/s/front/images/hd/sns_icon_kakao.png'); }
.cs_box.tel { background-image: url('/s/front/images/hd/sns_icon_tele.png'); }

.cs_box h2 { color: #ffffff; }

.social_cs { width: 100%; font-size: 0; word-break: break-all; word-spacing: 0; }
.social_cs li {
	font-size: 1.6rem; display: inline-block; width: 50%;
	background-position: center 22px;
	background-size: 50px; background-repeat: no-repeat;
}
.social_cs li .cs_box {
	padding-left: 80px;
	padding-top: 42px;
	background-position: 20px center;
}
.social_cs li .cs_box p { color: #a3a3a4; font-size: 1.2rem; }
.social_cs li .cs_box h2 { font-size: 2.2rem; font-family: 'NanumSquare'; }

.faq-li li { width: 100%; margin-bottom: 10px; padding-left: 40px; }
.q_box {
	display: block;
	width: 100%;
	background-color: #323233;
	padding: 20px;
	font-size: 1.6rem;
	border-radius: 0 20px 20px;
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.3);
	position: relative; color: #a3a3a4;
	transition: -webkit-all .3s ease;
    transition: all .3s ease;
    transition: all .3s ease, -webkit-transform .3s ease;
}
.q_box:before {
	content: '';
	display: block; width: 0; height: 0;
	border: 20px solid transparent;
	border-top-color: #323233;
	position: absolute;
	top: 0; left: -15px;
	transition: -webkit-all .3s ease;
    transition: all .3s ease;
    transition: all .3s ease, -webkit-transform .3s ease;
}
.q_box:after {
	content: 'Q.'; font-weight: bold;
	display: block; color: #1280f7;
	position: absolute; font-size: 2.2rem;
	top: -7px; left: -37px;
}

.q_box:hover { background-color: #4a4a4c; color: #fff; }
.q_box:hover:before { border-top-color: #4a4a4c; }

.q_box.active { background-color: #ffcc00; color: #000; }
.q_box.active:before { border-top-color: #ffcc00; }

.answer_box {
	display: block;
	width: 100%;
	background-color: #131314;
	padding: 20px;
	font-size: 1.6rem;
	border-radius: 0 20px 20px;
	position: relative; color: #a3a3a4;
	transition: -webkit-all .5s ease;
    transition: all .5s ease;
    transition: all .5s ease, -webkit-transform .5s ease;
}
.answer_box:before {
	content: '';
	display: block; width: 0; height: 0;
	border: 20px solid transparent;
	border-top-color: #131314;
	position: absolute;
	top: 0; left: -15px;
	transition: -webkit-all .5s ease;
    transition: all .5s ease;
    transition: all .5s ease,-webkit-transform .5s ease;
}
.answer_box:after {
	content: 'A.'; font-weight: bold;
	display: block; color: #129e37;
	position: absolute; font-size: 2.2rem;
	top: -7px; left: -37px;
}
.answer_box img { max-width: 100%; }

.answer_box a { color: #2196f3; line-height: 28px; }
.answer_box a:hover { text-decoration: underline; }
.faq-li li.answer_li {
	display: none;
}
.faq-li li.answer_li.active { display: block; }
.cs_btn_box span {
	vertical-align: middle; font-size: 1.2rem; margin-right: 15px;
}
@media all and (max-width:1400px){
	.social_cs li .cs_box {
		padding: 35px 20px 20px 70px;
		background-position: 20px center;
		background-size: 40px;

	}
	.social_cs li .cs_box p { font-size: 1.2rem; }
	.social_cs li .cs_box h2 { font-size: 1.8rem; }
}

@media all and (max-width:1030px){
	.cs_inner_box { width: 100%; padding: 2%; }
	.cs_box {
		padding: 42px 14px 14px 90px;
		background-position: 30px center;
	}
	.cs_box_list { width: 96%; margin: 20px auto; }
	.cs_tit { padding: 20px 20px 0; }
	.faq-li { padding: 20px; }


	.social_cs li { font-size: 1.2rem; }
	.faq-li li a { font-size: 1.2rem; padding: 14px; }
	.faq-li li .answer_box { font-size: 1.2rem; padding: 14px; }

	.social_cs li .cs_box {
		padding: 70px 0 0;
		background-position: center 20px;
		background-size: 40px;
		text-align: center;
	}
	.social_cs li .cs_box p { font-size: 1.2rem; }
	.social_cs li .cs_box h2 { font-size: 1.8rem; }
}

@media all and (max-width:640px){
	.cs_box_list > li { width: 100%; height: auto; }
	.cs_box_list li { height: auto; }
	.cs_box_list > li:first-child {
		border: none;
		border-bottom: 1px solid #2d2835;
	}
	.cs_box { padding-top: 40px; padding-bottom: 40px; height: auto; }
	.social_cs li {
		background-position: center 18px;
		background-size: 44px;
	}
	.cs_btn_box span { display: block; margin:  0 0 10px; }

	.social_cs li .cs_box {
		padding: 70px 0 20px;
		background-position: center 20px;
		background-size: 40px;
		text-align: center;
	}
	.social_cs li .cs_box p { font-size: 1.2rem; }
	.social_cs li .cs_box h2 { font-size: 1.8rem; }
}

/* internet_option guide page */
h1.guide_tit {
	font-size: 3rem; letter-spacing: -1px; color: #fff; margin: 30px 0;
	position: relative;
}
h1.guide_tit .swith_box {
	position: absolute; top: 3px; right: 0;
	border-radius: 5px; background: #2f2938;
	font-size: 0; word-break: break-all; word-spacing: 0;
	width: 180px; overflow: hidden;
}
h1.guide_tit .swith_box button {
	width: 50%; font-size: 1.2rem; line-height: 36px;
	padding: 0; margin: 0; text-align: center; color: #cbcada;
	cursor: pointer;
}
h1.guide_tit .swith_box button:hover {
	background: #3b3346;
}
h1.guide_tit .swith_box button.active {
	background-color: #1081dd; color: #fff;
}
.guide_box_wrap { display: none; }
.guide_box_wrap.active { display: block; }
.guide_box {
	background-color: #131314; border-radius: 10px;
	padding: 30px; margin-bottom: 60px;
}
.guide_box h2 { color: #fff; font-size: 2rem; margin-bottom: 30px; }
.guide_section { margin-bottom: 60px; }
.guide_section p {
	position: relative; font-size: 1.6rem; margin-bottom: 20px;
	padding-left: 80px; color: #cbcada; line-height: 24px;
}
.guide_section p em { color: #ffc600; }
.guide_section p .step_mark {
	display: inline-block; position: absolute;
	top: 0; left: 0; color: #2196f3; font-weight: bold;
}
.guide_section img {
	display: block; max-width: 80%; margin-left: 80px;
}

@media all and (max-width:1030px){
	h1.guide_tit { font-size: 2rem; padding-bottom: 46px; margin-bottom: 10px; }
	h1.guide_tit .swith_box { 
		bottom: 0; top: auto;
	}

	.guide_box { padding: 20px; }
	.guide_box h2 { font-size: 1.6rem; }
	.guide_section p { font-size: 1.4rem; }
}
@media all and (max-width:640px){
	
}