@font-face {
    font-family: 'GmarketSans';
    font-weight: 700;
    font-style: normal;     
         src: url('./fonts/GmarketSansBold.eot');
         src: url('./fonts/GmarketSansBold.eot?#iefix') format('embedded-opentype'),
         url('./fonts/GmarketSansBold.woff2') format('woff2'),
         url('./fonts/GmarketSansBold.woff') format('woff'),
         url('./fonts/GmarketSansBold.ttf') format('truetype'),
         url('./fonts/GmarketSansTTFBold.ttf') format('ttf'),
         url('./fonts/GmarketSansTTFLight.ttf') format('ttf'),
         url('./fonts/GmarketSansTTFMedium.ttf') format('ttf');
    font-display: swap;
} 

@font-face {
    font-family: 'NanumSquareR';
    font-style: normal; 
  src: url('./fonts/NanumSquareR.eot');
  src: url('./fonts/NanumSquareR.eot?#iefix') format('embedded-opentype'),
    url('./fonts/NanumSquareR.woff') format('woff');
    font-display: swap;
} 

@font-face {
    font-family: 'NanumGothic-ExtraBold'; 
    font-style: normal; 
      src: url('./fonts/NanumGothic-ExtraBold.eot');
     src: url('./fonts/NanumGothic-ExtraBold.eot?#iefix') format('embedded-opentype')
          url('./fonts/NanumGothic-ExtraBold.woff') format('woff');
    font-display: swap;
}




li {
    list-style: none;
}

* {padding:0; margin:0;font-family:'GmarketSans';color:black; letter-spacing: -0.05em;}
/* * {padding:0; margin:0;font-family:'HeadLine', Dotum, Gulim, Verdana, Tahoma;color:#fff; letter-spacing: -0.05em;} */
html, body, div, span, applet, object, iframe,h1, h2, h3, h4, h5, h6, p, blockquote, pre,a, abbr, acronym, address, big, cite, code,del, dfn, em, img, ins, kbd, q, s, samp,small, strike, strong, sub, sup, tt, var,
b, u, i,dl, dt, dd, ol, ul, li,fieldset, form, label, legend,table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0;border:0; font-size:16px; line-height:20px}

a:link, a:visited {text-decoration:none;color:#009eb8;}
a:hover, a:focus, a:active { text-decoration:underline;}


/* SKIP NAVIGATION */
.skip_nav {position:absolute; width:100%; z-index:10;}
.skip_nav a {position:absolute; display:block; left:0; top:0; width:1px; height:1px; margin:-10000px 0 0 -10000px; padding:0; background-color:#033477; text-align:center; overflow:hidden; color:#fff; font-weight:bold;}
.skip_nav a:hover,
.skip_nav a:active,
.skip_nav a:focus {margin:0; width:100%; height:auto; padding:10px;}

body {padding:0; margin:0;}
.background {width:100%; height:100%; padding:0; margin:0; position:relative; width:100%; -webkit-text-size-adjust:none; transition: all 0.4s; background: #eaeaea url("/images/open_login_bg.png") no-repeat; -webkit-background-size: cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
.background_login {width:100%; height:100%; background: #eaeaea url("/images/live_bg.png") no-repeat; -webkit-background-size: cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}


#wrap {width:100%; min-width:320px; }
.inner {width:98%; margin-left:auto; margin-right:auto; }
#header,#container {width:100%;}
#header {width:100%; display:flex; justify-content:center; flex-direction: row; flex-wrap: wrap;}

#header:nth-child(1) {}
#header:nth-child(2) {}



#header  .leftLogo {position:absolute; left:0; margin-top:35px; width:200px; padding-left:100px;}
#header  .rightLogo {position:absolute; right:0; top:2px; text-align: right}

.title{color:#C5FAFF; width:630px; padding: 120px 0 40px 0;  text-align: center; font-size:36px; line-height: 100%; font-weight: 500; letter-spacing: 0.05em; }
.title_login{color:#333;  width:500px; padding: 90px 0 40px 0;  text-align: center; font-size:30px; line-height: 100%; font-weight: 500; }
.mo_title{color:#C5FAFF;  width:500px;   text-align: center; font-size:19px; line-height: 100%; font-weight: 500; letter-spacing: 0.05em;}
.mo_title{display:none;}

.container_box{width:100% position:relative;}

#container {width:100%; margin-left:auto; margin-right:auto; padding-bottom:15px; max-width:1167px; max-height:650px; z-index:1;}
.container_login { padding:8px 20px 25px 30px; width:100%; margin-top:182px; margin-left:auto; margin-right:auto; max-width:777px; max-height:700px; border-radius:30px; border:7px solid #00ABBC; background:#fff; background-color: rgba( 255, 255, 255, 0.6 ); box-shadow:4px 4px 10px rgba(0,0,0,.3);}
#container .live_top{
	float:left;
	width:800px; 
	height:280px; 
	background:url("../images/live_top_20190117_103350302.png") 0 0 no-repeat;
	background-size:cover; 
	display: block; 
}

.live_top_div{float:right;width:100%; background:#001A3C;}
.live_top_div img{width:100%;margin-bottom:10px;}
.live_top_div:after{clear:both;}

.title_box{width:100%; display:inline-block; text-align:center;}

#container .contents{width: 100%;box-sizing: border-box;text-align:center;}

.video_container{position: relative; padding-top: 56%; }
.video_container iframe, .video_container object, .video_container embed{position: absolute; top: 0; left: 0; width: 100%; height: 100%;} 

.login_text1 { font-size: 18px; font-family: 'NanumGothic-ExtraBold'; font-weight: 900; letter-spacing: -0.01em; vertical-align:middle; border-radius:30px; display:inline-block; text-align:center; height:38px;line-height:38px;margin:15px 5px 10px 5px;padding:3px 20px; color:#fff; background:#2C2D7C;}
.login_text1_align{width:100%; vertical-align:middle; text-align:right;}

.clear {clear:both;}
.login_text2 {line-height:44px;margin:0px 30px;padding:5px 0px; color:#006069; font-size:43px; letter-spacing: -0.03em; transform : rotate(0.04deg);}
.login_text2_2 {line-height:60px; color:#006069; font-size:35px; letter-spacing: -0.03em; transform : rotate(0.04deg);}
.flex_box {display:flex; justify-content:space-between; flex-direction: row; flex-wrap: wrap;}
.flexitem1 {max-width:385px; padding:5px 0px 0px 32px; display: table-cell; vertical-align:middle; text-align:left; float:left;}
.flexitem2 {max-width:331px;padding:39px 20px 0px 20px; display: table-cell; vertical-align:middle; text-align:center; float:right;}
.flexitem2 img {width:328px;}

.playbar img{width:96%; margin-top:23px; padding:0px 20px 0 16px;}

.login_text3 {font-family: 'NanumSquareR'; font-weight:500; line-height:37px;margin:10px 0px 77px 0px;padding:5px 0px; color:#787878; font-size:22px; transform : rotate(0.04deg);}


.search {
  position: relative;
  width: 226px;

}

.search input {
    width: 150%;
    border: 1px solid #bbb;
    border-radius: 15px;
    padding: 33px 8px 33px 0px;
    font-size: 15px;
    height: 79px;
    background: #f9f9f9;
    font-family:GmarketSansTTFMedium;
    color:#000000;
    text-align:center;
    text-indent:-3em;
    
}



.search img {
    position: absolute;
    width: 69px;
    top: 7px;
    right: -105px;
    margin: 0;
}



/*.Search_input {
		border:0; 
		width:340px; 
		height:80px;
		line-height:50px;
		text-align:left;
		padding-left:10px;
		font-size:16px;
		color:#fff;
		font-weight:bold;
		background:url("../images/ip_id.png") no-repeat;
		background-size:cover;
		-webkit-ime-mode:active; 
		-moz-ime-mode:active; 
		-ms-ime-mode:active; 
		ime-mode:active;
		vertical-align:middle; 
		color:black;
	}*/
/*.live_loginBtnBox{width:97px; height:70px;line-height:70px;float:left;}
.live_loginBtn{width:97px; height:42px; border:0;background:url("../images/btn_confirm.png") no-repeat;text-indent:-99999px;vertical-align:middle;}*/






@media all and (max-width:899px) {
	.login_text3 {
    font-family: 'NanumSquareR';
    line-height: 37px;
    margin: 10px 0px 60px 0px;
    padding: 5px 0px;
    color: #787878;
    font-size: 19px;
    font-weight:500;
    transform : rotate(0.04deg);
}

.flexitem1 {
    max-width: 323px;
    padding: 20px 0px 0px 32px;
    display: table-cell;
    vertical-align: middle;
    text-align: left;
}

	
	.container_login { padding:5px 20px 25px 30px; width:100%; margin-top:150px; margin-left:auto; margin-right:auto; max-width:730px; max-height:700px; border-radius:20px; border:7px solid #00ABBC; background:#fff; background-color: rgba( 255, 255, 255, 0.5 ); box-shadow:4px 4px 10px rgba(0,0,0,.3);}
	
}
	


@media all and (max-width:770px) {
	#header  .leftLogo img { width:90%;  margin-top:5px; }
	.container_login { padding: 10px 10px 19px 10px;}
	
	.flex_box {display:flex; justify-content:center; flex-direction: row; flex-wrap: wrap;}
	
	.mo_title {display:block; margin:0px 0 0 0; padding: 30px 0 30px 0; line-height:24px;}
	.title {display:none;}
	#header  .leftLogo {position: relative;  width:200px; margin:0; width:200px; padding-left:0px; }
	#header  .leftLogo img { width:95%;  }
	.title_login{display:none;}
	
	.playbar{display:none;}
	
	.flexitem2 {
    max-width: 331px;
    padding: 12px 20px 0px 20px;
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}
	
 .flexitem1 {    max-width: 240px;    padding: 10px; display: table-cell; vertical-align:middle; text-align:center;} 
 	
	.login_text1 {
	font-size: 16px;
    
    margin-top: -30px;
}

.login_text1_align{width:100%; vertical-align:middle; text-align:center;}



	.login_text2{text-align:center; font-size:24px; line-height:25px;margin:9px 0px 5px 0; transform : rotate(0.04deg);}
	.login_text2_2 {line-height:35px; color:#006069; font-size:22px; transform : rotate(0.04deg);}
	.flexitem2 img {width:230px; margin-top:10px;}
	.Search_input {transform: scale(.75);color:black;}
	.login_text3 {line-height:23px;margin:10px 0px;padding:0px 0px 15px 0px; color:#787878; font-size:14px;font-weight:500; transform : rotate(0.04deg);}
	
	.container_login {
    margin-top:40px;
    max-width: 296px;
    max-height: 481px;
    margin-left:auto; margin-right:auto;
}
	
	.search input {
    width: 104%;
    border: 1px solid #bbb;
    border-radius: 12px;
    padding: 14px 4px;
    font-size: 12px;
    height: 62px;
    background: #f9f9f9;
    color:black;}
    
.search img {
    position: absolute;
    width: 53px;
    top: 5px;
    right: -4px;
    margin: 0;
}

}

@media all and (max-width:576px) {
	.login_text1 {
   
    margin-top: -30px;
}


.container_login {
    margin-top:40px;
    max-width: 288px;
    max-height: 483px;
    margin-left: auto;
    margin-right: auto;
    padding:5px 2px 5px 2px;
}

}


@media all and (max-width:500px) {
	.login_text1 {
    font-size:15px;
    margin-top: -30px;
    border-radius:25px;
    padding:0px 15px;
}

.background_login {width:100%; height:100%; background: #eaeaea url("../images/live_bg_mo.png") no-repeat; -webkit-background-size: cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
}

@media all and (max-width:400px) {
	.login_text1 {
   
    margin-top: -30px;
}

.login_text2_2 {
    line-height: 35px;
    color: #006069;
    font-size: 22px;
    transform : rotate(0.04deg);
}

}



@media all and (max-width:343px) {
	
	.login_text2_2 {
    line-height: 30px;
    color: #006069;
    font-size: 17px;
}
	
	#header  .leftLogo {position: relative;  width:250px; margin:0; width:200px; padding-left:0px; }
	#header  .leftLogo img { width:90%;  margin-top:5px; }
	
.container_login {    margin-top:40px;    max-width: 250px;    max-height: 456px;    margin-left: auto;    margin-right: auto;}
   
   
   .login_text3 {    line-height: 20px;    margin: 0px 0px 15px 0px;   padding: 5px 0px;    color: #787878;    font-size: 13px;    font-weight: 500;transform : rotate(0.04deg);}


.login_text2 {    text-align: center;    font-size: 19px;    line-height: 25px;    margin: 9px 0px 10px 0; transform : rotate(0.04deg); }

.search input {
    width: 89%;
    border: 1px solid #bbb;
    border-radius: 12px;
    padding: 10px 4px;
    font-size: 7px;
    height: 46px;
    background: #f9f9f9;
    color:black;
}

.search img {
    position: absolute;
    width: 41px;
    top: 4px;
    right: 17px;
    margin: 0;
}
    
 .flexitem1 {    max-width: 240px;    padding: 1px; display: table-cell; vertical-align:middle; text-align:center;}  
 
.login_text1 {
 
    margin-top: -30px;
    font-size:11px;
    padding:0px 12px;
    border-radius:18px;
}
	
}

@media all and (max-width:280px) {
	
.container_login {    margin-top:40px;   max-width: 210px;    max-height: 456px;    margin-left: auto;    margin-right: auto; padding:5px 10px 5px 2px;}
.login_text1 {
    margin-top: -30px;
    font-size: 11px;
    padding: 0px 14px;
    border-radius: 19px;
}

.login_text3 {
    line-height: 20px;
    margin: 0px 0px 15px 0px;
    padding: 5px 0px;
    color: #787878;
    font-size: 12px;
    font-weight: 500;
    transform : rotate(0.04deg);
}
.search input {
    width: 85%;
    border: 1px solid #bbb;
    border-radius: 12px;
    padding: 10px 4px;
    font-size: 7px;
    height: 46px;
    background: #f9f9f9;
    color:black;
}

.search img {
    position: absolute;
    width: 41px;
    top: 4px;
    right: 16px;
    margin: 0;
}

.flexitem2 img {
    width: 188px;
    margin-top: 10px;
}

}



@media screen 
   and (max-device-width: 760px) /* 디바이스가 모바일일때(device-width 0 ~ 768px) */
   and (orientation: landscape) { /* 그리고 가로로 볼때 */
   
  .background_login {width:100%; height: 269%;; background: #eaeaea url("/images/live_bg.png") no-repeat; -webkit-background-size: cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}


.background {width:100%; height:270%; padding:0; margin:0; position:relative; width:100%; -webkit-text-size-adjust:none; transition: all 0.4s; background: #eaeaea url("/images/open_login_bg.png") no-repeat; -webkit-background-size: cover; -moz-background-size:cover; -o-background-size:cover; background-size:cover;}
   
   }