/*############### common ###############*/
/*NotoSans*/
@font-face {
	font-family:'NotoSansL';
	font-style:normal;
	font-weight:normal;
	font-stretch:condensed;
	 src: url(../font/NotoSansCJKkr-DemiLight.otf) format('opentype');
}
@font-face {
	font-family:'NotoSansR';
	font-style:normal;
	font-weight:400;
	font-stretch:condensed;
    src: url(../font/NotoSansCJKkr-Regular.otf) format('opentype');

}
@font-face {
	font-family:'NotoSansM';
	font-style:normal;
	font-weight:500;
	font-stretch:condensed;
	src: url(../font/NotoSansCJKkr-Medium.otf) format('opentype');
}
@font-face {
	font-family:'NotoSansB';
	font-style:normal;
	font-weight:700;
	font-stretch:condensed;
	src: url(../font/NotoSansCJKkr-Bold.otf) format('opentype');
}
/*GongGothic*/
@font-face {
	font-family:'GongGothicL';
	font-style:normal;
	font-weight:100;
	font-stretch:condensed;
	src: url(../font/GongGothic-Light.otf) format('opentype');
}
@font-face {
	font-family:'GongGothicM';
	font-style:normal;
	font-weight:400;
	font-stretch:condensed;
	src: url(../font/GongGothic-Medium.otf) format('opentype');
}
@font-face {
	font-family:'GongGothicB';
	font-style:normal;
	font-weight:900;
	font-stretch:condensed;
	src: url(../font/GongGothic-Bold.otf) format('opentype');
}
/*강원튼튼*/
@font-face {
	font-family:'GangwonEduB';
	font-style:normal;
	font-weight:normal;
	src: url(../font/GangwonEduPowerExtraBoldA.woff) format('woff');
}
/*Gmarket*/
@font-face {
	font-family:'GmarketM';
	font-style:normal;
	font-weight:normal;
	src: url(../font/GmarketSansTTFMedium.ttf) format('truetype');
}
@font-face {
	font-family:'GmarketB';
	font-style:normal;
	font-weight:normal;
	src: url(../font/GmarketSansTTFBold.ttf) format('truetype');
}
* { margin: 0; padding: 0; box-sizing: border-box; border: 0; font-family: sans-serif; letter-spacing: -0.2px; }
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed,  figure, figcaption, footer, header, hgroup,  menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font-size: 100%; font: inherit; vertical-align: baseline; }
section, nav, article, aside, header, footer { display:block; }

ol, ul { list-style: none; }
a { color: #000; text-decoration: none; }
table { width: 100%; border-collapse: collapse; border-spacing: 0; }
img { vertical-align: top; }
i, address { font-style:normal; }

input { padding: 0 10px; border: 1px solid #ddd; }
textarea{ resize:none; }
select { padding: 0 35px 0 10px; border: 1px solid #ddd; appearance: none; -webkit-appearance: none; -moz-appearance: none; background: url(../img/select_down.png) no-repeat right 10px center; background-size: 10px; }
select::-ms-expand { display: none; }
input[type="submit"],
input[type="button"],
button { cursor: pointer; }

.container { width: 1200px; margin: 0 auto;}

/*****header*****/
header{height: 50px;}
header ul{ height: 100%; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between;}

header .go-link ul li .nation-symbol .txt{
    width: 45px;
    height: auto;
    font-family: 'NotoSansR';
    font-size: 11px;
    color: #444;
    line-height: 1.3;
    margin-left: 10px;
}
header .go-link ul li a{display: block;}
header .go-link ul li:first-child{margin-right: 40px;}
header .go-link ul li:last-child a{display: inline-flex; align-items: center;}




/*****section*****/
section{ position: relative; background: url(/resources/common/images/intro/bg-img.png) center no-repeat; background-size: cover;min-height:calc(100vh - 214px) ;}
section .container{padding: 120px 0; display: flex; align-items: center; justify-content: center; position: relative; height: calc(100vh - 214px); z-index: 9; }
section:before{
    width: 100%; height: 100%; content:"";display: block;
    position: absolute; top: 0; left: 0;
    background: url(/resources/common/images/intro/bg-ico-logo.png) no-repeat calc(100% - 30px) 80px;
}
section .container ul{display: flex; flex-wrap: wrap; justify-content: center;}
section .container ul li{ width: 345px; padding: 30px 35px;background:#fff; border-radius: 30px; margin: 0 25px;box-shadow: 0px 17px 11.9px 5.1px rgba(35, 35, 35, 0.4);}
section .container ul li > p{font-family: 'GongGothicM'; font-size: 24px; color: #333; text-align: center; margin-top: 12px; margin-bottom: 18px;}
section .container ul li .title{ font-family:'GangwonEduB'; line-height: 1.3; border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; font-size: 30px; color:#1565c0; width: 250px; text-align: center; margin: 0 auto; background: #f7f7f7;padding:20px 0 10px ;}
section .container ul li{display: flex; flex-direction: column; flex-wrap: wrap;}
section .container ul li .link-btn {margin-top: auto; font-family:'GmarketM';}
section .container ul li.box01 .link-btn a { display: block; height: 110px; border: 2px solid #333; border-radius: 10px;display: flex; align-items: center; flex-direction: column; justify-content: center; flex-wrap: wrap;}
section .container ul li.box01 .link-btn a:first-child{margin-bottom: 15px; background: #eae6fd;}
section .container ul li.box01 .link-btn a p:first-child {font-family: 'GmarketB'; font-size: 24px; color: #3949ab;}
section .container ul li.box01 .link-btn a p:last-child { margin-top: 10px; font-size: 20px; color:#333;}
section .container ul li.box01 .link-btn a p:last-child::after{display:inline-block; content: "";width: 21px; height: 17px;background: url(/resources/common/images/intro/ico-next-arrow.png)center no-repeat;margin-left: 5px; transform: translateY(2px);}
section .container ul li img.police-logo{display: block; margin: 0 auto 10px;}
section .container ul li img.pc-img{width: 230px; margin: 25px auto 0;}
section .container ul li:last-child .link-btn a{
    height: 55px; background: #3949ab; border-radius: 10px; color: #fff; font-size: 16px;
    line-height: 59px;
    text-align: center; display: block; position: relative;
}
section .container ul li:last-child .link-btn a::after{
    content: ""; display: inline-block; width: 21px; height: 17px;position: absolute;top: 50%; right: 20px; transform: translateY(-50%);
    background: url(/resources/common/images/intro/ico-go-hompage.png);
}


/*****footer*****/
footer{background:#3b414d;}
footer .container{padding: 20px 0;}
footer .container ul{display: flex; flex-wrap: wrap;}
footer .container ul .logo{margin-right: 35px;}
footer .container ul .txt{ margin-top: 20px; font-family: 'NotoSansL', sans-serif; font-size: 14px;  }
footer .container ul .txt .txt-03{font-size: 13px;color: #8eace7;}
footer .container ul .txt .txt-02{color:#acbfe5; margin-bottom: 30px;}
footer .container ul .txt .txt-01{margin-bottom: 15px;color:#f0f0f0;}
footer .container ul .txt .txt-01 li:last-child a{color: #fbc463;}

footer .container ul .txt .txt-01 li::after {
    content:"";display: inline-block; width: 1px; height: 17px;background: #fff; opacity: 0.5;margin: -3px 20px;
}
footer .container ul .txt .txt-01 li:last-child::after{display: none;}

@media(max-width:1200px){
    .container{width: 100%;}
    header .container, footer .container{width: 100%; padding: 0 5%;}
    footer .container{padding:20px 5% ;}
}
@media(max-width:1024px){
    header{height: auto;}
    section:before { background-position: calc(100% - 30px) 120px; background-size: 35vw; display: none; }
    header .container .go-link{display: none;}
    header .container{flex-direction: column-reverse;}
    header .container li:nth-of-type(1){margin-bottom: 10px;}
    header .container li:nth-of-type(2){margin-bottom: 10px;}

    footer .container ul .txt{width: calc(100% - 130px); margin-top: 0px;}
}
@media(max-width:820px){
    section .container ul { padding: 0 40px; width: 100%; }
    section .container ul li{ margin: 0; width: calc(50% - 20px);}
    section .container ul li + li { margin-left: 40px; }
    section .container ul li .title{width: 100%;}
    section .container ul li:last-child .link-btn a::after { right: 15px; }

    /* section .container{width: 100%; padding: 0 5%;} */
    section .container{height: auto; padding: 10% 0;}
}
@media(max-width:767px){
    section .container ul { padding: 0 20px; }
    section .container ul li{width: 90%; max-width: 400px;}
    section .container ul li:first-child{margin-bottom: 40px;}
    section .container ul li + li { margin-left: 0; }
    section .container ul li.box01 .link-btn {margin-top: 10px;}
    section .container ul li img.pc-img { margin: 10px auto 0; width: 100%; max-width: 250px; }

    footer .container ul{flex-direction: column; align-items: center;}
    footer .container ul .txt{width: 100%; text-align: center;}
    footer .container ul .logo{margin: 0 auto; margin-bottom: 20px;}
    footer .container ul .txt .txt-01 li::after{display: none;}
    footer .container ul .txt .txt-01 li + li {margin-top: 5px;}
}
@media (max-width: 424px) {
    section .container ul li { padding: 25px 20px; }
    section .container ul li > p { font-size: 20px; }
    section .container ul li .title { font-size: 25px; }
    section .container ul li.box01 .link-btn a { padding: 20px; height: auto; }
    section .container ul li.box01 .link-btn a p:first-child { font-size: 22px; }
    section .container ul li.box01 .link-btn a p:last-child { font-size: 18px; }

    section .container ul li:last-child .link-btn a { padding: 0 20px; text-align: left; }
    section .container ul li:last-child .link-btn a::after { right: 20px; }
}
@media (max-width: 374px) {
    section .container ul li { width: 100%; }
    header .container li:nth-of-type(2) img { max-width: 100%; }
    section .container ul li:last-child .link-btn a { padding: 0 15px; }
    section .container ul li:last-child .link-btn a::after { right: 10px; }
}