@charset "utf-8";
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 100;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Thin.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 300;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Light.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 400;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Regular.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 500;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Medium.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 700;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Bold.otf) format('opentype');}
@font-face {font-family: 'Noto Sans KR';font-style: normal;font-weight: 900;src: url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff2) format('woff2'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.woff) format('woff'),url(//fonts.gstatic.com/ea/notosanskr/v2/NotoSansKR-Black.otf) format('opentype');}

* {
    font-family: 'Noto Sans KR', sans-serif;
}

@media screen and (min-width: 1221px) { 
body { font-family: 'Noto Sans KR'; font-weight:300; font-size:13px; background-color:#f6f7fb; }
/* cover index page */
.mbox { position:absolute; top:0; left:0; height:auto; width:100%; display:flex;  justify-content: center; }
.container { width:600px; display:flex;  justify-content: center; flex-wrap: wrap; border:0px solid red;  }
#warningmsg { position:relative; margin-top:40px; width:65%; font-size:16px; font-weight:400; display:flex; justify-content: center; align-items:center; }
#warningmsg div { margin-left:6px; line-height:17px; }
#warningmsg img { width:20px; }
.mtophead { width:400px; height:200px; margin-top:60px; background: url('http://fourbrain.co.kr/images/cover1.png') no-repeat center; background-size: contain; }
.txtbox { width:90%; display:flex; justify-content: center; margin-top:50px; font-size:18px; }
.hbox { width:100%; height:30px; }
.hbox2 { width:100%; height:60px; }
.countrykor { width:16%; display:flex; justify-content:center; align-items:center; height:27px; border-radius:3px; border:1px solid #CCC; background-color:#FFF; cursor:pointer; }
.countrykor:hover { background: url('http://fourbrain.co.kr/images/kor2.png') no-repeat 115% -10px #FFF; }
.countryusa { width:16%; display:flex; justify-content:center; align-items:center; height:27px; border-radius:3px; border:1px solid #CCC; background-color:#FFF; cursor:pointer; }
.countryusa:hover { background: url('http://fourbrain.co.kr/images/usa2.png') no-repeat 115% -10px #FFF;  }
.countrygap { width:16%; margin-left:5%; margin-right:5%; display:flex; justify-content:center; align-items:center; height:27px; border-radius:3px; border:1px solid #ccc; background-color:#FFF; cursor:pointer; }
.countrygap:hover { background: url('http://fourbrain.co.kr/images/japan2.png') no-repeat 115% -7px #FFF;  }
.footertext { width:70%; font-size:13px; line-height:16px; border:0px solid red; }
.copyright { width:420px; margin-top:50px; margin-bottom:50px; padding-top:5px; display:flex;  justify-content: center; border-top:1px solid #DFDFDF; }
.bwinfo { width:70%; height:40px; display:flex; justify-content: center; flex-wrap: wrap; }
.bwinfoimg { width:320px; }
.bwinfoimg img { width:28px; margin-right:5px; }
.bwinfotext { width:320px; line-height:130%; margin-top:5px; display:flex;  justify-content:left; flex-wrap: wrap; }
#alertbox { width:100%; position:absolute; top:50%; margin-top:-100px; display:none;   justify-content: center; opacity:1; }
.alertinfo { width:80%; height:190px; max-width:460px; color:#FFF; font-size:16px; font-weight:400; border-radius: 6px; display:flex;  justify-content: center; flex-wrap: wrap; border:1px solid #036; background-color:#69C; box-shadow: 0px 0px 5px #333; }
.infoline1 { width:90%; height:34px; margin-top:26px; display:flex; justify-content: center; }
.infoline2 { width:90%; height:30px; margin-bottom:5px; display:flex; justify-content: center; }
#btnok { width:80px; height:28px; border-radius:5px; border:1px solid #FFF; color:#FFF; display:flex;  justify-content: center; }
#alert_mask { position: fixed; width: 100%; height: 1000px; top: 0px; left: 0px; display:none; background-color:#000; opacity: 0.8; }

input[type=text] { border:1px solid #CCC; border-radius:3px; padding-left:10px; font-size:14px; appearance: none; -webkit-appearance: none; -webkit-border-radius:3px; }
input[type='radio'] { border:1px solid #CCC; width:17px; height:17px; margin-right:30px; }
select{
/*ios대응*/
-webkit-appearance: none;
-moz-appearance: none; 
appearance: none;
/*화살표 배경 넣기*/
background: url('http://fourbrain.co.kr/images/selectarrow.png') no-repeat 94% 50% #fff; /*화살표 select박스 오른쪽 중앙 배치,배경 흰색*/
}
select::-ms-expand{ 
display:none; /* 화살표 없애기 for IE10, 11*/
}
.select1 { border:1px solid #CCC; width:70px; padding-left:10px; font-size:14px; margin-right:10px; height:30px; -border-radius:3px; -webkit-border-radius:3px;  }
.noselect { width:70px; padding-left:10px; margin-right:10px; height:28px;}
.select2 { border:1px solid #CCC; width:240px; padding-left:10px; font-size:14px; height:30px; -border-radius:3px; -webkit-border-radius:3px; }
.inA { width:150px; height:24px; }
.inB { width:230px; height:24px; }
.inC { width:75px; height:24px; margin-right:6px; }
.inD { width:130px; height:24px; }
.uinfoitem { width:90px; height:28px; padding-left:20px; border:0px solid red; }

.tophead { width:400px; height:200px; margin-top:20px; background: url('http://fourbrain.co.kr/images/cover1.png') no-repeat center; background-size: contain; }
.guide { width:420px; height:20px; margin-top:60px; font-size:13px; display:flex;  justify-content: center; }
.inputbox { width:420px; height:60px;  border-radius: 6px; border:1px solid #CCC; background-color:#f6f7fb; box-shadow: 0px 0px 5px #D1D1D1; }
.inputid { width:100%; height:100%; display:flex; align-items:center;  justify-content: center; }
.btnspace { width:20px; height:20px; }
.idokbtn { width:80px; height:24px; font-size:14px; color:#FFF; border-radius:3px; border:1px solid #b3b3b3; background:#b3b3b3; display:flex; align-items:center;  justify-content:center; cursor:pointer; }
.infobox { width:418px; height:260px; padding-top:20px; display:flex; display:none;  justify-content:left; flex-wrap: wrap; }
.namesection1 { width:115px; height:6px; }
.namesection2 { width:95px; line-height:18px; font-size:12px; height:6px;  }
.namesection3 { width:140px; font-size:12px;height:6px;line-height:18px;  }
.genderright { margin-right:100px; border:0px solid #03F;  }
.procbtnbox { width:100%; margin-top:5px; display:flex; align-items:center;  justify-content:center; }
.procbtn { width:193px; height:36px; font-size:15px; font-weight:400; color:#FFF; border-radius:3px; border:1px solid #253169; background:#4089CC; display:flex; align-items:center;  justify-content:center; cursor:pointer; }
}

@media screen and (min-width: 801px) and (max-width:1220px) {
body { font-family: 'Noto Sans KR'; font-weight:300; background-color:#f6f7fb; }
/* cover index page */
.mbox { position:absolute; top:0; left:0; height:auto; width:100%; display:flex;  justify-content: center; }
.container { width:600px; display:flex;  justify-content: center; flex-wrap: wrap; border:0px solid red;  }
#warningmsg { position:relative; margin-top:40px; width:80%; font-size:17px; font-weight:400; display:flex; justify-content: center; align-items:center; }
#warningmsg div { margin-left:10px; line-height:19px; }
#warningmsg img { width:24px; }

.mtophead { width:400px; height:200px; margin-top:60px; background: url('http://fourbrain.co.kr/images/cover1.png') no-repeat center; background-size: contain; }
.txtbox { width:90%; display:flex; justify-content: center; margin-top:50px; font-size:18px; }
.hbox { width:100%; height:30px; }
.hbox2 { width:100%; height:60px; }
.countrykor { width:16%; display:flex; justify-content:center; align-items:center; height:27px; border-radius:3px; border:1px solid #CCC; background-color:#FFF; cursor:pointer; }
.countrykor:hover { background: url('http://fourbrain.co.kr/images/kor2.png') no-repeat 115% -10px #FFF; }
.countryusa { width:16%; display:flex; justify-content:center; align-items:center; height:27px; border-radius:3px; border:1px solid #CCC; background-color:#FFF; cursor:pointer; }
.countryusa:hover { background: url('http://fourbrain.co.kr/images/usa2.png') no-repeat 115% -10px #FFF;  }
.countrygap { width:16%; margin-left:5%; margin-right:5%; display:flex; justify-content:center; align-items:center; height:27px; border-radius:3px; border:1px solid #ccc; background-color:#FFF; cursor:pointer; }
.countrygap:hover { background: url('http://fourbrain.co.kr/images/japan2.png') no-repeat 115% -7px #FFF;  }
.footertext { width:70%; font-size:13px; line-height:16px; border:0px solid red; }
.copyright { width:420px; margin-top:50px; margin-bottom:50px; padding-top:5px; font-size:13px; display:flex;  justify-content: center; border-top:1px solid #DFDFDF; }
.bwinfo { width:80%; height:40px; display:flex; justify-content: center; flex-wrap: wrap; }
.bwinfoimg { width:320px; }
.bwinfoimg img { width:28px; margin-right:5px; }
.bwinfotext { width:320px; line-height:130%; margin-top:5px; display:flex;  justify-content:left; flex-wrap: wrap; font-size:13px; }
#alertbox { width:100%; position:absolute; top:50%; margin-top:-100px; display:none;   justify-content: center; opacity:1; }
.alertinfo { width:80%; height:190px; max-width:460px; color:#FFF; font-size:16px; font-weight:400; border-radius: 6px; display:flex;  justify-content: center; flex-wrap: wrap; border:1px solid #036; background-color:#69C; box-shadow: 0px 0px 5px #333; }
.infoline1 { width:90%; height:34px; margin-top:26px; display:flex; justify-content: center; }
.infoline2 { width:90%; height:30px; margin-bottom:5px; display:flex; justify-content: center; }
#btnok { width:80px; height:28px; border-radius:5px; border:1px solid #FFF; color:#FFF; display:flex;  justify-content: center; }
#alert_mask { position: fixed; width: 100%; height: 1000px; top: 0px; left: 0px; display:none; background-color:#000; opacity: 0.8; }

input[type=text] { border:1px solid #CCC; border-radius:3px; padding-left:10px; font-size:15px; appearance: none; -webkit-appearance: none; -webkit-border-radius:3px; }
input[type='radio'] { border:1px solid #CCC; width:18px; height:18px; margin-right:30px; }
select{
/*ios대응*/
-webkit-appearance: none;
-moz-appearance: none; 
appearance: none;
/*화살표 배경 넣기*/
background: url('http://fourbrain.co.kr/images/selectarrow.png') no-repeat 94% 50% #fff; /*화살표 select박스 오른쪽 중앙 배치,배경 흰색*/
}
select::-ms-expand{ 
display:none; /* 화살표 없애기 for IE10, 11*/
}
.select1 { border:1px solid #CCC; width:70px; padding-left:10px; margin-right:10px; font-size:15px; height:34px; -border-radius:3px; -webkit-border-radius:3px;  }
.noselect { width:70px; padding-left:10px; margin-right:10px; height:28px;}
.select2 { border:1px solid #CCC; width:240px; padding-left:10px; font-size:15px; height:34px; -border-radius:3px; -webkit-border-radius:3px; }
.inA { width:150px; height:24px; }
.inB { width:230px; height:24px; }
.inC { width:75px; height:24px; margin-right:6px; }
.inD { width:130px; height:24px; }
.uinfoitem { width:90px; height:28px; padding-left:20px; border:0px solid red; }

.tophead { width:400px; height:200px; margin-top:20px; background: url('http://fourbrain.co.kr/images/cover1.png') no-repeat center; background-size: contain; }
.guide { width:420px; height:20px; margin-top:60px; font-size:14px; display:flex;  justify-content: center; }
.inputbox { width:420px; height:60px;  border-radius: 6px; border:1px solid #CCC; background-color:#f6f7fb; box-shadow: 0px 0px 5px #D1D1D1; }
.inputid { width:100%; height:100%; display:flex; align-items:center;  justify-content: center; }
.btnspace { width:20px; height:20px; }
.idokbtn { width:80px; height:28px; font-size:14px; color:#FFF; border-radius:3px; border:1px solid #b3b3b3; background:#b3b3b3; display:flex; align-items:center;  justify-content:center; cursor:pointer; }
.infobox { width:418px; height:260px; padding-top:20px; display:flex; display:none;  justify-content:left; flex-wrap: wrap; }
.namesection1 { width:115px; height:6px; }
.namesection2 { width:95px; line-height:18px; font-size:12px; height:9px;  }
.namesection3 { width:140px; font-size:12px;height:9px;line-height:18px;  }
.genderright { margin-right:100px; border:0px solid #03F;  }
.procbtnbox { width:100%; margin-top:5px; display:flex; align-items:center;  justify-content:center; }
.procbtn { width:193px; height:36px; font-size:15px; font-weight:400; color:#FFF; border-radius:3px; border:1px solid #253169; background:#4089CC; display:flex; align-items:center;  justify-content:center; cursor:pointer; }
}

@media screen and (min-width: 690px) and (max-width:800px) {
body { font-family: 'Noto Sans KR'; font-weight:300; background-color:#f6f7fb; }
/* cover index page */
.mbox { position:absolute; top:0; left:0; height:auto; width:100%; display:flex;  justify-content: center; }
.container { width:600px; display:flex;  justify-content: center; flex-wrap: wrap; border:0px solid red;  }
#warningmsg { position:relative; margin-top:40px; width:80%; font-size:17px; font-weight:400; display:flex; justify-content: center; align-items:center; }
#warningmsg div { margin-left:10px; line-height:19px; }
#warningmsg img { width:34px; }

.mtophead { width:400px; height:200px; margin-top:60px; background: url('http://fourbrain.co.kr/images/cover1.png') no-repeat center; background-size: contain; }
.txtbox { width:90%; display:flex; justify-content: center; margin-top:50px; font-size:18px; }
.hbox { width:100%; height:30px; }
.hbox2 { width:100%; height:60px; }
.countrykor { width:16%; display:flex; justify-content:center; align-items:center; height:27px; border-radius:3px; border:1px solid #CCC; background-color:#FFF; cursor:pointer; }
.countrykor:hover { background: url('http://fourbrain.co.kr/images/kor2.png') no-repeat 115% -10px #FFF; }
.countryusa { width:16%; display:flex; justify-content:center; align-items:center; height:27px; border-radius:3px; border:1px solid #CCC; background-color:#FFF; cursor:pointer; }
.countryusa:hover { background: url('http://fourbrain.co.kr/images/usa2.png') no-repeat 115% -10px #FFF;  }
.countrygap { width:16%; margin-left:5%; margin-right:5%; display:flex; justify-content:center; align-items:center; height:27px; border-radius:3px; border:1px solid #ccc; background-color:#FFF; cursor:pointer; }
.countrygap:hover { background: url('http://fourbrain.co.kr/images/japan2.png') no-repeat 115% -7px #FFF;  }
.footertext { width:70%; font-size:16px; line-height:20px; border:0px solid red; }
.copyright { width:76%; margin-top:50px; margin-bottom:50px; font-size:15px; padding-top:5px; display:flex;  justify-content: center; border-top:1px solid #DFDFDF; }
.bwinfo { width:90%; height:40px; display:flex; justify-content: center; flex-wrap: wrap; }
.bwinfoimg { width:65%; }
.bwinfoimg img { width:28px; margin-right:5px; }
.bwinfotext { width:70%; line-height:130%; margin-top:5px; display:flex;  justify-content:left; flex-wrap: wrap; }
#alertbox { width:100%; position:absolute; top:50%; margin-top:-100px; display:none;   justify-content: center; opacity:1; }
.alertinfo { width:80%; height:190px; max-width:460px; color:#FFF; font-size:16px; font-weight:400; border-radius: 6px; display:flex;  justify-content: center; flex-wrap: wrap; border:1px solid #036; background-color:#69C; box-shadow: 0px 0px 5px #333; }
.infoline1 { width:90%; height:34px; margin-top:26px; display:flex; justify-content: center; }
.infoline2 { width:90%; height:30px; margin-bottom:5px; display:flex; justify-content: center; }
#btnok { width:80px; height:28px; border-radius:5px; border:1px solid #FFF; color:#FFF; display:flex;  justify-content: center; }
#alert_mask { position: fixed; width: 100%; height: 1000px; top: 0px; left: 0px; display:none; background-color:#000; opacity: 0.8; }

input[type=text] { border:1px solid #CCC; border-radius:3px; padding-left:10px; appearance: none; -webkit-appearance: none; -webkit-border-radius:3px; font-size:17px; }
input[type='radio'] { border:1px solid #CCC; width:18px; height:18px; margin-right:30px; }
select{
/*ios대응*/
-webkit-appearance: none;
-moz-appearance: none; 
appearance: none;
/*화살표 배경 넣기*/
background: url('http://fourbrain.co.kr/images/selectarrow.png') no-repeat 94% 50% #fff; /*화살표 select박스 오른쪽 중앙 배치,배경 흰색*/
}
select::-ms-expand{ 
display:none; /* 화살표 없애기 for IE10, 11*/
}
.select1 { border:1px solid #CCC; width:70px; padding-left:10px; margin-right:10px; font-size:17px; height:34px; -border-radius:3px; -webkit-border-radius:3px;  }
.noselect { width:70px; padding-left:10px; margin-right:10px; height:28px;}
.select2 { border:1px solid #CCC; width:240px; font-size:17px; padding-left:10px; height:34px; -border-radius:3px; -webkit-border-radius:3px; }
.inA { width:150px; height:24px; }
.inB { width:230px; height:24px; }
.inC { width:75px; height:24px; margin-right:6px; }
.inD { width:130px; height:24px; }
.uinfoitem { width:90px; height:28px; padding-left:20px; border:0px solid red; }

.tophead { width:400px; height:200px; margin-top:20px; background: url('http://fourbrain.co.kr/images/cover1.png') no-repeat center; background-size: contain; }
.guide { width:420px; margin-top:60px; margin-bottom:4px; font-size:15px; line-height:17px; display:flex;  justify-content: center; }
.inputbox { width:75%; height:80px; border-radius: 6px; border:1px solid #CCC; background-color:#f6f7fb; box-shadow: 0px 0px 5px #D1D1D1; }
.inputid { width:100%; height:100%; display:flex; align-items:center;  justify-content: center; font-size:17px;  }
.btnspace { width:20px; height:20px; }
.idokbtn { width:80px; height:30px; font-size:17px; color:#FFF; border-radius:3px; border:1px solid #b3b3b3; background:#b3b3b3; display:flex; align-items:center;  justify-content:center; cursor:pointer; }
.infobox { width:418px; height:260px; padding-top:20px; display:flex; display:none;  justify-content:left; flex-wrap: wrap; }
.namesection1 { width:115px; height:6px; }
.namesection2 { width:95px; line-height:18px; font-size:12px; height:10px;  }
.namesection3 { width:140px; font-size:12px;height:10px;line-height:18px;  }
.genderright { margin-right:100px; border:0px solid #03F;  }
.procbtnbox { width:100%; margin-top:5px; display:flex; align-items:center;  justify-content:center; }
.procbtn { width:193px; height:36px; font-size:18px; font-weight:400; color:#FFF; border-radius:3px; border:1px solid #253169; background:#4089CC; display:flex; align-items:center;  justify-content:center; cursor:pointer; }	
}

@media screen and (min-width: 401px) and (max-width:689px) {
body { font-family: 'Noto Sans KR'; font-weight:300; background-color:#f6f7fb; }
/* cover index page */
.mbox { position:absolute; top:0; left:0; height:auto; width:100%; display:flex;  justify-content: center; }
.container { width:400px; display:flex;  justify-content: center; flex-wrap: wrap; border:0px solid red;  }
#warningmsg { position:relative; margin-top:40px; width:80%; font-size:17px; font-weight:400; display:flex; justify-content: center; align-items:center; }
#warningmsg div { margin-left:10px; line-height:19px; }
#warningmsg img { width:34px; }

.mtophead { width:400px; height:200px; margin-top:30px; background: url('http://fourbrain.co.kr/images/cover1.png') no-repeat center; background-size: contain; }
.txtbox { width:90%; display:flex; justify-content: center; margin-top:50px; font-size:18px; }
.hbox { width:100%; height:30px; }
.hbox2 { width:100%; height:60px; }
.countrykor { width:23%; display:flex; justify-content:center; align-items:center; height:32px; border-radius:6px; border:1px solid #CCC; background-color:#FFF; cursor:pointer; }
.countrykor:hover { background: url('http://fourbrain.co.kr/images/kor2.png') no-repeat 115% -10px #FFF; }
.countryusa { width:23%; display:flex; justify-content:center; align-items:center; height:32px; border-radius:6px; border:1px solid #CCC; background-color:#FFF; cursor:pointer; }
.countryusa:hover { background: url('http://fourbrain.co.kr/images/usa2.png') no-repeat 115% -10px #FFF;  }
.countrygap { width:23%; margin-left:5%; margin-right:5%; display:flex; justify-content:center; align-items:center; height:32px; border-radius:6px; border:1px solid #ccc; background-color:#FFF; cursor:pointer; }
.countrygap:hover { background: url('http://fourbrain.co.kr/images/japan2.png') no-repeat 115% -7px #FFF;  }
.footertext { width:76%; font-size:16px; font-weight:300; line-height:18px; letter-spacing:0px; border:0px solid red; }
.copyright { width:96%; margin-top:50px; margin-bottom:50px; padding-top:5px; font-size:15px; display:flex; letter-spacing:-1px;  justify-content: center; border-top:1px solid #DFDFDF; }
.bwinfo { width:90%; height:40px; display:flex; justify-content: center; flex-wrap: wrap; }
.bwinfoimg { width:80%; }
.bwinfoimg img { width:28px; margin-right:5px; }
.bwinfotext { width:94%; line-height:120%; margin-top:5px; display:flex;  justify-content:left; flex-wrap: wrap; font-size:14px; }
#alertbox { width:100%; position:absolute; top:50%; margin-top:-100px; display:none;   justify-content: center; opacity:1; }
.alertinfo { width:80%; height:190px; max-width:460px; color:#FFF; font-size:16px; font-weight:400; border-radius: 6px; display:flex;  justify-content: center; flex-wrap: wrap; border:1px solid #036; background-color:#69C; box-shadow: 0px 0px 5px #333; }
.infoline1 { width:90%; height:34px; margin-top:26px; display:flex; justify-content: center; }
.infoline2 { width:90%; height:30px; margin-bottom:5px; display:flex; justify-content: center; }
#btnok { width:80px; height:28px; border-radius:5px; border:1px solid #FFF; color:#FFF; display:flex;  justify-content: center; }
#alert_mask { position: fixed; width: 100%; height: 1000px; top: 0px; left: 0px; display:none; background-color:#000; opacity: 0.8; }

input[type=text] { border:1px solid #CCC; border-radius:3px; padding-left:10px; appearance: none; font-size:15px; -webkit-appearance: none; -webkit-border-radius:3px; }
input[type='radio'] { border:1px solid #CCC; width:18px; margin-top:3px; height:18px; margin-right:30px; }
select{
/*ios대응*/
-webkit-appearance: none;
-moz-appearance: none; 
appearance: none;
/*화살표 배경 넣기*/
background: url('http://fourbrain.co.kr/images/selectarrow.png') no-repeat 94% 50% #fff; /*화살표 select박스 오른쪽 중앙 배치,배경 흰색*/
}
select::-ms-expand{ 
display:none; /* 화살표 없애기 for IE10, 11*/
}
.select1 { border:1px solid #CCC; width:70px; font-size:14px; padding-left:10px; margin-right:10px; height:34px; -border-radius:3px; -webkit-border-radius:3px;  }
.noselect { width:70px; padding-left:10px; margin-right:10px; height:28px;}
.select2 { border:1px solid #CCC; width:240px; font-size:14px; padding-left:10px; height:34px; -border-radius:3px; -webkit-border-radius:3px; }
.inA { width:150px; height:30px; }
.inB { width:230px; height:30px; }
.inC { width:75px; height:30px; margin-right:6px; }
.inD { width:130px; height:30px; }
.uinfoitem { width:90px; height:28px; padding-left:20px; border:0px solid red; }

.tophead { width:400px; height:200px; margin-top:20px; background: url('http://fourbrain.co.kr/images/cover1.png') no-repeat center; background-size: contain; }
.guide { width:100%; margin-top:60px; margin-bottom:3px; font-size:14px; letter-spacing:-1px; display:flex;  justify-content: center; }
.inputbox { width:100%; height:70px;  border-radius: 6px; border:1px solid #CCC; background-color:#f6f7fb; box-shadow: 0px 0px 5px #D1D1D1; }
.inputid { width:100%; height:100%; font-size:18px; display:flex; align-items:center;  justify-content: center; }
.btnspace { width:20px; height:20px; }
.idokbtn { width:80px; height:30px; font-size:16px; color:#FFF; border-radius:3px; border:1px solid #b3b3b3; background:#b3b3b3; display:flex; align-items:center;  justify-content:center; cursor:pointer; }
.infobox { width:418px; height:260px; padding-top:20px; display:flex; display:none;  justify-content:left; flex-wrap: wrap; }
.namesection1 { width:115px; height:6px; }
.namesection2 { width:95px; line-height:18px; font-size:12px; height:9px;  }
.namesection3 { width:140px; font-size:12px;height:9px;line-height:18px;  }
.genderright { margin-right:100px; border:0px solid #03F;  }
.procbtnbox { width:100%; margin-top:5px; display:flex; align-items:center;  justify-content:center; }
.procbtn { width:193px; height:36px; font-size:17px; font-weight:400; color:#FFF; border-radius:3px; border:1px solid #253169; background:#4089CC; display:flex; align-items:center;  justify-content:center; cursor:pointer; }	
}

@media screen and (max-width: 400px) {  
body { font-family: 'Noto Sans KR'; font-weight:300; background-color:#f6f7fb; }
/* cover index page */
.mbox { position:absolute; top:0; left:0; height:auto; width:100%; display:flex;  justify-content: center; }
#warningmsg { position:relative; margin-top:40px; width:80%; font-size:17px; font-weight:400; display:flex; justify-content: center; align-items:center; }
#warningmsg div { margin-left:10px; line-height:19px; }
#warningmsg img { width:34px; }
.container { width:600px; display:flex;  justify-content: center; flex-wrap: wrap; border:0px solid red;  }
.mtophead { width:340px; height:170px; margin-top:30px; background: url('http://fourbrain.co.kr/images/cover1.png') no-repeat center; background-size: contain; }
.txtbox { width:90%; display:flex; justify-content: center; margin-top:50px; font-size:20px; font-weight:400; }
.hbox { width:100%; height:30px; }
.hbox2 { width:100%; height:60px; }
.countrykor { width:23%; display:flex; justify-content:center; align-items:center; height:32px; border-radius:6px; border:1px solid #CCC; background-color:#FFF; cursor:pointer; }
.countrykor:hover { background: url('http://fourbrain.co.kr/images/kor2.png') no-repeat 115% -10px #FFF; }
.countryusa { width:23%; display:flex; justify-content:center; align-items:center; height:32px; border-radius:6px; border:1px solid #CCC; background-color:#FFF; cursor:pointer; }
.countryusa:hover { background: url('http://fourbrain.co.kr/images/usa2.png') no-repeat 115% -10px #FFF;  }
.countrygap { width:23%; margin-left:5%; margin-right:5%; display:flex; justify-content:center; align-items:center; height:32px; border-radius:6px; border:1px solid #ccc; background-color:#FFF; cursor:pointer; }
.countrygap:hover { background: url('http://fourbrain.co.kr/images/japan2.png') no-repeat 115% -7px #FFF;  }
.footertext { width:76%; font-size:14px; font-weight:300; line-height:16px; letter-spacing:0px; border:0px solid red; }
.copyright { width:90%; margin-top:50px; margin-bottom:50px; padding-top:5px; display:flex; font-size:12px; letter-spacing:-1px;  justify-content: center; border-top:1px solid #DFDFDF; }
.bwinfo { width:90%; height:40px; display:flex; justify-content: center; flex-wrap: wrap; }
.bwinfoimg { width:80%; }
.bwinfoimg img { width:28px; margin-right:5px; }
.bwinfotext { width:90%; line-height:120%; margin-top:5px; display:flex;  justify-content:left; flex-wrap: wrap; font-size:13px; }
#alertbox { width:100%; position:absolute; top:50%; margin-top:-100px; display:none;   justify-content: center; opacity:1; }
.alertinfo { width:80%; height:190px; max-width:460px; color:#FFF; font-size:16px; font-weight:400; border-radius: 6px; display:flex;  justify-content: center; flex-wrap: wrap; border:1px solid #036; background-color:#69C; box-shadow: 0px 0px 5px #333; }
.infoline1 { width:90%; height:34px; margin-top:26px; display:flex; justify-content: center; }
.infoline2 { width:90%; height:30px; margin-bottom:5px; display:flex; justify-content: center; }
#btnok { width:80px; height:28px; border-radius:5px; border:1px solid #FFF; color:#FFF; display:flex;  justify-content: center; }
#alert_mask { position: fixed; width: 100%; height: 1000px; top: 0px; left: 0px; display:none; background-color:#000; opacity: 0.8; }

input[type=text] { border:1px solid #CCC; border-radius:3px; padding-left:10px; appearance: none; -webkit-appearance: none; -webkit-border-radius:3px; }
input[type='radio'] { border:1px solid #CCC; width:15px; height:15px; margin-right:30px; }
select{
/*ios대응*/
-webkit-appearance: none;
-moz-appearance: none; 
appearance: none;
/*화살표 배경 넣기*/
background: url('http://fourbrain.co.kr/images/selectarrow.png') no-repeat 94% 50% #fff; /*화살표 select박스 오른쪽 중앙 배치,배경 흰색*/
}
select::-ms-expand{ 
display:none; /* 화살표 없애기 for IE10, 11*/
}
.select1 { border:1px solid #CCC; width:60px; padding-left:10px; margin-right:10px; height:28px; -border-radius:3px; -webkit-border-radius:3px;  }
.noselect { width:70px; padding-left:10px; margin-right:10px; height:28px;}
.select2 { border:1px solid #CCC; width:210px; padding-left:10px; height:28px; -border-radius:3px; -webkit-border-radius:3px; }
.inA { width:150px; height:30px; }
.inB { width:195px; height:24px; }
.inC { width:70px; height:24px; margin-right:6px; }
.inD { width:105px; height:24px; }
.uinfoitem { width:80px; height:28px; padding-left:20px; border:0px solid red; }

.tophead { width:340px; height:170px; margin-top:20px; background: url('http://fourbrain.co.kr/images/cover1.png') no-repeat center; background-size: contain; }
.guide { width:90%; margin-top:40px; margin-bottom:3px;  font-size:13px; letter-spacing:-1px; line-height:15px; display:flex;  justify-content: center; }
.inputbox { width:94%; height:70px;  border-radius: 6px; border:1px solid #CCC; background-color:#f6f7fb; box-shadow: 0px 0px 5px #D1D1D1; }
.inputid { width:100%; height:100%; display:flex; align-items:center;  justify-content: center; }
.btnspace { width:20px; height:20px; }
.idokbtn { width:80px; height:30px; font-size:16px; font-weight:400; color:#FFF; border-radius:3px; border:1px solid #b3b3b3; background:#b3b3b3; display:flex; align-items:center;  justify-content:center; cursor:pointer; }
.infobox { width:100%; height:260px; padding-top:20px; display:flex; display:none;  justify-content:left; flex-wrap: wrap; }
.namesection1 { width:105px; height:6px; }
.namesection2 { width:85px; line-height:18px; font-size:12px; height:6px;  }
.namesection3 { width:120px; font-size:12px;height:6px;line-height:18px;  }
.genderright { margin-right:30px; border:0px solid #03F;  }
.procbtnbox { width:100%; margin-top:5px; display:flex; align-items:center;  justify-content:center;  }
.procbtn { width:193px; height:36px; font-size:16px; font-weight:400; color:#FFF; border-radius:3px; border:1px solid #253169; background:#4089CC; display:flex; align-items:center;  justify-content:center; cursor:pointer; }
}