@charset "utf-8";
/* CSS Document */

/* 어권별 폰트
영어 font-family: 'Verdana', 'Tahoma','Arial', 'Geneva', 'Georgia', 'Malgun Gothic', 'Dotum';
중간 font-family: 'SimSun !important', 'sans-serif','Arial', 'Malgun Gothic', 'Dotum'
일어 font-family: 'Verdana','ＭＳ Ｐゴシック', 'sans-serif', 'Malgun Gothic', 'Dotum';
독어, 불어 font-family: Arial, Helvetica, sans-serif
서어, 노어 font-family: "Roboto", "RobotoSlab", "Apple SD Gothic Neo", "맑은 고딕", arial, helvetica, sans-serif
중번 font-family: "PingFang TC","PingFang SC", "Microsoft JhengHei", "Apple SD Gothic Neo", sans-serif */

/*reset*/
.sns_login form, .sns_login fieldset, .sns_login textarea, .sns_login select, .sns_login button, .sns_login input, .sns_login p, .sns_login ul, .sns_login li { border:none; margin:0; padding:0; overflow:hidden; letter-spacing:-0.025em; font-family: 'Verdana','ＭＳ Ｐゴシック', 'sans-serif', 'Malgun Gothic', 'Dotum';}
.modal_screen { position:fixed; top:0; left:0; width:100%;  height:100%; background:rgba(0,23,49,0.9); pointer-events:none; z-index:3001;} /* 모달 배경 */

/* basic */
.sns_login { position:fixed; z-index:3002; width:700px; top:50%; left:50%; margin: -250px 0 0 -350px; color:#fff; letter-spacing:-0.025em; font-size:14px; font-family: 'Verdana','ＭＳ Ｐゴシック', 'sans-serif', 'Malgun Gothic', 'Dotum';}
.sns_login a { text-decoration:none; color:#fff;}
.sns_login .ta-center { text-align:center;}
.sns_login .mr10 { margin-right:10px;}
.sns_login .mt20 { margin-top:20px;}
.sns_login .sns_login_close { background:url('http://tong.visitkorea.or.kr/img/vk/common_intl/snsLogin/login_close.png') no-repeat 0 0; width:20px; height:19px; position:absolute; top:0; right:0; font-size:0;} /* 닫기 버튼 */
.sns_login .sns_login_wrap { position:relative; letter-spacing:-1px; padding:30px 0; margin:0 auto;}
.sns_login .sns_login_wrap .login_tit { font-size:20px; padding:0 20px;}
.sns_login .sns_login_wrap .login_tit b { background:url('http://tong.visitkorea.or.kr/img/vk/common_intl/snsLogin/ico_tit.png') 0 0px no-repeat; text-align:center; padding-left:30px; line-height:1.5em; display:inline-block; font-size:18px;}
.sns_login .sns_login_wrap .login_text { margin-bottom:20px; line-height:1.5em; padding:0 20px;}
.sns_login .sns_login_wrap .login_text strong { display:block;}
.sns_login .sns_login_wrap .login_body { padding:30px; border-top:1px solid #a4a7b5; border-bottom:1px solid #a4a7b5; margin:30px 0;}
.sns_login .sns_login_wrap .login_body .login_text { margin-bottom:20px; line-height:1.5em; padding:0;}


/***** 1단계:: 소셜로그인 *****/
.sns_login .sns_login_wrap .login_body .sns_list {}
.sns_login .sns_login_wrap .login_body .sns_list > li { display:inline-block; vertical-align:top; width:120px; margin:50px 25px; font-size:12px;}
.sns_login .sns_login_wrap .login_body .sns_list > li > a.gg { background: url('http://tong.visitkorea.or.kr/img/vk/common_intl/snsLogin/ico_google.png') 0 0 no-repeat; display:block; padding-top:150px; background-size: 100%;background-position: center;}
.sns_login .sns_login_wrap .login_body .sns_list > li > a.fb { background: url('http://tong.visitkorea.or.kr/img/vk/common_intl/snsLogin/ico_facebook.png') 0 0 no-repeat; display:block; padding-top:150px; background-size: 100%;background-position: center;}
.sns_login .sns_login_wrap .login_body .sns_list > li > a.ww { background: url('http://tong.visitkorea.or.kr/img/vk/common_intl/snsLogin/ico_weibo.png') 0 0 no-repeat; display:block; padding-top:150px; background-size: 100%;background-position: center;}
.sns_login .sns_login_wrap .login_body .sns_list > li > a::after {content:'›'; margin-left:5px;}


/***** 2단계:: 개인정보활용동의 *****/
.sns_login .sns_login_wrap .login_body .login_chk {}
.sns_login .sns_login_wrap .login_body .login_chk .chk_img { position:relative; line-height:1.5em;}
.sns_login .sns_login_wrap .login_body .login_chk .chk_img input { vertical-align: middle; opcity:0; width:0; height:0; margin:0; padding:0; background:rgba(0,0,0,0.3); font-size:12px;}
.sns_login .sns_login_wrap .login_body .login_chk .chk_img label { position:absolute; left:0; height:20px; padding:0 0 0 20px; background:url(http://tong.visitkorea.or.kr/img/vk/common_intl/snsLogin/chk_off.png) 0 4px no-repeat;}
.sns_login .sns_login_wrap .login_body .login_chk .chk_img input[type="checkbox"]:checked + label { background-position:0; display:inline-block; background:url(http://tong.visitkorea.or.kr/img/vk/common_intl/snsLogin/chk_on.png) 0 4px no-repeat;}
.sns_login .sns_login_wrap .login_body .login_chk textarea { overflow:hidden; overflow-y:scroll; width:620px; height:115px; border:1px solid #e2e2e2; background:rgba(255,255,255,0.3); color:#fff; padding:10px; margin-top:10px; font-size:14px; line-height:1.45em;}

	
/***** 3단계:: 셀렉트박스 *****/
select::-ms-expand { display:none;} /* IE 10,11의 네이티브 화살표 없애기 */
.basic_bx1, .basic_bx2, .basic_bx3 { height:40px; width:120px; border:none; background:#fff; border-radius:5px; float:left; margin-right:3px; margin-bottom:20px;}
.basic_bx2 { width:140px;;}
.basic_bx3 { width:221px;;}
.basic_bx4 { height:40px; width:150px; border:none; background:#fff; border-radius:5px; float:left; margin-bottom:20px;}
.sns_login .sns_login_wrap .login_body select { width:100%; appearance:none; /* 네이티브 스타일 없애기 */ -webkit-appearance:none; -moz-appearance:none; -o-appearance:none; background:url(http://tong.visitkorea.or.kr/img/vk/common_intl/snsLogin/sel_arrow.png) no-repeat 97% 17px; padding:12px 10px;}


/***** 3단계:: 관심분야 체크박스 *****/
.sns_login .sns_login_wrap .inter_text {text-align:center; border:2px solid #fff; border-radius:5px; height:30px; margin:0 0 5px 0; line-height:1.5em; padding-top:10px;}
.sns_login .sns_login_wrap  .c-pink { color:#ff007e; text-align:center; font-size:12px;}

.sns_login .sns_login_wrap .login_body .interest_bx { margin:10px auto 0; padding:10px 15px; border-radius:5px; background:rgba(255,255,255,0.3);}
.sns_login .sns_login_wrap .login_body .interest_bx ul { width:100%; font-size:12px;}
.sns_login .sns_login_wrap .login_body .interest_bx li {width:30%; float:left; line-height:1.2em; padding:5px 0;}
.sns_login .sns_login_wrap .login_body .interest_bx li.third {width:40%; float:left;}

.sns_login .sns_login_wrap .login_body .interest_bx li .chk_img { position:relative;}
.sns_login .sns_login_wrap .login_body .interest_bx li .chk_img input { vertical-align: middle; opcity:0; width:0; height:0; margin:0; padding:0; background:rgba(0,0,0,0.3)}
.sns_login .sns_login_wrap .login_body .interest_bx li .chk_img label { position:absolute; left:0; height:20px; padding:0 0 0 25px; background:url(http://tong.visitkorea.or.kr/img/vk/common_intl/snsLogin/chk_off.png) no-repeat;}
.sns_login .sns_login_wrap .login_body .interest_bx li .chk_img input[type="checkbox"]:checked + label { background-position:0; display:inline-block; background:url(http://tong.visitkorea.or.kr/img/vk/common_intl/snsLogin/chk_on.png) no-repeat;}

	
/* 버튼 */
.sns_login .sns_login_wrap .btn {display:inline-block; vertical-align:top; border:2px solid #fff; border-radius:3px; color:#fff; background:none; padding:5px 30px 7px;}


@media screen and (max-width: 700px) {
	.sns_login { width:100%; height:100%; margin:0 auto;top:0; left:0; overflow-y:scroll;}
	.sns_login .sns_login_wrap .login_body { margin:10px; padding:30px 0; font-size:12px;}
	
	.sns_login .sns_login_wrap .login_body .sns_list > li { width:85px; margin:0 20px;} /* 로그인 */
	.sns_login .sns_login_close { top:10px; right:3%;} /* 닫기 버튼 */
	.sns_login .sns_login_wrap .login_body .login_chk textarea {width:95%; height:115px; font-size:12px; line-height:1.35em;} /* textarea */

	/* 셀렉트 박스 */
	.basic_bx1, .basic_bx2, .basic_bx3 { width:100%; margin:0 0 5px 0;}
	.basic_bx4 { width:100%; margin:0 0 20px 0;}

	/* 관심분야 체크박스 */
	.sns_login .sns_login_wrap .login_body .interest_bx li {width:100%; float:left; line-height:1.2em; padding:5px 0;}
	.sns_login .sns_login_wrap .login_body .interest_bx li.third {width:100%; float:left;}
}

@media screen and (max-width: 400px) {
	/* 로그인 */
	.sns_login .sns_login_wrap .login_body .sns_list > li { display:block; margin:0 auto;}
	.sns_login .sns_login_wrap .login_body .sns_list > li > a.gg, 
	.sns_login .sns_login_wrap .login_body .sns_list > li > a.fb,
	.sns_login .sns_login_wrap .login_body .sns_list > li > a.ww { padding-top:100px; background-size: 70%;background-position: center;}
	.sns_login .sns_login_wrap .login_body .login_chk textarea { width:93%;} /* textarea */
}