@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 ***/
form, fieldset, textarea, select, button, input, p, ul, li { border:none; margin:0; padding:0; letter-spacing:-0.025em;}
.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: -350px 0 0 -350px; color:#fff; letter-spacing:-0.025em; font-size:14px;}
.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; height: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:160px; margin:50px 0; font-size:12px;}
.sns_login .sns_login_wrap .login_body .sns_list > li > a { display:block; padding-top:150px; margin:auto; text-align:center;}
.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') center 0 no-repeat; background-size:120px;}
.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') center 0 no-repeat; background-size:120px;}
.sns_login .sns_login_wrap .login_body .sns_list > li > a.is { background: url('/enu/img/comm/instagram_ico.png') center 0 no-repeat; background-size:120px;}
.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') center 0 no-repeat; background-size:120px;}
.sns_login .sns_login_wrap .login_body .sns_list > li > a.tw { background: url('/enu/img/comm/twitter_ico.png') center 0 no-repeat; background-size:120px;}
.sns_login .sns_login_wrap .login_body .sns_list > li > a.ap { background: url('/enu/img/comm/ico_apple.png') center 0 no-repeat; background-size:120px;}
.sns_login .sns_login_wrap .login_body .sns_list > li > a::after {content:'›'; margin-left:5px;}

/***** Kfriends 로그인 *****/
.sns_login .Kfris_login_wrap {position:relative;letter-spacing:-0.025em;padding:0;margin:0 auto;background:#7ab0dc url(/enu/img/comm/kfriend_login/kfriend_bg.jpg) no-repeat top; box-sizing:border-box}
.sns_login .Kfris_login_wrap .con{width:100%; padding:30px 145px 30px 190px; color:#fff; background:url(/enu/img/comm/kfriend_login/kfriend_logo.png) no-repeat top} 
.sns_login .Kfris_login_wrap .con .text{ text-align:left; font-size:14px; line-height:22px;color:#fff; letter-spacing:0.5px}
.sns_login .Kfris_login_wrap .link-area {overflow:hidden; margin-top:25px;letter-spacing:0.5px }
.sns_login .Kfris_login_wrap .link-area button{font-size:14px;color:#fff; letter-spacing:0.5px;border-radius:0}
.sns_login .Kfris_login_wrap .link-area [class*='btn-link'] {display:block; width:160px; line-height:33px; text-align:center; text-shadow:1px 1px #333;}
.sns_login .Kfris_login_wrap .link-area .btn-link01 {float:left;background-color:#3c519f}
.sns_login .Kfris_login_wrap .link-area .btn-link02 {float:right; background-color:#9f318d;}


/***** 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; opacity: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:110px; border:none; background:#fff; border-radius:5px; float:left; margin-right:3px; margin-bottom:20px;}
.basic_bx2 {width:120px;}
.basic_bx3 {width:231px;}
.basic_bx4 { height:40px; width:170px; 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; overflow:hidden;}
.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); overflow:hidden;}
.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 label {color:#fff !important;}

.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; opacity: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:22.85vw;}
	.sns_login .sns_login_wrap .login_body .sns_list > li > a { padding-top:21.42vw;}
	.sns_login .sns_login_wrap .login_body .sns_list > li > a.gg {background-size:17.14vw;}
	.sns_login .sns_login_wrap .login_body .sns_list > li > a.fb {background-size:17.14vw;}
	.sns_login .sns_login_wrap .login_body .sns_list > li > a.is {background-size:17.14vw;}
	.sns_login .sns_login_wrap .login_body .sns_list > li > a.ww {background-size:17.14vw;}
	.sns_login .sns_login_wrap .login_body .sns_list > li > a.tw {background-size:17.14vw;}
	.sns_login .sns_login_wrap .login_body .sns_list > li > a.ap {background-size:17.14vw;}
	.sns_login .sns_login_wrap .login_body .sns_list > li > a::after {margin-left:0.71vw;}
	
	.sns_login .Kfris_login_wrap {margin:-20px 10px; background-size:cover}
	.sns_login .Kfris_login_wrap .con{width:100%; padding:15px; color:#fff;background:none} 
	.sns_login .Kfris_login_wrap .con .text{ text-align:center;}
	.sns_login .Kfris_login_wrap .link-area {margin:15px 10vw 0 10vw;}
	.sns_login .Kfris_login_wrap .link-area button{font-size:14px;color:#fff; letter-spacing:0.5px }
	.sns_login .Kfris_login_wrap .link-area [class*='btn-link'] {width:40%;line-height:24px;} 
	.sns_login .sns_login_wrap .login_body + p{ padding:10px;}
	

	.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 20px auto;}
	.sns_login .sns_login_wrap .login_body .login_chk textarea { width:93%;} /* textarea */
	.sns_login .Kfris_login_wrap {margin:-20px 10px;background-image:none}
	.sns_login .Kfris_login_wrap .con .text{line-height:18px;}
	.sns_login .Kfris_login_wrap .link-area {margin:15px 1vw 0 1vw;}
	.sns_login .Kfris_login_wrap .link-area [class*='btn-link'] {width:43%;line-height:30px;} 
}