/* ======================================== Font ======================================== */

@font-face{
  font-family: 'NanumSquare';
  font-style: normal;
  font-weight: 400;
  src: url(/css/n21/avt/font/NanumSquareR.eot);
  src: url(/css/n21/avt/font/NanumSquareR.eot?#iefix) format('embedded-opentype'),
       url(/css/n21/avt/font/nanumsquarer-webfont.woff) format('woff'),
	   url(/css/n21/avt/font/NanumSquareR.ttf) format('truetype');
}
@font-face{
  font-family: 'NanumSquare';
  font-style: normal;
  font-weight: 700;
  src: url(/css/n21/avt/font/NanumSquareB.eot);
  src: url(/css/n21/avt/font/NanumSquareB.eot?#iefix) format('embedded-opentype'),
       url(/css/n21/avt/font/nanumsquareb-webfont.woff) format('woff'),
	   url(/css/n21/avt/font/NanumSquareB.ttf) format('truetype');
}
@font-face {
 font-family: 'NanumSquare';
 font-weight: 800;
 src: url(/css/n21/avt/font/NanumSquareEB.eot);
 src: url(/css/n21/avt/font/NanumSquareEB.eot?#iefix) format('embedded-opentype'),
	  url(/css/n21/avt/font/nanumsquareeb-webfont.woff) format('woff'),
      url(/css/n21/avt/font/NanumSquareEB.ttf) format('truetype');
}


#wrap{ background:#f5f5f5;}

.inner{width:calc(100% - 10px); margin:0 auto;}

h1{width:108px; }
h1 a img{width:100%;}

header{padding:0px 0 15px;}
header p{margin-top:15px; font-size:22px; text-align:center; font-weight:800; color:#474747;font-family: 'NanumSquare';}

.ocBox{padding:10px; border-radius:20px 20px 0 0; background:hsl(0, 0%, 100%); box-shadow: 0px 0px 10px 0px rgba(0, 0, 0, 0.12);}
.ocBox .ocList{display:flex; flex-wrap:wrap; justify-content: space-between;}
.ocBox .ocList li{display:none; width:calc(100%/2 - 5px); margin-bottom:15px; outline:1px solid #E4E4E4; border-radius:8px;transition:all 0.2s ease-in-out; font-family: 'NanumSquare';}
.ocBox .ocList li.tab1_cont{display:block;}
.ocBox .ocList li:hover{ outline:2px solid #474747;  box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.12); transition:all 0.2s ease-in-out;}
.ocBox .ocList li:hover .btnBox{background:#474747; transition:all 0.2s ease-in-out;}
.ocBox .ocList li:hover a{color:#fff; transition:all 0.2s ease-in-out;}
.ocBox .name{font-size:14px; color:#222; padding:12px 0; font-weight:800; text-align:center; font-family: 'NanumSquare';}
.ocBox .btnBox{display:flex; background:#F3F3F3; border-radius:0 0 7px 7px; }
.ocBox .btnBox a{position:relative; display:block; width:calc(100%/3); padding:10px 0; text-align: center; font-size:12px; font-weight:bold; line-height:12px; font-family: 'NanumSquare';}
.ocBox .btnBox a:after{position:absolute; top:10px; right:0px; content:''; display:block; width:1px; height:12px; background:#ccc;}
.ocBox .btnBox a:last-child:after{display:none;}

.icon_txt{font-size:15px; font-weight:700; color:#555; margin-bottom:15px; padding-left:24px; padding-top:5px; background:url("/images/ocvote2/error-warning-line.png") left top 4px no-repeat; font-family: 'NanumSquare';}

.linkBox{width:100%; display:flex; flex-wrap:wrap; justify-content:space-evenly; padding-top:15px; margin-top:7px; border-top:1px solid #CCCCCC;}
.infoLink a{display:block; width:calc(100%/2 - 40px); height:42px; padding:0 15px; margin-bottom:8px; border-radius:50px; color:#fff; font-size:13px; line-height:42px;font-family: 'NanumSquare';}
.infoLink a.green{background:#939c9f  url("/images/ocvote2/whiteArrow.png") right 15px center no-repeat; background-size:7px;}
.infoLink a.pink{background:#a1909a url("/images/ocvote2/whiteArrow.png") right 15px center no-repeat; background-size:7px;}
.infoLink a.yellow{background:#a18e6a url("/images/ocvote2/whiteArrow.png") right 15px center no-repeat; background-size:7px;}
.infoLink a.purpleblue{background:#59595b url("/images/ocvote2/whiteArrow.png") right 15px center no-repeat; background-size:7px;}

.tabMenu{display:flex; flex-wrap:wrap; margin:15px 0; background:#F3F3F3; border-radius:5px;}
.tabMenu li{position:relative; width:calc(100%/2); padding:10px 0; text-align:center; font-size:14px;  color:#898989;  font-family: 'NanumSquare'; }
.tabMenu li:after{position:absolute; right:0px; top:45%; content:''; display:block; width:1px; height:14px; background:#CCCCCC; }
.tabMenu li:nth-child(2n):after,
.tabMenu li.active:after{display:none;}
.tabMenu li a{font-size:14px; font-family: 'NanumSquare';}
.tabMenu li.active{border-radius:5px; background:#857c6d;}
.tabMenu li.active a{color:#fff;}
@media all and (max-width:768px) {
    header p{font-size:18px;}
}
@media all and (max-width:420px) {
   .ocBox .btnBox a{font-size:11px; }
}
@media all and (max-width:360px) {
    header{padding:12px 0 15px; }
    header p{font-size:14px;}

    .tabMenu li:nth-child(2n):after{display:none;}
    .tabMenu li:last-child:after{display:none !important;}
    .tabMenu li:nth-child(3n):after{display:block;}
    .tabMenu li{width:calc(100%/2);}

    .ocBox .ocList li{width:100%;}
    .infoLink a{width:100%;}
}