@import url("/common/css/basic.css");  
@import url("/common/css/con_com.css");  

/*-----------------------------------------------------------
Author : YJ, Kim
Creative date :2022. 02. 25
-----------------------------------------------------------*/

*{font-family: 'SCDream'; letter-spacing: -.5px;}

#wrap{position:relative; overflow:hidden;}

/* header */
#header{position:relative;text-align:center;height: 14rem;word-break: keep-all;}
#header:before{content:""; position:absolute; left:0; top:0; width:100%; height:calc(100% + 8rem); background:#deecff url('../images/bg_intro.png') center center no-repeat;background-size: cover ;z-index:-1;}
#header h1{padding:2rem 0 2.5rem;}
#header h1 img {max-height:100px}
#header h2{font-size:1.6rem;font-weight:900;color:#363738;padding:0 .5rem;}
#header h2 > span{ color:#0746b9; }
#header h2 > em{ color:#3c4d6d; }
#header .titWrap p{color:#3c4d6d; margin-top:.5rem;}
#header .titWrap p span{color:#008cd0;}

/* contents */
#contents .container{width:100%; max-width:70rem; margin:0 auto; padding-left: 1rem; padding-right: 1rem; padding-bottom:4rem; overflow:hidden;}

/* 바로가기 */
.linkWrap{ width:100%; padding:.5rem 0; overflow:hidden;}
.linkWrap ul{margin: 0 -1rem;}
.linkWrap li{position: relative;float:left;padding: 0 1rem;}
.linkWrap li a{position:relative;display:block;border-radius:2rem;overflow:hidden;background:#fff;margin:0 auto;box-shadow: 0 0 0.75rem rgba(0,0,0,0.15);-webkit-box-shadow:0 0 0.75rem rgba(0,0,0,0.15);}
.linkWrap li a:before{content:""; position:absolute; left:0; top:0; width:100%; height:100%; border-radius:2rem; border:2px solid transparent; z-index:1;}
.linkWrap li.link01{width:100%;padding-top: 50px;}
.linkWrap li.link02{width: 49.5%;}
.linkWrap li.link03{width: 49.5%;}
.linkWrap li.link01 a{height: 200px;}
.linkWrap li.link02 a{height:300px;}
.linkWrap li.link03 a{height:300px;}
.linkWrap li.link01 a:before{border-color: #ff8cb9;}
.linkWrap li.link02 a:before{border-color: #3889ff;}
.linkWrap li.link03 a:before{border-color: #ff8b1a;}
.linkWrap li a:after{content:""; position:absolute; left:0; bottom:-2rem; width:100%; height:4rem; opacity: 0;}
.linkWrap li.link01 a:after{background:url('../images/bg_link01_1.png');}
.linkWrap li.link02 a:after{background:url('../images/bg_link01_2.png');}
.linkWrap li.link03 a:after{background:url('../images/bg_link01_3.png');}
.linkWrap li .img{height:275px; overflow:hidden;}
.linkWrap li.link01 .img{background: #ffdbe9;}
.linkWrap li.link02 .img{background: #b2d1ff;}
.linkWrap li.link03 .img{background: #f9e5d0;}
.linkWrap li .img img{position:relative; left:50%; width:auto; height:100%; transform: translateX(-50%); -webkit-transform: translateX(-50%); -ms-transform: translateX(-50%);}
.linkWrap li .cont{position:relative; padding:1.5rem .5rem; text-align:center; z-index:1;} 
.linkWrap li .cont p{font-size: 1.5rem;color:#000;line-height: 6.5rem;font-weight: 600;}
.linkWrap li .cont .text1{display:block; line-height:2.5rem; text-align: left; margin-left: 20px;}
.linkWrap li .cont .text2{display:none;}
.linkWrap li .cont p strong{font-weight: 700;}
.linkWrap li .cont span{min-width: 6rem;display:inline-block;border-radius:2rem;line-height:2.25rem;padding: 10px 3rem;color:#fff;background:#f55b97;font-size: 20px;}
.linkWrap li.link02 .cont span{background:#008cd0;}
.linkWrap li.link03 .cont span{background:#ff641a;}
/* 바로가기:active */
.linkWrap li :before, .linkWrap li :after{transition: all .3s; -webkit-transition: all .3s; -ms-transition: all .3s;}
.linkWrap li a:hover:after, 
.linkWrap li a:focus:after{opacity: 1; bottom:0;}

/* 연락처 */
.callInfo{width:100%; margin-top:4rem; border-top:2px solid #2c7ce0; font-weight: 600; border-bottom:2px solid #b4cded; overflow:hidden; word-break: keep-all;}
.callInfo .titWrap{position:relative; width:100%; min-height:5rem; line-height:2rem; padding:1.5rem 1.5rem 1.5rem 6.5rem; background:#f8fbff; border-bottom:1px solid #eeee;}
.callInfo .titWrap:before{content:""; position:absolute; left:1.5rem; top:50%; width:4rem; height:4rem; margin-top:-2rem; border-radius:50%; background:#e8f1ff url('../images/ico_call.png') no-repeat center; }
.callInfo .titWrap a{position:relative; padding-right: 3.5rem; display:block; transition: all .2s; -webkit-transition: all .2s; -ms-transition: all .2s;}
.callInfo .titWrap a:before{content:"\e943"; position:absolute; right:1rem; top:50%; width:2rem; height:2rem; line-height:2rem; margin-top:-1rem; text-align:center; color:#fff; font-family: 'xeicon'; border-radius:50%; background:#a6caff; }
.callInfo .titWrap a > *{display:inline-block; vertical-align: middle;}
.callInfo .titWrap h3{position:relative; color:#0746b9; font-weight: 700; font-size:1.25rem; margin-right:1rem; padding-right:8rem;}
.callInfo .titWrap h3:before{content:""; position:absolute; right:0; top:50%; width:calc(100% - 8rem); height:1px; background:#a6caff;}
.callInfo .titWrap h3:after{content:""; position:absolute; right:0; top:50%; width:.5rem; height:.5rem; margin-top:-.25rem; border-radius:50%; background:#a6caff;}
.callInfo .titWrap p{font-size:1rem; color:#666; }
.callInfo dl{width:22.5%; float:left; margin:1.5rem 0; padding:0 .5rem 0 1.5rem;}
.callInfo dl + dl{border-left:1px solid #eee;}
.callInfo dt{position:relative; padding:1rem 0; font-size:1rem; color:#0746b9;}
.callInfo dt:before{content:""; position:absolute; left:0; top:0; width:4rem; height:1px; background:#0746b9; opacity: 0.5;}
.callInfo dd{ font-size:.75rem;}
.callInfo .listCont{margin:1.5rem 0; width:55%; float:left;}
.callInfo .listCont .mobile {display:none;}
.callInfo .listCont .lst::after{display: block; content: ''; clear: both;}
.callInfo .listCont .lst + .lst{margin-top:1rem;}
.callInfo .listCont .lst li{position:relative; font-size:.85rem; color:#111;}
.callInfo .listCont .lst li:before{content:""; width:.4rem; height:.4rem; display: inline-block; border-radius:50%; background:#a6caff; vertical-align: middle; margin-right: 0.3rem; transform: translateY(-1px); -webkit-transform: translateY(-1px);}
.callInfo .listCont .lst.w30 > li{width:25%; float:left;}
.callInfo .listCont .info{margin-top:.5rem; font-size:.75rem; font-weight: 400; }
.callInfo .listCont .info p{ display:inline-block; margin-right:1rem; padding:.25rem 0; }
.callInfo .listCont .info p strong{font-weight: 600; color:#008cd0; padding-right:3px;}
/* 연락처:active */
.callInfo .titWrap a.active:before{transform: rotate(180deg); -webkit-transform: rotate(180deg); -ms-transform: rotate(180deg);}

/* 레이어팝업 */
#lyrPopup{ display:none; position:fixed; left:0; top:0; width:100%; height:100vh; background:rgba(21, 24, 60, 0.95) url('../images/bg_popup.png') no-repeat top center; z-index:99; overflow-y: auto; word-break: keep-all;}
#lyrPopup a{transition: all .2s; -webkit-transition: all .2s; -ms-transition: all .2s;}
#lyrPopup .popWrap{position:relative; margin:0 auto; padding:4rem 0 2rem; color:#fff; max-width:62rem; background:url('../images/img_poupbg.png') no-repeat right 3rem; overflow:hidden;}
#lyrPopup h4{width:27rem; text-align:center; font-size:2.1rem; line-height:1.3; padding-top:4rem;}
#lyrPopup h4 em{font-weight: 700; display:inline-block;}
#lyrPopup h4 em.col{color:#a6ffdc;}
#lyrPopup h4 span{font-weight: 600; color:#cee2ff; display:inline-block;}
#lyrPopup .list01{margin:6rem 0 4rem; overflow:hidden;}
#lyrPopup .list01 li{width:25%; float:left; font-weight: 600;}
#lyrPopup .list01 li p{position:relative; display:inline-block; vertical-align: middle; line-height:0; padding:.5rem; margin-right:.5rem; }
#lyrPopup .list01 li p:before{content:""; position:absolute; left:0; top:0; width:100%; height: 100%; border-radius:50%; border:1px dashed rgba(255,255,255,0.5);}
#lyrPopup .list01 li span{display:inline-block; vertical-align: middle; }
#lyrPopup .list02{overflow:hidden; padding:0 1rem;}
#lyrPopup .list02 li{width:30%; float:left; text-align:center; padding:2rem 1rem; font-weight: 600; border-radius: 1rem; background:#fff; color:#111;;}
#lyrPopup .list02 li + li{margin-left:5%;}
#lyrPopup .list02 li strong{display:block; font-size:1.25rem; line-height:1.75rem; height:3.5rem; font-weight: 700;}
#lyrPopup .list02 li p{max-width:11rem; height:5rem; margin:0 auto; padding-top:2.7rem;}
#lyrPopup .list02 li a{display:block; border-radius:2rem; font-size:.9rem; font-weight: 700; color:#fff; padding:.5rem;}
#lyrPopup .list02 li a + a{margin-top:0.5rem;}
#lyrPopup .list02 li.lst1 p{padding-top:0;}
#lyrPopup .list02 li.lst1{background:#fff url('../images/ico_link03_1.png') no-repeat 95% 90%;}
#lyrPopup .list02 li.lst2{background:#fff url('../images/ico_link03_2.png') no-repeat 95% 90%;}
#lyrPopup .list02 li.lst3{background:#fff url('../images/ico_link03_3.png') no-repeat 95% 90%;}
#lyrPopup .list02 li.lst1 a{background:#ffccee; color:#333;}
#lyrPopup .list02 li.lst2 a{background:#16b5ea;}
#lyrPopup .list02 li.lst3 a{background:#ffc000;}
#lyrPopupClose{position:absolute; right:2rem; top:2rem; width:4rem; height:4rem; line-height:4rem; text-align:center; border-radius:50%; color:#fff; background:rgba(255,255,255,0.3); font-size:1.5rem;}
/* 레이어팝업 : active */
#lyrPopup .list02 li.lst1 a:hover{background:#e76ca5; color:#fff;}
#lyrPopup .list02 li.lst2 a:hover{background:#1b6fab;}
#lyrPopup .list02 li.lst3 a:hover{background:#f38b20;}
#lyrPopupClose:hover{background:rgba(255,255,255,0.5);}


@media (max-width:1280px) {

    /* header */
    #header:before{left:-25%; width:150%; }

    /* 바로가기 */
    /* .linkWrap{ padding:.5rem 2%;}
    .linkWrap li{width:calc(50% - 2.5%); }
    .linkWrap li + li{margin-left:5%;} */
    .linkWrap li .img{height: 12rem;}
    .linkWrap li.link03::before{width: 12rem; height: 9rem;}

    /* 레이어팝업 */
    #lyrPopup .popWrap{padding:4rem 1rem 2rem; background-size:auto 12.5rem; background-position:95% 3rem;}
    #lyrPopup h4{text-align:left; margin-top:1.5rem;}
    #lyrPopup .list01 li p img{width:5rem; height:5rem;}
    #lyrPopupClose{width:3rem; height:3rem; line-height:3rem; font-size:1.25rem;}
}

@media (max-width:1200px) {

    /* 레이어팝업 */
    #lyrPopup h4{padding-top:0;}
    #lyrPopup .list01{margin:4rem 0 2rem;}
    #lyrPopup .list01 li{text-align:center;}
    #lyrPopup .list01 li span{display:block; margin-top:1rem; font-size:.9rem;}
    #lyrPopup .list02 li{padding:1.25rem .5rem;}
    #lyrPopup .list02 li strong{font-size:1.1rem;}
}

@media (max-width:1024px) {
    #header{height: 14rem;}

    /* 바로가기 */
    /* .linkWrap li{width: 100%; } */
    .linkWrap ul{margin: 0 -0.5rem;}
    .linkWrap li{padding: 0 0.5rem;}
    .linkWrap li a{max-width: 100%;}
    .linkWrap li .img{height: 10rem;}

    /* 연락처 */
    .callInfo .titWrap h3{padding-right:5rem;}
    .callInfo dl{width:50%; }
    .callInfo dt{padding:.75rem 0 .5rem;}
    .callInfo dt br{display:none;}
    .callInfo .listCont{width:100%; margin:0 0 1.5rem; padding:0 1.5rem;}

    /* 레이어팝업 */
    #lyrPopup .list02{padding:0;}
    #lyrPopup .list02 li{width:32%;}
    #lyrPopup .list02 li + li{margin-left:1.5%;}
}
@media (max-width:980px){
    .linkWrap li.link01 {width: 100%; margin: 0.5rem 0;}
    .linkWrap li.link02 {width: 100%; margin: 0.5rem 0;}
    .linkWrap li.link03 {width: 100%; margin: 0.5rem 0;}
    .linkWrap li.link01{width:100%;padding-top: 0px;}
    .linkWrap li .cont .text1{font-size:1.2rem;}
}

@media (max-width:860px) {
    .callInfo{margin-top: 3rem;}
}

@media (max-width:768px) {

    /* 연락처 */
    .callInfo .listCont .lst.w30 > li{width:50%; margin-bottom:1rem;}

    /* 레이어팝업 */
    #lyrPopup .popWrap{padding-top:2rem; background-size:auto 10rem; padding-bottom: 5rem;}
    #lyrPopup h4{font-size:1.9rem;}
    #lyrPopupClose{right:1rem; top:1rem;}
    
    .callInfo .listCont .mobile {display:block;}
    .callInfo .listCont .lst.w30 > li.pcmode {display:none;}
    .linkWrap li .cont .text1{line-height: 2rem; font-size: 1rem;}
}

@media (max-width:640px) {

    /* 바로가기 */
    /* .linkWrap li .img{height:10rem;} */
    .linkWrap li a{height: 9rem;}
    .linkWrap li .img{height: 9rem;}

    /* 연락처 */
    .callInfo .titWrap{padding:.75rem .5rem .75rem 5.5rem; line-height:1.5; }
    .callInfo .titWrap:before{ left:1rem; width:3.5rem; height:3.5rem; margin-top:-1.75rem; background-size:2.5rem auto;}
    .callInfo .titWrap > *{display:block;}
    .callInfo .titWrap h3{font-size:1.2rem;}
    .callInfo .titWrap p{font-size:.9rem;}
    .callInfo dl{padding-left:1rem;}
    .callInfo .listCont{padding:0 1rem;}

    /* 레이어팝업 */    
    #lyrPopup h4{text-align:center; width:100%;}
    #lyrPopup .popWrap{background:none;}
    #lyrPopup .list01{margin:2rem 0 1rem;}
    #lyrPopup .list01 li{width:50%; margin-bottom:2rem;}
    #lyrPopup .list02 li{width:100%; padding:1rem .5rem 0.5rem;  background-size:5rem auto !important;}
    #lyrPopup .list02 li br{display:none;}
    #lyrPopup .list02 li + li{margin-left:0; margin-top:.5rem;}
    #lyrPopup .list02 li strong{height:auto; margin-bottom:.25rem;}
    #lyrPopup .list02 li a{display:inline-block; margin:.5rem; min-width:10rem;}
    #lyrPopup .list02 li a + a{margin-top:0;}
    #lyrPopup .list02 li p{height:auto; padding-top:0; max-width:100%;}
}

@media (max-width:560px) {
    #header{height:auto; padding:0 0 1rem;}
    #header:before{width:180%;}
    #header h1{padding:1.5rem 0 1rem;}
    #header h1 img{width:auto; height:2.25rem;}
    #header h2{font-size:1.3rem;}

    /* .linkWrap li{width:100%;}
    .linkWrap li + li{margin-left:0; margin-top:1rem;}
    .linkWrap li .cont{padding:1rem 0.5rem;}
    .linkWrap li .img{height:auto;}
    .linkWrap li .img img{width:100%; height:auto; left:auto; transform: none; -webkit-transform: none; -ms-transform: none;} */
    .linkWrap li .img{width: 100%; height: 9rem;}
    .linkWrap li .cont{width: 100%; transform: none; -webkit-transform: none; padding: 1rem 0.75rem;}
    .linkWrap li a{height: auto;}
    .linkWrap li.link03::before{left: 50%; transform: translateX(-50%); -webkit-transform: translateX(-50%);}

    
    /* 연락처 */
    .callInfo{margin-top:2.5rem;}
    .callInfo .titWrap h3{font-size:1.1rem;}
    .callInfo .titWrap p{font-size:.85rem;}
    .callInfo dl{width:100%; margin:1rem 0 0;}
    .callInfo dl + dl{border-left:0; margin-bottom:1rem;}
    .callInfo .listCont .lst.w30 > li{width:100%;}

    /* 레이어팝업 */    
    #lyrPopup h4{font-size:1.6rem;}
    #lyrPopupClose{width:2.5rem; height:2.5rem; line-height:2.5rem; top:.5rem;}
}

@media (max-width:480px) {
    #header h1{padding-bottom: 0.5rem;}
    #header h1 img{width:auto; height:2rem;}
    #header h2 em{display:block;}
    #header .titWrap p span{display:block;}

    .linkWrap li .img{height: 8rem;}
    .linkWrap li .cont p{font-size: 0.95rem;}

    /* 연락처 */
    .callInfo .titWrap h3{padding-right:2rem; margin-right:0;}
    .callInfo dl{width:100%; margin:1rem 0 0;}
    .callInfo dl + dl{border-left:0; margin-bottom:1rem;}
    .callInfo .listCont .lst.w30 > li{width:100%;}
    .callInfo .titWrap h3:after{display: none;}
    .callInfo .titWrap h3:before{display: none;}
}

@media (max-width:380px) {
	.linkWrap li .cont .text1 {font-size: 15px;}
}