@charset "utf-8"; header{width:100%; height:75px; background: #fff; /*border-bottom: solid 1px #e5e5e5;*/ box-sizing: border-box; top:0;z-index:3; position: fixed} header.player{position: relative} header .top{width:1120px; margin:0 auto} header .play_area{height:88px; padding:0 20px} header .area_wrap{width:100%; display: flex; position: relative} header .logo{width:118px; height:36px; background: url(/images/logo.jpg) no-repeat; overflow: hidden; text-indent: -9999px; position: absolute; top:20px} header .logo a{width:100%; height:100%; display: block} header .search{width:100%; padding:0 120px; display: flex; align-items: center} header .search .search_wrap{width:100%; height:100%; min-widht:314px; max-width:434px; position: relative} header .search .search_wrap2{width:100%; position: absolute; top:11px; left:0} header .search .search_wrap2 .on{border-radius: 15px; background: rgba(255,255,255,.85); box-shadow: 0 .2rem .5rem 0 rgba(0, 0, 0, .3); backdrop-filter: blur(3px); border: 1px solid rgba(255, 255, 255, 1)} header .search .search_wrap_sub{width:100%; position: absolute; top:32px; left:0; font-size:14px; color:#ff0000; font-weight:bold;} header .search .search_wrap3{padding-top:6px; border: solid 1px #fff} header .search .search_box{padding:0 6px} header .search .search_box .search_box_wrap{height:44px; border: solid 1px #e5e5e5; box-sizing: border-box; border-radius:25px; position:relative} header .search .on .search_box .search_box_wrap{height:44px; border: solid 1px #0069b4; box-sizing: border-box; border-radius:25px; position:relative} header .search .search_box .inp_ser{width:calc(100% - 50px); height:100%; box-sizing: border-box; border:0; outline: none; background: rgba(0,0,0,0); text-indent: 20px} header .search .search_box .inp_ser2{width:calc(100% - 150px); height:100%; box-sizing: border-box; border:0; outline: none; background: rgba(0,0,0,0)} header .search .search_box .inp_ser2::placeholder{font-size:12px} header .search .search_box button.btn_ser{ width:18px; height:17px; background: url(/images/ico_ser.png) 50% no-repeat; text-indent: -9999px; overflow: hidden; padding:18px; position: absolute; top:3px; right:10px; border:0 } header .search .ser .search_ser_wrap{display: block} header .search .search_ser_wrap{display: none} header .search .search_ser_wrap .search_ser{font-size: 14px; line-height: 30px} header .search .search_ser_wrap .search_ser ul{padding:10px} header .search .search_ser_wrap .search_ser ul li{padding:0 10px; white-space:nowrap; text-overflow:ellipsis; overflow: hidden; position: relative} header .search .search_ser_wrap .search_ser ul li:hover{background: rgba(216,229,243,1); border-radius: 15px; font-weight: 800} header .search .search_ser_wrap .search_ser strong{color:#0069b4} header .search .his .search_his_wrap{display: block} header .search .search_his_wrap{display: none} header .search .search_his_wrap .search_his{font-size: 14px; line-height: 30px} header .search .search_his_wrap .search_his a{width:100%; height:100%} header .search .search_his_wrap .search_his a:hover{font-weight: 800} header .search .search_his_wrap .search_his ul{padding:10px 0} header .search .search_his_wrap .search_his ul li{padding:0 40px 0 20px; white-space:nowrap; text-overflow:ellipsis; overflow: hidden; position: relative} header .search .search_his_wrap .search_his ul li:hover{background: rgba(216,229,243,1)} header .search .search_his_wrap .search_his button.btn_del{ width:9px; height:9px; background: url(/images/ser_del.png) 50% no-repeat; border:0; overflow: hidden; text-indent: -9999px; transition: all .3s ease; padding:10px; position: absolute; top:5px; right:10px } header .search .search_his_wrap .search_his button.btn_del:hover{transform: rotate(180deg)} header .search_his_wrap .search_auto{height:40px; line-height: 40px; background: #edf0f2; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; font-size: 14px; padding:0 20px} header .search_his_wrap .search_auto button.btn_off{ font-family: NanumEB; width:32px; height:15px; background: #bbb; font-size: 8px; border-radius:8px; border:0; color: #fff; vertical-align: middle; margin-left:10px; line-height: 15px } header .search_his_wrap .search_auto button.btn_on{ font-family: NanumEB; width:32px; height:15px; background: #0069b4; font-size: 8px; border-radius:8px; border:0; color: #fff; vertical-align: middle; margin-left:10px; line-height: 15px } header .search_his_wrap .search_auto button.btn_alldel{position: absolute; right:20px; border:0px; background: rgba(0,0,0,0); margin-top:15px} header .tr_wrap{display: flex; position: absolute; top:16px; right: 0} /* 알림 */ header .tr_wrap button.alert{width:36px; height:36px; margin-top:5px; position: relative; background: rgba(0,0,0,0); display: none} header .tr_wrap button.alert:hover{background: #f5f6f7; border-radius:20px} header .tr_wrap button.alert .bell{width:100%; height:100%; display: none; background: url(/images/bell.png) 50% no-repeat; overflow: hidden; text-indent: -9999px} header .tr_wrap button.alert .bell_chek{width:5px; height:5px; background: #ff0000; border-radius:3px; position: absolute; top:6px; right:6px; display: none} header .tr_wrap .alert_box{ position: absolute; width:250px; height:400px; border-radius: 15px; border: solid 1px #e5e5e5; top:50px; background: #fff; font-size: 14px; padding-top:20px; margin-left:-100px; overflow-y:auto; display: none; box-shadow: 0 10px 10px rgba(0,0,0,0.07) } header .tr_wrap .alert_box.on{display: block} header .tr_wrap .alert_box::-webkit-scrollbar{width:5px} header .tr_wrap .alert_box::-webkit-scrollbar-thumb{background: #d6d9db; border-radius:5px} header .tr_wrap .alert_box .alert_title{display:flex; justify-content: space-between; flex-wrap: wrap; padding:0 20px} header .tr_wrap .alert_box .alert_title .alert_st{font-family: NanumB; font-size: 14px} header .tr_wrap .alert_box .alert_title button.btn_all_del{font-size: 11px; background: rgba(0,0,0,0); margin-top:5px} header .tr_wrap .alert_box .alert_title .btn_all_del:hover{text-decoration: underline} header .tr_wrap .alert_box .alert_dd{margin-top:15px} header .tr_wrap .alert_box .alert_dd li.not_reading{background: #f2f8ff} header .tr_wrap .alert_box .alert_dd li:nth-last-child(1){border-bottom-left-radius: 15px; border-bottom-right-radius: 15px} header .tr_wrap .alert_box .alert_dd li a{display: flex; position: relative} header .tr_wrap .alert_box .alert_dd li.not_alert{text-align: center; background: url(/images/cha_unreg.png) 50% 80% no-repeat; padding-top:200px} header .tr_wrap .alert_box .alert_dd a{padding:10px 0} header .tr_wrap .alert_box .alert_dd a:hover .alert_dd_wrap .alert_dd_st{text-decoration: underline} header .tr_wrap .alert_box .alert_dd .alert_dd_wrap{display: block; padding:0 30px 0 20px} header .tr_wrap .alert_box .alert_dd .alert_dd_wrap .alert_dd_st{display: block; font-size: 12px; line-height: 18px} header .tr_wrap .alert_box .alert_dd .alert_dd_wrap .alert_dd_date{display: block; font-size: 11px; color:#9c9c9c; margin-top:5px} header .tr_wrap .alert_box .alert_dd .alert_dd_del{ position: absolute; width:20px; height:20px; background: url(/images/ser_del.png) 50% no-repeat; overflow: hidden; text-indent: -9999px; right:15px; top:8px; transition: all .3s ease; } header .tr_wrap .alert_box .alert_dd .alert_dd_del:hover{transform: rotate(180deg)} /* main - 로그인 */ header .tr_wrap .topmenu_set{display: flex; position: relative} header .tr_wrap .topmenu_set li{} header .tr_wrap .topmenu_set dl { display: none; } header .tr_wrap .topmenu_set li.open > dl { display: block; } header .tr_wrap li{line-height: 42px; border:0} header .tr_wrap li::before{font-family: Nanum; content: "ㅣ"; color: #d9d9d9; padding:0 10px} header .tr_wrap li:first-of-type::before{content: none;} header .tr_wrap span.topmenu_st{font-family: NanumB; font-size: 14px; cursor: pointer} header .tr_wrap span.active{font-family: NanumEB} header .tr_wrap li dl{ position: absolute; font-size: 13px; border-radius: 15px; line-height: 28px; padding:5px; background: rgba(255,255,255,.85); box-shadow: 0 .2rem .5rem 0 rgba(0, 0, 0, .3); backdrop-filter: blur(3px); border: 1px solid rgba(255, 255, 255, 1) } header .tr_wrap li dl.tm_cate{margin:0 0 0 -47px; display: none} header .tr_wrap li dl.tm_myclass{margin:0 0 0 8px} header .tr_wrap li dl.tm_customer{margin:0; display: none} header .tr_wrap li dl.tm_member{min-width:195px; margin:0 0 0 5px; display: none} header .tr_wrap li dl.tm_cate > dd {position: relative} header .tr_wrap li dl>dd.active>a{background: rgba(216,229,243,.5); font-family: NanumEB} header .tr_wrap li dl>dd.active>a::after{content: " >"; position: absolute; right:10px; transform: scaleX(0.5);} header .tr_wrap li dl>dd a{width:100%; display: block; padding:2px 15px; box-sizing: border-box} header .tr_wrap li dl>dd a:hover{font-weight: 800; background: rgba(216,229,243,.8); border-radius: 15px} header .tr_wrap li dl>dd dl.cate_submenu{height: 100%; top: 0; right: 0; transform: translateX(calc(100% + 5px)); box-sizing: border-box} header .tr_wrap li dl>dd dl.cate_submenu dd{} header .tr_wrap li dl>dd dl.cate_submenu dd a{padding:0 15px} header .tr_wrap li dl>dd{ position:relative; } header .tr_wrap li dl>dd dl.cate_submenu{ display:none; position:absolute; left:100%; height:auto; border-radius: 15px; transform:none; min-width:150px; background: rgba(255,255,255,.85); box-shadow: 0 .2rem .5rem 0 rgba(0, 0, 0, .3); backdrop-filter: blur(3px); border: 1px solid rgba(255, 255, 255, 1); } header .tr_wrap li dl>dd:hover > dl.cate_submenu, header .tr_wrap li dl>dd dl.cate_submenu:hover{ display:block; } header .tr_wrap button.login{font-family: NanumB; padding:12px; font-size: 14px; background: #f5f6f7; border-radius: 5px; margin:0 0 0 15px} header .tr_wrap button.login:hover{background: #0069b4; color: #fff} header .tr_wrap button.login_out{ font-family: NanumB; padding:12px 24px 12px 12px; background: url(/images/id_arrow.png) 90% 50% no-repeat; border:0; font-size: 14px; margin:0 0 0 30px} header .tr_wrap button.login_out:hover{background: url(/images/id_arrow.png) 90% 50% no-repeat #f5f6f7; border-radius: 5px} /*내정보*/ header .tr_wrap .mem_info{ position: absolute; width:195px; border-radius: 15px; top:50px; right:-10px; font-size: 13px; display: none; background: rgba(255,255,255,.85); box-shadow: 0 .2rem .5rem 0 rgba(0, 0, 0, .3); backdrop-filter: blur(3px); border: 1px solid rgba(255, 255, 255, 1) } header .tr_wrap .mem_info.on{display: block} header .tr_wrap .mem_info .info_ico{display: flex; border-bottom:solid 1px #e5e5e5} header .tr_wrap .mem_info .info_ico .info_fav{width:50%; height:73px; text-align: center} header .tr_wrap .mem_info .info_ico .info_fav a{width:100%; height:100%; padding-top:44px; box-sizing: border-box; display: block; background: url(/images/ico_fav.png) 50% 15px no-repeat; font-size: 13px} header .tr_wrap .mem_info .info_ico .info_fav a:hover{font-family: NanumEB; border-top-left-radius: 15px; background: url(/images/ico_favon.png) rgba(255,255,255,.5) 50% 15px no-repeat;} header .tr_wrap .mem_info .info_ico .info_11{width:50%; height:73px; text-align: center; border-left:solid 1px #e5e5e5} header .tr_wrap .mem_info .info_ico .info_11 a{width:100%; height:100%; padding-top:44px; box-sizing: border-box; display: block; background: url(/images/ico_11.png) 50% 15px no-repeat; font-size: 13px} header .tr_wrap .mem_info .info_ico .info_11 a:hover{font-family: NanumEB; border-top-right-radius: 15px; background: url(/images/ico_11on.png) rgba(255,255,255,.5) 50% 15px no-repeat} header .tr_wrap .mem_info .info_event{padding:0 20px 18px 20px; display: block} header .tr_wrap .mem_info .info_event a{width:100%; padding:10px 0; background: #0069b4; display: block; text-align: center; color: #fff} header .tr_wrap .mem_info .info_pt{display: block; box-sizing: border-box; padding:18px 0 18px 20px} header .tr_wrap .mem_info .info_cp{display: block; box-sizing: border-box; padding:18px 0 18px 20px;border-top: solid 1px #e5e5e5} header .tr_wrap .mem_info .info_fp{display: block; box-sizing: border-box; padding:18px 0 18px 20px; line-height: 20px; border-top: solid 1px #e5e5e5} header .tr_wrap .mem_info .info_ip{width:100%; background: #f3f6f8; display:flex; justify-content: space-between; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px} header .tr_wrap .mem_info .info_ip .info_my a{padding:18px 15px 18px 20px; background: url(/images/ico_key.png) 100% 50% no-repeat; display: block} header .tr_wrap .mem_info .info_ip .info_my a:hover{font-family: NanumEB} header .tr_wrap .mem_info .info_ip .info_out a{padding:18px 20px; display: block} header .tr_wrap .mem_info .info_ip .info_out a:hover{font-family: NanumEB} header .tr_wrap .mem_info .cect{color:#0069b4; font-family: NanumB; letter-spacing: -1px} header .tr_wrap .mem_info .cect a{color:#0069b4 !important;font-family: NanumB !important} /* 설문조사 */ #survey{background: #f3f6f8} #survey .survey_wrap{width:560px; margin:100px auto} @media(max-width:420px){ #survey .survey_wrap{width:380px; margin:100px auto} #survey .surv_box .surv_em{font-size:12px !important} } #survey .surv_title2{text-align: center; padding:120px 0 0 0 !important; display: block; font-family: NanumEB; letter-spacing: -1px} #survey .surv_title3{text-align: center; padding:180px 0 0 0 !important; display: block; font-family: NanumEB} #survey .surv_box{min-height:480px; margin: 0 auto; background: #fff; border-radius: 15px; padding:30px; line-height: 24px; box-sizing: border-box; position: relative} #survey .surv_box dl{} #survey .surv_box dl dd{margin:10px 0} #survey .surv_box dl dt{margin:30px 0 10px 0} #survey .surv_box dl input[type=radio].inp_radio{display: none} #survey .surv_box dl label.inp_radiott{display: flex} #survey .surv_box dl label.inp_radiott span.des_cir{width:22px; height:22px; border-radius: 11px; background: #fff; border:solid 2px #777; box-sizing: border-box; display: block; cursor: pointer} #survey .surv_box dl label.inp_radiott span.des_cir_tt{padding:0 0 0 7px; cursor: pointer} #survey .surv_box dl input[type=radio].inp_radio:checked+label.inp_radiott span.des_cir{width:22px; height:22px; border-radius: 11px; background: #0069b4; display: block; border:0} #survey .surv_box .surv_st{font-family: NanumEB; font-size: 20px; display: block; padding:5px 0; margin:10px 0 0 0} #survey .surv_box .surv_em{width:100%; height:50px; line-height: 50px; color: #fff; text-align: center; font-size: 14px; font-family: Nanum; margin:50px 0 0 0; display: block; position: absolute; bottom:0; background: #777; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px} #survey .surv_box .surb_que{background: #0069b4; color: #fff; padding:5px;} #survey .surv_box dl input[type=checkbox].inp_check{display: none} #survey .surv_box dl label.inp_checktt{display: flex} #survey .surv_box dl label.inp_checktt span.des_chk{width:22px; height:22px; background: #777; box-sizing: border-box; display: block; cursor: pointer} #survey .surv_box dl label.inp_checktt span.des_chk_tt{padding:0 0 0 7px; cursor: pointer} #survey .surv_box dl input[type=checkbox].inp_check:checked+label.inp_checktt span.des_chk{width:22px; height:22px; background: url(/images/chk.png) 50% no-repeat #0069b4; display: block; border:0} #survey .surv_box .surv_ttbox{width:100%; height:300px; margin:10px 0 0 0; box-sizing: border-box; padding:10px; background: #f6f6fa; scrollbar-width:thin} #survey .surv_cha{background: url(/images/surv_cha.png) 50% 100% no-repeat #fff} #survey .logo{width:105px; height:38px; background: url(/images/logo.png) no-repeat; overflow: hidden; text-indent: -9999px; margin:0 auto; margin-bottom:35px} #survey .logo a{width:100%; height:100%; display: block} #survey h2{text-align: center; font-family: NanumH; font-size: 32px; margin-top:20px; line-height: 42px} #survey .btn_surv{min-width: 180px; padding: 18px 20px; text-align: center; border-radius: 30px; color: #fff; font-size: 16px; font-family: NanumB; margin: 30px 10px; background: #0069b4} #survey .inp_radio{} #survey .inp_radiott{} /*회원가입*/ #member{background: #f3f6f8} #member .login_set{} #member .login_set dd{margin-bottom:20px !important} #member .login_set dd input{height:60px !important} #member .mem_login{width:460px; margin: 100px auto} #member .mem_login dd{margin-bottom:20px} #member .mem_login input[type=text], #member .mem_login input[type=password], #member .mem_login input[type=email], #member .mem_login input[type=tel]{ width:100%; height:50px; border:solid 1px rgba(0,0,0,0); border-radius: 15px; box-sizing: border-box; text-indent: 15px; font-size: 16px; outline: none } #member .mem_login input[type=text]:focus, #member .mem_login input[type=password]:focus, #member .mem_login input[type=email]:focus, #member .mem_login input[type=tel]:focus { border:solid 1px #0069b4; box-sizing: border-box } #member .mem_login input[type=text]::placeholder, #member .mem_login input[type=password]::placeholder, #member .mem_login input[type=email]::placeholder, #member .mem_login input[type=tel]::placeholder { font-size: 16px } #member .mem_login input[readonly] {background: #fff; caret-color: transparent; cursor:auto} #member .mem_login input[readonly]:focus {border:solid 1px rgba(0,0,0,0)} #member .mem_login .mem_inptt{width:100%; display: block; margin-bottom:13px} #member .mem_login .mem_inptt em{background: #d6d9db; font-size: 12px; padding:3px 10px; border-radius: 10px; font-style: normal} #member .mem_login .mem_login_tt{display: block; font-size: 14px; padding:10px 0; line-height: 18px; letter-spacing: -1px} #member .mem_login input[type=text].mem_mod{color:#000; font-family: NanumB} /*회원가입 - 로그인*/ #member .mem_login .logo{width:123px; height:38px; background: url(/images/logo.png) no-repeat; overflow: hidden; text-indent: -9999px; margin: 0 auto; margin-bottom:35px} #member .mem_login .logo a{width:100%; height:100%; display: block} #member .mem_login .btn_login{width:100%; height:50px; background: #0069b4; color: #fff; border-radius: 15px; font-family: NanumB} #member .mem_login ul.id_chkop{display: flex} #member .mem_login ul.id_chkop li{width:50%; position: relative} #member .mem_login ul.id_chkop li input.inp_log_chk, #member .mem_login ul.id_chkop li input.inp_idsa_chk{ display: none } #member .mem_login ul.id_chkop li input.inp_log_chk+label.log_chk, #member .mem_login ul.id_chkop li input.inp_idsa_chk+.idsa_chk{ display: inline-block; cursor: pointer; width: 20px; height: 20px; background: #777 } #member .mem_login ul.id_chkop li input.inp_log_chk:checked+label.log_chk, #member .mem_login ul.id_chkop li input.inp_idsa_chk:checked+.idsa_chk{ display: inline-block; cursor: pointer; width: 20px; height: 20px; background: url(/images/chk.png) 50% no-repeat #0069b4 } #member .mem_login ul.id_chkop li label.log_chk span, #member .mem_login ul.id_chkop li label.idsa_chk span{ position: absolute; top:2px; left:30px; font-family: NanumB; cursor: pointer; caret-color: transparent; } #member .mem_login ul.ser_chkop{width:100%; display: flex; margin-top:20px; justify-content: center} #member .mem_login ul.ser_chkop li{padding:10px 20px; } #member .mem_login ul.ser_chkop li:nth-child(1),#member .mem_login ul.ser_chkop li:nth-child(2){background: url(/images/ser_sec.png) 100% 50% no-repeat} #member .mem_login ul.login_social{margin-top:50px} #member .mem_login ul.login_social li{margin-bottom:10px} #member .mem_login ul.login_social button.btn_naver{width:100%; height:50px; border-radius: 15px; background: url(/images/ico_naver.png) 30% 50% no-repeat #03c75a; font-family: NanumB} #member .mem_login ul.login_social button.btn_kakao{width:100%; height:50px; border-radius: 15px; background: url(/images/ico_kakao.png) 30% 50% no-repeat #fee102; font-family: NanumB} /*회원가입 - 간편회원가입*/ #member .mem_login .itgo_join{width:100%; display: block} #member .mem_login .itgo_join .btn_join{ width:100%; height:80px; border-radius: 15px; background: #0069b4; font-family: Nanum; color:#fff; font-size:18px } #member .mem_login .itgo_join .btn_join span{font-family: NanumEB} #member .mem_login dl.sim_join{} #member .mem_login dl.sim_join dt{padding:50px 0 10px 0; border-top:solid 1px #dadada; margin-top:50px} #member .mem_login dl.sim_join dd{margin-bottom:10px} #member .mem_login dl.sim_join dd button.btn_naver{width:100%; height:50px; border-radius: 15px; background: url(/images/ico_naver.png) calc(100% / 2 - 80px) 50% no-repeat #03c75a; font-family: NanumB} #member .mem_login dl.sim_join dd button.btn_kakao{width:100%; height:50px; border-radius: 15px; background: url(/images/ico_kakao.png) calc(100% / 2 - 80px) 50% no-repeat #fee102; font-family: NanumB} /*회원가입 - 이용약관*/ #member .mem_login .term{font-size: 18px} #member .mem_login .term .pb1{font-family: NanumEB; display: block; font-size: 18px; padding:0 0 20px 0} #member .mem_login .term .pb2{font-family: NanumB; display: block; font-size: 16px; padding-bottom:10px} #member .mem_login .term .check_wrap{background: #fff; padding:15px} #member .mem_login .term .term_box{background: #fff; padding:35px; margin-top:2px} #member .mem_login .term .term_box .box_tt{height:150px; font-size: 14px; overflow-y: scroll; word-break:break-all; display: block; box-sizing: border-box; line-height: 24px} #member .mem_login .term .term_box .box_tt::-webkit-scrollbar{width:5px} #member .mem_login .term .term_box .box_tt::-webkit-scrollbar-thumb{background: #777; border-radius:5px} #member .mem_login .term li{position: relative} #member .mem_login .term li:nth-child(1) .check_wrap{border-top-left-radius: 15px; border-top-right-radius: 15px; padding-bottom:15px} #member .mem_login .term li:nth-child(3) .term_box{border-bottom-left-radius: 15px; border-bottom-right-radius: 15px} #member .mem_login .term li:nth-child(2), #member .mem_login .term li:nth-child(3){margin-top:10px} #member .mem_login .term input.inp_all_chk, #member .mem_login .term input.inp_term1_chk, #member .mem_login .term input.inp_term2_chk{ display: none } #member .mem_login .term input.inp_all_chk+label.all_chk, #member .mem_login .term input.inp_term1_chk+label.term1_chk, #member .mem_login .term input.inp_term2_chk+label.term2_chk{ display: inline-block; cursor: pointer; width: 20px; height: 20px; background: #777; caret-color: transparent; } #member .mem_login .term input.inp_all_chk:checked+label.all_chk, #member .mem_login .term input.inp_term1_chk:checked+label.term1_chk, #member .mem_login .term input.inp_term2_chk:checked+label.term2_chk{ display: inline-block; cursor: pointer; width: 20px; height: 20px; background: url(/images/chk.png) 50% no-repeat #0069b4 } #member .mem_login .term label.all_chk span, #member .mem_login .term label.term1_chk span, #member .mem_login .term label.term2_chk span{ position: absolute; top:17px; left:45px; font-family: NanumB } /*회원가입 - 정보입력*/ #member .mem_login .id_set{position: relative; display: block; padding:0 90px 0 0} #member .mem_login .id_set input{border-top-right-radius:0 !important; border-bottom-right-radius:0 !important} #member .mem_login .id_set .id_chk{ width:90px; height:50px; position: absolute; right:0; border-top-right-radius:15px; border-bottom-right-radius:15px; color: #fff; background:#0069b4; cursor: pointer; font-size: 16px } #member .mem_login .inf_box{display: flex; flex-wrap: wrap; background: #fff; padding:20px; border-radius:15px; position: relative} #member .mem_login .inf_box dd{position: relative; width:50%} #member .mem_login .inf_box dd:last-of-type{display: block; margin:0; width:100%} #member .mem_login .inf_box input.inp_to_email, #member .mem_login .inf_box input.inp_to_sms{ display: none } #member .mem_login .inf_box input.inp_to_email+label.to_email{ display: inline-block; cursor: pointer; width: 20px; height: 20px; background: #777 } #member .mem_login .inf_box input.inp_to_sms+label.to_sms{ display: inline-block; cursor: pointer; width: 20px; height: 20px; background: #777 } #member .mem_login .inf_box input.inp_to_email:checked+label.to_email, #member .mem_login .inf_box input.inp_to_sms:checked+label.to_sms{ display: inline-block; cursor: pointer; width: 20px; height: 20px; background: url(/images/chk.png) 50% no-repeat #0069b4 } #member .mem_login .inf_box label.to_email span, #member .mem_login .inf_box label.to_sms span{width:150px; display: block; padding-left:30px; cursor: pointer; caret-color: transparent} #member .mem_login .register{background: #fff; padding:50px; border-radius: 15px; margin-top:10px; line-height: 24px; position: relative} #member .mem_login .register_st{font-size: 18px; font-family: NanumB} #member .mem_login .register_dd{margin-top:10px; display: block} #member .mem_login .cha_un{width:112px; height:108px; background: url(/images/cha_unreg.png) no-repeat; display: block; position: absolute; right:-20px; bottom:-10px} #member .mem_login .cha_reg{width:89px; height:125px; background: url(/images/cha_reg.png) no-repeat; display: block; position: absolute; right:-20px; bottom:-10px} #member .mem_login .mem_out{background: #fff; border-radius: 15px; padding:20px; margin-top:100px} #member .mem_login .mem_out .mem_out_st{font-family: NanumB; font-size: 20px } #member .mem_login .mem_out ul.mem_out_dd{margin-top:20px} #member .mem_login .mem_out ul.mem_out_dd li{line-height: 24px} #member .mem_login .mem_out button.btn_mem_out{padding:5px 10px; background: #e5e5e5; margin-top:20px; border-radius: 10px} @media(max-width: 460px){ #member .mem_login{width:100%; margin: 100px auto; padding:0 10px; box-sizing: border-box} #member .mem_login button{min-width:150px} #member .mem_login .inf_box{display: block} } #banner{width: 100%; height:350px; background: url(/images/banner.jpg) 50% no-repeat; margin: 75px auto 0 auto} #cate_menu{width:1120px; margin:0 auto} /* 강의실 */ #sub_banner_classroom{width: 100%; height:200px; background: url(/images/banner/banner01.jpg) 50% 0 no-repeat; margin:75px 0 0 0} #sub_banner_classroom .sub_banner_classroom_wrap{width:1120px; margin:0 auto; display: block} #sub_banner_classroom h2.bnst{font-family: NanumH; padding-top:60px; font-size: 32px; color: #fff} #sub_banner_classroom .bntt{font-family: NanumB; margin-top:15px; display: block; line-height: 20px; color: #fff; font-size: 12px} /* 내강의실 */ #sub_banner_myclass{width: 100%; height:200px; background: url(/images/banner/banner02.jpg) 50% 0 no-repeat; margin:75px 0 0 0} #sub_banner_myclass .sub_banner_myclass_wrap{width:1120px; margin:0 auto; display: block} #sub_banner_myclass h2.bnst{font-family: NanumH; padding-top:60px; font-size: 32px; color: #fff} #sub_banner_myclass .bntt{font-family: NanumB; margin-top:15px; display: block; line-height: 20px; color: #fff; font-size: 12px} /* 고객센터 */ #sub_banner_customer{width: 100%; height:200px; background: url(/images/banner/banner03.jpg) 50% 0 no-repeat; margin:75px 0 0 0} #sub_banner_customer .sub_banner_customer_wrap{width:1120px; margin:0 auto; display: block} #sub_banner_customer h2.bnst{font-family: NanumH; padding-top:60px; font-size: 32px; color: #fff} #sub_banner_customer .bntt{font-family: NanumB; margin-top:15px; display: block; line-height: 20px; color: #fff; font-size: 12px} /* 자유이용권 */ #sub_banner_freepass{width: 100%; height:200px; background: url(/images/banner/banner04.jpg) 50% 0 no-repeat; margin:75px 0 0 0} #sub_banner_freepass .sub_banner_freepass_wrap{width:1120px; margin:0 auto; display: block} #sub_banner_freepass h2.bnst{font-family: NanumH; padding-top:60px; font-size: 32px; color: #fff} #sub_banner_freepass .bntt{font-family: NanumB; margin-top:15px; display: block; line-height: 20px; color: #fff; font-size: 12px} /* 이벤트 */ #sub_banner_event{width: 100%; height:200px; background: url(/images/banner/banner05.jpg) 50% 0 no-repeat; margin:75px 0 0 0} #sub_banner_event .sub_banner_event_wrap{width:1120px; margin:0 auto; display: block} #sub_banner_event h2.bnst{font-family: NanumH; padding-top:60px; font-size: 32px; color: #fff} #sub_banner_event .bntt{font-family: NanumB; margin-top:15px; display: block; line-height: 20px; color: #fff; font-size: 12px} /*IT소식지*/ #sub_itnewsletter{width: 100%; height:200px; background: url(/images/banner/banner06.jpg) 50% 0 no-repeat; margin:75px 0 0 0} #sub_itnewsletter .sub_itnewsletter_wrap{width:1120px; margin:0 auto; display: block} #sub_itnewsletter h2.bnst{font-family: NanumH; padding-top:60px; font-size: 32px; color: #fff} #sub_itnewsletter .bntt{font-family: NanumB; margin-top:15px; display: block; line-height: 20px; color: #fff; font-size: 12px} /*요즘은 AI 시대*/ #sub_banner_ai{width: 100%; height:200px; background: url(/images/banner/banner07.jpg) 50% 0 no-repeat; margin:75px 0 0 0} #sub_banner_ai .sub_banner_ai_wrap{width:1120px; margin:0 auto; display: block} #sub_banner_ai h2.bnst{font-family: NanumH; padding-top:60px; font-size: 32px; color: #fff} #sub_banner_ai .bntt{font-family: NanumB; margin-top:15px; display: block; line-height: 20px; color: #fff; font-size: 12px} /* 검색 */ #sub_banner_search{width: 100%; height:170px; margin:0} #sub_banner_search .sub_banner_classroom_wrap{width:1120px; margin:0 auto; display: block} #sub_banner_search h2.bnst{font-family: NanumH; padding-top:60px; font-size: 32px; color: #fff} #sub_banner_search .bntt{font-family: NanumB; margin-top:15px; display: block; line-height: 20px; color: #fff; font-size: 12px} #cont{width:1120px; mmin-width:1120px; margin:0 auto; margin-top:50px} #cont h2.sub_title{font-size: 24px; font-family: NanumH; letter-spacing: -2px} #cont div.sub_tip{font-size: 12px; margin:10px 0 0 0; line-height: 16px} #cont div.sub_tip2{font-size: 12px; margin:10px 0 0 0; line-height: 16px} /*menu*/ #cont article.menu_area{margin:40px 0 0 0} #cont article.menu_area ul.menu_set{display: flex; justify-content: space-between} #cont article.menu_area ul.menu_set li{width:80px; display: flex; flex-wrap: wrap; flex-direction: column;} #cont article.menu_area ul.menu_set li span.menu_img{ display: flex; /* Flexbox 레이아웃 적용 */ justify-content: center; /* 수평(가로) 가운데 정렬 */ align-items: flex-end; /* 수직(세로) 아래쪽 정렬 */ padding-bottom: 5px; /* 바닥에서 살짝 띄우는 여백 (원하는 만큼 조절 가능) */ width: 100%; height: 50px; box-sizing: border-box; /* padding이 더해져도 전체 높이 50px을 유지 */ transition: background-position 0.3s ease; } #cont article.menu_area ul.menu_set li span.menu_img em{font-size: 11px; background: rgba(137,63,244,.8); padding:3px 5px; border-radius: 10px; color: #fff} #cont article.menu_area ul.menu_set li:nth-of-type(1) span.menu_img{background: url(/images/tmenu_ico01.jpg) 50% no-repeat} #cont article.menu_area ul.menu_set li:nth-of-type(2) span.menu_img{background: url(/images/tmenu_ico02.jpg) 50% no-repeat} #cont article.menu_area ul.menu_set li:nth-of-type(3) span.menu_img{background: url(/images/tmenu_ico03.jpg) 50% no-repeat} #cont article.menu_area ul.menu_set li:nth-of-type(4) span.menu_img{background: url(/images/tmenu_ico04.jpg) 50% no-repeat} #cont article.menu_area ul.menu_set li:nth-of-type(5) span.menu_img{background: url(/images/tmenu_ico05.jpg) 50% no-repeat} #cont article.menu_area ul.menu_set li:nth-of-type(6) span.menu_img{background: url(/images/tmenu_ico06.jpg) 50% no-repeat} #cont article.menu_area ul.menu_set li:nth-of-type(7) span.menu_img{background: url(/images/tmenu_ico07.jpg) 50% no-repeat} #cont article.menu_area ul.menu_set li:nth-of-type(8) span.menu_img{background: url(/images/tmenu_ico08.jpg) 50% no-repeat} #cont article.menu_area ul.menu_set li:nth-of-type(9) span.menu_img{background: url(/images/tmenu_ico09.jpg) 50% no-repeat} #cont article.menu_area ul.menu_set li:nth-of-type(10) span.menu_img{background: url(/images/tmenu_ico10.jpg) 50% no-repeat} #cont article.menu_area ul.menu_set li:nth-of-type(11) span.menu_img{background: url(/images/tmenu_ico11.jpg) 50% no-repeat} #cont article.menu_area ul.menu_set li:nth-of-type(1):hover span.menu_img{background: url(/images/tmenu_ico01on.jpg) 50% 0 no-repeat} #cont article.menu_area ul.menu_set li:nth-of-type(2):hover span.menu_img{background: url(/images/tmenu_ico02on.jpg) 50% 0 no-repeat} #cont article.menu_area ul.menu_set li:nth-of-type(3):hover span.menu_img{background: url(/images/tmenu_ico03on.jpg) 50% 0 no-repeat} #cont article.menu_area ul.menu_set li:nth-of-type(4):hover span.menu_img{background: url(/images/tmenu_ico04on.jpg) 50% 0 no-repeat} #cont article.menu_area ul.menu_set li:nth-of-type(5):hover span.menu_img{background: url(/images/tmenu_ico05on.jpg) 50% 0 no-repeat} #cont article.menu_area ul.menu_set li:nth-of-type(5).active span.menu_img{background: url(/images/tmenu_ico05on.jpg) 50% no-repeat} #cont article.menu_area ul.menu_set li:nth-of-type(5).active span.menu_tt{color: #1b609f; font-family: NanumEB} #cont article.menu_area ul.menu_set li:nth-of-type(6):hover span.menu_img{background: url(/images/tmenu_ico06on.jpg) 50% 0 no-repeat} #cont article.menu_area ul.menu_set li:nth-of-type(7):hover span.menu_img{background: url(/images/tmenu_ico07on.jpg) 50% 0 no-repeat} #cont article.menu_area ul.menu_set li:nth-of-type(8):hover span.menu_img{background: url(/images/tmenu_ico08on.jpg) 50% 0 no-repeat} #cont article.menu_area ul.menu_set li:nth-of-type(8).active span.menu_img{background: url(/images/tmenu_ico05on.jpg) 50% no-repeat} #cont article.menu_area ul.menu_set li:nth-of-type(8).active span.menu_tt{color: #1b609f; font-family: NanumEB} #cont article.menu_area ul.menu_set li:nth-of-type(9):hover span.menu_img{background: url(/images/tmenu_ico09on.jpg) 50% 0 no-repeat} #cont article.menu_area ul.menu_set li:nth-of-type(10):hover span.menu_img{background: url(/images/tmenu_ico10on.jpg) 50% 0 no-repeat} #cont article.menu_area ul.menu_set li:nth-of-type(11):hover span.menu_img{background: url(/images/tmenu_ico11on.jpg) 50% 0 no-repeat} #cont article.menu_area ul.menu_set li span.menu_tt{width:100%; text-align: center; font-size: 12px; line-height: 20px; padding:5px 0 0 0; display: block; transition: color 0.3s ease} #cont article.menu_area ul.menu_set li:hover span.menu_tt{color: #1b609f; font-family: NanumEB} #cont article.menu_area div.submenu{width:100%; margin:20px 0 0 0} #cont article.menu_area div.submenu dl{display: flex} #cont article.menu_area div.submenu dd a{font-size: 12px; padding:10px 20px; border:solid 1px #e5e5e5; border-radius: 20px; margin:0 10px 0 0} #cont article.menu_area div.submenu dd a:hover{border:solid 1px rgba(0,0,0,0); background: #f5f6f7} /**/ #cont article.cate_sec{margin: 0 0 0 0} #cont article.cate_sec dl.cate_g{display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 10px} #cont article.cate_sec dl.cate_g>dt{box-sizing: border-box; position: relative; border-radius: 15px} #cont article.cate_sec dl.cate_g>dt.cate_g1{background: url(/images/cate_g1.png) 100% 100% #f43f5e no-repeat} #cont article.cate_sec dl.cate_g>dt.cate_g2{background: url(/images/cate_g2.png) 100% 100% #893ff4 no-repeat} #cont article.cate_sec dl.cate_g>dt.cate_g3{background: url(/images/cate_g3.png) 100% 100% #3f77f4 no-repeat} #cont article.cate_sec dl.cate_g>dt.cate_g4{background: url(/images/cate_g4.png) 100% 100% #619361 no-repeat} #cont article.cate_sec dl.cate_g>dt.cate_g5{background: url(/images/cate_g5.png) 100% 100% #f43f5e no-repeat} #cont article.cate_sec dl.cate_g>dt.cate_g6{background: url(/images/cate_g6.png) 100% 100% #893ff4 no-repeat} #cont article.cate_sec dl.cate_g>dt.cate_g7{background: url(/images/cate_g7.png) 100% 100% #3f77f4 no-repeat} #cont article.cate_sec dl.cate_g>dt.cate_g8{background: url(/images/cate_g8.png) 100% 100% #619361 no-repeat} #cont article.cate_sec dl.cate_g>dt.cate_g9{background: url(/images/cate_g9.png) 100% 100% #f43f5e no-repeat} #cont article.cate_sec dl.cate_g>dt.cate_g10{background: url(/images/cate_g10.png) 100% 100% #893ff4 no-repeat} #cont article.cate_sec dl.cate_g>dt.cate_g11{background: url(/images/cate_g11.png) 100% 100% #3f77f4 no-repeat} #cont article.cate_sec dl.cate_g>dt a{width:100%; height:100%; display: block; padding:20px} #cont article.cate_sec dl.cate_g>dt .cate_g1_tt{font-family: NanumH; font-size: 18px; line-height: 24px; color: #fff} #cont article.cate_sec dl.cate_g>dt .cate_g1_tt em{font-size: 14px; display: block} #cont article.cate_sec dl.cate_g>dt .cate_g1_go{position: absolute; bottom:20px; left:20px; font-size: 11px; color: #fff} #cont article.cate_sec dl.cate_g>dd{border-radius: 15px; cursor: pointer; box-shadow: 0 .2rem .5rem 0 rgba(0, 0, 0, .15)} #cont article.cate_sec dl.cate_g dd div.cate_img{overflow: hidden; border-top-left-radius: 15px; border-top-right-radius: 15px} #cont article.cate_sec dl.cate_g dd div.cate_img img{width:100%; transition: transform 0.3s ease} #cont article.cate_sec dl.cate_g>dd:hover div.cate_img img{transform: scale(1.14)} #cont article.cate_sec dl.cate_g dd dl.cate_info{display: flex; flex-wrap: wrap; padding:20px} #cont article.cate_sec dl.cate_g dd dl.cate_info dt{width:100%; font-size: 13px; font-weight: 600; line-height: 20px; overflow: hidden; height:40px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical} #cont article.cate_sec dl.cate_g dd dl.cate_info dd{font-size: 12px; font-weight: 600; margin:10px 0 0 0} #cont article.cate_sec dl.cate_g dd dl.cate_info dd:nth-of-type(1){color: #fc1c49} #cont article.cate_sec dl.cate_g dd dl.cate_info dd:nth-of-type(2){padding:0 5px} #cont article.cate_sec dl.cate_g dd dl.cate_info dd:nth-of-type(3){padding:0 15px; background: url(/images/bookmark.png) 0 50% no-repeat; margin-left:5px} #cont article.cate_sec div.review{margin:80px 0 0 0; padding:50px; background: #fbeee1; border-radius: 15px} #cont article.cate_sec div.review span.review_st{font-size: 18px; font-family: NanumH; color: #f43f5e} #cont article.cate_sec div.review em.review_em{display: block; font-size: 13px; margin:10px 0 0 0} #cont article.cate_sec div.review ul.review_box_wrap{display: flex; justify-content: space-between; margin:20px 0 0 0; flex-wrap: wrap} #cont article.cate_sec div.review ul.review_box_wrap li{ width:calc(33% - 10px); height: 185px; /* 콘텐츠 높이 */ box-shadow: 0 .2rem .5rem 0 rgba(0, 0, 0, .15); border-radius: 15px; overflow: hidden; position: relative; background: #fff } #cont article.cate_sec div.review ul.review_box_wrap li div.review_box {animation: seamlessRolling 10s infinite linear} #cont article.cate_sec div.review ul.review_box_wrap li:nth-child(1) div.review_box {animation-delay: 0s} #cont article.cate_sec div.review ul.review_box_wrap li:nth-child(2) div.review_box {animation-delay: 0.5s} #cont article.cate_sec div.review ul.review_box_wrap li:nth-child(3) div.review_box {animation-delay: 1.0s} #cont article.cate_sec div.review ul.review_box_wrap li:nth-child(4) div.review_box {animation-delay: 1.5s} #cont article.cate_sec div.review ul.review_box_wrap li:nth-child(5) div.review_box {animation-delay: 2.0s} #cont article.cate_sec div.review ul.review_box_wrap li div.review_box.empty{ visibility:hidden; } /* 마우스 오버 시 일시 정지 */ /*#cont article.cate_sec div.review ul.review_box_wrap li:hover div.review_box {animation-play-state: paused}*/ @keyframes seamlessRolling { 0%, 25% { transform: translateY(0); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } 30%, 55% { transform: translateY(-100%); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } 60%, 85% { transform: translateY(-200%); animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1); } 90%, 99.9% { transform: translateY(-300%); animation-timing-function: step-end; } 100% { transform: translateY(0); } } #cont article.cate_sec div.review ul.review_box_wrap li div.review_boxst{font-size: 11px; padding:15px 15px 15px 32px; display: flex; justify-content: space-between; color: #333; border-top-left-radius: 15px; border-top-right-radius: 15px} #cont article.cate_sec div.review ul.review_box_wrap li:nth-of-type(n) .review_boxst{background: url(/images/ico_end.png) 15px 50% #f5f6f7 no-repeat; border-top:solid 1px #002b4f} #cont article.cate_sec div.review ul.review_box_wrap li:nth-of-type(-n+3) .review_boxst{background: url(/images/ico_ing.png) 15px 50% #f5f6f7 no-repeat; border-top:solid 1px #f43f5e} #cont article.cate_sec div.review ul.review_box_wrap li div.review_boxdd{padding:15px; line-height: 18px; } #cont article.cate_sec div.review ul.review_box_wrap li div.review_boxdd .review_tt{font-size: 13px; height:55px; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden} #cont article.cate_sec div.review ul.review_box_wrap li div.review_boxdd .review_ins{ font-size: 11px; height:23px; overflow: hidden; line-height: 12px; margin:10px 0 0 0; color: #747678; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical } #cont article.cate_sec div.review ul.review_box_wrap li div.review_boxdd .review_stu{font-size: 11px; margin:10px 0 0 0; display: block} /* 이달의 신규강의 */ #cont article.cate_sec div.newclass{margin:80px 0 0 0; padding:50px ;background: #e2f3ff; border-radius: 15px} #cont article.cate_sec div.newclass span.newclass_st{font-size: 18px; font-family: NanumH; color: #3f77f4} #cont article.cate_sec div.newclass em.newclass_em{display: block; font-size: 13px; margin:10px 0 0 0} #cont article.cate_sec div.newclass .newclass_container {overflow: hidden; width: 100%; margin: 20px 0 0 0; padding-bottom:10px} #cont article.cate_sec div.newclass .newclass_track {display: flex; width: max-content; animation: infiniteScroll 25s linear infinite} #cont article.cate_sec div.newclass .newclass_track:hover {animation-play-state: paused} #cont article.cate_sec div.newclass ul.newclass_wrap{display: flex; gap: 10px; padding-right: 10px} #cont article.cate_sec div.newclass ul.newclass_wrap li{width: 216px; flex-shrink: 0; border-radius: 15px; cursor: pointer; box-shadow: 0 .2rem .5rem 0 rgba(0, 0, 0, .15); background: #fff} #cont article.cate_sec div.newclass ul.newclass_wrap li div.newclass_img{overflow: hidden; border-top-left-radius: 15px; border-top-right-radius: 15px} #cont article.cate_sec div.newclass ul.newclass_wrap li div.newclass_img img{width:100%; transition: transform 0.3s ease} #cont article.cate_sec div.newclass ul.newclass_wrap li div.newclass_img:hover img{transform: scale(1.14)} #cont article.cate_sec div.newclass ul.newclass_wrap li dl.newclass_info{display: flex; flex-wrap: wrap; padding: 20px} #cont article.cate_sec div.newclass ul.newclass_wrap li dl.newclass_info dt{width: 100%; font-size: 14px; font-weight: 600; line-height: 20px; overflow: hidden; height: 40px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical} #cont article.cate_sec div.newclass ul.newclass_wrap li dl.newclass_info dd:nth-of-type(1){color: #fc1c49} #cont article.cate_sec div.newclass ul.newclass_wrap li dl.newclass_info dd:nth-of-type(2){padding:0 5px} #cont article.cate_sec div.newclass ul.newclass_wrap li dl.newclass_info dd:nth-of-type(3){padding:0 15px; background: url(/images/bookmark.png) 0 50% no-repeat; margin-left:5px} #cont article.cate_sec div.newclass ul.newclass_wrap li dl.newclass_info dd{font-size: 12px; font-weight: 600; margin: 20px 0 0 0} @keyframes infiniteScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /*main 강좌수표시*/ #cont article.nconunt_set{display: flex; justify-content: space-between} #cont article.nconunt_set dl.nconunt01{display: flex; flex-wrap: wrap} #cont article.nconunt_set dl.nconunt01 dt.nconunt01_st{font-size: 20px; width:100%; text-align: center; font-family: NanumEB; padding:0 0 10px 0; box-sizing: border-box} #cont article.nconunt_set dl.nconunt01 dd{font-size: 36px; font-family: NanumEB; color: #fff; letter-spacing: -1px} #cont article.nconunt_set dl.nconunt01 dd>em{font-size: 18px; font-family: Nanum; letter-spacing: -1px} #cont article.nconunt_set dl.nconunt01 dd.nconunt01a{height:63px; line-height: 63px; padding:0 15px 0 20px; background: #002460; border-top-left-radius: 30px; border-bottom-left-radius: 30px; box-sizing: border-box} #cont article.nconunt_set dl.nconunt01 dd.nconunt01b{height:63px; line-height: 63px; padding:0 20px 0 15px; background: #0069b4; border-top-right-radius: 30px; border-bottom-right-radius: 30px; box-sizing: border-box} #cont article.nconunt_set dl.nconunt02{display: flex; flex-wrap: wrap} #cont article.nconunt_set dl.nconunt02 dt.nconunt02_st{font-size: 20px; width:100%; text-align: center; font-family: NanumEB; padding:0 0 10px 0; box-sizing: border-box} #cont article.nconunt_set dl.nconunt02 dd{font-size: 36px; font-family: NanumEB; color: #fff; letter-spacing: -1px} #cont article.nconunt_set dl.nconunt02 dd>em{font-size: 18px; font-family: Nanum; letter-spacing: -1px} #cont article.nconunt_set dl.nconunt02 dd.nconunt02a{height:63px; line-height: 63px; padding:0 15px 0 20px; background: #035353; border-top-left-radius: 30px; border-bottom-left-radius: 30px; box-sizing: border-box} #cont article.nconunt_set dl.nconunt02 dd.nconunt02b{height:63px; line-height: 63px; padding:0 20px 0 15px; background: #00b3b4; border-top-right-radius: 30px; border-bottom-right-radius: 30px; box-sizing: border-box} #cont article.nconunt_set dl.nconunt03{display: flex; flex-wrap: wrap} #cont article.nconunt_set dl.nconunt03 dt.nconunt03_st{font-size: 20px; width:100%; text-align: center; font-family: NanumEB; padding:0 0 10px 0; box-sizing: border-box} #cont article.nconunt_set dl.nconunt03 dd{font-size: 36px; font-family: NanumEB; color: #fff; letter-spacing: -1px} #cont article.nconunt_set dl.nconunt03 dd>em{font-size: 18px; font-family: Nanum; letter-spacing: -1px} #cont article.nconunt_set dl.nconunt03 dd.nconunt03a{height:63px; line-height: 63px; padding:0 15px 0 20px; background: #59012a; border-top-left-radius: 30px; border-bottom-left-radius: 30px; box-sizing: border-box} #cont article.nconunt_set dl.nconunt03 dd.nconunt03b{height:63px; line-height: 63px; padding:0 20px 0 15px; background: #b40054; border-top-right-radius: 30px; border-bottom-right-radius: 30px; box-sizing: border-box} /* 할인쿠폰 */ #cont article.discoupon{} #cont article.discoupon dl{margin:100px 0 0 0} #cont article.discoupon dl.discou_is{} #cont article.discoupon dl.discou_is dt{font-size: 18px; font-family: NanumB} #cont article.discoupon dl.discou_is dd{margin-top:20px; font-size: 14px; background: #f3f6f8; padding:20px} #cont article.discoupon dl.discou_add{} #cont article.discoupon dl.discou_add dt{font-size: 16px; font-family: NanumB} #cont article.discoupon dl.discou_add dd{margin-top:20px; font-size: 12px;} #cont article.discoupon dl.discou_add dd.discou_add_box{background: #f3f6f8; padding:20px; display: flex; justify-content: space-between} #cont article.discoupon dl.discou_add dd.discou_add_box input[type="text"]{ width:calc(100% - 200px); height:60px; box-sizing: border-box; text-indent: 20px; font-size: 24px; font-family: NanumEB; border-top-left-radius:15px; border-bottom-left-radius:15px } #cont article.discoupon dl.discou_add dd.discou_add_box button{width:200px; height:60px; background: #0069b4; color: #fff; border-top-right-radius:15px; border-bottom-right-radius:15px} #cont article.discoupon div.discou_list{margin:100px 0 0 0} #cont article.discoupon div.discou_list .discou_list_st{font-size: 16px; font-family: NanumB} #cont article.discoupon div.discou_list ul{background: #f3f6f8; margin-top:20px; padding:20px; min-height:170px; display: flex; flex-wrap: wrap} #cont article.discoupon div.discou_list ul>li{ width:158px; height:80px; background: url(/images/coupon.png) no-repeat; box-sizing: border-box; padding:40px 0 0 20px; font-size: 18px; font-family: NanumL; letter-spacing: -1px; margin:0 22px 10px 0 } #cont article.discoupon div.discou_his{margin: 100px 0 0 0} #cont article.discoupon div.discou_his .discou_his_st{font-size: 16px; font-family: NanumB} #cont article.discoupon div.discou_his .discou_his_tab{width:100%; margin-top:20px; font-size: 12px} #cont article.discoupon div.discou_his .discou_his_tab thead{height:49px; line-height: 49px; background: #f3f6f8; border-top:solid 1px #d6d9db} #cont article.discoupon div.discou_his .discou_his_tab thead th{font-weight: 400} #cont article.discoupon div.discou_his .discou_his_tab tbody{} #cont article.discoupon div.discou_his .discou_his_tab tbody tr{} #cont article.discoupon div.discou_his .discou_his_tab tbody tr:hover{background: #fffdea} #cont article.discoupon div.discou_his .discou_his_tab tbody td{height:49px; line-height: 49px; text-align: center; background: url(/images/tab_line.png) 0 100% repeat-x} #cont article.discoupon .coupon_btn_set{display: flex; justify-content: center; margin-top: 50px} #cont article.discoupon .coupon_btn_set .coupon_btn{width:135px; height:40px; background: #0069b4; color: #fff; border-radius: 20px; margin:0 15px} #cont article.discoupon .coupon_btn_set .coupon_inp{width:60px; height:40px; border:solid 1px #d6d9db; border-radius: 20px; text-align: center} #cont article.discoupon .coupon_btn_set .coupon_inp:focus{outline: none; border: solid 1px #0069b4} #cont article.discoupon .coupon_btn_set .coupon_tt{height:40px; line-height: 40px; margin-left:10px} #cont .notice_wrap{width:100%; height:50px; background: #f5f6f7; border-radius: 30px; box-sizing: border-box; display: flex} #cont .notice_wrap .notice_st{width:60px; height:50px; text-align: center; line-height: 50px; font-size: 13px} #cont .notice_wrap ul{width:auto; border-radius: 50px; padding:0 20px; line-height: 40px} #cont .notice_wrap .ticker-news {width:calc(100% - 80px); height:50px; overflow:hidden} #cont .notice_wrap .ticker-news ul {} #cont .notice_wrap .ticker-news ul li {position:relative;overflow:hidden;float:left;width:auto;display:list-item;text-overflow:ellipsis;white-space:nowrap} #cont .notice_wrap .ticker-news ul li a {position:relative;display:block;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 25px; font-size: 13px; line-height: 50px} #cont .notice_wrap .ticker-news ul li a:hover {color:#FF4848} #cont .notice_wrap .ticker-news.ticker-news-ie {right:5px !important} #cont .notice_wrap .ticker-news ul li { position: relative; overflow: hidden; float: left; width: auto; display: list-item; text-overflow: ellipsis; white-space: nowrap; } #cont .pop_class{margin:100px 0 0 0} #cont .pop_class h2{font-size: 24px; padding:0 0 5px 0} #cont .pop_class ul{display: flex; flex-wrap: wrap; justify-content: space-between} #cont .pop_class ul>li{margin:20px 0 0 0} #cont .pop_class ul>li img{} #cont .rec_class{margin:50px 0 0 0} #cont .rec_class h2{font-size: 24px; padding:0 0 5px 0} #cont .rec_class ul{display: flex; flex-wrap: wrap; justify-content: space-between} #cont .rec_class ul>li{margin:20px 0 0 0} /*요즘은 AI 시대*/ #cont .ai_box{display: flex; flex-wrap: wrap; justify-content: space-between; margin:30px 0 0 0} #cont .ai_box li{width:calc(50% - 10px); height:500px; margin:20px 0 0 0; position: relative} #cont .ai_box li:nth-child(4n-3){background:url(/images/aibg01.png) 100% 80% #ffeca8 no-repeat} #cont .ai_box li:nth-child(4n-3) dt{color: #5f4a00} #cont .ai_box li:nth-child(4n+2){background:url(/images/aibg02.png) 100% 80% #ffc1a8 no-repeat} #cont .ai_box li:nth-child(4n+2) dt{color: #581900} #cont .ai_box li:nth-child(4n+3){background:url(/images/aibg03.png) 100% 80% #a8f2ff no-repeat} #cont .ai_box li:nth-child(4n+3) dt{color: #024956} #cont .ai_box li:nth-child(4n){background:url(/images/aibg04.png) 100% 80% #a8e2ff no-repeat} #cont .ai_box li:nth-child(4n) dt{color: #013c5a} #cont .ai_box li>dl{padding:80px; box-sizing: border-box} #cont .ai_box li>dl>dt{font-size: 48px; font-family: NanumH; letter-spacing: -3px} #cont .ai_box li>dl>dd:nth-child(2){font-size: 24px; line-height: 41px; margin:35px 0 0 0} #cont .ai_box li>dl>dd:nth-child(3) a{position: absolute; font-size: 18px; background: #fff; padding:18px 30px; display: inline-block; border-radius: 50px; bottom:80px} /* sub */ /* 강의실 강좌 더보기 */ #class_request{display: flex; justify-content: center} #class_request .request_wrap{width:100%; text-align: center; margin:30px 0 0 0; position: relative} #class_request .request_wrap .class_more{height:33px; line-height: 33px; padding:0 20px; border-radius: 20px; border-top-left-radius: 0; background: #c5ebf9; font-family: NanumB} #class_request .request_wrap .class_request{height:33px; line-height: 33px; padding:0 20px; border-radius: 20px; background: #edf0f2; font-family: NanumB; position: absolute; right:0} #class_request .request_pop{width:420px; padding:50px 30px; position:fixed; z-index: 9999; background: #f3f6f8; top:20%; border:solid 1px #9ebdfc; border-radius:15px; text-align: center} #class_request .request_pop dt{font-size:24px; font-family: NanumEB} #class_request .request_pop dd{font-size: 14px; margin-top:30px; line-height: 24px} #class_request .request_pop dd input[type=text].request_pop_inp1{width:100%; height:44px; display: block; border-radius: 15px; text-indent: 20px; box-sizing: border-box; margin-top:5px} #class_request .request_pop dd input[type=text].request_pop_inp1:focus{outline: solid 1px #9ebdfc} #class_request .request_pop dd textarea.request_pop_inp2{width:100%; height:100px; display: block; border-radius: 15px; padding:20px; box-sizing: border-box; margin-top:5px} #class_request .request_pop dd textarea.request_pop_inp2:focus{outline: solid 1px #9ebdfc} #class_request .request_pop dd textarea.request_pop_inp2::-webkit-scrollbar{width:5px} #class_request .request_pop dd textarea.request_pop_inp2::-webkit-scrollbar-thumb{background: #d6d9db; border-radius:5px} #class_request .request_pop dd button.request_send{height:33px; line-height: 33px; border-radius: 20px; padding:0 20px; background: #0069b4; color: #fff; margin:0 5px} #class_request .request_pop dd button.request_cancel{height:33px; line-height: 33px; border-radius: 20px; padding:0 20px; background: #d6d9db; margin:0 5px} #class_request .request_pop .class_inp_wrap1{text-align: left} #class_request .request_pop .class_inp_wrap2{text-align: left} /* 강의실 */ #cont .freepass{display: flex; margin-top:75px} #cont .freepass dd{height:268px} #cont .freepass dd a{width:100%; height:100%; color:#fff; font-size: 24px; display: block; font-family: NanumEB} #cont .freepass dd .free_tt{display: block; padding:25px 0 0 15px; font-family: NanumH; line-height: 28px; letter-spacing: -1px} #cont .freepass dd .free_price{color: #fff200; font-family: NanumH; display: block; letter-spacing: -2px} #cont .freepass dd .free_price2{font-size: 12px; text-decoration: line-through; font-family: NanumB} #cont .freepass dd .free_sale{font-size: 12px; background: #db0000; border-radius: 10px; margin:0 0 0 5px; padding:2px 5px; font-family: NanumB} #cont .freepass dd .free_rest{font-size: 12px; font-family: NanumB} #cont .freepass dd .free_em{font-size:18px} #cont .freepass dd .btn_app{ margin-top:10px; width:52px; height:20px; font-size: 11px; background: #fff; color:#000; display: block; border-radius: 20px; line-height: 20px; text-align: center; font-family: NanumEB } #cont .freepass dd.fp3m{width:151px; background: url(/images/freepass_3m.png) no-repeat} #cont .freepass dd.fp6m{width:151px; margin-left:19px; background: url(/images/freepass_6m.png) no-repeat} #cont .freepass dd.fpst{width:478px; background: url(/images/freepass_st.png) 0 40px no-repeat; text-align: center; box-sizing: border-box} #cont .freepass dd.fpst .fpst_st{font-size:48px; font-family: NanumH; padding-top:65px; display: block; line-height: 30px} #cont .freepass dd.fpst .fpst_st .fpst_em{font-size:16px; font-family: NanumEB} #cont .freepass dd.fpst .fpst_tt{display: block; font-size: 14px; font-family: NanumB; line-height: 18px; margin-top:30px} #cont .freepass dd.fp12m{width:151px; background: url(/images/freepass_12m.png) no-repeat} #cont .freepass dd.fp24m{width:151px; margin-left:19px; background: url(/images/freepass_24m.png) no-repeat} /* 자유이용권 등록 */ #cont .freepass_app{} #cont .freepass_app .fp_app_classnum{width:100%; height:50px; line-height: 50px; display: block; text-align: center; font-family: NanumH; font-size: 24px; margin-top:50px; letter-spacing: -1px} #cont .freepass_app .fp_app_classnum .fp_act1{color: #0069b4; font-family: NanumH} #cont .freepass_app .fp_app_classnum .fp_act2{color: #0069b4; font-family: NanumH} #cont .freepass_app .fp_app_classnum .fp_act3{color: #FF0000; font-family: NanumH} #cont .freepass_app .fp_app_tab{width:100%; margin-top:20px; font-size: 12px} #cont .freepass_app .fp_app_tab caption{font-family:NanumEB; text-align: left; font-size: 30px; padding-bottom:20px} #cont .freepass_app .fp_app_tab thead{width:100%; height:49px; line-height: 49px; margin-top:20px; background: #f3f6f8; border-top:solid 1px #d6d9db} #cont .freepass_app .fp_app_tab thead>tr{} #cont .freepass_app .fp_app_tab thead>tr>th{font-family: Nanum; font-weight: normal} #cont .freepass_app .fp_app_tab tbody>tr>td{padding:20px 0; text-align: center; background: url(/images/tab_line.png) 0 100% repeat-x} #cont .freepass_app .fp_app_tab tbody>tr:hover{background: #fffdea} #cont .freepass_app .fp_app_tab .price_un{margin-right:5px; text-decoration: line-through} #cont .freepass_app .fp_app_tab .price_b{margin-left:5px; font-family: NanumEB; color:#ff0000} #cont .freepass_app .fp_app_tab .fp_app_tab_st{width:50%; text-align: left; padding-left:20px} #cont .freepass_app .fp_app_tab .fp_app_tab_st .fp_sale{margin-left:5px; font-family: NanumEB; color:#ff0000} #cont .freepass_app .fp_app_tab .btn_class_app{background: #0069b4; width:85px; height:33px; border-radius: 20px;; color: #fff; font-size: 12px} #cont .freepass_app .freepass_box{padding:60px; border:solid 1px #d6d9db; margin-top:50px; display: flex; flex-wrap: wrap; justify-content: space-between} #cont .freepass_app .freepass_box .fp_box_st{width:100%; display: block; text-align: center; font-size: 30px; letter-spacing: -2px} #cont .freepass_app .freepass_box .fp_box_st .fp_box_st_ev{font-family: NanumEB} #cont .freepass_app .freepass_box ul{margin-top:30px; box-sizing: border-box} #cont .freepass_app .freepass_box ul>li{padding-left:60px; margin-top:30px} #cont .freepass_app .freepass_box ul>li .fp_box_dd{font-size: 18px; display: block; font-family: NanumEB} #cont .freepass_app .freepass_box ul>li .fp_box_em{font-size: 14px; display: block; margin-top:5px; letter-spacing: -1px; line-height: 20px} #cont .freepass_app .freepass_box ul>li.fp_box_li1{background: url(/images/fp_ico001.png) no-repeat} #cont .freepass_app .freepass_box ul>li.fp_box_li2{background: url(/images/fp_ico002.png) no-repeat} #cont .freepass_app .freepass_box ul>li.fp_box_li3{background: url(/images/fp_ico003.png) no-repeat} #cont .freepass_app .freepass_box ul>li.fp_box_li4{background: url(/images/fp_ico004.png) no-repeat} #cont .freepass_app .freepass_box ul>li.fp_box_li5{background: url(/images/fp_ico005.png) no-repeat} #cont .freepass_app .freepass_box ul:nth-child(3){padding-left:30px} /* 테이블 디자인 */ #cont .class_list{} #cont .class_list h2{width:100%; height:55px; margin-top:75px; display: flex; justify-content: center; line-height: 55px} #cont .class_list h2 .title_ico{width:60px; height:55px; background: url(/images/aiico.png) no-repeat} #cont .class_list h2 .title_tt{font-size: 24px; font-family: NanumH; letter-spacing: -2px} #cont .class_list .sub_tt{width:100%; display: block; text-align: center; padding:30px 0 0 0; line-height: 20px} #cont .class_list .sub_tag{display: flex; flex-wrap: wrap; margin-top:15px} #cont .class_list .sub_tag dd{height:33px; line-height:33px; background: #edf0f2; border-radius:20px; margin:10px 10px 0 0} #cont .class_list .sub_tag dd a{height:100%; padding:0 10px; font-size: 14px; display: block} #cont .class_list .sub_tag dd:hover{background: #3badff} #cont .class_list .sub_tag dd a:hover{color:#fff} #cont .class_list .sub_tag dd.active{background: #3badff} #cont .class_list .sub_tag dd.active a{color:#fff; font-family: NanumB} #cont .class_list_tab{width:100%; margin-top:30px; font-size: 12px} #cont .class_list_tab caption{font-family:NanumH; text-align: left; font-size: 18px; padding-bottom:20px} #cont .class_list_tab thead{width:100%; height:40px; line-height: 40px; margin-top:20px} #cont .class_list_tab thead>tr{} #cont .class_list_tab thead>tr>th{font-family: Nanum; font-weight: normal; background: #f3f6f8; box-sizing: border-box} #cont .class_list_tab thead>tr>th:first-of-type{border-top-left-radius: 15px; border-bottom-left-radius: 15px} #cont .class_list_tab thead>tr>th:last-of-type{border-top-right-radius: 15px; border-bottom-right-radius: 15px; padding:0 10px 0 0} #cont .class_list_tab tbody>tr>td{padding:15px 0; text-align: center; background: url(/images/tab_line.png) 0 100% repeat-x} #cont .class_list_tab tbody>tr>td:last-of-type{padding:0 10px 0 0} #cont .class_list_tab tbody>tr>td[colspan]:not([colspan="1"]) {height:42px; line-height:42px} #cont .class_list_tab tbody>tr:hover{background: #fffdea} #cont .class_list_tab .class_list_tab_st{text-align: left; padding-left:10px} #cont .class_list_tab .class_list_tab_tt{background: #fff; text-align: left} #cont .class_list_tab .class_list_tab_btn{background: #fff; display: flex; justify-content: flex-end} #cont .class_list_tab .class_list_tab_btn button{background: rgba(0,0,0,0); display: block; font-size: 18px; padding:5px} #cont .class_list_tab .class_list_tab_btn button em{display: none} #cont .class_list_tab .class_list_tab_btn button.gallery_view{} #cont .class_list_tab .class_list_tab_btn button.list_view{} #cont .class_list_tab .class_list_tab_st .class_sub{font-size: 11px; background: #3badff; color: #fff; border-radius: 5px; padding:3px 5px; margin-left:5px; font-family: NanumB} #cont section.list_wrap{} #cont section.list_wrap ul.classlist{display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px 10px} #cont section.list_wrap ul.classlist li{border-radius: 15px; cursor: pointer; box-shadow: 0 .2rem .5rem 0 rgba(0, 0, 0, .15); position: relative} #cont section.list_wrap ul.classlist li div.cate_img{} #cont section.list_wrap ul.classlist li dl.cate_info{} #cont section.list_wrap ul.classlist li div.cate_img{overflow: hidden; border-top-left-radius: 15px; border-top-right-radius: 15px} #cont section.list_wrap ul.classlist li div.cate_img img{width:100%; transition: transform 0.3s ease} #cont section.list_wrap ul.classlist li:hover div.cate_img img{transform: scale(1.14)} #cont section.list_wrap ul.classlist li dl.cate_info{display: flex; flex-wrap: wrap; padding:20px} #cont section.list_wrap ul.classlist li dl.cate_info dt{width:100%; font-size: 13px; font-weight: 600; line-height: 20px; overflow: hidden; height:40px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical} #cont section.list_wrap ul.classlist li dl.cate_info dd{font-size: 12px; font-weight: 600; margin:10px 0 0 0} #cont section.list_wrap ul.classlist li dl.cate_info dd:nth-of-type(1){color: #fc1c49} #cont section.list_wrap ul.classlist li dl.cate_info dd:nth-of-type(2){padding:0 5px} #cont section.list_wrap ul.classlist li dl.cate_info dd:nth-of-type(3){padding:0 15px; background: url(/images/bookmark.png) 0 50% no-repeat; margin-left:5px} #cont section.list_wrap ul.classlist li dl.cate_info dd:nth-of-type(4){} #cont section.list_wrap ul.classlist li dl.cate_info dd:nth-of-type(5){margin-left:10px} /* 아이티고만의 특별한 강의 시스템 */ #cont .itgo_sys{padding: 60px; border: solid 1px #d6d9db; margin-top: 50px; display: flex; flex-wrap: wrap; justify-content: space-between} #cont .itgo_sys .itgo_sys_st{width: 100%; display: block; text-align: center; font-size: 30px; letter-spacing: -2px} #cont .itgo_sys .itgo_sys_st span.itgo_sys_st_ev{font-family: NanumEB} #cont .itgo_sys ul{margin-top: 30px; box-sizing: border-box} #cont .itgo_sys li{min-height:45px; padding-left: 60px; margin-top: 30px} #cont .itgo_sys li span.itgo_sys_dd{font-size: 18px; display: block; font-family: NanumEB} #cont .itgo_sys li em.itgo_sys_em{font-size: 14px; display: block; margin-top: 5px; letter-spacing: -1px; line-height: 20px} #cont .itgo_sys li.itgo_sys_li1{background: url(/images/fp_ico001.png) no-repeat} #cont .itgo_sys li.itgo_sys_li2{background: url(/images/fp_ico002.png) no-repeat} #cont .itgo_sys li.itgo_sys_li3{background: url(/images/fp_ico003.png) no-repeat} #cont .itgo_sys li.itgo_sys_li4{background: url(/images/fp_ico006.png) no-repeat} #cont .itgo_sys li.itgo_sys_li5{background: url(/images/fp_ico007.png) no-repeat} #cont .itgo_sys li.itgo_sys_li6{background: url(/images/fp_ico008.png) no-repeat} #cont .itgo_sys li.itgo_sys_li7{background: url(/images/fp_ico005.png) no-repeat} /* 즐겨 찾는 강좌 */ #cont .bookmark{} #cont .bookmark button.btn_favdel{height:33px; background: #0069b4; border-radius: 20px; color: #fff; padding:0 20px} #cont .bookmark .all_favdel{width:100%; text-align: right; display: block} #cont .bookmark .all_favdel button.btn_all_favdel{ height:33px; background: #213a4a; border-radius: 20px; color: #fff; padding:0 20px; margin:20px 0 0 10px; font-size: 12px } /* 수강리스트 */ #cont .class_list{} #cont .class_list button.btn_clcancle{height:33px; background: #0069b4; border-radius: 20px; color: #fff; padding:0 20px} #cont .class_list .classlist_info{ width:13px; height:13px; background: url(/images/classlist_info.png) no-repeat; display: inline-block; vertical-align: middle; margin-left:5px; overflow: hidden; text-indent: -9999px } #cont .class_list .classlist_info_box{ position: absolute; border: solid 1px #d6d9db; padding:20px; text-align: left; line-height: 20px; box-sizing: border-box; border-radius: 5px; border-top-left-radius: 0; background: url(/images/box_point.png) no-repeat #fff } /*출석현황보기*/ #cont .attendance{margin-top:100px} #cont .attendance .att_top{display: flex; justify-content: space-between} #cont .attendance .att_top h2{font-size: 30px; font-family: NanumEB} #cont .attendance .att_top dl{display: flex} #cont .attendance .att_top dl>dd.att_tt{font-size: 30px; font-family: NanumEB; margin:0 20px} #cont .attendance .att_top dl>dd button{width:80px; height:33px; border:solid 2px #000; border-radius: 20px; background: #fff; font-family: NanumB} #cont .attendance .att_top .today button{width:80px; height:33px; background: #0069b4; border-radius: 20px; color: #fff} #cont .attendance .att_top .today .btn_today{width:80px; height:33px; background: #0069b4; border-radius: 20px; color: #fff} #cont .attendance .att_tab{width:100%; margin-top:20px} #cont .attendance .att_tab th{ height:50px; line-height: 50px; border-top:solid 1px #d6d9db; box-sizing: border-box; background: url(/images/att_line.png) 100% 0 repeat-y #f3f6f8; font-weight: normal} #cont .attendance .att_tab td{height:120px; font-size: 12px} #cont .attendance .att_tab td.today_chk{background: #fffdea} #cont .attendance .att_tab td span.tab_wrap1{width:100%; height:100%; display: block; background: url(/images/att_line.png) 100% 0 repeat-y} #cont .attendance .att_tab td:nth-last-child(1) span.tab_wrap1{background: none} #cont .attendance .att_tab td:nth-last-child(n+7){color:#e74c3c} #cont .attendance .att_tab td span.tab_wrap2{width:100%; height:100%; display: block; background: url(/images/tab_line.png) 0 100% repeat-x; padding:10px; box-sizing: border-box} #cont .attendance .att_tab td span.today_chk{width:100%; height:100%; background: url(/images/stamp.png) 50% no-repeat; display: block} /*출석 이벤트*/ #cont .attendance_event{display: flex; flex-wrap: wrap; margin-top:50px} #cont .attendance_event .ev_roulette{width:50%; display:flex; justify-content: center} #cont .attendance_event .ev_roulette .roulette_start{width:490px; height:490px; position: absolute; background: url(/images/roulette_start.png) no-repeat; z-index: -1; cursor: pointer; overflow: hidden; text-indent: -9999px} #cont .attendance_event .ev_roulette .roulette_wrap{width:490px; height:490px; background: #0069b4; border-radius: 250px; padding:10px; box-sizing: border-box; position: relative; z-index: -2} #cont .attendance_event .ev_roulette .roulette_wrap .roulette_stop{ width:40px; height:50px; background: url(/images/roulette_stop.png) no-repeat; position: absolute; top:-15px; left:225px; z-index: 1; caret-color: transparent; } #cont .attendance_event .ev_roulette .roulette_wrap .roulette_cha{ width:156px; height:154px; background: url(/images/roulette_cha.png) no-repeat; position: absolute; top:167px; left:169px; z-index: 1; caret-color: transparent; } #cont .attendance_event .ev_roulette .roulette_wrap .roulette_img{ width:470px; height:470px; background: url(/images/roulette2.png) no-repeat; overflow: hidden; text-indent: -9999px; /*animation: roulette_img 3s ease; -webkit-animation-fill-mode:both*/ } #cont .attendance_event .ev_calendar{width:50%} #cont .attendance_event .ev_calendar h3{text-align: center} #cont .attendance_event .ev_calendar table{width:100%; margin-top:15px} #cont .attendance_event .ev_calendar th{width:calc(100% / 7); height:50px; line-height: 50px; background: url(/images/att_line.png) #f3f6f8 repeat-y; border-top:solid 1px #d6d9db; font-size: 12px; font-weight: 400} #cont .attendance_event .ev_calendar th:nth-of-type(1){background: #f3f6f8} #cont .attendance_event .ev_calendar td span{ height:71px; display: block; padding:10px; box-sizing: border-box; background: url(/images/att_line.png) repeat-y, url(/images/tab_line.png) repeat-x; font-size: 12px } #cont .attendance_event .ev_calendar td:nth-of-type(1) span{background: url(/images/tab_line.png) repeat-x} #cont .attendance_event .ev_calendar tr:nth-of-type(1)>td span{background: url(/images/att_line.png) repeat-y} #cont .attendance_event .ev_calendar tr:nth-of-type(1)>td:nth-of-type(1) span{background: none} #cont .attendance_event .ev_calendar td.att_chk{background: url(/images/att_chk.png) 70% 70% no-repeat} #cont .attendance_event .ev_notice{width:50%; font-size: 14px; margin-top:80px; line-height: 24px} #cont .attendance_event .ev_notice ul{} #cont .attendance_event .ev_notice ul>li{background: url(/images/list_st.png) 0 11px no-repeat; padding:0 0 0 10px} #cont .attendance_event .ev_event{width:50%; margin-top:50px} #cont .attendance_event .ev_event ul{display: flex; justify-content: space-between} #cont .attendance_event .ev_event ul>li{width:180px; height:175px; box-sizing: border-box; border:solid 1px #0069b4; background: #f3f6f8; text-align: center; padding:30px 0 0 0; font-size: 18px} #cont .attendance_event .ev_event ul>li span{display: block; font-family: NanumB; letter-spacing: -1px} #cont .attendance_event .ev_event ul>li span.mypt001{width:100%; height:40px; background: url(/images/mypt100.png) 50% 50% no-repeat; text-indent: -9999px; overflow: hidden; margin-top:10px} #cont .attendance_event .ev_event ul>li span.mypt002{width:100%; height:40px; background: url(/images/mypt300.png) 50% 50% no-repeat; text-indent: -9999px; overflow: hidden; margin-top:10px} #cont .attendance_event .ev_event ul>li span.mypt003{width:100%; height:40px; background: url(/images/mypt_gift.png) 50% 50% no-repeat; text-indent: -9999px; overflow: hidden; margin-top:10px} #cont .attendance_event .ev_event ul>li span.sale001{width:100%; height:40px; background: url(/images/sale20.png) 50% 50% no-repeat; text-indent: -9999px; overflow: hidden; margin-top:10px} #cont .attendance_event .ev_event ul>li span.sale002{width:100%; height:40px; background: url(/images/sale30.png) 50% 50% no-repeat; text-indent: -9999px; overflow: hidden; margin-top:10px} #cont .attendance_event .ev_event ul>li span.sale003{width:100%; height:40px; background: url(/images/sale50.png) 50% 50% no-repeat; text-indent: -9999px; overflow: hidden; margin-top:10px} #cont .attendance_event .ev_event ul>li button{display: block; font-size: 14px; background: #213a4a; padding:10px 15px; color: #fff; border-radius: 20px; margin:15px auto 0 auto; font-family: NanumB} /* 휴학/복학하기 */ #cont .rest{} #cont .rest .rest_tt{padding:20px 0; display: block; line-height: 24px; font-size: 12px} #cont .rest_box{background: #f3f6f8; padding:50px 100px; margin-top:50px} #cont .rest_box .rest_box_st{width:100%; display: block; text-align: center; padding-bottom:20px; font-size: 14px; font-family: NanumB} #cont .rest_box .resr_box_tab{background: #fff; padding:50px; box-sizing: border-box; margin: 0 auto; border-radius: 15px} #cont .rest_box .resr_box_tab .class_list_tab{margin:0} #cont .rest_box .resr_box_tab .btn_rest_set{width:100%; display: block; text-align: center; margin-top:40px} #cont .rest_box .resr_box_tab .btn_rest_set button.btn_rest{height:40px; background: #0069b4; padding:0 20px; color: #fff; border-radius: 20px} #cont .pop_rest{width:100%; height:100%; position:fixed; background: rgba(0,0,0,0.8); top:0; left:0; display: none} #cont .pop_rest .pop_rest_wrap{width:460px; background: #fff; padding:40px; margin: calc(10% + 80px) auto; border-radius: 15px; font-size: 18px} #cont .pop_rest .pop_rest_wrap .prest_st{display: block} #cont .pop_rest .pop_rest_wrap .prest_dd{display: block; padding:80px 0; text-align: center; font-family: NanumB} /* 수강신청 */ #cont .app_step{display: flex; margin-top:33px} #cont .app_step li{width:240px; height:142px; background: url(/images/app_step_arrow.png) 87% 50% no-repeat} #cont .app_step li:nth-last-child(1){background: none} #cont .app_step li .as_circle{ width:142px; height:142px; border-radius: 71px; display: block; text-align: center; padding-top:100px; box-sizing: border-box; font-family: NanumB; letter-spacing: -1px; font-size: 14px } #cont .app_step li:nth-child(1) .as_circle{background: url(/images/app_step1.png) #f3f6f8 55% 40% no-repeat} #cont .app_step li:nth-child(2) .as_circle{background: url(/images/app_step2.png) #f3f6f8 50% 40% no-repeat} #cont .app_step li:nth-child(3) .as_circle{background: url(/images/app_step3.png) #f3f6f8 47% 40% no-repeat} #cont .app_step li:nth-child(1).as_active .as_circle{background: url(/images/app_step1_on.png) #0069b4 55% 40% no-repeat; color: #fff} #cont .app_step li:nth-child(2).as_active .as_circle{background: url(/images/app_step2_on.png) #0069b4 50% 40% no-repeat; color: #fff} #cont .app_step li:nth-child(3).as_active .as_circle{background: url(/images/app_step3_on.png) #0069b4 47% 40% no-repeat; color: #fff} #cont .app_tab{} #cont .app_tab{width:100%; margin-top:100px; font-size: 14px} #cont .app_tab caption{font-family:NanumB; text-align: left; font-size: 18px; padding-bottom:20px} #cont .app_tab tr>th{width:120px; font-family: Nanum; font-weight: normal; background: url(/images/tab_line.png) 0 100% #f3f6f8 repeat-x} #cont .app_tab tr:nth-child(1){border-top:solid 1px #d6d9db} #cont .app_tab tr>td{padding:20px 0; background: url(/images/tab_line.png) 0 100% repeat-x; text-align: left; padding-left:20px; box-sizing: border-box} #cont .app_tab tr:nth-last-child(1)>th{background: #f3f6f8; border-bottom:solid 1px #d6d9db} #cont .app_tab tr:nth-last-child(1)>td{background: none; border-bottom:solid 1px #d6d9db} #cont .app_tt{} #cont .app_tt dl{margin-top:45px} #cont .app_tt dt{font-size: 14px; font-family: NanumB; margin-bottom:5px} #cont .app_tt dd{font-size: 14px; line-height: 20px} #cont .app_tt .appbr{display: block; margin-left:10px} #point-cancel{padding:5px 10px; background: #0069b4; margin-left:10px; border-radius: 20px; color: #fff} #cont .app_tab .pt_wrap{display: flex} #cont .app_tab .pt_set{width:195px; height:35px; background: #f3f6f8; border-radius: 10px; display: flex} #cont .app_tab .pt_set input.pt_inp{ width:147px; height:35px; background: rgba(0,0,0,0); text-indent: 10px; outline: none; border-top-left-radius: 10px; border-bottom-left-radius: 10px; box-sizing: border-box; border: solid 1px rgba(0,0,0,0) } #cont .app_tab .pt_set input.pt_inp:focus{border:solid 1px #0069b4} #cont .app_tab .pt_set .btn_pt{width:48px; height:35px; background: #0069b4; color: #fff; border-top-right-radius: 10px; border-bottom-right-radius: 10px} #cont .app_tab .pt_tt{line-height: 35px; text-indent: 20px} #cont .app_tab .cou_set{} #cont .app_tab select.cou_sel{height:35px; border:solid 1px #d6d9db; padding:0 10px} #cont .app_tab .pay_select_box{display: flex} #cont .app_tab .pay_select_box .circjk{width:18px; height:18px; background: #777; border-radius: 9px; display: inline-block; margin-right:5px; vertical-align: middle} #cont .app_tab .pay_select_box input.inp_app_pay{display: none} #cont .app_tab .pay_select_box input.inp_app_pay+label.to_app_pay{ cursor: pointer; caret-color: transparent; /*width:18px; height:18px; background: #777; border-radius: 9px; display: inline-block;*/ } #cont .app_tab .pay_select_box input.inp_app_pay:checked+label.to_app_pay span.circjk{ width:18px; height:18px; background: #0069b4; border-radius: 9px; display: inline-block; } #cont .app_tab .pay_select_box label.to_app_pay{vertical-align: middle} #cont .app_tab .pay_select_box .pay_wrap{display: block; margin-right:20px} #cont .app_tab .pay_sale{color:#FF0000; font-family: NanumH} /*아이티고 시리즈*/ #cont .series_title{} #cont .series_title h3{width:100%; height:55px; margin-top:75px; display: flex; justify-content: center; line-height: 55px} #cont .series_title h3 .title_ico{height:40px; line-height: 40px; padding:0 20px; background: #feab02; color: #fff; border-radius: 30px; font-size: 18px; font-family: NanumH; margin:8px 10px 0 0} #cont .series_title h3 .title_tt{font-size: 28px; font-family: NanumH; letter-spacing: -2px} #cont .series_title ul.series_cont{display: flex; justify-content: space-between; margin:50px 0 0 0} #cont .series_title ul.series_cont li{width:calc(50% - 20px); background: #f3f6f8; border-radius: 20px; padding:20px; box-sizing: border-box} #cont .series_title ul.series_cont li.tea_set{display: flex; flex-wrap: wrap; /*background: #ffeca8*/} #cont .series_title ul.series_cont li.tea_set .ser_tea_wrap{width:100%; display: block} #cont .series_title ul.series_cont li.tea_set .ser_tea_wrap .ser_tea{heigth:30px; font-size: 14px; line-height: 30px; background: #8e8e8e; padding:0 20px; margin:0 0 20px 0; display: inline-block; color: #fff; border-radius: 20px} #cont .series_title ul.series_cont li.tea_set .ser_img{display: block} #cont .series_title ul.series_cont li.tea_set>dl{padding:0 0 0 30px} #cont .series_title ul.series_cont li.intro_set{/*background: #ffc1a8*/} #cont .series_title ul.series_cont li.intro_set>dl>dt{heigth:30px; font-size: 14px; line-height: 30px; background: #8e8e8e; padding:0 20px; margin:0 0 20px 0; display: inline-block; color: #fff; border-radius: 20px} #cont .series_title ul.series_cont li>dl{} #cont .series_title ul.series_cont li>dl>dt{font-size: 18px; font-weight: 800; margin:0 0 10px 0} #cont .series_title ul.series_cont li>dl>dd{line-height: 24px} #cont .series_title table.ser_tab{width:100%; margin:50px 0 0 0} #cont .series_title table.ser_tab caption{text-align: left; padding:0 0 20px 0} #cont .series_title table.ser_tab thead{} #cont .series_title table.ser_tab thead tr{height: 49px; line-height: 49px; background: #f3f6f8; border-top: solid 1px #d6d9db} #cont .series_title table.ser_tab thead tr>th{text-align: center; font-weight: 400; font-size: 14px} #cont .series_title table.ser_tab tbody tr>td{padding:20px 0; background: url(/images/tab_line.png) 0 100% repeat-x; font-size: 14px; text-align: center} #cont .series_title table.ser_tab tbody tr>td:nth-of-type(1){text-align: left; text-indent: 10px} /*아이티고 대표 강사 및 강좌 소개*/ #cont .ins_title{} #cont .ins_title h3{width:100%; height:55px; margin-top:75px; display: flex; justify-content: center; line-height: 55px} #cont .ins_title h3 .title_ico{width:60px; height:55px; background: url(/images/title_ico.png) no-repeat} #cont .ins_title h3 .title_tt{font-size: 36px; font-family: NanumH; letter-spacing: -2px} #cont .ins_title .sub_tag{display: flex; flex-wrap: wrap; margin-top:15px} #cont .ins_title .sub_tag dd{height:33px; line-height:33px; background: #edf0f2; border-radius:20px; margin:10px 10px 0 0} #cont .ins_title .sub_tag dd a{height:100%; padding:0 10px; font-size: 14px; display: block} #cont .ins_title .sub_tag dd:hover{background: #3badff} #cont .ins_title .sub_tag dd a:hover{color:#fff} #cont .ins_title .sub_tag dd.active{background: #3badff} #cont .ins_title .sub_tag dd.active a{color:#fff; font-family: NanumB} #cont ul.ins_set{width:100%; display: flex; flex-wrap: wrap; margin:50px 0 0 0; justify-content: space-between} #cont ul.ins_set>li{width:calc(50% - 10px); border-radius: 15px; background: #f6f6f6} #cont ul.ins_set>li div.ins_sec001{width:100%; height:407px; box-sizing: border-box; position: relative; border-top-left-radius: 15px; border-top-right-radius: 15px; background-repeat: no-repeat} #cont ul.ins_set>li:nth-child(1) div.ins_sec001{padding:75px 0 0 317px; background-color: #ffeca8; background-position: 0 100%;} #cont ul.ins_set>li:nth-child(1) div.ins_sec001 .ins_name span.ins_name_dd{font-size: 60px; font-family: NanumEB; color:#5f4a00; margin:5px 0 0 0; display: block} #cont ul.ins_set>li:nth-child(2) div.ins_sec001{padding:75px 0 0 60px; background-color: #ffc1a8; background-position: 100% 100%;} #cont ul.ins_set>li:nth-child(2) div.ins_sec001 .ins_name span.ins_name_dd{font-size: 60px; font-family: NanumEB; color:#601c00; margin:5px 0 0 0; display: block} #cont ul.ins_set>li div.ins_sec001 .ins_name{} #cont ul.ins_set>li div.ins_sec001 .ins_name h4{font-size: 24px; font-family: Nanum; letter-spacing: -2px} #cont ul.ins_set>li div.ins_sec001 .ins_name h4>em{font-family: NanumEB} #cont ul.ins_set>li div.ins_sec001 .ins_class{margin:35px 0 0 0} #cont ul.ins_set>li div.ins_sec001 .ins_class dt{font-size: 18px; font-family: NanumB; margin:0 0 10px 0} #cont ul.ins_set>li div.ins_sec001 .ins_class dd{font-size: 18px; line-height: 28px} #cont ul.ins_set>li div.ins_sec001 .ins_class dd.ins_goclass a{width:138px; height:37px; line-height: 37px; text-align: center; background: #fff; border-radius: 20px; display: block; font-size: 14px; position: absolute; top:300px} #cont ul.ins_set>li div.ins_sec002{} #cont ul.ins_set>li div.ins_sec002 dl.ins_sec002_menu{display: flex} #cont ul.ins_set>li div.ins_sec002 dl.ins_sec002_menu dd{width:50%; height:50px; line-height: 50px; text-align: center; background: #dedee1; font-size: 18px; cursor: pointer} #cont ul.ins_set>li div.ins_sec002 dl.ins_sec002_menu dd.active{background: #f6f6f6; font-family: NanumB; cursor:default} #cont ul.ins_set>li div.ins_sec002 dl.ins_sec002_1{padding:40px} #cont ul.ins_set>li div.ins_sec002 dl.ins_sec002_1 dd{line-height: 42px; background: url(/images/ins_dot.png) 0 50% no-repeat; padding:0 0 0 20px} #cont ul.ins_set>li div.ins_sec002 dl.ins_sec002_2{padding:40px; display: none} #cont ul.ins_set>li div.ins_sec002 dl.ins_sec002_2 dd{line-height: 42px; background: url(/images/ins_dot.png) 0 50% no-repeat; padding:0 0 0 20px} #cont .ins_title .ins_tea{display: flex; flex-wrap: wrap; margin:50px 0 0 0} #cont .ins_title .ins_tea li{width:32%; background: #f6f6f6; border-radius:15px; display: flex; padding:20px; box-sizing: border-box; margin:20px 0 0 2%} #cont .ins_title .ins_tea li:nth-child(3n-2){margin:20px 0 0 0} #cont .ins_title .ins_tea li span.tea_img{} #cont .ins_title .ins_tea li dl.tea_dd{padding:0 0 0 20px} #cont .ins_title .ins_tea li dl.tea_dd dt{font-size: 16px; font-family: NanumEB; padding:0 0 10px 0} #cont .ins_title .ins_tea li dl.tea_dd dd{font-size: 14px; line-height: 20px} /* 비영리단 교육지원 안내 */ #cont .edu_support{background: url(/education/edu_support/edu_support.png) #e2ebff no-repeat; margin:210px 0 0 0; padding:85px 40px 40px 40px; text-align: center} #cont .edu_support h2.sup_st{font-family: gangwon; font-size: 50px; line-height: 60px} #cont .edu_support h2.sup_st .sup_st_ect{font-family: gangwon; font-size: 50px; color:#005f9e} #cont .edu_support .sup_tt{font-size: 16px; line-height: 24px; margin:15px 0 0 0; display: block} #cont .edu_support dl.sup_step{display: flex; justify-content: space-between; margin-top:50px} #cont .edu_support dl.sup_step dd{width:247px; font-size: 14px; line-height: 18px; border-radius: 15px; padding:260px 25px 25px 25px; box-sizing: border-box; text-align: left} #cont .edu_support dl.sup_step h3.step_ddst{} #cont .edu_support dl.sup_step span.step_d4{display: block; margin-top:15px} #cont .edu_support dl.sup_step dd:nth-of-type(1){background: url(/education/edu_support/edu_support01.jpg) #fff no-repeat} #cont .edu_support dl.sup_step dd:nth-of-type(2){background: url(/education/edu_support/edu_support02.jpg) #fff no-repeat} #cont .edu_support dl.sup_step dd:nth-of-type(3){background: url(/education/edu_support/edu_support03.jpg) #fff no-repeat} #cont .edu_support dl.sup_step dd:nth-of-type(4){background: url(/education/edu_support/edu_support04.jpg) #fff no-repeat} #cont .support_app{} #cont .support_app .support_tab{width:100%; margin-top:30px; font-size: 14px} #cont .support_app .support_tab thead{width:100%; height:49px; line-height: 49px; margin-top:20px; background: #f3f6f8; border-top:solid 1px #d6d9db} #cont .support_app .support_tab thead>tr{} #cont .support_app .support_tab thead>tr>th{font-family: Nanum; font-weight: normal} #cont .support_app .support_tab tbody>tr>td{padding:20px 0; text-align: center; background: url(/images/tab_line.png) 0 100% repeat-x} #cont .support_app .support_tab tbody>tr:hover{background: #fffdea} #cont .support_app .support_tab td.support_tab_st{width:50%; text-align: left} #cont .support_app .support_tab td:nth-of-type(1){width:10%} #cont .support_app .support_tab td:nth-of-type(3){width:10%} #cont .support_app .support_btn_wrap{width:100%; display: flex; margin-top:100px; justify-content: center} #cont .support_app .support_btn_wrap .btn_support{width:135px; height:40px; background: #0069b4; color: #fff; border-radius:20px} #cont .sup_appform{width:500px; background: #f3f6f8; padding:50px 20px; position:absolute; top:100px; left:calc(50% - 250px); border-radius: 10px; box-sizing: border-box; border:solid 1px #d6d9db; display: none; z-index: 11; } #cont .sup_appform input{width: 100%; height: 50px; border: solid 1px rgba(0, 0, 0, 0); border-radius: 15px; box-sizing: border-box; text-indent: 15px; font-size: 14px; outline: none} #cont .sup_appform ul.sup_list_wrap{} #cont .sup_appform ul.sup_list_wrap span.ttwrap{width: 100%; display: block; margin-bottom: 13px} #cont .sup_appform ul.sup_list_wrap span.ttwrap em{background: #d6d9db; font-size: 12px; padding: 3px 10px; border-radius: 10px; font-style: normal} #cont .sup_appform ul.sup_list_wrap li{margin-bottom:20px} #cont .sup_appform ul.sup_list_wrap span.add_set{display: flex} #cont .sup_appform ul.sup_list_wrap span.add_set input[type=text]{width:calc(100% - 80px); border-top-right-radius: 0; border-bottom-right-radius: 0} #cont .sup_appform ul.sup_list_wrap span.add_set .add_ser{width: 80px; height: 50px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; color: #fff; background: #0069b4; cursor: pointer; font-size: 14px} #cont .sup_appform h4{text-align: center; margin:0 0 30px 0; font-size: 18px;} #cont .sup_appform .sup_term{font-size: 14px} #cont .sup_appform .sup_term dt{padding:10px 0 0 0; font-family: NanumB} #cont .sup_appform .sup_term dd{} #cont .sup_appform .sup_term dd span.sup_term_tt1{} #cont .sup_appform .sup_term dd span.sup_term_radioset{} #cont .sup_appform .sup_term dd span.sup_term_radioset label{} #cont .sup_appform .sup_term dd span.sup_term_radioset input{width:20px; vertical-align: middle; margin:0 5px 0 10px} #cont .sup_appform .sup_option{width:100px; height:50px; border-radius: 10px; padding:0 10px} #cont .sup_appform .sup_termapp{display: flex; justify-content: center; padding:20px 0 0 0} #cont .sup_appform .sup_termapp button{width: 135px; height: 40px; color: #fff; border-radius: 20px; margin:0 5px} #cont .sup_appform .sup_termapp .btn_app{background: #0069b4} #cont .sup_appform .sup_termapp .btn_cancel{width: 100px; height: 40px; background: #f3f6f8; color: #0069b4; border: solid 2px #0069b4; border-radius: 20px; font-family: NanumB} #cont .sup_appform .itgo_list_set{display: none} #cont .sup_appform .itgo_list_set .itgo_list_st{font-size: 14px; margin:20px 0 10px 0; display: block} #cont .sup_appform .itgo_list_set .itgo_list_tab{width:100%} #cont .sup_appform .itgo_list_set .itgo_list_tab tbody td{padding:3px 0} #cont .sup_appform .itgo_list_set .itgo_list_tab tbody td:nth-of-type(1){width:40px} #cont .sup_appform .itgo_list_set .itgo_list_tab tbody td:nth-of-type(1) span{width:30px; height:30px; display: block; background: #d6d9db; border-radius: 15px; text-align: center; line-height: 30px; font-size: 12px} #cont .sup_appform .itgo_list_set .itgo_list_tab tbody td:nth-of-type(2){} #cont .sup_appform .sup_list_file{display: flex} #cont .sup_appform .sup_list_file input[type=file]{font-size: 14px; margin:0; padding:0} #cont .support_app .sup_btn_set{display: flex; justify-content: center; margin-top: 100px} #cont .support_app .sup_btn_set .sup_btn{width:135px; height:40px; background: #0069b4; color: #fff; border-radius: 20px; margin:0 15px} #cont .support_app .sup_btn_set .sup_inp{width:60px; height:40px; border:solid 1px #d6d9db; border-radius: 20px; text-align: center} #cont .support_app .sup_btn_set .sup_inp:focus{outline: none; border: solid 1px #0069b4} #cont .support_app .sup_btn_set .sup_tt{height:40px; line-height: 40px; margin-left:10px} #cont .sup_appform .sup_list_file_btn{ width: 80px; height: 50px; line-height: 50px; background: #0069b4; display: block; color: #fff; text-align: center; font-size: 14px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; caret-color: transparent; cursor: pointer; } #cont .sup_appform .sup_list_filename{width: calc(100% - 80px); box-sizing: border-box; background: #fff; caret-color: transparent; font-size: 14px; border-bottom-right-radius: 0; border-top-right-radius: 0; cursor: pointer} #cont .sup_appform .sup_list_file_inp{display: none} #cont .sup_block{width:100%; height:100%; background: rgba(0,0,0,0.75); left:0; top:0; position: fixed; z-index: 10; display: none} #class_review{margin:50px 0 0 0; display: flex; flex-wrap: wrap} #class_review .class_review_st{width:calc(100% - 150px); display: flex; align-items: center; gap: 20px; padding:0 0 20px 0} #class_review .class_review_st h3{font-family: NanumEB; font-size: 16px; line-height: 23px; margin:0} #class_review .class_review_st ul.star{padding: 0; margin:0; display: flex; align-items: center; gap:10px} #class_review .class_review_st ul.star li{margin:0} #class_review .class_review_st ul.star li:nth-of-type(1){width:130px; height:23px; background: url(/images/bstar_bg.png) no-repeat; overflow: hidden; text-indent: -9999px} #class_review .class_review_st ul.star li:nth-of-type(1) em{height:23px; background: url(/images/bstar_pt.png) no-repeat; display: block} #class_review .class_review_st ul.star li:nth-of-type(2){font-size: 24px; font-family: NanumEB} #class_review .class_review_st ul.star li:nth-of-type(3){font-size: 12px} #class_review div.sort{width:150px; display: flex; justify-content: space-between; position: relative} #class_review div.sort div.sort_box{width:150px; height:36px; display: flex; position: relative; cursor: pointer} #class_review div.sort div.sort_box input{width:100%; border:solid 1px #ced4da; border-radius: 10px; text-indent: 10px; cursor: pointer; font-size: 12px} #class_review div.sort div.sort_box div.btn_open{width:20px; height:36px; background: url(/images/review_arrow.png) 50% no-repeat; overflow: hidden; text-indent: -9999px; position: absolute; right:5px} #class_review div.sort ul.sort_list{ position: absolute; margin:40px 0 0 0; font-size: 12px; border-radius: 10px; line-height: 28px; padding: 5px; width:100%; box-sizing: border-box; background: rgba(255, 255, 255, .7); box-shadow: 0 .2rem .5rem 0 rgba(0, 0, 0, .3); backdrop-filter: blur(3px); border: 1px solid rgba(255, 255, 255, 1); } #class_review div.sort ul.sort_list li{padding:2px 15px} #class_review div.sort ul.sort_list li:hover{background: rgba(216,229,243,.8); border-radius: 10px} #class_review dl.class_review_cont{display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 10px} #class_review dl.class_review_cont dt{background:url(/images/review_bg.png) 50% #f3f6f8 no-repeat; border-radius: 15px; display: flex; justify-content: center; align-items: center} #class_review dl.class_review_cont dd{border-radius: 15px; box-shadow: 0 .2rem .5rem 0 rgba(0, 0, 0, .15)} #class_review dl.class_review_cont dd.creview_wrap{font-size: 12px; padding:16px} #class_review dl.class_review_cont dd.creview_wrap div.creview{line-height: 18px} #class_review dl.class_review_cont dd.creview_wrap div.creview div.creview01{display: flex} #class_review dl.class_review_cont dd.creview_wrap div.creview div.creview01 span.creview_img{width:36px; height:36px; background: url(/images/review_ico.png) no-repeat; border-radius: 50%} #class_review dl.class_review_cont dd.creview_wrap div.creview div.creview01 div.creview_info_wrap{padding:3px 0 0 10px} #class_review dl.class_review_cont dd.creview_wrap div.creview div.creview01 div.creview_info_wrap div.creview_info01 span{font-family: NanumB} #class_review dl.class_review_cont dd.creview_wrap div.creview div.creview01 div.creview_info_wrap div.creview_info01 span.creview_info01_name{} #class_review dl.class_review_cont dd.creview_wrap div.creview div.creview01 div.creview_info_wrap div.creview_info02 span{color:#868e96; font-family: NanumB} #class_review dl.class_review_cont dd.creview_wrap div.creview div.creview01 div.creview_info_wrap div.creview_info02 span.creview_info02_date{} #class_review dl.class_review_cont dd.creview_wrap div.creview div.creview01 div.creview_info_wrap div.creview_info02 span.creview_info02_chk{font-family: Nanum; font-size: 11px; background: #f3f6f8; color: #868e96; padding:3px 5px; border-radius: 5px} #class_review dl.class_review_cont dd.creview_wrap div.creview div.creview02{margin:10px 0 0 0; display: flex} #class_review dl.class_review_cont dd.creview_wrap div.creview div.creview02 span.star_wrap{width:84px; height:16px; background: url(/images/star_bg.png) no-repeat; display: block; margin:3px 0 0 0} #class_review dl.class_review_cont dd.creview_wrap div.creview div.creview02 span.star_wrap em{height:16px; background: url(/images/star_pt.png) no-repeat; overflow: hidden; text-indent: -9999px; display: block} #class_review dl.class_review_cont dd.creview_wrap div.creview div.creview02 span.star_tt{display: block; margin:0 0 0 10px; font-size: 11px; background: #f3f6f8; border-radius: 5px; padding:2px 5px; color:#868e96} #class_review dl.class_review_cont dd.creview_wrap div.creview div.creview03{margin:10px 0 0 0} #class_review dl.class_review_cont dd.creview_wrap div.creview div.creview04{line-height: 20px; margin:15px 0 10px 0} #class_review dl.class_review_cont dd.creview_wrap div.creview div.creview04 span.like{ padding:10px 20px 10px 40px; border-radius: 20px; box-sizing: border-box; background: url(/images/ico_up.png) 20px 50% no-repeat; cursor: pointer; font-family: NanumB; border:solid 1px #d6d9db } #class_review dl.class_review_cont dd.creview_wrap div.creview div.creview04 span.like:hover{background-color: #f3f6f8} #class_review dl.class_review_cont dd.creview_wrap div.creview div.creview04 span.likon{background-color: #f3f6f8; color: #868e96; cursor: default} #class_review dl.class_review_cont dd.creview_wrap div.creview div.creview04 span.share{ padding:10px 20px 10px 40px; border-radius: 20px; box-sizing: border-box; background: url(/images/ico_paste.png) 20px 50% no-repeat; cursor: pointer; font-family: NanumB; border:solid 1px #d6d9db; margin:0 0 0 5px } #class_review dl.class_review_cont dd.creview_wrap div.creview div.creview04 span.share:hover{background-color: #f3f6f8} #class_review dl.class_review_cont dd.creview_wrap div.creview_com{background: #f3f6f8; padding:15px; margin:20px 0 0 0; border-radius: 15px; line-height: 16px} #class_review dl.class_review_cont dd.creview_wrap div.creview_com div.creview_com1{} #class_review dl.class_review_cont dd.creview_wrap div.creview_com div.creview_com1 span{font-family: NanumB} #class_review dl.class_review_cont dd.creview_wrap div.creview_com div.creview_com1 span.creview_name{} #class_review dl.class_review_cont dd.creview_wrap div.creview_com div.creview_com1 span.creview_tag{color:#3779a8; background: #e2f3ff; padding:3px 5px; font-size: 11px; border-radius: 5px} #class_review dl.class_review_cont dd.creview_wrap div.creview_com div.creview_com2{margin:5px 0 0 0; color: #868e96} #class_review dl.class_review_cont dd.creview_wrap div.creview_com div.creview_com3{margin:5px 0 0 0; line-height: 20px;} #class_review dl.class_review_cont dd.creview_wrap div.creview_com div.creview_com4{ background: url(/images/ico_up.png) 20px 50% #fff no-repeat; cursor: pointer; border-radius: 20px; padding:10px 20px 10px 40px; display: inline-block; margin:5px 0 0 0; color: #3c6f52; font-family: NanumB; border:solid 1px #d6d9db }#class_review dl.class_review_cont dd.creview_wrap div.creview_com div.creview_com4:hover{background-color: #f3f6f8} #class_review dl.class_review_cont dd.creview_wrap div.creview_com div.active{background-color: #f3f6f8; color:#868e96; cursor: default} #class_review div.review_nav{width:100%; display: flex; justify-content: center; margin-top: 30px; position: relative} #class_review div.review_nav div.review_nav_wrap{display: flex} #class_review div.review_nav div.review_nav_wrap span.review_nav_pre{width: 24px; height: 24px; background: url(/images/btn_arrow_left.png); text-indent: -9999px; overflow: hidden; cursor: pointer} #class_review div.review_nav div.review_nav_wrap span.review_nav_num{font-size: 14px; padding: 0 20px; line-height: 24px} #class_review div.review_nav div.review_nav_wrap span.review_nav_next{width: 24px; height: 24px; background: url(/images/btn_arrow_right.png); text-indent: -9999px; overflow: hidden; cursor: pointer} #class_review div.review_nav span.review_write_tt{position: absolute; left:0; font-size: 12px} #class_review div.review_nav span.review_write_btn{position: absolute; right:0; font-size: 12px} #class_review div.review_nav span.review_write_btn a{padding:10px 20px; background: #0069b4; border-radius: 20px; color: #fff} #class_review div.pop_bg{width:100%; height:100%; position: fixed; backdrop-filter: blur(3px); top:0; left:0; z-index: 99999} #class_review div.review_write_pop{width:540px; background: rgba(226, 243, 255, .7); backdrop-filter: blur(3px); position:fixed; top:50%; left:50%; box-shadow: 0 .2rem .5rem 0 rgba(0, 0, 0, .15); border-radius: 15px; display: flex; justify-content: center; transform: translate(-50%, -50%); border:solid 1px #fff; box-sizing: border-box; padding:20px 0 30px 0} #class_review div.review_write_pop dl.review_pop_wrap{width:480px; font-size: 12px} #class_review div.review_write_pop dl.review_pop_wrap>dt{width:100%; text-align: center; font-size: 18px; font-family: NanumH; padding:20px 0} #class_review div.review_write_pop dl.review_pop_wrap>dd{} #class_review div.review_write_pop dl.review_pop_wrap>dd.rw_score{display: flex; } #class_review div.review_write_pop dl.review_pop_wrap>dd.rw_score h4{height:36px; line-height: 36px; font-family: NanumB} #class_review div.review_write_pop dl.review_pop_wrap>dd.rw_score div.sort_wrap{width:150px; display: flex; justify-content: space-between; position: relative; margin:0 0 0 10px} #class_review div.review_write_pop dl.review_pop_wrap>dd.rw_score div.sort_wrap div.sort_box{width:150px; height:36px; display: flex; position: relative; cursor: pointer} #class_review div.review_write_pop dl.review_pop_wrap>dd.rw_score div.sort_wrap div.sort_box input{width:100%; border:solid 1px #ced4da; border-radius: 10px; text-indent: 10px; cursor: pointer; font-size: 12px} #class_review div.review_write_pop dl.review_pop_wrap>dd.rw_score div.sort_wrap div.sort_box div.btn_open{width:20px; height:36px; background: url(/images/review_arrow.png) 50% no-repeat; overflow: hidden; text-indent: -9999px; position: absolute; right:5px} #class_review div.review_write_pop dl.review_pop_wrap>dd.rw_score div.sort_wrap ul.sort_list{ position: absolute; margin:40px 0 0 0; font-size: 12px; border-radius: 10px; line-height: 28px; padding: 5px; width:100%; box-sizing: border-box; background: rgba(255, 255, 255, .9); box-shadow: 0 .2rem .5rem 0 rgba(0, 0, 0, .3); backdrop-filter: blur(3px); border: 1px solid rgba(255, 255, 255, 1); } #class_review div.review_write_pop dl.review_pop_wrap>dd.rw_score div.sort_wrap ul.sort_list li{display: flex; padding:2px 0 8px 10px} #class_review div.review_write_pop dl.review_pop_wrap>dd.rw_score div.sort_wrap ul.sort_list li span.sl_star{width:84px; height:16px; background: url(/images/star_bg.png) no-repeat; display: block; margin:3px 0 0 0; box-sizing: border-box} #class_review div.review_write_pop dl.review_pop_wrap>dd.rw_score div.sort_wrap ul.sort_list li span.sl_star em{height:16px; background: url(/images/star_pt.png) no-repeat; overflow: hidden; text-indent: -9999px; display: block} #class_review div.review_write_pop dl.review_pop_wrap>dd.rw_score div.sort_wrap ul.sort_list li span.sl_tt{height:16px; line-height: 16px; display: block; padding:3px 0 0 10px} #class_review div.review_write_pop dl.review_pop_wrap>dd.rw_score div.sort_wrap ul.sort_list li:nth-of-type(1) span.sl_star em{width:calc(17px * 5)} #class_review div.review_write_pop dl.review_pop_wrap>dd.rw_score div.sort_wrap ul.sort_list li:nth-of-type(2) span.sl_star em{width:calc(17px * 4)} #class_review div.review_write_pop dl.review_pop_wrap>dd.rw_score div.sort_wrap ul.sort_list li:nth-of-type(3) span.sl_star em{width:calc(17px * 3)} #class_review div.review_write_pop dl.review_pop_wrap>dd.rw_score div.sort_wrap ul.sort_list li:nth-of-type(4) span.sl_star em{width:calc(17px * 2)} #class_review div.review_write_pop dl.review_pop_wrap>dd.rw_score div.sort_wrap ul.sort_list li:nth-of-type(5) span.sl_star em{width:calc(17px * 1)} #class_review div.review_write_pop dl.review_pop_wrap>dd.rw_score div.sort_wrap ul.sort_list li:hover{background: rgba(216,229,243,.8); border-radius: 10px; font-weight: 800} #class_review div.review_write_pop dl.review_pop_wrap>dd.review_comm{margin:20px 0 0 0} #class_review div.review_write_pop dl.review_pop_wrap>dd.review_comm h4{font-family: NanumB} #class_review div.review_write_pop dl.review_pop_wrap>dd.review_comm div.review_box{margin:3px 0 0 0} #class_review div.review_write_pop dl.review_pop_wrap>dd.review_comm div.review_box textarea{ width:100%; height:80px; padding:10px; border:solid 1px #ced4da; border-radius: 10px; box-sizing: border-box; margin:5px 0 0 0; resize: none } #class_review div.review_write_pop dl.review_pop_wrap>dd.review_comm span.review_comm_tt{width:100%; display: block; text-align: right; padding:2px 0 0 0} #class_review div.review_write_pop dl.review_pop_wrap>dd.rw_info{} #class_review div.review_write_pop dl.review_pop_wrap>dd.rw_info dl{} #class_review div.review_write_pop dl.review_pop_wrap>dd.rw_info dl dt{padding:5px 0} #class_review div.review_write_pop dl.review_pop_wrap>dd.rw_info dl dd{line-height: 16px} #class_review div.review_write_pop dl.review_pop_wrap>dd.rw_info dl dd::before{content: "- "} #class_review div.review_write_pop dl.review_pop_wrap>dd.rw_info dl dd span.rw_info_padd{display: block; padding:0 0 0 8px} #class_review div.review_write_pop dl.review_pop_wrap>dd.review_btn_set{display: flex; justify-content: center; margin:20px 0} #class_review div.review_write_pop dl.review_pop_wrap>dd.review_btn_set button{padding:10px 20px; border-radius: 20px; color: #fff; margin:0 5px} #class_review div.review_write_pop dl.review_pop_wrap>dd.review_btn_set button.btn_app{background: #0069b4} #class_review div.review_write_pop dl.review_pop_wrap>dd.review_btn_set button.btn_cancel{color: #333; background: #fff; border: solid 1px #d6d9db} /* 플레이어 */ #ply_cont{display: flex; justify-content: center} /*플레이어-리스트*/ #ply_cont .ply_list{height:100%; padding:20px 20px 0 0} #ply_cont .ply_list dl{} #ply_cont .ply_list dl>dd{} #ply_full .ply_info dl.ply_list{width:100%; padding:0 0 0 20px; margin-top:20px} .ply_list{max-width:400px} .ply_list dd{padding:7px; display: flex; line-height: 20px; border-bottom:solid 1px #e5e5e5} .ply_list dd a{font-size: 12px} .ply_list dd:hover{font-weight: 800} .ply_list dd.chk{background: #f3f6f8} .ply_list dd.chk a{color:#777} .ply_list dd.ply_act{font-weight: 800} #ply_cont .ply_info{width:1280px; padding:20px} /*플레이어-플레이어바*/ .play_bar{padding:20px 20px 30px 20px; background: #1e242c; position: relative;display:block; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; user-select: none} .play_bar .pro_bar{cursor: pointer; position:relative; color: #fff; margin-bottom:20px} .play_bar .pro_bar .pro_point{width:12px; height:12px; background: rgba(255,255,255,0); border-radius:6px; position: absolute; margin:-4px 0 0 -6px; z-index: 99999; transition: background .3s ease} .play_bar .pro_bar .pro_prog{width:100%; height:4px; background: rgba(255,255,255,.5); border-radius: 2px} .play_bar .pro_bar .pro_prog .pro_prog_ing{height:4px; background: #fff; display: block; border-radius: 2px} .play_bar em{display: none} .play_bar ul{display: flex; font-size: 12px} .play_bar ul>li{} .play_bar ul.play_bar_left{position: absolute} .play_bar ul.play_bar_right{position: absolute; bottom:20px; right:20px} .play_bar .plybar_play{width:40px; height:40px; background: url(../images/ply_play.png) 50% no-repeat; text-indent: -9999px; overflow: hidden; cursor: pointer} .play_bar .plybar_play:hover{background: url(../images/ply_play.png) 50% no-repeat rgba(255,255,255,.1); border-radius: 20px; transition: background .5s ease} .play_bar .plybar_pause{width:40px; height:40px; background: url(../images/ply_pause.png) 50% no-repeat; text-indent: -9999px; overflow: hidden; cursor: pointer} .play_bar .plybar_pause:hover{background: url(../images/ply_pause.png) 50% no-repeat rgba(255,255,255,.1); border-radius: 20px; transition: background .5s ease} .play_bar .plybar_next{width:40px; height:40px; background: url(../images/ply_next.png) 50% no-repeat; cursor: pointer} .play_bar .plybar_next:hover{background: url(../images/ply_next.png) 50% no-repeat rgba(255,255,255,.1); border-radius: 20px; transition: background .5s ease} .play_bar .plybar_next em{ width:60px; height:25px; line-height: 25px; position: absolute; background: #fff; font-size: 12px; margin:-35px 0 0 -28px; border-radius: 20px; text-align: center; border: solid 2px #1e242c } .play_bar .plybar_sound{width:40px; height:40px; background: url(../images/ply_sound.png) 50% no-repeat; cursor: pointer} .play_bar .plybar_sound:hover{background: url(../images/ply_sound.png) 50% no-repeat rgba(255,255,255,.1); border-radius: 20px; transition: background .5s ease} .play_bar .plybar_sound em{ width:60px; height:25px; line-height: 25px; position: absolute; background: #fff; font-size: 12px; margin:-35px 0 0 -25px; border-radius: 20px; text-align: center; border: solid 2px #1e242c } .play_bar .plybar_son_mute{background: url(../images/ply_sound_mute.png) 50% no-repeat} .play_bar .plybar_son_mute:hover{background: url(../images/ply_sound_mute.png) 50% no-repeat rgba(255,255,255,.1); border-radius: 20px; transition: background .5s ease} .plybar_sound_warp{width:30px; transition: width .3s ease; overflow: hidden} .play_bar .plybar_sodbar_wrap{width:50px; position: relative; cursor:pointer; margin:-28px 0 0 40px; padding:6px 0} .play_bar .plybar_sodbar_wrap .plybar_sodbar{width:50px; height:4px; background: rgba(255,255,255,0.5); border-radius: 2px; overflow: hidden; text-indent: -9999px} .play_bar .plybar_sodbar_wrap .plybar_sodbar em{background: #fff; display: block} .play_bar .plybar_sodbar_wrap .plybar_sodpoint{ width:12px; height:12px; background: rgba(255,255,255,0); border-radius: 6px; position: absolute; margin-top:-4px; text-indent: -9999px; transition: background .3s ease; } .play_bar .plybar_time{line-height: 20px; color: #fff; margin:10px 0 0 20px; outline: none} .play_bar dl.plybar_speed{display: flex; justify-content: center; margin:30px 0 0 0} .play_bar dl.plybar_speed dd{padding:4px; cursor: pointer; outline: none} .play_bar dl.plybar_speed dd span{width:12px; height:12px; display: block; background: rgba(255,255,255,.5); border-radius: 6px; outline: none} .play_bar dl.plybar_speed dd span:hover{animation-duration: .3s; animation-name: slidein} @keyframes slidein { from {transform: scale(1.5)} to {transform: scale(1)} } .play_bar dl.plybar_speed dd span:hover+em{ display:block } .play_bar dl.plybar_speed dd.active span{background: rgba(255,255,255,1)} .play_bar dl.plybar_speed dd span>em{ width:60px; height:25px; line-height: 25px; position: absolute; background: #fff; font-size: 12px; margin:-39px 0 0 -28px; border-radius: 20px; text-align: center; border: solid 2px #1e242c; outline: none; z-index: 2 } .play_bar .plybar_help{width:40px; height:40px; background: url(../images/ply_help.png) 50% no-repeat; cursor: pointer} .play_bar .plybar_help:hover{background: url(../images/ply_help.png) 50% no-repeat rgba(255,255,255,.1); border-radius: 20px; transition: background .5s ease} .play_bar .plybar_help em{ width:60px; height:25px; line-height: 25px; position: absolute; background: #fff; font-size: 12px; margin:-35px 0 0 -12px; border-radius: 20px; text-align: center; border: solid 2px #1e242c; outline: none; z-index: 2 } .play_bar .plybar_cc{width:40px; height:40px; background: url(../images/ply_cc_off.png) 50% no-repeat; cursor: pointer} .play_bar .plybar_cc:hover{background: url(../images/ply_cc.png) 50% no-repeat rgba(255,255,255,.1); border-radius: 20px; transition: background .5s ease} .play_bar .plybar_cc.on{background: url(../images/ply_cc.png) 50% no-repeat} .play_bar .plybar_cc em{ width:60px; height:25px; line-height: 25px; position: absolute; background: #fff; font-size: 12px; margin:-35px 0 0 -12px; border-radius: 20px; text-align: center; border: solid 2px #1e242c; outline: none; z-index: 2 } .play_bar .plybar_wide{width:40px; height:40px; background: url(../images/ply_wide.png) 50% no-repeat; cursor: pointer} .play_bar .plybar_wide:hover{background: url(../images/ply_wide.png) 50% no-repeat rgba(255,255,255,.1); border-radius: 20px; transition: background .5s ease} .play_bar .plybar_wide em{ width:60px; height:25px; line-height: 25px; position: absolute; background: #fff; font-size: 12px; margin:-35px 0 0 -12px; border-radius: 20px; text-align: center; border: solid 2px #1e242c; outline: none; z-index: 2 } .play_bar .plybar_default{width:40px; height:40px; background: url(../images/ply_wide_m.png) 50% no-repeat; cursor: pointer} .play_bar .plybar_default:hover{background: url(../images/ply_wide_m.png) 50% no-repeat rgba(255,255,255,.1); border-radius: 20px; transition: background .5s ease} .play_bar .plybar_default em{ width:85px; height:25px; line-height: 25px; position: absolute; background: #fff; font-size: 12px; margin:-35px 0 0 -25px; border-radius: 20px; text-align: center; border: solid 2px #1e242c; outline: none; z-index: 2 } .play_bar .plybar_max{width:40px; height:40px; background: url(../images/ply_max.png) 50% no-repeat; cursor: pointer} .play_bar .plybar_max:hover{background: url(../images/ply_max.png) 50% no-repeat rgba(255,255,255,.1); border-radius: 20px; transition: background .5s ease} .play_bar .plybar_max em{ width:60px; height:25px; line-height: 25px; position: absolute; background: #fff; font-size: 12px; margin:-35px 0 0 -12px; border-radius: 20px; text-align: center; border: solid 2px #1e242c; outline: none; z-index: 2 } /* 플레이어-썸네일 */ #ply_cont .ply_info .thumb_box{width:1280px; height:720px; display: block; position: relative} #ply_cont .ply_info .thumb_box .thumb_tt{ height:50px; line-height: 50px; position: absolute; top:40px; right:40px; background: #0069b4; padding:0 50px; border-radius: 30px; color: #fff; font-family: NanumB } #ply_cont .ply_info .thumb_box .thumb_tt .thumb_arrow{ width:72px; height:49px; background: url(/images/mov_arrow.png) no-repeat; position: absolute; display: block; margin:25px 0 0 -100px } #ply_cont .ply_info .thumb_box .thumb_img{} #ply_cont .ply_info .thumb_box .thumb_img img{} @media (min-width: 1440px) { #ply_cont .ply_info .thumb_box .thumb_img img{width:1280px; height:720px} } #ply_cont .ply_info .thumb_box .thumb_bg{background: #feab02} /*플레이어-동영상*/ #ply_cont .ply_info .ply_mov{display:inline-block} #ply_full .ply_mov{background: #000} #ply_full .ply_mov .ply_mov_wrap{} /*#ply_full .ply_mov .ply_mov_wrap video{width:100%; max-width:1380px}*/ /*플레이어-강좌정보*/ #ply_cont .ply_info .ply_set{} #ply_full .ply_info{max-width:1280px; display: flex; justify-content: space-between; margin: 0 auto} #ply_full .ply_info .ply_set{width:70%} .ply_sample{position: absolute; width:100%; height:50px; line-height: 50px; text-align: center; background: rgba(0,105,180,0.8); color: #fff} .ply_info .st_wrap{display: flex} .ply_info .st_wrap .itgo_pro{width:78px; height:78px; border-radius: 40px; overflow: hidden; display: block} .ply_info .st_wrap .itgo_pro .tea_pop{border:solid 1px #d6d9db; position: absolute; font-size: 14px; border-radius: 5px; background: #fff; margin:60px 0 0 -16px;display:none} .ply_info .st_wrap .itgo_pro .tea_pop .tea_pop_wrap{display: block; position: relative; line-height: 24px} .ply_info .st_wrap .itgo_pro .tea_pop .pop_point{width:10px; height:10px; background: url(/images/pop_point.png) no-repeat; position: absolute; left:-1px; top:-1px} .ply_info .st_wrap .itgo_pro .tea_pop .tea_pop_wrap .pop_box{} .ply_info .st_wrap .itgo_pro .tea_pop .tea_pop_wrap .pop_box .pop_box_st{ height:40px; line-height: 40px; background: #f3f6f8; padding:0 20px; display: block; border-top-left-radius: 5px; border-top-right-radius: 5px} .ply_info .st_wrap .itgo_pro .tea_pop .tea_pop_wrap .pop_box ul{padding:20px} .ply_info .st_wrap .itgo_pro .tea_pop .tea_pop_wrap .pop_box ul>li{} .ply_info .st_wrap h2{font-size: 18px; padding:15px 0 0 15px; line-height: 24px} .ply_info .st_wrap h2 .st_tea{font-size: 14px; font-weight: 400} .ply_info .st_wrap button{margin:10px 0 0 5px} .ply_info .st_wrap .btn_fav{width:100px; height:33px; background: #fff; border:solid 2px #d6d9db; border-radius: 20px; font-size: 12px} .ply_info .st_wrap .btn_fav.atvice{background: #0069b4; color:#fff;border: solid 2px #0069b4} .ply_info .st_wrap .fav_pop{border:solid 1px #d6d9db; position: absolute; font-size: 14px; border-radius: 5px; background: #fff; margin:33px 0 0 -12px;display:none} .ply_info .st_wrap .fav_pop .fav_pop_wrap{padding:20px; display: block; position: relative; line-height: 24px} .ply_info .st_wrap .fav_pop .pop_point{width:10px; height:10px; background: url(/images/pop_point.png) no-repeat; position: absolute; left:-1px; top:-1px} .ply_info .st_wrap .btn_doc,.ply_info .st_wrap .btn_doc2,.modal-content .btn_doc{width:80px; height:33px; background: #0069b4; color:#fff; border-radius: 20px; font-size: 12px} .ply_info .tag_wrap{display: flex; justify-content: right; padding-top:15px} .ply_info .tag_wrap dl{display: flex} .ply_info .tag_wrap dl>dd{margin:0 10px 0 0} .ply_info .tag_wrap dl>dd a{font-size:14px; padding:0 10px} .ply_info .tag_wrap .class_code{text-align: right; background: #f3f6f8; height:30px; line-height: 30px; border-radius: 15px; padding:0 10px; font-size: 11px} .ply_info .tag_wrap2{display: flex; padding:15px 0; justify-content:space-between} .ply_info .tag_wrap2 dl{width:calc(100% - 200px)} .ply_info .tag_wrap2 dl>dd{margin:0 5px 5px 0; line-height: 30px; background: #f3f6f8; padding:0 10px; border-radius: 15px; white-space:nowrap; display: inline-block; font-size:14px} /*.ply_info .tag_wrap2 dl>dd a{font-size:14px; padding:0 10px}*/ .ply_info .tag_wrap2 .class_code{background: #f1fdf6; height:30px; line-height: 30px; border-radius: 15px; padding:0 10px; font-size: 11px} .ply_info .tag_wrap2 dl::-webkit-scrollbar{height:5px} .ply_info .tag_wrap2 dl::-webkit-scrollbar-thumb{background: #d6d9db; border-radius:5px} .ply_info .ply_tab{width:100%; margin-top:30px; font-size: 12px; border-top:solid 1px #d6d9db} .ply_info .ply_tab tr>th{padding:0 10px; font-weight: 400; background:url(/images/tab_line.png) 0 100% repeat-x #f3f6f8; line-height: 20px; vertical-align: middle} .ply_info .ply_tab tr>td{padding:15px 20px; background:url(/images/tab_line.png) 0 100% repeat-x; line-height: 20px; vertical-align: middle} .ply_info .ply_tab tr>td:nth-child(n+2){word-break:break-all} .ply_info .ply_tab tr:nth-last-child(1)>th{background-image: none; border-bottom:solid 1px #d6d9db} .ply_info .ply_tab tr:nth-last-child(1)>td{background-image: none; border-bottom:solid 1px #d6d9db} .ply_info .ply_tab button{width:85px; height:33px; border-radius: 20px; margin-left:5px; font-size: 12px} .ply_info .ply_tab .ply_on{background: #0069b4; color: #fff} .ply_info .ply_tab .class_cer{} .ply_info .ply_tab .class_cer .cer_pop{border:solid 1px #d6d9db; position: absolute; font-size: 12px; border-radius: 5px; background: #fff; margin:23px 0 0 -11px;display:none} .ply_info .ply_tab .class_cer .cer_pop .cer_pop_wrap{padding:20px; display: block; position: relative; line-height: 24px} .ply_info .ply_tab .class_cer .cer_pop .pop_point{width:10px; height:10px; background: url(/images/pop_point.png) no-repeat; position: absolute; left:-1px; top:-1px} .ply_info .ply_tab .tea_info{} .ply_info .ply_tab .tea_info th{vertical-align: middle} .ply_info .ply_tab .tea_info td{} .ply_info .ply_tab .tea_info td .tea_info_wrap{width:100%; display: flex} .ply_info .ply_tab .tea_info span.tea_img{} .ply_info .ply_tab .tea_info span.tea_img img{width: 78px; height: 78px; border-radius: 40px} .ply_info .ply_tab .tea_info div.tea_tt_wrap{padding:0 0 0 30px} .ply_info .ply_tab .tea_info div.tea_tt_wrap .tea_name{font-size: 14px; font-family: NanumB; padding:5px 0; display: block} .ply_info .ply_tab .tea_info div.tea_tt_wrap ul{} .ply_info .ply_tab .tea_info div.tea_tt_wrap ul>li{} .ply_info .ply_note{background: #f3f6f8; border-radius: 15px; padding:20px; margin-top:30px; font-size: 12px; line-height: 20px} .ply_info .ply_note dt{font-family: NanumB; margin-bottom:10px} #ply_mov_basic{position: relative} /* 수강신청 */ .ply_set .class_app{margin:30px 0 30px 0} .ply_set .class_app dl.classapp_list{display: flex; justify-content: space-between; flex-wrap: wrap} .ply_set .class_app dl.classapp_list dt{font-family: NanumEB; width:100%; margin: 10px 0 10px 0;} .ply_set .class_app dl.classapp_list dd{width:calc(50% - 20px); border-radius: 20px; padding:20px; font-size: 14px; box-sizing: border-box; position: relative; cursor: pointer} .ply_set .class_app dl.classapp_list dd.classapp_sec1{border: solid 2px #0069b4} .ply_set .class_app dl.classapp_list dd.classapp_sec2{/*border: solid 1px #b44800;*/ border: solid 2px #feab02} .ply_set .class_app dl.classapp_list dd.app_off{border:solid 2px #d6d9db} .ply_set .class_app dl.classapp_list dd.app_off .classapp_appset .classapp_app{background: #d6d9db} .ply_set .class_app dl.classapp_list dd.classapp_sec1>ul{display: flex; flex-wrap: wrap; justify-content: space-between} .ply_set .class_app dl.classapp_list dd>ul>li{ line-height: 24px} .ply_set .class_app dl.classapp_list dd>ul>li.classapp_st1{width:100%} .ply_set .class_app dl.classapp_list dd>ul>li.classapp_st1 span{background: linear-gradient(to top, rgba(110, 195, 255, 0.5) 40%, transparent 40%); display: inline; font-family: NanumEB} .ply_set .class_app dl.classapp_list .classapp_price{margin:20px 0 0 0} .ply_set .class_app dl.classapp_list .classapp_price .classapp_price_tt1{display: block} .ply_set .class_app dl.classapp_list .classapp_price .classapp_price_tt2{display: block; font-family: NanumH; font-size: 28px; margin:5px 0 0 0; letter-spacing: -1px} .ply_set .class_app dl.classapp_list .classapp_appset{text-align: center} .ply_set .class_app dl.classapp_list .classapp_appset .classapp_date{display: block} .ply_set .class_app dl.classapp_list .classapp_appset .classapp_app{display: block; margin:5px 0 0 0; padding:5px 40px; background: #0069b4; border-radius: 50px; color: #fff} .ply_set .class_app dl.classapp_list dd>ul>li.classapp_st2{width:100%} .ply_set .class_app dl.classapp_list dd>ul>li.classapp_st2 span{background: linear-gradient(to top, rgba(253, 198, 160, 0.5) 40%, transparent 40%); display: inline; font-family: NanumEB} .ply_set .class_app dl.classapp_list dd>ul>li.classapp_freett{margin:7px 0 0 0} .ply_set .class_app dl.classapp_list dd>ul>li.classapp_free{/*position: absolute; top:10px; right:30px; padding:5px 20px; background: #d6d9db; border-radius: 50px;*/ display: inline-block; margin:10px 0 0 0; font-weight: 800} /* 과정소개/학습목표/교육대상/선수과정 */ .ply_set .class_info{} .ply_set .class_info .class_info_cont{font-size: 12px; padding:20px 0; line-height: 16px} .ply_set .class_info .class_info_cont dl{margin-top:30px} .ply_set .class_info .class_info_cont dl>dt{margin-bottom:5px; font-family: NanumB} .ply_set .class_info .class_info_cont .class_info01{display: flex} .ply_set .class_info .class_info_cont .class_info01 dt{width:140px; height:90px; background: url(/images/classinfo_ico001.png) 50% 10px no-repeat; text-align: center; box-sizing: border-box; padding:80px 0 0 0} .ply_set .class_info .class_info_cont .class_info01 dd{width:calc(100% - 140px); background: #f3f6f8; padding:20px; border-radius: 20px} .ply_set .class_info .class_info_cont .class_info01 dd .class_box{line-height: 18px; /*background: url(/images/classinfo_dot001.png) 15px 15px no-repeat #f3f6f8;*/ padding:10px 15px; border-radius: 20px; display:block; margin:10px 0} .ply_set .class_info .class_info_cont .class_info02{display: flex} .ply_set .class_info .class_info_cont .class_info02 dt{width:140px; height:90px; background: url(/images/classinfo_ico002.png) 50% 10px no-repeat; text-align: center; box-sizing: border-box; padding:80px 0 0 0} .ply_set .class_info .class_info_cont .class_info02 dd{width:calc(100% - 140px); background: #f3f6f8; padding:20px; border-radius: 20px; line-height: 24px} .ply_set .class_info .class_info_cont .class_info02 dd .class_box{line-height: 18px; /*background: url(/images/classinfo_dot002.png) 15px 15px no-repeat #f3f6f8;*/ padding:10px 15px; border-radius: 20px; display: block; margin:10px 0} .ply_set .class_info .class_info_cont .class_info03{min-height:110px; padding:20px 20px 20px 140px; border-radius: 15px; background: url(/images/classinfo_ico003.png) 20px 20px no-repeat #fffdea; box-sizing: border-box; margin-top:70px} .ply_set .class_info .class_info_cont .class_info03 dt{} .ply_set .class_info .class_info_cont .class_info03 dd{line-height: 20px} .ply_set .class_info .class_info_cont .class_info03 dd .class_box{line-height: 18px; /*background: url(/images/classinfo_dot003.png) 0 5px no-repeat;*/ border-radius: 20px; display: block; /*padding:0 0 0 15px*/} .ply_set .class_info .class_info_cont .class_info04{min-height:110px; padding:20px 20px 20px 140px; border-radius: 15px; background: url(/images/classinfo_ico004.png) 20px 20px no-repeat #f1fdf6; box-sizing: border-box} .ply_set .class_info .class_info_cont .class_info04 dt{} .ply_set .class_info .class_info_cont .class_info04 dd{line-height: 20px} .ply_set .class_info .class_info_cont .class_info04 dd .class_box{line-height: 18px; /*background: url(/images/classinfo_dot004.png) 0 5px no-repeat;*/ border-radius: 20px; display: block; /*padding:0 0 0 15px*/} .lear_obje{background: url(/images/classinfo_ico005.png) 20px 20px #fdf7f1 no-repeat; padding:20px 20px 20px 140px; border-radius: 15px; font-size: 12px} .lear_obje .lear_obje_st{font-family: NanumB} .lear_obje .lear_obje_dd{line-height: 20px; margin:10px 0 0 0} /* 결제 */ .pay_set{width:100%; background: #e5e5e5; bottom:0; position: fixed; display: flex; justify-content: space-between; padding:20px 0; z-index: 1} .pay_set .itgo_cha_set{position: absolute; top:-137px; right:250px; display: none} .pay_set .itgo_cha_set .itgo_cha_wrap{position: relative} .pay_set .itgo_cha_set .itgo_cha1{ position: absolute; width:121px; height:116px; background: url(/images/itgo_cha_face.gif) no-repeat; display: block; left:0; top:0; animation-name: itgo_face; animation-duration: 3s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } .pay_set .itgo_cha_set .itgo_cha2{ position: absolute; width:72px; height:66px; background: url(/images/itog_cha_hand.png) no-repeat; display: block; left:75px; top:65px; animation-name: itgo_hello; animation-duration: 2s; animation-iteration-count: infinite; animation-timing-function: ease-in-out; } @keyframes itgo_face{ 0% { transform: rotate(0deg); transform-origin: bottom center; } 25% { transform: rotate(-2deg); transform-origin: bottom center; } 50% { transform: rotate(0deg); transform-origin: bottom center; } 75% { transform: rotate(1deg); transform-origin: bottom center; } 100% { transform: rotate(0deg); transform-origin: bottom center; } } @keyframes itgo_hello{ 0% { transform: rotate(-5deg); transform-origin: bottom left; } 50% { transform: rotate(10deg); transform-origin: bottom left; } 100% { transform: rotate(-5deg); transform-origin: bottom left; } } .pay_set .itgo_cha_set .itgo_cha3{position: absolute; width:87px; height:32px; background: url(/images/itog_cha_body.png) no-repeat; display: block; left:0; top:116px} .pay_set .pay_tt{padding:10px 10%; font-size: 18px; font-family: NanumB; position: relative} .pay_set .pay_tt .itgo_cha{width:54px; height:53px; background: url(/images/itgo_cha_free.png) no-repeat; display: block; position: absolute; top:-10px; margin-left:-64px} .pay_set .pay_tt em{color:#0069b4; font-family: NanumEB} .pay_set .pay_app{display: flex; padding-right:20px} .pay_set .pay_app li{} .pay_set .pay_app li button{min-width:135px; height:40px; border-radius: 20px; margin-left:10px; padding:0 20px} .pay_set .pay_app li button.btn_payapp{background: rgba(0,0,0,0); border: solid 2px #0069b4; color: #0069b4; font-family: NanumB} .pay_set .pay_app li button.btn_payfree{background: #0069b4; color: #fff} .qna_set{position: fixed; right:80px; bottom:80px} .qna_set .qna_set_wrap{position: relative} .qna_set .qna_cha{width:59px; height:59px; display: block; background: url(/images/join_cha.png) no-repeat; position: absolute} .qna_set .qna_pop{width:42px; height:42px; background: #000; position: absolute; z-index: -1; margin:-25px 0 0 22px; border-radius: 21px; color: #fff; font-size: 12px; padding:7px; box-sizing: border-box; text-align: center } /* 고객센터 */ /* 고객센터-공지사항 */ #cont .sub_menu{display: flex; flex-wrap: wrap; margin-top:50px} #cont .sub_menu dd{height:33px; line-height:33px; background: #edf0f2; border-radius:20px; margin:10px 10px 0 0} #cont .sub_menu dd a{height:100%; padding:0 20px; font-size: 12px; display: block} #cont .sub_menu dd:hover{background: #3badff} #cont .sub_menu dd a:hover{color:#fff} #cont .sub_menu dd.active{background: #3badff} #cont .sub_menu dd.active a{color:#fff; font-family: NanumB} #cont .notice{} #cont .notice .notice_tab{width:100%; margin-top:30px; font-size: 12px} #cont .notice .notice_tab thead{width:100%; height:49px; line-height: 49px; margin-top:20px; background: #f3f6f8; border-top:solid 1px #d6d9db} #cont .notice .notice_tab thead>tr{} #cont .notice .notice_tab thead>tr>th{font-family: Nanum; font-weight: normal; box-sizing: border-box} #cont .notice .notice_tab tbody>tr>td{padding:20px 0; text-align: center; background: url(/images/tab_line.png) 0 100% repeat-x; box-sizing: border-box} #cont .notice .notice_tab thead>tr>th:first-of-type{padding:0 0 0 10px} #cont .notice .notice_tab tbody>tr>td:first-of-type{padding:0 0 0 10px} #cont .notice .notice_tab tbody>tr:hover{background: #fffdea} #cont .notice .notice_tab .notice_tab_st{text-align: left; padding-left:10px} #cont .notice .notice_tab select{font-size: 12px; background: #f3f6f8} #cont .notice .notice_btn_set{display: flex; justify-content: center; margin-top: 100px} #cont .notice .notice_btn_set .notice_btn{width:135px; height:40px; background: #0069b4; color: #fff; border-radius: 20px; margin:0 15px} #cont .notice .notice_btn_set .notice_inp{width:60px; height:40px; border:solid 1px #d6d9db; border-radius: 20px; text-align: center} #cont .notice .notice_btn_set .notice_inp:focus{outline: none; border: solid 1px #0069b4} #cont .notice .notice_btn_set .notice_tt{height:40px; line-height: 40px; margin-left:10px} #cont .notice .ico_itgo{width:16px; height:16px; display: inline-block; background: #3badff; border-radius: 20px; color: #fff; line-height: 16px; text-align: center; font-weight: 800; font-size: 10px} #cont .notice .ico_code{width:16px; height:16px; display: inline-block; background: #ae3bff; border-radius: 20px; color: #fff; line-height: 16px; text-align: center; font-weight: 800; font-size: 10px} #cont .notice .ico_stat{width:16px; height:16px; display: inline-block; background: #ff3b9c; border-radius: 20px; color: #fff; line-height: 16px; text-align: center; font-weight: 800; font-size: 10px} #cont .notice .ico_mac{width:16px; height:16px; display: inline-block; background: #ffd33b; border-radius: 20px; color: #333; line-height: 16px; text-align: center; font-weight: 800; font-size: 10px} #cont .notice .notice_read{} #cont .notice .notice_read dt{font-size: 18px; font-family: NanumB; margin-top:50px} #cont .notice .notice_read dd{} #cont .notice .notice_read .notice_date{ width:100%; height:50px; line-height: 50px; background: #f3f6f8; border-top:solid 1px #d6d9db; box-sizing: border-box; text-align: right; font-size: 12px; padding:0 30px 0 0; margin:15px 0; } #cont .notice .notice_read .notice_cont{line-height: 24px; font-size: 14px} /* 마이포인트 */ #cont .point{} #cont .point .point_wrap{margin-top:30px} #cont .point .mypoint{display: flex} #cont .point .mypoint .mypoint01{width:277px; height:174px; border:solid 1px #d6d9db; border-radius: 15px; text-align: center; box-sizing: border-box; position: relative} #cont .point .mypoint .mypoint01 dl{} #cont .point .mypoint .mypoint01 dl>dt{margin-top:35px; font-family: NanumB} #cont .point .mypoint .mypoint01 dl>dd{} #cont .point .mypoint .mypoint01 dl>dd:nth-of-type(1){font-family: NanumEB; font-size: 36px; letter-spacing: -3px; color: #0069b4; margin-top:10px} #cont .point .mypoint .mypoint01 dl>dd:nth-of-type(1) em{font-size: 14px; margin-left:5px} #cont .point .mypoint .mypoint01 dl>dd:nth-of-type(2){ width:100%; height:39px; line-height: 39px; position: absolute; bottom:0; background: #f3f6f8; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; font-size: 14px; letter-spacing: -1px } #cont .point .mypoint .mypoint02{padding:40px 0 0 40px} #cont .point .mypoint .mypoint02 dl{} #cont .point .mypoint .mypoint02 dl>dt{font-size: 14px; font-family: NanumB; margin-bottom:10px} #cont .point .mypoint .mypoint02 dl>dd{font-size: 14px; line-height: 20px} #cont .point .point_tip{padding:50px 0 0 0; text-align: center; font-size: 14px} #cont .point .point_tip .point_allpt{display: block; font-size: 16px; font-family: NanumEB} #cont .point .point_tab{width:100%; margin-top:30px; font-size: 12px} #cont .point .point_tab thead{width:100%; height:49px; line-height: 49px; margin-top:20px; background: #f3f6f8; border-top:solid 1px #d6d9db} #cont .point .point_tab thead>tr{} #cont .point .point_tab thead>tr>th{font-family: Nanum; font-weight: normal} #cont .point .point_tab thead>tr>th:nth-of-type(1){width:50px} #cont .point .point_tab thead>tr>th:nth-of-type(2){width:150px} #cont .point .point_tab thead>tr>th:nth-of-type(3){width:80px} #cont .point .point_tab thead>tr>th:nth-of-type(4){} #cont .point .point_tab thead>tr>th:nth-of-type(5){width:150px} #cont .point .point_tab thead>tr>th:nth-of-type(6){width:150px} #cont .point .point_tab tbody>tr>td{padding:20px 0; text-align: center; background: url(/images/tab_line.png) 0 100% repeat-x} #cont .point .point_tab tbody>tr:hover{background: #fffdea} #cont .point .point_tab .point_tab_st{text-align: left; padding-left:10px} #cont .point .point_tab .pt_save{font-family: NanumEB; color: #0069b4} #cont .point .point_btn_set{display: flex; justify-content: center; margin-top: 100px} #cont .point .point_btn_set .point_btn{width:135px; height:40px; background: #0069b4; color: #fff; border-radius: 20px; margin:0 15px} #cont .point .point_btn_set .point_inp{width:60px; height:40px; border:solid 1px #d6d9db; border-radius: 20px; text-align: center} #cont .point .point_btn_set .point_inp:focus{outline: none; border: solid 1px #0069b4} #cont .point .point_btn_set .point_tt{height:40px; line-height: 40px; margin-left:10px} /* 쿠폰내역 */ #cont .coupon{} #cont .coupon .coupon_wrap{} #cont .coupon .coupon_tab{width:100%; margin-top:20px; font-size: 14px} #cont .coupon .coupon_tab thead{width:100%; height:49px; line-height: 49px; margin-top:20px; background: #f3f6f8; border-top:solid 1px #d6d9db} #cont .coupon .coupon_tab thead>tr{} #cont .coupon .coupon_tab thead>tr>th{font-family: Nanum; font-weight: normal} #cont .coupon .coupon_tab thead>tr>th:nth-of-type(1){width:150px} #cont .coupon .coupon_tab thead>tr>th:nth-of-type(2){} #cont .coupon .coupon_tab thead>tr>th:nth-of-type(3){width:150px} #cont .coupon .coupon_tab thead>tr>th:nth-of-type(4){width:150px} #cont .coupon .coupon_tab tbody>tr>td{padding:20px 0; text-align: center; background: url(/images/tab_line.png) 0 100% repeat-x} #cont .coupon .coupon_tab tbody>tr:hover{background: #fffdea} #cont .coupon .coupon_tab .coupon_tab_st{text-align: left; padding-left:10px} #cont .coupon .coupon_btn_set{display: flex; justify-content: center; margin-top: 100px} #cont .coupon .coupon_btn_set .coupon_btn{width:135px; height:40px; background: #0069b4; color: #fff; border-radius: 20px; margin:0 15px} #cont .coupon .coupon_btn_set .coupon_inp{width:60px; height:40px; border:solid 1px #d6d9db; border-radius: 20px; text-align: center} #cont .coupon .coupon_btn_set .coupon_inp:focus{outline: none; border: solid 1px #0069b4} #cont .coupon .coupon_btn_set .coupon_tt{height:40px; line-height: 40px; margin-left:10px} /* 고객센터-FAQ */ #cont .faq{} #cont .faq .faq_title{display: flex; justify-content: space-between; width:100%; height:49px; background: #f3f6f8; border-top:solid 1px #d6d9db; box-sizing: border-box; margin-top:30px} #cont .faq .faq_title dd{width:10%; text-align: center; line-height: 49px; font-size: 12px} #cont .faq .faq_title dd:nth-child(1){width:80%} #cont .faq .faq_cont{} #cont .faq .faq_cont li{cursor: pointer} #cont .faq .faq_cont li:hover{background: url(/images/tab_line.png) 0 100% repeat-x #fffdea} #cont .faq .faq_cont .faq_list_q{background: url(/images/tab_line.png) 0 100% repeat-x; padding:18px 0; font-size: 12px; display: flex} #cont .faq .faq_cont .faq_list_q span{width:10%; display: block; text-align: center} #cont .faq .faq_cont .faq_list_q span:nth-child(2){width:80%; text-align: left; line-height: 20px} #cont .faq .faq_cont .faq_list_a{padding: 30px; background: #f3f6f8; font-size: 12px; line-height: 20px} #cont .faq .faq_btn_set{display: flex; justify-content: center; margin-top: 100px} #cont .faq .faq_btn_set .faq_btn{width:135px; height:40px; background: #0069b4; color: #fff; border-radius: 20px; margin:0 15px} #cont .faq .faq_btn_set .faq_inp{width:60px; height:40px; border:solid 1px #d6d9db; border-radius: 20px; text-align: center} #cont .faq .faq_btn_set .faq_inp:focus{outline: none; border: solid 1px #0069b4} #cont .faq .faq_btn_set .faq_tt{height:40px; line-height: 40px; margin-left:10px} /* 고객센터-증빙서류발급안내 */ #cont .doc_app{} #cont .doc_app ul{} #cont .doc_app ul>li{} #cont .doc_app{} #cont .doc_app h3{margin-top:50px} #cont .doc_app .doc_tt_wrap{display: block; line-height: 24px; margin-top:10px; font-size: 14px; padding-left:10px; background: url(/images/doc_st.gif) 0 10px no-repeat} /* 고객센터-1:1문의 */ #cont .inquiry{} #cont .inquiry .inquiry_tab{width:100%; margin-top:30px; font-size: 12px} #cont .inquiry .inquiry_tab thead{width:100%; height:49px; line-height: 49px; margin-top:20px; background: #f3f6f8; border-top:solid 1px #d6d9db} #cont .inquiry .inquiry_tab thead>tr{} #cont .inquiry .inquiry_tab thead>tr>th{font-family: Nanum; font-weight: normal} #cont .inquiry .inquiry_tab tbody>tr>td{padding:20px 0; text-align: center; background: url(/images/tab_line.png) 0 100% repeat-x} #cont .inquiry .inquiry_tab tbody>tr:hover{background: #fffdea} #cont .inquiry .inquiry_tab .notice_act td{font-family: NanumEB} #cont .inquiry .inquiry_tab .notice_act td:nth-child(2){font-family: NanumEB; color: #ff0000} #cont .inquiry .inquiry_tab .notice_act td.inquiry_tab_st a{font-family: NanumEB} #cont .inquiry .inquiry_tab td.inquiry_tab_st{text-align: left} #cont .inquiry .inquiry_read{} #cont .inquiry .inquiry_read dt{font-size: 18px; font-family: NanumB; margin-top:50px} #cont .inquiry .inquiry_read dd{} #cont .inquiry .inquiry_read dd.inquiry_info{ width:100%; height:50px; line-height: 50px; background: #f3f6f8; border-top:solid 1px #d6d9db; box-sizing: border-box; font-size: 14px; padding:0 30px; margin:15px 0; display: flex; justify-content: space-between } #cont .inquiry .inquiry_read dd.inquiry_info ul{display: flex} #cont .inquiry .inquiry_read dd.inquiry_info ul>li{margin-right:20px} #cont .inquiry .inquiry_read dd.inquiry_cont{line-height: 24px; font-size: 14px} #cont .inquiry .inquiry_read dd.inquiry_answer{line-height: 24px; font-size: 14px; margin-top:20px; padding-top:20px; background: url(/images/tab_line.png) repeat-x} #cont .inquiry .inquiry_read dd.inquiry_btn_set{display: flex; justify-content:space-between; margin-top: 100px} #cont .inquiry .inquiry_read dd.inquiry_btn_set .inquiry_btn_q{width:calc(50% + 100px); display: block; text-align: right} #cont .inquiry .inquiry_read dd.inquiry_btn_set .inquiry_btn_q button.btn_inqq{width:100px; height:40px; background: #0069b4; color: #fff; border-radius: 20px} #cont .inquiry .inquiry_read dd.inquiry_btn_set .inquiry_btn_mset{display: flex} #cont .inquiry .inquiry_read dd.inquiry_btn_set .inquiry_btn_mset li{margin:0 0 0 10px} #cont .inquiry .inquiry_read dd.inquiry_btn_set .inquiry_btn_mset li button{ width:100px; height:40px; background: rgba(0,0,0,0); color: #0069b4; border-radius: 20px; border: solid 2px #0069b4; font-family: NanumB; } #cont .inquiry .inquiry_btn_wrap{width:100%; display: flex; margin-top:100px; justify-content: center} #cont .inquiry .inquiry_btn_wrap .btn_inquiry{width:135px; height:40px; background: #0069b4; color: #fff; border-radius:20px} #cont .inquiry .inquiry_box{background: #f3f6f8; padding:50px; border-radius: 15px; margin-top:20px} #cont .inquiry .inquiry_box li.inquiry_wst{} #cont .inquiry .inquiry_box li.inquiry_wst input[type=text]{width:100%; height:50px; border-radius: 15px; padding:0 20px; box-sizing: border-box; outline: none; border: solid 1px rgba(0,0,0,0); font-size: 12px} #cont .inquiry .inquiry_box li.inquiry_wst input[type=text]:focus{border:solid 1px #0069b4} #cont .inquiry .inquiry_box li.inquiry_wst select{height:50px; border-radius: 15px; padding:0 20px; box-sizing: border-box; outline: none; border: solid 1px rgba(0,0,0,0); font-size: 12px} #cont .inquiry .inquiry_box li.inquiry_wst select:focus{border:solid 1px #0069b4} #cont .inquiry .inquiry_box .inq_t30{margin-top:30px} #cont .inquiry .inquiry_box .inq_t30 input[type=text]{width:100%; height:50px; border-radius: 15px; padding:0 20px; box-sizing: border-box; outline: none; border: solid 1px rgba(0,0,0,0)} #cont .inquiry .inquiry_box .inq_t30 input[type=text]:focus{border:solid 1px #0069b4} #cont .inquiry .inquiry_box li.inquiry_wdd{margin-top:30px} #cont .inquiry .inquiry_box li.inquiry_wdd textarea{width:100%; height:200px; border-radius: 15px; padding:20px; box-sizing: border-box; outline: none; border: solid 1px rgba(0,0,0,0); font-size: 12px} #cont .inquiry .inquiry_box li.inquiry_wdd textarea:focus{border:solid 1px #0069b4} #cont .inquiry .inquiry_box li.inquiry_wdd textarea::-webkit-scrollbar{width:5px} #cont .inquiry .inquiry_box li.inquiry_wdd textarea::-webkit-scrollbar-thumb{background: #d6d9db; border-radius:5px} #cont .inquiry .inquiry_box li.inquiry_wfile{margin-top:20px; display: flex} #cont .inquiry .inquiry_box li.inquiry_wfile input[type=text]{width:100%; height:50px; border-radius: 15px; padding:0 20px; box-sizing: border-box} #cont .inquiry .inquiry_box li.inquiry_wfile .inq_file{display: none; width:0} #cont .inquiry .inquiry_box li.inquiry_wfile .btn_inp_file{ width:100px; height:50px; line-height: 50px; background: #0069b4; display: block; color: #fff; text-align: center; font-size: 12px; border-top-left-radius: 15px; border-bottom-left-radius: 15px; caret-color: transparent; cursor: pointer } #cont .inquiry .inquiry_box li.inquiry_wfile .inq_file_name{width:50%; padding-left:20px; border-top-right-radius: 15px; border-bottom-right-radius: 15px; background: #fff; caret-color: transparent; font-size: 12px} #cont .inquiry .inquiry_box .inq_inptt{width:100%; display: block; margin-bottom:13px} #cont .inquiry .inquiry_box .inq_inptt em{background: #d6d9db; font-size: 12px; padding:3px 10px; border-radius: 10px; font-style: normal} #cont .inquiry .inquiry_box .inquiry_wfile_btnset{display: flex; justify-content: space-between; margin-top:100px} #cont .inquiry .inquiry_box .inquiry_wfile_btnset button{font-size: 12px} #cont .inquiry .inquiry_box .inquiry_wfile_btnset li.btn_inqq2{width:calc(50% + 100px); display: block; text-align: right} #cont .inquiry .inquiry_box .inquiry_wfile_btnset li.btn_inqq2 button{width:100px; height:40px; background: #0069b4; color: #fff; border-radius: 20px} #cont .inquiry .inquiry_box .inquiry_wfile_btnset li.btn_inqlist button{ width:100px; height:40px; background: #f3f6f8; color: #0069b4; border: solid 2px #0069b4; border-radius: 20px; font-family: NanumB; } /*고객센터-문의게시판*/ #cont .question{position: relative} #cont .question .question_tab{width:100%; margin-top:30px; font-size: 14px} #cont .question .question_tab caption{font-family:NanumEB; text-align: left; font-size: 30px; padding-bottom:20px} #cont .question .question_tab thead{width:100%; height:49px; line-height: 49px; margin-top:20px; background: #f3f6f8; border-top:solid 1px #d6d9db} #cont .question .question_tab thead>tr{} #cont .question .question_tab thead>tr>th{font-family: Nanum; font-weight: normal} #cont .question .question_tab tbody>tr>td{padding:20px 0; text-align: center; background: url(/images/tab_line.png) 0 100% repeat-x} #cont .question .question_tab tbody>tr:hover{background: #fffdea} #cont .question .question_tab .que_tag{color: #999; font-size: 12px} #cont .question .question_tab .question_tab_st{text-align: left; padding-left:10px} #cont .question .que_ser_set{width:200px; height: 44px; border: solid 1px #e5e5e5; box-sizing: border-box; border-radius: 25px; position:absolute; top:-67px; right:0} #cont .question .que_ser_set input[type=text].inp_que_ser{width: calc(100% - 50px); height: 100%; box-sizing: border-box; border: 0; outline: none; background: rgba(0, 0, 0, 0); text-indent: 20px} #cont .question .que_ser_set button.btn_que_ser{width: 18px; height: 17px; background: url(/images/ico_ser.png) 50% no-repeat; text-indent: -9999px; overflow: hidden; padding: 18px; position: absolute; top: 3px; right: 10px; border: 0} #cont .question .que_btn_set{display: flex; justify-content: center; margin-top: 100px} #cont .question .que_btn_set button.que_btn{width: 135px; height: 40px; background: #0069b4; color: #fff; border-radius: 20px; margin: 0 15px} #cont .question .que_btn_set input[type=text].que_inp{width: 60px; height: 40px; border: solid 1px #d6d9db; border-radius: 20px; text-align: center} #cont .question .que_btn_set .que_tt{height: 40px; line-height: 40px; margin-left: 10px} #cont .question .que_btn_set button.que_btn_mtom{width: 135px; height: 40px; color: #0069b4; background: #fff; border-radius: 20px; position: absolute; right:0; border:solid 2px #0069b4; font-family: NanumB} #cont .question .question_read{} #cont .question .question_read dt{font-size: 18px; font-family: NanumB; margin-top: 30px} #cont .question .question_read dd{} #cont .question .question_read .question_cate{font-size: 12px; background: #afb1b2; color:#fff; padding:4px 8px; border-radius: 50px} #cont .question .question_read .question_st{display: block; margin-top:15px} #cont .question .question_read .question_date{width: 100%; height: 50px; line-height: 50px; background: #f3f6f8; border-top: solid 1px #d6d9db; box-sizing: border-box; text-align: right; font-size: 14px; padding: 0 30px 0 0; margin: 15px 0} #cont .question .question_read .question_date em{display: inline-block; height: 12px; background: #E0E0E0; width: 1px; margin: 0 10px; position: relative; top: 2px} #cont .question .question_read .question_cont_q{line-height: 24px; font-size: 14px} #cont .question .question_read .question_cont_a{border:solid 1px #d6d9db; line-height: 24px; font-size: 14px; margin-top:50px; border-radius: 15px} #cont .question .question_read .question_cont_a .question_cont_a1{display: block; padding:10px 20px; border-bottom:solid 1px #eaedee} #cont .question .question_read .question_cont_a .question_cont_a2{display: block; padding:20px} #cont .question .question_read .question_cont_empty{border:solid 1px #d6d9db; line-height: 24px; font-size: 14px; margin-top:50px; border-radius: 15px; padding:20px} #cont .question .question_read .question_btn_set{display: flex; justify-content: center; margin-top: 100px; position: relative} #cont .question .question_read .question_btn_set button.question_btn_up{ width: 135px; height: 40px; background: url(/images/likeit.png) 30px 50% no-repeat #fff; border:solid 2px #d6d9db; border-radius: 20px; color:#000; font-family: NanumB; padding-left:20px; box-sizing: border-box } #cont .question .question_read .question_btn_set button.question_btn_up:hover{ border:solid 2px #0069b4; background: url(/images/likeit_on.png) 30px 50% no-repeat #fff; color: #0069b4; transition: all .3s ease } #cont .question .question_read .question_btn_set .on{border:solid 2px #0069b4 !important; background: url(/images/likeit_on.png) 30px 50% no-repeat #fff !important; color: #0069b4 !important} #cont .question .question_read .question_btn_set button.question_btn_list{width: 135px; height: 40px; background: #0069b4; color: #fff; border-radius: 20px; position: absolute; right:0} #cont .question .question_tab_re{margin-top:100px; border-top:solid 1px #d6d9db} .question_wrap{margin-top:50px} .question_wrap .question_st{font-family: NanumB; padding : 0 0 20px 0; display: block} .question_wrap .question_ser_set{display: flex; justify-content: space-between} .question_wrap .question_ser_set .question_ser{width:200px; height: 44px; border: solid 1px #e5e5e5; box-sizing: border-box; border-radius: 25px; position: relative} .question_wrap .question_ser_set .question_ser input[type=text]{width: calc(100% - 50px); height: 100%; box-sizing: border-box; border: 0; outline: none; background: rgba(0, 0, 0, 0); text-indent: 20px; font-size: 12px} .question_wrap .question_ser_set .question_ser button{width: 18px; height: 17px; background: url(/images/ico_ser.png) 50% no-repeat; text-indent: -9999px; overflow: hidden; padding: 18px; position: absolute; top: 3px; right: 10px; border: 0} .question_wrap .question_ser_set .question_ser_tt{font-size: 12px; line-height: 44px; margin-left:20px; display: block} .question_wrap .question_cont{margin-top:20px; border:solid 1px #e5e5e5; padding:20px; border-radius: 15px} .question_wrap .question_cont ul{line-height: 24px} .question_wrap .question_cont ul>li{background: url(/images/tab_line.png) 0 100% repeat-x; padding:10px; cursor: pointer} .question_wrap .question_cont ul>li:hover{background: url(/images/tab_line.png) 0 100% repeat-x} .question_wrap .question_cont ul>li:nth-last-child(1){background: none} .question_wrap .question_cont ul>li>dl{/*display: flex; flex-wrap: wrap*/} .question_wrap .question_cont ul>li>dl>dt{width:100%; display: flex; justify-content: space-between} .question_wrap .question_cont ul>li>dl>dd.que_list_tt{font-size: 13px; line-height: 24px; padding:5px 0; display: none; font-family: Nanum} .question_wrap .question_cont ul>li>dl>dd.que_list_tt .que_q{display: inline-block; padding: 2px 7px; background: #e2f3ff; border-radius: 10px; font-family: NanumB; margin:0 0 5px 0} .question_wrap .question_cont ul>li>dl>dd.que_list_tt .que_qw{display: block} .question_wrap .question_cont ul>li>dl>dd.que_list_tt .que_a{display: inline-block; padding: 2px 7px; background: #ffeee2; border-radius: 10px; font-family: NanumB; margin:20px 0 5px 0} .question_wrap .question_cont ul>li>dl>dd.que_list_tt .que_aw{display: block} .question_wrap .question_cont ul>li>dl>dd.que_list_tt .que_qw *, .question_wrap .question_cont ul>li>dl>dd.que_list_tt .que_aw *{ font-family: Nanum !important; font-weight:normal !important; color: #000 !important; font-size: 12px !important; line-height: 18px !important} .question_wrap .question_cont ul>li>dl>dd.on{display: block !important} .question_wrap .question_cont ul>li>dl>dd.que_list_answer{} .question_wrap .question_cont ul>li>dl>dd.que_list_info{font-size: 12px; color:#999} .question_wrap .question_cont ul>li>dl>dd.que_list_info .que_list_info1{} .question_wrap .question_cont ul>li>dl>dd.que_list_info .que_list_info2{} .question_wrap .question_cont ul>li>dl>dd.que_list_info .que_list_info3{} .question_wrap .question_cont ul>li>dl>dd.que_list_info .que_list_info3 .likeit{ width:13px; height:12px; display: inline-block; background: url(/images/mlikeit.png) no-repeat; overflow: hidden; text-indent: -9999px; vertical-align: middle; padding-left:3px } .question_wrap .question_cont ul>li>dl>dd.que_list_info em{display: inline-block; height: 12px; background: #E0E0E0; width: 1px; margin: 0 10px; position: relative; top: 2px} .question_wrap .question_cont ul>li>dl>dt .que_list_st{font-size: 12px; font-family: NanumB; } .question_wrap .question_cont ul>li>dl>dt .que_list_date{font-size: 12px; color:#999} .question_wrap .que_btn_set{} .question_wrap .que_btn_set{display: flex; justify-content: center; margin-top: 50px} .question_wrap .que_btn_set button.que_btn1{width:24px; height:24px; background: url(/images/btn_arrow_left.png); text-indent: -9999px; overflow: hidden} .question_wrap .que_btn_set button.que_btn2{width:24px; height:24px; background: url(/images/btn_arrow_right.png); text-indent: -9999px; overflow: hidden} .question_wrap .que_btn_set input[type=text].que_inp{width: 60px; height: 40px; border: solid 1px #d6d9db; border-radius: 20px; text-align: center} .question_wrap .que_btn_set .que_tt{font-size: 14px; padding:0 20px; line-height: 24px} .question_wrap .que_btn_set button.que_btn_mtom{width: 135px; height: 40px; color: #0069b4; background: #fff; border-radius: 20px; position: absolute; right:0; border:solid 2px #0069b4; font-family: NanumB} /* 수강권 등록/자유이용권 구매 */ #cont .edu_app{} #cont .edu_app .edu_p1{display: flex; flex-wrap: wrap; margin-top:50px} #cont .edu_app h3.edu_p_st{width:100%; display: block} #cont .edu_app .edu_p1 .edu_p_gr{width:412px; height:255px; background: url(/images/online_edu.png) no-repeat; margin-top:20px} #cont .edu_app .edu_p1 .class_p_gr{width:412px; height:255px; background: url(/images/online_class.png) 50% no-repeat; margin-top:20px} #cont .edu_app .edu_p_dd{margin:50px 0 0 50px} #cont .edu_app .class_card{margin:40px 0 0 50px} #cont .edu_app .edu_p1 .edu_p_dd .edu_p_inpset{display: flex} #cont .edu_app .edu_p1 .edu_p_dd .edu_p_inpset .edu_inp{ width:350px; height:50px; background: #f3f6f8; border-top-left-radius: 15px; border-bottom-left-radius: 15px; outline: none; text-indent: 15px; font-size: 18px; font-family: NanumEB; border:solid 1px rgba(0,0,0,0) } #cont .edu_app .edu_p1 .edu_p_dd .edu_p_inpset .edu_inp:focus{border:solid 1px #0069b4} #cont .edu_app .edu_p1 .edu_p_dd .edu_p_inpset .edu_inp::placeholder{font-size: 14px; font-family: Nanum} #cont .edu_app .edu_p_dd .edu_p_inpset .btn_inp{width:60px; background: #0069b4; border-top-right-radius: 15px; border-bottom-right-radius: 15px; color: #fff} #cont .edu_app .edu_p_dd .edu_p_tt{margin-top:20px} #cont .edu_app .edu_p_dd .edu_p_tt li{line-height: 24px; font-size: 14px; background: url(/images/doc_st.gif) 0 10px no-repeat; padding-left:10px; margin-left:10px} #cont .edu_app .edu_p2{display: flex; flex-wrap: wrap; margin-top:100px} #cont .edu_app .edu_p2 .edu_p_gr{width:412px; height:255px; background: url(/images/online_edu2.png) 50% 20px no-repeat; margin-top:20px} #cont .edu_app .edu_p2 .edu_p_dd .edu_p_inpset{display: flex; background: #f3f6f8; border-top-left-radius: 15px; border-bottom-left-radius: 15px} #cont .edu_app .edu_p2 .edu_p_dd .edu_p_inpset .edu_inp{ width:80px; height:50px; background: rgba(0,0,0,0); outline: none; font-size: 18px; font-family: NanumEB; text-align: center; box-sizing: border-box } #cont .edu_app .edu_p2 .edu_p_dd .edu_p_inpset .edu_inp:focus{border:solid 1px #0069b4} #cont .edu_app .edu_p2 .edu_p_dd .edu_p_inpset .edu_inp_fst{ width:80px; height:50px; background: rgba(0,0,0,0); outline: none; font-size: 18px; font-family: NanumEB; text-align: center; box-sizing: border-box } #cont .edu_app .edu_p2 .edu_p_dd .edu_p_inpset .edu_inp_fst:focus{border:solid 1px #0069b4; border-top-left-radius: 15px; border-bottom-left-radius: 15px} #cont .edu_app .edu_p2 .edu_p_dd .edu_p_inpset .edu_inp_sec{display: block; line-height: 50px} /* 멤버쉽카드/자유이용권 등록하기 */ #cont .memcard{display: flex; margin:20px 0 0 0} #cont .memcard div.memcard_img{width:300px; height:186px; background: url(/images/freepass.png) no-repeat} #cont .memcard .memcard_gr{display: flex; margin-top:20px} #cont .memcard .memcard_gr li{text-indent: -9999px; overflow: hidden} #cont .memcard .memcard_gr li.memcard_mem{width:242px; height:156px; background: url(/images/mem_img001.png) no-repeat} #cont .memcard .memcard_gr li.memcard_free{width:106px; height:156px; background: url(/images/mem_img002.png) no-repeat; margin-left:10px} #cont .memcard .memcard_num_set{margin:50px 0 0 50px; display: flex} #cont .memcard .memcard_num_set .memcard_inp{ width:300px; height:50px; background: #f3f6f8; outline: none; border: solid 1px rgba(0,0,0,0); box-sizing: border-box; border-top-left-radius: 15px; border-bottom-left-radius: 15px; text-indent: 15px; font-size: 18px; font-family: NanumEB; } #cont .memcard .memcard_num_set .memcard_inp:focus{border:solid 1px #0069b4} #cont .memcard .memcard_num_set .memcard_inp::placeholder{font-size: 14px; font-family: Nanum} #cont .memcard .memcard_num_set .btn_memcard{width:60px; height:50px; background: #0069b4; border-top-right-radius: 15px; border-bottom-right-radius: 15px; color: #fff} /* 메인_고객센터 */ #info{width:100%; background: #edf0f2; margin:100px 0 0 0; padding:50px 0; display:inline-block} #info .info_wrap{width:1120px; margin:0 auto} #info .customer{width:40%; display: flex; letter-spacing: -1px; float:left} #info .customer .cus_part1{} #info .customer .cus_part1 h2{font-size: 150%; font-family: NanumB} #info .customer .cus_part1 .tel{font-size: 220%; font-family: NanumEB; letter-spacing: -2px; display: block; margin:10px 0 0 0} #info .customer .cus_part2{margin:-6px 0 0 10%; display: block} #info .customer .cus_part2 span:first-of-type{} #info .customer .cus_part2 span{display: block; margin-top:8px} #info .bank{width:60%; display: flex; letter-spacing: -1px; float:right} #info .bank .bank_part1{margin-left:10%; padding-left:10%; background: url(/images/customer_line.png) 0 50% no-repeat} #info .bank .bank_part1 h2{font-size: 150%; font-family: NanumB} #info .bank .bank_part1 .bank_num{font-size: 220%; font-family: NanumEB; letter-spacing: -2px; display: block; margin:10px 0 0 0} #info .bank .bank_part2{margin:7px 0 0 10%; display: block} #info .bank .bank_part2 span:first-of-type{} #info .bank .bank_part2 span{display: block; margin-top:8px} #itgo_rule{padding:20px; font-size: 16px} #itgo_rule .logo{width:105px; height:38px; background: url(/images/logo.png) no-repeat; overflow: hidden; text-indent: -9999px; margin-bottom:35px} #itgo_rule .rule_box{line-height: 18px} #itgo_rule h2{margin-bottom:20px} #itgo_rule .pb1{font-family: NanumEB; display: block; font-size: 18px; padding:50px 0 20px 0} #itgo_rule .pb2{font-family: NanumB; display: block; font-size: 16px; padding-bottom:10px} footer{width:1120px; margin:0 auto; position: relative} footer .family_site{position: absolute; right:0; margin-top:88px} footer .family_site ul.family_list{position: absolute; margin-top:-183px; display: none; background: #fff} footer .family_site ul.family_list li{width:242px; height:42px; margin-bottom:5px} footer .family_site ul.family_list li:nth-child(1){background: url(/images/family_bn004.png) 120px 50% no-repeat #f3f6f8} footer .family_site ul.family_list li:nth-child(2){background: url(/images/family_bn001.png) 120px 50% no-repeat #f3f6f8} footer .family_site ul.family_list li:nth-child(3){background: url(/images/family_bn002.png) 120px 50% no-repeat #f3f6f8} footer .family_site ul.family_list li:nth-child(4){background: url(/images/family_bn003.png) 120px 50% no-repeat #f3f6f8} footer .family_site ul.family_list li em{width:121px; height:42px; font-size: 12px; line-height: 42px; text-align: center; display: block} footer .family_basic{width:242px; height:42px; background: url(/images/footer_arrow.png) 200px 50% #f3f6f8 no-repeat; display: block; line-height: 42px; text-align: center; font-size: 14px; cursor: pointer} footer .condition{display: flex; font-size:14px; padding:100px 0 50px 0; justify-content: center} footer .condition dd{} footer .condition dd a{padding:5px 30px} footer .copyright{font-size: 12px; padding-bottom:50px; line-height: 16px; text-align: center} .tbl-tag { margin-right:7px; display: inline-block; min-width: 68px; padding: 0 6px; height: 28px; line-height: 28px; font-size: 15px; font-weight: 400; color: #fff; font-style: normal; border-radius: 6px; text-align: center; background-color: #4369e3; }