@charset "utf-8";
/**************************************************

	Respond.css ( ver 1.0.2 )

**************************************************/
/**************************************************
	Setting Device Width
**************************************************/
#_device_pc{display: block;} #_device_ta{display: none;} #_device_mo{display: none;} .__pc{display: block !important;} .__ta{display: none !important;} .__mo{display: none;}
@media screen and (min-width: 750px) and (max-width: 1024px){#_device_pc{display: none;} #_device_ta{display: block;} #_device_mo{display: none;} .__pc{display: none !important;} .__ta{display: block !important;} .__mo{display: none;}}
@media screen and (max-width: 750px){#_device_pc{display: none;} #_device_ta{display: none;} #_device_mo{display: block;} .__pc{display: none !important;} .__ta{display: none;} .__mo{display: block !important;} }

/**************************************************
	Layout
**************************************************/
@media screen and (max-width: 1300px){

	html{min-width: 320px;padding-top: 45px;}

    .policybox{white-space: pre-wrap;width: auto;padding: 0 10px;font-size: 13px;line-height: 20px;}

    .mt80{margin-top: 30px !important;}
    .mt60{margin-top: 20px !important;}
    .mt30{margin-top: 10px !important;}

    .bbtn1{ height: 40px;line-height: 40px;padding: 0 20px;font-size: 14px;border-radius: 40px;}
    .bbtn2{ height: 40px;line-height: 40px;padding: 0 20px;font-size: 14px;border-radius: 40px;}

    /* etc */
    .fontlist{margin: -0.5%;}
    .fontlist > li{margin: 0.5%;width: 49%;}
    .fontlist > li .link:hover{border-width: 2px;}
    .fontlist.len6{margin: -0.5%;}
    .fontlist.len6 > li{width: 49%;margin: 0.5%;}

	#header{position: fixed;top: 0;left: 0;width: 100%;}
	#header .inner{width: auto;height: 45px;}
	#header .logo{width: 50px;line-height: 45px;left: 10px;}
	#header .logo img{position: absolute;width: auto;height: 100%;}

	#gnb{display: none;}

	.table1 colgroup{display: none;}
	.table1 tr > *{font-size: 11px;line-height: 15px;}
	.table1 tbody th{font-size: 12px;letter-spacing: -1px;width: 80px;}
    .table1 .inp{width: 100%;border: 1px solid #ddd;height: 35px;display: inline-block;vertical-align: top;box-sizing: border-box;}
    .table1 .inp.w50p{width: 70%;}
    .table1 .inp-pass{font-size: 20px;}
    .table1 .tbl-sment{font-size: 12px;line-height: 16px;}

    /* Tab */
    .tab1{ margin-bottom: 20px;}
    .tab1 > li a{height: 35px;line-height: 35px;padding: 0 20px;font-size: 13px;}

	#tnb{display: none;}

	#slide-btn{top: 15px;right: 10px;display: block;}
	#slide-btn a{width: 24px;height: 15px;background-size: contain;background-position: center center;background-repeat: no-repeat;}

    #footer .fnbWrap .inner{width: auto;}
    #footer .ftWrap{width: auto;padding: 10px 0;}
    #footer address{font-size: 11px;line-height: 16px;padding-left: 0;padding-top: 50px;background: url('/images/layout/flogo.jpg') no-repeat center 10px;background-size: auto 20px;text-align: center;}
    #footer address hr{display: block;margin: 0;}
    #footer address .copyright{font-size: 11px;}

	#gotop{display: none;}

    #fnb{text-align: center;}
    #fnb > li a{font-size: 12px;line-height: 40px;}

	#slide-menu{position: fixed;top: 0;right: -100%;width: 80%;height: 100%;background: #fff;z-index: 201;overflow-y: auto;transition: all 0.3s cubic-bezier(0.930, 0.635, 0.650, 0.970);}
	#slide-menu .tit{height: 50px;position: relative;background: #088ac8;}
	#slide-menu.on{right: 0;}

	#gnb-mo > li{border-bottom: 1px solid #e1e1e1;}
	#gnb-mo > li > a{display: block;line-height: 40px;padding: 0 15px;font-size: 14px;letter-spacing: -1px;color: #333;text-decoration: none;}
	#gnb-mo > li > ul{padding: 10px 15px;border-top: 1px solid #e1e1e1;background: #f7f7f7;display: none;}
	#gnb-mo > li > ul li a{line-height: 30px;font-size: 14px;color: #666;text-decoration: none;}

    #ftqk ul{width: auto;}
    #ftqk ul li{width: 25%;height: 130px;padding-top: 20px;}
    #ftqk ul li img{margin-bottom: 10px;width: 30px;height: auto;}
    #ftqk ul li strong{font-size: 13px;line-height: 15px;padding: 0 10px;word-break:keep-all !important; -ms-word-break: break-all; word-break: break-all; word-break: break-word; -webkit-hyphens: auto; -moz-hyphens: auto; hyphens: auto;}
    #ftqk ul li em{position: absolute;bottom: 10px;left: 0;width: 100%;}

}

/**************************************************
	Main
**************************************************/
@media screen and (max-width: 1300px){

    #main .visual .roll li img{left: 0;margin-left: 0;width: 100%;height: auto;}
    #main .visual .bx-pager{bottom: 10px;}
    #main .visual .bx-pager-item{margin: 0;}
    #main .visual .bx-pager-item a{background-size: contain;width: 15px;height: 15px;}

    #main .tadak{padding: 20px 10px;}
    #main .tadak h4{margin-bottom: 15px;}
    #main .tadak h4 img{width: auto;height: 15px;}
    #main .tadak > img{width: 300px;height: auto;}

    #main .plan-box > *{float: none;width: 100%;}
    #main .plan-box dt img{width: 100%;height: auto;}
    #main .plan-box dd{padding: 15px !important;}
    #main .plan-box .tit{margin-bottom: 10px;text-align: center;}
    #main .plan-box .tit img{height: 18px;}
    #main .plan-box p{font-size: 12px;line-height: 16px;margin-bottom: 10px;text-align: center;}
    #main .plan-box .txt{margin-bottom: 10px;text-align: center;}
    #main .plan-box .txt img{width: auto;height: 30px;}
    #main .plan-box .more{margin-top: 10px;width: 120px;line-height: 30px;font-size: 13px;}
    #main .plan-box.lef dd{text-align: center;}
    #main .plan-box.rig dd{text-align: center;}

    #main .font-wrap{padding: 20px 10px;margin-bottom: 20px;}
    #main .font-wrap .inner{width: auto;padding-bottom: 60px;}
    #main .font-wrap h4{margin-bottom: 20px;font-size: 16px;}
    #main .font-wrap .bn{margin: 0;}
    #main .font-wrap .bn li{margin: 2px 0;width: 100%;}
    #main .font-wrap .bn li img{width: 100%;height: auto;}

    #main .font-wrap .more{padding-top: 25px;font-size: 12px;}
    #main .font-wrap .more:before{height: 20px;}

    #main .planbox2{width: auto;margin-bottom: 20px;}
    #main .planbox2 > *{float: none;width: auto;}
    #main .planbox2 dt img{width: 100%;height: auto;}
    #main .planbox2 dd{padding: 20px;}
    #main .planbox2 dd:before{display: none;}
    #main .planbox2 dd .in{display: block;}
    #main .planbox2 dd h4{margin-bottom: 10px;}
    #main .planbox2 dd h4 img{width: auto;height: 20px;}
    #main .planbox2 dd p img{width: auto;height: 60px;}
    #main .planbox2 dd .more{display: block;margin-top: 30px;width: 140px;line-height: 40px;text-align: center;background: #888888;font-weight: 300;color: #fff;text-decoration: none;}
    #main .planbox2 dd .more:hover{background: #333333;box-shadow: 5px 5px 10px rgba(0,0,0,0.1);}

    #main .newfont{padding: 25px 0;}
    #main .newfont h4{margin-bottom: 10px;}
    #main .newfont h4 img{width: auto;height: 20px;}
    #main .newfont .cont{width: auto;height: 13px;}
    #main .newfont .rollWrap{width: auto;margin-top: 20px;}
    #main .newfont .roll{margin: -2px;}
    #main .newfont .roll li{margin: 2px;width: calc(50% - 4px);}
    #main .newfont .bx-pager{margin-top: 10px;}
    #main .newfont .bx-pager-item{margin: 0;}
    #main .newfont .bx-pager-item a{background-size: contain;width: 15px;height: 15px;}

}

/**************************************************
	Sub
**************************************************/
@media screen and (max-width: 1300px){

    #sub{  }
    #sub #content{ padding: 20px 0; }

    #sub .w1300{width: 100%;padding: 0 10px;box-sizing: border-box;}

    #sub img{max-width: 100%;height: auto !important;}

    #sub .sub-tit{margin-bottom: 15px;}
    #sub .sub-tit img{width: auto;height: 17px;}
    #sub .sub-tit2{margin-bottom: 15px;font-size: 16px;}
    #sub .sub-txt{margin-bottom: 10px;font-size: 12px;line-height: 16px;}

    #sub .sub-vis{height: 110px;;}
    #sub .sub-vis:before{height: 110px;}
    #sub .sub-vis h2 img{width: 270px;height: auto;}
    #sub .sub-vis h2 em{font-size: 11px;}

    #itv{margin-bottom: 20px;}
    #itv > *{float: none;box-sizing: border-box;}
    #itv .lef{width: 100%;}
    #itv .lef .plan{height: auto;padding: ;}
    #itv .lef .plan:before{display: none;}
    #itv .lef .plan .in > img{position: static;}
    #itv .lef .plan ul{margin-top: 15px;line-height: 18px;}
    #itv .lef .plan ul br{display: none;}
    #itv .lef .plan ul li{padding: 0 5px;font-size: 11px;display: block;}
    #itv .lef .plan ul li:before{display: none;}
    #itv .lef .infotxt li{font-size: 12px;line-height: 16px;padding-left: 7px;}
    #itv .lef .infotxt li:before{top: 9px;width: 2px;height: 2px;}
    #itv .rig{width: auto;margin-left: 0;margin-top: 15px;}
    #itv .rig .plan-tit{padding-bottom: 10px;font-size: 18px;}
    #itv .rig .infotxt{padding: 15px 10px;}
    #itv .rig .infotxt li{padding-left: 10px;font-size: 12px;line-height: 16px;}
    #itv .rig .infotxt li:before{top: 9px;width: 2px;height: 2px;}
    #itv .rig .opt .lab{padding: 20px 20px 20px 45px;background: #f8f8f8 url('/images/sub/itv-opt-bull.jpg') no-repeat 20px 23px;background-size: 15px auto;}
    #itv .rig .opt .lab p{font-size: 14px;}
    #itv .rig .opt .lab em{font-size: 12px;}
    #itv .rig .opt .lab .tot{top: 25px;right: 15px;font-size: 14px;}
    #itv .rig .opt .lab .tot strong{font-size: 18px;}
    #itv .rig .btnWrap .cart{height: 45px;background-size: 25px auto;}
    #itv .rig .btnWrap .buy{height: 45px;line-height: 45px;}

    .it-tab{margin: 20px 0 10px 0;background: none;border: none;}
    .it-tab li{width: 49.6%;margin: 0.2%;background: #f2f2f2;}
    .it-tab li:before{display: none;}
    .it-tab li a{line-height: 35px;font-size: 13px;}

    .itv-fontlist{padding-bottom: 60px;margin-top: 20px;}
    .itv-fontlist h4{font-size: 16px;}
    .itv-fontlist h4 em{font-size: 12px;}
    .itv-fontlist .more{padding-top: 25px;font-size: 12px;}
    .itv-fontlist .more:before{height: 20px;}

    .font-det{margin: 0;margin-top: 20px;}
    .font-det li{margin: 0 0 5px 0;width: 100%;height: auto;display: block;padding: 20px 20px 20px 80px;min-height: 120px;}
    .font-det li .ico{top: 20px;left: 10px;width: 60px;}
    .font-det li .ico img{width: 40px;height: auto;}
    .font-det li .ico strong{font-size: 12px;letter-spacing: -1px;}
    .font-det li .d-tit{font-size: 13px;}
    .font-det li .d-txt{font-size: 12px;line-height: 16px;}

    .fonts-list .bn{margin: -10px;}
    .fonts-list .bn li{position: relative;margin: 10px;display: inline-block;}
    .fonts-list .bn li .link{position: absolute;top: 0;left: 0;width: 100%;height: 100%;}
    .fonts-list .more{position: absolute;bottom: 0;left: 50%;width: 90px;padding-top: 50px;margin-left: -45px;text-align: center;font-size: 15px;color: #333333;font-weight: 300;text-decoration: none;transition: all 0.3s cubic-bezier(0.930, 0.635, 0.650, 0.970);}
    .fonts-list .more:before{content: '';display: block;position: absolute;top: 0;left: 50%;margin-left: -1px;width: 2px;height: 40px;background: #000000;transition: all 0.3s cubic-bezier(0.930, 0.635, 0.650, 0.970);}
    .fonts-list .more:hover{color: #00a0d6;}
    .fonts-list .more:hover:before{background: #00a0d6;}

    .planbox{margin: 20px 0;}
    .planbox dd{padding: 20px 10px;}
    .planbox dd > img{height: 23px !important;width: auto;}
    .planbox dd .person{font-size: 13px;}
    .planbox dd ul{margin-top: 10px;line-height: 18px;}
    .planbox dd ul br{display: none;}
    .planbox dd ul li{display: block;font-size: 12px;}
    .planbox dd ul li:before{display: none;}
    .planbox dt{padding: 15px;}
    .planbox dt .prc{display: block;margin: 3px 0;}
    .planbox dt .prc em{line-height: 18px;font-size: 12px;border-width: 1px;}
    .planbox dt .prc p{font-size: 14px;}

    .planlist{margin: -0.5%;}
    .planlist > li{margin: 0.5%;width: 49%;}
    .planlist .plan:before{display: none;}
    .planlist .plan .in > img{position: static;}
    .planlist .plan .person{font-size: 12px;margin-bottom: 10px;}
    .planlist .plan em{font-size: 11px;line-height: 14px;}
    .planlist .plan:after{width: 30px;height: 30px;}
    .planlist .info{padding: 0 10px;line-height: 45px;height: 45px;}
    .planlist .info .prc em{top: 10px;width: 35px;line-height: 20px;border-radius: 20px;font-size: 11px;}
    .planlist .info .prc p{line-height: 45px;font-size: 14px;}

    .planlist > li.embed .plan{background: #3e2d86;}

    .inst-vis{height: auto;margin-top: -130px;padding: 40px 0;}
    .inst-vis h2{margin-bottom: 20px;}
    .inst-vis h2 img{width: 250px;height: auto;}
    .inst-vis .btn a{margin: 0 8px;}
    .inst-vis .btn a img{width: 140px;height: auto;}
    .inst-vis em{margin-top: 20px;font-size: 12px;line-height: 16px;}

    .inst-step{padding: 20px 0;}
    .inst-step h4{margin-bottom: 20px;}
    .inst-step h4 img{width: auto;height: 18px !important;}
    .inst-step ul li{display: block;margin-left: 0;margin-bottom: 15px;}
    .inst-step ul li:before{display: none;}
    .inst-step ul li p{font-size: 14px;margin-top: 0;}
    .inst-step ul li em{font-size: 12px;}
    .inst-step .view-vod{margin-top: 20px;width: 200px;line-height: 40px;font-size: 13px;}

    .inst-info{padding: 20px 0;}
    .inst-info h4{margin-bottom: 15px;}
    .inst-info h4 img{width: auto;height: 18px !important;}
    .inst-info h4 em{margin-top: 10px;font-size: 11px;margin-top: 5px;}
    .inst-info .box{width: auto;padding-left: 0;min-height: 0;}
    .inst-info .box .tmb{display: block;position: static;top: 0;left: 0;margin: 0 auto;margin-bottom: 15px;width: 200px;height: auto;}

    .inst-info .box ul{margin: 0 10px;}
    .inst-info .box ul li{margin-bottom: 20px;padding-left: 45px;}
    .inst-info .box ul li .no{top: -2px;width: 30px;height: 30px;line-height: 30px;font-size: 11px;}
    .inst-info .box .b-tit{font-size: 13px;}
    .inst-info .box .b-txt{font-size: 12px;line-height: 16px;}
    .inst-info .box .buy-btn{margin: 0 auto;margin-top: 20px;width: 200px;line-height: 40px;font-size: 13px;}

    .coupon-vis{height: auto;margin: -20px 0;padding: 60px 20px;}
    .coupon-vis h2{margin-bottom: 25px;}
    .coupon-vis form .inp{width: 17%;height: 38px;line-height: 38px;border-radius: 38px;font-size: 14px;padding: 0;}
    .coupon-vis form .mar{margin: 0 2px;}
    .coupon-vis form .sbm{width: 15%;height: 38px;line-height: 38px;border-radius: 38px;font-size: 14px;}

    .buyfns-vis{height: auto;margin: -20px 0;padding: 60px 20px;}
    .buyfns-vis h2{letter-spacing: -1px;font-size: 20px;}
    .buyfns-vis h3{font-size: 15px;}



}