@charset "utf-8";

/*noto sans kr*/
@import url(//fonts.googleapis.com/earlyaccess/notosanskr.css);

@import url(/news/css/site.css);

/*왼쪽 메뉴*/
.col-menu {float:left;width:200px;margin-top:20px;}
.col-menu h2.left-menu {background:#2151b2;color:#fff;display:block;padding:0;margin:0;text-align:center;padding:20px 0;}
.col-menu div.left-menu {border:solid 1px #ddd;}
.col-menu div.left-menu ul {display:block;margin:10px;padding:0;list-style:none;}
.col-menu div.left-menu ul a {display:block;border-bottom:dotted 1px #ccc;line-height:3.5;padding-left:5px;}
.col-menu div.left-menu ul a:hover,
.col-menu div.left-menu ul a.active {color:#cc1919;}
.col-menu div.left-menu ul li:last-child a {border-bottom:none;}

/*오른쪽 내용*/
.col-page {float:right;width:1020px;margin-top:20px;}
.col-page h1 {display:block;padding:0 0 10px 0;margin:0 0 30px 0;border-bottom:solid 1px #ddd;}

/*내용*/
div.contents {margin-bottom:20px;}
div.contents .center {text-align:center;}
div.contents:after {content:"";clear:both;display:table;}
div.contents h2.contents-heading {float:left;width:20%;padding:0 0 10px 0;margin:0 0 10px 20px;;border-bottom:solid 0px #000;color:#555;}
div.contents div.contents-body {float:right;width:100%;padding-left:20px;padding-bottom:20px;}
div.contents div.scrollpane {border:solid 1px #ccc;padding:10px;overflow-y:scroll;height:200px;}

div.contents div.column2 {position:relative;}
div.contents div.column2:after {content:"";clear:both;display:table;}
div.contents div.column2 div.column {width:50%;float:left;}
div.contents div.column3 {position:relative;}
div.contents div.column3:after {content:"";clear:both;display:table;}
div.contents div.column3 div.column {width:33%;float:left;}
div.contents div.column3 div.column:nth-child(3n+2) {width:34%;}
div.contents div.split {position:absolute;width:1px;height:100%;left:50%;top:0;overflow:hidden;background:#ccc;}
div.contents div.split hr {display:none;}
div.contents div.column3 div.split:nth-child(1) {left:34%;}
div.contents div.column3 div.split:nth-child(2) {left:67%;}

/*회원가입*/
#SignOn div.box {border:solid 1px #007bff;box-shadow:#007bff 0 0 3px;}
#SignOn div.column {padding:20px;}
#SignOn div.row {border-top:solid 1px #ccc;padding:20px;}
#SignOn h4 {color:#4867aa;padding:0;margin:0;line-height:1.5;}
#SignOn a {color:#00f;text-decoration:underline;}
#SignOn .sign {width:100%;font-size:12pt;border:none;border-radius:3px;cursor:pointer;color:#fff;background:#444;padding:10px 0;display:inline-block;text-decoration:none;}
#SignOn .sign:hover,
#SignOn .sign:focus {box-shadow:#ccc 2px 2px 2px;}
#SignOn .sign-mail {background:#007bff;}
#SignOn .sign-fb {background:#4867aa;}
#SignOn .sign-google {background:#dc4e41;}
#SignOn .sign-naver {background:#1ec800;padding:0;}
#SignOn .sign-naver img {vertical-align:middle;width:40px;height:40px;}
#SignOn .sign-kakao {background:#ffeb00;color:#3c1e1e;padding:0;}
#SignOn .sign-kakao img {vertical-align:middle;width:40px;height:40px;}
#SignOn .sign-name {background:#207818;}

#SignUp .contents {padding-top:40px;border:solid 1px #ccc;border-top:none;}
#SignUp a {color:#264a98;text-decoration:underline;}
#SignUp div.inputs {margin-bottom:15px;position:relative;}
#SignUp div.inputs .i1 {width:33%;position:absolute;left:0;top:0;text-align:right;padding:10px;}
#SignUp div.inputs .i2 {width:34%;margin:0 auto;text-align:center;}
#SignUp div.inputs .i3 {width:33%;position:absolute;right:0;top:0;padding:10px;}
#SignUp div.inputs .i4 {width:67%;margin:0 0 0 auto;text-align:left;padding:10px 0;}
#SignUp div.inputs .i2 select,
#SignUp div.inputs .i2 input {font-size:12pt;padding:10px;width:100%;border:solid 1px #666;}
#SignUp .sign {width:100%;font-size:12pt;border:none;border-radius:3px;cursor:pointer;color:#fff;background:#444;padding:10px 0;display:inline-block;text-decoration:none;}
#SignUp .sign:hover,
#SignUp .sign:focus {box-shadow:#ccc 2px 2px 2px;}
#SignUp .sign-mail {background:#55acee;}
#SignUp .sign-fb {background:#4867aa;}
#SignUp .sign-google {background:#dc4e41;}
#SignUp .sign-name {background:#207818;}

/*로그인*/
#SignIn .contents {padding-top:65px;border:solid 1px #ccc;border-top:none;}
#SignIn a {color:#264a98;text-decoration:underline;}
#SignIn div.inputs {margin-bottom:15px;position:relative;}
#SignIn div.inputs .i1 {width:33%;position:absolute;left:0;top:0;text-align:right;padding:10px;}
#SignIn div.inputs .i2 {width:34%;margin:0 auto;text-align:center;}
#SignIn div.inputs .i3 {width:33%;position:absolute;right:0;top:0;padding:10px;}
#SignIn div.inputs .i4 {width:67%;margin:0 0 0 auto;text-align:left;padding:10px 0;}
#SignIn div.inputs .i2 input {font-size:12pt;padding:10px;width:100%;border:solid 1px #666;}
#SignIn .sign {width:100%;font-size:12pt;border:none;border-radius:3px;cursor:pointer;color:#fff;background:#444;padding:10px 0;display:inline-block;text-decoration:none;}
#SignIn .sign:hover,
#SignIn .sign:focus {box-shadow:#ccc 2px 2px 2px;}
#SignIn .sign-mail {background:#007bff;}
#SignIn .sign-fb {background:#4867aa;}
#SignIn .sign-google {background:#dc4e41;}
#SignIn .sign-name {background:#28a745;}

/*responsive*/
@media (max-width: 720px) {
    /*왼쪽 메뉴*/
    .col-menu {display:none;}
    
    /*오른쪽 내용*/
    .col-page {float:none;width:100%;margin-top:20px;}
    .col-page h1 {display:block;padding:0 0 10px 0;margin:0 0 30px 0;}

    div.contents h2.contents-heading {float:none;width:100%;padding:0 0 10px 0;margin:0;}
    div.contents div.contents-body {float:none;width:100%;padding-left:0;}

    div.contents div.column2 {position:relative;}
    div.contents div.column2 div.column {width:100%;float:none;}
    div.contents div.column3 div.column {width:100%;float:none;}
    div.contents div.column3 div.column:nth-child(3n+2) {width:100%;}
    div.contents div.split {position:static;width:100%;height:1px;}
    div.contents div.split hr {display:none;}

    div.contents div.scrollpane {height:100px;}

    /*회원가입*/
    #SignOn div.column {padding:10px;}
    #SignOn div.row {padding:10px;}
    
    #SignUp .contents {padding-top:20px;}
    #SignUp div.inputs {margin-bottom:15px;position:relative;}
    #SignUp div.inputs .i1 {width:100%;position:static;text-align:left;}
    #SignUp div.inputs .i2 {width:100%;padding:10px;}
    #SignUp div.inputs .i3 {width:100%;position:static;padding:0 10px;}
    #SignUp div.inputs .i4 {width:100%;margin:0;padding:10px;}
    
    /*로그인*/
    #SignIn .contents {padding-top:20px;}
    #SignIn div.inputs {margin-bottom:15px;position:relative;}
    #SignIn div.inputs .i1 {width:100%;position:static;text-align:left;}
    #SignIn div.inputs .i2 {width:100%;padding:10px;}
    #SignIn div.inputs .i3 {width:100%;position:static;padding:0 10px;}
    #SignIn div.inputs .i4 {width:100%;margin:0;padding:10px;}
    #SignIn div.inputs .i2 input {font-size:12pt;padding:10px;width:100%;border:solid 1px #666;}
}