@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@300..700&display=swap');
@import url('https://webfontworld.github.io/NanumSquareNeo/NanumSquareNeo.css');

*{margin:0; padding:0;
    list-style:none;
    box-sizing:border-box;}

body{background-color: #ffffff;
    color:#000000;
    font-family: 'NanumSquareNeo';}

a{text-decoration: none;
    color:inherit;}

.wrap{width:100%;
    margin:0 auto;}


.content_wrap{width:100%;
                height:100vh;
                background: url("../images/bg3.png") no-repeat;
                background-size: cover;
                background-position-y:-160px ;
                display: flex;
                justify-content: space-around;}

.mokup_box{width:60%;
        height:auto;
        margin-top:150px;
        margin-left:200px;
        position:relative;}   

.mokup_box img{position:absolute;}

.pc{width:600px;}
.laptop{width: 380px;
        top: 320px;
        left: -120px;}
.tablet{width:180px;
        top:290px;
        left:385px;}
.phone{position: absolute;
        width:110px;
        top:325px;
        left:556px;}

.phone > img{position: absolute;
            width:100%;
            top:0;
            left:0;}

.full_pc{position:absolute;
        width:578px;
        height:328px;
        top:10px;
        left:10px;
        overflow: hidden;}

.full_pc img{width:100%;
        transition:2.5s;}

.full_pc:hover img{margin-top:-1224px;}

.full_laptop{position:absolute;
            width: 290px;
            height:185px;
            top: 333px;
            left: -75px;
            overflow: hidden;}

.full_laptop img{width:100%;
                transition:2s;}

.full_laptop:hover img{margin-top:-593px;}


.full_tablet{position:absolute;
        width: 164px;
        height: 232px;
        top: 300px;
        left: 393px;
        overflow: hidden;}

.full_tablet img{width:100%;
            transition:3s;}

.full_tablet:hover img{margin-top:-784px;}

.full_phone{position:absolute;
            width:96px;
            height: 208px;
            top: 5px;
            left: 7px;
            border-radius: 12px;
            overflow: hidden;}

.full_phone img{width:100%;
                transition:2s;}

.phone:hover .full_phone img{margin-top:-294px;}


/*----설명----*/


.text_box{width:45%;
        margin-right: 26px;
        margin-top:170px;}

.text_box p{width:380px;
        padding:16px 0;
        line-height: 20px;
        text-align: justify;
        font-size: 14px;}

.text_box ul {font-size: 12px;
            width:300px;}

.text_box ul li{line-height: 20px;}

.text_box .title{display: inline-block;
                width:100px;
                font-weight: bold;}

.coloricon{display: inline-block;
            width:10px;
            height:10px;
            border-radius: 20px;
            margin-right:2px;}

.coloricon:nth-child(2){background-color: #000000;}
.coloricon:nth-child(3){background-color: #1F2834;}
.coloricon:nth-child(4){background-color: #ffffff;
                        border:1px solid #dddddd;}



.keyword_wrap{width:380px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top:10px;}

.keyword_wrap div{width:100px;
                height:100px;
                text-align: center;
                border: 1px solid #dddddd;
                border-radius: 100%;
                background-color: #ffffff;}

.keyword_wrap div span{font-size: 14px;
                        line-height: 100px;}


.qr{width:100px;
        height:100px;
        margin-top:10px;}
.qr > p{font-size: 12px;
        font-weight: bold;
        padding-top:0;}
.qr img{width:100%;
        border-radius: 10px;}

.view_btn{float: right;
        width:100px;
        height:35px;
        margin-top:-8px;
        margin-right: 125px;
        line-height: 35px;
        text-align: center;
        font-size: 14px;
        font-weight: bold;
        color:#ffffff;
        background-color:#1F2834;
        border-radius: 20px;
        cursor: pointer;}

/* .arrow{position: relative;
        width:10px;
        height:10px;} */


/*
.arrow::after {position: absolute;
                left: 5px; 
                top: 2px; 
                content: '';
                width: 10px;
                height: 10px;
                border-top: 1px solid #ff4848;
                border-right: 1px solid #ff4848;
                transform: rotate(45deg);}
*/