@charset "utf-8";

.ggaedok_wrap { overflow:hidden; min-width:1450px; }
.ggaedok_wrap > div { position:relative; }
.ggaedok_wrap > div > img { position:relative; left:50%; transform:translateX(-50%); width:2000px; vertical-align:top; }
.ggaedok_wrap > div > span { position:absolute; top:0px; left:50%; width:1450px; transform:translateX(-50%); }

    .logo span img { position:absolute; }
    .logo .tit { left:50%; top:205px; width:580px; transform:translateX(-50%) scale(0); }
    .logo .ch01 { left:490px; top:880px; width:129px; animation-duration:3s;
		animation-name: rotate01;
		animation-iteration-count: infinite;
		animation-timing-function: linear; }
    .logo .ch02 { left:755px; top:633px; width:244px; animation-duration:3.5s;
		animation-name: rotate02;
		animation-iteration-count: infinite;
		animation-timing-function: linear; }
	/* action */
	.logo.action .tit { transform:translateX(-50%) scale(1); transition: all 0.4s ease-out; }
	@keyframes rotate01 {
		from { transform:rotate(0deg);}
		to { transform:rotate(-360deg); }
	}
	@keyframes rotate02 {
		from { transform:rotate(0deg);}
		to { transform:rotate(360deg); }
	}

    .con01 span img { position:absolute; }
	.con01 .key01,
	.con01 .key02,
	.con01 .key03 { transform:scale(0); }
    .con01 .key01 { left:165px; top:171px; width:303px; }
    .con01 .key02 { left:572px; top:171px; width:303px; }
    .con01 .key03 { right:150px; top:165px; width:332px; }
    .con01 .txt01 { left:50%; top:568px; width:82px; transform:translateX(-50%); }
    .con01 .txt02 { opacity:0; left:50%; top:568px; width:211px; transform:translateX(-60px); }
	/* action */
	.con01.current .key01,
	.con01.current .key02,
	.con01.current .key03 { transform:scale(1); }
	.con01.current .key01 { transition: all 0.2s ease-out; }
	.con01.current .key02 { transition: all 0.4s ease-out; }
	.con01.current .key03 { transition: all 0.8s ease-out; }
	.con01.action .txt01 { transform:translateX(-150px); transition: all 0.5s ease-out; }
	.con01.action .txt02 { opacity:1; transition: all 1s ease-out; }

    .con02 span > * { position:absolute; }
    .con02 .txt00 { left:50%; top:205px; width:470px; transform:translateX(-51%); }
    .con02 .txt01,
	.con02 .txt02 { overflow:hidden; display:inline-block; width:0px; }
    .con02 .txt01 { right:955px; top:325px; }
	.con02 .txt02 { left:830px; top:560px; }
	.con02 .txt01 img { width:440px; }
    .con02 .txt02 img { position:relative; left:-466px; width:466px; }
    .con02 .ch01 { right:92px; top:680px; width:214px; transform:scale(0); }
    .con02 .ch02 { right:47px; top:838px; width:103px; }
    .con02 span em { position:absolute; display:inline-block; background:#fff698; mix-blend-mode:multiply; border-radius:100%; transform:scale(0); }
    .con02 .big { left:495px; top:170px; width:310px; height:310px; }
    .con02 .small { left:730px; top:525px; width:100px; height:100px; }
	/* action */
	.con02.current .big { transform:scale(1); transition: all 0.3s ease-out; }
	.con02.current .small { transform:scale(1); transition: all 0.6s ease-out; }
	.con02.action .txt01 { width:446px; transition: all 0.5s ease-out; }
	.con02.action .txt02 { width:466px; transition: all 1s ease-out; }
	.con02.action .txt02 img { left:0px; transition: all 1s ease-out;  }
    .con02 .ch01.action { transform:scale(1); transition: all 0.3s ease-out; }

    .con03 .pattern { height:400px; background:#ffff90 url('../images/ggaedok_con03_bg.jpg') center repeat; background-size:62px auto; }

    .con04 span img { position:absolute; }
    .con04 span em img { position:static; }
    
    .con04 .tit { opacity:0; position:absolute; top:105px; left:45px; display:inline-block; }
    .con04 .tit img { width:200px; }
	.con04 .txt { top:345px; left:45px; width:315px; }
	.con04 .ch01 { top:325px; left:330px; width:230px; transform:scale(0); }
	.con04 .bok { top:263px; left:50%; width:1290px; transform:translateX(-52%); }
	.con04 .ch0201 { top:1080px; right:70px; width:200px; transform:scale(0); }
	.con04 .ch0202 { top:1158px; right:30px;width:595px; }
	/* action */
	.con04.current .tit { opacity:1; animation-duration:0.8s; transition:all 1s ease-in-out;
		animation-name: rotate03;
		animation-timing-function:ease-out; }
    .con04.current .ch01 { transform:scale(1); transition:all 0.2s ease-in-out; transition-delay:0.9s; }
	.con04 .ch0201.action { transform:scale(1); transition: all 0.3s ease-out; }
	
    .con05 { padding-bottom:20px; }
	.con05 span img { position:absolute; top:172px; width:215px; }
	.con05 .color01 { left:193px; }
	.con05 .color02 { left:428px;}
	.con05 .color03 { right:428px; }
	.con05 .color04 { right:193px; }
	/* action */
	.con05.current .color01 { animation-name:color_move; animation-duration:0.3s; }
	.con05.current .color02 { animation-name:color_move; animation-duration:0.7s; }
	.con05.current .color03 { animation-name:color_move; animation-duration:1.2s; }
	.con05.current .color04 { animation-name:color_move; animation-duration:1.5s; }
	
	.con06 { background:#ffff93; }
	.con06 span img { position:absolute; transform:scale(0); }
	.con06 .ch01 { width:255px; top:690px; left:-75px; }
	.con06 .ch02 { width:255px; top:480px; right:-63px; }
	.con06 .ch03 { width:213px; top:1395px; left:-35px; }
	.con06 .ch04 { width:300px; top:1137px; right:-240px; }
	/* action */
	.con06.current .ch01 { transform:scale(1); transition:all 0.2s ease-in-out; }
	.con06.current .ch02 { transform:scale(1); transition:all 0.2s ease-in-out; transition-delay:0.3s; }
	.con06.action .ch04 { transform:scale(1); transition:all 0.2s ease-in-out; }
	.con06.action .ch03 { transform:scale(1); transition:all 0.2s ease-in-out; transition-delay:0.3s; }

	.con07 span img { position:absolute; }
    .con07 span em img { position:static; }
	.con07 .tit { opacity:0; position:absolute; top:97px; right:23px; display:inline-block; }
	.con07 .tit img { width:213px; }
	.con07 .bok { opacity:0; width:1020px; top:290px; left:105px; transform:scale(0.5); }
	.con07 .ch01 { width:525px; top:1330px; right:120px; }
	.con07 .ch02 { transform:scale(0); width:202px; top:1213px; right:77px; }
	/* action */
	.con07.current .tit { opacity:1; width:230px; animation-duration:0.8s; transition:all 1s ease-in-out;
		animation-name: rotate03;
		animation-timing-function:ease-out; }
	.con07.current .bok { opacity:1; transform:scale(1); transition:all 0.6s ease-in-out; transition-delay:0.6s; }
	.con07.action .ch02 { transform:scale(1); transition: all 0.3s ease-out; }

	.con08 span img { position:absolute; width:216px; top:170px; }
	.con08 .color01 { left:475px; }
	.con08 .color02 { right:475px; }
	/* action */
	.con08.current .color01 { animation-name:color_move; animation-duration:0.6s; }
	.con08.current .color02 { animation-name:color_move; animation-duration:1.2s; }

	.con09 { background:#ffff93; }
	.con09 span img { position:absolute; }
	.con09 .bok01 { width:690px; top:250px; left:100px; }
	.con09 .bok02 { width:690px; top:252px; right:112px; }
	.con09 .ch01 { width:220px; top:640px; left:85px; }
	.con09 .ch02 { width:245px; top:375px; right:82px; }
	.con09 .ch01,
	.con09 .ch02 { transform:scale(0); }
	/* action */
	.con09.current .ch01,
	.con09.current .ch02 { transform:scale(1); transition:all 0.4s ease-in-out; }
	.con09.current .ch01 { transition-delay:0.5s;  }

	.con10 span img { position:absolute; }
	.con10 .img01 { width:453px; top:283px; left:0; /*left:293px;*/ }
	.con10 .img02 { width:400px; top:540px; right:398px; }

	.con11 span img { position:absolute; width:926px; top:1663px; left:277px; }

	.con12 { position:relative; height:1138px; }
	.con12 ul { position:absolute; top:142px; left:50%; width:1219px; transform:translateX(-50%); }
	.con12 ul img { width:1219px; }

	.con13 { position:relative; }
	.con13 span img { opacity:0; position:absolute; left:50%; transform:translate(-50%, -50px);}
	.con13 .name01 { width:226px; top:105px; }
	.con13 .name02 { width:304px; top:185px; }
	.con13 .name03 { width:194px; top:265px; }
	.con13 .ch { opacity:1; width:243px; top:462px; transform:translate(-44%, 0) !important; }
	.con13 em { position:absolute; top:568px; left:50%; transform:translateX(30%); width:36px; }
	.con13 em img { opacity:1; width:100%; transform:translate(-50%, 0) !important; }
	/* action */
	.con13.current span img { opacity:1; transform:translate(-50%, 0); }
	.con13.current .name01 { animation-name:name_move; animation-duration:0.3s; }
	.con13.current .name02 { animation-name:name_move; animation-duration:0.6s; }
	.con13.current .name03 { animation-name:name_move; animation-duration:0.9s; }
	.con13.ch_eye em img { opacity:0; }
	@keyframes name_move {
		0% { opacity:0; transform:translate(-50%, -50px); }
		100% { opacity:1; transform:translateY(-50%, 0px); }
	}
	
	/* action */
	@keyframes color_move {
		0% { transform:translateY(0px); }
		50% { transform:translateY(-50px); }
		100% { transform:translateY(0px); }
	}
    
    @keyframes rotate03 {
        from { transform:rotate(-180deg);}
        to { transform:rotate(0deg); }
    }