@charset "UTF-8";

.wrapper {overflow: hidden;}
.header {border-bottom: 1px solid #e8e8e8;}


.hide_t {position: absolute; left: 0; bottom: 0;}

/* scrolled */

.main_tit {margin-bottom: 40px; font-size: 3.125em; font-weight: 700; text-align: center;}

.sns_list {display: none !important; position: absolute; right: 0; top: 183px; z-index: 10;}
.sns_list > li {position: absolute; right: 0; top: 0;}
.sns_list > li.facebook {top: 93px;}
.sns_list > li.instagram {top: 187px;}
.sns_list > li.youtube {top: 187px;}
.sns_list > li a {display: block; width: 230px; height: 73px; line-height: 73px; font-size: 1.375em; font-weight: 700; border-radius: 40px 0 0 40px; overflow: hidden; -webkit-transition: width 0.3s; -moz-transition: width 0.3s; -o-transition: width 0.3s; transition: width 0.3s;}
.sns_list > li a:hover {width: 318px;}
.sns_list > li a:before {display: inline-block; content:'';  vertical-align: middle;}
.sns_list > li a span {display: none; opacity: 0; visibility: hidden; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.sns_list > li a:hover span {display: inline; opacity: 1; visibility: visible;}
.sns_list > li.kakao a {background-color: #f9e000; color: #3b1c1c;}
.sns_list > li.kakao a:before {width: 44px; height: 42px; margin-left: 24px; margin-right: 10px; margin-top: -5px; background: url('/images/main/kakao_ico.png') no-repeat center/contain;}
.sns_list > li.find a {background-color: #f9e000; color: #3b1c1c;}
.sns_list > li.find a:before {width: 44px; height: 48px; margin-left: 24px; margin-right: 15px; margin-top: -5px; background: url('/images/main/find_ico.png') no-repeat center/contain;}
.sns_list > li.facebook a {background-color: #3c5a9a; color: #fff; font-weight: 500;}
.sns_list > li.facebook a:before {width: 23px; height: 41px; margin-left: 30px; margin-right: 24px; margin-top: -5px; background: url('/images/main/facebook_ico.png') no-repeat center/contain;}
.sns_list > li.instagram a {background: url('/images/main/instagram_bg.jpg') no-repeat 0 0/cover; color: #fff; font-weight: 500;}
.sns_list > li.instagram a:before {width: 35px; height: 36px; margin-left: 26px; margin-right: 17px; margin-top: -2px; background: url('/images/main/instagram_ico.png') no-repeat center/contain;}
.sns_list > li.youtube a {background-color: #f11e1e; color: #fff; font-weight: 500;}
.sns_list > li.youtube a:before {width: 40px; height: 28px; margin-left: 26px; margin-right: 13px; margin-top: -2px; background: url('/images/main/youtube_ico.png') no-repeat center/contain;}


.row1 {position: relative; padding: 75px 0 63px; background-color: #ffff71;}
.row1 .container {z-index: inherit;}
.row1 .total_sch_box {position: relative; z-index: 1; -webkit-box-shadow: 4px 4px 18px 0px rgba(0, 0, 0, 0.28); -moz-box-shadow: 4px 4px 18px 0px rgba(0, 0, 0, 0.28); box-shadow: 4px 4px 18px 0px rgba(0, 0, 0, 0.28);}
.row1 .total_sch_box .img {position: absolute; left: 22px; bottom: 12px;}
.row1 .total_sch_box input {width: 100%; height: 146px; border: 5px solid #0d1945; padding-left: 364px; padding-right: 110px; font-family: inherit; font-size: 1.875em; }
.row1 .total_sch_box input::-webkit-input-placeholder {color: #969696;  font-weight: 300;}
.row1 .total_sch_box input::-moz-input-placeholder {color: #969696; font-weight: 300;}
.row1 .total_sch_box input:-ms-input-placeholder {color: #969696; font-weight: 300;}
.row1 .total_sch_box input:-moz-input-placeholder {color: #969696; font-weight: 300;}
.row1 .total_sch_box label {position: absolute; left: 56px; top: 50%; height: 54px; margin-top: -27px; line-height: 54px; padding-right: 55px; border-right: 1px solid #cecece; font-size: 1.875em; font-weight: 700;}
.row1 .total_sch_box .total_sch_btn {position: absolute; right: 44px; top: 50%; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); transform: translateY(-50%);}



.row2 {position: relative; padding: 45px 0;  background: url('/images/main/row2_bg.jpg') no-repeat 0 0/cover; text-align: center;}
.row2 .container {max-width: 1300px;}
.row2:before {display: none;}
.row2 .main_tit {display: inline-block; position: relative; margin-bottom: 60px;}
.row2 .main_tit:before {display: inline-block; content:''; position: absolute; left: 0; bottom: 0; width: 100%; height: 15px; background-color: #53d2cb; opacity: 0.3; z-index: -1;}
.row2 .shapes .shape1 {position: absolute; left: -120px; top: -84px; -webkit-animation: shape1 9s linear 0s infinite; -moz-animation: shape1 9s linear 0s infinite; animation: shape1 9s linear 0s infinite;}
.row2 .shapes .shape2 {position: absolute; left: 88px; top: 156px; -webkit-animation: shape2 1.5s linear 0s infinite alternate; -moz-animation: shape2 1.5s linear 0s infinite alternate; animation: shape2 1.5s linear 0s infinite alternate;}
.row2 .tag_list {text-align: center;}
.row2 .tag_list > li {display: inline-block; margin: 0 10px; vertical-align: middle;}
.row2 .tag_list > li a {display: block; position: relative; width: 228px; height: 260px; -webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.row2 .tag_list > li a:before {display: inline-block; content:''; position: absolute; left: 50%; top: 50%; width: 270px; height: 303px; 
background-image: url('/images/main/tag_list_bg0.png'), url('/images/main/tag_list_bg01.png'); background-repeat: no-repeat, no-repeat; background-position: center, center;
-webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}
.row2 .tag_list > li:nth-child(1) a:after {display: inline-block; content:''; position: absolute; left: 15px; top: 18px; width: 50px; height: 52px; background: url('/images/main/tag_ico01.png') no-repeat center/contain;}
.row2 .tag_list > li:nth-child(5n-3) a:before {background-image: url('/images/main/tag_list_bg0.png'), url('/images/main/tag_list_bg02.png');}
.row2 .tag_list > li:nth-child(5n-2) a:before {background-image: url('/images/main/tag_list_bg0.png'), url('/images/main/tag_list_bg03.png');}
.row2 .tag_list > li:nth-child(5n-1) a:before {background-image: url('/images/main/tag_list_bg0.png'), url('/images/main/tag_list_bg04.png');}
.row2 .tag_list > li:nth-child(5n) a:before {background-image: url('/images/main/tag_list_bg0.png'), url('/images/main/tag_list_bg05.png');}
.row2 .tag_list > li:nth-child(1) .txt:before {position: absolute; left: 0; top: -40px; width: 100%; content:'인기검색어'; font-size: 18px; }
.row2 .tag_list > li .txt {position: absolute; left: 0; right: 0; top: 50%; margin-top: 10px; color: #fff; font-size: 2.188em; font-weight: 700; transform: translateY(-50%);}
.row2 .tag_list > li .txt em {display: block; margin-top: 20px; font-size: 18px; font-weight: 400; opacity: 0.7;
-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.row2 .tag_list > li .txt em:after {opacity: 0; display: inline-block; content:''; position: absolute; left: 50%; bottom: -22px; width: 17px; height: 14px; margin-left: -8.5px; background: url('/images/main/tag_ico02.png') no-repeat center/contain;
-webkit-transition: all 0.3s; -moz-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.row2 .tag_list > li:hover a {-webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px);}
.row2 .tag_list > li:hover a .txt em {opacity: 1;}
.row2 .tag_list > li:hover a .txt em:after {opacity: 1;}



.row3 {position: relative; padding: 65px 0 90px; background-color: #0d3b66; text-align: center;}
.row3:after {content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 210px; background-image: url('/images/main/row3_shadow.png');}

.row3 .main_tit {display: inline-block; position: relative; margin-bottom: 60px; color: #fff;}

.row3 .shapes .shape3 {position: absolute; right: -280px; top: -193px; -webkit-animation: shape1 10s linear 0s infinite; -moz-animation: shape1 10s linear 0s infinite; animation: shape1 10s linear 0s infinite;}
.row3 .shapes .shape4 {position: absolute; right: 166px; top: 89px;}
.row3 .shapes .shape5 {position: absolute; left: -58px; bottom: 94px;}



/*신규 스타일*/
.row4 .octagon_btn_wrap {padding: 60px 0; overflow: hidden;}
.row4 .octagon_btn_wrap .octagon_btn {position: relative; float: left; width: 14.8%; margin: 0 2.1% 0 0; padding-bottom: 14.8%; }
.row4 .octagon_btn_wrap .octagon_btn:last-child {margin: 0;}
.row4 .octagon_btn_wrap .octagon_btn a {position: absolute; left: 0; top: 0; left: 0; bottom: 0; display: block; width: 100%; height: 100%; text-align: center; background-repeat: no-repeat; -webkit-background-size: cover; background-size: cover; -webkit-transition: all 0.3s;
-moz-transition: all 0.3s; -ms-transition: all 0.3s; -o-transition: all 0.3s; transition: all 0.3s;}
.row4 .octagon_btn_wrap .octagon_btn a p {position: absolute; top: 50%; width: 100%; color: #fff; font-size: 1.750em; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}

.row4 .octagon_btn_wrap .octagon_btn.btn1 a {background-image: url('/images/main/octagon_img1.png');}
.row4 .octagon_btn_wrap .octagon_btn.btn2 a {background-image: url('/images/main/octagon_img2.png');}
.row4 .octagon_btn_wrap .octagon_btn.btn3 a {background-image: url('/images/main/octagon_img3.png');}
.row4 .octagon_btn_wrap .octagon_btn.btn4 a {background-image: url('/images/main/octagon_img4.png');}
.row4 .octagon_btn_wrap .octagon_btn.btn5 a {background-image: url('/images/main/octagon_img5.png');}
.row4 .octagon_btn_wrap .octagon_btn.btn6 a {background-image: url('/images/main/octagon_img6.png');}


.row4 .octagon_btn_wrap .octagon_btn:hover a {-webkit-transform: translateY(-30px); -moz-transform: translateY(-30px); -ms-transform: translateY(-30px); -o-transform: translateY(-30px); transform: translateY(-30px);}


@-webkit-keyframes shape1 {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}
@-moz-keyframes shape1 {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}
@keyframes shape1 {
    from {
        -webkit-transform: rotate(0deg);
        -moz-transform: rotate(0deg);
        -o-transform: rotate(0deg);
        transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(-360deg);
        -moz-transform: rotate(-360deg);
        -o-transform: rotate(-360deg);
        transform: rotate(-360deg);
    }
}

@-webkit-keyframes shape2 {
    from {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        opacity: 0.5;
    }
    to {
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 1;
    }
}
@-moz-keyframes shape2 {
    from {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        opacity: 0.5;
    }
    to {
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 1;
    }
}
@keyframes shape2 {
    from {
        -webkit-transform: scale(1);
        -moz-transform: scale(1);
        -o-transform: scale(1);
        transform: scale(1);
        opacity: 0.5;
    }
    to {
        -webkit-transform: scale(1.5);
        -moz-transform: scale(1.5);
        -o-transform: scale(1.5);
        transform: scale(1.5);
        opacity: 1;
    }
}





/*신규 스타일*/

.row2_link_btn_wrap {}
.row2_link_btn_wrap .btn_box {position: relative; float: left; width: 23.5%; margin:0 2% 0 0; padding-bottom: 36%; border-radius:10px; -webkit-box-shadow: 0px 11px 24px 0px rgba(0, 0, 0, 0.24); -moz-box-shadow: 0px 11px 24px 0px rgba(0, 0, 0, 0.24); box-shadow: 0px 11px 24px 0px rgba(0, 0, 0, 0.24);}

.row2_link_btn_wrap .btn_box a {position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; padding: 40px 0 90px;}
.row2_link_btn_wrap .btn_box a .img_box {position: relative; width: 100%; height: 100%; }
.row2_link_btn_wrap .btn_box a .img_box:after {display: inline-block; content:''; position: absolute; left: 50%; top: 50%; width: 74px; height: 74px; background: url('/images/main/new_row3_play_ico.png') no-repeat center/contain; -webkit-transform: translate(-50%,-50%); -moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%);}

.row2_link_btn_wrap .btn_box a .img_box .inner_box {position: absolute; left: 0; top: 50%; width: 100%; padding: 0 35px; font-size: 0; text-align: center; -webkit-transform: translateY(-50%); -moz-transform: translateY(-50%); -ms-transform: translateY(-50%); -o-transform: translateY(-50%); transform: translateY(-50%);}
.row2_link_btn_wrap .btn_box a .img_box .inner_box img {width: auto !important; height: auto !important;}
.row2_link_btn_wrap .btn_box a p {position: absolute; left: 0; bottom: 40px; width: 100%; font-size:2.188em; color: #fff; font-weight: 700; text-shadow: 2px 2px 1px rgba(0, 0, 0, 0.2);}


.row2_link_btn_wrap .btn_box.box1 {background-color: #f3aeb3; }

.row2_link_btn_wrap .btn_box.box2 {background-color: #8ccfe8; }
.row2_link_btn_wrap .btn_box.box3 {background-color: #7adfc2; }
.row2_link_btn_wrap .btn_box.box4 {background-color: #bfbef2; margin: 0 ;}


.svg_cont_wrap {position: relative; width: 100%; }		
.svg_cont_wrap .svg_cont {position: absolute; width: 50%; }
.svg_cont_wrap .svg_cont1 {top: 0; left: 0; height: 100%;}
.svg_cont_wrap .svg_cont2 {top: 0; left: 25%; height: 50%;}
.svg_cont_wrap .svg_cont3 {top: 0; right: 0; height: 50%;}
.svg_cont_wrap .svg_cont4 {top: 50%; right: 0; height: 50%;}
.svg_cont_wrap .svg_cont5 {bottom: 0; left: 25%; height: 50%;}

.svg_cont_wrap .svg_cont .R_cont {position: absolute; left: 50%; top: 50%; display: table; -webkit-transform: translate(-50%,-50%);
-moz-transform: translate(-50%,-50%); -ms-transform: translate(-50%,-50%); -o-transform: translate(-50%,-50%); transform: translate(-50%,-50%); z-index: 111;}

.svg_cont_wrap .svg_cont1 .R_cont {}
.svg_cont_wrap .svg_cont2 .R_cont {top: 30%;}
.svg_cont_wrap .svg_cont3 .R_cont {top: 70%;}
.svg_cont_wrap .svg_cont4 .R_cont {top: 40%;}
.svg_cont_wrap .svg_cont5 .R_cont {top: 70%;}


.svg_cont_wrap .svg_cont .R_cont .img {display: table-cell; vertical-align: middle;	}
.svg_cont_wrap .svg_cont .R_cont .img img {}
.svg_cont_wrap .svg_cont .R_cont p {display: table-cell; padding-left: 15px; font-size:1.500em; font-weight: 700; vertical-align: middle; word-break:keep-all;}


.svg_cont_wrap .svg_cont .R_cont.over {-webkit-transform: translate(-50%,-50%) scale(1.3); -moz-transform: translate(-50%,-50%) scale(1.3); -ms-transform: translate(-50%,-50%) scale(1.3); -o-transform: translate(-50%,-50%) scale(1.3); transform: translate(-50%,-50%) scale(1.3); z-index: 111;}

.svg_cont_wrap .svg_cont2 .R_cont.over {top: 30%;}
.svg_cont_wrap .svg_cont3 .R_cont.over {top: 70%;}
.svg_cont_wrap .svg_cont4 .R_cont.over {top: 35%;}
.svg_cont_wrap .svg_cont5 .R_cont.over {top: 70%;}





.svg_cont_wrap #svg_wrap {position: relative; width: 100%; z-index: 10;}
.is-ie .svg_cont_wrap #svg_wrap {  height: 490px;}
.st1 {fill:url(#pattern1);}
.st2 {fill:url(#pattern2);}
.st3 {fill:url(#pattern3);}
.st4 {fill:url(#pattern4);}
.st5 {fill:url(#pattern5);}