/*메인공통*/
#wrap,#header,#container,#content { width: 100%; }
#header img , #footer img { width: 100%; }
/* .inner { width: 100%; max-width: 1100px; margin: auto; position: relative; box-sizing: border-box; transition:0.3s; padding: 0 15px;} */
.main .con-box { padding: 4rem 0; height: 100%; }
.main .con-box h2 { font-size: 2.5rem; }
.main .con-box h3 { font-size: 2.2vw; }
.main .con-box h2 ,.main .con-box h3 { color:#fff; text-shadow:3px 3px 5px rgba(0,0,0,0.3); } 

/*메인배너*/
.main-bnr { position:relative; z-index: 2;}
.main-bnr::before ,.main-bnr::after { content: ''; display: block; position:absolute; left:0; top:0; width:100%; height:100%;} 
.main-bnr::before { background:url('../../images/hangang/bnr_wave.png') 0 100% no-repeat; background-size:cover; z-index: -2; }
.main-bnr::after { background:linear-gradient(to bottom, rgba(191,221,255,1) 0%,rgba(145,197,255,1) 100%); z-index: -5; } 
.main-bnr .bnr-img { position:relative; }
.main-bnr .bnr-img img { width:700px; }
.main-bnr .bnr-ani { position:absolute; left:0; top: 0; width: 100%; height: 80%; z-index: -1;}
.main-bnr .bnr-ani div { position:absolute; } 
.main-bnr .bnr-ani div.bird { animation:bird-ani 2s linear forwards; }
.main-bnr .bnr-ani div.shark1 { left:4%;bottom:10%; animation:shark1-ani 2s linear forwards; }
.main-bnr .bnr-ani div.b-fly { animation:b-fly-ani 2s linear forwards; }
.main-bnr .bnr-ani div.leaf {right:10%; top:20%; animation:leaf-ani 2s linear forwards; }
.main-bnr .bnr-ani div.shark2 {right: 3%; bottom:5%; animation:shark2-ani 2s linear forwards; }

/*aimation*/
@keyframes bird-ani {0%{left:0%;top:8%;}25%{left:3%;top:6%;}50%{left:5%;top:4%;}75%{left:8%;}100%{left:10%;top:5%;}}
@keyframes shark1-ani {0%{left:4%;bottom:10%;transform:rotate(0deg);}100%{transform: rotate(50deg);left:7%;bottom:20%;}}
@keyframes b-fly-ani {0%{right:10%;top:15%;}25%{right:15%;top:10%;}50%{right:20%;top:15%;}75%{right:25%;top:22%;}100%{right:30%;top:18%;}}
@keyframes leaf-ani {0%{right:10%;top:20%;transform:rotate(0deg);}25%{right:15%;top:25%;transform:rotate(10deg);}50%{right:18%;top:30%;}75%{right:12%;top:35%;}100%{transform:rotate(30deg);right:15%;top:42%;}}
@keyframes shark2-ani {0%{right:3%;bottom:5%;transform:rotate(0deg);}25%{right:6%;bottom:8%;}50%{right:10%;bottom:10%;}75%{right:13%;bottom:8%;}100%{transform:rotate(-45deg);right:15%;bottom:6%;}}


/*서브링크*/
.con-box.sub-link {padding:0!important;}
.sub-link ul{ display:flex; }
.sub-link ul li.link-box { width:calc(100%/3); padding:60px 50px 30px 50px; text-align:center; position: relative; height: 605px; overflow: hidden; box-sizing: border-box; }
.sub-link ul li.link1 { background:#005ea2; }
.sub-link ul li.link2 { background:#f08437; }
.sub-link ul li.link3 { background:#007c51; }
.sub-link ul li.link-box .arr-box { margin:3% 0; opacity: 0; transition: .3s;}
.sub-link ul li.link-box .arr-box img { width:160px; }
.sub-link ul li.link-box:hover .arr-box {opacity: 1; animation: fadeInLeft .7s ;}
.sub-link ul li.link-box .img-box { position:relative; width: 100%; height: 100%; background:url(../../images/hangang/wave2.png) 50% 0% no-repeat; background-size: 100%; opacity: 0.8;}
.sub-link ul li.link-box .img-box div { position:absolute; }
.sub-link ul li.link-box .img-box div.s-leaf { left:7%; top:8%; animation: rotate1 1.8s linear infinite alternate;}
.sub-link ul li.link-box .img-box div.s-b-fly { right:7%; top:3%;animation: rotate1 1.8s linear infinite alternate;}
.sub-link ul li.link-box .img-box div.s-bird { left:5%; top:50%; animation:rotate2 1.8s linear infinite alternate;}
.sub-link ul li.link-box .img-box div.s-seaweads { right:15%; top:30%; animation: rotate3 1.8s linear infinite alternate;}
.sub-link ul li.link-box .img-box div.s-shark { right:10%; top:60%; animation: rotate4 1.8s linear infinite alternate;}
/*.sub-link ul li.link-box:hover .img-box div.s-leaf { animation: rotate1 1.8s linear infinite alternate;} 
.sub-link ul li.link-box:hover .img-box div.s-b-fly { animation: rotate1 1.8s linear infinite alternate;}
.sub-link ul li.link-box:hover .img-box div.s-bird { animation: rotate2 1.8s linear infinite alternate;}
.sub-link ul li.link-box:hover .img-box div.s-seaweads { animation: rotate3 1.8s linear infinite alternate;}
.sub-link ul li.link-box:hover .img-box div.s-shark { animation: rotate4 1.8s linear infinite alternate;}*/


@keyframes rotate1 {0%{transform:rotate(0);}100%{transform:rotate(-15deg);}}
@keyframes rotate2 {0%{transform:rotate(0);}100%{transform:rotate(15deg);}}
@keyframes rotate3 {0%{transform:rotate(0);}100%{transform:rotate(30deg);}}
@keyframes rotate4 {0%{transform:rotate(0);}100%{transform:rotate(-45deg);}}