/*
@font-face {
    font-family: 'NotoSansKR';
    font-style: normal;
    font-weight: 400;
    src: url(font/NotoSansKR-Regular.woff) format('woff'),
         url(font/NotoSansKR-Regular.otf) format('opentype');
}
*/
@font-face {
    font-family: 'NotoSansKR';
    font-style: normal;
    font-weight: 500;
    src: url(font/NotoSansKR-Medium.woff) format('woff'),
         url(font/NotoSansKR-Medium.otf) format('opentype');

}
/*
@font-face {
    font-family: 'NotoSansKR';
    font-style: normal;
    font-weight: 700;
    src: url(font/NotoSansKR-Bold.woff) format('woff'),
         url(font/NotoSansKR-Bold.otf) format('opentype');
}
*/

*{margin:0;padding:0;box-sizing:border-box;}
body{color:#000;font-family:'NotoSansKR', sans-serif;font-size:16px;font-weight:400;}
form, fieldset, button, img{border:0;}
a{text-decoration:none;}
a, button, input{font-family:'NotoSansKR', sans-serif;}
ul, ol{list-style:none;}

/* header */
header{border-bottom:1px solid #ccc;}
header > section{width:1200px;margin:0 auto;padding:35px 10px;}
header h1{display:inline-block;padding:10px 0;}
header h1 a{display:block;}
header h1 a img{vertical-align:top;}
header div{float:right;}
header div p{margin-bottom:20px;}
header div p > span{position:relative;display:inline-block;width:40px;height:40px;text-align:center;vertical-align:middle;border-radius:50%;background-color:#053863;}
header div p > span:after{position:absolute;top:0;left:0;z-index:1;width:36px;height:36px;border-radius:50%;border:2px solid #053863;content:'';}
header div p > span img{position:relative;z-index:1;max-width:100%;margin-top:10px;}
header div ul li{display:inline-block;vertical-align:middle;}
header div ul li:not(:first-child){margin-left:10px;}
header div ul li a{display:block;padding:5px 20px;color:#333;font-size:14px;text-align:center;line-height:20px;border-radius:20px;background-color:#ccc;}
header div ul li a:hover{color:#fff;font-weight:500;background-color:#0bc5b8;}

/* contents */
/* .contents{height:calc(100vh - 161px);background:url(../imgs/bg-con.png) no-repeat center / cover;} */
.contents{background:url(../imgs/bg-con.png) no-repeat center / cover;}
/* .contents > div{width:1200px;margin:0 auto;padding:100px 0;} */
.contents > div{margin:0 auto;padding:40px 0;}
.contents .tit{margin-bottom:100px;color:#053863;font-size:30px;font-weight:500;line-height:1;text-align:center;}
.integ-list{width:100%;margin:0 auto;text-align:center;}
.integ-list li{display:inline-block;width:calc((100% - 52px) / 6);padding:250px 0 45px;vertical-align:middle;overflow:hidden;background-repeat:no-repeat;background-position:center;background-size:cover;}
.integ-list li:not(:first-child){margin-left:20px;}
.integ-list li:nth-child(1){box-shadow:0 10px 20px rgba(50,157,219,.4);background-image:url(../imgs/bg-con3.png);}
.integ-list li:nth-child(2){box-shadow:0 10px 20px rgba(11,197,184,.4);background-image:url(../imgs/bg-con3.png);}
.integ-list li:nth-child(3){box-shadow:0 10px 20px rgba(5,56,99,.4);background-image:url(../imgs/bg-con3.png);}
.integ-list li:nth-child(4){box-shadow:0 10px 20px rgba(5,56,99,.4);background-image:url(../imgs/bg-con3.png);}
.integ-list li:nth-child(5){box-shadow:0 10px 20px rgba(5,56,99,.4);background-image:url(../imgs/bg-con1.png);}
.integ-list li p{margin-bottom:20px;color:#fff;font-size:24px;font-weight:700;line-height:1;}
.integ-list li a{display:inline-block;padding:10px 50px 10px 25px;;color:#000;line-height:20px;border-radius:20px;background:rgba(247,248,253,.5) url(../imgs/ic-arrow.png) no-repeat right 25px center;}

.integ-list li.non-active p{color:#999;}
.integ-list li.non-active a{color:#999;background:#f7f8fd url(../imgs/ic-non-arrow.png) no-repeat right 25px center;}
.integ-list li.non-active:nth-child(1){box-shadow:none;background-image:url(../imgs/bg-non-con3.png);}
.integ-list li.non-active:nth-child(2){box-shadow:none;background-image:url(../imgs/bg-non-con3.png);}
.integ-list li.non-active:nth-child(3){box-shadow:none;background-image:url(../imgs/bg-non-con3.png);}
.integ-list li.non-active:nth-child(4){box-shadow:none;background-image:url(../imgs/bg-non-con3.png);}
.integ-list li.non-active:nth-child(5){box-shadow:none;background-image:url(../imgs/bg-non-con1.png);}


/* login */
.login{width:100%;height:100vh;overflow:hidden;background:url(../imgs/bg-login.jpg) no-repeat center / cover;}
.login form{position:absolute;top:50%;left:50%;transform:translate(-50%, -50%);width:540px;padding:60px 40px 100px;box-shadow:0 10px 20px rgba(0,0,0,.5);background-color:#fff;}
.login form h1{margin-bottom:60px;text-align:center;}
.login form h2{margin-bottom:20px;color:#053863;font-size:24px;font-weight:500;line-height:1;}
.login form input[type="text"],
.login form input[type="password"]{width:100%;height:50px;padding:0 20px;color:#333;font-size:16px;line-height:1;border:1px solid #ccc;}
.login form input[type="text"]{margin-bottom:15px;}
.login form input[type="password"]{margin-bottom:30px;}
.login form button{width:100%;height:60px;color:#fff;font-size:20px;font-weight:500;line-height:1;text-align:center;background-color:#053863;cursor:pointer;}
.login form input[type="checkbox"]{display:none;}
.login form input[type="checkbox"] + label{display:inline-block;color:#333;font-size:14px;line-height:18px;cursor:pointer;}
.login form div{position:absolute;bottom:0;left:0;width:100%;padding:20px 40px;border-top:1px solid #e3e8ff;background-color:#f7f8fd;}
.login form input[type="checkbox"] + label span{display:inline-block;width:18px;height:18px;margin-right:3px;border-radius:3px;border:2px solid #999;vertical-align:top;}
.login form input[type="checkbox"]:checked + label span{border-color:#0bc5b8;background:url(../imgs/ic-checked.png) no-repeat center;}