@charset "utf-8";
@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: auto;
	src: local('Pretendard Bold'), url('https://www.imbank.co.kr/cms/cmshtml/fonts/Pretendard-Black.subset.woff2') format('woff2'), url('https://www.imbank.co.kr/cms/cmshtml/fonts/Pretendard-Black.subset.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 700;@charset "utf-8";
@font-face {
	font-family: 'Pretendard';
	font-weight: 900;
	font-display: auto;
	src: local('Pretendard Bold'), url('https://www.imbank.co.kr/cms/cmshtml/fonts/Pretendard-Black.subset.woff2') format('woff2'), url('https://www.imbank.co.kr/cms/cmshtml/fonts/Pretendard-Black.subset.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 700;
	font-display: auto;
	src: local('Pretendard Bold'), url('https://www.imbank.co.kr/cms/cmshtml/fonts/Pretendard-Bold.subset.woff2') format('woff2'), url('https://www.imbank.co.kr/cms/cmshtml/fonts/Pretendard-Bold.subset.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: auto;
	src: local('Pretendard Medium'), url('https://www.imbank.co.kr/cms/cmshtml/fonts/Pretendard-Medium.subset.woff2') format('woff2'), url('https://www.imbank.co.kr/cms/cmshtml/fonts/Pretendard-Medium.subset.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: auto;
	src: local('Pretendard Regular'), url('https://www.imbank.co.kr/cms/cmshtml/fonts/Pretendard-Regular.subset.woff2') format('woff2'), url('https://www.imbank.co.kr/cms/cmshtml/fonts/Pretendard-Regular.subset.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: auto;
	src: local('Pretendard Light'), url('https://www.imbank.co.kr/cms/cmshtml/fonts/Pretendard-Light.subset.woff2') format('woff2'), url('https://www.imbank.co.kr/cms/cmshtml/fonts/Pretendard-Light.subset.woff') format('woff');
}

/***** Base Reset Style *****/
*{margin:0;padding:0;font-size:inherit;color:inherit;text-align:inherit;vertical-align:middle}
h1, h2, h3, h4, h5, h6{margin:0;padding:0;font-weight:normal}
img, fieldset, iframe{border:0 none}
li{list-style:none outside none}
input, select, button{cursor:pointer;vertical-align:middle}
img{vertical-align:top;border:0}
em, address, i, strong{font-style:normal;vertical-align:baseline}
iframe{margin:0;border:0}
a, a:link, a:hover, a:visited, a:active{text-decoration:none;box-sizing:border-box;cursor:pointer;text-shadow:none;font-weight:inherit}
hr{display:none}
legend{display:block;left:0;position:absolute;top:-9000em}
table{width:100%;border:0;border-collapse:collapse;border-spacing:0;empty-cells:show}
caption{font-size:0;height:0;visibility:hidden;width:0}
button{border:none;background:none;box-sizing:border-box;cursor:pointer}
input,
textarea{-webkit-appearance:none;appearance:none;box-shadow:none;box-sizing:border-box;cursor:text}
input,
select{-webkit-appearance:none;appearance:none}
input::-ms-expand{display:none}
select::-ms-expand{display:none}
main{display:block}
body{position:relative;font-family:'Pretendard', sans-serif;font-size:13px;color:#000;font-weight:500;line-height:1.2;min-width:1500px}
a,button,input,textarea{font-family:inherit;font-weight:inherit;line-height:inherit}
html,body{height:100%}
html{background:#f7fbff}

@keyframes dokdoBird{
	100%{transform:translateZ(0) translate(0, 0) rotate(0);-webkit-transform:translateZ(0) translate(0, 0) rotate(0)}
}
@keyframes dokdoCloud{
	0%{transform:translateZ(0) translate(0, 0);-webkit-transform:translateZ(0) translate(0, 0)}
	100%{transform:translateZ(0) translate(-10%, 0);-webkit-transform:translateZ(0) translate(-10%, 0)}
}
@keyframes dokdoTit{
	100%{opacity:1;transform:translateZ(0) translate(0, 0);-webkit-transform:translateZ(0) translate(0, 0);filter:blur(0);-webkit-filter:blur(0)}
}
@keyframes dokdoShip{
	0%, 100%{transform:translateZ(0) translate(0, 0);-webkit-transform:translateZ(0) translate(0, 0)}
	30%, 90%{transform:translateZ(0) translate(-2000px, 0);-webkit-transform:translateZ(0) translate(-2000px, 0)}
	90.01%{transform:translateZ(0) translate(400px, 0);-webkit-transform:translateZ(0) translate(400px, 0)}
}
@keyframes dokdoShipBack{
	0%, 30%, 90.01%, 100%{transform:translateZ(0) translate(0, 0);-webkit-transform:translateZ(0) translate(0, 0)}
	90%{transform:translateZ(0) translate(2000px, 0);-webkit-transform:translateZ(0) translate(2000px, 0)}
}
.wrap{overflow:hidden;position:relative;margin:0 auto;padding:100px 30px 80px 30px;max-width:1800px;height:100%;min-height:850px;max-height:1060px;box-sizing:border-box}
.wrap *:before,
.wrap *:after{background:url('https://www.imbank.co.kr/cms/dokdo/file/dgb_cyberdokdo_sprite.png?v=20240605') no-repeat 0 0}
.wrap .sprite-txt{position:absolute;left:-9999px;font-size:11px;color:#fff}

/* header */
.header{position:absolute;left:0;top:0;z-index:3;padding:32px 30px 0 30px;width:100%;box-sizing:border-box}
.header h1{position:relative;float:left;width:250px;height:45px;font-size:12px;font-weight:200}
.header h1:before{content:'';display:block;width:100%;height:100%}
.header .topmenu{float:right;padding:9px 0 0 0}
.header .topmenu > ul{font-size:0}
.header .topmenu > ul > li{display:inline-block;position:relative;font-size:14px;color:#42464a}
.header .topmenu > ul > li + li{margin-left:40px}
.header .topmenu > ul > li + li:before{content:'';position:absolute;left:-22px;top:50%;margin:-3px 0 0 0;width:5px;height:5px;border-radius:50%;background:#cfdbe7}
.header .topmenu > ul > li > a{display:block;padding:5px 0}
.header .topmenu .link-dgb a{display:block;position:relative;width:120px;height:30px}
.header .topmenu .link-dgb a:before{content:'';display:block;height:20px;background-position:0 -70px}
.header .topmenu .link-live a{padding-left:52px}
.header .topmenu .link-live a:before{content:'';position:absolute;left:0;top:4px;width:45px;height:18px;background-position:-140px -70px}
.header .topmenu .selectmenu{position:relative}
.header .topmenu .selectmenu > button{position:relative;z-index:2;padding:10px 20px 10px 0}
.header .topmenu .selectmenu > button:before{content:'';position:absolute;right:0;top:50%;margin:-4px 0 0 0;width:13px;height:8px;background-position:-200px -70px}
.header .topmenu .selectmenu:hover > button:before{background-position:-200px -80px}
.header .topmenu .selectmenu > .list{display:none;overflow:hidden;position:absolute;left:-10px;top:1px;padding:30px 3px 8px 3px;width:130px;border:solid 1px #ddd;border-radius:5px;box-sizing:border-box;background:#fff}
.header .topmenu .selectmenu > .list > li > a{display:block;padding:3px 6px;width:100%;font-size:13px;color:#333;box-sizing:border-box}
.header .topmenu .selectmenu > .list > li > a:hover{text-decoration:underline}
.header .topmenu .selectmenu > .list > li + li{margin-top:2px}
.header .topmenu .selectmenu:hover > .list{display:block}

/* footer */
.footer{position:absolute;left:0;bottom:0;padding:0 30px;width:100%;height:80px;box-sizing:border-box}
.footer .copyright{padding:12px 0 0 0;font-size:16px;color:#aaa;text-align:right}

/* main */
.main,
.main section{height:100%}
.main section h2{position:absolute;left:-1000px;font-size:11px;color:#fff}
.main .visual{position:relative}
.main .visual,
.main .visual .list,
.main .visual .list > div{height:100%}
.main .visual .list{position:relative}
.main .visual .list > div{display:none;overflow:hidden;position:absolute;left:0;top:0;width:100%;border-radius:30px;box-sizing:border-box}
.main .visual .list > .active{z-index:2}
.main .visual:after{content:'';position:absolute;left:-6px;z-index:3;bottom:-87px;width:334px;height:234px;background-position:0 -570px}
.main .visual .visual-pagination{position:absolute;left:50%;top:22px;z-index:3;margin:0 0 0 -257px;padding:7px 0 0 0;width:514px;height:60px;font-size:0;text-align:center;border-radius:60px;background:rgba(230,239,248,0.3);box-sizing:border-box}
.main .visual .visual-pagination > button{position:relative;z-index:2;width:164px;height:45px;line-height:45px;font-size:20px;color:#46648b;border-radius:45px;text-align:center;transition:color 0.4s ease-out;-webkit-transition:color 0.4s ease-out}
.main .visual .visual-pagination > .active{position:relative;color:#fff}
.main .visual .visual-pagination > button:before{content:'';display:inline-block;position:relative;top:-1px;margin:0 -17px 0 0;width:17px;height:17px;background-position:-300px -350px;vertical-align:middle;opacity:0;transition:margin 0.2s ease-out, opacity 0.2s ease-out;-webkit-transition:margin 0.2s ease-out, opacity 0.2s ease-out}
.main .visual .visual-pagination > .active:before{margin-right:6px;opacity:1;transition:margin 0.4s ease-out, opacity 0.4s ease-out;-webkit-transition:margin 0.4s ease-out, opacity 0.4s ease-out}
.main .visual .visual-pagination .bg{position:absolute;left:11px;top:7px;width:164px;height:45px;border-radius:45px;background:#2e2f95}
.main .visual .visual-controls button{display:none;position:absolute;left:10px;top:50%;z-index:3;margin:-55px 0 0 0;width:100px;height:110px}
.main .visual .visual-controls button:before{content:'';position:absolute;left:50%;top:0;margin:0 0 0 -38px;width:76px;height:76px;background-position:0 -830px}
.main .visual .visual-controls button:after{content:'';position:absolute;left:50%;bottom:0;margin:0 0 0 -38px;width:76px;height:18px;background-position:0px -536px}
.main .visual .visual-controls button:hover:before{background-position:-160px -830px}
.main .visual .visual-controls .btn-next{left:auto;right:20px;width:82px}
.main .visual .visual-controls .btn-next:before{background-position:-80px -830px}
.main .visual .visual-controls .btn-next:hover:before{background-position:-240px -830px}
.main .visual.active3 .visual-controls .btn-prev:after,
.main .visual .visual-controls .btn-next:after{margin:0 0 0 -40px;width:82px;background-position:-100px -536px}
.main .visual.active2 .visual-controls .btn-next:after{margin-left:-43px;width:86px;background-position:-300px -536px}
.main .visual.active1 .visual-controls .btn-prev,
.main .visual.active3 .visual-controls .btn-next{display:none !important}


/* 우리의 독도 */
.main .visual .visual1{background:url('https://www.imbank.co.kr/cms/dokdo/file/dgb_cyberdokdo_visual1_bg1.png') no-repeat 50% 60%}
.main .visual .visual1:after{content:'';position:absolute;left:-1px;top:0;width:100%;height:100%;background:url('https://www.imbank.co.kr/cms/dokdo/file/dgb_cyberdokdo_visual1_bg2.png') no-repeat 50% 60%}
.main .visual .visual1:before{content:'';position:absolute;left:0;top:0;width:150%;height:100%;background:url('https://www.imbank.co.kr/cms/dokdo/file/dgb_cyberdokdo_visual1_bg3.png') no-repeat 0% 60%;transform:translateZ(0) translate(0, 0);-webkit-transform:translateZ(0) translate(0, 0)}
.main .visual .visual1 .tit{position:absolute;left:50%;top:50%;margin:-220px 0 0 -680px;width:578px;height:102px;transform:translateZ(0) translate(20px, 0);-webkit-transform:translateZ(0) translate(20px, 0);opacity:0;filter:blur(10px);-webkit-filter:blur(10px)}
.main .visual .visual1 .tit:before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background-position:0 -100px}
.main .visual .visual1 .objs .ship{position:absolute;left:50%;top:60%;margin-top:-120px;margin-left:500px;width:218px;height:100px}
.main .visual .visual1 .objs .ship:before{content:'';display:block;height:100%;background-position:0 -220px}
.main .visual .visual1 .objs .ship.back{left:-200px;margin-left:0;margin-top:-110px;width:158px;height:73px}
.main .visual .visual1 .objs .ship.back:before{background-position:-230px -230px}
.main .visual .visual1 .objs .bird{position:absolute;left:50%;top:60%;z-index:3;margin:-140px 0 0 -630px;width:73px;height:47px}
.main .visual .visual1 .objs .bird:before{content:'';display:block;height:100%;background-position:0 -350px}
.main .visual .visual1 .objs .bird.size0{transform:translateZ(0) translate(-10px, -10px) rotate(5deg);-webkit-transform:translateZ(0) translate(-10px, -10px) rotate(5deg)}
.main .visual .visual1 .objs .bird.size1{margin:-170px 0 0 600px;width:86px;height:30px;transform:translateZ(0) translate(-3px, -15px) rotate(5deg);-webkit-transform:translateZ(0) translate(-3px, -15px) rotate(5deg)}
.main .visual .visual1 .objs .bird.size1:before{background-position:0 -400px}
.main .visual .visual1 .objs .bird.size2{margin:-70px 0 0 -570px;width:50px;height:18px;transform:translateZ(0) translate(6px, -10px) rotate(-5deg);-webkit-transform:translateZ(0) translate(6px, -10px) rotate(-5deg)}
.main .visual .visual1 .objs .bird.size2:before{background-position:0 -440px}
.main .visual .visual1 .objs .bird.size3{margin:-360px 0 0 330px;width:158px;height:100px;transform:translateZ(0) translate(-25px, 20px) rotate(-5deg);-webkit-transform:translateZ(0) translate(-25px, 20px) rotate(-5deg)}
.main .visual .visual1 .objs .bird.size3:before{background-position:-100px -350px}
.main .visual .visual1.animate:before{animation:dokdoCloud 65s linear infinite alternate;-webkit-animation:dokdoCloud 65s linear infinite alternate}
.main .visual .visual1.animate .tit{animation:dokdoTit 1s ease-out forwards 0.3s;-webkit-animation:dokdoTit 1s ease-out forwards 0.3s}
.main .visual .visual1.animate .objs .ship.front{animation:dokdoShip 300s linear infinite forwards;-webkit-animation:dokdoShip 300s linear infinite forwards}
.main .visual .visual1.animate .objs .ship.back{animation:dokdoShipBack 300s linear infinite forwards;-webkit-animation:dokdoShipBack 300s linear infinite forwards}
.main .visual .visual1.animate .objs .bird.size0{animation:dokdoBird 3s ease-in-out infinite alternate;-webkit-animation:dokdoBird 3s ease-in-out infinite alternate}
.main .visual .visual1.animate .objs .bird.size1{animation:dokdoBird 3s ease-in-out infinite alternate;-webkit-animation:dokdoBird 3s ease-in-out infinite alternate}
.main .visual .visual1.animate .objs .bird.size2{animation:dokdoBird 2.5s ease-in-out infinite alternate 0.3s;-webkit-animation:dokdoBird 2.5s ease-in-out infinite alternate 0.3s}
.main .visual .visual1.animate .objs .bird.size3{animation:dokdoBird 4s ease-in-out infinite alternate 0.5s;-webkit-animation:dokdoBird 4s ease-in-out infinite alternate 0.5s}

/* 독도 STORY */
.main .visual .visual2{padding:100px 120px 0 120px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,0.1)}
.main .visual .visual2 .inner-visual{position:relative;padding:24% 0 0 0;border-radius:20px;background:url('https://www.imbank.co.kr/cms/dokdo/file/dgb_cyberdokdo_visual2_bg.png') no-repeat 50% 80%}
.main .visual .visual2 .txt{padding:40px 0 0 6%}
.main .visual .visual2 .txt dt{margin:0 0 12px 0;font-size:32px;font-weight:700}
.main .visual .visual2 .txt dt span{color:#2e2f95;vertical-align:baseline}
.main .visual .visual2 .txt dd{position:relative;padding:0 0 0 18px;font-size:20px;font-weight:500}
.main .visual .visual2 .txt dd:before{content:'';position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:#2e2f95}
.main .visual .visual2 .txt dd + dd{margin-top:8px}

/* 독도후원사업 */
.main .visual .visual3{position:relative;padding:130px 120px 0 130px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,0.1)}
.main .visual .visual3:before{content:'';position:absolute;right:-200px;top:-40px;width:920px;height:610px;background-position:-480px -220px}
.main .visual .visual3 .info{position:relative;margin:0 auto;max-width:1300px}
.main .visual .visual3 .info > li + li{margin-top:32px}
.main .visual .visual3 .info > li > .tit{margin:0 0 12px 0;font-size:27px;font-weight:700}
.main .visual .visual3 .info > li > .tit > *{position:absolute;margin:-3px 0 0 10px;padding:0 16px;height:34px;line-height:34px;font-size:16px;color:#2729c4;border-radius:34px;background:#e1e1f6}
.main .visual .visual3 .info > li > .tit > .blank:after{content:'';display:inline-block;position:relative;top:1px;margin:0 0 0 4px;width:16px;height:16px;background-position:-330px -350px}
.main .visual .visual3 .info > li > .txt > li{position:relative;padding:0 0 0 18px;font-size:20px;font-weight:500}
.main .visual .visual3 .info > li > .txt > li:before{content:'';position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:#2e2f95}
.main .visual .visual3 .info > li > .txt > li + li{margin-top:8px}
.main .visual .visual3 .info > li > .txt > li ul{margin-top:12px}
.main .visual .visual3 .info > li > .txt > li ul > li + li{margin-top:8px}

/* 레이어팝업 */
.layer-pop{display:none;position:absolute;left:50%;top:50%;z-index:10;margin:-300px 0 0 -600px;padding:40px 40px 40px 50px;width:1200px;height:600px;border-radius:30px;background:#fff;box-sizing:border-box}
.layer-pop > .tit{margin:0 0 30px 0;font-size:32px;font-weight:500}
.layer-pop > .btn-close{position:absolute;right:15px;top:12px;width:80px;height:80px}
.layer-pop > .btn-close:before{content:'';position:absolute;left:50%;top:50%;margin:-19px 0 0 -19px;width:38px;height:38px;background-position:-300px -400px}
.layer-pop > .tabmenu{position:relative;margin:0 0 30px 0;font-size:0}
.layer-pop > .tabmenu button{position:relative;z-index:1;margin-right:5px;padding:0 18px;font-size:28px;color:#9fa0bd;height:48px;font-weight:400;line-height:48px;border-radius:48px;transition:color 0.4s linear}
.layer-pop > .tabmenu button.active{color:#fff}
.layer-pop > .tabmenu .bg{position:absolute;left:0;top:0;width:120px;height:48px;border-radius:48px;background:#2e2f95}
.layer-pop .scroll-box{overflow:hidden;height:360px}
.layer-pop .scroll-box .pop-content{position:relative}
.layer-pop .history{display:none;padding:20px 0 20px 40px}
.layer-pop .history.active{display:block}
.layer-pop .history .list{position:relative}
.layer-pop .history .list:before{content:'';position:absolute;left:0;top:12px;width:1px;height:100%;background:#c1c1e4}
.layer-pop .history .list:after{content:'';position:absolute;left:0;bottom:-12px;width:1px;height:26px;background:#fff}
.layer-pop .history .list > li{position:relative;padding:0 0 0 188px;font-size:22px;font-weight:500}
.layer-pop .history .list > li:before{content:'';position:absolute;left:-5px;top:10px;width:12px;height:12px;border:solid 3px #2e2f95;border-radius:50%;background:#fff;box-sizing:border-box}
.layer-pop .history .list > li .tit{position:absolute;left:32px;top:0;font-size:27px;color:#3738bd;font-weight:500}
.layer-pop .history .list > li + li{margin-top:50px}
.layer-pop .history .list > li .txt > li + li{margin-top:12px}
.layer-pop .history .list > li .txt > li{position:relative;padding:0 0 0 14px}
.layer-pop .history .list > li .txt > li:before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:#a0a1be}
.dimed{display:none;position:fixed;left:0;top:0;z-index:9;width:100%;height:100%;background:#000;opacity:0.5}
	font-display: auto;
	src: local('Pretendard Bold'), url('https://www.imbank.co.kr/cms/cmshtml/fonts/Pretendard-Bold.subset.woff2') format('woff2'), url('https://www.imbank.co.kr/cms/cmshtml/fonts/Pretendard-Bold.subset.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 500;
	font-display: auto;
	src: local('Pretendard Medium'), url('https://www.imbank.co.kr/cms/cmshtml/fonts/Pretendard-Medium.subset.woff2') format('woff2'), url('https://www.imbank.co.kr/cms/cmshtml/fonts/Pretendard-Medium.subset.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 400;
	font-display: auto;
	src: local('Pretendard Regular'), url('https://www.imbank.co.kr/cms/cmshtml/fonts/Pretendard-Regular.subset.woff2') format('woff2'), url('https://www.imbank.co.kr/cms/cmshtml/fonts/Pretendard-Regular.subset.woff') format('woff');
}
@font-face {
	font-family: 'Pretendard';
	font-weight: 200;
	font-display: auto;
	src: local('Pretendard Light'), url('https://www.imbank.co.kr/cms/cmshtml/fonts/Pretendard-Light.subset.woff2') format('woff2'), url('https://www.imbank.co.kr/cms/cmshtml/fonts/Pretendard-Light.subset.woff') format('woff');
}

/***** Base Reset Style *****/
*{margin:0;padding:0;font-size:inherit;color:inherit;text-align:inherit;vertical-align:middle}
h1, h2, h3, h4, h5, h6{margin:0;padding:0;font-weight:normal}
img, fieldset, iframe{border:0 none}
li{list-style:none outside none}
input, select, button{cursor:pointer;vertical-align:middle}
img{vertical-align:top;border:0}
em, address, i, strong{font-style:normal;vertical-align:baseline}
iframe{margin:0;border:0}
a, a:link, a:hover, a:visited, a:active{text-decoration:none;box-sizing:border-box;cursor:pointer;text-shadow:none;font-weight:inherit}
hr{display:none}
legend{display:block;left:0;position:absolute;top:-9000em}
table{width:100%;border:0;border-collapse:collapse;border-spacing:0;empty-cells:show}
caption{font-size:0;height:0;visibility:hidden;width:0}
button{border:none;background:none;box-sizing:border-box;cursor:pointer}
input,
textarea{-webkit-appearance:none;appearance:none;box-shadow:none;box-sizing:border-box;cursor:text}
input,
select{-webkit-appearance:none;appearance:none}
input::-ms-expand{display:none}
select::-ms-expand{display:none}
main{display:block}
body{position:relative;font-family:'Pretendard', sans-serif;font-size:13px;color:#000;font-weight:500;line-height:1.2;min-width:1500px}
a,button,input,textarea{font-family:inherit;font-weight:inherit;line-height:inherit}
html,body{height:100%}
html{background:#f7fbff}

@keyframes dokdoBird{
	100%{transform:translateZ(0) translate(0, 0) rotate(0);-webkit-transform:translateZ(0) translate(0, 0) rotate(0)}
}
@keyframes dokdoCloud{
	0%{transform:translateZ(0) translate(0, 0);-webkit-transform:translateZ(0) translate(0, 0)}
	100%{transform:translateZ(0) translate(-10%, 0);-webkit-transform:translateZ(0) translate(-10%, 0)}
}
@keyframes dokdoTit{
	100%{opacity:1;transform:translateZ(0) translate(0, 0);-webkit-transform:translateZ(0) translate(0, 0);filter:blur(0);-webkit-filter:blur(0)}
}
@keyframes dokdoShip{
	0%, 100%{transform:translateZ(0) translate(0, 0);-webkit-transform:translateZ(0) translate(0, 0)}
	30%, 90%{transform:translateZ(0) translate(-2000px, 0);-webkit-transform:translateZ(0) translate(-2000px, 0)}
	90.01%{transform:translateZ(0) translate(400px, 0);-webkit-transform:translateZ(0) translate(400px, 0)}
}
@keyframes dokdoShipBack{
	0%, 30%, 90.01%, 100%{transform:translateZ(0) translate(0, 0);-webkit-transform:translateZ(0) translate(0, 0)}
	90%{transform:translateZ(0) translate(2000px, 0);-webkit-transform:translateZ(0) translate(2000px, 0)}
}
.wrap{overflow:hidden;position:relative;margin:0 auto;padding:100px 30px 80px 30px;max-width:1800px;height:100%;min-height:850px;max-height:1060px;box-sizing:border-box}
.wrap *:before,
.wrap *:after{background:url('https://www.imbank.co.kr/cms/dokdo/file/dgb_cyberdokdo_sprite.png?v=20240605') no-repeat 0 0}
.wrap .sprite-txt{position:absolute;left:-9999px;font-size:11px;color:#fff}

/* header */
.header{position:absolute;left:0;top:0;z-index:3;padding:32px 30px 0 30px;width:100%;box-sizing:border-box}
.header h1{position:relative;float:left;width:250px;height:45px;font-size:12px;font-weight:200}
.header h1:before{content:'';display:block;width:100%;height:100%}
.header .topmenu{float:right;padding:9px 0 0 0}
.header .topmenu > ul{font-size:0}
.header .topmenu > ul > li{display:inline-block;position:relative;font-size:14px;color:#42464a}
.header .topmenu > ul > li + li{margin-left:40px}
.header .topmenu > ul > li + li:before{content:'';position:absolute;left:-22px;top:50%;margin:-3px 0 0 0;width:5px;height:5px;border-radius:50%;background:#cfdbe7}
.header .topmenu > ul > li > a{display:block;padding:5px 0}
.header .topmenu .link-dgb a{display:block;position:relative;width:120px;height:30px}
.header .topmenu .link-dgb a:before{content:'';display:block;height:20px;background-position:0 -70px}
.header .topmenu .link-live a{padding-left:52px}
.header .topmenu .link-live a:before{content:'';position:absolute;left:0;top:4px;width:45px;height:18px;background-position:-140px -70px}
.header .topmenu .selectmenu{position:relative}
.header .topmenu .selectmenu > button{position:relative;z-index:2;padding:10px 20px 10px 0}
.header .topmenu .selectmenu > button:before{content:'';position:absolute;right:0;top:50%;margin:-4px 0 0 0;width:13px;height:8px;background-position:-200px -70px}
.header .topmenu .selectmenu:hover > button:before{background-position:-200px -80px}
.header .topmenu .selectmenu > .list{display:none;overflow:hidden;position:absolute;left:-10px;top:1px;padding:30px 3px 8px 3px;width:130px;border:solid 1px #ddd;border-radius:5px;box-sizing:border-box;background:#fff}
.header .topmenu .selectmenu > .list > li > a{display:block;padding:3px 6px;width:100%;font-size:13px;color:#333;box-sizing:border-box}
.header .topmenu .selectmenu > .list > li > a:hover{text-decoration:underline}
.header .topmenu .selectmenu > .list > li + li{margin-top:2px}
.header .topmenu .selectmenu:hover > .list{display:block}

/* footer */
.footer{position:absolute;left:0;bottom:0;padding:0 30px;width:100%;height:80px;box-sizing:border-box}
.footer .copyright{padding:12px 0 0 0;font-size:16px;color:#aaa;text-align:right}

/* main */
.main,
.main section{height:100%}
.main section h2{position:absolute;left:-1000px;font-size:11px;color:#fff}
.main .visual{position:relative}
.main .visual,
.main .visual .list,
.main .visual .list > div{height:100%}
.main .visual .list{position:relative}
.main .visual .list > div{display:none;overflow:hidden;position:absolute;left:0;top:0;width:100%;border-radius:30px;box-sizing:border-box}
.main .visual .list > .active{z-index:2}
.main .visual:after{content:'';position:absolute;left:-6px;z-index:3;bottom:-87px;width:334px;height:234px;background-position:0 -570px}
.main .visual .visual-pagination{position:absolute;left:50%;top:22px;z-index:3;margin:0 0 0 -257px;padding:7px 0 0 0;width:514px;height:60px;font-size:0;text-align:center;border-radius:60px;background:rgba(230,239,248,0.3);box-sizing:border-box}
.main .visual .visual-pagination > button{position:relative;z-index:2;width:164px;height:45px;line-height:45px;font-size:20px;color:#46648b;border-radius:45px;text-align:center;transition:color 0.4s ease-out;-webkit-transition:color 0.4s ease-out}
.main .visual .visual-pagination > .active{position:relative;color:#fff}
.main .visual .visual-pagination > button:before{content:'';display:inline-block;position:relative;top:-1px;margin:0 -17px 0 0;width:17px;height:17px;background-position:-300px -350px;vertical-align:middle;opacity:0;transition:margin 0.2s ease-out, opacity 0.2s ease-out;-webkit-transition:margin 0.2s ease-out, opacity 0.2s ease-out}
.main .visual .visual-pagination > .active:before{margin-right:6px;opacity:1;transition:margin 0.4s ease-out, opacity 0.4s ease-out;-webkit-transition:margin 0.4s ease-out, opacity 0.4s ease-out}
.main .visual .visual-pagination .bg{position:absolute;left:11px;top:7px;width:164px;height:45px;border-radius:45px;background:#2e2f95}
.main .visual .visual-controls button{display:none;position:absolute;left:10px;top:50%;z-index:3;margin:-55px 0 0 0;width:100px;height:110px}
.main .visual .visual-controls button:before{content:'';position:absolute;left:50%;top:0;margin:0 0 0 -38px;width:76px;height:76px;background-position:0 -830px}
.main .visual .visual-controls button:after{content:'';position:absolute;left:50%;bottom:0;margin:0 0 0 -38px;width:76px;height:18px;background-position:0px -536px}
.main .visual .visual-controls button:hover:before{background-position:-160px -830px}
.main .visual .visual-controls .btn-next{left:auto;right:20px;width:82px}
.main .visual .visual-controls .btn-next:before{background-position:-80px -830px}
.main .visual .visual-controls .btn-next:hover:before{background-position:-240px -830px}
.main .visual.active3 .visual-controls .btn-prev:after,
.main .visual .visual-controls .btn-next:after{margin:0 0 0 -40px;width:82px;background-position:-100px -536px}
.main .visual.active2 .visual-controls .btn-next:after{margin-left:-43px;width:86px;background-position:-300px -536px}
.main .visual.active1 .visual-controls .btn-prev,
.main .visual.active3 .visual-controls .btn-next{display:none !important}


/* 우리의 독도 */
.main .visual .visual1{background:url('https://www.imbank.co.kr/cms/dokdo/file/dgb_cyberdokdo_visual1_bg1.png') no-repeat 50% 60%}
.main .visual .visual1:after{content:'';position:absolute;left:-1px;top:0;width:100%;height:100%;background:url('https://www.imbank.co.kr/cms/dokdo/file/dgb_cyberdokdo_visual1_bg2.png') no-repeat 50% 60%}
.main .visual .visual1:before{content:'';position:absolute;left:0;top:0;width:150%;height:100%;background:url('https://www.imbank.co.kr/cms/dokdo/file/dgb_cyberdokdo_visual1_bg3.png') no-repeat 0% 60%;transform:translateZ(0) translate(0, 0);-webkit-transform:translateZ(0) translate(0, 0)}
.main .visual .visual1 .tit{position:absolute;left:50%;top:50%;margin:-220px 0 0 -680px;width:578px;height:102px;transform:translateZ(0) translate(20px, 0);-webkit-transform:translateZ(0) translate(20px, 0);opacity:0;filter:blur(10px);-webkit-filter:blur(10px)}
.main .visual .visual1 .tit:before{content:'';position:absolute;left:0;top:0;width:100%;height:100%;background-position:0 -100px}
.main .visual .visual1 .objs .ship{position:absolute;left:50%;top:60%;margin-top:-120px;margin-left:500px;width:218px;height:100px}
.main .visual .visual1 .objs .ship:before{content:'';display:block;height:100%;background-position:0 -220px}
.main .visual .visual1 .objs .ship.back{left:-200px;margin-left:0;margin-top:-110px;width:158px;height:73px}
.main .visual .visual1 .objs .ship.back:before{background-position:-230px -230px}
.main .visual .visual1 .objs .bird{position:absolute;left:50%;top:60%;z-index:3;margin:-140px 0 0 -630px;width:73px;height:47px}
.main .visual .visual1 .objs .bird:before{content:'';display:block;height:100%;background-position:0 -350px}
.main .visual .visual1 .objs .bird.size0{transform:translateZ(0) translate(-10px, -10px) rotate(5deg);-webkit-transform:translateZ(0) translate(-10px, -10px) rotate(5deg)}
.main .visual .visual1 .objs .bird.size1{margin:-170px 0 0 600px;width:86px;height:30px;transform:translateZ(0) translate(-3px, -15px) rotate(5deg);-webkit-transform:translateZ(0) translate(-3px, -15px) rotate(5deg)}
.main .visual .visual1 .objs .bird.size1:before{background-position:0 -400px}
.main .visual .visual1 .objs .bird.size2{margin:-70px 0 0 -570px;width:50px;height:18px;transform:translateZ(0) translate(6px, -10px) rotate(-5deg);-webkit-transform:translateZ(0) translate(6px, -10px) rotate(-5deg)}
.main .visual .visual1 .objs .bird.size2:before{background-position:0 -440px}
.main .visual .visual1 .objs .bird.size3{margin:-360px 0 0 330px;width:158px;height:100px;transform:translateZ(0) translate(-25px, 20px) rotate(-5deg);-webkit-transform:translateZ(0) translate(-25px, 20px) rotate(-5deg)}
.main .visual .visual1 .objs .bird.size3:before{background-position:-100px -350px}
.main .visual .visual1.animate:before{animation:dokdoCloud 65s linear infinite alternate;-webkit-animation:dokdoCloud 65s linear infinite alternate}
.main .visual .visual1.animate .tit{animation:dokdoTit 1s ease-out forwards 0.3s;-webkit-animation:dokdoTit 1s ease-out forwards 0.3s}
.main .visual .visual1.animate .objs .ship.front{animation:dokdoShip 300s linear infinite forwards;-webkit-animation:dokdoShip 300s linear infinite forwards}
.main .visual .visual1.animate .objs .ship.back{animation:dokdoShipBack 300s linear infinite forwards;-webkit-animation:dokdoShipBack 300s linear infinite forwards}
.main .visual .visual1.animate .objs .bird.size0{animation:dokdoBird 3s ease-in-out infinite alternate;-webkit-animation:dokdoBird 3s ease-in-out infinite alternate}
.main .visual .visual1.animate .objs .bird.size1{animation:dokdoBird 3s ease-in-out infinite alternate;-webkit-animation:dokdoBird 3s ease-in-out infinite alternate}
.main .visual .visual1.animate .objs .bird.size2{animation:dokdoBird 2.5s ease-in-out infinite alternate 0.3s;-webkit-animation:dokdoBird 2.5s ease-in-out infinite alternate 0.3s}
.main .visual .visual1.animate .objs .bird.size3{animation:dokdoBird 4s ease-in-out infinite alternate 0.5s;-webkit-animation:dokdoBird 4s ease-in-out infinite alternate 0.5s}

/* 독도 STORY */
.main .visual .visual2{padding:100px 120px 0 120px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,0.1)}
.main .visual .visual2 .inner-visual{position:relative;padding:24% 0 0 0;border-radius:20px;background:url('https://www.imbank.co.kr/cms/dokdo/file/dgb_cyberdokdo_visual2_bg.png') no-repeat 50% 80%}
.main .visual .visual2 .txt{padding:40px 0 0 6%}
.main .visual .visual2 .txt dt{margin:0 0 12px 0;font-size:32px;font-weight:700}
.main .visual .visual2 .txt dt span{color:#2e2f95;vertical-align:baseline}
.main .visual .visual2 .txt dd{position:relative;padding:0 0 0 18px;font-size:20px;font-weight:500}
.main .visual .visual2 .txt dd:before{content:'';position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:#2e2f95}
.main .visual .visual2 .txt dd + dd{margin-top:8px}

/* 독도후원사업 */
.main .visual .visual3{position:relative;padding:130px 120px 0 130px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,0.1)}
.main .visual .visual3:before{content:'';position:absolute;right:-200px;top:-40px;width:920px;height:610px;background-position:-480px -220px}
.main .visual .visual3 .info{position:relative;margin:0 auto;max-width:1300px}
.main .visual .visual3 .info > li + li{margin-top:32px}
.main .visual .visual3 .info > li > .tit{margin:0 0 12px 0;font-size:27px;font-weight:700}
.main .visual .visual3 .info > li > .tit > *{position:absolute;margin:-3px 0 0 10px;padding:0 16px;height:34px;line-height:34px;font-size:16px;color:#2729c4;border-radius:34px;background:#e1e1f6}
.main .visual .visual3 .info > li > .tit > .blank:after{content:'';display:inline-block;position:relative;top:1px;margin:0 0 0 4px;width:16px;height:16px;background-position:-330px -350px}
.main .visual .visual3 .info > li > .txt > li{position:relative;padding:0 0 0 18px;font-size:20px;font-weight:500}
.main .visual .visual3 .info > li > .txt > li:before{content:'';position:absolute;left:0;top:7px;width:7px;height:7px;border-radius:50%;background:#2e2f95}
.main .visual .visual3 .info > li > .txt > li + li{margin-top:8px}
.main .visual .visual3 .info > li > .txt > li ul{margin-top:12px}
.main .visual .visual3 .info > li > .txt > li ul > li + li{margin-top:8px}

/* 레이어팝업 */
.layer-pop{display:none;position:absolute;left:50%;top:50%;z-index:10;margin:-300px 0 0 -600px;padding:40px 40px 40px 50px;width:1200px;height:600px;border-radius:30px;background:#fff;box-sizing:border-box}
.layer-pop > .tit{margin:0 0 30px 0;font-size:32px;font-weight:500}
.layer-pop > .btn-close{position:absolute;right:15px;top:12px;width:80px;height:80px}
.layer-pop > .btn-close:before{content:'';position:absolute;left:50%;top:50%;margin:-19px 0 0 -19px;width:38px;height:38px;background-position:-300px -400px}
.layer-pop > .tabmenu{position:relative;margin:0 0 30px 0;font-size:0}
.layer-pop > .tabmenu button{position:relative;z-index:1;margin-right:5px;padding:0 18px;font-size:28px;color:#9fa0bd;height:48px;font-weight:400;line-height:48px;border-radius:48px;transition:color 0.4s linear}
.layer-pop > .tabmenu button.active{color:#fff}
.layer-pop > .tabmenu .bg{position:absolute;left:0;top:0;width:120px;height:48px;border-radius:48px;background:#2e2f95}
.layer-pop .scroll-box{overflow:hidden;height:360px}
.layer-pop .scroll-box .pop-content{position:relative}
.layer-pop .history{display:none;padding:20px 0 20px 40px}
.layer-pop .history.active{display:block}
.layer-pop .history .list{position:relative}
.layer-pop .history .list:before{content:'';position:absolute;left:0;top:12px;width:1px;height:100%;background:#c1c1e4}
.layer-pop .history .list:after{content:'';position:absolute;left:0;bottom:-12px;width:1px;height:26px;background:#fff}
.layer-pop .history .list > li{position:relative;padding:0 0 0 188px;font-size:22px;font-weight:500}
.layer-pop .history .list > li:before{content:'';position:absolute;left:-5px;top:10px;width:12px;height:12px;border:solid 3px #2e2f95;border-radius:50%;background:#fff;box-sizing:border-box}
.layer-pop .history .list > li .tit{position:absolute;left:32px;top:0;font-size:27px;color:#3738bd;font-weight:500}
.layer-pop .history .list > li + li{margin-top:50px}
.layer-pop .history .list > li .txt > li + li{margin-top:12px}
.layer-pop .history .list > li .txt > li{position:relative;padding:0 0 0 14px}
.layer-pop .history .list > li .txt > li:before{content:'';position:absolute;left:0;top:9px;width:5px;height:5px;border-radius:50%;background:#a0a1be}
.dimed{display:none;position:fixed;left:0;top:0;z-index:9;width:100%;height:100%;background:#000;opacity:0.5}