@import url("basic.css");  

#wrap { position:relative; display:flex; align-items:center; height:100vh; min-height:1050px; background:url('../images/bg1.png') no-repeat center / cover; }

.content { position:relative; width:1400px; margin:-7rem auto 0; text-align:center; font-weight:400; }
.content:after { content:""; display:block; clear:both; }

/* top */
.top { font-size:0; margin-bottom:1rem; }
.top .slogan { margin:0.5rem 0 1rem; }
.top .sns_list { position:relative; display:flex; justify-content: flex-end;} 
.top .sns_list:before {content:""; position:absolute; left:0; top:50%; width:calc(100% - 10rem); height:4px; border-top:1px dotted #fff; border-bottom:1px dotted #fff;}
.top .sns_list li a { position:relative; display: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:block; width:100%; height:100%; color:#fff; font-size:1rem; line-height:2rem; border-radius:50%; }
.top .sns_list li.fb a i { background:#3b71df; }
.top .sns_list li.is a i { background: rgb(113,50,159);
    background: -moz-linear-gradient(90deg, rgba(113,50,159,1) 0%, rgba(220,29,122,1) 100%);
    background: -webkit-linear-gradient(90deg, rgba(113,50,159,1) 0%, rgba(220,29,122,1) 100%);
    background: linear-gradient(90deg, rgba(113,50,159,1) 0%, rgba(220,29,122,1) 100%);  }
.top .sns_list li.yt a i { background:#e4092f; }
.top .sns_list li.bl a i { background:#0fba1e; }
footer { position:absolute; left:0; bottom:0; width:100%; text-align:center; color:#fff; background:rgba(0,0,0,0.5); font-size:0.9rem; padding:2rem 1rem; word-break:keep-all; }
.top .sns_list li a:hover,
.top .sns_list li a:focus { -webkit-transform:translateY(-0.3rem); transform:translateY(-0.3rem);}


/* linkBox */
.linkBox { width:calc(100% - 830px); float:left; word-break:keep-all;  } 
.linkBox ul li + li { margin-top:0.5rem; }
.linkBox ul li a { position:relative; display:block; width:100%; padding:0.5rem 3rem 0.5rem 1.5rem; color:#fff; font-size:1rem; text-align:left; background:#003258; -webkit-transition:background-color 0.3s; transition:background-color 0.3s;}
.linkBox ul li a:before { content:"\e93e"; position:absolute; right:0.5rem; top:calc(50% - 0.75rem); font-family:"xeicon"; width:1.35rem; height:1.35rem; border-radius:50%; background:rgba(255,255,255,0.27); color:#fff; line-height:1.35rem; text-align:center; font-size:0.75rem; }
.linkBox ul li a p { font-size:0.8rem; }
.linkBox .txtBox { display:block; text-align:left; color:#fff; line-height:1.2; margin-bottom: 2.1rem;}
.linkBox .txtBox p { font-size:2.25rem; font-weight:600; letter-spacing:-1px;  }
.linkBox .txtBox strong { position:relative; display:inline-block; font-size:2.7rem; font-weight:700; letter-spacing:-1px; padding-right:3rem;}
.linkBox .txtBox strong i { position:absolute; right:0; top:0.6rem; display:inline-block; width:2.25rem; height:2.25rem; background:rgba(255,255,255,0.2) ; border-radius:50%; text-align:center; line-height:2.25rem; font-size:1rem; -webkit-transition:background-color 0.3s; transition:background-color 0.3s; }
.linkBox .txtBox dl { margin-top:1.5rem;}
.linkBox .txtBox dl dt { display:block; font-size:1.3rem; font-weight:700; padding:0.4rem 1rem; background:#003258;-webkit-transition:background-color 0.3s; transition:background-color 0.3s;  }
.linkBox .txtBox dl dd { padding:1rem 1rem 0; 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:#003258; }

/* pageBox */
.pageBox { display:flex; justify-content: space-between; width:790px; float:right; } 
.pageBox > div { position:relative; width:32%; height:11.5rem; box-shadow:5px 5px 10px rgba(0,0,0,0.1); color:#fff; padding:1rem 1.7rem; overflow:hidden; } 
.pageBox > div:before { content:""; position:absolute; left:50%; bottom:-80%; width:60%; height:200%; background:rgba(0,0,0,0.05); -webkit-transform:rotate(45deg); transform:rotate(45deg);}
.pageBox > div:nth-child(1) { background:#da005b; }
.pageBox > div:nth-child(2) { background:#4382e0; }
.pageBox > div:nth-child(3) { background:#005795; }
.pageBox > div strong { display:block; font-size:1.2rem; font-weight:600; margin-bottom:0.5rem; }
/* .pageBox > div strong + a { margin-top:1.5rem; } */
.pageBox > div a { position:relative; display:block; line-height:2rem; border:1px solid rgba(255,255,255,0.5); -webkit-transition:0.3s; transition:0.3s; }
.pageBox > div ul li { width:50%; float:left;}
.pageBox > div ul li:first-child { width:100%; margin-bottom:0.25rem;}
.pageBox > div ul li a { line-height:1.75rem; }
.pageBox > div ul li:nth-child(2) a { border-right:none; }
.pageBox > div a:hover,
.pageBox > div a:focus { background:#fff; color:#000;} 

/* linkList */
.linkList { width:790px; float:right; margin-top:0.6rem;}
.linkList ul { display:flex; justify-content: space-between;}
.linkList ul li { width:32%; height:11.5rem; height:2.3rem; } 
.linkList ul li a { position:relative; display:block; width:100%; line-height:2.3rem; color:#333; text-align:left; font-size:0.8rem; padding:0 3rem 0 1rem; background:rgba(255,255,255,0.5); box-shadow:5px 5px 10px rgba(0,0,0,0.1); -webkit-transition:background-color 0.3s; transition:background-color 0.3s; text-overflow:ellipsis; overflow:hidden; white-space:nowrap; }
.linkList ul li a:after {content:"\e93e"; position:absolute; right:0.5rem; top:calc(50% - 0.6rem); width:1.2rem; height:1.2rem; text-align:center; line-height:1.2rem; border-radius:50%; background:#fff; box-shadow:1px 1px 1px rgba(0,0,0,0.2); font-family:"xeicon"; }
.linkList ul li a:hover,
.linkList ul li a:focus { background:#fff !important; }
.linkList ul li a:hover:after,
.linkList ul li a:focus:after { background:#da005b; color:#fff; }

/* bottom */
.bottom { position:relative; background:rgba(1,42,109,0.4); width:100%; margin:1.5rem 0 0; padding:1.5rem 1rem; float:left; }
.bottom ul { display:inline-block; font-size:0; }
.bottom ul li { display:inline-block; margin:0 3px;}
.bottom ul li a { position:relative; display:block; } 
.bottom .slider { display:inline-block; vertical-align:top; overflow:hidden; min-width:262px; max-width:535px; }
.bottom .slider .slideEl { display:inline-block; width:265px; }
.bottom .slider .slideEl a { display:block; width:262px;}
.bottom .slider .slideEl a img { display:block; margin:0 auto; }
.bottom .control { position:absolute; right:0; bottom:-1.25rem; background:#fff; height:2.3rem; line-height:2.3rem; color:#555; font-size:0; padding:0 1rem;  }
.bottom .control .count { display:inline-block; vertical-align:middle; font-size:0.8rem; margin-right:0.5rem;}
.bottom .control .count .current { position:relative; color:#da005b; padding-right:1.2rem; font-weight:600; margin-right:0.5rem; }
.bottom .control .count .current:before { content:""; position:absolute; right:0; top:50%; width:0.8rem; height:1px; background:#c3c3c3; }
.bottom .control a {font-size:1rem; display:inline-block; vertical-align:middle;padding-left:0.2rem;}
.bottom .control a.play { display:none;}
.bottom img { max-width:100%; }

/* 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); }
 
/* loaded 
.linkBox, .pageBox, .linkList, .bottom { opacity:0; -webkit-transform:translateY(1rem); transform:translateY(1rem); -webkit-transition:opacity 0.5s, transform 0.5s; transition:opacity 0.5s, transform 0.5s;}
.loaded .linkBox, 
.loaded .pageBox, 
.loaded .linkList, 
.loaded .bottom { opacity:1; -webkit-transform:none; transform:none;}*/


@media (max-width:1440px){
    
    #wrap { display:block; height:auto; }
    .content { width:95%; margin:0 auto; padding:2rem 0 4rem; } 

    /* linkBox */
    .linkBox .txtBox p { font-size:1.9rem; }
    .linkBox .txtBox strong { font-size:2.2rem; }
    .linkBox .txtBox strong i { top:0.5rem; width:1.9rem; height:1.9rem; line-height:1.9rem; }

    footer { position:relative; left:auto; bottom:auto; }
}
@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 strong { font-size:1.9rem;}
    .linkBox .txtBox strong i { top:0.3rem;}

    /* pageBox */
    .pageBox { width:100%; }
    .pageBox > div { padding:1rem; }

    /* 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:940px){ 
    /* bottom */
    .bottom ul li { display:block; width:50%; float:left; margin:0; }
    .bottom ul li:nth-child(3) { margin-top:0.5rem;}
    .bottom ul li a { padding:0 0.3rem;}
    .bottom .slider { position:absolute; right:1rem; bottom:1.5rem; width:calc((100% - 2rem) / 2); min-width:0; max-width:none; }
    .bottom .slider .slideEl a { width:100%; margin:0 auto; padding:0 0.3rem; }
}
@media (max-width:740px){ 
    /* top */
    .top h1 img { height:2.8rem; }
    .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%; }
    .linkList ul li + li { margin-top:0.5rem;}
    
    /* style2 : 바로가기 없는경우 */ 
    .stlye2 .linkList ul { display:block;}
    .stlye2 .linkList ul li { width:100%; }
    .stlye2 .linkList ul li + li { margin-top:0.5rem;}
}
@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; }
    .linkBox .txtBox dl { margin-top:1rem; }
    .linkBox .txtBox dl dt { font-size:1.1rem; }

    /* bottom */
    .bottom ul li { width:100%; }
    .bottom ul li:nth-child(2) { margin-top:0.5rem; }
    .bottom .slider { width:100%; position:relative; right:auto; bottom:auto; margin-top:0.3rem; }
} 
@media (max-width:320px){ 
    .bottom img { width:100%; }
}