@import url("basic.css");  
body {margin : 0; position: relative;-webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
#wrap { position:relative; width: 100%; height:100%; }
.bg-video-wrap {
    position: fixed;
    overflow: hidden;
    width: 100%;
    height: 100vh;
    background: url(https://designsupply-web.com/samplecontent/vender/codepen/20181014.png) no-repeat center center/cover;
  }
  video {
    min-width: 100%;
    min-height: 100vh;
    z-index: 1;
  }
  .overlay {
    width: 100%;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
    background-image: linear-gradient(45deg, rgba(0,0,0,.3) 50%, rgba(0,0,0,.7) 50%);
    background-size: 3px 3px;
    z-index: 2;
  }


.header_wrap {width:100%; max-width: 1280px; margin: 0 auto; }
.content { position:relative; width: 100%; max-width:1280px; margin:0 auto; text-align:center; font-weight:400; }
.content:after { content:""; display:block; clear:both; }

.bg_wrap { position: absolute; top: 0; left: 0; width: 100%; height: 100%; min-height:100vh; overflow: hidden;} /* 220722 수정 */
.bg_wrap video { position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: -10; pointer-events: none; object-fit: cover;}
.bg_wrap::before {content: ''; display: block; width: 100%; height: 100%; background:rgba(0,0,0,0.3);}

.ipsi_wrap {width: 55%; float:left; padding-right: 15px; box-sizing: border-box; border-right: 1px solid rgba(255,255,255,0.4);}
.ipsi_wrap h3 { padding-bottom:10px; text-align: left; font-size: 28px; font-weight: 700; color: #fff; }
.koreapro_wrap {width: 44%; float:right; overflow: hidden;}
.koreapro_wrap h3 { padding-bottom:10px; text-align: left; font-size: 28px; font-weight: 700; color: #fff; }

/* top */
.top { font-size:0; margin-bottom:30px; }
.top h1 {position: relative; text-align: center; padding: 35px 0 30px; border-bottom: 1px solid rgba(255,255,255,0.5);}
.top .sns_list { position:absolute; top: 50px; right: 40px; display: flex;} 
.top .sns_list li a { position:relative; display: inline-block; width:2rem; height:2rem; text-align:center; margin-left:0.3rem; -webkit-transition:transform 0.3s; transition:transform 0.3s; }
.top .sns_list li a i { display:inline-block; width:100%; height:100%; color:#fff; font-size:1.3rem; line-height:2rem; border-radius:50%; }
.top .sns_list li a:hover,
.top .sns_list li a:focus { -webkit-transform:translateY(-0.3rem); transform:translateY(-0.3rem);}

/* footer */
footer { position:relative; left:0; bottom:0; width:100%; text-align:center; color:#fff; font-size:0.9rem; padding:50px 1rem 30px; word-break:keep-all; } /* 220722 수정 */
footer .service { font-family: 'NotoSans'; color: #fff; font-weight: 800px;}

/* linkBox */
.linkBox { width:100%; border: 3px solid #fff; border-radius: 10px; padding: 25px 20px; box-sizing: border-box; word-break: keep-all;} 
.linkBox .txtBox { display:block; text-align:left; color:#fff; line-height:1.2; }
.linkBox .txtBox p { font-size:1.1rem; font-family: 'NotoSans'; font-weight: 400;  }
.linkBox .txtBox strong { position:relative; display:inline-block; font-size:1.7rem; font-weight:700; margin-top: 10px; background: #da005b; font-family: S-CoreDream-5Medium; letter-spacing: 4px;}
.linkBox .txtBox strong i { position:absolute; right:-2rem; top:0.2rem; display:inline-block; width:1.6rem; height:1.6rem; background:rgba(255,255,255,0.2) ; border-radius:50%; text-align:center; line-height:1.6rem; font-size:0.9rem; -webkit-transition:background-color 0.3s; transition:background-color 0.3s; }
.linkBox .txtBox dl { margin-top:30px;}
.linkBox .txtBox dl dt { display:block; font-size: 25px;font-weight: 700;padding: 0.3rem 0 0.3rem 0.3rem; background:#fff; color:#da005b;-webkit-transition:background-color 0.3s; transition:background-color 0.3s; margin-top: -17px;}
.linkBox .txtBox dl dd { padding:10px 0 0 15px; font-size:17px; }  
.linkBox .txtBox do { display: inline-flex;}
.linkBox .txtBox do a { padding:10px 0 0 15px; font-size:17px; }  
.linkBox .txtBox1 { display:inline-block; margin:10px 10px 0 0; color:#fff; font-size: 1rem;}


/** linkBox :active **/
.linkBox ul li a:hover,
.linkBox ul li a:focus { background:#da005b; }
.linkBox .txtBox:hover strong i,
.linkBox .txtBox:focus strong i{ background:#da005b; }
.linkBox .txtBox:hover dl dt,
.linkBox .txtBox:focus dl dt { background:#fff; color:#da005b; }

/* linkBox2 */
.linkBox2 { width:100%; margin-top: 30px; }
.linkBox2 ul { width: 100%; height: auto; overflow: hidden; border-radius: 10px; font-family: NanumSquareRound;}
.linkBox2 ul li { width: 33.3%; float: left;  text-align: center; }
.linkBox2 ul li a { display:block; width:100%; color:#fff; font-size:1rem; padding: 20px 0; background:rgba(218,0,91,0.85); -webkit-transition:background-color 0.3s; transition:background-color 0.3s;}
.linkBox2 ul li:nth-child(1) a {border-right: 1px dashed rgba(255,255,255,0.3); border-bottom: 1px dashed rgba(255,255,255,0.3); box-sizing: border-box;} 
.linkBox2 ul li:nth-child(2) a {border-right: 1px dashed rgba(255,255,255,0.3); border-bottom: 1px dashed rgba(255,255,255,0.3); box-sizing: border-box; }
.linkBox2 ul li:nth-child(3) a {border-right: 1px dashed rgba(255,255,255,0.3); border-bottom: 1px dashed rgba(255,255,255,0.3); box-sizing: border-box; }
.linkBox2 ul li:nth-child(4) a {border-right: 1px dashed rgba(255,255,255,0.3); border-bottom: 1px dashed rgba(255,255,255,0.3); box-sizing: border-box;}
.linkBox2 ul li:nth-child(5) a {border-right: 1px dashed rgba(255,255,255,0.3); border-bottom: 1px dashed rgba(255,255,255,0.3); box-sizing: border-box;}
.linkBox2 ul li:nth-child(6) a {border-right: 1px dashed rgba(255,255,255,0.3); border-bottom: 1px dashed rgba(255,255,255,0.3); box-sizing: border-box; }

.linkBox2 ul li a img { -webkit-transition: 0.4s; transition: 0.4s;}
.linkBox2 ul li a span { font-size:20px; text-align: center; }
.linkBox2 ul li:nth-child(1) img {padding-top: 15px;}
.linkBox2 ul li:nth-child(2) img {padding-top: 15px;}
.linkBox2 ul li:nth-child(3) img {padding-top: 15px;}
.linkBox2 ul li:nth-child(4) img {padding: 15px 0 4px 0;}
.linkBox2 ul li:nth-child(5) img {padding-top: 15px;}
.linkBox2 ul li:nth-child(6) img {padding-top: 15px;}
/** linkBox :active **/
.linkBox2 ul li a:hover,
.linkBox2 ul li a:focus { background:rgba(218,0,91,1); }
.linkBox2 ul li a:hover img { transform:translateY(-10px); -ms-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -webkit-transform:rotateY(180deg); }

/* pageBox */
.pageBox { width:100%; margin:30px auto 0; max-width: 1280px;} 
.pageBox > ul { position:relative; overflow: hidden; font-family: S-CoreDream-5Medium;} 
.pageBox > ul li { width: 23.5%; float: left; margin-right: 2%;} 
.pageBox > ul li:last-child { margin-right: 0;} 
.pageBox > ul li a { position:relative; width:100%; height:auto; color:#fff; padding:0.9rem 3rem 0.9rem 3rem; font-size: 1.1rem; text-align: center; font-weight: 500; display:block; -webkit-transition:0.3s; transition:0.3s; } 
.pageBox > ul li:nth-child(1) { background:#da005b; }
.pageBox > ul li:nth-child(2) { background:#4382e0; }
.pageBox > ul li:nth-child(3) { background:#005795; }
.pageBox > ul li:nth-child(4) { background:#013c66; }
.pageBox > ul li a:hover,
.pageBox > ul li a:focus { background:#fff; color:#000;} 


/* linkList */
.linkList { width:100%; margin-top:25px;}
.linkList ul { width: 100%; overflow: hidden; border-radius: 10px;}
.linkList ul li { width:33.33%; height:265px; float: left; font-family: NanumSquareRound;}  
.linkList ul li a { position:relative; display:block; width:100%; height: 100%; border-right: 1px dashed rgba(255,255,255,0.3); color:#fff; text-align:center; font-size:1rem; background:rgba(0,98,172,0.85); -webkit-transition:background-color 0.3s; transition:background-color 0.3s; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.linkList ul li:last-child a { border: none; }
.linkList ul li a:hover,
.linkList ul li a:focus {background:rgba(0,98,172,1) !important; }
.linkList ul li a:hover span,
.linkList ul li a:focus span {background:#fff !important; color: #0062ac;}
.linkList ul li a div { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); -webkit-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%);}
.linkList ul li a strong { display: block; font-size: 20px; }
.linkList ul li a span { display: block; width: 130px; font-size: 15px; padding: 6px 0; border: 1px solid #fff; margin: 1rem auto; }

/* popup */
.popup { position:relative; width:100%; }
.popup .slider { display:inline-block; vertical-align:top; overflow:hidden; width: 844px;}
.popup .slider .slideEl { display:inline-block; }
.popup .slider .slideEl a { display:block; }
.popup .slider .slideEl a img { display:block; margin:0 auto; }
.popup .control { position:absolute; right:0; top:-50px; height:2.3rem; line-height:2.3rem; color:#fff; font-size:0; padding:0 1rem;  }
.popup .control .count { display:inline-block; vertical-align:middle; font-size:0.8rem; margin-right:0.5rem;}
.popup .control .count .current { position:relative; color:#da005b; padding-right:1.2rem; font-weight:600; margin-right:0.5rem; }
.popup .control .count .current:before { content:""; position:absolute; right:0; top:50%; width:0.8rem; height:1px; background:#c3c3c3; }
.popup .control a {font-size:1rem; display:inline-block; vertical-align:middle;padding-left:0.2rem;}
.popup .control a.play { display:none;}

/* style2 : 바로가기 없는경우 */
.stlye2 .pageBox { width:calc(100% - 18rem); float:left; }
.stlye2 .linkList { width:17rem; float:right; background:rgba(0,22,37,0.5); padding:1rem; margin:0; }
.stlye2 .linkList ul { display:block; }
.stlye2 .linkList ul li { width:100%; height:2.8rem;}
.stlye2 .linkList ul li + li { margin-top:0.55rem; }
.stlye2 .linkList ul li a { line-height:2.8rem; background:rgba(255,255,255,0.8); }


@media (max-width:1440px){
    
    #wrap { display:block; height:auto; }
    .content { width:95%; } 
    .header_wrap { width:95%; } 

    /* pageBox */
    .pageBox { width:95%; } 

}
@media (max-width:1280px){
    /* linkBox */
    .linkBox { width:100%; margin-bottom:1.5rem; }
    .linkBox .txtBox p { display:inline-block; vertical-align:bottom; margin-right:0.5rem;} 
    .linkBox .txtBox dl dt { font-size: 19px;}

    /* linkList */
    .linkList { width:100%; }

    /* style2 : 바로가기 없는경우 */
    .stlye2 .pageBox { width:100%; }
    .stlye2 .linkList { width:100%; margin:0.6rem 0 0; background:none; padding:0;}
    .stlye2 .linkList ul { display:flex;}
    .stlye2 .linkList ul li { width:32%; }
    .stlye2 .linkList ul li + li { margin:0; }

}


@media (max-width:1200px){

    .bg_wrap { height:100%;} /* 220722 수정 */
    
    .ipsi_wrap {width: 100%; float: none; padding-right: 0; border-right: none;}
    .koreapro_wrap {width: 100%; margin-top: 30px; float: none;}

    /* linkBox */
    .linkBox .txtBox dl dt { font-size: 20px;}

    /* linkBox2 */
    .linkBox2 { width:100%; margin-top: 30px; }
    .linkBox2 ul { width: 100%; height: 149px; overflow: hidden; border-radius: 10px; }
    .linkBox2 ul li { width: 25%; }
    .linkBox2 ul li a { display:block; width:100%; height:150px;}
    .linkBox2 ul li:nth-child(1) a {border-bottom: none;}
    .linkBox2 ul li:nth-child(2) a {border-bottom: none; border-right: 1px dashed rgba(255,255,255,0.3);}

    /* popup */
    .popup { margin-top: 20px; }
    .popup .slider { width: 850px;}
    .popup .control { top:-75px; }

}

@media (max-width:940px){ 

    /* top */
    .top h1 { text-align: left; }
    .top .sns_list { right: 20px;} 

    /* pageBox */
    .pageBox > ul li { width: 100%; margin-top: 15px; float: none;} 
    .pageBox > ul li:first-child {margin-top: 0;} 
    .pageBox > ul li a {width:100%; height:auto; color:#fff; padding:0.9rem 3rem 0.9rem 1.5rem; font-size: 1rem;} 
    .pageBox > ul li a { position:relative; display:block; -webkit-transition:0.3s; transition:0.3s; }
    .pageBox > ul li a:hover,
    .pageBox > ul li a:focus { background:#fff; color:#000;} 

    /* popup */
    .popup .slider { width: 560px;}

}


@media (max-width:740px){ 
    /* top */
    .top .slogan img{ height:2rem; } 

    /* pageBox */
    .pageBox { display:block; }
    .pageBox > div { width:100%; }
    .pageBox > div:before { bottom:-120%; height:300%; }
    .pageBox > div + div { margin-top:0.5rem; }

    /* linkList */
    .linkList ul { display:block; }
    .linkList ul li { width:100%; height: 200px;}
    .linkList ul li + li { margin-top:0.5rem;}
    .linkList ul li a { border: none;}
    
    /* style2 : 바로가기 없는경우 */ 
    .stlye2 .linkList ul { display:block;}
    .stlye2 .linkList ul li { width:100%; }
    .stlye2 .linkList ul li + li { margin-top:0.5rem;}
}


@media (max-width:640px){  
    /* top */
    .top h1 img { width:50% }
    /* popup */
    .popup .slider { width: 280px;}

} 

@media (max-width:540px){  
    .top .sns_list { justify-content:center; }
    .top .sns_list:before {width:calc(50% - 5rem);; } 
    .top .sns_list:after {content:""; position:absolute; right:0; top:50%; width:calc(50% - 5rem); height:4px; border-top:1px dotted #fff; border-bottom:1px dotted #fff;}

    /* linkBox */ 
    .linkBox .txtBox p,
    .linkBox .txtBox strong { font-size:1.5rem; }
    .linkBox .txtBox strong { padding-right:2rem; }
    .linkBox .txtBox strong i { width:1.5rem; height:1.5rem; line-height:1.5rem; right: 0;}
    .linkBox .txtBox dl { margin-top:1rem; }
    .linkBox .txtBox dl dt { font-size:1.1rem; }

    /* linkBox2 */
    .linkBox2 ul {  height: auto; }
    .linkBox2 ul li { width: 50%; }
    .linkBox2 ul li a { display:block; width:100%;}
    .linkBox2 ul li:nth-child(1) a {border-bottom: 1px dashed rgba(255,255,255,0.3);}
    .linkBox2 ul li:nth-child(2) a {border-bottom: 1px dashed rgba(255,255,255,0.3);}

    /* popup */
    .popup_zone{display:none;}
    .popup ul li { width:100%; }
    .popup ul li:nth-child(2) { margin-top:0.5rem; }
        /* top */
        .top h1 img { width:50% }
} 

@media (max-width:420px){ 
    /* top */
    .top h1 img { width:50% }

    .popup_zone{display:none;}
}

@media (max-width:375px){ 
    /* top */
    .top h1 img { width:50% }
}


@media (max-width:320px){ 
    /* top */
    .top h1 {position: relative; text-align: center; padding: 30px 0 70px; }
    .top h1 img { width:auto; }
    .top .sns_list { top: 110px; left: 50%; transform: translateX(-50%);} 
    .top .sns_list li a { margin-left:1rem;}
    .top .sns_list li:first-child a { margin-left:0;}

    /* popup */
    .popup { margin-top: 30px; }
    .popup img { width:100%; }
    .popup .control { top:-40px; }

    /* linkBox */ 
    .linkBox .txtBox strong i { right: -34px;}
    .linkBox .txtBox strong { padding-right:0.1rem; }

}

@media (max-width:290px){ 
    /* top */
    .top h1 img { width:50%; }
    .top .sns_list { width:50%;} 
    .top .sns_list li a { margin-left:1rem;}
    .top .sns_list li:first-child a { margin-left:0;}
}