/* gmarket */ 
@font-face {
  font-family: 'gmarket';
  src: url('/css/font/GmarketSansBold.otf') format('opentype'),
       url('/css/font/GmarketSansBold.woff2') format('woff2'),
       url('/css/font/GmarketSansBold.woff') format('woff');
  font-weight: 900;
  font-style: normal;
}
@font-face {
  font-family: 'gmarket';
  src: url('/css/font/GmarketSansMedium.otf') format('opentype'),
       url('/css/font/GmarketSansMedium.woff2') format('woff2'),
       url('/css/font/GmarketSansMedium.woff') format('woff');
  font-weight: 800;
  font-style: normal;
}
@font-face {
  font-family: 'gmarket';
	src: url('/css/font/GmarketSansLight.otf') format('opentype'),
		   url('/css/font/GmarketSansLight.woff2') format('woff2'),
		   url('/css/font/GmarketSansLight.woff') format('woff');
  font-weight: 200;
  font-style: normal;
}

body{position:relative; width:100%; height:100%; min-width:320px; overflow-x:hidden;}
.container{position:fixed; top:0; left:0; width:100%; height:100%; min-width:320px; overflow-x:hidden; margin-top:0 !important;}
.logo_wrap{position:relative; float:left; width:65.1%; height:100%; background:url(/images/intn/bg_intra.jpg) no-repeat; background-size:cover;}
.logo_wrap:before{content:''; display:block; position:absolute; top:55px; left:55px; width:calc(100% - 55px); height:calc(100% - 110px); border:1px solid rgba(255,255,255,0.2);}
.logo{position:absolute; top:50%; right:10.64%; line-height:150%; color:#fff; font-size:50px; font-weight:200; font-family:"gmarket"; letter-spacing:-2px; transform:translateY(-50%);}
.logo span{display:block; font-size:66px; font-weight:800;}
.frm_wrap{position:relative; float:right; width:34.9%; height:100%; background:#f6f6f6;}
.frm{position:absolute; top:50%; left:50%; width:59.7%; font-weight:800; transform:translate(-50%, -50%);}
.frm h2{margin:0 0 57px; line-height:100%; font-size:46px; color:#000; font-weight:900; text-align:center; letter-spacing:-2px;}
.frm ul{width:100%; margin:0 11px 0 0;}
.frm ul li:first-child{margin:0 0 16px;}
.frm ul input{width:100%; padding:0 0 0 7.5%; height:66px; font-size:19px; border-color:#eee; box-sizing:border-box; box-shadow:none; -webkit-appearance:none; -moz-appearance:none; appearance:none;}
.frm ul input:focus{outline:none !important; border:2px solid #00a89b; color:#006c64; font-weight:900;}
.frm input[type="submit"]{width:100%; height:81px; padding:0; color:#fff; font-size:24px; border:none; background:#00a89b; letter-spacing:-2px;}
.frm .state {margin:21px 0 54px 0; color:#666;}

.notice {color:red; position: absolute; bottom: 20px; text-align: center; width: 100%; }

input[type="checkbox"] + label{position:relative; display:inline-block; vertical-align:top; padding:0 0 0 8px; line-height:24px; font-weight:900;}
input[type="checkbox"]{opacity:0; width:24px; height:24px; -webkit-appearance:none;}
input[type="checkbox"] + label:before, 
input[type="checkbox"] + label:after{content:''; display:block; position:absolute; top:50%; left:-24px; width:24px; height:24px; line-height:100%; margin:-12px 0 0 0; border:none; background:url(/images/intn/ico_checkbox.jpg) no-repeat; box-sizing:border-box;}
input[type="checkbox"] + label:after{display:none; background:url(/images/intn/ico_checkbox_on.jpg) no-repeat;}
input[type="checkbox"]:checked + label:after{display:block;}

@media all and (max-width:1024px){
	input[type="checkbox"] + label{font-weight:800;}
	.logo_wrap:before{top:40px; left:40px; width:calc(100% - 40px); height:calc(100% - 80px);}
	.logo{font-size:38px;}
	.logo span{font-size:48px;}
	.frm{width:65%;}
	.frm h2{margin:0 0 40px; font-size:36px;}
	.frm ul input{height:58px;}
	.frm ul li:first-child{margin:0 0 12px;}
	.frm input[type="submit"]{height:70px; font-size:20px;}
	.frm .state{margin:18px 0 45px;}
}
@media all and (max-width:768px){
	.logo_wrap:before{top:30px; left:30px; width:calc(100% - 60px); height:calc(100% - 60px);}
	.logo_wrap{width:100%;}
	.logo{right:auto; left:50%; width:350px; margin:-210px 0 0 0; font-size:25px; transform:translate(-50%, -50%);}
	.logo span{font-size:34px;}
	
	.frm_wrap{float:none; position:absolute; top:50%; left:50%; width:350px; height:390px; margin:40px 0 0 0; transform:translate(-50%, -50%);}
	.frm{position:static; margin:0 auto; transform:none;}
	.frm h2{margin:35px 0 30px; font-size:30px;}
	.frm ul li:first-child{margin:0 0 8px;}	
	.frm ul input{height:50px;}
	.frm input[type="submit"]{height:60px;}
	.frm .state {margin:15px 0 40px 0;} 
}
@media all and (max-width:568px){
	.logo_wrap:before{top:12px; left:12px; width:calc(100% - 24px); height:calc(100% - 24px);}
	.logo{font-size:23px;}
	.logo span{font-size:32px;}
	.frm h2{font-size:28px;}
	input[type="checkbox"] + label{line-height:22px;}
	input[type="checkbox"] + label:before, 
	input[type="checkbox"] + label:after{left:-22px; width:22px; height:22px; marging:-11px 0 0 0; background-size:contain;}
}
@media all and (max-width:390px){
	.logo_wrap:before{top:8px; left:8px; width:calc(100% - 16px); height:calc(100% - 16px);}
	.logo{margin:-177px 0 0 0; font-size:21px;}
	.logo span{font-size:29px;}
	.logo,
	.frm_wrap{width:calc(100% - 40px);}
	.frm_wrap{height:333px; margin:36px 0 0 0;}
	.frm{width:70%;}
	.frm h2{margin:32px 0 25px; font-size:26px;}	
	.frm ul input{height:40px; font-size:17px;}
	.frm input[type="submit"]{height:50px; font-size:18px;}
	.frm .state {margin:12px 0 35px 0;}
	
	input[type="checkbox"] + label{line-height:20px;}
	input[type="checkbox"] + label:before, 
	input[type="checkbox"] + label:after{left:-20px; width:20px; height:20px; marging:-10px 0 0 0;}
}