@charset "utf-8";
.subVisual{height:340px ;background: #484946 ;overflow: hidden;position: relative;z-index: 2; }
.subVisual::before{display: block;content: '';position: absolute;top: 0;left: 0;right: 0;bottom: 0;background-repeat: no-repeat;background-position: center 100%;animation: 2s zoom-ani  ease-out ;background-size:cover ;z-index: -1;}
.subVisual.view{overflow: visible;}
@keyframes zoom-ani {
0{-ms-transform: scale(1.2, 1.4);transform: scale(1.2, 1.1);}
15% {-ms-transform: scale(1.4, 1.3);transform: scale(1.4, 1.3);}
100% {-ms-transform: scale(1, 1);transform: scale(1, 1);}
}
.subVisual.subbg1{height: 800px;}
.subVisual.subbg1::before{background-image: url(../img/sub/subbg_1.jpg);}
.subVisual.subbg2::before{background-image: url(../img/sub/subbg_2.jpg);}
.subVisual.subbg3::before{background-image: url(../img/sub/subbg_3.jpg);}
.subVisual.subbg4::before{background-image: url(../img/sub/subbg_3.jpg);}
.subVisual.subbg5::before{background-image: url(../img/sub/subbg_3.jpg);}

.subVisual .subTit{position: absolute;top: 50%;left: 0;right: 0;transform:translateY(-50%);text-align: center;color: #fff;font-family: 'Gmarket Sans';}
.subVisual .subTit p{font-size: 22px;}
.subVisual .subTit h2{display: block;font-size: 70px;letter-spacing: -3px;font-weight: 700;padding: 45px 19px 0 0 ;text-shadow: 2px 2px 1px rgba(0,0,0,0.15);display: inline-block;position: relative;margin-bottom: 20px;}
.subVisual .subTit h2::before{display: block;content: '';position: absolute;top: 0;left: 50%;width: 86px;height: 26px;background:url(../img/sub/fish.png) center 0 no-repeat ;margin-left: -43px;}
.subVisual .subTit h2::after{display: block;content: '';position: absolute;right: 0;background-color: #2caedf;width: 13px;height: 13px;border-radius:50% ;animation-name:pickout;  animation-duration: 1.5s;  animation-delay: 2s;animation-fill-mode: forwards;opacity: 0;bottom: 80px;}
@keyframes pickout {
0{transform:scale(.5, .9);}
10% {transform: scale(1.4, 0.5);bottom: 0;opacity: 1;}
100% {transform: scale(1, 1);bottom: 15px;opacity: 1;}
}
.subVisual.subbg1 .subTit p,
.subVisual.subbg1 .subTit h2{font-size: 60px;margin-bottom: 0;}

.fishMark{height: 420px;background-color: #50c8d2;position: relative;}
.fishMark dl{position: absolute;top: 50%;left: 0;right: 0;text-align: center;color: #fff;height: 140px;margin-top: -70px;}
.fishMark dl dt{position: relative;font-family: 'Times New Roman';font-size: 50px;letter-spacing: 15px;padding-bottom: 14px;padding-top: 57px;background: url(../img/sub/fishL.png) center 0 no-repeat ;background-size:126px auto;display: inline-block;border-bottom: 1px solid rgba(255,255,255,.5);text-align: center;padding-left:10px;}
.fishMark dl dd{font-size: 16px;padding-top: 14px;}

@media screen and (min-width:1024px) {
.fishMark.story{height: 700px;}
.fishMark.story dl{height: 184px;margin-top: -92px;}
.fishMark.story dl dt{font-size: 60px;padding-bottom: 20px;padding-top: 86px;}
.fishMark.story dl dd{font-size: 18px;padding-top: 20px;}
}
.pageContent,
.pageContent > .wrapper,
.pageContent.wrapper{max-width: 1300px;}
.pageContent{padding-bottom: 60px;/* overflow: hidden; */min-height: 500px;padding-top: 100px;}
.pageContent::after{display: block;content: '';clear: both;}
.pageContent.pb0{padding-bottom: 0;}

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

.subVisual{height:260px;}
.subVisual .subTit h2{font-size: 50px;}
.subVisual .subTit p{font-size: 18px;}
.subVisual.subbg1{height: 400px;}
.subVisual.subbg1 .subTit p,
.subVisual.subbg1 .subTit h2{font-size: 40px;line-height: 1.1;}
.fishMark{height: 330px;}
}
@media screen and (max-width:815px) {
.pageContent{padding-bottom: 40px;min-height: 300px;}
.subVisual.subbg1{height: 300px;}
}
@media screen and (max-width:580px) {
.subVisual{height:200px;}
.subVisual .subTit h2{padding-top: 35px;}
.subVisual .subTit h2::before{background-size:auto 20px;}
.subVisual .subTit h2{font-size: 40px;margin-bottom: 10px;}
.subVisual .subTit p{font-size: 16px;}
.subVisual.subbg1{height: 200px;}
.subVisual.subbg1 .subTit p,
.subVisual.subbg1 .subTit h2{font-size: 28px;}
@keyframes pickout {
0{transform:scale(.5, .9);}
10% {transform: scale(1.4, 0.5);bottom: -10px;opacity: 1;}
100% {transform: scale(1, 1);bottom: 5px;opacity: 1;}
}
.fishMark{height: 200px;}
.fishMark dl {height: auto;margin-top: -50px;}
.fishMark dl dt{font-size: 35px;padding-bottom: 5px;background-size:90px auto;padding-top: 40px;}
.fishMark dl dd{font-size: 13px;padding-top: 10px;}
}
table.classic { border: 0; border-collapse: separate; width: 100%; border-top: solid 2px #000;border-bottom: 2px solid #000;}
table.classic td,
table.classic th { border: 0; border-bottom: solid 1px #e5e5e5; border-left: solid 1px #e5e5e5;color: #000;padding: 20px 1% ; text-align: center; line-height: 1.6; vertical-align: middle;  height: auto ;word-wrap:break-word;word-break: break-all;font-size: 18px;font-family:'Noto Sans KR',sans-serif;}
table.classic thead th { /* background: #f4f4f4; */ border-bottom-color: #000;font-weight: 400;}
table.classic thead th.first { border-left: none; }
table.classic tbody td.first { border-left: none}
table.classic tbody th {font-weight: 400; border-left: none;}
table.classic th.bdr{border-right: solid 1px #e5e5e5;}
table.classic .bdl0{border-left:0}
table.classic th.left { padding-left:10px; text-align:left; }
table.classic td.left,
table.classic tr.left td{padding-left:2.5%; text-align: left;padding-right: 1%; }
table.classic td.va-t{vertical-align: top;}
table.classic.tdLeft tbody td{text-align: left;padding-left: 15px;}
table.classic.fw-n td.left{font-weight: 300;}
table.classic .bdt th,table.classic .bdt td{border-top: 1px solid #000;}
table.classic.center th,
table.classic.center td {text-align: center !important;padding-left: 0 !important;padding-right: 0 !important;}
.m_scroll{margin-bottom: 30px;}
.m_scroll.mb0{margin-bottom: 0;}

/********
STORY
*********/
.storyTit{text-align: center;margin-bottom: 130px;font-family: 'Times New Roman';font-size: 40px;font-weight: normal;line-height: 140%;position: relative;z-index: 2}
.storyTit b{display: block;font-weight: normal;font-size: 120px;}
.storyTxt{text-align: center;position: relative;z-index: 2}
.storyTxt span{display: block;}
.storyTxt dt{font-size: 32px;font-weight: 700;font-family: 'Gmarket Sans';letter-spacing: -1.5px;margin-bottom: 30px;}
.storyTxt dd{font-size: 20px;letter-spacing: -1px;line-height: 1.7;}
.storySea,
.storyFuture{padding-top: 110px;background-color: #f7f7f7;position: relative;z-index: 2;}
.storySea{padding-bottom: 920px;}
.storyFuture{padding-bottom: 565px;}
.storySea::after,
.storyFuture::after{content: '';display: block;position: absolute;bottom: 0;left: 0;right: 0;background-repeat: no-repeat;background-position: center 100%;top: 0;z-index: 0;}
.storySea::after{background-image: url(../img/sub/story_sea.jpg);}
.storyFuture::after{background-image: url(../img/sub/story_ship.png);}
.storyFuture::before{content: '';display: block;position: absolute;bottom: 0;left: 0;right: 0;height: 220px;z-index: 0;background-color: #50c8d2;}
.storyPeople{background-color: #ffd786;background: linear-gradient(to bottom, #ffe69b 0%,#ffd786 100%);padding: 40px 0 120px;}
.storyBall,.storyBall li{list-style-type: none;margin: 0;padding: 0;}
.storyBall{display: flex;margin:0 auto;max-width: 860px;padding-top: 55px;padding-left: 20px;width: 90%;}
.storyBall li{width: calc(100%/3 + 20px);overflow: hidden;text-align: center;height: 0;position: relative;padding-top: calc(100%/3 + 20px);margin-left: -20px;}
.storyBall li::before{display: block;content: '';background-color: #50cdfc;border-radius:50% ;position: absolute;top: 0;left: 0;width: 100%;height: 100%;opacity: .7;mix-blend-mode: multiply     ;}
.storyBall li:nth-child(1)::before{background-color: #50cdfc;}
.storyBall li:nth-child(2)::before{background-color: #f8b800;}
.storyBall li:nth-child(3)::before{background-color: #d82864;}
.storyBall b{position: absolute;left: 50%;top: 50%;transform: translate(-50%, -50%);color: #fff;z-index: 1;font-size: 28px;line-height: 1.2;letter-spacing: -1px;width: 100%;display: block;}
.storyBall b span{display: block;}
@media screen and (max-width:1024px) {
.storyTit{margin-bottom: 80px;font-size: 26px;}
.storyTit b{font-size: 80px;}
.storyTxt dt{font-size: 28px;margin-bottom: 20px;}
.storyTxt dd{font-size: 18px;line-height: 1.4;}
.storySea,
.storyFuture{padding-top: 60px;}
.storySea{padding-bottom: 630px;}
.storyFuture{padding-bottom: 565px;}
.storySea::after{background-size:cover;}
.storyPeople{padding-bottom: 60px;}
}
@media screen and (max-width:860px) {
.storyBall b{font-size: 22px;}
.storyFuture{padding-bottom: 55%;}
.storyFuture::after{background-size: 100% auto;}
.storyFuture::before{height: 5px;}
.storySea{padding-bottom: 46%;}
.storySea::after{background-size: 100% auto;}
}
@media screen and (max-width:380px) {
.subVisual.subbg1 .subTit h2 span{display: block;}
.subVisual.subbg1 .subTit p,
.subVisual.subbg1 .subTit h2{font-size: 24px;line-height: 1.3;}
.storySea,
.storyFuture{padding-top: 35px;}
.storyTit{font-size: 22px;}
.storyTit b{font-size: 60px;}
.storyTxt dt{font-size: 25px;margin-bottom: 10px;}
.storyTxt dd{font-size: 15px;}
.storyBall{padding-top: 35px;}
.storyBall b{font-size: 18px;}
.storyPeople{padding-bottom: 35px;}
}
@media screen and (min-width:380px) {
.storyTxt dd br{display: none;}
}
/********
SEA OF BORYEONG
*********/
.vln{display: block;width: 1px;margin: 0 auto 30px;background-color: #000;height: 80px;position: relative;z-index: 2;}
.gms.tit{font-size: 40px;line-height: 1.1;margin-bottom: 25px;letter-spacing: -2px;text-align: center;position: relative;z-index: 2;}
.gms.tit span,.sbcon span{display: block;}
.gms.tit b{display: block;font-weight: 700;}
.gms.tit b.c_y{color: #fdffd8;}
.sbcon{font-size: 24px;line-height: 1.4;letter-spacing: -1px;text-align: center;position: relative;z-index: 2;margin-left:auto;margin-right: auto;}
.seaFish{position: relative;background-color: #f7f7f7;padding-bottom: 110px;text-align: center;overflow: hidden;padding-top: 120px;}
.seaFish .sbcon{padding: 20px 0 60px;}
.seaFish .sbcon.fishTxt{padding: 50px 0 0;font-size: 30px;font-family: 'Nanum Myeongjo';font-weight: 400;}
.seaFish .sbcon.fishTxt b{font-weight: 800;}

.seaPress::after{display: block;content: '';position: absolute;bottom: 0;left: 0;right: 0;height: 1111px;background:  url(../img/sub/sea_horiz.png) center 0 no-repeat;}
.seaPress{position: relative;background-color: #f7f7f7;padding-bottom: 840px;text-align: center;}
.seaPress .imgX{margin-bottom: 30px;}
.seaPress .clr{position: relative;z-index: 2;padding: 25px 0 35px;}
.seaPress .clr>div{display: inline-block;font-size: 0;margin:0 8px;box-shadow:2px 5px 15px 0 rgba(0,0,0,0.25)}
.seaPress .clr>div img{max-width: 100%;}
.seaPress .gms.tit{font-size: 30px;}

.seaCerti::before{display: block;content: '';position: absolute;top: 0;left: 0;right: 0;height: 400px;
background: linear-gradient(176deg,  #f7e3d4 0%,#f6d8bb 50%);z-index: 0;}
.seaCerti{background-color: #f6d8bc;padding-bottom: 100px;position: relative;}
.seaCerti .imgX{margin-top: 40px;position: relative;z-index: 2; }
.seaIce{color: #fff;padding-top: 110px;background: #50c8d2 url(../img/sub/sea_ice.jpg) center 0 no-repeat;overflow: hidden;}
.seaIce .imgX{margin: 30px auto 60px;}
.seaIce .vln{background-color: #fff;}

@media screen and (max-width:900px) {
.gms.tit{font-size: 34px}
.sbcon{font-size: 20px;}
.seaFish{padding: 70px 0 80px;}
.seaCerti{padding-bottom: 70px;}
.seaIce{padding-top: 80px;}
.seaIce .imgX{width: 95%;}
}
@media screen and (max-width:770px) {

.seaPress .clr{width: 85%;margin: 0 auto;overflow: visible;}
.seaPress .clr>div{display: block;float: left;width: 48%;margin: 0;}
.seaPress .clr>div:last-child{float: right;}
.seaPress .clr>div img{width: 100%;}
.seaIce .imgX + .gms.tit{font-size:  calc(14px + (34 - 14) * ((100vw - 300px) / (770 - 300)))}
.seaFish .sbcon.fishTxt{font-size: 25px;padding: 35px 0}
.seaIce .sbcon{width: 95%;}
.seaIce .sbcon span{display: none;}
}
@media screen and (max-width:520px) {
.seaFish .imgX,.seaCerti .imgX{width: 95%;}

.seaPress .imgX{width: 75%;}
.seaIce .imgX + .gms.tit{font-size:  calc(24px + (44 - 24) * ((100vw - 300px) / (770 - 300)))}
.seaPress .gms.tit em,
.seaIce .gms.tit em{display: block;}
.sbcon{width: 95%;font-size:  calc(16px + (20 - 16) * ((100vw - 300px) / (530 - 300)))}
.sbcon span{display: none;}
.seaFish .sbcon.fishTxt{font-size: 22px;padding: 25px 0 0}
}