@charset "utf-8";
@import url("/Mobile/css/NotoKR.css");

/*-- 배너 슬라이드--*/
.mainslide {
    height: 100%;
    width: 100%;
    float: left;
    position: relative;
    margin-top: 60px
}

ul.slide {
    width: 100%;
    height: 100%
}

ul.slide li img {
    width: 100%;
    height: 100%
}

.bx-wrapper {
    position: relative;
    margin-bottom: -2px
}

.bx-pager {
    position: absolute;
    top: 68%;
    left: 0;
    padding: 0 5px;
    height: 30px;
    text-align: center;
    z-index: 100;
    width: 100%
}

.bx-pager-item {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
}

.bx-pager-item > a {
    margin: 0 5px;
    display: block;
    width: 10px;
    height: 10px;
    background-color: #fff;
    border-radius: 10px;
    font-size: 0;
    color: transparent;
    opacity: 0.7;
}

.bx-pager-item > a.active {
    background-color: #132a88;
    opacity: 1
}

.bx-wrapper .bx-controls-direction a {
    position: absolute;
    top: 50%;
    margin-top: -16px;
    outline: 0;
    width: 20px;
    height: 61px;
    text-indent: -9999px;
    z-index: 100;
}

.bx-prev {
    display: block;
    left: 10px;
    background-image: url(../img/btn-pre.png);
    background-repeat: no-repeat
}

.bx-next {
    display: block;
    right: 10px;
    background-image: url(../img/btn-next.png);
    background-repeat: no-repeat
}

/*--- 퀵아이콘 ---*/
.b_bon {
    position: relative;
    width: 100%;
    height: 150px;
    background-color: #eee
}

.b_bon .qBbox {
    position: absolute;
    bottom: 20%;
    background-color: #fbfbfb;
    z-index: 10;
    width: 80%;
    margin-left: 50%;
    transform: translateX(-50%);
    border-radius: 10px;
    border: 1px solid #eaeaea;
    box-shadow: 3px 3px 5px rgb(0 0 0 / 0.1);
}

.b_bon .qBbox ul {}

.b_bon .qBbox ul li {
    width: 33.33%;
    display: inline-block;
    float: left;
    border-bottom: 1px dashed #ccc;
    border-right: 1px dashed #ccc;
    color: #009ade;
    padding: 4% 2%;
}

.b_bon .qBbox ul li:nth-child(3) {
    border-right: 0
}

.b_bon .qBbox ul:nth-child(2) li:nth-child(1),
.b_bon .qBbox ul:nth-child(2) li:nth-child(2),
.b_bon .qBbox ul:nth-child(2) li:nth-child(3) {
    border-bottom: 0;
}

.b_bon .qBbox ul li a {
    color: #009ade
}

.b_bon .qBbox ul li a img {
    width: 80%;
    margin: 0 auto;
    display: block;
}

.b_bon .qBbox ul li a p {
    margin: 0 auto;
    text-align: center;
    margin-top: 5%;
    font-size: 0.8em;
}

/*---// 퀵아이콘 ---*/


/*-- 공지 --*/
.conBox {
    background-color: #dbe9f7;
}

.conBox .notice_roll {
    width: 66%;
    height: 40px;
    overflow: hidden;
    margin-right: 4%;
    display: inline-block;
    float: left;
    border-bottom: 1px dashed #ccc;
}

.conBox .notice_roll:nth-child(2) {
    border-bottom: 0
}

.conBox .notice_roll > p {
    display: inline-block;
    float: left;
    font-size: 1em;
    line-height: 40px;
    padding: 1% 0 0 3%;
    width: 8%;
}

.conBox .notice_roll > p > i {
    margin-left: 5px
}

.conBox .rolling {
    position: relative;
    width: 90%;
    height: auto;
    display: inline-block;
    float: left
}

.conBox .rolling li {
    width: 100%;
    height: 40px;
    line-height: 40px;
    padding-left: 8%
}

.conBox .rolling li a {
    font-size: 0.8em;
    color: #333;
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap
}

.conBox .rolling li a span {
    color: #777;
    letter-spacing: 0.5px
}

.conBox .weather {
    width: 30%;
    background-color: #c9ddf1;
    height: 80px;
    display: inline-block;
    padding: 2%
}
.tab > p.txt_wea > a {display: block; text-align: center; margin: 4% 0; font-size: 0.8em;line-height: 1.4em}  
.tabs_sub03 {
    display: flex;
    flex-wrap: wrap;
}

.tabs_sub03 label {
    order: 1;
    padding: 6% 0;
    text-align: center;
    cursor: pointer;
    font-size: 0.7em;
    transition: background ease 0.2s;
    border-bottom: 1px solid #aaa;
    border-left: 0;
    display: block
}

.tabs_sub03 > label {
    width: 50%;
    display: block;
}

.tabs_sub03 label:nth-child(2) {}

.tabs_sub03 .tab {
    order: 99;
    flex-grow: 1;
    width: 100%;
    display: none;
}

.tabs_sub03 .tab > img {
    display: inline-block;
    float: left;
    width: 30%;
    margin: 2% 10%;
}

.tabs_sub03 .tab > span {
    display: inline-block;
    float: left;
    width: 45%;
    padding: 12% 5%;
}

.tabs_sub03 input[type="radio"] {
    display: none;
}

.tabs_sub03 input[type="radio"]:checked + label {
    border-bottom: 2px solid #1f9bde;
}

.tabs_sub03 input[type="radio"]:checked + label + .tab {
    display: block;
}

/*--// 공지 --*/



/*-- 대표번호 --*/
.front {
    margin: 0 auto
}

.front > a > p {
    line-height: 80px;
    font-size: 1em;
    font-weight: 600;
    padding: 5% 5% 0;
}

.front > a > p > span {
    font-size: 1.3em;
    color: #132a88
}

.front > ul {
    padding: 12% 4% 30%;
}

.front > ul > li {
    display: inline-block;
    width: 48%;
    float: left;
    line-height: 1em;
    border: 1px solid #ddd;
    border-radius: 10px;
}

.front > ul > li:nth-child(1) {
    margin: 0 4% 0 0;
}

.front > ul > li > a > img {
    display: inline-block;
    float: left;
    padding: 5%;
}

.front > ul > li > a > p {
    font-size: 0.7em;
    margin: 5% 0;
}

.front > ul > li > a > p > span {
    display: block;
    font-size: 1.2em;
    color: #132a88;
    font-weight: 600;
}

/*--// 대표번호 --*/


@media screen and (max-width:280px) {
    .tabs_sub03 label { padding: 10% 0;}
    .tabs_sub03 .tab { padding: 9% 0 }
    .b_bon .qBbox ul li a p {font-size: 0.7em}
    .b_bon .qBbox ul li {padding:7% 4%}
}
@media screen and (min-width:280px) and (max-width:360px){
    .front > ul {}
    .b_bon .qBbox ul li a img {}
    .front > ul > li { display: block;  float: none}
    .front > ul > li {width: 100%;}
    .front > ul > li > a > p { font-size: 0.9em; margin: 8%;}
    .front > ul > li > a > img { padding: 7% 2% 0 10%;}
    .front > ul > li:nth-child(1) { margin: 0 4% 6% 0; }
    .front > ul {padding: 10% 5%;}
    .front > ul > li > a > p > span { font-size: 1.3em;  margin-top: 2%;}
}
@media screen and (min-width:540px) and (max-width:720px) {
    .b_bon { height: 190px}
    .tabs_sub03 label {padding: 3% 0;}
    .front > ul > li > a > p { margin: 10% 5%;}  
    .b_bon .qBbox ul li a p {font-size: 0.9em}
    .b_bon .qBbox ul li {padding: 6%}
}
@media screen and (min-width:768px) and (max-width:1023px) {
    .b_bon { height: 220px}
    .b_bon .qBbox ul li { padding:5%}
    .b_bon .qBbox ul li a img { width: 60%;}
    .conBox .notice_roll,
    .conBox .notice_roll > p,
    .conBox .rolling li { height: 60px;line-height: 60px}
    .conBox .weather { height: 120px}
    .b_bon .qBbox ul li a p { font-size: 1.4em}
    .conBox .rolling li a {font-size: 1.1em}
    .tabs_sub03 label { padding: 2% 0; font-size: 0.9em;}
    .tabs_sub03 .tab > img {width: 20%; margin: 2% 1% 0 30%; }
    .front > ul {padding: 10% 4% 20%;}
    .front > ul > li { padding: 1% 5%;}
    .front > ul > li > a > p {font-size: 1.1em;}
    .front > ul > li > a > p > span { margin-top: 4%;}
    .front > ul > li > a > img { padding: 5% 4%;}
    footer .copy { padding: 3% 15% 1% !important}
    footer .familySite { margin: 5% 0 5% 0 !important}
    footer .copy p { font-size: 0.9em; line-height: 2em; }
}
@media screen and (min-width:1024px) and (max-width:1366px) {
	.b_bon {height: 250px;	}
	.b_bon .qBbox ul li a p {font-size: 1.6em;}
	.b_bon .qBbox ul li a img { width: 60%;}
	.conBox .notice_roll,
    .conBox .notice_roll > p,
    .conBox .rolling li { height: 60px; line-height: 60px }
    .conBox .weather {height: 120px;}
	.conBox .rolling li a {font-size: 1em;}
    .tabs_sub03 label { padding: 1% 0 4%;}
	.tabs_sub03 .tab > img {margin: 2% 5% 0 20%;width: 20%;}
	.tabs_sub03 .tab > span {font-size: 1.5em;padding:8% 5% ;}
	.front > ul > li > a > p {font-size: 1.2em;}
    .front > ul > li > a > p > span {margin-top:3%;font-size: 1.6em;}
	.tabs_sub03 label {font-size:1em}
	.front > ul {padding: 10% 4% 20%;}
	footer .f_top ul li a {font-size: 1.2em !important;}
	footer .copy {padding: 5% 20% !important;}
	footer .familySite {margin: 0 0 5% !important}
}