@charset 'utf-8';
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@100;200;300;400;500;600;700&family=Poppins:wght@100;200;300;400;500;600;700&display=swap');


body{line-height: 1.25; font-size: 18px; font-weight: 400; color: #333; font-family: 'Poppins', 'Noto Sans KR', sans-serif; }
* {box-sizing: border-box}
body a{color: #333}
.ellipsis{display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis}

sub, sup {
  /* Specified in % so that the sup/sup is the
     right size relative to the surrounding text */
  font-size: 75%;
 
  /* Zero out the line-height so that it doesn't
     interfere with the positioning that follows */
  line-height: 0;
 
  /* Where the magic happens: makes all browsers position
     the sup/sup properly, relative to the surrounding text */
  position: relative;
 
  /* Note that if you're using Eric Meyer's reset.css, this
     is already set and you can remove this rule */
  vertical-align: baseline;
}
 
sup {
  /* Move the superscripted text up */
  top: -0.5em;
}
.mb_only{display: none;}

/***** header *****/
#header{}
#header .wrap{width: 100%}

#header .top_menu .con{width: 1400px; height: 100px; margin: 0 auto; display: flex;justify-content: space-between; align-items: center;}
#header .top_menu .t_menu{opacity: 0.7; font-size: 0.85em;}
#header .top_menu .t_menu li{float: left}
#header .top_menu .t_menu li:first-child:after{display: inline-block; content: ""; width: 1px; height: 15px;background-color: #ddd;margin: 0 20px;}

#header nav{width: 1400px; margin: 0 auto; padding: 22px 0px;}
#header nav > ul{display: flex; justify-content: space-between; align-items: center;}
#header nav > ul > li{position: relative; width: 20%;text-align: center}
#header nav > ul > li > a:hover{color: #e2b8b5}
#header nav .depth{display: none; position: absolute; width: 100%; top: 80px; text-align: center; z-index: 20;}
#header nav .depth li{padding-top: 20px}
#header nav .depth li:first-child{padding-top: 0}
#header nav .depth li a{font-size: 0.85em; color: #fff}
#header nav .depth li a:hover{color: #e2b8b5}
#header nav .depth_bg{display: none; position: absolute; width: 100%; height: 360px;top: 167px; left: 0; background-color: #fff;background-color: #8e8b67; opacity: .96; z-index: 10}

#header .btn_side{display: none}
.btn_side{display: none;z-index: 100}
.btn_side a{position: relative;top: 0;left: 0;margin: 0 auto;display: block;padding: 10px}
.btn_side span{display: block;width: 30px;height: 2px;margin:6px 0; background-color: #4c40b1;}


/* side_menu */
#side_wrap {width:100%;height: 100%; position:fixed; top: 0;right: -100%; z-index:9999; padding: 40px; color: #fff; background:#fff; overflow: scroll;text-align: left; background: url(/16kjprs/assets/img/common/side_menu_bg.png) no-repeat center top / cover}


#side_wrap .side_top{display: flex; justify-content: right; }
#side_wrap .side_top > a{color: #fff; font-size: 0.85em;}
#side_wrap .side_top > a:first-child:after{display: inline-block; content: ""; width: 1px; height: 12px; background-color: #fff; margin: 0 20px;}
#side_wrap .side_top .side_close{margin-left: 20px; display: inline-block; width: 28px; color: #fff; opacity: .6; cursor: pointer}
/*
#side_wrap .side_top .side_close{position: absolute; top: 0; right: 0; display: block; width: 28px; color: #fff; opacity: .6; cursor: pointer}
#side_wrap .side_top a{position: absolute; top: 30px; right: 20px; display: block; width: 27px; color: #fff;}
*/


#side_wrap .side_menu{display: inline-block; padding-top: 15px; line-height: 1.5; }
#side_wrap .box{padding-top: 50px;}
#side_wrap .box:first-child{padding-top: 0}
#side_wrap .box .menu{color: #fff; font-size: 1.3em;font-weight: 700;}
#side_wrap .box .depth:after{display: block;content: "";clear: both}
#side_wrap .box .depth li{float: left;padding-right: 20px}
#side_wrap .box .depth li:last-child{padding-right: 0}
#side_wrap .box .depth li a{position: relative; display: block; padding: 8px; color: #fff}
#side_wrap .box .depth li a:before{position: absolute; top: 18px;  left: 0;  content: ""; display: block; width: 3px; height: 3px; background-color: #f3b91b;}
#bg { width:100%; height:100%; position:fixed; top:0; bottom:0; background:#000; opacity:0.8; display:none; z-index:1000; }

#side_wrap .box.active .menu{color: #ffdb66 !important; }
#side_wrap .box.active .depth{display: block;}
#side_wrap .menu_inquiry{background-color: #5cbbb8;}
#side_wrap .menu_inquiry a{ color: #fff;}
#side_wrap .menu_inquiry a img{margin-right: 10px;}



/***** footer *****/

/* logo_sect */
.logo_sect .wrap{width: 100%; padding: 0 0 60px}
.logo_sect .sbj{position: absolute; font-weight: 600}
.logo_sect .con{position: relative;}

.logo_sect .top_box{border-top: 1px solid #ccc;}

.logo_sect .top_box > div,
.logo_sect .btm_box > div{width: 1400px; margin: 0 auto}

/*.logo_sect .top_box{border-bottom: 1px solid #ddd; border-top: 1px solid #ddd;}*/
.logo_sect .top_box .cb{padding: 30px 0;     display: flex;}
.logo_sect .top_box .cb > div{position: relative; float: left;display: flex; align-items: center;}
.logo_sect .top_box .host{width: 70%}
.logo_sect .top_box .support{width: 30%}
.logo_sect .top_box .cb span{display: block}
.logo_sect .top_box .host .con{padding-left: 140px}
.logo_sect .top_box .host a:first-child{margin-right: 20px;}
.logo_sect .top_box .support .con{padding-left: 170px;}


.logo_sect .btm_box{padding-top: 40px}
.logo_sect .btm_box .sponsor > .con{padding-left: 180px;}
.logo_sect .btm_box li{position: relative; float: left; width: 42%; margin-bottom: 30px;}
.logo_sect .btm_box li .categ{position: absolute; display: block; width: 105px; padding: 5px 10px; text-align: center; color: #fff; border-radius: 20px;font-size: 0.9em;}
.logo_sect .btm_box li.dia .categ{background-color: #3fbccf;}
.logo_sect .btm_box li.plat .categ{background-color: #89a663;}
.logo_sect .btm_box li.gold .categ{background-color: #c9a95c;}
.logo_sect .btm_box li.silver .categ{background-color: #9a9a9a;}
.logo_sect .btm_box li.bronze .categ{background-color: #705648;}
.logo_sect .btm_box li .con{padding-left: 140px;}


#footer{background-color: #34333c}
#footer .wrap{position: relative; width: 1400px; margin: 0 auto; padding: 60px 0; color: #bbb;font-size: 0.9em}
#footer .f_logo{position: absolute}
#footer p{line-height: 1.5; padding-left: 120px;}
#footer p span{font-weight: 600}

#quick_menu{position: fixed; right: 0; bottom: 60px; border-top-left-radius: 50px; ;border-bottom-left-radius: 50px; overflow: hidden; z-index: 20}
#quick_menu li a{display: block; padding: 30px 20px; text-align: center; font-size: 0.8em; color: #fff; background-color: #4b78b0}
#quick_menu li a span{display: block;}
#quick_menu li a .img{padding-bottom: 10px;}

#quick_menu li:first-child a{background-color: #3b669a}
#quick_menu li:last-child a{padding: 35px 20px; border-top: 1px solid #82a1c6;}


/***** quick_bar #ff5fa7*****/
.quick_bar{position:fixed;top:70%;right:40px;z-index:90;transform:translateY(-50%);}
.quick_bar .quick_bar_wrap{}
.quick_bar .q_ul{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;width:128px;}
.quick_bar .q_ul .q_item{width:120px;height:120px;margin-bottom:15px;  background-color:#dba6a4 ;border-radius:100px;box-shadow:0 0 10px 2px rgba(0,0,0,0.1);transition:all 0.2s ease;}
.quick_bar .q_ul .q_item.q02{background-color:#918E6C}
.quick_bar .q_ul .q_item.q03{background-color:#f2f2f2;margin-bottom:0;width:80px;height:80px;}
.quick_bar .q_ul .q_item .btn_top span{color:rgb(0, 0, 0);padding-top:20px;background:url('/16kjprs/assets/img/common/ico_top3.png') center top no-repeat;}
.quick_bar .q_ul .q_item .btn_top:hover span{animation:updown 0.3s infinite ease-in-out alternate;}
.quick_bar .q_ul .q_item.q01:hover {background-color:#3e3e3e; color: #fff;}
.quick_bar .q_ul .q_item.q02:hover {background-color:#3e3e3e; color: #fff;}
.quick_bar .q_ul .q_item:hover:last-child{background-color:#fff; color: #fff;}
.quick_bar .q_ul .q_item a{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;width:100%;height:100%;text-align:center;}
.quick_bar .q_ul .q_item a .q_item_wrap{}
.quick_bar .q_ul .q_item a .ico_q{display:block;}
.quick_bar .q_ul .q_item a .txt_q{display:block;font-size:0.8em;font-weight:600;color:#fff;margin-top:10px;}
.quick_bar .q_ul .q01 .q_item_wrap .txt_q{color:#fff;}
.quick_bar .q_ul .q01:hover .q_item_wrap .txt_q{color: #fff;}
.quick_bar .q_ul .q01 .q_item_wrap .off{display: none;}
.quick_bar .q_ul .q01:hover .q_item_wrap .off{display: block; margin: 0 auto; ;}
.quick_bar .q_ul .q01:hover .q_item_wrap .on{display: none;}

.quick_bar .q_ul .q_item a .txt_q br{display:none;}


/***** 공통 클래스 *****/
input[type=text],
input[type=email],
input[type=password],
select{display: block; width: 100%; padding: 10px; font-size: 1em; border: 1px solid #ddd; box-sizing: border-box}
.select{position: relative;display: block; min-width: 80px }
/*.select:after{display: block; position: absolute; top: 1.5em; right: 1em; content: "▼"; color: #4b40b1; font-size: 10px;}*/
select[disabled], input[disabled] {background-color: #eee;}
textarea{width: 100%; height: 200px; border: 1px solid #ddd;}

/* style01 */
.chk_box label{cursor: pointer}
.chk_box label:not(:last-child) {margin-right: 20px}
.chk_box [type="radio"] {margin-top: -1px;appearance: none;
  border: 1px solid #666;border-radius: 50%;width: 1.5em;height: 1.5em;transition: border 0.15s ease-in-out;}
.chk_box [type="radio"]:checked {border: 0.4em solid tomato;}
.chk_box [type="radio"]:hover {border-color: tomato;cursor: pointer;}
.chk_box [type="radio"]:hover + span {cursor: pointer;}
.chk_box [type="radio"]:disabled {background-color: lightgray; box-shadow: none; opacity: 0.7;cursor: not-allowed;}
.chk_box [type="radio"]:disabled + span {opacity: 0.7; cursor: not-allowed;}
.chk_box [type="radio"]:disabled:hover{border-color: #666}

/* style02 */
.f_box input[type=radio]{display: none;}
.f_box input[type=radio]+label{display: inline-block; padding: 20px 20px; cursor: pointer; border: 1px solid #ccc;}
.f_box input[type=radio]+label{background-color: #fff; color: #333;}
.f_box input[type=radio]:checked+label{background-color: #52cbba; color: #fff;}

.btn_wrap{padding-top: 40px; text-align: center}
.btn_wrap.no_pd{padding-top: 0}
.btn{display: inline-block; padding: 20px; font-size: 18px; background-color: #eee; cursor: pointer}
.btn.primary{background-color: #3e40b0; color: #fff;}
.btn.yellow{background-color: #ffd144; color: #222;}
.btn.dark{background-color: #444; color: #fff;}
.btn.mini{padding:7px 10px; font-size: 16px; border-radius: 3px;}
.btn.darkblue{background-color: #4e5ca1; color: #fff;}
.btn.skyblue{background-color:#449db9; color: #fff;}

.cb:after{display: block; content: ""; clear: both;}



/***** 인트로 *****/
.intro{height: 100%; display: flex; justify-content: center; align-items: center; background-image:url(../../assets/img/intro/intro_bg.png); background-position: right; overflow: hidden; background-size: cover}
.intro .con{text-align: center;}
.intro .con .tlt{ padding:0 60px 60px;}
.intro ul li{float: left; width: 48%; position: relative;;border-radius: 20px; overflow: hidden;}
.intro ul li:first-child{margin-right: 3%;}
.intro ul li a:hover .g_box{opacity: 1}
.intro ul li a .g_box{font-size: 1.3em; opacity: 0;width: 100%; height: 100%; position: absolute; z-index: 1; color: #fff;display: flex; justify-content: center; align-items: center;}
.intro ul li a img{width: 100%}
.intro ul li.box01 a .g_box{background-color: #06a2c9}
.intro ul li.box02 a .g_box{background-color: #b83e97}
.ani{transition: .2s}
.intro img{max-width: 100%}
.intro .intro_btn{padding-top: 40px;}

.intro .popup{position: fixed;top: 0;width: 340px; z-index: 9999}
.intro .popup .btn_wrap{padding: 10px; text-align: left; background-color: #222;}
.intro .popup .btn_wrap span{display: inline-block; padding:3px 5px; font-size: 15px; color: #fff;background-color: #424242; cursor: pointer}
.intro .popup.kr{left: 0}
.intro .popup.en{left: 340px;}