@charset "utf-8";
/* CSS Document */
@import url('//fonts.googleapis.com/css?family=Noto+Sans+KR&display=swap');
@import url('//fonts.googleapis.com/css?family=Nanum+Gothic&display=swap');
/*common*/
*{ margin:0; padding:0; border:none; outline:none;}
body{ margin:0 auto; font-size:15px; overflow-x:hidden; font-family: 'Noto Sans KR', sans-serif;-ms-overflow-style: none;}
body::-webkit-scrollbar{display:none;}

ul, ol{ list-style:none;}
form, input{ outline:none; border:none; background:rgba(255,255,255,0); font-size:1rem; }
input{font-size: 12px; color: #fff;}
::scrollbar { display:none;}
img{ display:block !important;}
#wrap{ width:100vw; height:100vh; padding:0 20px 0 5px; position:relative; }
.finish{ width:100vw; height:115vh; position: absolute; left: 0; top: 0; background: linear-gradient(-45deg, #f6f7ff, #e9ebff, #cbd0fd, #b9bfff, #92ccff, #c3e2ff, #e8f3fe); background-size: 200% 200%; animation: Gradient 5s ease infinite alternate;
background-position:0% 0%
}

@keyframes Gradient {
0% {
background-position: 0% 0%
}
50% {
background-position: 50% 50%
}
100% {
background-position: 100% 100%
}
}

header{ width:100%; height:9.259259259259259%; float:left; position:relative; z-index:9999;}
.main{ width:80%; height:95%; float:left; overflow:hidden; position:relative;}
.right_aside{ width:17%; height:105.74074074074074%; float:left; position:relative;}
/*footer*/
.footer{width: 90%; position: absolute; top: 100%; display: flex; align-items: center; justify-content: center; margin-top: 48px; opacity: 0.9;}
.f_left{width: 10%;}
.f_right{width: 60%; color: #000; opacity: 0.6; text-align: center;}
.f_right_inner{margin-right: 5px;}

/*title_paattern*/
#title_p{ height:100%; position:absolute; top:0; right:1.29%; z-index:99; overflow:hidden; background:url(../img/title_pattern001.png) no-repeat center center; background-size: 100% 100%;}
#title_p .pay{ display:none; width:7%; position:fixed; right:2%; bottom:4%;}
#title_p .pay a{ display:block; width:100%; height:100%;}
#title_p .pay a > img{ width:100%;}
#title_p.home .pay{ display:block;}
#title_p.home{ width:33%; height: 115vh; background:url(../img/pattern01.png) no-repeat center center; background-size: 100% 100%;}
#title_p.company{ width:33%; background:url(../img/pattern02.png) no-repeat center center; background-size: 100% 100%;}
#title_p.p_wm{ width:33%; background:url(../img/pattern03.png) no-repeat center center; background-size: 100% 100%;}
#title_p.p_display{ width:33%; background:url(../img/pattern03.png) no-repeat center center; background-size: 100% 100%;}
/*#title_p.p_daon{ width:30%; background:url(../img/pattern04.png) no-repeat center center; background-size: 100% 100%;}*/
#title_p.partner{ width:33%; background:url(../img/pattern04.png) no-repeat center center; background-size: 100% 100%;}
#title_p.contact{ width:33%; background:url(../img/pattern05.png) no-repeat center center; background-size: 100% 100%;}

/*header*/
/*header header_left*/
#wrap header .header_left{ width:45%; height:100%; float:left; position:relative;}
#wrap header .header_left .logo{ display:block; width:12%; position:absolute; left:22px; top:20px;}
#wrap header .header_left .logo>img{ width:100%;}
/*header header_right*/
#wrap header .header_right{ width:50%; height:100%; float:left; position:relative; padding-left: 70px;}
#wrap header .header_right .login_btn{ display:none !important; width:45px; position:absolute; top:15%; right:2.3%; cursor:pointer;}
#wrap.home header .header_right .login_btn{ display:block !important;}

#wrap header .header_right .login_btn>img{ width:100%;}
#wrap header .header_right .login_box{ display:none; width:135px; font-size:0.8rem; z-index:999; position:absolute; right:9%; top:-4%; font-weight:500; opacity:0;}


#wrap header .header_right .login_box .id_box{ display:block; width:100%; height:24px; line-height:23px; color:#fff; border-bottom:0.5px solid #fff; clear:both;}
#wrap header .header_right .login_box .id_box .id{ width:70%;}
#wrap header .header_right .login_box .pw_box{ display:block; width:100%; height:24px; line-height:23px; color:#fff; border-bottom:0.5px solid #fff; clear:both;}
#wrap header .header_right .login_box .pw_box .pw{ width:50%; }
#wrap header .header_right .login_box .login_button{ margin-top:5px;  font-size:0.7rem; letter-spacing:0.1px; font-weight:500; color:#000; background:#fff; padding:5px 5px; cursor:pointer; border-radius:2px; float:right;}

/*.main article common*/
.main>article{ width:100%; height:100%; position:absolute;}

/*.main .home*/
.main .home{ opacity:1; position:relative; display:none; z-index:0;}
.main .home.on{ display:block; animation:home 3s normal; z-index:999;}
@keyframes home{
0%{ opacity:0;}
100%{ opacity:1;}
}
.main .home .main_title{ display:block; width:40%; position:absolute; left:13.5%; top:13.5%;}
.main .home .main_title img{ width:100%;}

/*.main .company*/
.main .company{ display:none; z-index:0; overflow:hidden;}
.main .company.on{ display:block; animation:home 1.5s normal; z-index:999;}
.main .company h2{ display:block; width:28%; margin:2% auto 0 auto;}
.main .company h2>img{ width:100%;}
.main .company .company_container{  width:670px; height:440px; margin:4% auto 0 auto; overflow:hidden; letter-spacing:-0.1px; font-size: 12px;}/*width:760px*/
.main .company .company_container .text_box{ display:inline-block; width:210px; height:210px; float:left; margin-right:20px; margin-bottom:20px; background:url(../img/circle.png) no-repeat center center; background-size:98% 98%; position:relative;}
.main .company .company_container .text_box3, .main .company .company_container .text_box6{ margin-right:0;}
.main .company .company_container .text_box4, .main .company .company_container .text_box5, .company .company_container .text_box6{ margin-bottom:0;}
.main .company .company_container .text_box p{ font-family: 'Nanum Gothic', sans-serif; display:block; width:100%; height:22%; line-height:20px; font-size:0.85rem; color:#FFF; text-align:center; position:absolute; top:0; bottom:0; margin:auto 0;}
.main .company .company_container .text_box:last-child p{ height:44%;}
.main .company .company_container .text_box p strong{ display:block; font-size:0.9rem;}

/*.main .p_wm*/
.main .p_wm{ display:none; z-index:0; overflow:hidden;}
.main .p_wm.on{ display:block; animation:home 2.5s normal; z-index:999;}
.main .p_wm .wm_img{ display:block; width:64%; margin:5% auto 0 auto;}
.main .p_wm .wm_img > img{ width:100%;}
.main .p_wm .wm_text_container{ width:60%; margin:0 auto; padding-left:10%; letter-spacing: -0.5px;}
.main .p_wm .wm_text_container:after{ display:block; content:''; clear:both;}
.main .p_wm .wm_text_container .wm_text_box{ width:47%; float:left;}
.main .p_wm .wm_text_container .wm_text_box:nth-child(2){ float:right;}
.main .p_wm .wm_text_container .wm_text_box>img{ width:11%;}
.main .p_wm .wm_text_container .wm_text_box > h2{ font-size:1.3rem; color:#999; font-weight:400; line-height:33px; margin:5px 0 30px 0;}
.main .p_wm .wm_text_container .wm_text_box > h2 strong{ display:block; color:#000; font-weight:700;}
.main .p_wm .wm_text_container .wm_text_box p{ font-size:0.95rem; font-weight:400;}

/*.main .process common*/
.main .process{ display:none; padding-left:15.5%; z-index:999; overflow:hidden;}

.main .process > .text_box{ width:41%; height:100%; float:left; box-sizing:border-box; padding-top:2%;}
.main .process > .text_box h2{ display:block; width:70%; overflow:hidden; margin-bottom:2%;}
.main .process > .text_box h2 > img{ width:100%; margin-left: -3.73%;}
.main .process > .text_box p{ font-size:1rem; line-height:30px; font-weight:400;}
.main .process > .text_box p strong{ font-size:1.15rem; font-weight:700;}
.main .process > .text_box .proposal{ width:100px; margin-top:5%;}
.main .process > .text_box .proposal a{ display:block; width:100%; height:100%;}
.main .process > .text_box .proposal a > img{ width:100%;}
.main .process > .img_box{ width:45%; height:100%; float:left; position:relative; top:-4%;}
.main .process > .img_box .img_right{ width: 20%; height:18.04789460029553%; left:48%; transform:translateY(-100%); cursor:pointer;}/*160/886.53*100*/

	/*img_left & img_right common*/
.main .process > .img_box > div{ float:left; position:absolute; top:0; bottom:0; margin:auto 0;}
.main .process > .img_box > div > img{ width:100%;}

.main .process > .img_box .img_left{ width: 40%; height:36.09578920059107%; left:2%; top:0; transform:translateY(-50%); animation:move_process 0.7s alternate infinite; cursor:pointer;}/*320/886.53*100*/

@keyframes move_process{
0%{ top:30px;}

100%{ top:0;}
}

.main .process > .img_box .img_right{ width: 20%; height:18.04789460029553%; left:50%; transform:translateY(-100%); cursor:pointer;}/*160/886.53*100*/

/*.main .p_display*/
.main .p_display.on{ display:block; animation:home 2.5s normal; padding-top:8%;}
.main .p_display > .text_box h2{ width:60%;}

/*.main .p_daon
.main .p_daon.on{ display:block; animation:home 2.5s normal; padding-top:8%;}
*/
/*.main .partner*/
.main .partner{ opacity:0; z-index:0; overflow:hidden;}
.main .partner.on{ animation:home 1.5s normal; opacity:1; z-index:999;}
/**************************************************************************************************************************************************************/
.main .partner>div{ position:relative;}
	/*.main .partner slick-dots*/
.main .partner .slick-slider .slick-dots{ width:55px; position:absolute; bottom:2%; left:55%; transform:translateX(-50%);}
.main .partner .slick-slider .slick-slide{ width:100%; height:100%;}
.main .partner .slick-slider>.first_box{ display:none;}
.main .partner .slick-slider .slick-dots:after{ display:block; content:''; clear:both;}
.main .partner .slick-slider .slick-dots > li{ width:10px; height:10px; margin-right:5px; float:left; text-indent:-9999px; background:rgba(0, 0, 0, 0.1); border-radius:50%; background-size:100% 100%; transition:all 1s;}
.main .partner .slick-slider .slick-dots > li:last-child{ margin-right:0;}
.main .partner .slick-slider .slick-dots > li.slick-active{ background:url(../img/partner_btn.png) no-repeat center center; background-size:100% 100%;}
.main .partner .slick-slider .slick-dots > li:hover{ background:url(../img/partner_btn.png) no-repeat center center; background-size:100% 100%;}
	/*.main .partner slick-arrow*/
.main .partner .slick-slider .slick-arrow{ width:30px; height:30px; text-indent:-9999px; z-index:999; position:absolute; transform:translateY(-100%); background:url(../img/arrow.png) no-repeat center center; background-size:100% 100%; transition:all 0.4s;}
.main .partner .slick-slider .slick-next{ right:2%; top:50%; }
.main .partner .slick-slider .slick-prev{ left:12%; top:50%; transform:translateY(-100%) rotate(180deg);}
.main .partner .slick-slider .slick-next:hover{ background:url(../img/arrow2.png) no-repeat center center; background-size:100% 100%;}
.main .partner .slick-slider .slick-prev:hover{ background:url(../img/arrow2.png) no-repeat center center; background-size:100% 100%;}
/**************************************************************************************************************************************************************/
/*.partner .media common*/
.main .partner div .media_logo{ width:50%; height:100%; float:left;}
.main .partner div .media_logo .media_img_box{ width:67%; margin:29% 0 0 35%;}
.main .partner div .media_logo .media_img_box > img{ width:100%;}

/*.partner .imad_history common*/
.main .partner div .imad_history{ width:50%; height:100%; float:left;}
.main .partner div .imad_history .history_img_box{ width:80%; margin:6.5% 0 0 7%;}
.main .partner div .imad_history .history_img_box > img{ width:100%;}

/*.main .contact*/

.main .contact{ z-index:0; opacity:0;}
.main .contact.on{ animation:home 2.5s normal; z-index:999; opacity:1;}
.main .contact .contact_wrap::-webkit-scrollbar{ display: none;}
.main .contact .contact_wrap{ width:100%; height:100%; -ms-overflow-style:none; overflow:scroll !important;}
/*.main .contact .contact_wrap .contact_action_box*/
.main .contact .contact_wrap .contact_action_box{ width:40%; height:100%; margin:0 auto;}
.main .contact .contact_wrap .contact_action_box:after{ display:block; content:''; clear:both;}
.main .contact .contact_wrap .contact_action_box .contact_btn{ width:15%; float:left; margin:50% 10% 0 0; cursor:pointer; transition:all 1s; position:relative;}
.main .contact .contact_wrap .contact_action_box .contact_btn:last-child{ margin:50% 0 0 0;}
.main .contact .contact_wrap.on .contact_action_box{ height:530px;}
.main .contact .contact_wrap.on .contact_action_box .contact_btn1{ transform:translateY(-40%);}
.main .contact .contact_wrap.on .contact_action_box .contact_btn2{ transform:translateY(80%);}
.main .contact .contact_wrap.on .contact_action_box .contact_btn3{ transform:translateY(-40%);}
.main .contact .contact_wrap.on .contact_action_box .contact_btn4{ transform:translateY(80%);}
.main .contact .contact_wrap .contact_action_box .contact_btn > img { width:100%;}
.main .contact .contact_wrap .contact_action_box .contact_btn > span{ display:block; width:300%; position:absolute; top:-156%; right:-300%; z-index:9999; opacity:0; transition:all 1s;}
.main .contact .contact_wrap .contact_action_box .contact_btn2 > span,
.main .contact .contact_wrap .contact_action_box .contact_btn4 > span{ top:97%; right:100%;}
.main .contact .contact_wrap.on .contact_action_box .contact_btn > span{ opacity:1;}
.main .contact .contact_wrap .contact_action_box .contact_btn > span > img{ width:100%;}

.main .contact .contact_wrap .contact_address_box{ display:block; width:60%; margin:25% auto 0 auto;}
.main .contact .contact_wrap.on .contact_address_box{ margin:17% auto 0 auto; transition:all 1s;}
.main .contact .contact_wrap .contact_address_box .map{ width:100%;}
.main .contact .contact_wrap .contact_address_box .map > img{ width:70%;}

/*.right_aside*/
#wrap .right_aside nav{ width:40%; position:relative; cursor:pointer; z-index:999; transition:all 0.5s;}
#wrap.home .right_aside nav{ left:-50%; top:30%;}
#wrap .right_aside nav.home{ left:-55%; top:24%;}

#wrap.company .right_aside nav{left:-20%; top:39%;}
#wrap .right_aside nav.company{ left:-25%; top:33%;}

#wrap.p_wm .right_aside nav{ left:5%; top:33%;}
#wrap .right_aside nav.p_wm{ left:-12%; top:26%;}

#wrap.p_display .right_aside nav{ left:5%; top:33%;}
#wrap .right_aside nav.p_display{ left:-12%; top:26%;}

#wrap.partner .right_aside nav{left:17%; top:19%;}
#wrap .right_aside nav.partner{ left:-5%; top:18%;}

#wrap.contact .right_aside nav{left:-40%; top:31.5%;}
#wrap .right_aside nav.contact{ left:-61%; top:26.5%;}

#wrap .right_aside nav .menu_bar{ width:100%; height:30px; position:relative; z-index:999;}
#wrap .right_aside nav .menu_bar>.menu_txt{ display:inline-block; width:50%; height:100%; font-weight:700; line-height:32px; font-size:1.3rem; color:#003889; position:absolute; left:0;}
#wrap .right_aside nav .menu_bar:hover>.menu_txt{ color:#002863;}
#wrap .right_aside nav .menu_bar>.menu_btn{ display:inline-block; width:22%; height:60%; position:absolute; right:13px; padding-top: 7px;}
#wrap .right_aside nav .menu_bar>.menu_btn>img{ width:100%; height:100%;}
#wrap .right_aside nav .menu_close{ display:none; width:22px; height:18px; position:absolute; right:-25px; top:-20px;}
#wrap .right_aside nav .menu_close > img{ width:100%;}
/*background:url(../img/title_btn_bar2.png) no-repeat center center; background-size:100% 100%;*/
#wrap .right_aside nav .menu{ display:none; width:100%; text-align:right;}
#wrap .right_aside nav .menu:after{ display:block; content:''; clear:both;}
#wrap .right_aside nav .menu>li{ width:100%; font-size:1rem; font-weight:600; margin-bottom:9px; transition:all 0.5s;}
#wrap .right_aside nav .menu>li:last-child{ margin:0;}
#wrap .right_aside nav .menu>li:hover{ color:#002862;}
#wrap .right_aside nav .menu>li:hover > span{ border-bottom:1.5px solid #0049b3;}
#wrap .right_aside nav .menu>li.on{ color:#0049b3;}
#wrap .right_aside nav .menu>li.on > span{ border-bottom:1.5px solid #0049b3;}
#wrap .right_aside nav .menu>li .sub{ display:none; margin:7% 0 2% 0;}
#wrap .right_aside nav .menu>li .sub>li{ font-size:0.7rem; color:#333; text-align:right;}
#wrap .right_aside nav .menu>li .sub>li.on{ color:#0049b3;}
#wrap .right_aside nav .menu>li .sub>li:hover{ color:#0049b3;}

@media (max-width:1625px){
/*title_paattern*/
#title_p{ right:1.53%;}

/*.main .company*/
.main .company .company_container{  width:610px; height:400px;}/*width:760px*/
.main .company .company_container .text_box{ width:190px; height:190px;}

/*.main .contact .contact_wrap .contact_action_box 로케이션 타이틀 부분*/
.main .contact .contact_wrap .contact_address_box{ margin:23.4% auto 0 auto;}
.main .contact .contact_wrap.on .contact_address_box{ margin:8% auto 0 auto;}

/*.main .p_wm*/
.main .p_wm .wm_img{ margin:4% 0 2% 14%;}
.main .p_wm .wm_text_container{ margin:0 0 0 10%;}
.main .p_wm .wm_text_container .wm_text_box > h2{ margin:5px 0 30px 0;}

/*.partner .imad_history common*/

/**************************************************************************************************************************************************************/
/*.right_aside*/
#wrap .right_aside nav{ width:37%;}
#wrap .right_aside nav .menu>li{ margin-bottom:3px;}
}