@import url("layout.css");

#main_container{position:relative; }
#header{position:fixed; }

/* section*/
.section{position:relative;}
.section h3{color:#003657; font-size:1.25rem; margin:2rem auto 3.25rem; text-align:center; overflow:hidden;}
.section h3 span{color:#007bc7; }

/** section02 **/
.section02:before{ content:""; position:absolute; left:0; top:5rem; width:6.2rem; height:19.3rem; background:url('/images/web/kodit/main/bg_section02.png') no-repeat; background-size:cover;}

/** section03 **/
.section03{background:url('/images/web/kodit/main/bg_section03.jpg') no-repeat center/cover;}

/* control common type */
.control.ty01{width:100%; line-height:2rem; text-align:center; margin-top:1.5rem;}
.control.ty01 > *{display:inline-block; vertical-align: top;}
.control.ty01 .setBtn{line-height:2.2rem; margin:0 .75rem; vertical-align: sub;}
.control.ty01 .setBtn.play{display:none;}
.control.ty01 .prev,
.control.ty01 .next{position:relative; color:#000; font-size:.85rem; font-weight: 600;}
.control.ty01 .prev:before,
.control.ty01 .next:before{content: ""; position:absolute; bottom:0; width:1.4rem; height:1.4rem; border-radius:50%;}
.control.ty01 .prev:after,
.control.ty01 .next:after{content: ""; position:absolute; bottom:.4rem; width:2.5rem; height:1px; background:#000;  z-index:1;}
.control.ty01 .prev{padding-right:1.5rem;}
.control.ty01 .next{padding-left:1.5rem;}
.control.ty01 .prev:before{right:0; background:#0768ac;}
.control.ty01 .next:before{left:0; background:#8dc63f;}
.control.ty01 .prev:after{right:.5rem;}
.control.ty01 .next:after{left:.5rem;}
.control.ty01 .page{margin-left:.75rem;}
.control.ty01 .page li{display:inline-block; margin:0 5px; vertical-align: text-bottom;}
.control.ty01 .page li button{display:block; width:11px; height:11px; border-radius:50%; padding:0; border:1px solid #0768ac; text-indent: -9999em;}
.control.ty01 .page li.slick-active button{background:#0768ac;}
.control.ty01 a, .control.ty01 :after{transition: all .2s; -webkit-transition: all .2s; -ms-transition: all .2s;}
/** control common type:active **/
.control.ty01 .prev:hover,
.control.ty01 .prev:focus{color:#0768ac;}
.control.ty01 .next:hover,
.control.ty01 .next:focus{color:#6ca51e;}
.control.ty01 .prev:hover:after,
.control.ty01 .next:hover:after,
.control.ty01 .prev:focus:after,
.control.ty01 .next:focus:after{width:3.5rem;}

/* visual */
.visual{position:relative; width:100%; height:100%; font-family: 'SCDream'; overflow:hidden;}
.visual div[class^='slick']{height:100%;}
.visual .slider{position:relative; z-index: 0; height:100%;}
.visual .sEl{position:relative; height:100%; overflow:hidden;}
.visual .slogan{position:absolute;left:50%;top:10rem;width:calc(100% - 24rem);max-width:42rem;height:auto;margin-left: -31rem;color:#003657;word-break: keep-all;overflow:hidden;z-index: 1;}
.visual .slogan > p{font-size:3.5rem; line-height:1.3; font-weight: 200; letter-spacing: -3px;}
.visual .slogan > p span{font-size:2rem;}
.visual .slogan > p em{font-weight: 700;}
.visual .slogan > p em.pt_gr {/*color:#77b600;*/}
.visual .slogan > p em.pt_bl {/*color:#0aa2f4;*/}

.visual .slogan > span{position:relative; display:block; padding-top:2rem; font-size:1.15rem; }
.visual .slogan > span em{font-weight: 700;}
.visual .img{width:100%; height:100%; background-size:cover; background-repeat: no-repeat; background-position:center;}
.visual .control{
    position:absolute;
    left:50%;
    bottom:12.5rem;
    min-width:11.5rem;
    margin-left: -31rem;
    padding:1rem;
    text-align:center;
    color:#fff;
    line-height:1.5rem;
    border-radius:2rem;
    z-index: 1;
    background: -moz-linear-gradient(left, #379b10 0%, #007bc7 100%);
    background: -webkit-linear-gradient(left, #379b10 0%,#007bc7 100%);
    background: linear-gradient(to left, #379b10 0%,#007bc7 100%);
}
.visual .control > a{display:inline-block; font-size:1rem; }
.visual .control .page{display:inline-block; vertical-align: top; margin: 0 .25rem;}
.visual .control .page *{display:inline-block; vertical-align: top;}
.visual .control .page strong{font-size:1rem; font-weight: 600;}
.visual .control .page span{/*opacity: .5;*/ font-size:.9rem;}
.visual .control .page > p{position:relative; width:1.5rem; height:1px; margin:0 .5rem; vertical-align: baseline; background:rgba(255,255,255,0.5)}
.visual .control .page > p em{position:absolute; left:0; top:0; width:0; height:1px; background:#fff;}
.visual .control #visualPlay{display:none;}
.visual a, .visual .page em{transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s;}
/* visual:active */

/* Notice */
.notice{position:relative; width:calc(100% - 37rem); height:21.25rem; padding-left:6.5rem; float:left; overflow:hidden;}
.notice h4{position:absolute; left:0; top:0; color:#003657; font-size:1.25rem;}
.notice h5{display:inline-block; font-family: 'SCDream'; color:rgb(128, 128, 128); font-weight: 400; font-size:1.1rem;}
.notice h5 ~ h5{margin-left:1rem;}
.notice h5 a{display:block; position:relative; padding:0 .35rem;}
.notice h5 a:before{content:""; position:absolute; left:0; bottom:0; width:0; height:.75rem; border-radius:1rem; background:#a2df30; z-index:-1;}
.notice h5 a.select{color:#000; font-weight: 700;}
.notice h5 a.select:before{width:100%;}
.notice .listBox{display:none; position:absolute; left:0; top:3rem; width:100%;}
.notice .listBox.on,
.notice .listBox > a{display:block;}
.notice .listBox dl{padding-bottom:1rem; margin-bottom:1rem; border-bottom:1px solid #ddd;}
.notice .listBox dt{position:relative; padding-left:1.5rem; font-family: 'SCDream'; font-size:1rem; font-weight: 700; color:#111; overflow:hidden; text-overflow:ellipsis; white-space: nowrap;}
.notice .listBox dt:before{content:"N"; position:absolute; left:0; top:.1rem; width:1.25rem; height:1.25rem; border-radius:50%; line-height:1.25rem; text-align:center; color:#fff; background:#007bbd; font-size:.75rem;}
.notice .listBox dd p{line-height:1.75rem; height:3.5rem; font-size:.9rem; color:#666; margin-top:.75rem; overflow:hidden;}
.notice .listBox dd span{color:#888; display:block; text-align:right; margin-top:.25rem;}
.notice .listBox li + li{margin-top:.5rem;}
.notice .listBox li a{position:relative; display:block; font-family: 'SCDream'; padding-right:5rem; }
.notice .listBox li a p{overflow:hidden; text-overflow: ellipsis; white-space: nowrap; color:#111; font-weight: 600;}
.notice .listBox li a span{position:absolute; right:1px; top:0; font-size:.7rem; color:#888;}
.notice .more{position:absolute; top:-3rem; right:0; font-size:1.1rem; font-weight: 600;}
.notice .more, .notice p, .notice h5, .notice :before{transition: all .2s; -webkit-transition: all .2s; -ms-transition: all .2s;}
/** Notice:active **/
.notice h5 a:hover,
.notice h5 a:focus{color:#000;}
.notice li a:hover p,
.notice li a:focus p,
.notice .more:hover,
.notice .more:focus{color:#02456d;}

/* gallery */
.gallery{position:relative; width:16.5rem; margin:0 2rem; float:left; font-family: 'SCDream'; overflow:hidden;}
.gallery h4{color:#003657; font-size:1.25rem;}
.gallery .slider{margin-top:.5rem;}
.gallery .sEl{margin:0 1px; overflow:hidden; }
.gallery .sEl a{position:relative; display:block; border:1px solid #ddd; overflow:hidden; }
.gallery .sEl .img{width:100%; height:12.75rem; overflow: hidden; background:rgba(0,0,0,0.1);}
.gallery .sEl img{position:relative; left:50%; width:auto; height:100%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%); }
.gallery .sEl .cont{padding:1rem 1.5rem;}
.gallery .sEl .cont p{font-size:1rem; color:#000; font-weight:600; overflow:hidden; text-overflow: ellipsis; white-space: nowrap;}
.gallery .sEl .cont span{display:block; font-size:.75rem; padding-top:.75rem; color:#888;}
.gallery .more{position:absolute; top:0; right:0; font-size:1.1rem; font-weight: 600;}
.gallery a, .gallery p, .gallery .more{transition: all .2s; -webkit-transition: all .2s; -ms-transition: all .2s;}
/** gallery:active **/
.gallery .sEl a:hover,
.gallery .sEl a:focus{border-color:#6ca51e;}
.gallery .sEl a:hover p,
.gallery .sEl a:focus p,
.gallery .more:hover,
.gallery .more:focus{color:#02456d;}

/* 알림배너 */
.bannerAlr{position:relative; width:16.5rem; float:left; overflow:hidden; font-family: 'SCDream'; }
.bannerAlr h4{color:#003657; font-size:1.25rem;}
.bannerAlr .slider{margin-top:.5rem;}
.bannerAlr .slider a{display:block; height:18.25rem; background:rgba(0,0,0,0.1); border:1px solid #fff; text-align:center; overflow:hidden;}
.bannerAlr .slider a img{position:relative; width:100%; height:auto; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
.bannerAlr .more{position:absolute; top:0; right:0; font-size:1.1rem; font-weight: 600;}
.bannerAlr a{transition: all .2s; -webkit-transition: all .2s; -ms-transition: all .2s;}
/** Banner:active **/
.bannerAlr .slider a:hover,
.bannerAlr .slider a:focus{border-color: #6ca51e;}
.bannerAlr .more:hover,
.bannerAlr .more:focus{color:#6ca51e;}

/* 바로가기01 */
.m_link01{width:calc(100% - 18.5rem); float:left;}
.m_link01 h4{font-family: 'SCDream'; color:#003657; font-size:1.25rem;}
.m_link01 ul{padding:1rem; border-radius:.5rem; font-size:0; line-height:0; background:rgba(170, 203, 217, .85); }
.m_link01 li{width:25%; display:inline-block; font-size:.8rem; line-height:1.6; padding:.5rem .25rem; vertical-align: top; text-align:center; word-break: keep-all;}
.m_link01 li a{display: block;}
.m_link01 li p{width:5rem; height:5rem; line-height:5rem; border-radius:50%; margin:0 auto; background:#fff; }
.m_link01 li p img{width:3rem; height:3rem;}
.m_link01 li em{display:block; font-family: 'SCDream'; font-weight: 700; font-size:.9rem; color:#111; margin:.5rem 0 .25rem; }
.m_link01 li span{display:block; color:#444; font-size:.75rem; line-height:1.2;}
.m_link01 p, .m_link01 em, .m_link01 span{transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s; }
/** 바로가기01:active **/
.m_link01 a:hover p,
.m_link01 a:focus p{box-shadow:2px 2px 6px rgba(8, 110, 243, 0.3);}
.m_link01 a:hover em,
.m_link01 a:focus em{color:#0768ac;}
.m_link01 a:hover span,
.m_link01 a:focus span{color:#000;}

/* 배너홍보존 */
.bannerPR{position:relative; width:16.5rem; margin-left:2rem; float:left; overflow:hidden;}
.bannerPR h4{font-family: 'SCDream'; color:#003657; font-size:1.25rem;}
/* .bannerPR .slider{margin-top:1rem;} */
.bannerPR .slider a{display:block; height:18.25rem; background:rgba(0,0,0,0.1); border:1px solid transparent; text-align:center; overflow:hidden;}
.bannerPR .slider a img{position:relative; width:100%; height:auto; top:50%; transform: translateY(-50%); -webkit-transform: translateY(-50%);}
.bannerPR .more{position:absolute; top:0; right:0; font-size:1.1rem; font-weight: 600;}
.bannerPR a{transition: all .2s; -webkit-transition: all .2s; -ms-transition: all .2s;}
/** Banner:active **/
.bannerPR .slider a:hover,
.bannerPR .slider a:focus{border-color: #6ca51e;}
.bannerPR .more:hover,
.bannerPR .more:focus{color:#6ca51e;}

/* 하단배너 */
.bnBox{padding:1rem 0; display:none;}
.bnBox .control{position:absolute; top:1rem; width:5rem; font-size:1.25rem; color:#666;}
.bnBox .control a{display:inline-block; vertical-align: middle;}
.bnBox .control a + a{margin-left:.25rem;}
#bnPlay{display:none;}
.bnBox .sEl{margin:0 .75rem;}
#bnSlider{margin-left:5.5rem;}

/* fullpage nav */
#sideNav{position:fixed; right:1rem; top:50%; width:5.15rem; padding:0;}
/*#sideNav:before{content:""; position:fixed; right:5.5rem; top:2.25rem; width:1px; height:calc(100vh - 2.25rem); background:rgba(255,255,255,0.5); z-index:-1;}*/
#sideNav li{float:right; width:100%; margin:.35rem 0; border-radius:1rem; padding:0 .4rem; text-align:left; background:#fff;}
#sideNav li a{display:inline-block; line-height:1.6rem; color:#666; font-family: 'SCDream'; font-size:13px; letter-spacing: 1px; font-weight: 400;}
#sideNav li a:before{content:""; display:inline-block; width:.5rem; height:.5rem; border-radius: 50%; background:#c4c4c4; margin-right:10px;}
#sideNav li.active{ width:calc(100% + .65rem); padding-left:1rem;
    background:linear-gradient(to left, #017cc6 0%, #379b10 100%) !important;
    background:-webkit-linear-gradient(to left, #017cc6 0%, #379b10 100%) !important;
    background:-moz-linear-gradient(to left, #017cc6 0%, #379b10 100%) !important; box-shadow: 3px 3px 3px rgba(0,0,0,0.3);}
#sideNav li.active a{color:#fff;}
#sideNav li.active a:before{background:#053b5d;}
#sideNav, #sideNav li, #sideNav a{transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s;}
/** secondPage : fullpage nav **/
.fp-viewing-secondPage #sideNav li{background:#dedede;}
.fp-viewing-secondPage #sideNav:before{background:rgba(0,0,0,0.1);}

/* scroll nav */
#scrollNav{position: fixed; right:1.3rem; bottom:2rem; color:#fff; width:1.1rem; height:8rem; padding-top:2.25rem; text-align:center;}
#scrollNav::before{content:""; position:absolute; left:50%; top:5rem; width:1px; height:2rem; background:#fff;}
#scrollNav span{position:absolute; left:-1.05rem; top:0; font-weight: 600; font-size:.7rem; letter-spacing: 1px; transform: rotate(90deg); -webkit-transform: rotate(90deg);}
/** secondPage : scroll nav **/
.fp-viewing-secondPage #scrollNav{color:#ccc;}
.fp-viewing-secondPage #scrollNav:before{background:#ccc;}

@media screen and (max-width: 1645px){

    /* fullpage/scroll nav */
    #sideNav{right:-.5rem;}
    #sideNav:before,
    #scrollNav{display:none;}

}

@media screen and (max-width: 1560px){

    .section02:before{opacity: .5;}

    /* visual */
    .visual .slogan,
    .visual .control{left:1rem; margin-left:0;}

    /* scroll nav */
    #sideNav{right:-1rem;}
    #sideNav li a{font-size:12px; letter-spacing: 0;}
    #sideNav li a:before{margin-right:5px;}
    #sideNav li.active{width:calc(100% + .5rem); padding-left:.95rem;}

}

@media screen and (max-width: 1440px){

    /* fullpage nav */
    .fullpageNav{display:none;}
}

@media screen and (max-width: 1240px){

    .fp-table, .fp-tableCell{height:auto !important;}
    .section02,
    .section03{padding:1rem 0 3rem;}

    /* visual */
    .visual{height:45rem;}
    .visual .slogan{top:7rem;}
    .visual .slogan > p{font-size:2.75rem;}

    /* Notice */
    .notice{width:40%;}

    /* gallery */
    .gallery{width:28%; margin:0 2%;}

    /* 알림배너 */
    .bannerAlr{width:28%;}
}

@media screen and (max-width: 1024px){

    .section h3{margin:2rem auto;}
    .section01{height:33rem;}

    .control.ty01{margin-top:.75rem;}

    /* visual */
    .visual{height:33rem;}
    .visual .slogan > p{font-size:2.2rem;}
    .visual .slogan > span{font-size:1rem;}
    .visual .control{bottom:3rem;}

    /* Notice */
    .notice{width:100%; margin-bottom:3rem;}

    /* gallery */
    .gallery{width:49%; margin:0;}
    .gallery .sEl .cont span{padding-top:.6rem;}

    /* 알림배너 */
    .bannerAlr{width:49%; margin-left:2%;}
    .bannerAlr .slider a{margin-right:1px;}
    .bannerAlr .slider a img{ width:auto; max-width:100%; height:100%; top:auto; transform: none; -webkit-transform: none;}

    /* 바로가기01 */
    .m_link01 { width:100%;}

    /* 배너홍보존 */
    .bannerPR{width:100%; margin-left:0; margin-top:2rem;}
    .bannerPR .slider{ width:calc(100% + 10px); margin-left:-5px; margin-top:0; }
    .bannerPR .slider a{margin:0 5px; height:auto;}
    .bannerPR .slider a img{ width:auto; max-width:100%; height:100%; top:auto; transform: none; -webkit-transform: none;}
}

@media screen and (max-width: 960px){

    /* visual */
    .visual .slogan > p{font-size:2.2rem;}
}

@media screen and (max-width: 768px){

    /* visual */
    .visual{height:25rem;}
    .visual .slogan{width:80%;}

    /* Notice */
    .notice h5{font-size:1rem;}
    .notice .listBox dd p{line-height:1.4rem; height:2.8rem;}

    /* 바로가기02 */
    .m_link02 li em{font-size:1rem;}
}

@media screen and (max-width: 680px){

    /* gallery */
    .gallery .sEl .img{height:12rem;}
    .gallery .sEl .cont{padding:1rem;}

    /* 알림배너 */
    .bannerAlr .slider a{height:17.5rem;}

    /* 바로가기01 */
    .m_link01 li{ width:33.33%;}
}

@media screen and (max-width: 560px){

    /* visual */
    .visual .slogan > p{font-size:2rem;}
    .visual .slogan > span{font-size:.9rem;}
    .visual .control{padding:.5rem 1rem; bottom:1.5rem;}

    /* 하단배너 */
    .bnBox > a{font-size:1.1rem;}
    .bnBox .control{width:4rem; font-size:1.15rem;}
    .bnBox .control a + a{margin-left:0;}
    #bnSlider{margin-left:4.5rem;}
    .bnWrap .slider .sEl img{width:auto; height:2rem;}
    /* .bnWrap .slider .sEl img{width:100%; height:auto;} */
}

@media screen and (max-width: 460px){

    /* notice */
    .notice{margin-bottom:2rem;}

    /* gallery */
    .gallery {width:100%; margin-bottom:2rem;}
    .gallery .slider {margin-top:.5rem;}
    .gallery .sEl .img{height:10rem;}

    /* 알림배너 */
    .bannerAlr {width:100%;}
    .bannerAlr .slider {margin-top:.5rem;}
    .bannerAlr .slider a{height:auto;}
    .bannerAlr .slider a img{width:100%; height:auto;}

    /* 배너홍보존 */
    .bannerPR .slider{ width:100%; margin-left:0; }
    .bannerPR .slider a{margin:0;}
    .bannerPR .slider a img{width:100%; height:auto;}
}

@media screen and (max-width: 360px){

    /* visual */
    .visual{height:23rem;}
    .visual .slogan > p{font-size:1.75rem;}
    .visual .slogan > span{padding-top:.75rem;}

    /* notice */
    .notice{padding-left:0;}
    .notice h4{position:relative; left:auto; top:auto; margin-bottom:.5rem;}
    .notice .listBox{top:5rem;}

    /* 바로가기01 */
    .m_link01 li{ width:50%;}
}